<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-form-item label="原密码" prop="oldPassword">
|
<el-col>
|
<el-input v-model="setPasswordData.oldPassword" placeholder="请输入原密码" type="password"></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPassword">
|
<el-col>
|
<el-input v-model="setPasswordData.newPassword" placeholder="请输入新密码" id="newkey" type="password"></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="重复新密码" prop="checknewpass">
|
<el-col>
|
<el-input v-model="setPasswordData.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input>
|
</el-col>
|
</el-form-item>
|
<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: "请输入新密码" } ],
|
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>
|
