<!-- 修改密码 -->
|
<template>
|
<view class="container">
|
<view class="detailBox">
|
<div class="detailCon">
|
<div class="orderRow">
|
<!-- type="password" :password-icon="passwordIcon" -->
|
<div class="rowTitle">原始密码</div>
|
<input type="password" v-model="passwordForm.oldPassword" placeholder="请输入" class="input-item" />
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">新密码</div>
|
<input type="password" v-model="passwordForm.newPassword" placeholder="请输入" class="input-item" />
|
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">确认密码</div>
|
<input type="password" v-model="passwordForm.newPassword1" placeholder="请输入" class="input-item" />
|
</div>
|
</div>
|
</view>
|
<view class="btngroup">
|
<u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button>
|
<u-button
|
:color="submitLoading ? '#AEAEAE' : '#1D6FE9'"
|
class="custom-style"
|
shape="circle"
|
text="提交"
|
:loading="submitLoading"
|
loading-text="提交中"
|
loading-mode="circle"
|
:loading-size="13"
|
@click="submit"
|
/>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
useUserStore
|
} from "@/store/index.js";
|
import md5 from "js-md5";
|
import {
|
getUserInfo,
|
updateInfo,
|
updatePassword
|
} from '@/api/user/index.js';
|
const passwordIcon = {
|
show: 'fas fa-eye', // 显示密码时的图标
|
hide: 'fas fa-eye-slash' // 隐藏密码时的图标
|
}
|
const userStore = useUserStore();
|
const passwordForm = ref({
|
oldPassword: '',
|
newPassword: '',
|
newPassword1: '',
|
});
|
const submitLoading = ref(false);
|
// 校验密码不能包含中文
|
const validatePasswordNoChinese = (password) => {
|
const chineseRegex = /[\u4e00-\u9fa5]/;
|
if (chineseRegex.test(password)) {
|
|
uni.showToast({
|
title: '密码不能包含中文字符',
|
icon: 'none',
|
duration: 2000
|
});
|
return false;
|
}
|
return true;
|
};
|
// 校验密码复杂度（长度≥6位，包含字母和数字）
|
const validatePasswordStrength = (password) => {
|
if (password.length < 6) {
|
|
uni.showToast({
|
title: '密码长度不能少于6位',
|
icon: 'none',
|
duration: 2000
|
});
|
return false;
|
}
|
return true;
|
};
|
const clearForm = () => {
|
passwordForm.value = {
|
oldPassword: '',
|
newPassword: '',
|
newPassword1: '',
|
};
|
};
|
const reset = () => {
|
clearForm();
|
};
|
const submit = () => {
|
if (submitLoading.value) return;
|
// 原始密码校验
|
if (!passwordForm.value.oldPassword) {
|
|
uni.showToast({
|
title: '请输入原始密码',
|
icon: 'none',
|
duration: 2000
|
});
|
return;
|
}
|
// 中文校验
|
if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return;
|
// 新密码校验
|
if (!passwordForm.value.newPassword) {
|
|
uni.showToast({
|
title: '请输入新密码',
|
icon: 'none',
|
duration: 2000
|
});
|
return;
|
}
|
// 确认密码校验
|
if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) {
|
|
uni.showToast({
|
title: '两次输入的新密码不一致',
|
icon: 'none',
|
duration: 2000
|
});
|
return;
|
}
|
|
// 复杂度校验
|
if (!validatePasswordStrength(passwordForm.value.newPassword)) return;
|
submitLoading.value = true;
|
updatePassword(md5(passwordForm.value.oldPassword),
|
md5(passwordForm.value.newPassword),
|
md5(passwordForm.value.newPassword1)).then(res => {
|
if (res.data.code === 200) {
|
uni.showToast({
|
title: '修改信息成功',
|
icon: 'none',
|
duration: 1500
|
});
|
clearForm();
|
userStore.setUserInfo(null)
|
uni.removeStorageSync('rememberedUser');
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/login/index'
|
})
|
}, 1500);
|
return
|
|
} else {
|
uni.showToast({
|
title: res.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
submitLoading.value = false;
|
|
}).catch(() => {
|
submitLoading.value = false;
|
});
|
|
};
|
onShow(async () => {
|
clearForm();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.detailBox {
|
margin-top: 40rpx;
|
width: 702rpx;
|
|
min-height: 326rpx;
|
background: #FFFFFF;
|
border-radius: 12rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.detailCon {
|
padding: 0 24rpx;
|
}
|
|
.orderRow {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 96rpx;
|
border-bottom: 2rpx solid #f5f5f5;
|
color: #7b7b7b;
|
|
|
.rowTitle {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222324;
|
white-space: nowrap;
|
}
|
|
input.input-item {
|
text-align: right;
|
border: none !important;
|
background: transparent !important;
|
box-shadow: none !important;
|
padding: 0 !important;
|
margin: 0 !important;
|
height: auto !important;
|
|
outline: none;
|
font-size: 30rpx;
|
color: #222324;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
}
|
:deep(.uni-input-placeholder) {
|
color: #D5D5D5;
|
}
|
input.input-item::placeholder {
|
font-size: 30rpx;
|
}
|
}
|
}
|
|
.btngroup {
|
display: flex;
|
position: absolute;
|
bottom: 150rpx;
|
}
|
|
:deep(.u-button:first-child) {
|
margin-right: 30rpx !important;
|
}
|
|
.custom-style {
|
width: 276rpx;
|
height: 76rpx;
|
}
|
:deep(.u-button){
|
width: 276rpx !important;
|
height: 76rpx !important;
|
}
|
</style>
|
