60%
This commit is contained in:
+34
-100
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user