添加滑块验证码及修复bug
This commit is contained in:
parent
790c382e28
commit
d7d233acd9
|
|
@ -23,6 +23,7 @@ enum Api {
|
||||||
GetPermCode = '/sys/permission/getPermCode',
|
GetPermCode = '/sys/permission/getPermCode',
|
||||||
//新加的获取图形验证码的接口
|
//新加的获取图形验证码的接口
|
||||||
getInputCode = '/sys/randomImage',
|
getInputCode = '/sys/randomImage',
|
||||||
|
randomCode = '/sys/randomInputCode',
|
||||||
//获取短信验证码的接口
|
//获取短信验证码的接口
|
||||||
getCaptcha = '/sys/sms',
|
getCaptcha = '/sys/sms',
|
||||||
//注册接口
|
//注册接口
|
||||||
|
|
@ -114,6 +115,10 @@ export function getCodeInfo(currdatetime) {
|
||||||
let url = Api.getInputCode + `/${currdatetime}`;
|
let url = Api.getInputCode + `/${currdatetime}`;
|
||||||
return defHttp.get({ url: url });
|
return defHttp.get({ url: url });
|
||||||
}
|
}
|
||||||
|
export function randomCode(currdatetime) {
|
||||||
|
let url = Api.randomCode + `/${currdatetime}`;
|
||||||
|
return defHttp.get({ url: url });
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* @description: 获取短信验证码
|
* @description: 获取短信验证码
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,8 @@
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<SectionDivider :title="'机构信息'" />
|
<SectionDivider :title="'机构信息'" />
|
||||||
</a-col>
|
</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-col :span="12">
|
||||||
<a-form-item label="机构编码" v-bind="validateInfos.orgCode" id="WorkOrderForm-orgCode" name="orgCode">
|
<a-form-item label="机构编码" v-bind="validateInfos.orgCode" id="WorkOrderForm-orgCode" name="orgCode">
|
||||||
{{formData.orgCode}}
|
{{formData.orgCode}}
|
||||||
|
|
@ -24,105 +21,42 @@
|
||||||
{{formData.orgLeader}}
|
{{formData.orgLeader}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="机构位置">
|
||||||
|
{{cityViewValue}}
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item label="机构负责人电话" v-bind="validateInfos.orgLeaderPhone" id="OrgApplyInfoForm-orgLeaderPhone"
|
<a-form-item label="机构负责人电话" v-bind="validateInfos.orgLeaderPhone" id="OrgApplyInfoForm-orgLeaderPhone"
|
||||||
name="orgLeaderPhone">
|
name="orgLeaderPhone">
|
||||||
{{formData.orgLeaderPhone}}
|
{{formData.orgLeaderPhone}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</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-col :span="12">
|
||||||
<a-form-item label="机构房屋性质" v-bind="validateInfos.orgPropertyType" id="OrgApplyInfoForm-orgPropertyType"
|
<a-form-item label="机构房屋性质" v-bind="validateInfos.orgPropertyType" id="OrgApplyInfoForm-orgPropertyType"
|
||||||
name="orgPropertyType">
|
name="orgPropertyType">
|
||||||
{{formData.orgPropertyType}}
|
{{formData.orgPropertyType}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</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-col :span="12">
|
||||||
<a-form-item label="机构地址" v-bind="validateInfos.orgAddress" id="OrgApplyInfoForm-orgAddress"
|
<a-form-item label="机构地址" v-bind="validateInfos.orgAddress" id="OrgApplyInfoForm-orgAddress"
|
||||||
name="orgAddress">
|
name="orgAddress">
|
||||||
{{formData.orgAddress}}
|
{{formData.orgAddress}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</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-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-row>
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<SectionDivider :title="'营业执照'" />
|
<SectionDivider :title="'营业执照'" />
|
||||||
|
|
@ -136,28 +70,28 @@
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item label="企业名称" v-bind="validateInfos.comName" id="OrgApplyInfoForm-comName" name="comName">
|
<a-form-item label="信用代码" v-bind="validateInfos.comCreditCode" id="OrgApplyInfoForm-comCreditCode"
|
||||||
{{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"
|
|
||||||
name="comCreditCode">
|
name="comCreditCode">
|
||||||
{{formData.comCreditCode}}
|
{{formData.comCreditCode}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</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-col :span="12">
|
||||||
<a-form-item label="企业法人" v-bind="validateInfos.comLegalPerson" id="OrgApplyInfoForm-comLegalPerson"
|
<a-form-item label="企业法人" v-bind="validateInfos.comLegalPerson" id="OrgApplyInfoForm-comLegalPerson"
|
||||||
name="comLegalPerson">
|
name="comLegalPerson">
|
||||||
{{formData.comLegalPerson}}
|
{{formData.comLegalPerson}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</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">
|
<!-- <a-col :span="24">
|
||||||
<SectionDivider :title="'加盟审核'" />
|
<SectionDivider :title="'加盟审核'" />
|
||||||
|
|
@ -169,6 +103,85 @@
|
||||||
</a-col> -->
|
</a-col> -->
|
||||||
</a-row>
|
</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-row>
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<SectionDivider :title="'审核信息'" />
|
<SectionDivider :title="'审核信息'" />
|
||||||
|
|
@ -293,8 +306,9 @@ const formData = reactive<Record<string, any>>({
|
||||||
franchiseTime: null,
|
franchiseTime: null,
|
||||||
contract: null,
|
contract: null,
|
||||||
});
|
});
|
||||||
|
const cityViewValue = ref('')
|
||||||
const { createMessage } = useMessage();
|
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 wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||||
const confirmLoading = ref<boolean>(false);
|
const confirmLoading = ref<boolean>(false);
|
||||||
//表单验证
|
//表单验证
|
||||||
|
|
@ -334,6 +348,7 @@ function edit(record) {
|
||||||
tmpData[key] = record[key]
|
tmpData[key] = record[key]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
//赋值
|
//赋值
|
||||||
Object.assign(formData, tmpData);
|
Object.assign(formData, tmpData);
|
||||||
});
|
});
|
||||||
|
|
@ -342,6 +357,10 @@ function edit(record) {
|
||||||
function open(orgCode) {
|
function open(orgCode) {
|
||||||
getOrgInfo({ orgCode }).then(res => {
|
getOrgInfo({ orgCode }).then(res => {
|
||||||
Object.assign(formData, res);
|
Object.assign(formData, res);
|
||||||
|
|
||||||
|
cityViewValue.value = res.orgProvince
|
||||||
|
+ (!!res.orgCity ? res.orgCity : '')
|
||||||
|
+ (!!res.orgDistrict ? res.orgDistrict : '')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<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:'暂未处理'}}
|
{{formData.replyTime?formData.replyTime:'暂未处理'}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
@ -67,12 +67,12 @@
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<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>
|
<JUpload v-model:value="formData.replyFile" :maxCount="1"></JUpload>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<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}}
|
{{formData.replyContent}}
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,10 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="aui-inputClear">
|
<div >
|
||||||
|
<huakuai @verifySuccess="checkInputCode"/>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="aui-inputClear">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="2">
|
<a-col :span="2">
|
||||||
<span style="margin-top: 10px;display: block;"><img :src="icon3Img" alt="验证码" style="width: 20px;" /></span>
|
<span style="margin-top: 10px;display: block;"><img :src="icon3Img" alt="验证码" style="width: 20px;" /></span>
|
||||||
|
|
@ -70,7 +73,7 @@
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</a-form>
|
</a-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -92,7 +95,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup name="login-mini">
|
<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 { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
|
||||||
import codeImg from '/@/assets/images/checkcode.png';
|
import codeImg from '/@/assets/images/checkcode.png';
|
||||||
import { Rule } from '/@/components/Form';
|
import { Rule } from '/@/components/Form';
|
||||||
|
|
@ -117,6 +120,7 @@
|
||||||
import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
|
import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
|
||||||
import { useModal } from "@/components/Modal";
|
import { useModal } from "@/components/Modal";
|
||||||
import { ExceptionEnum } from "@/enums/exceptionEnum";
|
import { ExceptionEnum } from "@/enums/exceptionEnum";
|
||||||
|
import huakuai from './huakuai.vue';
|
||||||
|
|
||||||
const IconFont = createFromIconfontCN({
|
const IconFont = createFromIconfontCN({
|
||||||
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
|
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
|
||||||
|
|
@ -178,12 +182,19 @@
|
||||||
formData.inputCode = '';
|
formData.inputCode = '';
|
||||||
|
|
||||||
randCodeData.checkKey = 1629428467008;
|
randCodeData.checkKey = 1629428467008;
|
||||||
getCodeInfo(randCodeData.checkKey).then((res) => {
|
randomCode(randCodeData.checkKey).then((res) => {
|
||||||
|
console.log("🚀 ~ handleChangeCheckCode ~ res:", res)
|
||||||
randCodeData.randCodeImage = res;
|
randCodeData.randCodeImage = res;
|
||||||
randCodeData.requestCodeSuccess = true;
|
randCodeData.requestCodeSuccess = true;
|
||||||
|
formData.inputCode = res;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkInputCode(type){
|
||||||
|
console.log("🚀 ~ checkCode ~ checkCode:",type)
|
||||||
|
handleChangeCheckCode();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 切换登录方式
|
* 切换登录方式
|
||||||
*/
|
*/
|
||||||
|
|
@ -372,7 +383,7 @@
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
//加载验证码
|
//加载验证码
|
||||||
handleChangeCheckCode();
|
// handleChangeCheckCode();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue