511 lines
13 KiB
Vue
511 lines
13 KiB
Vue
<!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
|
||
<template>
|
||
<AuthPageShell class="auth-page reset-page">
|
||
<view class="reset-content">
|
||
<view class="page-heading">
|
||
<view class="back-button" hover-class="tap-fade" @click="goBack">
|
||
<image
|
||
class="back-button__icon"
|
||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<text class="page-title">重设密码</text>
|
||
<text class="page-subtitle">验证手机号后设置新的登录密码</text>
|
||
<image
|
||
class="reset-divider"
|
||
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-content">
|
||
<view
|
||
class="field-block"
|
||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||
>
|
||
<view class="input-row">
|
||
<text class="input-label">手机号</text>
|
||
<input
|
||
v-model.trim="phone"
|
||
class="auth-input"
|
||
type="number"
|
||
maxlength="11"
|
||
placeholder="请输入手机号"
|
||
placeholder-class="placeholder"
|
||
@input="clearFieldError('phone')"
|
||
/>
|
||
</view>
|
||
<text v-if="fieldErrors.phone" class="field-error">{{
|
||
fieldErrors.phone
|
||
}}</text>
|
||
</view>
|
||
|
||
<view
|
||
class="field-block"
|
||
:class="{ 'field-block--error': fieldErrors.verificationCode }"
|
||
>
|
||
<view class="input-row code-row">
|
||
<text class="input-label">验证码</text>
|
||
<input
|
||
v-model.trim="verificationCode"
|
||
class="auth-input"
|
||
type="number"
|
||
maxlength="6"
|
||
placeholder="请输入验证码"
|
||
placeholder-class="placeholder"
|
||
@input="clearFieldError('verificationCode')"
|
||
/>
|
||
<view
|
||
class="get-code"
|
||
hover-class="tap-fade"
|
||
@click="prepareGetCode"
|
||
>获取验证码</view
|
||
>
|
||
</view>
|
||
<text v-if="fieldErrors.verificationCode" class="field-error">{{
|
||
fieldErrors.verificationCode
|
||
}}</text>
|
||
</view>
|
||
|
||
<view
|
||
class="field-block"
|
||
:class="{ 'field-block--error': fieldErrors.password }"
|
||
>
|
||
<view class="input-row">
|
||
<text class="input-label">新密码</text>
|
||
<input
|
||
v-model="password"
|
||
class="auth-input"
|
||
password
|
||
maxlength="32"
|
||
placeholder="请设置新密码"
|
||
placeholder-class="placeholder"
|
||
@input="clearFieldError('password')"
|
||
/>
|
||
</view>
|
||
<text v-if="fieldErrors.password" class="field-error">{{
|
||
fieldErrors.password
|
||
}}</text>
|
||
</view>
|
||
|
||
<view
|
||
class="field-block"
|
||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||
>
|
||
<view class="input-row">
|
||
<text class="input-label">确认新密码</text>
|
||
<input
|
||
v-model="confirmPassword"
|
||
class="auth-input"
|
||
password
|
||
maxlength="32"
|
||
placeholder="请再次输入新密码"
|
||
placeholder-class="placeholder"
|
||
@input="clearFieldError('confirmPassword')"
|
||
/>
|
||
</view>
|
||
<text v-if="fieldErrors.confirmPassword" class="field-error">{{
|
||
fieldErrors.confirmPassword
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="reset-submit"
|
||
hover-class="button-hover"
|
||
@click="submitReset"
|
||
>
|
||
<image
|
||
class="reset-submit__skin"
|
||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="reset-submit__content">确认重设</text>
|
||
</view>
|
||
|
||
<text class="reset-tip">重设成功后，请使用新密码登录</text>
|
||
<view class="login-entry">
|
||
<text>想起密码了？</text>
|
||
<view
|
||
class="login-entry__link"
|
||
hover-class="tap-fade"
|
||
@click="prepareLogin"
|
||
>返回登录</view
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<template #overlay>
|
||
<view v-if="successVisible" class="success-layer">
|
||
<view class="success-dialog">
|
||
<image
|
||
class="success-dialog__skin"
|
||
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<view class="success-dialog__content">
|
||
<image
|
||
class="success-mark"
|
||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="success-title">密码已重设</text>
|
||
<text class="success-copy">请返回登录页，使用新密码登录</text>
|
||
<view
|
||
class="success-action"
|
||
hover-class="button-hover"
|
||
@click="prepareLogin"
|
||
>
|
||
<image
|
||
class="success-action__skin"
|
||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="success-action__copy">返回登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="feedbackVisible" class="feedback-toast">
|
||
<text class="feedback-toast__copy">{{ feedbackMessage }}</text>
|
||
</view>
|
||
</template>
|
||
</AuthPageShell>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import { onUnload } from "@dcloudio/uni-app";
|
||
import AuthPageShell from "@/components/AuthPageShell.vue";
|
||
import {
|
||
PASSWORD_POLICY_MESSAGE,
|
||
validatePassword,
|
||
} from "@/utils/validation.js";
|
||
|
||
const phone = ref("");
|
||
const verificationCode = ref("");
|
||
const password = ref("");
|
||
const confirmPassword = ref("");
|
||
const successVisible = ref(false);
|
||
const feedbackVisible = ref(false);
|
||
const feedbackMessage = ref("");
|
||
const fieldErrors = ref({
|
||
phone: "",
|
||
verificationCode: "",
|
||
password: "",
|
||
confirmPassword: "",
|
||
});
|
||
let feedbackTimer = null;
|
||
|
||
onUnload(() => {
|
||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||
});
|
||
|
||
const goBack = () => uni.navigateBack();
|
||
|
||
// 返回登录时替换当前认证页，避免登录与重设页反复叠加。
|
||
const prepareLogin = () => uni.redirectTo({ url: "/pages/auth/a01-entry" });
|
||
|
||
const showFeedback = (message) => {
|
||
feedbackMessage.value = message;
|
||
feedbackVisible.value = true;
|
||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||
feedbackTimer = setTimeout(() => {
|
||
feedbackVisible.value = false;
|
||
feedbackTimer = null;
|
||
}, 2200);
|
||
};
|
||
|
||
const clearFieldError = (field) => {
|
||
fieldErrors.value[field] = "";
|
||
};
|
||
|
||
const prepareGetCode = () => {
|
||
if (!/^1\d{10}$/.test(phone.value)) {
|
||
fieldErrors.value.phone = "请输入正确手机号";
|
||
return;
|
||
}
|
||
fieldErrors.value.phone = "";
|
||
showFeedback("滑动验证待接口接入");
|
||
};
|
||
|
||
const validateForm = () => {
|
||
const nextErrors = {
|
||
phone: "",
|
||
verificationCode: "",
|
||
password: "",
|
||
confirmPassword: "",
|
||
};
|
||
if (!/^1\d{10}$/.test(phone.value)) nextErrors.phone = "请输入正确手机号";
|
||
if (!/^\d{6}$/.test(verificationCode.value))
|
||
nextErrors.verificationCode = "请输入 6 位验证码";
|
||
const passwordResult = validatePassword(password.value);
|
||
if (!passwordResult.valid) nextErrors.password = PASSWORD_POLICY_MESSAGE;
|
||
if (!confirmPassword.value) nextErrors.confirmPassword = "请再次输入新密码";
|
||
else if (password.value !== confirmPassword.value)
|
||
nextErrors.confirmPassword = "两次密码输入不一致";
|
||
fieldErrors.value = nextErrors;
|
||
return !Object.values(nextErrors).some(Boolean);
|
||
};
|
||
|
||
const submitReset = () => {
|
||
if (!validateForm()) return;
|
||
successVisible.value = true;
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
|
||
.reset-content {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
max-width: 480px;
|
||
min-width: 0;
|
||
margin: 0 auto;
|
||
padding: clamp(10px, 2.2vh, 20px) clamp(24px, 8.5vw, 44px);
|
||
}
|
||
|
||
.page-heading {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
grid-template-rows: auto auto auto;
|
||
justify-items: center;
|
||
min-height: 154rpx;
|
||
}
|
||
|
||
.back-button {
|
||
display: flex;
|
||
grid-row: 1 / -1;
|
||
grid-column: 1;
|
||
align-self: start;
|
||
justify-self: start;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: var(--app-touch-min);
|
||
height: var(--app-touch-min);
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.back-button__icon {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
transform: scaleX(-1);
|
||
}
|
||
.page-title {
|
||
grid-column: 1;
|
||
grid-row: 1;
|
||
color: #9f170f;
|
||
font-size: 58rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 7rpx;
|
||
}
|
||
.page-subtitle {
|
||
grid-column: 1;
|
||
grid-row: 2;
|
||
margin-top: 12rpx;
|
||
color: #806c58;
|
||
font-size: 25rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
.reset-divider {
|
||
grid-column: 1;
|
||
grid-row: 3;
|
||
width: 300rpx;
|
||
height: 50rpx;
|
||
margin-top: 2rpx;
|
||
filter: brightness(0.68) saturate(1.5) contrast(1.2);
|
||
}
|
||
.form-content {
|
||
margin-top: 8rpx;
|
||
}
|
||
.field-block {
|
||
min-height: 114rpx;
|
||
}
|
||
|
||
.input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: var(--app-touch-min);
|
||
border-bottom: 1rpx solid #cfaa70;
|
||
}
|
||
|
||
.input-label {
|
||
flex: 0 0 162rpx;
|
||
color: #674b35;
|
||
font-size: 30rpx;
|
||
}
|
||
.auth-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: var(--app-touch-min);
|
||
color: #493323;
|
||
font-size: 30rpx;
|
||
}
|
||
.placeholder {
|
||
color: #9f968d;
|
||
}
|
||
.get-code {
|
||
flex: 0 0 auto;
|
||
padding-left: 14rpx;
|
||
border-left: 1rpx solid #d7bd94;
|
||
color: #a7160c;
|
||
font-size: 26rpx;
|
||
}
|
||
.field-error {
|
||
display: block;
|
||
padding-top: 4rpx;
|
||
color: #b42318;
|
||
font-size: 21rpx;
|
||
line-height: 28rpx;
|
||
text-align: right;
|
||
}
|
||
.field-block--error .input-row {
|
||
border-bottom-color: #b42318;
|
||
}
|
||
|
||
.reset-submit {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: var(--app-touch-min);
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.reset-submit__skin,
|
||
.success-action__skin {
|
||
grid-area: 1 / 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.reset-submit__content {
|
||
z-index: 1;
|
||
grid-area: 1 / 1;
|
||
color: #fffaf0;
|
||
font-size: 36rpx;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
.reset-tip {
|
||
display: block;
|
||
margin-top: 22rpx;
|
||
color: #806c58;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
.login-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: var(--app-touch-min);
|
||
margin-top: auto;
|
||
color: #493323;
|
||
font-size: 28rpx;
|
||
}
|
||
.login-entry__link {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: var(--app-touch-min);
|
||
margin-left: 8rpx;
|
||
color: #a7160c;
|
||
}
|
||
|
||
.success-layer {
|
||
position: fixed;
|
||
z-index: 20;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: 42rpx;
|
||
background: rgba(35, 18, 10, 0.62);
|
||
}
|
||
|
||
.success-dialog {
|
||
display: grid;
|
||
width: 620rpx;
|
||
min-height: 520rpx;
|
||
max-height: calc(var(--app-viewport-height) - 40px);
|
||
}
|
||
.success-dialog__skin {
|
||
grid-area: 1 / 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.success-dialog__content {
|
||
z-index: 1;
|
||
display: flex;
|
||
grid-area: 1 / 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
min-height: 100%;
|
||
overflow-y: auto;
|
||
padding: 64rpx 64rpx 42rpx;
|
||
text-align: center;
|
||
}
|
||
.success-title {
|
||
color: #8f160f;
|
||
font-size: 43rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
.success-copy {
|
||
margin-top: 18rpx;
|
||
color: #513a28;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.success-mark {
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.success-action {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 100%;
|
||
min-height: 82rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
.success-action__copy {
|
||
z-index: 1;
|
||
grid-area: 1 / 1;
|
||
color: #fffaf0;
|
||
font-size: 30rpx;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.feedback-toast {
|
||
position: fixed;
|
||
z-index: 30;
|
||
top: calc(var(--status-bar-height, 0px) + 24rpx);
|
||
left: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
@include adaptive.adaptive-feedback-toast;
|
||
width: 590rpx;
|
||
min-height: 82rpx;
|
||
background: transparent;
|
||
transform: translateX(-50%);
|
||
}
|
||
.feedback-toast__copy {
|
||
z-index: 1;
|
||
padding: 16rpx 36rpx;
|
||
color: #5c4330;
|
||
font-size: 25rpx;
|
||
text-align: center;
|
||
}
|
||
.tap-fade,
|
||
.button-hover {
|
||
opacity: 0.72;
|
||
}
|
||
|
||
</style>
|