1 changed files with 123 additions and 0 deletions
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<div class="page"> |
|||
<div class="card m-top5 m-top5-left m-top5-right flex " style="box-shadow: none;"> |
|||
<van-cell-group> |
|||
<van-field :required="false" clearable label="账号" icon="question-o" placeholder="请输入用户名" |
|||
v-model="userName" style="opacity: 1; pointer-events: none;" /> |
|||
<van-field ref="oldPasswordField" type="password" label="原始密码" placeholder="原密码" |
|||
v-model="dataForm.oldPassword" :error-message="errorMessages.oldPasswordError" |
|||
@blur="validateOldPassword" /> |
|||
<van-field ref="newPasswordField" type="password" label="新密码" placeholder="输入新密码" |
|||
v-model="dataForm.newPassword" :error-message="errorMessages.newPasswordError" |
|||
@blur="validateNewPassword" /> |
|||
<van-field ref="confirmPasswordField" type="password" label="确认密码" placeholder="确认新密码" |
|||
v-model="dataForm.confirmPassword" :error-message="errorMessages.confirmPasswordError" |
|||
@blur="validateConfirmPassword" /> |
|||
</van-cell-group> |
|||
</div> |
|||
<van-button type="info" round block style="margin-top: 35px;" @click="changePassword()">确定修改</van-button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { changePassword } from '@/api/user' |
|||
import { encryptedData } from "@/utils"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
userName: '', |
|||
dataForm: { |
|||
oldPassword: '', |
|||
newPassword: '', |
|||
confirmPassword: '' |
|||
}, |
|||
errorMessages: { |
|||
oldPasswordError: '', |
|||
newPasswordError: '', |
|||
confirmPasswordError: '' |
|||
}, |
|||
regex: { |
|||
passwordRegex: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/ |
|||
}, |
|||
touched: { |
|||
oldPassword: false, |
|||
newPassword: false, |
|||
confirmPassword: false |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.userName = this.$store.state.userInfo.userInfo.userName, |
|||
this.gtePubKey() |
|||
}, |
|||
methods: { |
|||
validateOldPassword() { |
|||
if (!this.dataForm.oldPassword) { |
|||
this.errorMessages.oldPasswordError = '原始密码不能为空'; |
|||
} else { |
|||
this.errorMessages.oldPasswordError = ''; |
|||
} |
|||
}, |
|||
validateNewPassword() { |
|||
if (!this.dataForm.newPassword) { |
|||
this.errorMessages.newPasswordError = '新密码不能为空'; |
|||
} else if (!this.regex.passwordRegex.test(this.dataForm.newPassword)) { |
|||
this.errorMessages.newPasswordError = '新密码要求至少包含一个大写字母、一个小写字母和一个数字,且长度不少于8位'; |
|||
} else { |
|||
this.errorMessages.newPasswordError = ''; |
|||
} |
|||
if (this.dataForm.confirmPassword) { |
|||
this.validateConfirmPassword(); |
|||
} |
|||
}, |
|||
validateConfirmPassword() { |
|||
if (!this.dataForm.confirmPassword) { |
|||
this.errorMessages.confirmPasswordError = '确认密码不能为空'; |
|||
} else if (this.dataForm.newPassword !== this.dataForm.confirmPassword) { |
|||
this.errorMessages.confirmPasswordError = '确认密码与新密码不一致'; |
|||
} else { |
|||
this.errorMessages.confirmPasswordError = ''; |
|||
} |
|||
}, |
|||
gtePubKey() { |
|||
this.$http |
|||
.post("/auth/govweb/getKey") |
|||
.then((res) => { |
|||
this.pubKey = res.data; // 获取到公钥; |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
changePassword() { |
|||
this.validateOldPassword(); |
|||
this.validateNewPassword(); |
|||
this.validateConfirmPassword(); |
|||
|
|||
if (this.errorMessages.oldPasswordError || this.errorMessages.newPasswordError || this.errorMessages.confirmPasswordError) { |
|||
return; |
|||
} |
|||
try { |
|||
let parms = { |
|||
oldPassword: encryptedData(this.pubKey, this.dataForm.oldPassword), |
|||
newPassword: encryptedData(this.pubKey, this.dataForm.newPassword), |
|||
confirmPassword: encryptedData(this.pubKey, this.dataForm.confirmPassword), |
|||
} |
|||
let { code, data, msg } = changePassword(parms); |
|||
console.log(code, data, msg); |
|||
if (code === 0) { |
|||
localStorage.setItem("token", data.token); |
|||
this.$router.replace({ name: 'mine' }); |
|||
} else { |
|||
throw new Error(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error.message); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
Loading…
Reference in new issue