From 000a59c7e4382198374485d55411aac357cb8b67 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 20 九月 2022 16:17:56 +0800 Subject: [PATCH] Default Changelist --- src/views/loginPage/component/accountLogin.vue | 174 ++++++++++++++++++++++++++-------------------------------- 1 files changed, 78 insertions(+), 96 deletions(-) diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue index 7455f9e..d22d99a 100644 --- a/src/views/loginPage/component/accountLogin.vue +++ b/src/views/loginPage/component/accountLogin.vue @@ -13,7 +13,7 @@ <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon> </template> <template #suffix> - <i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" @click="isShowPassword = !isShowPassword"> </i> + <i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-xianshimima' : 'icon-yincangmima'" @click="isShowPassword = !isShowPassword"> </i> </template> </el-input> </el-form-item> @@ -27,42 +27,42 @@ </el-button> </el-form-item> </el-form> - <el-dialog v-model="identifyDialog" title="重置密码须进行身份校验(仅供测试)" width="30%" center @close="clearIdentity"> + <el-dialog v-model="identifyDialog" title="重置密码" width="30%" center @close="clearIdentity"> <el-form :model="identity" label-width="80px" ref="identifyRef" :rules="identityRules"> - <el-form-item label="姓名" prop="userName"> - <el-input v-model="identity.userName"/> + <el-divider border-style="dashed">身份验证</el-divider> + <el-form-item label="姓名" prop="realName"> + <el-input v-model="identity.realName"/> </el-form-item> - <el-form-item label="身份证号" prop="ID"> - <el-input v-model="identity.ID"/> + <el-form-item label="身份证号" prop="identify"> + <el-input v-model="identity.identify"/> </el-form-item> <el-form-item label="手机号" prop="phone"> <el-input v-model="identity.phone"/> + </el-form-item> + <el-divider border-style="dashed">重设密码</el-divider> + <el-form-item label="密码" prop="password"> + <el-input v-model="identity.password" :type="showPass ? 'text': 'password'" autocomplete="off"> + <template #suffix> + <i class="iconfont el-input__icon login-content-password" :class="showPass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showPass = !showPass"> </i> + </template> + </el-input> + </el-form-item> + <el-form-item label="确认密码" prop="rePassword"> + <el-input + v-model="identity.rePassword" + :type="showRePass ? 'text': 'password'" + autocomplete="off" + > + <template #suffix> + <i class="iconfont el-input__icon login-content-password" :class="showRePass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showRePass = !showRePass"> </i> + </template> + </el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button type="warning" @click="identifyDialog = false" size="default">取消</el-button> <el-button type="primary" @click="confirmIdentity(identifyRef)" size="default">确认</el-button> - </span> - </template> - </el-dialog> - <el-dialog v-model="changeDialog" title="修改密码" width="30%" center @close="clearCode"> - <el-form :model="codeForm" label-width="80px" ref="codeRef" :rules="codeRules"> - <el-form-item label="密码" prop="pass"> - <el-input v-model="codeForm.pass" type="password" autocomplete="off" /> - </el-form-item> - <el-form-item label="确认密码" prop="checkPass"> - <el-input - v-model="codeForm.checkPass" - type="password" - autocomplete="off" - /> - </el-form-item> - </el-form> - <template #footer> - <span class="dialog-footer"> - <el-button type="warning" @click="changeDialog = false" size="default">取消</el-button> - <el-button type="primary" @click="confirmChange(codeRef)" size="default">确认修改</el-button> </span> </template> </el-dialog> @@ -96,6 +96,8 @@ const router = useRouter(); const state = reactive({ isShowPassword: false, + showPass: false, + showRePass: false, saveCode: false, ruleForm: { username: '', @@ -105,19 +107,15 @@ signIn: false }, identity:{ - name: '', - ID: '', - phone: '' + realName: '', + identify: '', + phone: '', + password: '', + rePassword: '' }, - codeForm:{ - pass: '', - checkPass: '' - }, - identifyDialog: false, - changeDialog: false + identifyDialog: false }); const identifyRef = ref<FormInstance>() - const codeRef = ref<FormInstance>() // 页面载入时执行方法 onMounted(() => { @@ -152,10 +150,33 @@ }else callback(); }, 400) } + // 修改密码 + const validatePass = (rule: any, value: any, callback: any) => { + if (value === '') { + callback(new Error('该内容不能为空')) + } else { + if (state.identity.rePassword !== '') { + if (!identifyRef.value) return + identifyRef.value.validateField('rePassword', () => null) + } + callback() + } + } + const validatePass2 = (rule: any, value: any, callback: any) => { + if (value === '') { + callback(new Error('该内容不能为空')) + } else if (value !== state.identity.password) { + callback(new Error("两次输入的密码不一致!")) + } else { + callback() + } + } const identityRules = reactive({ - userName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], - ID: [{ required: true, validator: checkCode, trigger: 'blur'}], - phone: [{ required: true, validator: checkPhone, trigger: 'blur' }] + realName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + identify: [{ required: true, validator: checkCode, trigger: 'blur'}], + phone: [{ required: true, validator: checkPhone, trigger: 'blur' }], + password: [{ required: true, validator: validatePass, trigger: 'blur' }], + rePassword: [{ required: true, validator: validatePass2, trigger: 'blur' }] }); // 时间获取 @@ -238,10 +259,21 @@ // 提交验证 const confirmIdentity = (formEl: FormInstance | undefined) => { if (!formEl) return - formEl.validate((valid) => { + formEl.validate(async(valid) => { if (valid) { + const res = await useLoginApi().changeCode(state.identity); + if(res.data.code == '200'){ + ElMessage({ + type: 'success', + message: '修改成功,请使用新密码登录' + }); + }else{ + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } state.identifyDialog = false - state.changeDialog = true } else { console.log('error submit!') return false @@ -250,71 +282,21 @@ } const clearIdentity = ()=>{ state.identity = { - name: '', - ID: '', - phone: '' - } - } - // 修改密码 - const validatePass = (rule: any, value: any, callback: any) => { - if (value === '') { - callback(new Error('请输入密码')) - } else { - if (state.codeForm.checkPass !== '') { - if (!codeRef.value) return - codeRef.value.validateField('checkPass', () => null) - } - callback() - } - } - const validatePass2 = (rule: any, value: any, callback: any) => { - if (value === '') { - callback(new Error('请输入密码')) - } else if (value !== state.codeForm.pass) { - callback(new Error("两次输入的密码不一致!")) - } else { - callback() + realName: '', + identify: '', + phone: '', + password: '', + rePassword: '' } } - const codeRules = reactive({ - pass: [{ required: true, validator: validatePass, trigger: 'blur' }], - checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }] - }) - - const confirmChange = (formEl: FormInstance | undefined) => { - if (!formEl) return - formEl.validate((valid) => { - if (valid) { - ElMessage({ - type: 'success', - message: '修改成功,请使用新密码登录' - }); - state.changeDialog = false - router.push('/login'); - } else { - console.log('error submit!') - return false - } - }) - } - const clearCode=()=>{ - state.codeForm = { - pass: '', - checkPass: '' - } - } return { identifyRef, - codeRef, identityRules, - codeRules, clearIdentity, onSignIn, identify, confirmIdentity, - confirmChange, - clearCode, validatePass, validatePass2, ...toRefs(state) -- Gitblit v1.9.2