feat(login): 注释短信验证码逻辑
This commit is contained in:
parent
8b13e5271a
commit
5b1c1a2db8
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue