<template>
|
<div class="forget-page">
|
<x-header :left-options="{backText: ''}">忘记密码</x-header>
|
<div class="pagebody">
|
<group class="forget-input" label-width="73px">
|
<x-input title="手机号码"
|
name="mobile"
|
v-model="userObj.mblNo"
|
type="tel"
|
:min="11" :max="11"
|
:novalidate="true"
|
placeholder="请输入手机号码"
|
keyboard="number"></x-input>
|
<x-input title="新密码"
|
name="password"
|
v-model="userObj.password"
|
:type="pwdType"
|
:novalidate="true"
|
onpaste="return false"
|
oncopy="return false"
|
:min="8" :max="16"
|
placeholder="请输入8-16位数字字母组合密码">
|
<i slot="right" v-show="pwdType=='text'" class="iconfont icon-eye" @click="showPassword"></i>
|
<i slot="right" v-show="pwdType=='password'" class="iconfont icon-hide" @click="showPassword"></i>
|
</x-input>
|
<x-input title="验证码"
|
name="verCode"
|
v-model="userObj.verCode"
|
type="tel"
|
:min="4" :max="4"
|
:novalidate="true"
|
placeholder="请输入验证码"
|
keyboard="number">
|
<span slot="right" class="getverCode" @click="sendCode">{{codeButText}}</span>
|
</x-input>
|
</group>
|
<div class="input-btnbox">
|
<FButton :text="'重置密码'" @click.native="updatePd"></FButton>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { XButton,XInput,Group,Flexbox,FlexboxItem,XHeader} from 'vux';
|
import FButton from '../../components/common/FButton';
|
import SystApi from '../../api/api';
|
import { md5 } from 'vux';
|
import validate from '../../tool/validator';
|
import statusCodeManage from '../../api/statusCodeManage'
|
import { mapState } from 'vuex'
|
/**
|
* Created by z.x.q on 2018/3/27.
|
* 我的--注册
|
*/
|
export default {
|
name: 'f-forget-password',
|
components: {
|
XButton,XInput,Group,Flexbox,FlexboxItem,FButton,XHeader,FButton
|
},
|
data(){
|
return {
|
pwdType:'password',
|
codeButText:'获取验证码',
|
abledClick:true,
|
clearID:null,
|
userObj:{
|
mblNo:'',
|
password:'',
|
verCode:''
|
}
|
}
|
},
|
computed: {
|
...mapState({
|
cn: state => state.vux.cn
|
})
|
},
|
methods:{
|
showPassword(){
|
if(this.pwdType==='password'){
|
this.pwdType='text';
|
}else{
|
this.pwdType='password';
|
}
|
},
|
checkUserName() {
|
if (validate.checkValEmpty(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入手机号', 'middle');
|
return false;
|
} else if (!validate.checkPhone(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入正确的手机号', 'middle');
|
return false;
|
} else {
|
return true;
|
}
|
},
|
sendCode() { // 发送验证码
|
if(!this.abledClick){
|
return;
|
}
|
let _this = this;
|
const _userNameState = this.checkUserName();
|
if (!_userNameState) {
|
return false;
|
}
|
_this.abledClick = false;
|
// 设置倒计时
|
let countDown = 60;
|
_this.codeButText = countDown + 's后重发';
|
_this.clearID = setInterval(function () {
|
countDown--;
|
_this.codeButText = countDown + 's后重发';
|
if (countDown === 0) {
|
clearInterval(_this.clearID);
|
_this.codeButText = '重新获取验证码';
|
_this.abledClick = true;
|
}
|
}, 1000);
|
let _par = {
|
mblNo: this.userObj.mblNo,
|
verCodeType: 1
|
};
|
SystApi.getVerCode(_par).then(function (res) {
|
if (res.errorCode === 0) { }
|
}, function (error) {
|
if (error.response) {
|
clearInterval(_this.clearID);
|
_this.codeButText = '重新获取验证码';
|
_this.abledClick = true;
|
// The request was made and the server responded with a status code
|
// that falls out of the range of 2xx
|
|
}
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
})
|
},
|
updatePd() { // 修改密码
|
let _this = this;
|
if (validate.checkValEmpty(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入手机号', 'middle');
|
return;
|
}
|
if (validate.checkValEmpty(this.userObj.password)) {
|
this.$vux.toast.text('请输入密码', 'middle');
|
return;
|
}
|
if (validate.checkValEmpty(this.userObj.verCode)) {
|
this.$vux.toast.text('请输入验证码', 'middle');
|
return;
|
}
|
if (!validate.checkPhone(this.userObj.mblNo)) {
|
this.$vux.toast.text('请输入正确的手机号', 'middle');
|
return;
|
}
|
if (!validate.checkDynamicCode(this.userObj.verCode)) {
|
this.$vux.toast.text('请输入正确的验证码', 'middle');
|
return;
|
}
|
if (!validate.checkPassword(this.userObj.password)) {
|
this.$vux.toast.text('请输入正确的密码', 'middle');
|
return;
|
}
|
let tmpPassword = md5(this.userObj.mblNo + this.userObj.password);
|
let _par = {
|
mblNo: this.userObj.mblNo,
|
password: tmpPassword,
|
confirmPwd: tmpPassword,
|
verCode: this.userObj.verCode
|
};
|
SystApi.forgetPwd(_par).then(response => {
|
if (response.errorCode === 0) {
|
_this.$vux.toast.show({
|
width: '80%',
|
type: 'text',
|
text: '密码修改成功，请重新登录',
|
time: 2000,
|
position: 'middle',
|
onHide: function () {
|
try {
|
clearInterval(_this.clearID);
|
_this.codeButText = '获取验证码';
|
} catch (e) {
|
|
}
|
_this.$router.push({name: 'f-login'});
|
}
|
})
|
}
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err, _this);
|
})
|
},
|
},
|
activated(){
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
this.codeButText = '获取验证码';
|
this.abledClick = true;
|
this.userObj.mblNo = '';
|
this.userObj.password = '';
|
this.userObj.verCode = '';
|
},
|
deactivated () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
}
|
}
|
</script>
|
<style lang="less">
|
@import "../../style/mixin.less";
|
.forget-page{
|
.vux-header{
|
.color-linear-gradient(@color-primary-light,@color-primary,90deg);
|
.vux-header-title{
|
font-size: 18px;
|
}
|
.vux-header-left{
|
.left-arrow:before{
|
border:solid 1px @color-white;
|
border-width:2px 0 0 2px;
|
}
|
|
}
|
}
|
.pagebody{
|
padding:0 12px 0 12px ;
|
.forget-input{
|
.weui-cells{
|
.weui-cell{
|
height:23px;
|
border:1px solid @color-disabled;
|
border-radius: @border-radius-normal-size;
|
margin-top: 10px;
|
font-size:@font-size-base;
|
.weui-cell__ft{
|
.getverCode{
|
padding-left: 10px;
|
display:inline-block;
|
color: @color-primary;
|
border-left:1px solid @color-divider-regular;
|
}
|
}
|
}
|
.weui-cell:before{
|
display: none;
|
}
|
}
|
.weui-cells:before{
|
display: none;
|
}
|
.weui-cells:after{
|
display: none;
|
}
|
}
|
.f-button{
|
width: 100%;
|
}
|
|
}
|
}
|
|
</style>
|
