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