<template>
|
<div class="bg-gray">
|
<header class="header-transparent">
|
<div class="logo">
|
<img src="../assets/img/top-logo.png" alt />
|
</div>
|
<div class="text-right">
|
<el-link class="toIndex cursor-pointer" href="http://smartai.com/" target="_blank">
|
<span>返回首页</span>
|
</el-link>
|
<el-link class="cursor-pointer" href="http://smartai.com/" target="_blank">
|
<!-- <router-link to="/Register">
|
<span style="color:white;height:20px;">注册</span>
|
</router-link>-->
|
</el-link>
|
<span class="devide">|</span>
|
<el-link class="qrcode cursor-pointer" href="http://smartai.com/" target="_blank">
|
<img src="../assets/img/u132.png" />
|
</el-link>
|
</div>
|
</header>
|
<content>
|
<div class="forgetPassword">
|
<h1 class="welcome">找回密码</h1>
|
<el-steps class="arrowToLine" :active="active" finish-status="success" align-center simple>
|
<el-step title="手机验证" class="step-num-one"></el-step>
|
<el-step title="重置密码" class="step-num-two"></el-step>
|
<el-step title="重置成功" class="step-num-three"></el-step>
|
</el-steps>
|
<div class="box1" v-show="step1">
|
<el-form :model="phone" ref="phone" :rules="phoneCodeRule">
|
<el-form-item prop="phoneNum">
|
<el-input v-model="phone.phoneNum" placeholder="请输入手机号">
|
<i slot="prefix" class="el-icon-mobile-phone" style="margin-top:15px"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="verifyCode">
|
<el-input v-model="phone.verifyCode" placeholder="请输入验证码" style="width: 254px;">
|
<i slot="prefix" class="el-icon-message" style="margin-top:15px"></i>
|
</el-input>
|
<el-button class="code-btn" :disabled="codeDisabled" @click="getCode('phone')">{{ codeMsg }}</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" style="width:380px;margin-top:10px;" @click="verifiPhone('phone')"
|
>下一步</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="box1" v-show="step2">
|
<div class="el-form-item">
|
<el-input v-model="newPassword" placeholder="输入新密码"></el-input>
|
</div>
|
<div class="el-form-item">
|
<el-input v-model="passwordAgain" placeholder="再次输入密码"></el-input>
|
</div>
|
<el-button type="primary" style="width:380px;margin-top:10px;" @click="resetPassword()">下一步</el-button>
|
</div>
|
|
<div class="box1" v-show="step3">
|
<p class="success-tip">密码设置成功</p>
|
<el-button type="primary" style="width:334px;" @click="resetSuccess()">立即登录</el-button>
|
<div class="link-tip">
|
<span style="color:#EA1E24">{{ time }}s</span>后自动跳转登录页
|
</div>
|
</div>
|
</div>
|
</content>
|
</div>
|
</template>
|
|
<script>
|
import { getVerifyCode, verifyPh, forgetPwd } from "@/api/login"
|
import { isPhone } from "@/scripts/validate"
|
export default {
|
data() {
|
return {
|
active: -1,
|
|
step1: true,
|
step2: false,
|
step3: false,
|
phone: {
|
phoneNum: "",
|
verifyCode: ""
|
},
|
//gotCode: false,
|
codeMsg: "获取验证码",
|
countdown: 60,
|
codeDisabled: false,
|
phoneCodeRule: {
|
phoneNum: [{ validator: isPhone, trigger: "change" }],
|
verifyCode: [{ required: true, message: "请输入验证码", trigger: "change" }]
|
},
|
time: 5,
|
newPassword: "",
|
passwordAgain: ""
|
}
|
},
|
mounted() {
|
this.next()
|
},
|
watch: {
|
time: function(newValue, oldValue) {
|
console("当前倒计时", this.time)
|
if (newValue == 0) {
|
this.$router.push("/")
|
}
|
}
|
},
|
methods: {
|
getValidStr() {
|
if (this.countdown > 0 && this.countdown <= 60) {
|
this.countdown--
|
if (this.countdown !== 0) {
|
this.codeMsg = "重新发送(" + this.countdown + ")"
|
} else {
|
clearInterval(this.timer)
|
this.codeMsg = "获取验证码"
|
this.countdown = 60
|
this.timer = null
|
this.codeDisabled = false
|
}
|
}
|
},
|
// 获取验证码
|
getCode(formName) {
|
// 验证码60秒倒计时
|
var pattern = /^1[345789]\d{9}$/
|
if (this.phone.phoneNum == "") {
|
this.$refs[formName].fields[0].validateMessage = "请输入手机号"
|
this.$refs[formName].fields[0].validateState = "error"
|
return
|
}
|
if (!pattern.test(this.phone.phoneNum)) {
|
this.$refs[formName].fields[0].validateMessage = "手机号码格式有误"
|
this.$refs[formName].fields[0].validateState = "error"
|
return
|
}
|
if (!this.timer) {
|
this.codeDisabled = true
|
this.getValidStr()
|
this.timer = setInterval(this.getValidStr, 1000)
|
getVerifyCode({ phoneNum: this.phone.phoneNum })
|
.then((res) => {
|
//this.gotCode = true;
|
})
|
.catch((err) => {
|
this.$refs[formName].fields[0].validateMessage = err.data.msg
|
this.$refs[formName].fields[0].validateState = "error"
|
})
|
}
|
},
|
verifiPhone(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
})
|
verifyPh({
|
phoneNum: this.phone.phoneNum,
|
verifyCode: this.phone.verifyCode
|
})
|
.then((res) => {
|
this.loading.close()
|
this.next()
|
})
|
.catch((err) => {
|
this.loading.close()
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: err.msg || err.data.msg,
|
duration: 2500,
|
offset: 57
|
})
|
})
|
} else {
|
return
|
}
|
})
|
},
|
resetPassword() {
|
// 校验两次密码输入是否一致
|
if (this.newPassword == this.passwordAgain) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
})
|
forgetPwd({ phoneNum: this.phone.phoneNum, newPwd: this.newPassword })
|
.then((res) => {
|
this.$notify({
|
type: "success",
|
message: "重置新密码成功",
|
duration: 2500,
|
offset: 57
|
})
|
this.loading.close()
|
setInterval(() => {
|
this.time--
|
if (this.time == 0) {
|
//this.forgetPassword = false;
|
this.$router.push("/")
|
}
|
}, 1000)
|
this.next()
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: "重置新密码失败，请重试",
|
duration: 2500,
|
offset: 57
|
})
|
this.loading.close()
|
})
|
} else {
|
this.$notify({
|
type: "error",
|
message: "两次密码输入请保持一致",
|
duration: 2500,
|
offset: 57
|
})
|
}
|
},
|
next() {
|
this.active++
|
console.log("当前active:", this.active)
|
switch (this.active) {
|
case 0:
|
this.step1 = true
|
this.step2 = false
|
this.step3 = false
|
break
|
case 1:
|
this.step1 = false
|
this.step2 = true
|
this.step3 = false
|
break
|
case 2:
|
this.step1 = false
|
this.step2 = false
|
this.step3 = true
|
break
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
content {
|
.el-input__inner:focus {
|
border-color: #888 !important;
|
}
|
.welcome {
|
padding-top: 40px;
|
height: 25px;
|
margin-bottom: 50px;
|
font-size: 25px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: bold;
|
color: #222222;
|
line-height: 25px;
|
}
|
.forgetPassword {
|
width: 900px;
|
height: 567px;
|
margin: 138px auto 0;
|
background: #ffffff;
|
.arrowToLine {
|
margin: 0 0 50px 138px;
|
padding: 0;
|
}
|
.arrowToLine .el-step.is-simple .el-step__head .el-step__icon {
|
width: 26px;
|
height: 26px;
|
}
|
.arrowToLine .el-step.is-simple .el-step__title {
|
font-size: 16px;
|
width: 64px;
|
}
|
.arrowToLine .el-step.is-simple .el-step__head .el-step__icon:after {
|
font-size: 16px;
|
}
|
.arrowToLine .el-step.is-simple .el-step__arrow::after {
|
width: 140px;
|
background: #ddd;
|
}
|
.code-btn {
|
margin-left: 10px;
|
width: 116px;
|
height: 40px;
|
border: none;
|
color: #ea1e24;
|
background: rgba(234, 30, 36, 0.04);
|
&.is-disabled {
|
background: #eee;
|
border-color: #eee;
|
color: #888;
|
}
|
}
|
.success-tip {
|
margin: 50px auto;
|
height: 22px;
|
font-size: 22px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #111111;
|
line-height: 22px;
|
}
|
.link-tip {
|
height: 14px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #555;
|
line-height: 14px;
|
margin-top: 20px;
|
}
|
.box1 {
|
width: 380px;
|
margin: auto;
|
}
|
}
|
}
|
</style>
|
