102 lines
2.9 KiB
Vue
102 lines
2.9 KiB
Vue
<template>
|
|
<el-card shadow="never" header="修改密码">
|
|
<el-alert title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。" type="error" show-icon style="margin-bottom: 15px;"/>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;width: 518px;">
|
|
<el-form-item label="当前密码" prop="old_pwd">
|
|
<el-input v-model="form.old_pwd" type="password" show-password placeholder="请输入当前密码"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="new_pwd">
|
|
<el-popover
|
|
class="popoverPassword"
|
|
placement="right"
|
|
title=""
|
|
:width="360"
|
|
trigger="click"
|
|
content=""
|
|
>
|
|
<template #reference>
|
|
<el-input v-model="form.new_pwd" type="password" show-password placeholder="请输入新密码"></el-input>
|
|
</template>
|
|
<template #default>
|
|
<div class="passwordView">
|
|
<div class="title">
|
|
<div class="name">安全程度等级:</div>
|
|
<div class="strength"><sc-password-strength v-model="form.new_pwd"></sc-password-strength></div>
|
|
</div>
|
|
<div class="text"><div class="icon"></div>6-20位字符</div>
|
|
<div class="text"><div class="icon"></div>只能包含大小写字母、数字和标点符号（除空格）</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</el-form-item>
|
|
<el-form-item label="确认新密码" prop="conf_pwd">
|
|
<el-input v-model="form.conf_pwd" type="password" show-password placeholder="请再次输入新密码"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="save">保存密码</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import scPasswordStrength from '@/components/scPasswordStrength'
|
|
|
|
export default {
|
|
components: {
|
|
scPasswordStrength
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
old_pwd: "",
|
|
new_pwd: "",
|
|
conf_pwd: ""
|
|
},
|
|
rules: {
|
|
old_pwd: [
|
|
{ required: true, message: '请输入当前密码'}
|
|
],
|
|
new_pwd: [
|
|
{ required: true, message: '请输入新密码'}
|
|
],
|
|
conf_pwd: [
|
|
{ required: true, message: '请再次输入新密码'},
|
|
{validator: (rule, value, callback) => {
|
|
if (value !== this.form.new_pwd) {
|
|
callback(new Error('两次输入密码不一致'));
|
|
}else{
|
|
callback();
|
|
}
|
|
}}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
save(){
|
|
this.$refs.form.validate(async valid => {
|
|
if (valid) {
|
|
const res = await this.$API.user.editPass.post(this.form);
|
|
if(res.code == 200){
|
|
this.$alert("密码修改成功，是否跳转至登录页使用新密码登录", "修改成功", {
|
|
type: 'success',
|
|
center: true
|
|
}).then(() => {
|
|
this.$router.replace({
|
|
path: '/login'
|
|
})
|
|
}).catch(() => {})
|
|
}
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|