<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="修改交易密码"
|
:left-options="{backText: ''}"></x-header>
|
<group class="personInfo xInput">
|
<x-input text-align="right" v-model.trim="oldPwd" type="password" title="原交易密码" :min="6" :max="6"
|
placeholder="请输入6位数字"
|
required @on-blur="checkPwd"></x-input>
|
<x-input text-align="right" v-model.trim="newPwd" type="password" title="新交易密码" :min="6" :max="6"
|
placeholder="请输入6位数字"
|
required @on-blur="checkNewPwd"></x-input>
|
<x-input text-align="right" v-model.trim="confirmPwd" type="password" title="确认交易密码" :min="6" :max="6"
|
placeholder="请再次输入密码"
|
required @on-blur="checkConfirmPwd"></x-input>
|
</group>
|
<div style="height: 20px"></div>
|
<box gap="0 15px">
|
<x-button :type="canClick? 'primary' : ''" @click.native="changePwd" :disabled="!canClick">确认修改
|
</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, Group, XInput, XButton, Box, md5} from 'vux';
|
import SysApi from '../../../api/api';
|
import validate from '../../../tool/validator';
|
import fToast from '../../../tool/fToast';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
|
export default {
|
name: 'modifyPasswrod',
|
components: {XHeader, Group, XInput, XButton, Box},
|
data() {
|
return {
|
isLastStep: false, // 是否是最后一步
|
activePageItem: 0, // 激活当前页
|
pageList: [], // 一共有几页
|
oldPwd: '',//原交易密码
|
newPwd: '',//新交易密码
|
confirmPwd: '' //确认交易密码
|
};
|
},
|
computed: {
|
canClick() {
|
return this.oldPwd.length === 6 && this.newPwd.length === 6 && this.confirmPwd.length === 6
|
}
|
},
|
methods: {
|
//验证密码是否为纯6位数字
|
checkPwd(pwd = this.oldPwd) {
|
let res = validate.checkVerifyCode(pwd);
|
if (!res) fToast.toast('请输入6位数字密码');
|
return res
|
},
|
//检查新密码是否与原密码相等
|
checkNewPwd() {
|
if (this.checkPwd(this.newPwd)) {
|
if (this.newPwd.length === 6 && this.newPwd === this.oldPwd) {
|
fToast.toast('新密码不能原密码相同');
|
return true;
|
} else return false
|
} else return true
|
},
|
//检查新密码是否与确认密码相等
|
checkConfirmPwd() {
|
if (this.checkPwd(this.confirmPwd)) {
|
if (this.confirmPwd.length === 6 && this.newPwd !== this.confirmPwd) {
|
fToast.toast('确认密码不一致');
|
return true;
|
} else return false
|
} else return true
|
},
|
// 确认修改按钮
|
changePwd() {
|
if (this.checkNewPwd() || this.checkConfirmPwd()) return;
|
SysApi.changePwd({
|
prodId: sessionStorage.prodId,
|
oldPwd: md5(sessionStorage.newPhoneNum + this.oldPwd),
|
newPwd: md5(sessionStorage.newPhoneNum + this.newPwd),
|
confirmPwd: md5(sessionStorage.newPhoneNum + this.confirmPwd),
|
}).then(res => {
|
this.$router.push({path: '/bnd/loan/modifyPasswrodSuccess'})
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../../style/mixin.less";
|
|
.loan-info-box {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
.xInput .weui-cell {
|
height: 24px;
|
}
|
}
|
|
.weui-input, .weui-cell__bd {
|
font-size: @font-size-base;
|
}
|
|
.weui-label {
|
font-size: @font-size-base;
|
}
|
|
.personInfo ::-webkit-input-placeholder { /* WebKit browsers */
|
color: #bfbfbf;
|
}
|
|
.personInfo :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
color: #bfbfbf;
|
}
|
|
.personInfo ::-moz-placeholder { /* Mozilla Firefox 19+ */
|
color: #bfbfbf;
|
}
|
|
.personInfo :-ms-input-placeholder { /* Internet Explorer 10+ */
|
color: #bfbfbf;
|
}
|
|
.header-space {
|
height: 46px;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
/*------------------------------*/
|
.vux-no-group-title {
|
margin-top: 0.77rem !important;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
