feat(login): 注释短信验证码逻辑

This commit is contained in:
ywk 2025-04-08 09:12:42 +08:00
parent 8b13e5271a
commit 5b1c1a2db8
1 changed files with 84 additions and 83 deletions

View File

@ -12,7 +12,7 @@
alt="">
</div> -->
<div class="contain">
<dv-border-box-7 :color="['#0f2e66', '#139efa']"></dv-border-box-7>
<dv-border-box-7 :color="['#0f2e66', '#139efa']" />
</div>
<div class="login_contain">
<el-form
@ -35,15 +35,15 @@
<svg-icon icon-class="user" />
</span>
<el-input
clearable
ref="username"
v-model="loginForm.username"
@blur="getCheck"
clearable
placeholder="Username"
name="username"
type="text"
tabindex="1"
auto-complete="on"
@blur="getCheck"
/>
</el-form-item>
@ -52,10 +52,10 @@
<svg-icon icon-class="password" />
</span>
<el-input
clearable
:key="passwordType"
ref="password"
v-model="loginForm.password"
clearable
:type="passwordType"
placeholder="Password"
name="password"
@ -75,27 +75,27 @@
<svg-icon icon-class="password" />
</span>
<el-input
v-model.trim="loginForm.code"
clearable
placeholder="请输入验证码"
v-model.trim="loginForm.code"
@keyup.enter.native="handleLogin"
></el-input>
/>
</el-form-item>
<div class="img">
<img :src="codeUrl" @click="getVerifyCode" />
<img :src="codeUrl" @click="getVerifyCode">
</div>
</div>
<div class="yzm" v-if="ismsgCode">
<div v-if="ismsgCode" class="yzm">
<el-form-item prop="smsCode" style="flex: 1">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
v-model.trim="loginForm.smsCode"
clearable
placeholder="请输入短信验证码"
v-model.trim="loginForm.smsCode"
@keyup.enter.native="handleLogin"
></el-input>
/>
</el-form-item>
<div class="img">
<div class="hqyzm1" :class="isSend ? 'hui' : ''" @click="submitForm">{{ getCode }}</div>
@ -106,8 +106,7 @@
type="primary"
class="toLogin"
@click.native.prevent="handleLogin"
>登录</el-button
>
>登录</el-button>
<!-- <div class="tips">
<span style="margin-right:20px;">username: admin</span>
@ -119,75 +118,75 @@
</template>
<script>
import { validUsername } from "@/utils/validate";
import { getCodeImg, userCheck,userSend } from "@/api/user";
import { validUsername } from '@/utils/validate'
import { getCodeImg, userCheck, userSend } from '@/api/user'
export default {
name: "Login",
name: 'Login',
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error("Please enter the correct user name"));
callback(new Error('Please enter the correct user name'))
} else {
callback();
callback()
}
};
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("The password can not be less than 6 digits"));
callback(new Error('The password can not be less than 6 digits'))
} else {
callback();
callback()
}
};
}
return {
loginForm: {
// username: 'admin',
// password: 'admin123',
username: "",
password: "",
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
{ required: true, trigger: 'blur', message: '请输入用户名' }
],
password: [
{ required: true, trigger: "blur", message: '请输入密码' },
{ required: true, trigger: 'blur', message: '请输入密码' }
],
code: [
{ required: true, trigger: "blur", message:"请输入验证码" },
{ required: true, trigger: 'blur', message: '请输入验证码' }
],
smsCode: [
{ required: true, trigger: "blur", message:"请输入短信验证码" },
],
{ required: true, trigger: 'blur', message: '请输入短信验证码' }
]
},
loading: false,
passwordType: "password",
passwordType: 'password',
redirect: undefined,
codeUrl: "",
ismsgCode:false,
codeUrl: '',
ismsgCode: false,
isSend: false,
beginTime: 60,
getCode: '获取验证码',
timer: '',
};
timer: ''
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true,
},
immediate: true
}
},
created() {
//
this.getVerifyCode();
this.getVerifyCode()
},
methods: {
startTime() {
if (this.isSend) return
this.isSend = true
this.getCode = this.beginTime + 's后重新发送'
let that = this
const that = this
this.timer = setInterval(() => {
this.beginTime--
this.getCode = this.beginTime + 's后重新发送'
@ -199,71 +198,73 @@ export default {
}
}, 1000)
},
submitForm(){
if(!this.isSend){
userSend({
userName: this.loginForm.username
}).then(res=>{
this.startTime()
if(res.code == 200){
this.$message({
message: res.msg,
type: "success",
});
}
})
submitForm() {
if (!this.isSend) {
userSend({
userName: this.loginForm.username
}).then(res => {
this.startTime()
if (res.code === 200) {
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
},
getCheck() {
userCheck({
userName: this.loginForm.username
}).then(res=>{
if(res.data == 0){
this.ismsgCode = true
}else{
this.ismsgCode = false
}
});
return
//
// userCheck({
// userName: this.loginForm.username
// }).then(res => {
// if (res.data === 0) {
// this.ismsgCode = true
// } else {
// this.ismsgCode = false
// }
// })
},
getVerifyCode() {
getCodeImg().then((res) => {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
});
this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
})
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = "password";
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus();
});
this.$refs.password.focus()
})
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
this.loading = true
this.$store
.dispatch("user/login", this.loginForm)
.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" });
this.loading = false;
this.$router.push({ path: this.redirect || '/' })
this.loading = false
})
.catch(() => {
this.getVerifyCode();
this.loginForm.code = "";
this.loading = false;
});
this.getVerifyCode()
this.loginForm.code = ''
this.loading = false
})
} else {
console.log("error submit!!");
return false;
console.log('error submit!!')
return false
}
});
},
},
};
})
}
}
}
</script>
<style lang="scss">