yangjun
/
hldy_yunwei_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加滑块验证码及修复bug

This commit is contained in:
yangjun 2025-07-29 15:47:00 +08:00
parent 790c382e28
commit d7d233acd9
5 changed files with 308 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/sys/user.ts
View File

@ -23,6 +23,7 @@ enum Api {
GetPermCode = '/sys/permission/getPermCode',
//新加的获取图形验证码的接口
getInputCode = '/sys/randomImage',
randomCode = '/sys/randomInputCode',
//获取短信验证码的接口
getCaptcha = '/sys/sms',
//注册接口
@ -114,6 +115,10 @@ export function getCodeInfo(currdatetime) {
let url = Api.getInputCode + `/${currdatetime}`;
return defHttp.get({ url: url });
}
export function randomCode(currdatetime) {
let url = Api.randomCode + `/${currdatetime}`;
return defHttp.get({ url: url });
}
/**
* @description: 获取短信验证码
*/

213
src/views/admin/orginfo/components/OrgInfoForm.vue
View File

@ -8,11 +8,8 @@
<a-col :span="24">
<SectionDivider :title="'机构信息'" />
</a-col>
<a-col :span="12">
<a-form-item label="机构名称" v-bind="validateInfos.departName" id="WorkOrderForm-departName" name="departName">
{{formData.departName}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构编码" v-bind="validateInfos.orgCode" id="WorkOrderForm-orgCode" name="orgCode">
{{formData.orgCode}}
@ -24,105 +21,42 @@
{{formData.orgLeader}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构位置">
{{cityViewValue}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构负责人电话" v-bind="validateInfos.orgLeaderPhone" id="OrgApplyInfoForm-orgLeaderPhone"
name="orgLeaderPhone">
{{formData.orgLeaderPhone}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构名称" v-bind="validateInfos.departName" id="WorkOrderForm-departName" name="departName">
{{formData.departName}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构房屋性质" v-bind="validateInfos.orgPropertyType" id="OrgApplyInfoForm-orgPropertyType"
name="orgPropertyType">
{{formData.orgPropertyType}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构建筑面积" v-bind="validateInfos.orgBuildingArea" id="OrgApplyInfoForm-orgBuildingArea"
name="orgBuildingArea">
{{formData.orgBuildingArea}} ㎡
</a-form-item>
</a-col>
<!-- <a-col :span="12">
<a-form-item label="机构所在地">
{{cityViewValue}}
</a-form-item>
</a-col> -->
<a-col :span="12">
<a-form-item label="机构地址" v-bind="validateInfos.orgAddress" id="OrgApplyInfoForm-orgAddress"
name="orgAddress">
{{formData.orgAddress}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="机构建筑面积" v-bind="validateInfos.orgBuildingArea" id="OrgApplyInfoForm-orgBuildingArea"
name="orgBuildingArea">
{{formData.orgBuildingArea}} ㎡
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<SectionDivider :title="'申请人身份证'" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="身份证正面" v-bind="validateInfos.cardZmPath" id="OrgApplyInfoForm-cardZmPath"
name="cardZmPath">
<JImageUpload :fileMax="1" v-model:value="formData.cardZmPath" :disabled="true"></JImageUpload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身份证反面" v-bind="validateInfos.cardFmPath" id="OrgApplyInfoForm-cardFmPath"
name="cardFmPath">
<JImageUpload :fileMax="1" v-model:value="formData.cardFmPath" :disabled="true"></JImageUpload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="姓名" v-bind="validateInfos.name" id="OrgApplyInfoForm-name" name="name">
{{formData.name}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="性别" v-bind="validateInfos.sex" id="OrgApplyInfoForm-sex" name="sex">
{{formData.sex}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身份证号" v-bind="validateInfos.idCard" id="OrgApplyInfoForm-idCard" name="idCard">
{{formData.idCard}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="出生日期" v-bind="validateInfos.birthDate" id="OrgApplyInfoForm-birthDate"
name="birthDate">
{{formData.birthDate?formData.birthDate.substring(0,10):""}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="有效开始日期" v-bind="validateInfos.startTime" id="OrgApplyInfoForm-startTime"
name="startTime">
{{formData.startTime?formData.startTime.substring(0,10):""}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="有效结束日期" v-bind="validateInfos.endTime" id="OrgApplyInfoForm-endTime" name="endTime">
{{formData.endTime?formData.endTime.substring(0,10):""}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="民族" v-bind="validateInfos.national" id="OrgApplyInfoForm-national" name="national">
{{formData.national}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="住址" v-bind="validateInfos.idCardAddress" id="OrgApplyInfoForm-idCardAddress"
name="idCardAddress">
{{formData.idCardAddress}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="签发机关" v-bind="validateInfos.issuingAuthority" id="OrgApplyInfoForm-issuingAuthority"
name="issuingAuthority">
{{formData.issuingAuthority}}
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<SectionDivider :title="'营业执照'" />
@ -136,28 +70,28 @@
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="企业名称" v-bind="validateInfos.comName" id="OrgApplyInfoForm-comName" name="comName">
{{formData.comName}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="企业注册地址" v-bind="validateInfos.comRegisterAddress"
id="OrgApplyInfoForm-comRegisterAddress" name="comRegisterAddress">
{{formData.comRegisterAddress}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="企业信用代码" v-bind="validateInfos.comCreditCode" id="OrgApplyInfoForm-comCreditCode"
<a-form-item label="信用代码" v-bind="validateInfos.comCreditCode" id="OrgApplyInfoForm-comCreditCode"
name="comCreditCode">
{{formData.comCreditCode}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="企业名称" v-bind="validateInfos.comName" id="OrgApplyInfoForm-comName" name="comName">
{{formData.comName}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="企业法人" v-bind="validateInfos.comLegalPerson" id="OrgApplyInfoForm-comLegalPerson"
name="comLegalPerson">
{{formData.comLegalPerson}}
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="注册地址" v-bind="validateInfos.comRegisterAddress"
id="OrgApplyInfoForm-comRegisterAddress" name="comRegisterAddress">
{{formData.comRegisterAddress}}
</a-form-item>
</a-col>
<!-- <a-col :span="24">
<SectionDivider :title="'加盟审核'" />
@ -169,6 +103,85 @@
</a-col> -->
</a-row>
<a-row>
<a-col :span="24">
<SectionDivider :title="'申请人身份证'" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-row>
<a-col :span="24">
<a-form-item label="身份证正面" v-bind="validateInfos.cardZmPath" id="OrgApplyInfoForm-cardZmPath"
name="cardZmPath">
<JImageUpload :fileMax="1" v-model:value="formData.cardZmPath" :disabled="true"></JImageUpload>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="姓名" v-bind="validateInfos.name" id="OrgApplyInfoForm-name" name="name">
{{formData.name}}
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="性别" v-bind="validateInfos.sex" id="OrgApplyInfoForm-sex" name="sex">
{{formData.sex}}
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="出生日期" v-bind="validateInfos.birthDate" id="OrgApplyInfoForm-birthDate"
name="birthDate">
{{formData.birthDate?formData.birthDate.substring(0,10):""}}
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="身份证号" v-bind="validateInfos.idCard" id="OrgApplyInfoForm-idCard" name="idCard">
{{formData.idCard}}
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="住址" v-bind="validateInfos.idCardAddress" id="OrgApplyInfoForm-idCardAddress"
name="idCardAddress">
{{formData.idCardAddress}}
</a-form-item>
</a-col>
</a-row>
</a-col>
<a-col :span="12">
<a-row>
<a-col :span="24">
<a-form-item label="身份证反面" v-bind="validateInfos.cardFmPath" id="OrgApplyInfoForm-cardFmPath"
name="cardFmPath">
<JImageUpload :fileMax="1" v-model:value="formData.cardFmPath" :disabled="true"></JImageUpload>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="有效开始日期" v-bind="validateInfos.startTime" id="OrgApplyInfoForm-startTime"
name="startTime">
{{formData.startTime?formData.startTime.substring(0,10):""}}
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="有效结束日期" v-bind="validateInfos.endTime" id="OrgApplyInfoForm-endTime" name="endTime">
{{formData.endTime?formData.endTime.substring(0,10):""}}
</a-form-item>
</a-col>
<!-- <a-col :span="24">
<a-form-item label="民族" v-bind="validateInfos.national" id="OrgApplyInfoForm-national" name="national">
{{formData.national}}
</a-form-item>
</a-col> -->
<a-col :span="24">
<a-form-item label="签发机关" v-bind="validateInfos.issuingAuthority" id="OrgApplyInfoForm-issuingAuthority"
name="issuingAuthority">
{{formData.issuingAuthority}}
</a-form-item>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<SectionDivider :title="'审核信息'" />
@ -293,8 +306,9 @@ const formData = reactive<Record<string, any>>({
franchiseTime: null,
contract: null,
});
const cityViewValue = ref('')
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 8 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
@ -334,6 +348,7 @@ function edit(record) {
tmpData[key] = record[key]
}
})
//赋值
Object.assign(formData, tmpData);
});
@ -342,6 +357,10 @@ function edit(record) {
function open(orgCode) {
getOrgInfo({ orgCode }).then(res => {
Object.assign(formData, res);
cityViewValue.value = res.orgProvince
+ (!!res.orgCity ? res.orgCity : '')
+ (!!res.orgDistrict ? res.orgDistrict : '')
})
}

6
src/views/admin/workorder/components/WorkOrderForm.vue
View File

@ -57,7 +57,7 @@
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="回复时间" v-bind="validateInfos.replyTime" id="WorkOrderForm-replyTime" name="replyTime">
<a-form-item label="反馈时间" v-bind="validateInfos.replyTime" id="WorkOrderForm-replyTime" name="replyTime">
{{formData.replyTime?formData.replyTime:'暂未处理'}}
</a-form-item>
</a-col>
@ -67,12 +67,12 @@
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="回复附件" v-bind="validateInfos.replyFile" id="WorkOrderForm-replyFile" name="replyFile">
<a-form-item label="反馈附件" v-bind="validateInfos.replyFile" id="WorkOrderForm-replyFile" name="replyFile">
<JUpload v-model:value="formData.replyFile" :maxCount="1"></JUpload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="回复内容" v-bind="validateInfos.replyContent" id="WorkOrderForm-replyContent" name="replyContent">
<a-form-item label="反馈内容" v-bind="validateInfos.replyContent" id="WorkOrderForm-replyContent" name="replyContent">
{{formData.replyContent}}
</a-form-item>
</a-col>

21
src/views/system/loginmini/MiniLogin.vue
View File

@ -53,7 +53,10 @@
</a-col>
</a-row>
</div>
<div class="aui-inputClear">
<div >
<huakuai @verifySuccess="checkInputCode"/>
</div>
<!-- <div class="aui-inputClear">
<a-row>
<a-col :span="2">
<span style="margin-top: 10px;display: block;"><img :src="icon3Img" alt="验证码" style="width: 20px;" /></span>
@ -70,7 +73,7 @@
</div>
</a-col>
</a-row>
</div>
</div> -->
</div>
</a-form>
</div>
@ -92,7 +95,7 @@
</div>
</template>
<script lang="ts" setup name="login-mini">
import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
import { getCaptcha, getCodeInfo,randomCode } from '/@/api/sys/user';
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
import codeImg from '/@/assets/images/checkcode.png';
import { Rule } from '/@/components/Form';
@ -117,6 +120,7 @@
import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
import { useModal } from "@/components/Modal";
import { ExceptionEnum } from "@/enums/exceptionEnum";
import huakuai from './huakuai.vue';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
@ -178,12 +182,19 @@
formData.inputCode = '';
randCodeData.checkKey = 1629428467008;
getCodeInfo(randCodeData.checkKey).then((res) => {
randomCode(randCodeData.checkKey).then((res) => {
console.log("🚀 ~ handleChangeCheckCode ~ res:", res)
randCodeData.randCodeImage = res;
randCodeData.requestCodeSuccess = true;
formData.inputCode = res;
});
}
function checkInputCode(type){
console.log("🚀 ~ checkCode ~ checkCode:",type)
handleChangeCheckCode();
}
/**
* 切换登录方式
*/
@ -372,7 +383,7 @@
onMounted(() => {
//加载验证码
handleChangeCheckCode();
// handleChangeCheckCode();
});
</script>

170
src/views/system/loginmini/huakuai.vue Normal file
View File

@ -0,0 +1,170 @@
<template>
<!-- 滑动验证码容器 -->
<div class="slider-container" ref="containerRef">
<!-- 滑动遮罩层，显示滑动进度 -->
<div class="slider-mask" :style="{ width: sliderMaskWidth }" />
<!-- 滑块按钮 -->
<div
class="slider"
ref="sliderRef"
@mousedown="handleDragStart"
:class="{ 'slider-success': verified }"
:style="{ left: sliderLeft }"
>
<!-- 滑块图标 -->
<Icon icon="ant-design:double-right-outlined" :size="20" />
</div>
<!-- 提示文本 -->
<div class="slider-text" :class="{ 'slider-text-success': verified }">
{{ verified ? "验证通过" : "将滑块拖动至右侧完成验证" }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref, defineEmits, onUnmounted } from "vue"
const emit = defineEmits(["verifySuccess"])
// DOM 引用
const containerRef = ref<HTMLElement | null>(null) // 容器元素引用
const sliderRef = ref<HTMLElement | null>(null) // 滑块元素引用
// 状态变量
const sliderLeft = ref("0px") // 滑块左侧位置
const sliderMaskWidth = ref("0px") // 遮罩层宽度
const verified = ref(false) // 验证状态
// 拖动相关变量
let startX = 0 // 开始拖动时的 X 坐标
let sliderLeft_temp = 0 // 临时存储滑块位置
/**
* 开始拖动处理
* @param e 鼠标事件对象
*/
const handleDragStart = (e: MouseEvent) => {
if (verified.value) return // 如果已验证通过，不再处理
startX = e.clientX
sliderLeft_temp = parseInt(sliderLeft.value)
// 添加鼠标移动和松开事件监听
document.addEventListener("mousemove", handleDragMove)
document.addEventListener("mouseup", handleDragEnd)
}
/**
* 拖动过程处理
* @param e 鼠标事件对象
*/
const handleDragMove = (e: MouseEvent) => {
if (verified.value) return
const container = containerRef.value
if (!container) return
// 计算拖动距离
const diff = e.clientX - startX
const containerWidth = container.offsetWidth
const sliderWidth = sliderRef.value?.offsetWidth || 0
const maxLeft = containerWidth - sliderWidth
// 计算新位置并限制范围
let newLeft = sliderLeft_temp + diff
if (newLeft < 0) newLeft = 0
if (newLeft > maxLeft) newLeft = maxLeft
// 更新滑块和遮罩层位置
sliderLeft.value = newLeft + "px"
sliderMaskWidth.value = newLeft + sliderWidth / 2 + "px"
// 检查是否验证成功
if (newLeft === maxLeft) {
verified.value = true
emit("verifySuccess", true) // 触发验证成功
handleDragEnd()
}
}
/**
* 结束拖动处理
*/
const handleDragEnd = () => {
if (!verified.value) {
// 如果未验证成功，重置位置
sliderLeft.value = "0px"
sliderMaskWidth.value = "0px"
}
// 移除事件监听
document.removeEventListener("mousemove", handleDragMove)
document.removeEventListener("mouseup", handleDragEnd)
}
// 组件卸载时清理事件监听
onUnmounted(() => {
document.removeEventListener("mousemove", handleDragMove)
document.removeEventListener("mouseup", handleDragEnd)
})
</script>
<style scoped>
/* 滑动验证码容器样式 */
.slider-container {
position: relative;
width: 100%;
height: 42px;
background-color: #f5f5f5;
border: 1px solid #e4e7ed;
border-radius: 8px;
margin-top: 20px;
}
/* 滑动遮罩层样式 */
.slider-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #d1e9fc;
border-radius: 8px;
transition: width 0.1s linear;
}
/* 滑块按钮样式 */
.slider {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 42px;
background: #e1dede;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
/* 验证成功时滑块样式 */
.slider-success {
background-color: #1ea0fa;
}
/* 提示文本样式 */
.slider-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
font-weight: 400;
font-size: 12px;
color: #9cb3c5;
width: auto;
}
/* 验证成功时文本样式 */
.slider-text-success {
color: #1ea0fa;
}
</style>