<template>
|
<view class="container">
|
<form @submit.prevent="saveEditPass">
|
<!-- 原密码 -->
|
<view class="list-cell">
|
<text class="cell-tit">原密码</text>
|
<input type="password" v-model="editPasswordForm.oldpwd" placeholder="请输入原密码" class="cell-input" />
|
</view>
|
|
<!-- 新密码 -->
|
<view class="list-cell">
|
<text class="cell-tit">新密码</text>
|
<input type="password" v-model="editPasswordForm.newpwd" placeholder="请输入新密码" class="cell-input" />
|
</view>
|
|
<!-- 确认密码 -->
|
<view class="list-cell">
|
<text class="cell-tit">确认密码</text>
|
<input type="password" v-model="editPasswordForm.ConfirmPassword" placeholder="请再次输入新密码"
|
class="cell-input" />
|
</view>
|
|
<!-- 保存按钮 -->
|
<button formType="submit" class="save-button" :loading="savePassLoading">保存</button>
|
</form>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
editPasswordForm: {
|
Name:'',
|
oldpwd: '',
|
newpwd: '',
|
ConfirmPassword: ''
|
},
|
savePassLoading: false
|
};
|
},
|
methods: {
|
saveEditPass() {
|
// 验证原密码
|
if (this.editPasswordForm.oldpwd.replace(/\s/g, '').length < 6) {
|
this.$msg('原密码输入错误!');
|
return false;
|
}
|
// 验证新密码的复杂度
|
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,20}$/;
|
if (!passwordRegex.test(this.editPasswordForm.newpwd)) {
|
this.$msg('新密码必须为6-20位，包含大小写字母、数字和特殊符号');
|
return false;
|
}
|
|
// 验证确认密码是否与新密码一致
|
if (this.editPasswordForm.newpwd !== this.editPasswordForm.ConfirmPassword) {
|
this.$msg('两次密码输入不一致!');
|
return false;
|
}
|
|
this.savePassLoading = true;
|
let data = this.editPasswordForm;
|
this.$http.post('/user/ChangePassword', data).then(res => {
|
if (res.Check) {
|
this.$msg('密码修改成功');
|
// 清空输入框
|
this.editPasswordForm.oldpwd = '';
|
this.editPasswordForm.newpwd = '';
|
this.editPasswordForm.ConfirmPassword = '';
|
} else {
|
this.$msg('密码修改失败，请重试');
|
}
|
this.savePassLoading = false;
|
}).catch(error => {
|
this.savePassLoading = false;
|
this.$msg('服务器错误!');
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
page {
|
background: $page-color-base;
|
}
|
|
.container {
|
padding: 20upx;
|
}
|
|
.list-cell {
|
display: flex;
|
align-items: center;
|
padding: 20upx $page-row-spacing;
|
line-height: 60upx;
|
position: relative;
|
background: #fff;
|
justify-content: space-between;
|
|
&.m-t {
|
margin-top: 16upx;
|
}
|
|
.cell-tit {
|
flex: 1;
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
margin-right: 10upx;
|
}
|
|
.cell-input {
|
flex: 1;
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
}
|
|
.password-hint {
|
font-size: $font-base - 2upx;
|
color: #999;
|
margin-top: 10upx;
|
}
|
}
|
|
.save-button {
|
width: 100%;
|
margin-top: 20upx;
|
background-color: #fa436a;
|
color: white;
|
font-size: $font-base + 2upx;
|
border: none;
|
border-radius: 8upx;
|
padding: 10upx 0;
|
}
|
</style>
|
