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

完成40%

Browse Source
This commit is contained in:
rain
2026-07-14 17:36:39 +08:00
parent 1015e60ff7
commit 8c98936da5
151 changed files with 5132 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a02-login.vue
+91 -11
View File
@@ -62,7 +62,19 @@
<image class="login-submit__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<text class="login-submit__content">登录</text>
</view>
<text class="agreement-reminder">请先在登录引导页阅读并确认协议</text>
<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" />
<view class="agreement-copy">
<text>我已阅读并同意</text>
<text class="agreement-link" @click.stop="prepareAgreement">《用户协议》</text>
<text>与</text>
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
</view>
</view>
<view class="register-entry">
<text>还没有账号？</text>
<view class="register-link" hover-class="text-hover" @click="prepareRegister">注册账号</view>
</view>
</view>
</view>
</view>
@@ -71,32 +83,61 @@
<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { onLoad, onShow } from '@dcloudio/uni-app'
const activeTab = ref('password')
const account = ref('')
const password = ref('')
const smsPhone = ref('')
const verificationCode = ref('')
const agreedFromEntry = ref(false)
const agreed = ref(false)
onLoad((options) => {
agreedFromEntry.value = options?.agreed === '1'
const isAgreedRoute = () => {
if (typeof location !== 'undefined') {
const query = new URLSearchParams(location.hash.split('?')[1] || '')
return query.get('agreed') === '1'
}
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
return currentPage?.options?.agreed === '1'
}
const syncAgreementFromRoute = () => {
agreed.value = isAgreedRoute()
}
onLoad(() => {
syncAgreementFromRoute()
})
onShow(() => {
syncAgreementFromRoute()
})
const goBack = () => {
uni.navigateBack()
}
const prepareRegister = () => uni.navigateTo({ url: '/pages/auth/a04-register' })
const prepareForgotPassword = () => uni.navigateTo({ url: '/pages/auth/a05-reset-password' })
const prepareGetCode = () => {
uni.showToast({ title: '获取验证码功能待接入', icon: 'none' })
}
const toggleAgreement = () => {
agreed.value = !agreed.value
}
const prepareAgreement = () => {
uni.showToast({ title: '协议页面准备中', icon: 'none' })
}
const canSubmit = () => {
if (agreedFromEntry.value) return true
uni.showToast({ title: '请先返回登录引导确认协议', icon: 'none' })
if (agreed.value) return true
uni.showToast({ title: '请先阅读并同意相关协议', icon: 'none' })
return false
}
@@ -356,11 +397,50 @@ const submitLogin = () => {
.button-hover { opacity: 0.84; }
.agreement-reminder {
display: block;
margin-top: 34rpx;
color: #9a8773;
.agreement-row {
display: flex;
align-items: center;
justify-content: center;
min-height: 88rpx;
margin-top: 22rpx;
padding: 0 4rpx;
color: #6b5a4a;
font-size: 24rpx;
line-height: 32rpx;
}
.agreement-icon {
flex: 0 0 auto;
width: 32rpx;
height: 32rpx;
margin-right: 12rpx;
}
.agreement-copy {
display: flex;
align-items: center;
text-align: center;
white-space: nowrap;
}
.agreement-link {
color: #a7160c;
}
.register-entry {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rpx;
color: #6b5a4a;
font-size: 24rpx;
}
.register-link {
display: flex;
align-items: center;
min-height: 88rpx;
margin-left: 8rpx;
color: #a7160c;
}
</style>
pages/auth/a03-mobile-verify.vue
-3
View File
@@ -1,3 +0,0 @@
<!-- 页面编号：A-03；用途：手机验证码登录与授权回跳状态。 -->
<template><ModulePage page-id="a03" /></template>
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
pages/auth/a04-register.vue
+345 -3
View File
@@ -1,3 +1,345 @@
<!-- 页面编号：A-04；用途：注册账号与服务协议确认。 -->
<template><ModulePage page-id="a04" /></template>
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
<!-- 页面编号：A-04；用途：注册账号与本页服务协议确认。 -->
<template>
<view class="auth-page register-page">
<image class="paper-background" src="/static/assets/foundation/opaque/auth-page-paper.jpg" mode="aspectFill" />
<image class="scenery-background" src="/static/assets/foundation/transparent/auth-ink-scenery.png" mode="aspectFill" />
<view class="auth-content">
<view class="auth-header">
<image class="header-background" src="/static/assets/foundation/opaque/auth-header.png" mode="aspectFill" />
<image class="header-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
</view>
<view class="register-panel">
<image class="register-panel__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
<view class="register-panel__content">
<view class="page-heading">
<image class="register-title-cloud" src="/static/assets/foundation/transparent/auth-title-cloud.png" mode="aspectFit" />
<view class="back-button" hover-class="back-hover" @click="goBack">
<image class="back-button__icon" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
</view>
<view class="page-heading__copy">
<text class="page-title">注册账号</text>
<text class="page-subtitle">创建属于你的家谱账号</text>
</view>
</view>
<image class="register-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
<view class="form-content">
<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" />
</view>
<view class="input-row">
<text class="input-label">设置密码</text>
<input v-model="password" class="auth-input" password placeholder="请设置登录密码" placeholder-class="placeholder" />
</view>
<view class="input-row">
<text class="input-label">确认密码</text>
<input v-model="confirmPassword" class="auth-input" password placeholder="请再次输入密码" placeholder-class="placeholder" />
</view>
</view>
<view class="register-submit" hover-class="button-hover" @click="submitRegister">
<image class="register-submit__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<text class="register-submit__content">注册账号</text>
</view>
<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" />
<view class="agreement-copy">
<text>我已阅读并同意</text>
<text class="agreement-link" @click.stop="prepareAgreement">《用户协议》</text>
<text>与</text>
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
</view>
</view>
<view class="login-entry">
<text>已有账号？</text>
<view class="login-entry__link" hover-class="text-hover" @click="prepareLogin">登录</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreed = ref(false)
const goBack = () => {
uni.navigateBack()
}
const prepareLogin = () => uni.navigateTo({ url: '/pages/auth/a02-login' })
const prepareAgreement = () => {
uni.showToast({ title: '协议页面准备中', icon: 'none' })
}
const toggleAgreement = () => {
agreed.value = !agreed.value
}
const submitRegister = () => {
if (!agreed.value) {
uni.showToast({ title: '请先阅读并同意相关协议', icon: 'none' })
return
}
if (!/^1\d{10}$/.test(phone.value)) {
uni.showToast({ title: '请输入正确手机号', icon: 'none' })
return
}
if (!password.value) {
uni.showToast({ title: '请设置密码', icon: 'none' })
return
}
if (password.value !== confirmPassword.value) {
uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
return
}
uni.showToast({ title: '注册服务待接入', icon: 'none' })
}
</script>
<style scoped lang="scss">
.auth-page {
position: relative;
min-height: 100vh;
background: #f7f1e6;
}
.paper-background,
.scenery-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.paper-background { opacity: 0.96; }
.scenery-background { opacity: 0.76; }
.auth-content {
position: relative;
z-index: 1;
box-sizing: border-box;
min-height: 100vh;
padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
}
.auth-header {
position: relative;
height: 253rpx;
overflow: hidden;
}
.header-background {
width: 100%;
height: 100%;
}
.header-seal {
position: absolute;
top: 70rpx;
left: 50%;
width: 136rpx;
height: 136rpx;
transform: translateX(-50%);
}
.register-panel {
position: relative;
min-height: 1184rpx;
margin: 32rpx 42rpx 0;
}
.register-panel__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.register-panel__content {
position: relative;
z-index: 1;
box-sizing: border-box;
min-height: 1184rpx;
padding: 66rpx 50rpx 76rpx;
}
.page-heading {
position: relative;
display: flex;
align-items: center;
}
.register-title-cloud {
position: absolute;
top: -26rpx;
right: 2rpx;
width: 154rpx;
height: 92rpx;
opacity: 0.62;
}
.page-heading__copy {
position: relative;
z-index: 1;
}
.back-button {
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 56rpx;
margin-right: 18rpx;
}
.back-hover { opacity: 0.62; }
.back-button__icon {
width: 42rpx;
height: 42rpx;
transform: scaleX(-1);
}
.page-title,
.page-subtitle {
display: block;
}
.page-title {
color: #3f2c1d;
font-family: STKaiti, KaiTi, serif;
font-size: 50rpx;
font-weight: 700;
letter-spacing: 4rpx;
}
.page-subtitle {
margin-top: 10rpx;
color: #8c7864;
font-size: 24rpx;
letter-spacing: 2rpx;
}
.register-divider {
display: block;
width: 154rpx;
height: 42rpx;
margin: 40rpx auto 0;
}
.form-content { margin-top: 30rpx; }
.input-row {
display: flex;
align-items: center;
min-height: 112rpx;
border-bottom: 1rpx solid #e5d4b7;
}
.input-label {
width: 154rpx;
color: #674b35;
font-family: STKaiti, KaiTi, serif;
font-size: 31rpx;
}
.auth-input {
flex: 1;
min-width: 0;
height: 104rpx;
color: #3f2c1d;
font-size: 29rpx;
}
.placeholder { color: #b3a895; }
.register-submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 128rpx;
margin-top: 60rpx;
overflow: hidden;
}
.register-submit__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.register-submit__content {
position: relative;
z-index: 1;
color: #fffaf0;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
letter-spacing: 6rpx;
}
.button-hover { opacity: 0.84; }
.agreement-row {
display: flex;
align-items: center;
justify-content: center;
min-height: 88rpx;
margin-top: 22rpx;
padding: 0 4rpx;
color: #6b5a4a;
font-size: 24rpx;
line-height: 32rpx;
}
.agreement-icon {
flex: 0 0 auto;
width: 32rpx;
height: 32rpx;
margin-right: 12rpx;
}
.agreement-copy {
display: flex;
align-items: center;
text-align: center;
white-space: nowrap;
}
.agreement-link { color: #a7160c; }
.login-entry {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rpx;
color: #6b5a4a;
font-size: 24rpx;
}
.login-entry__link {
display: flex;
align-items: center;
min-height: 88rpx;
margin-left: 8rpx;
color: #a7160c;
}
.text-hover { opacity: 0.64; }
</style>
pages/auth/a05-reset-password.vue
+328 -3
View File
@@ -1,3 +1,328 @@
<!-- 页面编号：A-05；用途：忘记密码与重设密码。 -->
<template><ModulePage page-id="a05" /></template>
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
<!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
<template>
<view class="auth-page reset-page">
<!-- 认证页背景复用已验收纸纹与淡墨山水，不绘制 CSS 装饰面。 -->
<image class="paper-background" src="/static/assets/foundation/opaque/auth-page-paper.jpg" mode="aspectFill" />
<image class="scenery-background" src="/static/assets/foundation/transparent/auth-ink-scenery.png" mode="aspectFill" />
<view class="auth-content">
<!-- 朱砂祠堂头和谱印与 A02/A04 保持同一认证入口。 -->
<view class="auth-header">
<image class="header-background" src="/static/assets/foundation/opaque/auth-header.png" mode="aspectFill" />
<image class="header-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
</view>
<view class="reset-panel">
<image class="reset-panel__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
<view class="reset-panel__content">
<!-- 页标题只说明当前任务，不暴露内部页面编号。 -->
<view class="page-heading">
<image class="reset-title-cloud" src="/static/assets/foundation/transparent/auth-title-cloud.png" mode="aspectFit" />
<view class="back-button" hover-class="back-hover" @click="goBack">
<image class="back-button__icon" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
</view>
<view class="page-heading__copy">
<text class="page-title">重设密码</text>
<text class="page-subtitle">验证手机号后重新设置登录密码</text>
</view>
</view>
<image class="reset-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
<!-- 四项真实输入在当前页完成身份验证与两次密码确认。 -->
<view class="form-content">
<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" />
</view>
<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" />
<view class="get-code" hover-class="text-hover" @click="prepareGetCode">获取验证码</view>
</view>
<view class="input-row">
<text class="input-label">新密码</text>
<input v-model="password" class="auth-input" password placeholder="请设置新密码" placeholder-class="placeholder" />
</view>
<view class="input-row">
<text class="input-label">确认新密码</text>
<input v-model="confirmPassword" class="auth-input" password placeholder="请再次输入新密码" placeholder-class="placeholder" />
</view>
</view>
<view class="reset-submit" hover-class="button-hover" @click="submitReset">
<image class="reset-submit__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<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="text-hover" @click="prepareLogin">返回登录</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const phone = ref('')
const verificationCode = ref('')
const password = ref('')
const confirmPassword = ref('')
const goBack = () => {
uni.navigateBack()
}
const prepareLogin = () => uni.navigateTo({ url: '/pages/auth/a02-login' })
const prepareGetCode = () => {
uni.showToast({ title: '验证码功能待接入', icon: 'none' })
}
const submitReset = () => {
if (!/^1\d{10}$/.test(phone.value)) {
uni.showToast({ title: '请输入正确手机号', icon: 'none' })
return
}
if (!/^\d{6}$/.test(verificationCode.value)) {
uni.showToast({ title: '请输入 6 位验证码', icon: 'none' })
return
}
if (!password.value) {
uni.showToast({ title: '请设置新密码', icon: 'none' })
return
}
if (password.value !== confirmPassword.value) {
uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
return
}
uni.showToast({ title: '密码重设服务待接入', icon: 'none' })
}
</script>
<style scoped lang="scss">
.auth-page {
position: relative;
min-height: 100vh;
background: #f7f1e6;
}
.paper-background,
.scenery-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.paper-background { opacity: 0.96; }
.scenery-background { opacity: 0.76; }
.auth-content {
position: relative;
z-index: 1;
box-sizing: border-box;
min-height: 100vh;
padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
}
.auth-header {
position: relative;
height: 253rpx;
overflow: hidden;
}
.header-background {
width: 100%;
height: 100%;
}
.header-seal {
position: absolute;
top: 70rpx;
left: 50%;
width: 136rpx;
height: 136rpx;
transform: translateX(-50%);
}
.reset-panel {
position: relative;
min-height: 1240rpx;
margin: 32rpx 42rpx 0;
}
.reset-panel__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.reset-panel__content {
position: relative;
z-index: 1;
box-sizing: border-box;
min-height: 1240rpx;
padding: 66rpx 50rpx 72rpx;
}
.page-heading {
position: relative;
display: flex;
align-items: center;
}
.reset-title-cloud {
position: absolute;
top: -26rpx;
right: 2rpx;
width: 154rpx;
height: 92rpx;
opacity: 0.62;
}
.page-heading__copy {
position: relative;
z-index: 1;
}
.back-button {
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 56rpx;
margin-right: 18rpx;
}
.back-hover { opacity: 0.62; }
.back-button__icon {
width: 42rpx;
height: 42rpx;
transform: scaleX(-1);
}
.page-title,
.page-subtitle {
display: block;
}
.page-title {
color: #3f2c1d;
font-family: STKaiti, KaiTi, serif;
font-size: 50rpx;
font-weight: 700;
letter-spacing: 4rpx;
}
.page-subtitle {
margin-top: 10rpx;
color: #8c7864;
font-size: 24rpx;
letter-spacing: 1rpx;
}
.reset-divider {
display: block;
width: 154rpx;
height: 42rpx;
margin: 40rpx auto 0;
}
.form-content { margin-top: 30rpx; }
.input-row {
display: flex;
align-items: center;
min-height: 112rpx;
border-bottom: 1rpx solid #e5d4b7;
}
.input-label {
width: 174rpx;
color: #674b35;
font-family: STKaiti, KaiTi, serif;
font-size: 31rpx;
}
.auth-input {
flex: 1;
min-width: 0;
height: 104rpx;
color: #3f2c1d;
font-size: 29rpx;
}
.placeholder { color: #b3a895; }
.get-code {
flex: 0 0 auto;
padding-left: 18rpx;
border-left: 1rpx solid #ddc7a3;
color: #a7160c;
font-size: 24rpx;
}
.reset-submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 128rpx;
margin-top: 52rpx;
overflow: hidden;
}
.reset-submit__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.reset-submit__content {
position: relative;
z-index: 1;
color: #fffaf0;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
letter-spacing: 6rpx;
}
.button-hover { opacity: 0.84; }
.text-hover { opacity: 0.64; }
.reset-tip {
display: block;
margin-top: 26rpx;
color: #8c7864;
font-size: 22rpx;
text-align: center;
}
.login-entry {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rpx;
color: #6b5a4a;
font-size: 24rpx;
}
.login-entry__link {
display: flex;
align-items: center;
min-height: 82rpx;
margin-left: 8rpx;
color: #a7160c;
}
</style>
pages/auth/a06-auth-status.vue
+371 -3
View File
@@ -1,3 +1,371 @@
<!-- 页面编号：A-06；用途：账号受限、登录失败与授权取消状态。 -->
<template><ModulePage page-id="a06" /></template>
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
<!-- 页面编号：A-06；用途：承接登录未完成、失败、受限与授权结果。 -->
<template>
<view class="auth-page status-page">
<!-- 认证入口沿用纸纹、淡墨与祠堂头图，不以 CSS 重绘完整装饰面。 -->
<image class="paper-background" src="/static/assets/foundation/opaque/auth-page-paper.jpg" mode="aspectFill" />
<image class="scenery-background" src="/static/assets/foundation/transparent/auth-ink-scenery.png" mode="aspectFill" />
<view class="auth-content">
<view class="auth-header">
<image class="header-background" src="/static/assets/foundation/opaque/auth-header.png" mode="aspectFill" />
<image class="header-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
</view>
<view class="status-panel">
<image class="status-panel__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
<view class="status-panel__content">
<view class="page-heading">
<image class="status-title-cloud" src="/static/assets/foundation/transparent/auth-title-cloud.png" mode="aspectFit" />
<view class="back-button" hover-class="back-hover" @click="goBack">
<image class="back-button__icon" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
</view>
<view class="page-heading__copy">
<text class="page-title">登录提示</text>
<text class="page-subtitle">请确认当前状态后继续操作</text>
</view>
</view>
<image class="status-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
<view class="status-body">
<image class="status-icon" src="/static/assets/foundation/transparent/auth-login-outline.png" mode="aspectFit" />
<text class="status-eyebrow">{{ currentState.eyebrow }}</text>
<text class="status-title">{{ currentState.title }}</text>
<text class="status-description">{{ currentState.description }}</text>
</view>
<view class="status-primary" hover-class="button-hover" @click="handlePrimary">
<image class="status-primary__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<text class="status-primary__copy">{{ currentState.primaryLabel }}</text>
</view>
<view v-if="currentState.secondaryLabel" class="status-secondary" hover-class="text-hover" @click="goLogin">
{{ currentState.secondaryLabel }}
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
const status = ref('normal')
const statusConfig = {
normal: {
eyebrow: '登录提示',
title: '登录未完成',
description: '登录流程尚未完成，请选择一种方式继续。',
primaryLabel: '返回登录',
action: 'login',
secondaryLabel: ''
},
failed: {
eyebrow: '登录提示',
title: '登录失败',
description: '当前无法完成登录，请稍后重试或改用其他方式。',
primaryLabel: '返回登录',
action: 'login',
secondaryLabel: ''
},
restricted: {
eyebrow: '账号安全',
title: '账号暂时受限',
description: '为保护家谱资料，当前账号暂不能登录。',
primaryLabel: '查看帮助',
action: 'help',
secondaryLabel: '返回登录'
},
'register-pending': {
eyebrow: '注册提示',
title: '注册尚未完成',
description: '请返回注册页完善信息后再登录。',
primaryLabel: '继续注册',
action: 'register',
secondaryLabel: '返回登录'
},
'wechat-cancelled': {
eyebrow: '微信登录',
title: '微信授权已取消',
description: '未获得微信授权，不会影响账号安全。',
primaryLabel: '返回登录',
action: 'login',
secondaryLabel: ''
},
'wechat-failed': {
eyebrow: '微信登录',
title: '微信授权失败',
description: '当前无法完成微信授权，请使用账号密码登录。',
primaryLabel: '返回登录',
action: 'login',
secondaryLabel: ''
}
}
const currentState = computed(() => statusConfig[status.value])
const resolveStatus = () => {
let requestedStatus = 'normal'
if (typeof location !== 'undefined') {
const query = new URLSearchParams(location.hash.split('?')[1] || '')
requestedStatus = query.get('status') || 'normal'
} else {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
requestedStatus = currentPage?.options?.status || 'normal'
}
status.value = Object.prototype.hasOwnProperty.call(statusConfig, requestedStatus) ? requestedStatus : 'normal'
}
onLoad(() => {
resolveStatus()
})
onShow(() => {
resolveStatus()
})
const goLogin = () => {
uni.navigateTo({ url: '/pages/auth/a02-login' })
}
const goRegister = () => {
uni.navigateTo({ url: '/pages/auth/a04-register' })
}
const handlePrimary = () => {
if (currentState.value.action === 'register') {
goRegister()
return
}
if (currentState.value.action === 'help') {
uni.showToast({ title: '账号申诉功能待接入', icon: 'none' })
return
}
goLogin()
}
const goBack = () => {
uni.navigateBack()
}
</script>
<style scoped lang="scss">
.auth-page {
position: relative;
min-height: 100vh;
background: #f7f1e6;
}
.paper-background,
.scenery-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.paper-background { opacity: 0.96; }
.scenery-background { opacity: 0.76; }
.auth-content {
position: relative;
z-index: 1;
box-sizing: border-box;
min-height: 100vh;
padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
}
.auth-header {
position: relative;
height: 253rpx;
overflow: hidden;
}
.header-background {
width: 100%;
height: 100%;
}
.header-seal {
position: absolute;
top: 70rpx;
left: 50%;
width: 136rpx;
height: 136rpx;
transform: translateX(-50%);
}
.status-panel {
position: relative;
min-height: 1030rpx;
margin: 32rpx 42rpx 0;
}
.status-panel__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.status-panel__content {
position: relative;
z-index: 1;
box-sizing: border-box;
min-height: 1030rpx;
padding: 66rpx 50rpx 72rpx;
}
.page-heading {
position: relative;
display: flex;
align-items: center;
}
.status-title-cloud {
position: absolute;
top: -26rpx;
right: 2rpx;
width: 154rpx;
height: 92rpx;
opacity: 0.62;
}
.back-button {
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 56rpx;
margin-right: 18rpx;
}
.back-hover { opacity: 0.62; }
.back-button__icon {
width: 42rpx;
height: 42rpx;
transform: scaleX(-1);
}
.page-heading__copy {
position: relative;
z-index: 1;
}
.page-title,
.page-subtitle {
display: block;
}
.page-title {
color: #3f2c1d;
font-family: STKaiti, KaiTi, serif;
font-size: 50rpx;
font-weight: 700;
letter-spacing: 4rpx;
}
.page-subtitle {
margin-top: 10rpx;
color: #8c7864;
font-size: 24rpx;
letter-spacing: 1rpx;
}
.status-divider {
display: block;
width: 154rpx;
height: 42rpx;
margin: 40rpx auto 0;
}
.status-body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 430rpx;
padding-top: 54rpx;
text-align: center;
}
.status-icon {
width: 132rpx;
height: 132rpx;
opacity: 0.82;
}
.status-eyebrow {
display: block;
margin-top: 28rpx;
color: #a7160c;
font-size: 24rpx;
letter-spacing: 3rpx;
}
.status-title {
display: block;
margin-top: 18rpx;
color: #3f2c1d;
font-family: STKaiti, KaiTi, serif;
font-size: 44rpx;
font-weight: 700;
letter-spacing: 4rpx;
}
.status-description {
display: block;
box-sizing: border-box;
width: 100%;
min-height: 64rpx;
margin-top: 20rpx;
padding: 0 8rpx;
color: #786654;
font-size: 26rpx;
line-height: 1.8;
}
.status-primary {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 128rpx;
overflow: hidden;
}
.status-primary__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.status-primary__copy {
position: relative;
z-index: 1;
color: #fffaf0;
font-family: STKaiti, KaiTi, serif;
font-size: 36rpx;
letter-spacing: 6rpx;
}
.status-secondary {
display: flex;
align-items: center;
justify-content: center;
min-height: 88rpx;
color: #a7160c;
font-size: 25rpx;
}
.button-hover { opacity: 0.84; }
.text-hover { opacity: 0.64; }
</style>