<template>
|
<div class="update-page">
|
<x-header :left-options="{backText: ''}" class="gradient-color">修改密码</x-header>
|
<group class="update-input" label-width="73px">
|
<x-input title="原密码"
|
placeholder="请输入原密码"
|
:min="8"
|
:max="16"
|
:type="showPwd1"
|
:novalidate="true"
|
v-model="oldPassword">
|
<i slot="right" @click="changePwd(1)" class="iconfont"
|
:class='{"icon-eye":showPwd1=="text","icon-hide":showPwd1=="password"}'></i>
|
</x-input>
|
<x-input title="新密码"
|
:type="showPwd2"
|
v-model="newPassword"
|
:min="8"
|
:max="16"
|
:novalidate="true"
|
placeholder="请输入密码"
|
class="password">
|
<i slot="right" @click="changePwd(2)" class="iconfont"
|
:class='{"icon-eye":showPwd2=="text","icon-hide":showPwd2=="password"}'></i>
|
</x-input>
|
<x-input title="确认密码"
|
:type="showPwd3"
|
v-model="confirmPassword"
|
:novalidate="true"
|
:min="8"
|
:max="16"
|
placeholder="请再次确认密码"
|
class="password">
|
<i slot="right" @click="changePwd(3)" class="iconfont"
|
:class='{"icon-eye":showPwd3=="text","icon-hide":showPwd3=="password"}'></i>
|
</x-input>
|
</group>
|
<FButton :text="'确认修改'" @on-click-button="changeBut"></FButton>
|
</div>
|
</template>
|
|
<script>
|
import {XButton, XInput, Group, Flexbox, FlexboxItem, XHeader, md5} from 'vux';
|
import FButton from'../../components/common/FButton';
|
import validate from '../../tool/validator';
|
import SysApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import initData from '../../tool/initData';
|
/**
|
* Created by z.x.q on 2018/3/22.
|
* 我的--登录
|
*/
|
export default {
|
name: 'f-update-password',
|
components: {
|
XButton, XInput, Group, Flexbox, FlexboxItem, FButton, XHeader
|
},
|
data(){
|
return {
|
showPwd1: 'password',
|
showPwd2: 'password',
|
showPwd3: 'password',
|
oldPassword: '',
|
newPassword: '',
|
confirmPassword: ''
|
}
|
},
|
methods: {
|
changePwd(which){
|
if (this[`showPwd${which}`] === 'password') {
|
this[`showPwd${which}`] = 'text';
|
} else {
|
this[`showPwd${which}`] = 'password';
|
}
|
},
|
changeBut(){
|
if (validate.checkValEmpty(this.oldPassword)) {
|
this.$vux.toast.text('请输入原密码', 'middle');
|
return;
|
}
|
if (validate.checkValEmpty(this.newPassword)) {
|
this.$vux.toast.text('请输入新密码', 'middle');
|
return;
|
}
|
if (validate.checkValEmpty(this.confirmPassword)) {
|
this.$vux.toast.text('请输入确认密码', 'middle');
|
return;
|
}
|
if (!validate.checkPassword(this.oldPassword)) {
|
this.$vux.toast.text('请输入正确的密码', 'middle');
|
return;
|
}
|
if (!validate.checkPassword(this.newPassword)) {
|
this.$vux.toast.text('请设置8-16位数字+字母组合密码', 'middle');
|
return;
|
}
|
if (!validate.checkPassword(this.confirmPassword)) {
|
this.$vux.toast.text('请输入正确的确认密码', 'middle');
|
return;
|
}
|
if (this.newPassword !== this.confirmPassword) {
|
this.$vux.toast.text('新密码与确认密码不同', 'middle');
|
return;
|
}
|
let mblNo = window.sessionStorage.getItem('newPhoneNum');
|
let obj = {
|
mblNo: mblNo,
|
oldPassword: md5(mblNo + this.oldPassword),
|
newPassword: md5(mblNo + this.newPassword)
|
};
|
SysApi.editPwd(obj).then(
|
res => {
|
this.$vux.toast.show({
|
width: '80%',
|
type: 'text',
|
text: '修改成功',
|
time: 1500,
|
position: 'middle',
|
onHide: () => {
|
window.sessionStorage.removeItem('newSid')
|
window.sessionStorage.removeItem('newPhoneNum')
|
window.sessionStorage.removeItem('newClientState')
|
this.$router.push({name: 'f-login'});
|
|
}
|
})
|
},
|
err => {
|
statusCodeManage.showTipOfStatusCode(err, this);
|
}
|
)
|
}
|
},
|
activated () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
},
|
deactivated(){
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
this.showPwd1 = this.showPwd2 = this.showPwd3 = 'password';
|
initData(['oldPassword', 'newPassword', 'confirmPassword'], this);
|
}
|
}
|
</script>
|
|
<style lang="less" rel="stylesheet/less">
|
@import "../../style/mixin.less";
|
|
.update-page {
|
background-color: @color-background-default;
|
.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;
|
}
|
}
|
.vux-header-right {
|
color: @color-white !important;
|
}
|
}
|
.update-input {
|
.weui-cells {
|
margin-top: 0;
|
background-color: @color-background-default;
|
.weui-cell {
|
height: 23px;
|
background-color: @color-white;
|
border-bottom: 1px solid @color-disabled;
|
font-size: @font-size-base;
|
&:last-child {
|
border-bottom: transparent;
|
}
|
&:first-child {
|
margin-top: 10px;
|
}
|
}
|
.weui-cell:before {
|
display: none;
|
}
|
}
|
.weui-cells:before {
|
display: none;
|
}
|
.weui-cells:after {
|
display: none;
|
}
|
}
|
.input-other {
|
font-size: @font-size-medium;
|
.flexLayout(space-between, center, row);
|
span {
|
&:first-child {
|
color: @color-text-secondary;
|
}
|
&:nth-child(2) {
|
color: @color-primary;
|
}
|
}
|
}
|
}
|
|
</style>
|
