<template>
|
<el-row class="container">
|
<p-head></p-head>
|
<div class='pass_box'>
|
<el-col :span="24" class="main">
|
<el-form class="password_box" :model="setPasswordData" :rules="rules" ref="ruleForm"
|
style="width: 400px;margin: auto;" label-width="120px" label-position="left">
|
<el-row>
|
<el-form-item label="原密码" prop="oldPassword">
|
<el-input v-model="setPasswordData.oldPassword" placeholder="请输入原密码" type="password"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input v-model="setPasswordData.newPassword" placeholder="请输入新密码" id="newkey"
|
type="password"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-form-item label="重复新密码" prop="checknewpass">
|
<el-input v-model="setPasswordData.checknewpass" placeholder="请再次输入新密码" id='newkey1'
|
type="password"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit" :disabled="btn_status" :loading="isloading">保存</el-button>
|
<el-button type="primary" @click="resetFields(ruleForm)">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</div>
|
|
<p-foot></p-foot>
|
</el-row>
|
</template>
|
|
<script>
|
import PHead from '@/base/components/head.vue';
|
import PFoot from '@/base/components/foot.vue';
|
import * as homeApi from '../api/home';
|
import utilApi from '@/common/utils';
|
|
export default {
|
name: "password",
|
components: {
|
PHead,
|
PFoot
|
},
|
data() {
|
var validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入新密码"));
|
} else if (value !== this.setPasswordData.newPassword) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
rules: {
|
oldPassword: [{required: true, message: "请输入原密码"}],
|
newPassword: [
|
{
|
required: true,
|
message: "请输入新密码",
|
trigger: 'blur'
|
},
|
{
|
pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
|
message: '密码由8位数字、大小写字母和特殊符号组成!',
|
}],
|
checknewpass: [{required: true, validator: validatePass2, trigger: "blur"}]
|
},
|
setPasswordData: {
|
newPassword: '',
|
oldPassword: '',
|
checknewpass: '',
|
userId: ''
|
},
|
btn_status: true,
|
isloading: false
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
let activeUser = utilApi.getActiveUser()
|
if (activeUser && activeUser.userid) {
|
this.setPasswordData.userId = activeUser.userid;
|
}
|
},
|
watch: {
|
setPasswordData: {
|
handler(n, o) {
|
if (n.oldPassword != '' && n.newPassword != '' && n.newPassword == n.checknewpass) {
|
|
this.btn_status = false
|
} else {
|
this.btn_status = true
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
onSubmit() {
|
this.isloading = true
|
homeApi.set_password(this.setPasswordData).then((res) => {
|
this.isloading = false
|
console.log(res)
|
if (res.success) {
|
this.$message.success(res.message);
|
this.$router.replace('/home');
|
} else {
|
this.$message.error(res.message);
|
}
|
|
|
})
|
.catch(err => {
|
console.error(err);
|
})
|
},
|
resetForm(formName) {
|
// this.$refs[formName].resetFields();
|
|
``
|
},
|
pass_istrue(password) {
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.pass_box {
|
width: 100%;
|
height: 100%;
|
background-image: url("/static/images/background.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.password_box {
|
padding: 75px 60px 20px 50px;;
|
border-radius: 20px;
|
-moz-border-radius: 20px;
|
-webkit-border-radius: 20px;
|
background-color: rgba(250, 250, 250, 0.2);
|
}
|
|
.password_box input {
|
margin-bottom: 1vh;
|
}
|
|
.container {
|
position: absolute;
|
top: 0px;
|
bottom: 0px;
|
width: 100%;
|
}
|
|
.pass_box .main {
|
display: flex;
|
position: absolute;
|
/* margin: 50px 0 0 0; */
|
top: 60px;
|
bottom: 0px;
|
overflow: hidden;
|
|
}
|
|
.pass_box .el-form-item .el-form-item__label {
|
font-size: 1.8vh;
|
color: #fff;
|
}
|
|
.pass_box .el-form-item .el-button {
|
margin: 10% 10%;
|
}
|
</style>
|
