rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Review changes batch 5 of 6

Browse Source
This commit is contained in:
rain
2026-07-20 06:52:26 +08:00
parent 0d0645a112
commit db97d3da27
41 changed files with 6672 additions and 1124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a04-register.vue
+198 -82
View File
@@ -2,66 +2,151 @@
<template>
<view class="auth-page register-page">
<view class="page-canvas">
<image class="page-backdrop" src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png" mode="scaleToFill" />
<image class="brand-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
<image
class="page-backdrop"
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
mode="scaleToFill"
/>
<image
class="brand-seal"
src="/static/assets/foundation/transparent/brand-seal.png"
mode="aspectFit"
/>
<view class="register-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" />
<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="register-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
<image
class="register-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="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')" />
<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>
<text v-if="fieldErrors.phone" class="field-error">{{
fieldErrors.phone
}}</text>
</view>
<view class="field-block" :class="{ 'field-block--error': fieldErrors.password }">
<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')" />
<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>
<text v-if="fieldErrors.password" class="field-error">{{
fieldErrors.password
}}</text>
</view>
<view class="field-block" :class="{ 'field-block--error': fieldErrors.confirmPassword }">
<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')" />
<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>
<text v-if="fieldErrors.confirmPassword" class="field-error">{{
fieldErrors.confirmPassword
}}</text>
</view>
</view>
<view class="register-submit" hover-class="button-hover" @click="submitRegister">
<image class="register-submit__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
<view
class="register-submit"
hover-class="button-hover"
@click="submitRegister"
>
<image
class="register-submit__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="register-submit__content">注册账号</text>
</view>
<view class="agreement-area" :class="{ 'agreement-area--error': agreementError }">
<view
class="agreement-area"
:class="{ 'agreement-area--error': agreementError }"
>
<view class="agreement-row" @click="toggleAgreement">
<image class="agreement-icon" :src="agreed ? '/static/assets/modules/auth/transparent/a02-agreement-checked.png' : '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'" mode="aspectFit" />
<image
class="agreement-icon"
:src="
agreed
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
"
mode="aspectFit"
/>
<view class="agreement-copy">
<text>我已阅读并同意</text>
<text class="agreement-link" @click.stop="prepareAgreement">《用户协议》</text>
<text class="agreement-link" @click.stop="prepareAgreement"
>《用户协议》</text
>
<text>与</text>
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
<text class="agreement-link" @click.stop="prepareAgreement"
>《隐私政策》</text
>
</view>
</view>
<text v-if="agreementError" class="agreement-error">请先阅读并同意用户协议与隐私政策</text>
<text v-if="agreementError" class="agreement-error"
>请先阅读并同意用户协议与隐私政策</text
>
</view>
<view class="login-entry">
<text>已有账号？</text>
<view class="login-entry__link" hover-class="tap-fade" @click="prepareLogin">登录</view>
<view
class="login-entry__link"
hover-class="tap-fade"
@click="prepareLogin"
>登录</view
>
</view>
</view>
</view>
@@ -73,72 +158,73 @@
</template>
<script setup>
import { ref } from 'vue'
import { onUnload } from '@dcloudio/uni-app'
import { ref } from "vue";
import { onUnload } from "@dcloudio/uni-app";
const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreed = ref(false)
const agreementError = ref(false)
const phone = ref("");
const password = ref("");
const confirmPassword = ref("");
const agreed = ref(false);
const agreementError = ref(false);
const fieldErrors = ref({
phone: '',
password: '',
confirmPassword: ''
})
const feedbackVisible = ref(false)
const feedbackMessage = ref('')
let feedbackTimer = null
phone: "",
password: "",
confirmPassword: "",
});
const feedbackVisible = ref(false);
const feedbackMessage = ref("");
let feedbackTimer = null;
onUnload(() => {
if (feedbackTimer) clearTimeout(feedbackTimer)
})
if (feedbackTimer) clearTimeout(feedbackTimer);
});
const goBack = () => {
uni.navigateBack()
}
uni.navigateBack();
};
// “已有账号”用于退出注册流程，替换当前页可避免登录/注册页面反复叠加。
const prepareLogin = () => uni.redirectTo({ url: '/pages/auth/a01-entry' })
const prepareLogin = () => uni.redirectTo({ url: "/pages/auth/a01-entry" });
const showFeedback = (message) => {
feedbackMessage.value = message
feedbackVisible.value = true
if (feedbackTimer) clearTimeout(feedbackTimer)
feedbackMessage.value = message;
feedbackVisible.value = true;
if (feedbackTimer) clearTimeout(feedbackTimer);
feedbackTimer = setTimeout(() => {
feedbackVisible.value = false
feedbackTimer = null
}, 2200)
}
feedbackVisible.value = false;
feedbackTimer = null;
}, 2200);
};
const prepareAgreement = () => showFeedback('协议页面准备中')
const prepareAgreement = () => showFeedback("协议页面准备中");
const toggleAgreement = () => {
agreed.value = !agreed.value
if (agreed.value) agreementError.value = false
}
agreed.value = !agreed.value;
if (agreed.value) agreementError.value = false;
};
const clearFieldError = (field) => {
fieldErrors.value[field] = ''
}
fieldErrors.value[field] = "";
};
const validateForm = () => {
const nextErrors = { phone: '', password: '', confirmPassword: '' }
if (!/^1\d{10}$/.test(phone.value)) nextErrors.phone = '请输入正确手机号'
if (!password.value) nextErrors.password = '请设置密码'
if (!confirmPassword.value) nextErrors.confirmPassword = '请再次输入密码'
else if (password.value !== confirmPassword.value) nextErrors.confirmPassword = '两次输入的密码不一致'
fieldErrors.value = nextErrors
return !Object.values(nextErrors).some(Boolean)
}
const nextErrors = { phone: "", password: "", confirmPassword: "" };
if (!/^1\d{10}$/.test(phone.value)) nextErrors.phone = "请输入正确手机号";
if (!password.value) nextErrors.password = "请设置密码";
if (!confirmPassword.value) nextErrors.confirmPassword = "请再次输入密码";
else if (password.value !== confirmPassword.value)
nextErrors.confirmPassword = "两次输入的密码不一致";
fieldErrors.value = nextErrors;
return !Object.values(nextErrors).some(Boolean);
};
const submitRegister = () => {
const formValid = validateForm()
if (!agreed.value) agreementError.value = true
if (!formValid || !agreed.value) return
const formValid = validateForm();
if (!agreed.value) agreementError.value = true;
if (!formValid || !agreed.value) return;
// 真实滑动验证由接口阶段的组件自带样式接管，本页不保留自定义假面板。
showFeedback('滑动验证待接口接入')
}
showFeedback("滑动验证待接口接入");
};
</script>
<style scoped lang="scss">
@@ -232,9 +318,13 @@ const submitRegister = () => {
filter: brightness(0.68) saturate(1.5) contrast(1.2);
}
.form-content { margin-top: 12rpx; }
.form-content {
margin-top: 12rpx;
}
.field-block { min-height: 116rpx; }
.field-block {
min-height: 116rpx;
}
.input-row {
display: flex;
@@ -257,7 +347,9 @@ const submitRegister = () => {
font-size: 29rpx;
}
.placeholder { color: #a79e94; }
.placeholder {
color: #a79e94;
}
.field-error,
.agreement-error {
@@ -267,8 +359,13 @@ const submitRegister = () => {
line-height: 32rpx;
}
.field-error { padding-top: 4rpx; text-align: right; }
.field-block--error .input-row { border-bottom-color: #b42318; }
.field-error {
padding-top: 4rpx;
text-align: right;
}
.field-block--error .input-row {
border-bottom-color: #b42318;
}
.register-submit {
position: relative;
@@ -295,7 +392,10 @@ const submitRegister = () => {
letter-spacing: 6rpx;
}
.agreement-area { min-height: 118rpx; margin-top: 18rpx; }
.agreement-area {
min-height: 118rpx;
margin-top: 18rpx;
}
.agreement-row {
display: flex;
@@ -320,15 +420,28 @@ const submitRegister = () => {
white-space: nowrap;
}
.agreement-link { color: #a7160c; }
.agreement-error { text-align: center; }
.agreement-link {
color: #a7160c;
}
.agreement-error {
text-align: center;
}
.agreement-area--error { animation: agreement-shake 240ms ease-out; }
.agreement-area--error {
animation: agreement-shake 240ms ease-out;
}
@keyframes agreement-shake {
0%, 100% { transform: translateX(0); }
33% { transform: translateX(-8rpx); }
66% { transform: translateX(8rpx); }
0%,
100% {
transform: translateX(0);
}
33% {
transform: translateX(-8rpx);
}
66% {
transform: translateX(8rpx);
}
}
.login-entry {
@@ -348,8 +461,12 @@ const submitRegister = () => {
color: #a7160c;
}
.tap-fade { opacity: 0.62; }
.button-hover { opacity: 0.84; }
.tap-fade {
opacity: 0.62;
}
.button-hover {
opacity: 0.84;
}
.feedback-toast {
position: fixed;
@@ -364,7 +481,7 @@ const submitRegister = () => {
min-height: 82rpx;
border: 16rpx solid transparent;
border-width: 16rpx 74rpx;
border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png');
border-image-source: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png");
border-image-slice: 58 280 fill;
border-image-width: 16rpx 74rpx;
border-image-repeat: stretch;
@@ -380,5 +497,4 @@ const submitRegister = () => {
font-size: 25rpx;
text-align: center;
}
</style>