60 lines
5.0 KiB
Vue
60 lines
5.0 KiB
Vue
<!-- 页面编号：M-04；用途：修改登录密码。 -->
|
||
<template>
|
||
<view class="password-page" :class="{ 'password-state--ready': passwordState === 'ready', 'password-state--saving': passwordState === 'saving' }">
|
||
<ModulePageBackground module="profile" />
|
||
<view class="page-layer"><PageHeader title="修改密码" /></view>
|
||
<view class="page-content page-layer">
|
||
<view class="security-tip"><text>设置安全密码</text><text>建议使用 8–32 位字母与数字组合，不要与其他应用共用。</text></view>
|
||
<view class="form-panel">
|
||
<view v-for="field in passwordFields" :key="field.key" class="field-block">
|
||
<view class="form-row">
|
||
<text>{{ field.label }}</text>
|
||
<input v-model="passwordForm[field.key]" :password="!passwordVisible[field.key]" maxlength="32" :aria-label="field.label" :placeholder="field.placeholder" @input="errors[field.key] = ''" />
|
||
<view class="password-toggle" role="button" :aria-label="`${passwordVisible[field.key] ? '隐藏' : '显示'}${field.label}`" @click="togglePassword(field.key)">{{ passwordVisible[field.key] ? "隐藏" : "显示" }}</view>
|
||
</view>
|
||
<text v-if="errors[field.key]" class="field-error">{{ errors[field.key] }}</text>
|
||
</view>
|
||
</view>
|
||
<AppButton block :disabled="passwordState === 'saving'" :label="passwordState === 'saving' ? '正在修改' : '确认修改'" @click="savePassword" />
|
||
</view>
|
||
<AppToast :visible="toastVisible" :message="toastMessage" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onUnmounted, reactive, ref } from "vue";
|
||
import AppButton from "@/components/AppButton.vue";
|
||
import AppToast from "@/components/AppToast.vue";
|
||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
|
||
const passwordForm = reactive({ current: "", next: "", confirm: "" });
|
||
const passwordVisible = reactive({ current: false, next: false, confirm: false });
|
||
const errors = reactive({ current: "", next: "", confirm: "" });
|
||
const passwordState = ref("ready");
|
||
const passwordFields = [
|
||
{ key: "current", label: "当前密码", placeholder: "请输入当前密码" },
|
||
{ key: "next", label: "新密码", placeholder: "8–32 位字母与数字" },
|
||
{ key: "confirm", label: "确认新密码", placeholder: "请再次输入新密码" },
|
||
];
|
||
const toastVisible = ref(false); const toastMessage = ref(""); let timer = null;
|
||
const showToast = (message) => { toastMessage.value = message; toastVisible.value = true; clearTimeout(timer); timer = setTimeout(() => (toastVisible.value = false), 1800); };
|
||
const togglePassword = (key) => { passwordVisible[key] = !passwordVisible[key]; };
|
||
const validatePassword = () => {
|
||
errors.current = passwordForm.current ? "" : "请输入当前密码";
|
||
errors.next = /^(?=.*[A-Za-z])(?=.*\d).{8,32}$/.test(passwordForm.next) ? "" : "新密码需为 8–32 位，并同时包含字母和数字";
|
||
errors.confirm = !passwordForm.confirm ? "请再次输入新密码" : passwordForm.confirm !== passwordForm.next ? "两次输入的新密码不一致" : "";
|
||
return !Object.values(errors).some(Boolean);
|
||
};
|
||
const savePassword = () => {
|
||
if (!validatePassword() || passwordState.value === "saving") return;
|
||
passwordState.value = "saving";
|
||
timer = setTimeout(() => { passwordState.value = "ready"; passwordForm.current = ""; passwordForm.next = ""; passwordForm.confirm = ""; showToast("密码已修改，请妥善保管新密码"); }, 500);
|
||
};
|
||
onUnmounted(() => clearTimeout(timer));
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.password-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.security-tip,.form-panel{background:url("/static/assets/modules/profile/transparent/module-content-frame.png") center/100% 100% no-repeat}.security-tip{min-height:170rpx;padding:38rpx 44rpx;box-sizing:border-box;text-align:center}.security-tip text{display:block}.security-tip text:first-child{color:$ink;font-size:32rpx;font-weight:700}.security-tip text:last-child{margin-top:10rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.form-panel{margin-top:20rpx;padding:22rpx 34rpx 30rpx;box-sizing:border-box}.field-block+.field-block{margin-top:6rpx}.form-row{display:grid;grid-template-columns:142rpx minmax(0,1fr) 74rpx;min-height:92rpx;align-items:center;gap:12rpx;border-bottom:1px solid rgba(181,137,63,.42)}.form-row>text{color:$ink;font-size:23rpx;font-weight:700}.form-row input{width:auto;min-width:0;min-height:68rpx;color:$ink;font-size:23rpx}.password-toggle{display:flex;min-height:68rpx;align-items:center;justify-content:flex-end;color:$brand-red;font-size:21rpx}.field-error{display:block;padding-top:7rpx;color:#b42318;font-size:20rpx;line-height:1.4;text-align:right}.page-content>.app-button{margin-top:28rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}.form-panel{padding-right:26rpx;padding-left:26rpx}.form-row{grid-template-columns:120rpx minmax(0,1fr) 64rpx;gap:8rpx}}
|
||
</style>
|