171 lines
3.4 KiB
Vue
171 lines
3.4 KiB
Vue
<template>
|
|
<div class="login-wrap">
|
|
<div class="ms-login">
|
|
<div class="ms-title">修改密码</div>
|
|
<el-form :model="param" :rules="rules" ref="retrieveact" label-width="0px" class="ms-content">
|
|
<el-form-item prop="password">
|
|
<el-input v-model="param.password" placeholder="password">
|
|
<i slot="prefix" class="el-icon-key" />
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="repassword">
|
|
<el-input v-model="param.repassword" placeholder="repassword">
|
|
<i slot="prefix" class="el-icon-key" />
|
|
</el-input>
|
|
</el-form-item>
|
|
<div class="login-btn">
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function() {
|
|
var validatePass2 = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('Please repeat enter your password'));
|
|
} else if (value !== this.param.password) {
|
|
callback(new Error('The two input passwords are inconsistent!'));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
param: {
|
|
actkey: this.$route.query.actkey,
|
|
password: '',
|
|
repassword: ''
|
|
},
|
|
rules: {
|
|
password: [{
|
|
required: true,
|
|
message: 'Please enter your password.',
|
|
trigger: 'blur'
|
|
}],
|
|
repassword: [{
|
|
required: true,
|
|
validator: validatePass2,
|
|
trigger: 'blur'
|
|
}]
|
|
}
|
|
};
|
|
},
|
|
created: function() {
|
|
this.check_key();
|
|
},
|
|
methods: {
|
|
check_key() {
|
|
this.$api
|
|
.post('api/user/checkActkey', {
|
|
actkey: this.param.actkey
|
|
})
|
|
.then(res => {
|
|
if (res.code == 1) {
|
|
this.$alert('无效的连接参数', '非法访问', {
|
|
confirmButtonText: '确定',
|
|
callback: action => {
|
|
this.$router.push('/');
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
submitForm() {
|
|
this.$refs.retrieveact.validate(valid => {
|
|
if (valid) {
|
|
this.$api
|
|
.post('api/user/retrieve', this.param)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: 'success'
|
|
});
|
|
this.$router.push('/');
|
|
} else {
|
|
this.$message({
|
|
type: 'info',
|
|
message: res.msg
|
|
});
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
} else {
|
|
this.$message.error('Please enter the correct account and password.');
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../../assets/img/login-bg.jpg);
|
|
background-size: 100%;
|
|
}
|
|
|
|
.ms-title {
|
|
width: 100%;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.ms-login {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 350px;
|
|
margin: -190px 0 0 -175px;
|
|
border-radius: 5px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-content {
|
|
padding: 30px 30px;
|
|
}
|
|
|
|
.login-btn {
|
|
text-align: center;
|
|
}
|
|
|
|
.login-btn button {
|
|
width: 40%;
|
|
height: 36px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.login-tips {
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
}
|
|
|
|
.captchaimg {
|
|
margin-top: 2px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.backlink {
|
|
text-align: left;
|
|
padding-top: 12px;
|
|
}
|
|
</style>
|