<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-27 08:46:34
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-16 15:47:30
|
* @Description:
|
-->
|
<template>
|
<div class="forgetpassword h-100-g">
|
<v-navbar title="忘记密码" fixed></v-navbar>
|
|
|
<div class="re-input-box">
|
<van-field
|
v-model="form.mblNo"
|
type="tel"
|
clearable
|
maxlength='11'
|
placeholder="请输入手机号码"
|
/>
|
<van-field
|
v-model="form.password1"
|
clearable
|
maxlength='16'
|
:type="pwdType"
|
placeholder="请输入8-16位数字字母组合密码"
|
@click-right-icon="showPassword"
|
>
|
<van-icon :color="$store.state.backColor" :name="eye" slot="right-icon"/>
|
</van-field>
|
|
<van-field
|
v-model="form.password2"
|
clearable
|
maxlength='16'
|
:type="pwdType2"
|
placeholder="请再次输入新密码"
|
@click-right-icon="showPassword2"
|
>
|
<van-icon :color="$store.state.backColor" :name="eye2" slot="right-icon"/>
|
</van-field>
|
|
|
|
<van-field
|
v-model="form.msgCode"
|
clearable
|
maxlength='4'
|
type="number"
|
placeholder="请输入短信验证码"
|
>
|
<van-button class="mgs-btn" slot="button" size="small" @click="sendMSG" >{{ sendText }}</van-button>
|
</van-field>
|
</div>
|
|
|
|
<div class="btn-box">
|
<van-button class="btn" :color="$store.state.backColor" @click="reSetPwd">重置密码</van-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import md5 from 'blueimp-md5';
|
export default {
|
name: "forgetpassword",
|
data(){
|
return {
|
form:{
|
mblNo: '',
|
password1: '',
|
password2: '',
|
msgCode: ''
|
},
|
|
pwdType:'password',
|
pwdType2:'password',
|
eye:'closed-eye',
|
eye2:'closed-eye',
|
|
|
|
sendText:'发送验证码',
|
SEND:false,
|
timer:'',
|
|
|
ruler:[
|
{key:"mblNo",message:"请输入手机号",type:"isEmpty"},
|
{key:"mblNo",message:"请输入正确的手机号",type:"isTel"},
|
{key:"password1",message:"请输入密码",type:"isEmpty"},
|
{key:"password1",message:"请输入正确的密码",type:"isPassword"},
|
{key:"password2",message:"请输入确认密码",type:"isEmpty"},
|
{key:"msgCode",message:"请输入验证码",type:"isEmpty"},
|
{key:"msgCode",message:"请输入正确的验证码",type:"isCode"},
|
],
|
|
ruleCode:[
|
{key:"mblNo",message:"请输入手机号",type:"isEmpty"},
|
{key:"mblNo",message:"请输入正确的手机号",type:"isTel"},
|
],
|
|
|
}
|
},
|
computed:{
|
|
},
|
methods:{
|
//是否显示明文密码
|
showPassword() {
|
if (this.pwdType === 'password') {
|
this.pwdType = 'text';
|
this.eye = 'eye-o';
|
} else {
|
this.pwdType = 'password';
|
this.eye = 'closed-eye';
|
}
|
},
|
//是否显示明文密码
|
showPassword2() {
|
if (this.pwdType2 === 'password') {
|
this.pwdType2 = 'text';
|
this.eye2 = 'eye-o';
|
} else {
|
this.pwdType2 = 'password';
|
this.eye2 = 'closed-eye';
|
}
|
},
|
|
|
reSetPwd(){
|
if(!this.validatorForm(this.ruler)) return
|
if (this.form.password1 !== this.form.password2) {
|
this.$notify('两次密码不相同');
|
return;
|
}
|
let newPwd = md5(this.form.mblNo + this.form.password1);
|
|
|
this.$api.userForgetPwd({
|
newPwd,
|
verCode: this.form.msgCode,
|
verCodeType: 0,
|
mblNo: this.form.mblNo
|
}).then(res => {
|
this.$notify_success('重置成功！')
|
//这里更新自动登录的密码
|
|
|
|
|
|
//这里更新自动登录的密码
|
if(sessionStorage.isddxt == 1){
|
this.$router.push('/?platNo=ddxt');
|
}else{
|
this.$router.push('/');
|
}
|
|
})
|
|
|
},
|
|
//发送短信验证码
|
sendMSG(){
|
if(this.SEND){return ;}
|
this.SEND = true;
|
if(!this.validatorForm(this.ruleCode)) return
|
let sendParams = {
|
mblNo: this.form.mblNo,
|
verCodeType: 0,
|
anonySign: 'qwre',
|
chanNo: '1212'
|
};
|
this.$api.userSendMsg(sendParams).then(res=>{
|
let countDown = 60;
|
this.sendText = countDown + 's后重发';
|
this.timer = setInterval(() => {
|
countDown--;
|
this.sendText = countDown + 's后重发';
|
if (countDown === 0) {
|
clearInterval(this.timer);
|
this.sendText = '重新发送';
|
this.SEND = false;
|
}
|
}, 1000);
|
}).catch(()=>{
|
this.SEND = false;
|
})
|
|
},
|
|
|
// 验证form参数
|
validatorForm(rule = []){
|
return this.$validator(this.form,rule).check(item=>{
|
this.$notify(item.message)
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.forgetpassword{
|
padding-top:50px;
|
|
|
.mgs-btn{
|
border-radius: 22px;
|
background-color: @c-fff;
|
border: none;
|
margin: 0 auto;
|
}
|
|
|
|
.re-input-box{
|
padding: 5px;
|
}
|
|
.btn-box{
|
width: 100%;
|
.flex(center,center);
|
margin-top: 40px;
|
}
|
|
.btn {
|
width: 340px;
|
height: 44px;
|
border: none;
|
font-size: @font-16;
|
border-radius: 22px;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
margin: 0 auto;
|
}
|
|
|
}
|
</style>
|
