zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

添加注册验证码倒计时

This commit is contained in:
zhangxuelin 2024-12-16 10:19:04 +08:00
parent f9efb76282
commit d018a28200
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/renderer/src/views/login/index.vue
View File

@ -38,7 +38,7 @@
<el-input v-model="ruleForm.username" placeholder="请输入手机号" /> <el-input v-model="ruleForm.username" placeholder="请输入手机号" />
</el-form-item> </el-form-item>
<el-form-item label="验证码" prop="smsCode" style="display: flex"> <el-form-item label="验证码" prop="smsCode" style="display: flex">
<el-input style="width:185px" v-model="ruleForm.smsCode" placeholder="请输入验证码" /><el-button style="margin-left:10px;width:100px" type="primary" @click="sendyzm">发送验证码</el-button> <el-input style="width:185px" v-model="ruleForm.smsCode" placeholder="请输入验证码" /><el-button style="margin-left:10px;width:100px" :disabled="codeName=='发送验证码'?false:true" type="primary" @click="sendyzm">{{ codeName }}</el-button>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="password" > <el-form-item label="密码" prop="password" >
<el-input autocomplete="on" type="password" v-model="ruleForm.password" placeholder="请输入密码" /> <el-input autocomplete="on" type="password" v-model="ruleForm.password" placeholder="请输入密码" />
@ -64,7 +64,7 @@
width="500" width="500"
style=" -webkit-app-region: no-drag;" style=" -webkit-app-region: no-drag;"
> >
<span>根据图片回答相关问题</span> <span>根据图片回答相关问题1</span>
<div style="display: flex;align-items: center;;margin-top:30px"> <div style="display: flex;align-items: center;;margin-top:30px">
<img :src="isPeopleImg" style="width:200px;height:60px;cursor: pointer;" alt="" srcset="" @click="refreshImg"> <img :src="isPeopleImg" style="width:200px;height:60px;cursor: pointer;" alt="" srcset="" @click="refreshImg">
<el-input v-model="ruleForm.imgCode" style="width: 250px;height:40px;margin-left:20px" placeholder="请根据图片填入答案" /> <el-input v-model="ruleForm.imgCode" style="width: 250px;height:40px;margin-left:20px" placeholder="请根据图片填入答案" />
@ -162,6 +162,14 @@ const sbmitImg=()=>{
ElMessage.success('短信发送成功') ElMessage.success('短信发送成功')
ruleForm.Code=res.data ruleForm.Code=res.data
isImg.value=false isImg.value=false
codeName.value=60
timer.value=setInterval(()=>{
codeName.value--
if(codeName.value==0){
codeName.value='发送验证码'
clearInterval(timer.value);
}
},1000)
} }
}) })
@ -182,14 +190,14 @@ const sendyzm=()=>{
isPeopleImg.value='data:image/jpg;base64,'+res.img isPeopleImg.value='data:image/jpg;base64,'+res.img
isImg.value=true isImg.value=true
resImg.imgData=res resImg.imgData=res
codeName.value=60 // codeName.value=60
timer.value=setInterval(()=>{ // timer.value=setInterval(()=>{
codeName.value-- // codeName.value--
if(codeName.value==0){ // if(codeName.value==0){
codeName.value='发送验证码' // codeName.value='发送验证码'
clearInterval(timer.value); // clearInterval(timer.value);
} // }
},1000) // },1000)
}else{ }else{
ElMessage.error(res.msg) ElMessage.error(res.msg)
} }
@ -278,6 +286,9 @@ const setCookie = (name, value) => {
} }
const gotoLogin = () => { const gotoLogin = () => {
codeName.value='发送验证码' codeName.value='发送验证码'
if (timer.value){
clearInterval(timer.value);
}
if (ruleFormRef.value) ruleFormRef.value.resetFields() if (ruleFormRef.value) ruleFormRef.value.resetFields()
isRegister.value = true isRegister.value = true
} }