<template>
|
<div class="page-main">
|
<div class="form-box">
|
<div class="top-title">请先修改初始密码</div>
|
<el-form :rules="loginRules" :model="formData" ref="loginForm">
|
<el-form-item prop="password" label="新密码：" style="position: relative">
|
<el-input
|
v-model.trim="formData.oldPassword"
|
prefix-icon="el-icon-lock"
|
:type="passwordNewType"
|
placeholder="请填写新密码"
|
auto-complete="off"
|
ref="newPwd"
|
maxlength="15"
|
class="h-60"
|
/>
|
<span class="show-pwd" @click="showNewPwd">
|
<svg-icon :icon-class="passwordNewType === 'password' ? 'eye' : 'eye-open'"/>
|
</span>
|
<div style="font-size: 12px;color: #999"><span style="color: red;margin-right: 4px">*</span>密码长度在 8 到 12 个字符间,必须包含数字、大小写字母、特殊字符</div>
|
</el-form-item>
|
|
<el-form-item prop="password" label="确认新密码：" style="position: relative">
|
<el-input
|
v-model.trim="formData.newPassword"
|
prefix-icon="el-icon-lock"
|
:type="passwordType"
|
placeholder="请确认新密码"
|
auto-complete="off"
|
ref="subimtPwd"
|
maxlength="15"
|
class="h-60"
|
/>
|
<span class="show-pwd" @click="showPwd">
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
|
</span>
|
</el-form-item>
|
</el-form>
|
<div class="f-r f-r-center m-b-20">
|
<el-button type="primary" class="sub-btn" @click="updatePassword">提交</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {encrypt} from '@/utils/jsencrypt'
|
import {getChangePass} from '@/api/user'
|
|
export default {
|
name: "resetPassword",
|
data() {
|
return {
|
formData: {
|
oldPassword: '',
|
newPassword: ''
|
},
|
passwordNewType: 'password',
|
passwordType: 'password',
|
loginRules: {
|
oldPassword: [
|
{required: true, trigger: 'blur', message: '请输入密码'},
|
{min: 6, message: '长度不小于6字符', trigger: 'blur'}
|
],
|
newPassword: [
|
{required: true, trigger: 'blur', message: '请输入确认密码'},
|
{min: 6, message: '长度不小于6字符', trigger: 'blur'}
|
]
|
},
|
}
|
},
|
methods: {
|
showPwd() {
|
if (this.passwordType === 'password') {
|
this.passwordType = '';
|
} else {
|
this.passwordType = 'password';
|
}
|
this.$nextTick(() => {
|
this.$refs.subimtPwd.focus();
|
});
|
},
|
showNewPwd() {
|
if (this.passwordNewType === 'password') {
|
this.passwordNewType = '';
|
} else {
|
this.passwordNewType = 'password';
|
}
|
this.$nextTick(() => {
|
this.$refs.newPwd.focus();
|
});
|
},
|
updatePassword() {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
if (this.formData.oldPassword !== this.formData.newPassword) {
|
this.$message.error('两次输入密码不一致')
|
return
|
}
|
let formData = {
|
encryptPassword: encrypt(this.formData.newPassword)
|
}
|
getChangePass(formData).then(res => {
|
this.$message.success('修改密码成功~跳转首页')
|
// 更新用户信息，跳转主页面
|
this.$store.dispatch('user/getInfo').then(res => {
|
this.$store.commit('user/SET_ROLES',[])
|
this.$router.push({path: this.redirect || '/dashboard', query: this.otherQuery});
|
}).catch((err) => {
|
|
})
|
})
|
} else {
|
return false;
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.page-main {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
align-items: flex-start;
|
}
|
|
.form-box {
|
width: 500px;
|
margin: 100px auto;
|
padding: 30px 50px;
|
border-radius: 16px;
|
background: #FFFFFF;
|
}
|
|
.top-title {
|
padding: 20px 0 !important;
|
font-size: 18px;
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 20px;
|
}
|
|
.show-pwd {
|
position: absolute;
|
right: 10px;
|
top: 40px;
|
font-size: 16px;
|
color: #333;
|
cursor: pointer;
|
user-select: none;
|
|
::v-deepsvg-icon {
|
vertical-align: 0.3em;
|
}
|
}
|
|
.h-60 > > > .el-input__inner {
|
height: 40px;
|
}
|
|
.sub-btn {
|
width: 80%;
|
height: 40px;
|
}
|
|
.m-b-20 {
|
margin-bottom: 20px;
|
}
|
</style>
|
