This commit is contained in:
rain
2026-07-24 18:03:02 +08:00
parent c7f278fe79
commit ec8486b035
86 changed files with 7943 additions and 1841 deletions
+34 -100
View File
@@ -1,4 +1,4 @@
<!-- 页面编号A-01用途APP 唯一登录入口承载密码验证码与微信登录入口 -->
<!-- 页面编号A-01用途APP 唯一登录入口承载密码与验证码登录 -->
<template>
<AuthPageShell class="auth-page login-page">
<view class="login-content">
@@ -35,7 +35,7 @@
</view>
<view class="form-content">
<view class="input-row">
<view class="input-row input-row--required">
<image
class="input-icon"
src="/static/assets/modules/auth/transparent/a01-icon-phone-v1.png"
@@ -55,7 +55,7 @@
/>
</view>
<view v-if="activeLoginMethod === 'password'" class="input-row">
<view v-if="activeLoginMethod === 'password'" class="input-row input-row--required">
<image
class="input-icon"
src="/static/assets/modules/auth/transparent/a01-icon-lock-v1.png"
@@ -94,7 +94,7 @@
</button>
</view>
<view v-else class="input-row">
<view v-else class="input-row input-row--required">
<image
class="input-icon input-icon--sms"
src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png"
@@ -155,43 +155,6 @@
}}</text>
</button>
<view class="other-login-divider">
<view class="divider-line" />
<image
class="divider-knot"
src="/static/assets/foundation/transparent/auth-divider-knot.png"
mode="aspectFit"
/>
<text>其他登录方式</text>
<image
class="divider-knot divider-knot--right"
src="/static/assets/foundation/transparent/auth-divider-knot.png"
mode="aspectFit"
/>
<view class="divider-line" />
</view>
<button
class="auth-plain-button wechat-login"
:disabled="submitting || sendingCode || tacVisible"
hover-class="button-pressed"
@click="prepareWechatLogin"
>
<image
class="button-skin"
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
mode="aspectFit"
/>
<view class="wechat-login__content">
<image
class="wechat-icon"
src="/static/assets/foundation/transparent/auth-wechat.png"
mode="aspectFit"
/>
<text>微信登录</text>
</view>
</button>
<view class="register-entry">
<text>还没有账号</text>
<button
@@ -281,6 +244,7 @@ import {
import { createAuthSmsCooldown } from "@/utils/auth-sms-cooldown.js";
import { runtimeConfig } from "@/utils/config.js";
import { calcMD5 } from "@/utils/md5.js";
import { session } from "@/utils/session.js";
import {
goRoot,
handleBackPress,
@@ -324,8 +288,6 @@ onUnload(() => {
if (feedbackTimer) clearTimeout(feedbackTimer);
smsCooldown.dispose();
});
onShow(() => smsCooldown.sync());
const showFeedback = (message) => {
feedbackMessage.value = message;
feedbackVisible.value = true;
@@ -351,6 +313,23 @@ const enterAuthenticatedRoot = async () => {
}
};
const restoreAuthenticatedSession = () => {
smsCooldown.sync();
if (
authenticationCommitted.value ||
submitting.value ||
sendingCode.value ||
tacVisible.value ||
!session.getToken()
) {
return;
}
authenticationCommitted.value = true;
void enterAuthenticatedRoot();
};
onShow(restoreAuthenticatedSession);
const blockBusyAction = () => {
if (!sendingCode.value && !submitting.value) return false;
showFeedback("请求处理中,请稍候");
@@ -643,11 +622,6 @@ const prepareRegister = () => {
return openPage("A04", {}, "A01");
};
const prepareWechatLogin = () => {
if (!requireAgreement()) return;
showFeedback("微信登录功能准备中");
};
const prepareAgreement = () => showFeedback("协议页面准备中");
</script>
@@ -729,6 +703,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
}
.input-row {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
@@ -737,6 +712,16 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
border-bottom: 1rpx solid rgba(182, 116, 43, 0.68);
}
.input-row--required::before {
position: absolute;
top: 8rpx;
left: 0;
content: "*";
color: #b42318;
font-size: 26rpx;
line-height: 1;
}
.input-icon {
flex: 0 0 auto;
width: 64rpx;
@@ -808,8 +793,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
font-size: 28rpx;
}
.login-submit,
.wechat-login {
.login-submit {
display: grid;
place-items: center;
}
@@ -834,56 +818,6 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
letter-spacing: 5rpx;
}
.other-login-divider {
display: flex;
align-items: center;
min-height: 30px;
color: #9f6a27;
font-size: 28rpx;
white-space: nowrap;
}
.divider-line {
flex: 1;
height: 1rpx;
margin: 0 8rpx;
background: rgba(180, 113, 38, 0.64);
}
.divider-knot {
width: 17rpx;
height: 17rpx;
margin-right: 7rpx;
}
.divider-knot--right {
margin: 0 0 0 7rpx;
transform: scaleX(-1);
}
.wechat-login {
min-height: var(--app-touch-min);
height: var(--app-touch-min);
color: #493323;
font-size: 30rpx;
letter-spacing: 2rpx;
}
.wechat-login__content {
z-index: 1;
display: flex;
grid-area: 1 / 1;
align-items: center;
justify-content: center;
}
.wechat-icon {
width: 48rpx;
height: 48rpx;
margin-right: 14rpx;
transform: translateX(-8rpx) scale(1.22);
}
.register-entry {
display: flex;
align-items: center;
+30 -4
View File
@@ -31,7 +31,7 @@
:class="{ 'field-block--error': fieldErrors.phone }"
>
<view class="input-row">
<label class="input-label" for="a04-phone">手机号</label>
<label class="input-label" for="a04-phone"><text class="required-mark">*</text>手机号</label>
<input
id="a04-phone"
v-model.trim="phone"
@@ -51,12 +51,26 @@
}}</text>
</view>
<view class="field-block">
<view class="input-row">
<label class="input-label" for="a04-nickname">昵称</label>
<input
id="a04-nickname"
v-model.trim="nickName"
class="auth-input"
:disabled="submitting || registrationCommitted"
placeholder="请输入昵称"
placeholder-class="placeholder"
/>
</view>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.verificationCode }"
>
<view class="input-row code-row">
<label class="input-label" for="a04-verification-code">验证码</label>
<label class="input-label" for="a04-verification-code"><text class="required-mark">*</text>验证码</label>
<input
id="a04-verification-code"
v-model.trim="verificationCode"
@@ -89,7 +103,7 @@
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a04-password">设置密码</label>
<label class="input-label" for="a04-password"><text class="required-mark">*</text>设置密码</label>
<input
id="a04-password"
v-model="password"
@@ -114,7 +128,7 @@
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a04-confirm-password">确认密码</label>
<label class="input-label" for="a04-confirm-password"><text class="required-mark">*</text>确认密码</label>
<input
id="a04-confirm-password"
v-model="confirmPassword"
@@ -267,6 +281,7 @@ import {
} from "@/utils/validation.js";
const phone = ref("");
const nickName = ref("");
const verificationCode = ref("");
const password = ref("");
const confirmPassword = ref("");
@@ -292,6 +307,7 @@ const isDirty = computed(() =>
!registrationCommitted.value &&
Boolean(
phone.value ||
nickName.value ||
verificationCode.value ||
password.value ||
confirmPassword.value ||
@@ -517,6 +533,7 @@ const submitRegister = async () => {
await appApi.registerWithPassword(
{
phone: phone.value,
nickName: nickName.value,
passwordHash: calcMD5(password.value),
smsCode: verificationCode.value,
},
@@ -626,6 +643,15 @@ const submitRegister = async () => {
font-size: 30rpx;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: #b42318;
font-size: 26rpx;
line-height: 1;
transform: translateY(-3rpx);
}
.auth-input {
flex: 1;
min-width: 0;
+12 -4
View File
@@ -31,7 +31,7 @@
:class="{ 'field-block--error': fieldErrors.phone }"
>
<view class="input-row">
<label class="input-label" for="a05-phone">手机号</label>
<label class="input-label" for="a05-phone"><text class="required-mark">*</text>手机号</label>
<input
id="a05-phone"
v-model.trim="phone"
@@ -56,7 +56,7 @@
:class="{ 'field-block--error': fieldErrors.verificationCode }"
>
<view class="input-row code-row">
<label class="input-label" for="a05-verification-code">验证码</label>
<label class="input-label" for="a05-verification-code"><text class="required-mark">*</text>验证码</label>
<input
id="a05-verification-code"
v-model.trim="verificationCode"
@@ -89,7 +89,7 @@
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a05-password">新密码</label>
<label class="input-label" for="a05-password"><text class="required-mark">*</text>新密码</label>
<input
id="a05-password"
v-model="password"
@@ -114,7 +114,7 @@
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a05-confirm-password">确认新密码</label>
<label class="input-label" for="a05-confirm-password"><text class="required-mark">*</text>确认新密码</label>
<input
id="a05-confirm-password"
v-model="confirmPassword"
@@ -559,6 +559,14 @@ const submitReset = async () => {
color: #674b35;
font-size: 30rpx;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: #b42318;
font-size: 26rpx;
line-height: 1;
transform: translateY(-3rpx);
}
.auth-input {
flex: 1;
min-width: 0;