hshansha
7 months ago
commit
f8860f5144
@ -0,0 +1,290 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
|
||||||
|
<div class="login-form">
|
||||||
|
<h2>找回密码</h2>
|
||||||
|
<el-steps :space="300" :active="activeStep" align-center style="margin-bottom: 50px;margin-top: 20px;">
|
||||||
|
<el-step title="安全验证"></el-step>
|
||||||
|
<el-step title="重置密码"></el-step>
|
||||||
|
<el-step title="设置成功"></el-step>
|
||||||
|
</el-steps>
|
||||||
|
|
||||||
|
<div v-if="activeStep===0" style="width: 350px;margin: 0 auto;">
|
||||||
|
<el-form ref="aqyzForm" :model="aqyz.form" :rules="aqyz.rules" >
|
||||||
|
<el-form-item prop="phonenumber">
|
||||||
|
<el-input
|
||||||
|
v-model="aqyz.form.phonenumber"
|
||||||
|
type="text"
|
||||||
|
auto-complete="off"
|
||||||
|
placeholder="手机号"
|
||||||
|
>
|
||||||
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="smsCode">
|
||||||
|
<el-input
|
||||||
|
v-model="aqyz.form.smsCode"
|
||||||
|
auto-complete="off"
|
||||||
|
placeholder="校验码"
|
||||||
|
style="width: 60%"
|
||||||
|
@keyup.enter.native="getCaptchaSms"
|
||||||
|
>
|
||||||
|
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||||
|
</el-input>
|
||||||
|
<div class="login-code" @click="getAuthCode" v-if="aqyz.isAuthCode">
|
||||||
|
发送获取校验码
|
||||||
|
</div>
|
||||||
|
<div class="login-code-disable" v-if="!aqyz.isAuthCode">
|
||||||
|
{{ aqyz.msg }}
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="width:100%;">
|
||||||
|
<el-button
|
||||||
|
:loading="aqyz.loading"
|
||||||
|
size="medium"
|
||||||
|
type="primary"
|
||||||
|
style="width:100%;"
|
||||||
|
@click.native.prevent="submitValidate"
|
||||||
|
>
|
||||||
|
<span v-if="!aqyz.loading">提交验证</span>
|
||||||
|
<span v-else>验 证 中...</span>
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="activeStep===1" style="width: 350px;margin: 0 auto;">
|
||||||
|
<el-form ref="resetPWForm" :model="resetPW.form" :rules="resetPW.rules" >
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input
|
||||||
|
v-model="resetPW.form.password"
|
||||||
|
type="password"
|
||||||
|
auto-complete="off"
|
||||||
|
placeholder="请输入新密码"
|
||||||
|
>
|
||||||
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="width:100%;">
|
||||||
|
<el-button
|
||||||
|
:loading="resetPW.loading"
|
||||||
|
size="medium"
|
||||||
|
type="primary"
|
||||||
|
style="width:100%;"
|
||||||
|
@click.native.prevent="submitReset"
|
||||||
|
>
|
||||||
|
<span v-if="!resetPW.loading">提交重置</span>
|
||||||
|
<span v-else>提 交 中...</span>
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="activeStep===2" style="width: 350px;margin: 0 auto;">
|
||||||
|
<el-result icon="success" subTitle="设置成功，请返回登录页重新登录">
|
||||||
|
<template slot="extra">
|
||||||
|
<router-link class="link-type" :to="'/login'">返回登录页</router-link>
|
||||||
|
</template>
|
||||||
|
</el-result>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<!-- <div class="el-login-footer">
|
||||||
|
<span>Copyright © 2021-2022 konbai.work All Rights Reserved.</span>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getCaptchaSms, validateSmsCode, modifyPass } from "@/api/login";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Forgetpass",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeStep: 0,
|
||||||
|
// 安全验证
|
||||||
|
aqyz:{
|
||||||
|
// 是否可获取校验码
|
||||||
|
isAuthCode: true,
|
||||||
|
msg:'',
|
||||||
|
form: {
|
||||||
|
phonenumber: "",
|
||||||
|
smsCode: "",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
phonenumber: [
|
||||||
|
{ required: true, trigger: "blur", message: "请输入手机号" },
|
||||||
|
{
|
||||||
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||||
|
message: "请输入正确的手机号码",
|
||||||
|
trigger: "blur"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
smsCode: [{ required: true, trigger: "change", message: "请输入校验码" }]
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
},
|
||||||
|
// 重置密码
|
||||||
|
resetPW:{
|
||||||
|
form: {
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
password: [
|
||||||
|
{ required: true, trigger: "blur", message: "请输入新密码" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
},
|
||||||
|
redirect: undefined
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
handler: function(route) {
|
||||||
|
this.redirect = route.query && route.query.redirect;
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getAuthCode(){
|
||||||
|
|
||||||
|
let regex = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
|
||||||
|
if(this.aqyz.form.phonenumber && regex.test(this.aqyz.form.phonenumber)){
|
||||||
|
getCaptchaSms({ phonenumber: this.aqyz.form.phonenumber }).then(res => {
|
||||||
|
console.log(res);
|
||||||
|
var time = 59;//定义时间变量 60s
|
||||||
|
var timer = null;//定义定时器
|
||||||
|
this.aqyz.isAuthCode=false;
|
||||||
|
timer = setInterval(()=>{
|
||||||
|
if(time==0){
|
||||||
|
this.aqyz.isAuthCode=true;
|
||||||
|
clearInterval(timer);//清除定时器
|
||||||
|
}else{
|
||||||
|
this.aqyz.msg=time+"S 重新发送";
|
||||||
|
time--;
|
||||||
|
}
|
||||||
|
},1000);
|
||||||
|
});
|
||||||
|
}else {
|
||||||
|
this.$alert(`请输入正确手机号码！`, `提示`, {
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
// 提交验证
|
||||||
|
submitValidate(){
|
||||||
|
this.$refs["aqyzForm"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
this.aqyz.loading = true;
|
||||||
|
validateSmsCode(this.aqyz.form).then(response => {
|
||||||
|
console.log(response,123);
|
||||||
|
this.resetPW.form.userId = response.data.userId;
|
||||||
|
this.resetPW.form.userName = response.data.userName;
|
||||||
|
this.aqyz.loading = false;
|
||||||
|
this.activeStep = 1;
|
||||||
|
}).finally(() => {
|
||||||
|
this.aqyz.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 提交重置
|
||||||
|
submitReset(){
|
||||||
|
this.$refs["resetPWForm"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
this.resetPW.loading = true;
|
||||||
|
modifyPass(this.resetPW.form).then(response => {
|
||||||
|
this.resetPW.loading = false;
|
||||||
|
this.activeStep = 2;
|
||||||
|
}).finally(() => {
|
||||||
|
this.resetPW.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goLogin(){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
|
.login {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("../assets/images/login-background.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin: 0px auto 30px auto;
|
||||||
|
text-align: center;
|
||||||
|
color: #707070;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #ffffff;
|
||||||
|
width: 800px;
|
||||||
|
padding: 30px 30px 50px 30px;
|
||||||
|
.el-input {
|
||||||
|
height: 38px;
|
||||||
|
input {
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-icon {
|
||||||
|
height: 39px;
|
||||||
|
width: 14px;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-tip {
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
color: #bfbfbf;
|
||||||
|
}
|
||||||
|
.login-code {
|
||||||
|
width: 38%;
|
||||||
|
height: 38px;
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ff5f00;
|
||||||
|
border: 1px solid #ff5f00;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.login-code-disable{
|
||||||
|
width: 38%;
|
||||||
|
height: 38px;
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #bfbfbf;
|
||||||
|
border: 1px solid #bfbfbf;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.el-login-footer {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue