验收20%
This commit is contained in:
+475
-126
@@ -1,80 +1,73 @@
|
||||
<!-- 页面编号：A-01；用途：APP 唯一登录入口，承载密码、验证码与微信登录入口。 -->
|
||||
<template>
|
||||
<view class="auth-page login-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="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" />
|
||||
|
||||
<view class="auth-content">
|
||||
<view class="auth-header">
|
||||
<image class="header-background" src="/static/assets/modules/auth/opaque/a01-login-header-v1.png" mode="scaleToFill" />
|
||||
</view>
|
||||
|
||||
<view class="login-scroll">
|
||||
<image class="login-scroll__skin" src="/static/assets/modules/auth/transparent/a01-login-scroll-frame-v1.png" mode="scaleToFill" />
|
||||
<view class="login-scroll__content">
|
||||
<view class="login-heading">
|
||||
<image class="heading-cloud" src="/static/assets/foundation/transparent/auth-title-cloud.png" mode="aspectFit" />
|
||||
<text class="login-title">登录家谱</text>
|
||||
<image class="heading-cloud heading-cloud--right" src="/static/assets/foundation/transparent/auth-title-cloud.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="login-content">
|
||||
<view class="login-heading">
|
||||
<text class="login-title">登录家谱</text>
|
||||
<image class="title-divider" src="/static/assets/modules/auth/opaque/a01-title-divider-v2.png" mode="scaleToFill" />
|
||||
</view>
|
||||
|
||||
<view class="login-tabs">
|
||||
<view class="login-tab" :class="{ active: activeLoginMethod === 'password' }" hover-class="tap-fade" @click="switchLoginMethod('password')">密码登录</view>
|
||||
<view class="login-tab" :class="{ active: activeLoginMethod === 'sms' }" hover-class="tap-fade" @click="switchLoginMethod('sms')">验证码登录</view>
|
||||
<view class="login-tabs">
|
||||
<view class="login-tab" :class="{ active: activeLoginMethod === 'password' }" hover-class="tap-fade" @click="switchLoginMethod('password')">密码登录</view>
|
||||
<view class="login-tab" :class="{ active: activeLoginMethod === 'sms' }" hover-class="tap-fade" @click="switchLoginMethod('sms')">验证码登录</view>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="input-row">
|
||||
<image class="input-icon" src="/static/assets/modules/auth/transparent/a01-icon-phone-v1.png" mode="aspectFit" />
|
||||
<input v-model.trim="phone" class="auth-input" type="number" maxlength="11" placeholder="手机号" placeholder-class="input-placeholder" confirm-type="next" />
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="input-row">
|
||||
<image class="input-icon" src="/static/assets/modules/auth/transparent/a01-icon-phone-v1.png" mode="aspectFit" />
|
||||
<input v-model.trim="phone" class="auth-input" type="number" maxlength="11" placeholder="手机号" placeholder-class="input-placeholder" confirm-type="next" />
|
||||
</view>
|
||||
|
||||
<view v-if="activeLoginMethod === 'password'" class="input-row">
|
||||
<image class="input-icon" src="/static/assets/modules/auth/transparent/a01-icon-lock-v1.png" mode="aspectFit" />
|
||||
<input v-model="password" class="auth-input" :password="!passwordVisible" maxlength="32" placeholder="密码" placeholder-class="input-placeholder" confirm-type="done" @confirm="submitLogin" />
|
||||
<view class="password-toggle" hover-class="tap-fade" @click="togglePasswordVisibility">
|
||||
<image class="password-toggle__icon" :src="passwordVisible ? '/static/assets/modules/auth/transparent/a01-icon-eye-open-v1.png' : '/static/assets/modules/auth/transparent/a01-icon-eye-closed-pupil-v2.png'" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="input-row">
|
||||
<image class="input-icon" src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png" mode="aspectFit" />
|
||||
<input v-model.trim="verificationCode" class="auth-input" type="number" maxlength="6" placeholder="验证码" placeholder-class="input-placeholder" confirm-type="done" @confirm="submitLogin" />
|
||||
<view class="get-code" hover-class="tap-fade" @click="prepareGetCode">获取验证码</view>
|
||||
</view>
|
||||
|
||||
<view class="form-secondary-row">
|
||||
<view v-if="activeLoginMethod === 'password'" class="forgot-password" hover-class="tap-fade" @click="prepareForgotPassword">忘记密码</view>
|
||||
<view v-if="activeLoginMethod === 'password'" class="input-row">
|
||||
<image class="input-icon" src="/static/assets/modules/auth/transparent/a01-icon-lock-v1.png" mode="aspectFit" />
|
||||
<input v-model="password" class="auth-input" :password="!passwordVisible" maxlength="32" placeholder="密码" placeholder-class="input-placeholder" confirm-type="done" @confirm="submitLogin" />
|
||||
<view class="password-toggle" hover-class="tap-fade" @click="togglePasswordVisibility">
|
||||
<image class="password-toggle__icon" :src="passwordVisible ? '/static/assets/modules/auth/transparent/a01-icon-eye-open-v1.png' : '/static/assets/modules/auth/transparent/a01-icon-eye-closed-pupil-v2.png'" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login-submit" hover-class="button-pressed" @click="submitLogin">
|
||||
<image class="button-skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="login-submit__copy">登录</text>
|
||||
<view v-else class="input-row">
|
||||
<image class="input-icon input-icon--sms" src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png" mode="aspectFit" />
|
||||
<input v-model.trim="verificationCode" class="auth-input" type="number" maxlength="6" placeholder="短信验证码" placeholder-class="input-placeholder" confirm-type="done" @confirm="submitLogin" />
|
||||
<view class="get-code" hover-class="tap-fade" @click="prepareGetCode">获取验证码</view>
|
||||
</view>
|
||||
|
||||
<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 class="form-secondary-row">
|
||||
<view v-if="activeLoginMethod === 'password'" class="forgot-password" hover-class="tap-fade" @click="prepareForgotPassword">忘记密码</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="wechat-login" hover-class="button-pressed" @click="prepareWechatLogin">
|
||||
<image class="button-skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<view class="wechat-login__content">
|
||||
<image class="wechat-icon" src="/static/assets/foundation/transparent/auth-wechat.png" mode="aspectFit" />
|
||||
<text>微信登录</text>
|
||||
</view>
|
||||
<view class="login-submit" hover-class="button-pressed" @click="submitLogin">
|
||||
<image class="button-skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="login-submit__copy">登录</text>
|
||||
</view>
|
||||
|
||||
<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>
|
||||
|
||||
<view class="wechat-login" hover-class="button-pressed" @click="prepareWechatLogin">
|
||||
<image class="button-skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<view class="wechat-login__content">
|
||||
<image class="wechat-icon" src="/static/assets/foundation/transparent/auth-wechat.png" mode="aspectFit" />
|
||||
<text>微信登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="register-entry">
|
||||
<text>还没有账号？</text>
|
||||
<view class="register-link" hover-class="tap-fade" @click="prepareRegister">注册账号</view>
|
||||
</view>
|
||||
<view class="register-entry">
|
||||
<text>还没有账号？</text>
|
||||
<view class="register-link" hover-class="tap-fade" @click="prepareRegister">注册账号</view>
|
||||
</view>
|
||||
|
||||
<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" />
|
||||
<view class="agreement-copy">
|
||||
@@ -84,13 +77,12 @@
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error">请先阅读并同意用户协议与隐私政策</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="exact-header-overlay" src="/static/assets/modules/auth/opaque/a01-login-header-exact-v2.png" mode="scaleToFill" />
|
||||
|
||||
<!-- 先验收自定义容器；真实滑块数据留到接口阶段接入。 -->
|
||||
<!-- 当前只验收自定义容器外观，真实行为验证数据留到接口阶段接入。 -->
|
||||
<view v-if="verificationVisible" class="verification-layer" @click="closeVerification">
|
||||
<view class="verification-dialog" @click.stop>
|
||||
<image class="verification-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
@@ -124,6 +116,7 @@ const phone = ref('')
|
||||
const password = ref('')
|
||||
const verificationCode = ref('')
|
||||
const agreed = ref(false)
|
||||
const agreementError = ref(false)
|
||||
const verificationVisible = ref(false)
|
||||
const verificationPurpose = ref('登录')
|
||||
const feedbackVisible = ref(false)
|
||||
@@ -161,6 +154,7 @@ const togglePasswordVisibility = () => {
|
||||
|
||||
const toggleAgreement = () => {
|
||||
agreed.value = !agreed.value
|
||||
if (agreed.value) agreementError.value = false
|
||||
}
|
||||
|
||||
const validatePhone = () => {
|
||||
@@ -171,7 +165,7 @@ const validatePhone = () => {
|
||||
|
||||
const requireAgreement = () => {
|
||||
if (agreed.value) return true
|
||||
showFeedback('请先阅读并同意用户协议与隐私政策')
|
||||
agreementError.value = true
|
||||
return false
|
||||
}
|
||||
|
||||
@@ -228,87 +222,442 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #f6efe2;
|
||||
background: #f7f0e5;
|
||||
color: #493323;
|
||||
}
|
||||
|
||||
.paper-background,
|
||||
.scenery-background {
|
||||
position: fixed;
|
||||
.page-canvas {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: calc(1665rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.page-backdrop {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0 0 auto;
|
||||
width: 100%;
|
||||
height: 1665rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.brand-seal {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 64rpx;
|
||||
left: 50%;
|
||||
width: 220rpx;
|
||||
height: 264rpx;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 480rpx 64rpx 34rpx;
|
||||
}
|
||||
|
||||
.login-heading {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 118rpx;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: #9f170f;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 82rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title-divider {
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
left: 50%;
|
||||
width: 286rpx;
|
||||
height: 32rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.login-tabs {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 114rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.login-tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 88rpx;
|
||||
color: #80684f;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 40rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.login-tab:first-child::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(176, 120, 52, 0.58);
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.login-tab.active {
|
||||
color: #a9160d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-tab.active::after {
|
||||
position: absolute;
|
||||
right: 58rpx;
|
||||
bottom: 0;
|
||||
left: 58rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #ad160d;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.form-content { margin-top: 10rpx; }
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
min-height: 112rpx;
|
||||
padding-left: 12rpx;
|
||||
border-bottom: 1rpx solid rgba(182, 116, 43, 0.68);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
flex: 0 0 auto;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-right: 22rpx;
|
||||
transform: translateX(-12rpx);
|
||||
}
|
||||
|
||||
.input-icon--sms { transform: translateX(-12rpx) scale(1.45); }
|
||||
|
||||
.auth-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 104rpx;
|
||||
color: #493323;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.input-placeholder { color: #9f968d; }
|
||||
|
||||
.password-toggle {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.password-toggle__icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.get-code {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 142rpx;
|
||||
min-height: 88rpx;
|
||||
color: #a9160d;
|
||||
font-size: 32rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-secondary-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 110rpx;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 88rpx;
|
||||
color: #a9160d;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.login-submit,
|
||||
.wechat-login {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-submit { height: 92rpx; }
|
||||
|
||||
.button-skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.paper-background { opacity: 0.98; }
|
||||
.scenery-background { opacity: 0.72; }
|
||||
.exact-header-overlay { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 267rpx; pointer-events: none; }
|
||||
|
||||
.auth-content { position: relative; z-index: 1; min-height: 100%; padding-bottom: env(safe-area-inset-bottom); }
|
||||
.auth-header { position: relative; height: 304rpx; }
|
||||
.header-background { width: 100%; height: 100%; }
|
||||
.login-submit__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fffaf1;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 52rpx;
|
||||
letter-spacing: 8rpx;
|
||||
}
|
||||
|
||||
.login-scroll { position: relative; z-index: 4; box-sizing: border-box; height: 1520rpx; margin: -80rpx 12rpx 0; }
|
||||
.login-scroll__skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.login-scroll__content { position: relative; z-index: 1; box-sizing: border-box; height: 100%; padding: 224rpx 97rpx 66rpx; }
|
||||
.other-login-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
color: #9f6a27;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 32rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.login-heading { display: flex; align-items: center; justify-content: center; height: 74rpx; }
|
||||
.login-title { margin: 0 8rpx; color: #6f140f; font-family: STKaiti, KaiTi, serif; font-size: 64rpx; font-weight: 700; letter-spacing: 8rpx; line-height: 1; }
|
||||
.heading-cloud { width: 48rpx; height: 34rpx; }
|
||||
.heading-cloud--right { transform: scaleX(-1); }
|
||||
.title-divider { position: absolute; top: 310rpx; left: 50%; display: block; width: 286rpx; height: 38rpx; transform: translateX(-50%); }
|
||||
.divider-line {
|
||||
flex: 1;
|
||||
height: 1rpx;
|
||||
margin: 0 8rpx;
|
||||
background: rgba(180, 113, 38, 0.64);
|
||||
}
|
||||
|
||||
.login-tabs { display: flex; align-items: flex-end; height: 104rpx; margin: 14rpx 0 0; border-bottom: 1rpx solid rgba(193, 142, 67, 0.48); }
|
||||
.login-tab { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 88rpx; color: #7f6856; font-family: STKaiti, KaiTi, serif; font-size: 33rpx; letter-spacing: 2rpx; }
|
||||
.login-tab:first-child::before { position: absolute; top: 50%; right: 0; width: 1rpx; height: 38rpx; background: rgba(193, 142, 67, 0.42); content: ''; transform: translateY(-50%); }
|
||||
.login-tab.active { color: #a9160d; font-weight: 700; }
|
||||
.login-tab.active::after { position: absolute; right: 102rpx; bottom: -2rpx; left: 102rpx; height: 5rpx; border-radius: 5rpx; background: #ad160d; content: ''; }
|
||||
.divider-knot {
|
||||
width: 17rpx;
|
||||
height: 17rpx;
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
|
||||
.form-content { margin-top: 16rpx; }
|
||||
.input-row { display: flex; align-items: center; box-sizing: border-box; min-height: 128rpx; padding-left: 14rpx; border-bottom: 1rpx solid rgba(197, 145, 70, 0.62); }
|
||||
.input-icon { flex: 0 0 auto; width: 58rpx; height: 58rpx; margin-right: 22rpx; }
|
||||
.auth-input { flex: 1; min-width: 0; height: 116rpx; color: #493323; font-size: 32rpx; }
|
||||
.input-placeholder { color: #a79e94; }
|
||||
.password-toggle { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 88rpx; height: 88rpx; margin-right: 0; }
|
||||
.password-toggle__icon { width: 56rpx; height: 56rpx; }
|
||||
.get-code { display: flex; flex: 0 0 auto; align-items: center; min-height: 88rpx; padding-left: 18rpx; color: #a9160d; font-size: 24rpx; white-space: nowrap; }
|
||||
.form-secondary-row { display: flex; align-items: center; justify-content: flex-end; min-height: 80rpx; }
|
||||
.forgot-password { display: flex; align-items: center; min-height: 80rpx; color: #a9160d; font-size: 28rpx; }
|
||||
.divider-knot--right {
|
||||
margin: 0 0 0 7rpx;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.wechat-login {
|
||||
height: 100rpx;
|
||||
color: #493323;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 40rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
|
||||
.wechat-login__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
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;
|
||||
justify-content: center;
|
||||
min-height: 100rpx;
|
||||
color: #493323;
|
||||
font-size: 31rpx;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 88rpx;
|
||||
margin-left: 8rpx;
|
||||
color: #a9160d;
|
||||
}
|
||||
|
||||
.agreement-area {
|
||||
min-height: 106rpx;
|
||||
color: #58483c;
|
||||
}
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 74rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.agreement-icon {
|
||||
flex: 0 0 auto;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.agreement-copy {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.login-submit,
|
||||
.wechat-login { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.login-submit { height: 112rpx; margin-top: 34rpx; }
|
||||
.button-skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.login-submit__copy { position: relative; z-index: 1; color: #fffaf1; font-family: STKaiti, KaiTi, serif; font-size: 42rpx; letter-spacing: 8rpx; }
|
||||
.other-login-divider { display: flex; align-items: center; height: 74rpx; margin-top: 36rpx; color: #b07b31; font-family: STKaiti, KaiTi, serif; font-size: 27rpx; white-space: nowrap; }
|
||||
.divider-line { flex: 1; height: 1rpx; margin: 0 10rpx; background: rgba(194, 139, 60, 0.58); }
|
||||
.divider-knot { width: 18rpx; height: 18rpx; margin-right: 8rpx; }
|
||||
.divider-knot--right { margin: 0 0 0 8rpx; transform: scaleX(-1); }
|
||||
.wechat-login { height: 114rpx; margin-top: 8rpx; color: #493323; font-family: STKaiti, KaiTi, serif; font-size: 34rpx; letter-spacing: 4rpx; }
|
||||
.wechat-login__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
|
||||
.wechat-icon { width: 48rpx; height: 48rpx; margin-right: 14rpx; filter: sepia(1) saturate(2.7) hue-rotate(52deg) brightness(0.78); }
|
||||
.register-entry { display: flex; align-items: center; justify-content: center; min-height: 66rpx; margin-top: 32rpx; color: #493323; font-size: 27rpx; }
|
||||
.register-link { display: flex; align-items: center; min-height: 66rpx; margin-left: 10rpx; color: #a9160d; }
|
||||
.agreement-row { display: flex; align-items: center; justify-content: center; min-height: 68rpx; margin-top: 24rpx; color: #58483c; font-size: 20rpx; line-height: 30rpx; }
|
||||
.agreement-icon { flex: 0 0 auto; width: 32rpx; height: 32rpx; margin-right: 10rpx; }
|
||||
.agreement-copy { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; white-space: nowrap; }
|
||||
.agreement-link { color: #a9160d; }
|
||||
|
||||
.agreement-error {
|
||||
display: block;
|
||||
color: #b42318;
|
||||
font-size: 20rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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); }
|
||||
}
|
||||
|
||||
.tap-fade { opacity: 0.62; }
|
||||
.button-pressed { opacity: 0.82; }
|
||||
|
||||
.feedback-toast { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 32rpx); left: 50%; display: flex; align-items: center; justify-content: center; width: 590rpx; min-height: 88rpx; transform: translateX(-50%); }
|
||||
.feedback-toast__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.feedback-toast__copy { position: relative; z-index: 1; padding: 18rpx 40rpx; color: #5c4330; font-size: 25rpx; text-align: center; }
|
||||
.feedback-toast {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: calc(env(safe-area-inset-top) + 24rpx);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 590rpx;
|
||||
min-height: 82rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.verification-layer { position: fixed; z-index: 40; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40rpx; background: rgba(31, 20, 13, 0.56); }
|
||||
.verification-dialog { position: relative; width: 620rpx; height: 520rpx; }
|
||||
.verification-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.verification-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; height: 100%; padding: 90rpx 64rpx 54rpx; }
|
||||
.verification-title { color: #6f140f; font-family: STKaiti, KaiTi, serif; font-size: 42rpx; font-weight: 700; }
|
||||
.verification-copy { margin-top: 42rpx; color: #493323; font-size: 28rpx; text-align: center; }
|
||||
.verification-note { margin-top: 20rpx; color: #8d7a68; font-size: 23rpx; }
|
||||
.verification-actions { display: flex; width: 100%; margin-top: auto; }
|
||||
.verification-action { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 88rpx; color: #745b46; font-size: 28rpx; }
|
||||
.verification-action--primary { color: #a9160d; font-weight: 700; }
|
||||
.feedback-toast__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feedback-toast__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 16rpx 36rpx;
|
||||
color: #5c4330;
|
||||
font-size: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verification-layer {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
background: rgba(31, 20, 13, 0.56);
|
||||
}
|
||||
|
||||
.verification-dialog {
|
||||
position: relative;
|
||||
width: 620rpx;
|
||||
height: 520rpx;
|
||||
}
|
||||
|
||||
.verification-dialog__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.verification-dialog__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 90rpx 64rpx 54rpx;
|
||||
}
|
||||
|
||||
.verification-title {
|
||||
color: #6f140f;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.verification-copy {
|
||||
margin-top: 42rpx;
|
||||
color: #493323;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verification-note {
|
||||
margin-top: 20rpx;
|
||||
color: #8d7a68;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.verification-actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.verification-action {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 88rpx;
|
||||
color: #745b46;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.verification-action--primary {
|
||||
color: #a9160d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
+284
-161
@@ -1,51 +1,52 @@
|
||||
<!-- 页面编号：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-design-scenery-v1.png" mode="scaleToFill" />
|
||||
<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" />
|
||||
|
||||
<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 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" />
|
||||
</view>
|
||||
|
||||
<text class="page-title">注册账号</text>
|
||||
<text class="page-subtitle">创建属于你的家谱账号</text>
|
||||
<image class="register-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<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 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.password }">
|
||||
<view class="input-row">
|
||||
<text class="input-label">设置密码</text>
|
||||
<input v-model="password" class="auth-input" password placeholder="请设置登录密码" placeholder-class="placeholder" />
|
||||
<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 placeholder="请再次输入密码" placeholder-class="placeholder" />
|
||||
<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="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="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-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" />
|
||||
<view class="agreement-copy">
|
||||
@@ -55,226 +56,255 @@
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error">请先阅读并同意用户协议与隐私政策</text>
|
||||
</view>
|
||||
|
||||
<view class="login-entry">
|
||||
<text>已有账号？</text>
|
||||
<view class="login-entry__link" hover-class="text-hover" @click="prepareLogin">登录</view>
|
||||
<view class="login-entry">
|
||||
<text>已有账号？</text>
|
||||
<view class="login-entry__link" hover-class="tap-fade" @click="prepareLogin">登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 注册短信接口未提供前，完整本地校验通过后使用同系列行为验证容器。 -->
|
||||
<view v-if="verificationVisible" class="verification-layer" @click="closeVerification">
|
||||
<view class="verification-dialog" @click.stop>
|
||||
<image class="verification-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
<view class="verification-dialog__content">
|
||||
<text class="verification-title">安全验证</text>
|
||||
<text class="verification-copy">注册前需要完成行为验证</text>
|
||||
<text class="verification-note">验证数据将在接口接入后启用</text>
|
||||
<view class="verification-actions">
|
||||
<view class="verification-action" hover-class="tap-fade" @click="closeVerification">取消</view>
|
||||
<view class="verification-action verification-action--primary" hover-class="tap-fade" @click="confirmVerification">知道了</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="feedbackVisible" class="feedback-toast">
|
||||
<image class="feedback-toast__skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text class="feedback-toast__copy">{{ feedbackMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 fieldErrors = ref({
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
const verificationVisible = ref(false)
|
||||
const feedbackVisible = ref(false)
|
||||
const feedbackMessage = ref('')
|
||||
let feedbackTimer = null
|
||||
|
||||
onUnload(() => {
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const prepareLogin = () => uni.navigateTo({ url: '/pages/auth/a01-entry' })
|
||||
// “已有账号”用于退出注册流程，替换当前页可避免登录/注册页面反复叠加。
|
||||
const prepareLogin = () => uni.redirectTo({ url: '/pages/auth/a01-entry' })
|
||||
|
||||
const prepareAgreement = () => {
|
||||
uni.showToast({ title: '协议页面准备中', icon: 'none' })
|
||||
const showFeedback = (message) => {
|
||||
feedbackMessage.value = message
|
||||
feedbackVisible.value = true
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
feedbackTimer = setTimeout(() => {
|
||||
feedbackVisible.value = false
|
||||
feedbackTimer = null
|
||||
}, 2200)
|
||||
}
|
||||
|
||||
const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
|
||||
const toggleAgreement = () => {
|
||||
agreed.value = !agreed.value
|
||||
if (agreed.value) agreementError.value = false
|
||||
}
|
||||
|
||||
const clearFieldError = (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 closeVerification = () => {
|
||||
verificationVisible.value = false
|
||||
}
|
||||
|
||||
const confirmVerification = () => {
|
||||
closeVerification()
|
||||
showFeedback('注册服务待接入')
|
||||
}
|
||||
|
||||
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' })
|
||||
const formValid = validateForm()
|
||||
if (!agreed.value) agreementError.value = true
|
||||
if (!formValid || !agreed.value) return
|
||||
verificationVisible.value = true
|
||||
}
|
||||
</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%;
|
||||
height: 100dvh;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #f7f0e4;
|
||||
color: #493323;
|
||||
}
|
||||
|
||||
.paper-background { opacity: 0.96; }
|
||||
.scenery-background { opacity: 0.76; }
|
||||
|
||||
.auth-content {
|
||||
.page-canvas {
|
||||
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%;
|
||||
min-height: calc(1665rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.header-seal {
|
||||
.page-backdrop {
|
||||
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;
|
||||
inset: 0 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 1665rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.register-panel__content {
|
||||
position: relative;
|
||||
.brand-seal {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 64rpx;
|
||||
left: 50%;
|
||||
width: 220rpx;
|
||||
height: 264rpx;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.register-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
min-height: 1184rpx;
|
||||
padding: 66rpx 50rpx 76rpx;
|
||||
padding: 430rpx 64rpx 46rpx;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
min-height: 154rpx;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-right: 18rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #9f170f;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 66rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
letter-spacing: 7rpx;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin-top: 10rpx;
|
||||
color: #8c7864;
|
||||
font-size: 24rpx;
|
||||
margin-top: 12rpx;
|
||||
color: #806c58;
|
||||
font-size: 25rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.register-divider {
|
||||
display: block;
|
||||
width: 154rpx;
|
||||
height: 42rpx;
|
||||
margin: 40rpx auto 0;
|
||||
height: 34rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.form-content { margin-top: 30rpx; }
|
||||
.form-content { margin-top: 12rpx; }
|
||||
|
||||
.field-block { min-height: 116rpx; }
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 112rpx;
|
||||
border-bottom: 1rpx solid #e5d4b7;
|
||||
min-height: 104rpx;
|
||||
border-bottom: 1rpx solid rgba(182, 116, 43, 0.68);
|
||||
}
|
||||
|
||||
.input-label {
|
||||
width: 154rpx;
|
||||
flex: 0 0 152rpx;
|
||||
color: #674b35;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 31rpx;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 104rpx;
|
||||
height: 96rpx;
|
||||
color: #3f2c1d;
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.placeholder { color: #b3a895; }
|
||||
.placeholder { color: #a79e94; }
|
||||
|
||||
.field-error,
|
||||
.agreement-error {
|
||||
display: block;
|
||||
color: #b42318;
|
||||
font-size: 21rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.field-error { padding-top: 4rpx; text-align: right; }
|
||||
.field-block--error .input-row { border-bottom-color: #b42318; }
|
||||
|
||||
.register-submit {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 128rpx;
|
||||
margin-top: 60rpx;
|
||||
height: 104rpx;
|
||||
margin-top: 36rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -289,57 +319,150 @@ const submitRegister = () => {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fffaf0;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 39rpx;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.button-hover { opacity: 0.84; }
|
||||
.agreement-area { min-height: 118rpx; margin-top: 18rpx; }
|
||||
|
||||
.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;
|
||||
min-height: 76rpx;
|
||||
color: #58483c;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.agreement-icon {
|
||||
flex: 0 0 auto;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.agreement-copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agreement-link { color: #a7160c; }
|
||||
.agreement-error { text-align: center; }
|
||||
|
||||
.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); }
|
||||
}
|
||||
|
||||
.login-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2rpx;
|
||||
min-height: 82rpx;
|
||||
color: #6b5a4a;
|
||||
font-size: 24rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.login-entry__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 88rpx;
|
||||
min-height: 82rpx;
|
||||
margin-left: 8rpx;
|
||||
color: #a7160c;
|
||||
}
|
||||
|
||||
.text-hover { opacity: 0.64; }
|
||||
.tap-fade { opacity: 0.62; }
|
||||
.button-hover { opacity: 0.84; }
|
||||
|
||||
.feedback-toast {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: calc(env(safe-area-inset-top) + 24rpx);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 590rpx;
|
||||
min-height: 82rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.feedback-toast__skin,
|
||||
.verification-dialog__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feedback-toast__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 16rpx 36rpx;
|
||||
color: #5c4330;
|
||||
font-size: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verification-layer {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
background: rgba(31, 20, 13, 0.56);
|
||||
}
|
||||
|
||||
.verification-dialog {
|
||||
position: relative;
|
||||
width: 620rpx;
|
||||
height: 520rpx;
|
||||
}
|
||||
|
||||
.verification-dialog__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 90rpx 64rpx 54rpx;
|
||||
}
|
||||
|
||||
.verification-title {
|
||||
color: #6f140f;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.verification-copy { margin-top: 42rpx; color: #493323; font-size: 28rpx; }
|
||||
.verification-note { margin-top: 20rpx; color: #8d7a68; font-size: 23rpx; }
|
||||
|
||||
.verification-actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.verification-action {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 88rpx;
|
||||
color: #745b46;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.verification-action--primary { color: #a9160d; font-weight: 700; }
|
||||
</style>
|
||||
|
||||
+227
-226
@@ -1,328 +1,329 @@
|
||||
<!-- 页面编号：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-design-scenery-v1.png" mode="scaleToFill" />
|
||||
<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" />
|
||||
|
||||
<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 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/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 四项真实输入在当前页完成身份验证与两次密码确认。 -->
|
||||
<view class="form-content">
|
||||
<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 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" />
|
||||
<view class="get-code" hover-class="text-hover" @click="prepareGetCode">获取验证码</view>
|
||||
<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">{{ codeRequested ? '重新获取' : '获取验证码' }}</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 placeholder="请设置新密码" placeholder-class="placeholder" />
|
||||
<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 placeholder="请再次输入新密码" placeholder-class="placeholder" />
|
||||
<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/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="reset-submit__content">确认重设</text>
|
||||
</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>
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<!-- 发送短信验证码前进行行为验证；关闭时不清空表单。 -->
|
||||
<view v-if="verificationVisible" class="verification-layer" @click="closeVerification">
|
||||
<view class="verification-dialog" @click.stop>
|
||||
<image class="verification-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
<view class="verification-dialog__content">
|
||||
<text class="verification-title">安全验证</text>
|
||||
<text class="verification-copy">发送验证码前需要完成行为验证</text>
|
||||
<text class="verification-note">验证数据将在接口接入后启用</text>
|
||||
<view class="verification-actions">
|
||||
<view class="verification-action" hover-class="tap-fade" @click="closeVerification">取消</view>
|
||||
<view class="verification-action verification-action--primary" hover-class="tap-fade" @click="confirmVerification">完成验证</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="successVisible" class="success-layer">
|
||||
<view class="success-dialog">
|
||||
<image class="success-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
<view class="success-dialog__content">
|
||||
<text class="success-mark">✓</text>
|
||||
<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/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="success-action__copy">返回登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="feedbackVisible" class="feedback-toast">
|
||||
<image class="feedback-toast__skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text class="feedback-toast__copy">{{ feedbackMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onUnload } from '@dcloudio/uni-app'
|
||||
|
||||
const phone = ref('')
|
||||
const verificationCode = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const codeRequested = ref(false)
|
||||
const verificationVisible = ref(false)
|
||||
const successVisible = ref(false)
|
||||
const feedbackVisible = ref(false)
|
||||
const feedbackMessage = ref('')
|
||||
const fieldErrors = ref({
|
||||
phone: '',
|
||||
verificationCode: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
let feedbackTimer = null
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
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 prepareLogin = () => uni.navigateTo({ url: '/pages/auth/a01-entry' })
|
||||
const clearFieldError = (field) => {
|
||||
fieldErrors.value[field] = ''
|
||||
}
|
||||
|
||||
const prepareGetCode = () => {
|
||||
uni.showToast({ title: '验证码功能待接入', icon: 'none' })
|
||||
if (!/^1\d{10}$/.test(phone.value)) {
|
||||
fieldErrors.value.phone = '请输入正确手机号'
|
||||
return
|
||||
}
|
||||
fieldErrors.value.phone = ''
|
||||
verificationVisible.value = true
|
||||
}
|
||||
|
||||
const closeVerification = () => {
|
||||
verificationVisible.value = false
|
||||
}
|
||||
|
||||
const confirmVerification = () => {
|
||||
closeVerification()
|
||||
codeRequested.value = true
|
||||
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 位验证码'
|
||||
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 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' })
|
||||
if (!validateForm()) return
|
||||
successVisible.value = true
|
||||
}
|
||||
</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%;
|
||||
height: 100dvh;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #f7f0e4;
|
||||
color: #493323;
|
||||
}
|
||||
|
||||
.paper-background { opacity: 0.96; }
|
||||
.scenery-background { opacity: 0.76; }
|
||||
|
||||
.auth-content {
|
||||
.page-canvas {
|
||||
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%;
|
||||
min-height: calc(1665rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.header-seal {
|
||||
.page-backdrop {
|
||||
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;
|
||||
inset: 0 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 1665rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reset-panel__content {
|
||||
position: relative;
|
||||
.brand-seal {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 64rpx;
|
||||
left: 50%;
|
||||
width: 220rpx;
|
||||
height: 264rpx;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reset-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
min-height: 1240rpx;
|
||||
padding: 66rpx 50rpx 72rpx;
|
||||
padding: 430rpx 64rpx 46rpx;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
min-height: 154rpx;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-right: 18rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.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; }
|
||||
.back-button__icon { width: 42rpx; height: 42rpx; transform: scaleX(-1); }
|
||||
.page-title { color: #9f170f; font-family: STSong, SimSun, serif; font-size: 66rpx; font-weight: 700; letter-spacing: 7rpx; }
|
||||
.page-subtitle { margin-top: 12rpx; color: #806c58; font-size: 25rpx; letter-spacing: 1rpx; }
|
||||
.reset-divider { width: 154rpx; height: 34rpx; margin-top: 10rpx; }
|
||||
.form-content { margin-top: 8rpx; }
|
||||
.field-block { min-height: 114rpx; }
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 112rpx;
|
||||
border-bottom: 1rpx solid #e5d4b7;
|
||||
min-height: 84rpx;
|
||||
border-bottom: 1rpx solid #cfaa70;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.input-label { flex: 0 0 162rpx; color: #674b35; font-family: STSong, SimSun, serif; font-size: 29rpx; }
|
||||
.auth-input { flex: 1; min-width: 0; height: 82rpx; color: #3f2c1d; font-size: 27rpx; }
|
||||
.placeholder { color: #a79e94; }
|
||||
.get-code { flex: 0 0 auto; padding-left: 14rpx; border-left: 1rpx solid #d7bd94; color: #a7160c; font-size: 23rpx; }
|
||||
.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 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 128rpx;
|
||||
margin-top: 52rpx;
|
||||
height: 104rpx;
|
||||
margin-top: 26rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reset-submit__skin {
|
||||
position: absolute;
|
||||
.reset-submit__skin,
|
||||
.success-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.reset-submit__content { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 35rpx; letter-spacing: 6rpx; }
|
||||
.reset-tip { display: block; margin-top: 22rpx; color: #806c58; font-size: 22rpx; text-align: center; }
|
||||
.login-entry { display: flex; align-items: center; justify-content: center; min-height: 78rpx; color: #6b5a4a; font-size: 24rpx; }
|
||||
.login-entry__link { display: flex; align-items: center; min-height: 78rpx; margin-left: 8rpx; color: #a7160c; }
|
||||
|
||||
.verification-layer,
|
||||
.success-layer {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
padding: 42rpx;
|
||||
background: rgba(35, 18, 10, 0.62);
|
||||
}
|
||||
|
||||
.login-entry__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 82rpx;
|
||||
margin-left: 8rpx;
|
||||
color: #a7160c;
|
||||
.verification-dialog,
|
||||
.success-dialog { position: relative; width: 100%; max-width: 670rpx; min-height: 500rpx; }
|
||||
.verification-dialog__skin,
|
||||
.success-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.verification-dialog__content,
|
||||
.success-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-height: 500rpx; padding: 92rpx 70rpx 64rpx; text-align: center; }
|
||||
.verification-title,
|
||||
.success-title { color: #8f160f; font-family: STSong, SimSun, serif; font-size: 45rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.verification-copy,
|
||||
.success-copy { margin-top: 32rpx; color: #513a28; font-size: 27rpx; line-height: 42rpx; }
|
||||
.verification-note { margin-top: 14rpx; color: #8d7965; font-size: 22rpx; }
|
||||
.verification-actions { display: flex; width: 100%; margin-top: 56rpx; border-top: 1rpx solid #d6bb91; }
|
||||
.verification-action { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 86rpx; color: #73533a; font-size: 27rpx; }
|
||||
.verification-action--primary { border-left: 1rpx solid #d6bb91; color: #a7160c; }
|
||||
.success-mark { display: flex; align-items: center; justify-content: center; width: 82rpx; height: 82rpx; margin-bottom: 20rpx; border: 2rpx solid #a7160c; border-radius: 50%; color: #a7160c; font-size: 48rpx; }
|
||||
.success-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 92rpx; margin-top: 38rpx; overflow: hidden; }
|
||||
.success-action__copy { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 30rpx; letter-spacing: 4rpx; }
|
||||
|
||||
.feedback-toast { position: fixed; z-index: 30; top: calc(40rpx + env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; justify-content: center; min-width: 280rpx; min-height: 80rpx; padding: 0 42rpx; transform: translateX(-50%); }
|
||||
.feedback-toast__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.feedback-toast__copy { position: relative; z-index: 1; color: #5e402b; font-size: 24rpx; }
|
||||
.tap-fade,
|
||||
.button-hover { opacity: 0.72; }
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.reset-content { padding-right: 48rpx; padding-left: 48rpx; }
|
||||
.page-title { font-size: 60rpx; }
|
||||
.input-label { flex-basis: 150rpx; }
|
||||
}
|
||||
</style>
|
||||
|
||||
+146
-322
@@ -1,46 +1,60 @@
|
||||
<!-- 页面编号：A-06；用途：承接登录未完成、失败、受限与授权结果。 -->
|
||||
<!-- 页面编号：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-design-scenery-v1.png" mode="scaleToFill" />
|
||||
<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" />
|
||||
|
||||
<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 class="status-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="status-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<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 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 class="status-details">
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{ currentState.reasonLabel }}</text>
|
||||
<text class="status-detail__value">{{ currentState.reason }}</text>
|
||||
</view>
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{ currentState.impactLabel }}</text>
|
||||
<text class="status-detail__value">{{ currentState.impact }}</text>
|
||||
</view>
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{ currentState.recoveryLabel }}</text>
|
||||
<text class="status-detail__value">{{ currentState.recovery }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</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 class="status-primary" hover-class="button-hover" @click="openRecovery">
|
||||
<image class="status-primary__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="status-primary__copy">查看恢复方式</text>
|
||||
</view>
|
||||
<view class="status-secondary" hover-class="tap-fade" @click="goLogin">返回登录</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="currentState.secondaryLabel" class="status-secondary" hover-class="text-hover" @click="goLogin">
|
||||
{{ currentState.secondaryLabel }}
|
||||
<view v-if="recoveryVisible" class="recovery-layer" @click="closeRecovery">
|
||||
<view class="recovery-dialog" @click.stop>
|
||||
<image class="recovery-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
<view class="recovery-dialog__content">
|
||||
<text class="recovery-title">{{ currentState.recoveryTitle }}</text>
|
||||
<text class="recovery-copy">{{ currentState.recoveryDetail }}</text>
|
||||
<text class="recovery-note">账号恢复服务将在功能阶段接入，当前仅审核页面样式与状态位置。</text>
|
||||
<view class="recovery-action" hover-class="button-hover" @click="closeRecovery">
|
||||
<image class="recovery-action__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="recovery-action__copy">我知道了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -52,320 +66,130 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
|
||||
const status = ref('normal')
|
||||
const status = ref('risk')
|
||||
const recoveryVisible = ref(false)
|
||||
|
||||
// A06 阻断状态的唯一合同；普通登录错误必须留在 A01 就近处理。
|
||||
const statusConfig = {
|
||||
normal: {
|
||||
eyebrow: '登录提示',
|
||||
title: '登录未完成',
|
||||
description: '登录流程尚未完成，请选择一种方式继续。',
|
||||
primaryLabel: '返回登录',
|
||||
action: 'login',
|
||||
secondaryLabel: ''
|
||||
frozen: {
|
||||
eyebrow: '账号冻结',
|
||||
title: '账号已被冻结',
|
||||
description: '当前账号因安全审核暂时无法登录。',
|
||||
reasonLabel: '限制原因',
|
||||
reason: '账号进入人工安全审核',
|
||||
impactLabel: '影响范围',
|
||||
impact: '暂时无法进入家谱及管理资料',
|
||||
recoveryLabel: '恢复方式',
|
||||
recovery: '提交账号申诉并等待审核结果',
|
||||
recoveryTitle: '申请解除冻结',
|
||||
recoveryDetail: '请准备注册手机号与身份说明，提交后由平台进行人工核验。'
|
||||
},
|
||||
failed: {
|
||||
eyebrow: '登录提示',
|
||||
title: '登录失败',
|
||||
description: '当前无法完成登录，请稍后重试或改用其他方式。',
|
||||
primaryLabel: '返回登录',
|
||||
action: 'login',
|
||||
secondaryLabel: ''
|
||||
disabled: {
|
||||
eyebrow: '账号停用',
|
||||
title: '账号已被停用',
|
||||
description: '当前账号处于停用状态，登录入口已关闭。',
|
||||
reasonLabel: '限制原因',
|
||||
reason: '账号已执行停用处理',
|
||||
impactLabel: '影响范围',
|
||||
impact: '无法登录，原有家谱资料不会被删除',
|
||||
recoveryLabel: '恢复方式',
|
||||
recovery: '联系平台核实停用原因与恢复条件',
|
||||
recoveryTitle: '联系平台核实',
|
||||
recoveryDetail: '请提供注册手机号和账号归属信息，平台核实后告知是否可以恢复。'
|
||||
},
|
||||
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: ''
|
||||
risk: {
|
||||
eyebrow: '风险限制',
|
||||
title: '账号存在安全风险',
|
||||
description: '系统检测到异常登录，为保护家谱资料已暂停本次登录。',
|
||||
reasonLabel: '限制原因',
|
||||
reason: '登录环境或操作行为存在异常',
|
||||
impactLabel: '影响范围',
|
||||
impact: '本次登录被阻断，账号资料保持不变',
|
||||
recoveryLabel: '恢复方式',
|
||||
recovery: '完成身份核验后重新登录',
|
||||
recoveryTitle: '完成身份核验',
|
||||
recoveryDetail: '请使用注册手机号完成身份核验；核验通过后可重新尝试登录。'
|
||||
}
|
||||
}
|
||||
|
||||
const currentState = computed(() => statusConfig[status.value])
|
||||
|
||||
const resolveStatus = () => {
|
||||
let requestedStatus = 'normal'
|
||||
|
||||
let requestedStatus = 'risk'
|
||||
if (typeof location !== 'undefined') {
|
||||
const query = new URLSearchParams(location.hash.split('?')[1] || '')
|
||||
requestedStatus = query.get('status') || 'normal'
|
||||
requestedStatus = query.get('status') || 'risk'
|
||||
} else {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
requestedStatus = currentPage?.options?.status || 'normal'
|
||||
requestedStatus = pages[pages.length - 1]?.options?.status || 'risk'
|
||||
}
|
||||
|
||||
status.value = Object.prototype.hasOwnProperty.call(statusConfig, requestedStatus) ? requestedStatus : 'normal'
|
||||
status.value = Object.prototype.hasOwnProperty.call(statusConfig, requestedStatus) ? requestedStatus : 'risk'
|
||||
recoveryVisible.value = false
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
resolveStatus()
|
||||
})
|
||||
onLoad(resolveStatus)
|
||||
onShow(resolveStatus)
|
||||
|
||||
onShow(() => {
|
||||
resolveStatus()
|
||||
})
|
||||
|
||||
const goLogin = () => {
|
||||
uni.navigateTo({ url: '/pages/auth/a01-entry' })
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
const goLogin = () => uni.redirectTo({ url: '/pages/auth/a01-entry' })
|
||||
const openRecovery = () => { recoveryVisible.value = true }
|
||||
const closeRecovery = () => { recoveryVisible.value = false }
|
||||
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%;
|
||||
height: 100dvh;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #f7f0e4;
|
||||
color: #493323;
|
||||
}
|
||||
|
||||
.paper-background { opacity: 0.96; }
|
||||
.scenery-background { opacity: 0.76; }
|
||||
.page-canvas { position: relative; box-sizing: border-box; width: 100%; min-height: calc(1665rpx + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
|
||||
.page-backdrop { position: absolute; inset: 0 0 auto; width: 100%; height: 1665rpx; pointer-events: none; }
|
||||
.brand-seal { position: absolute; z-index: 1; top: 64rpx; left: 50%; width: 220rpx; height: 264rpx; transform: translateX(-50%); pointer-events: none; }
|
||||
.status-content { position: relative; z-index: 2; box-sizing: border-box; padding: 430rpx 64rpx 46rpx; }
|
||||
.page-heading { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 154rpx; }
|
||||
.back-button { position: absolute; top: 10rpx; left: 0; display: flex; align-items: center; justify-content: center; width: 88rpx; height: 88rpx; }
|
||||
.back-button__icon { width: 42rpx; height: 42rpx; transform: scaleX(-1); }
|
||||
.page-title { color: #9f170f; font-family: STSong, SimSun, serif; font-size: 66rpx; font-weight: 700; letter-spacing: 7rpx; }
|
||||
.page-subtitle { margin-top: 12rpx; color: #806c58; font-size: 25rpx; letter-spacing: 1rpx; }
|
||||
.status-divider { width: 154rpx; height: 34rpx; margin-top: 10rpx; }
|
||||
|
||||
.auth-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
|
||||
.status-body { display: flex; flex-direction: column; align-items: center; padding-top: 6rpx; text-align: center; }
|
||||
.status-icon { width: 94rpx; height: 94rpx; opacity: 0.82; }
|
||||
.status-eyebrow { margin-top: 10rpx; color: #a7160c; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.status-title { margin-top: 10rpx; color: #3f2c1d; font-family: STSong, SimSun, serif; font-size: 40rpx; font-weight: 700; letter-spacing: 3rpx; }
|
||||
.status-description { box-sizing: border-box; width: 100%; margin-top: 12rpx; color: #786654; font-size: 24rpx; line-height: 1.65; }
|
||||
.status-details { width: 100%; margin-top: 22rpx; border-top: 1rpx solid #cfaa70; }
|
||||
.status-detail { display: flex; box-sizing: border-box; min-height: 78rpx; padding: 16rpx 0; border-bottom: 1rpx solid rgba(207, 170, 112, 0.72); text-align: left; }
|
||||
.status-detail__label { flex: 0 0 116rpx; color: #9f170f; font-size: 23rpx; }
|
||||
.status-detail__value { flex: 1; color: #5f4a38; font-size: 23rpx; line-height: 34rpx; }
|
||||
|
||||
.status-primary { position: relative; display: flex; align-items: center; justify-content: center; height: 104rpx; margin-top: 28rpx; overflow: hidden; }
|
||||
.status-primary__skin,
|
||||
.recovery-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.status-primary__copy { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 34rpx; letter-spacing: 5rpx; }
|
||||
.status-secondary { display: flex; align-items: center; justify-content: center; min-height: 82rpx; color: #a7160c; font-size: 24rpx; }
|
||||
|
||||
.recovery-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); }
|
||||
.recovery-dialog { position: relative; width: 100%; max-width: 670rpx; min-height: 560rpx; }
|
||||
.recovery-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.recovery-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-height: 560rpx; padding: 92rpx 70rpx 64rpx; text-align: center; }
|
||||
.recovery-title { color: #8f160f; font-family: STSong, SimSun, serif; font-size: 43rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.recovery-copy { margin-top: 32rpx; color: #513a28; font-size: 27rpx; line-height: 43rpx; }
|
||||
.recovery-note { margin-top: 18rpx; color: #8d7965; font-size: 21rpx; line-height: 34rpx; }
|
||||
.recovery-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 92rpx; margin-top: 38rpx; overflow: hidden; }
|
||||
.recovery-action__copy { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 30rpx; letter-spacing: 4rpx; }
|
||||
.tap-fade,
|
||||
.button-hover { opacity: 0.72; }
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.status-content { padding-right: 48rpx; padding-left: 48rpx; }
|
||||
.page-title { font-size: 60rpx; }
|
||||
.status-detail__label { flex-basis: 108rpx; }
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!-- 页面编号：G-01；用途：我的家谱列表；视觉基准已由用户验收，地基迁移不得改变可见效果。 -->
|
||||
<!-- 页面编号：G-01；用途：我的家谱列表与首次分流；本轮仍待用户重新审核。 -->
|
||||
<template>
|
||||
<view class="page-shell genealogy-index">
|
||||
<image
|
||||
@@ -25,8 +25,20 @@
|
||||
<text class="state-copy">请稍候，家族记忆正在归卷。</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="hasError" class="state-panel state-panel--error">
|
||||
<image class="state-panel__skin" src="/static/assets/modules/genealogy/opaque/g01-empty-panel.png" mode="scaleToFill" />
|
||||
<view class="state-panel__content">
|
||||
<text class="state-title">暂时无法读取家谱</text>
|
||||
<text class="state-copy">网络或服务暂不可用，请稍后重新查看。</text>
|
||||
<view class="state-retry" hover-class="action-hover" @click="retryLoad">
|
||||
<image class="state-retry__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="state-retry__copy">重新加载</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-else-if="hasGenealogies">
|
||||
<view class="current-slip" @click="openGenealogy(currentGenealogy)">
|
||||
<view class="current-slip" @click="openSwitcher">
|
||||
<image
|
||||
class="current-frame"
|
||||
src="/static/assets/modules/genealogy/transparent/current-slip-frame.png"
|
||||
@@ -42,6 +54,7 @@
|
||||
<text class="current-seal-title">家谱</text>
|
||||
</view>
|
||||
<text class="current-name">{{ currentGenealogy.name }}</text>
|
||||
<text class="current-switch-copy">切换</text>
|
||||
</view>
|
||||
<view class="current-info-divider"></view>
|
||||
<view class="current-meta">
|
||||
@@ -118,7 +131,28 @@
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="create-action" @click="createGenealogy">
|
||||
<view class="list-section application-section">
|
||||
<view class="section-heading"><text>加入申请</text></view>
|
||||
<view
|
||||
v-for="item in applicationRecords"
|
||||
:key="item.id"
|
||||
class="application-record"
|
||||
hover-class="action-hover"
|
||||
@click="openApplication(item)"
|
||||
>
|
||||
<image class="application-record__skin" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
|
||||
<view class="application-record__main">
|
||||
<view class="application-record__title-row">
|
||||
<text class="application-record__name">{{ item.name }}</text>
|
||||
<text class="application-record__status" :class="`application-record__status--${item.tone}`">{{ item.statusLabel }}</text>
|
||||
</view>
|
||||
<text class="application-record__copy">{{ item.description }}</text>
|
||||
</view>
|
||||
<image class="application-record__chevron" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="create-action" @click="openAddDialog">
|
||||
<image
|
||||
class="create-cloud"
|
||||
src="/static/assets/modules/genealogy/transparent/create-cloud.png"
|
||||
@@ -129,7 +163,7 @@
|
||||
src="/static/assets/modules/genealogy/transparent/add.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>新建家谱</text>
|
||||
<text>添加家谱</text>
|
||||
<image
|
||||
class="create-cloud create-cloud--right"
|
||||
src="/static/assets/modules/genealogy/transparent/create-cloud.png"
|
||||
@@ -156,36 +190,12 @@
|
||||
<text class="empty-seal__text">家谱</text>
|
||||
</view>
|
||||
<text class="empty-title">还没有加入任何家谱</text>
|
||||
<text class="empty-copy">先为自己的家族立一部谱，或搜索家谱申请加入</text>
|
||||
<text class="empty-copy">先搜索家族是否已有家谱，再选择加入或创建</text>
|
||||
<image
|
||||
class="empty-divider"
|
||||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view
|
||||
class="empty-create-action"
|
||||
hover-class="action-hover"
|
||||
@click="createGenealogy"
|
||||
>
|
||||
<image
|
||||
class="empty-create-action__skin"
|
||||
src="/static/assets/foundation/opaque/a01-primary-button.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="empty-create-action__content">
|
||||
<image
|
||||
class="empty-create-action__icon"
|
||||
src="/static/assets/modules/genealogy/transparent/add.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>新建家谱</text>
|
||||
<image
|
||||
class="empty-create-action__cloud"
|
||||
src="/static/assets/modules/genealogy/transparent/create-cloud.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="empty-search-action"
|
||||
hover-class="action-hover"
|
||||
@@ -193,16 +203,75 @@
|
||||
>
|
||||
<image
|
||||
class="empty-search-action__skin"
|
||||
src="/static/assets/foundation/opaque/a01-primary-button.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="empty-search-action__copy empty-search-action__copy--primary">搜索家谱</text>
|
||||
</view>
|
||||
<view
|
||||
class="empty-invite-action"
|
||||
hover-class="action-hover"
|
||||
@click="joinByInvite"
|
||||
>
|
||||
<image
|
||||
class="empty-invite-action__skin"
|
||||
src="/static/assets/foundation/opaque/a01-secondary-button.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="empty-search-action__copy">搜索并申请加入</text>
|
||||
<text class="empty-invite-action__copy">邀请码加入</text>
|
||||
</view>
|
||||
<view class="empty-create-action" hover-class="action-hover" @click="createGenealogy">
|
||||
<text class="empty-create-action__copy">创建家谱</text>
|
||||
</view>
|
||||
<text class="empty-create-note">确认没有现有家谱后再创建，避免重复建谱</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="addDialogVisible" class="add-dialog-layer" @click="closeAddDialog">
|
||||
<view class="add-dialog" @click.stop>
|
||||
<image class="add-dialog__skin" src="/static/assets/modules/genealogy/opaque/g01-empty-panel.png" mode="scaleToFill" />
|
||||
<view class="add-dialog__content">
|
||||
<text class="dialog-title">添加家谱</text>
|
||||
<text class="dialog-copy">建议先搜索已有家谱，避免重复创建</text>
|
||||
<view class="dialog-primary" @click="applyToJoin">
|
||||
<image class="dialog-action__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text class="dialog-primary__copy">搜索家谱</text>
|
||||
</view>
|
||||
<view class="dialog-secondary" @click="joinByInvite">
|
||||
<image class="dialog-action__skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text>邀请码加入</text>
|
||||
</view>
|
||||
<view class="dialog-create" @click="createGenealogy">确认没有现有家谱，继续创建</view>
|
||||
<view class="dialog-close" @click="closeAddDialog">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="switcherVisible" class="genealogy-switcher-layer" @click="closeSwitcher">
|
||||
<view class="genealogy-switcher" @click.stop>
|
||||
<image class="genealogy-switcher__skin" src="/static/assets/modules/genealogy/opaque/g01-empty-panel.png" mode="scaleToFill" />
|
||||
<view class="genealogy-switcher__content">
|
||||
<text class="dialog-title">切换当前家谱</text>
|
||||
<view
|
||||
v-for="item in availableGenealogies"
|
||||
:key="item.id"
|
||||
class="switcher-item"
|
||||
:class="{ 'switcher-item--active': item.id === selectedGenealogyId }"
|
||||
@click="selectGenealogy(item)"
|
||||
>
|
||||
<view>
|
||||
<text class="switcher-item__name">{{ item.name }}</text>
|
||||
<text class="switcher-item__meta">{{ item.location }} · {{ item.memberCount }} 位成员</text>
|
||||
</view>
|
||||
<text class="switcher-item__state">{{ item.id === selectedGenealogyId ? '当前' : '选择' }}</text>
|
||||
</view>
|
||||
<view class="dialog-close" @click="closeSwitcher">关闭</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<AppTabbar active="genealogy" />
|
||||
</view>
|
||||
</template>
|
||||
@@ -216,22 +285,29 @@ import PageHeader from "@/components/PageHeader.vue";
|
||||
import { genealogies, notifications } from "@/data/mock.js";
|
||||
|
||||
const isLoading = ref(false);
|
||||
const hasError = ref(false);
|
||||
const list = ref(genealogies);
|
||||
const forceEmptyState = ref(false);
|
||||
const addDialogVisible = ref(false);
|
||||
const switcherVisible = ref(false);
|
||||
const selectedGenealogyId = ref(genealogies[0]?.id || null);
|
||||
|
||||
const isEmptyStateRoute = () => {
|
||||
const readPresentationState = () => {
|
||||
if (typeof location !== "undefined") {
|
||||
const query = new URLSearchParams(location.hash.split("?")[1] || "");
|
||||
return query.get("state") === "empty";
|
||||
return query.get("state") || "default";
|
||||
}
|
||||
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
return currentPage?.options?.state === "empty";
|
||||
return currentPage?.options?.state || "default";
|
||||
};
|
||||
|
||||
const syncEmptyStateFromRoute = () => {
|
||||
forceEmptyState.value = isEmptyStateRoute();
|
||||
const presentationState = readPresentationState();
|
||||
forceEmptyState.value = presentationState === "empty";
|
||||
isLoading.value = presentationState === "loading";
|
||||
hasError.value = presentationState === "error";
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
@@ -252,7 +328,17 @@ const createdGenealogies = computed(() =>
|
||||
const joinedGenealogies = computed(() =>
|
||||
list.value.filter((item, index) => index > 0),
|
||||
);
|
||||
const currentGenealogy = computed(() => list.value[0]);
|
||||
const availableGenealogies = computed(() => list.value);
|
||||
const currentGenealogy = computed(() =>
|
||||
availableGenealogies.value.find((item) => item.id === selectedGenealogyId.value) || availableGenealogies.value[0],
|
||||
);
|
||||
|
||||
// 仅用于页面样式阶段覆盖加入申请的关键状态，不作为接口数据。
|
||||
const applicationRecords = [
|
||||
{ id: "pending", name: "汤氏南阳宗谱", statusLabel: "审核中", tone: "pending", description: "申请已提交，等待管理员审核" },
|
||||
{ id: "rejected", name: "汤氏清河家谱", statusLabel: "被拒绝", tone: "rejected", description: "可修改关系说明后重新申请" },
|
||||
{ id: "removed", name: "汤氏汝南支谱", statusLabel: "已退出", tone: "muted", description: "如需恢复成员身份，可重新申请加入" },
|
||||
];
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
@@ -282,9 +368,27 @@ const openGenealogy = (genealogy) =>
|
||||
const createGenealogy = () =>
|
||||
uni.navigateTo({ url: "/pages/genealogy/g03-create-genealogy" });
|
||||
const applyToJoin = () => uni.navigateTo({ url: "/pages/genealogy/g06-search-genealogies" });
|
||||
const joinByInvite = () => uni.navigateTo({ url: "/pages/genealogy/g06-search-genealogies?mode=invite" });
|
||||
const toNotifications = () =>
|
||||
uni.navigateTo({ url: "/pages/notification/n01-message-center" });
|
||||
|
||||
const openAddDialog = () => { addDialogVisible.value = true; };
|
||||
const closeAddDialog = () => { addDialogVisible.value = false; };
|
||||
const openSwitcher = () => { switcherVisible.value = true; };
|
||||
const closeSwitcher = () => { switcherVisible.value = false; };
|
||||
const selectGenealogy = (genealogy) => {
|
||||
selectedGenealogyId.value = genealogy.id;
|
||||
closeSwitcher();
|
||||
};
|
||||
const openApplication = (record) => {
|
||||
const statusQuery = record.id === "pending" ? "pending" : record.id;
|
||||
uni.navigateTo({ url: `/pages/genealogy/g09-my-applications?status=${statusQuery}` });
|
||||
};
|
||||
const retryLoad = () => {
|
||||
hasError.value = false;
|
||||
isLoading.value = false;
|
||||
};
|
||||
|
||||
const openShortcut = (key) => {
|
||||
const paths = {
|
||||
tree: "/pages/tree/t01-tree-overview",
|
||||
@@ -405,6 +509,12 @@ const openShortcut = (key) => {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.current-switch-copy {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.current-info-divider {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -512,6 +622,24 @@ const openShortcut = (key) => {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.application-record {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 138rpx;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx 26rpx;
|
||||
}
|
||||
.application-record__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-record__main { position: relative; z-index: 1; min-width: 0; flex: 1; }
|
||||
.application-record__title-row { display: flex; align-items: center; justify-content: space-between; }
|
||||
.application-record__name { overflow: hidden; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 32rpx; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.application-record__status { flex: 0 0 auto; margin-left: 16rpx; color: #9a641f; font-size: 23rpx; }
|
||||
.application-record__status--rejected { color: #a7160c; }
|
||||
.application-record__status--muted { color: $ink-muted; }
|
||||
.application-record__copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 23rpx; }
|
||||
.application-record__chevron { position: relative; z-index: 1; width: 32rpx; height: 32rpx; margin-left: 14rpx; }
|
||||
|
||||
.create-action {
|
||||
display: flex;
|
||||
min-height: 96rpx;
|
||||
@@ -558,16 +686,15 @@ const openShortcut = (key) => {
|
||||
}
|
||||
|
||||
.state-panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 540rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 42rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid $gold-soft;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 249, 238, 0.76);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -676,8 +803,8 @@ const openShortcut = (key) => {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.empty-create-action,
|
||||
.empty-search-action {
|
||||
.empty-search-action,
|
||||
.empty-invite-action {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 468rpx;
|
||||
@@ -687,47 +814,24 @@ const openShortcut = (key) => {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty-create-action {
|
||||
.empty-search-action {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.empty-search-action {
|
||||
margin-top: 18rpx;
|
||||
.empty-invite-action {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.empty-create-action__skin,
|
||||
.empty-search-action__skin {
|
||||
.empty-search-action__skin,
|
||||
.empty-invite-action__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-create-action__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff9ec;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.empty-create-action__icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.empty-create-action__cloud {
|
||||
width: 46rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.empty-search-action__copy {
|
||||
.empty-search-action__copy,
|
||||
.empty-invite-action__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #7b4e24;
|
||||
@@ -736,6 +840,44 @@ const openShortcut = (key) => {
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.empty-search-action__copy--primary { color: #fff9ec; }
|
||||
.empty-create-action { display: flex; align-items: center; justify-content: center; min-height: 64rpx; margin-top: 8rpx; color: $brand-red; }
|
||||
.empty-create-action__copy { font-family: "STKaiti", "KaiTi", serif; font-size: 27rpx; text-decoration: underline; text-underline-offset: 8rpx; }
|
||||
.empty-create-note { display: block; color: $ink-muted; font-size: 20rpx; line-height: 30rpx; }
|
||||
|
||||
.state-panel__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.state-panel__content { position: relative; z-index: 1; display: flex; min-height: 540rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; box-sizing: border-box; }
|
||||
.state-retry { position: relative; display: flex; width: 360rpx; height: 96rpx; align-items: center; justify-content: center; margin-top: 30rpx; overflow: hidden; }
|
||||
.state-retry__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.state-retry__copy { position: relative; z-index: 1; color: #fff9ec; font-family: "STKaiti", "KaiTi", serif; font-size: 29rpx; }
|
||||
|
||||
.add-dialog-layer,
|
||||
.genealogy-switcher-layer { position: fixed; z-index: 40; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 40rpx; background: rgba(34, 20, 12, 0.58); }
|
||||
.add-dialog,
|
||||
.genealogy-switcher { position: relative; width: 100%; max-width: 670rpx; min-height: 720rpx; }
|
||||
.add-dialog__skin,
|
||||
.genealogy-switcher__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.add-dialog__content,
|
||||
.genealogy-switcher__content { position: relative; z-index: 1; display: flex; min-height: 720rpx; flex-direction: column; align-items: center; box-sizing: border-box; padding: 78rpx 58rpx 50rpx; }
|
||||
.dialog-title { color: $brand-red; font-family: "STKaiti", "KaiTi", serif; font-size: 42rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.dialog-copy { margin-top: 18rpx; color: $ink-muted; font-size: 23rpx; }
|
||||
.dialog-primary,
|
||||
.dialog-secondary { position: relative; display: flex; width: 100%; height: 98rpx; align-items: center; justify-content: center; overflow: hidden; font-family: "STKaiti", "KaiTi", serif; font-size: 29rpx; }
|
||||
.dialog-primary { margin-top: 42rpx; color: #fff9ec; }
|
||||
.dialog-secondary { margin-top: 16rpx; color: #7b4e24; }
|
||||
.dialog-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.dialog-primary__copy,
|
||||
.dialog-secondary > text { position: relative; z-index: 1; }
|
||||
.dialog-create { display: flex; min-height: 76rpx; align-items: center; margin-top: 8rpx; color: $brand-red; font-size: 23rpx; }
|
||||
.dialog-close { display: flex; min-height: 72rpx; align-items: center; justify-content: center; margin-top: auto; color: $ink-muted; font-size: 24rpx; }
|
||||
.switcher-item { display: flex; width: 100%; min-height: 108rpx; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 18rpx 12rpx; border-bottom: 1rpx solid rgba(181, 138, 75, 0.42); }
|
||||
.switcher-item:first-of-type { margin-top: 28rpx; }
|
||||
.switcher-item__name,
|
||||
.switcher-item__meta { display: block; }
|
||||
.switcher-item__name { color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 31rpx; font-weight: 700; }
|
||||
.switcher-item__meta { margin-top: 6rpx; color: $ink-muted; font-size: 21rpx; }
|
||||
.switcher-item__state { color: $brand-red; font-size: 23rpx; }
|
||||
.switcher-item--active .switcher-item__name { color: $brand-red; }
|
||||
|
||||
.action-hover {
|
||||
opacity: 0.82;
|
||||
|
||||
@@ -49,27 +49,34 @@
|
||||
<view class="flow-fields">
|
||||
<view class="field-row">
|
||||
<text>姓氏</text>
|
||||
<input v-model="createForm.surname" maxlength="4" placeholder="如：汤" placeholder-class="placeholder" />
|
||||
<input v-model="createForm.surname" maxlength="4" placeholder="如：汤" placeholder-class="placeholder" @input="clearFieldError('surname')" />
|
||||
</view>
|
||||
<text v-if="fieldErrors.surname" class="field-error">{{ fieldErrors.surname }}</text>
|
||||
<view class="field-row">
|
||||
<text>谱名</text>
|
||||
<input v-model="createForm.name" maxlength="24" placeholder="如：汤氏家谱" placeholder-class="placeholder" />
|
||||
<input v-model="createForm.name" maxlength="24" placeholder="如：汤氏家谱" placeholder-class="placeholder" @input="clearFieldError('name')" />
|
||||
</view>
|
||||
<text v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</text>
|
||||
<view class="field-row">
|
||||
<text>堂号</text>
|
||||
<input v-model="createForm.hall" maxlength="12" placeholder="选填" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text>所在地</text>
|
||||
<input v-model="createForm.location" maxlength="30" placeholder="请选择或输入" placeholder-class="placeholder" />
|
||||
<input v-model="createForm.location" maxlength="30" placeholder="请选择或输入" placeholder-class="placeholder" @input="clearFieldError('location')" />
|
||||
</view>
|
||||
<text v-if="fieldErrors.location" class="field-error">{{ fieldErrors.location }}</text>
|
||||
</view>
|
||||
|
||||
<view class="flow-rule">
|
||||
<text class="flow-rule__label">访问规则</text>
|
||||
<text class="flow-rule__value">默认仅成员可见</text>
|
||||
<view class="flow-rule__options">
|
||||
<view class="flow-rule__option" :class="{ 'flow-rule__option--active': createForm.visibility === 'MEMBER_ONLY' }" @click="createForm.visibility = 'MEMBER_ONLY'">仅成员可见</view>
|
||||
<view class="flow-rule__option" :class="{ 'flow-rule__option--active': createForm.visibility === 'SEARCHABLE' }" @click="createForm.visibility = 'SEARCHABLE'">可搜索申请</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="flow-rule__note">保护族人资料；创建后可在家谱设置中开放搜索与申请加入。</text>
|
||||
<text v-if="createState === 'error'" class="flow-error">创建样式模拟失败，请检查信息后重试。</text>
|
||||
|
||||
<view class="flow-primary-action" hover-class="action-hover" @click="submitCreate">
|
||||
<image
|
||||
@@ -77,7 +84,7 @@
|
||||
src="/static/assets/foundation/opaque/a01-primary-button.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="flow-primary-action__copy">创建并录入首代</text>
|
||||
<text class="flow-primary-action__copy">{{ createState === 'submitting' ? '正在创建…' : '创建并录入首代' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -89,8 +96,9 @@
|
||||
<view class="flow-fields">
|
||||
<view class="field-row">
|
||||
<text>姓名</text>
|
||||
<input v-model="ancestorForm.personName" maxlength="20" placeholder="请输入首代姓名" placeholder-class="placeholder" />
|
||||
<input v-model="ancestorForm.personName" maxlength="20" placeholder="请输入首代姓名" placeholder-class="placeholder" @input="clearFieldError('personName')" />
|
||||
</view>
|
||||
<text v-if="fieldErrors.personName" class="field-error">{{ fieldErrors.personName }}</text>
|
||||
<view class="field-row">
|
||||
<text>世代</text>
|
||||
<text class="fixed-value">第一世</text>
|
||||
@@ -100,6 +108,7 @@
|
||||
<input v-model="ancestorForm.birthDate" placeholder="如：1940年" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="ancestorState === 'error'" class="flow-error">首代人物保存失败，请稍后重试。</text>
|
||||
|
||||
<view class="intro-field">
|
||||
<text>生平简述</text>
|
||||
@@ -112,7 +121,40 @@
|
||||
src="/static/assets/foundation/opaque/a01-primary-button.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="flow-primary-action__copy">保存并查看世系树</text>
|
||||
<text class="flow-primary-action__copy">{{ ancestorState === 'submitting' ? '正在保存…' : '保存并进入家谱' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="duplicateReminderVisible" class="duplicate-reminder-layer" @click="closeDuplicateReminder">
|
||||
<view class="duplicate-reminder" @click.stop>
|
||||
<image class="duplicate-reminder__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
<view class="duplicate-reminder__content">
|
||||
<text class="duplicate-reminder__title">先确认是否已有家谱</text>
|
||||
<text class="duplicate-reminder__copy">同一家族可能已经建谱。建议先搜索谱名、地区和堂号，避免重复创建。</text>
|
||||
<view class="duplicate-reminder__search" @click="searchExistingGenealogy">
|
||||
<image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text>先搜索已有家谱</text>
|
||||
</view>
|
||||
<view class="duplicate-reminder__confirm" @click="confirmCreate">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>确认没有，继续创建</text>
|
||||
</view>
|
||||
<view class="duplicate-reminder__cancel" @click="closeDuplicateReminder">返回修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="ancestorState === 'success'" class="flow-success-layer">
|
||||
<view class="flow-success-dialog">
|
||||
<image class="flow-success-dialog__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
<view class="flow-success-dialog__content">
|
||||
<text class="flow-success-dialog__title">家谱创建完成</text>
|
||||
<text class="flow-success-dialog__copy">首代人物已保存，接下来进入家谱总览继续完善资料。</text>
|
||||
<view class="flow-success-dialog__action" @click="enterOverview">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>进入家谱总览</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -123,12 +165,15 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { appApi } from "@/utils/api.js";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
|
||||
const currentStep = ref("create");
|
||||
const genealogyId = ref("");
|
||||
const isSubmitting = ref(false);
|
||||
const createState = ref("form");
|
||||
const ancestorState = ref("form");
|
||||
const duplicateReminderVisible = ref(false);
|
||||
const fieldErrors = reactive({ surname: "", name: "", location: "", personName: "" });
|
||||
let submitTimer = null;
|
||||
const createForm = reactive({
|
||||
surname: "",
|
||||
name: "",
|
||||
@@ -164,11 +209,7 @@ const syncFlowFromRoute = () => {
|
||||
: query.step === "ancestor";
|
||||
const routeGenealogyId = query.get ? query.get("genealogyId") : query.genealogyId;
|
||||
currentStep.value = isAncestorRoute ? "ancestor" : "create";
|
||||
genealogyId.value = routeGenealogyId || (isAncestorStep.value ? genealogyContext.getCurrentGenealogyId() : "");
|
||||
|
||||
if (isAncestorStep.value && genealogyId.value) {
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value);
|
||||
}
|
||||
genealogyId.value = routeGenealogyId || (isAncestorStep.value ? "local-created-genealogy" : "");
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
@@ -186,6 +227,7 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (submitTimer) clearTimeout(submitTimer);
|
||||
if (typeof window !== "undefined") {
|
||||
window.removeEventListener("hashchange", syncFlowFromRoute);
|
||||
}
|
||||
@@ -200,52 +242,66 @@ const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const submitCreate = async () => {
|
||||
if (!createForm.surname.trim() || !createForm.name.trim()) {
|
||||
uni.showToast({ title: "请填写姓氏和谱名", icon: "none" });
|
||||
return;
|
||||
}
|
||||
const clearFieldError = (field) => { fieldErrors[field] = ""; };
|
||||
|
||||
const created = await appApi.createGenealogy({ ...createForm });
|
||||
genealogyContext.setCurrentGenealogyId(created.id);
|
||||
uni.redirectTo({
|
||||
url: `/pages/genealogy/g03-create-genealogy?step=ancestor&genealogyId=${created.id}`,
|
||||
});
|
||||
const validateCreateForm = () => {
|
||||
fieldErrors.surname = createForm.surname.trim() ? "" : "请填写姓氏";
|
||||
fieldErrors.name = createForm.name.trim() ? "" : "请填写谱名";
|
||||
fieldErrors.location = createForm.location.trim() ? "" : "请填写所在地";
|
||||
return !fieldErrors.surname && !fieldErrors.name && !fieldErrors.location;
|
||||
};
|
||||
|
||||
const submitAncestor = async () => {
|
||||
const submitCreate = () => {
|
||||
if (isSubmitting.value) return;
|
||||
createState.value = "form";
|
||||
if (!validateCreateForm()) return;
|
||||
duplicateReminderVisible.value = true;
|
||||
};
|
||||
|
||||
const closeDuplicateReminder = () => { duplicateReminderVisible.value = false; };
|
||||
const searchExistingGenealogy = () => uni.navigateTo({ url: "/pages/genealogy/g06-search-genealogies" });
|
||||
const confirmCreate = () => {
|
||||
closeDuplicateReminder();
|
||||
isSubmitting.value = true;
|
||||
createState.value = "submitting";
|
||||
submitTimer = setTimeout(() => {
|
||||
isSubmitting.value = false;
|
||||
if (createForm.name.trim() === "失败") {
|
||||
createState.value = "error";
|
||||
return;
|
||||
}
|
||||
const createdId = "local-created-genealogy";
|
||||
uni.redirectTo({ url: `/pages/genealogy/g03-create-genealogy?step=ancestor&genealogyId=${createdId}` });
|
||||
}, 320);
|
||||
};
|
||||
|
||||
const submitAncestor = () => {
|
||||
if (isSubmitting.value) return;
|
||||
if (!genealogyId.value) {
|
||||
uni.showToast({ title: "未找到当前家谱", icon: "none" });
|
||||
ancestorState.value = "error";
|
||||
return;
|
||||
}
|
||||
if (!ancestorForm.personName.trim()) {
|
||||
uni.showToast({ title: "请填写首代姓名", icon: "none" });
|
||||
fieldErrors.personName = "请填写首代姓名";
|
||||
return;
|
||||
}
|
||||
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
const person = await appApi.createPerson(genealogyId.value, {
|
||||
...ancestorForm,
|
||||
personName: ancestorForm.personName.trim(),
|
||||
});
|
||||
uni.redirectTo({
|
||||
url: `/pages/tree/t01-tree-overview?genealogyId=${genealogyId.value}&selectedId=${person.id}`,
|
||||
});
|
||||
} catch (error) {
|
||||
uni.showToast({ title: error.message || "保存失败，请稍后重试", icon: "none" });
|
||||
} finally {
|
||||
ancestorState.value = "submitting";
|
||||
submitTimer = setTimeout(() => {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
ancestorState.value = ancestorForm.personName.trim() === "失败" ? "error" : "success";
|
||||
}, 320);
|
||||
};
|
||||
|
||||
const enterOverview = () => uni.redirectTo({ url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${genealogyId.value}` });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flow-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
background: #f9f6ef;
|
||||
}
|
||||
|
||||
@@ -338,7 +394,7 @@ const submitAncestor = async () => {
|
||||
|
||||
.create-flow-panel {
|
||||
position: relative;
|
||||
min-height: 876rpx;
|
||||
min-height: 1000rpx;
|
||||
}
|
||||
|
||||
.create-flow-panel__skin {
|
||||
@@ -353,7 +409,7 @@ const submitAncestor = async () => {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-height: 876rpx;
|
||||
min-height: 1000rpx;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 48rpx 50rpx 42rpx;
|
||||
@@ -420,6 +476,7 @@ const submitAncestor = async () => {
|
||||
.placeholder {
|
||||
color: #b7aa97;
|
||||
}
|
||||
.field-error { display: block; margin-top: 3rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
|
||||
|
||||
.fixed-value {
|
||||
color: #a33b2b !important;
|
||||
@@ -439,14 +496,14 @@ const submitAncestor = async () => {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.flow-rule__value {
|
||||
color: #a33b2b;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.flow-rule__options { display: flex; gap: 12rpx; }
|
||||
.flow-rule__option { display: flex; min-height: 54rpx; align-items: center; padding: 0 10rpx; color: #786654; font-size: 21rpx; }
|
||||
.flow-rule__option--active { color: $brand-red; font-weight: 700; }
|
||||
|
||||
.flow-rule__note {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.flow-error { display: block; margin-top: 10rpx; color: $brand-red; font-size: 21rpx; text-align: center; }
|
||||
|
||||
.intro-field {
|
||||
margin-top: 18rpx;
|
||||
@@ -501,4 +558,30 @@ const submitAncestor = async () => {
|
||||
.action-hover {
|
||||
opacity: 0.82;
|
||||
}
|
||||
.duplicate-reminder-layer,
|
||||
.flow-success-layer { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 42rpx; background: rgba(34, 20, 12, .6); }
|
||||
.duplicate-reminder,
|
||||
.flow-success-dialog { position: relative; width: 100%; max-width: 670rpx; min-height: 650rpx; }
|
||||
.duplicate-reminder__skin,
|
||||
.flow-success-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.duplicate-reminder__content,
|
||||
.flow-success-dialog__content { position: relative; z-index: 1; display: flex; min-height: 650rpx; flex-direction: column; align-items: center; box-sizing: border-box; padding: 92rpx 64rpx 56rpx; text-align: center; }
|
||||
.duplicate-reminder__title,
|
||||
.flow-success-dialog__title { color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 39rpx; font-weight: 700; }
|
||||
.duplicate-reminder__copy,
|
||||
.flow-success-dialog__copy { margin-top: 24rpx; color: $ink-muted; font-size: 24rpx; line-height: 40rpx; }
|
||||
.duplicate-reminder__search,
|
||||
.duplicate-reminder__confirm,
|
||||
.flow-success-dialog__action { position: relative; display: flex; width: 100%; height: 92rpx; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.duplicate-reminder__search { margin-top: 38rpx; }
|
||||
.duplicate-reminder__confirm { margin-top: 14rpx; }
|
||||
.duplicate-reminder__search image,
|
||||
.duplicate-reminder__confirm image,
|
||||
.flow-success-dialog__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.duplicate-reminder__search text,
|
||||
.duplicate-reminder__confirm text,
|
||||
.flow-success-dialog__action text { position: relative; z-index: 1; color: #fff9ec; font-size: 25rpx; font-weight: 700; }
|
||||
.duplicate-reminder__search text { color: #7b4e24; }
|
||||
.duplicate-reminder__cancel { display: flex; min-height: 68rpx; align-items: center; margin-top: auto; color: $ink-muted; font-size: 23rpx; }
|
||||
.flow-success-dialog__action { margin-top: 44rpx; }
|
||||
</style>
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
<image class="overview-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="aspectFill" />
|
||||
<image class="overview-page__footer" src="/static/assets/foundation/transparent/footer-mountain-bamboo.png" mode="widthFix" />
|
||||
<view class="overview-page__header">
|
||||
<PageHeader title="家谱总览" :action="overviewState === 'ready' ? '管理' : ''" @action="toSettings" />
|
||||
<PageHeader :title="viewMode === 'public' ? '家谱公开预览' : '家谱总览'" :action="overviewState === 'ready' && viewMode === 'member' && accessRole === 'owner' ? '管理' : ''" @action="toSettings" />
|
||||
</view>
|
||||
|
||||
<view class="overview-surface">
|
||||
<image class="overview-surface__skin" src="/static/assets/modules/genealogy/opaque/g05-overview-surface.png" mode="scaleToFill" />
|
||||
|
||||
<template v-if="overviewState === 'ready' && genealogy">
|
||||
<template v-if="overviewState === 'ready' && genealogy && viewMode === 'member'">
|
||||
<view class="overview-ready">
|
||||
<view class="overview-hero">
|
||||
<text class="overview-hero__kicker">{{ genealogy.hall || '堂号待补' }} · {{ genealogy.location || '所在地待补' }}</text>
|
||||
@@ -23,17 +23,17 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="overview-actions">
|
||||
<view class="overview-actions" :class="{ 'overview-actions--member': accessRole === 'member' }">
|
||||
<view class="overview-action overview-action--tree" @click="toTree">
|
||||
<text class="overview-action__title">世系树</text><text>查看家脉关系</text>
|
||||
</view>
|
||||
<view class="overview-action overview-action--ancestor" @click="toFirstPerson">
|
||||
<view v-if="accessRole === 'owner'" class="overview-action overview-action--ancestor" @click="toFirstPerson">
|
||||
<text class="overview-action__title">录入族人</text><text>从首代开始完善</text>
|
||||
</view>
|
||||
<view class="overview-action overview-action--poem" @click="toGenerationPoems">
|
||||
<text class="overview-action__title">字辈谱</text><text>传承行辈次序</text>
|
||||
</view>
|
||||
<view class="overview-action overview-action--review" @click="toApplications">
|
||||
<view v-if="accessRole === 'owner'" class="overview-action overview-action--review" @click="toApplications">
|
||||
<text class="overview-action__title">入谱审核</text><text>处理加入申请</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -48,10 +48,34 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else-if="overviewState === 'ready' && genealogy" class="overview-public">
|
||||
<view class="overview-public__hero">
|
||||
<text class="overview-public__eyebrow">公开家谱</text>
|
||||
<text class="overview-public__title">{{ genealogy.name }}</text>
|
||||
<text class="overview-public__source">{{ genealogy.source }}</text>
|
||||
</view>
|
||||
<view class="overview-public__details">
|
||||
<view><text>姓氏</text><text>{{ genealogy.surname }}氏</text></view>
|
||||
<view><text>地区</text><text>{{ genealogy.location }}</text></view>
|
||||
<view><text>堂号</text><text>{{ genealogy.hall }}</text></view>
|
||||
<view><text>当前支系</text><text>{{ genealogy.branchName }}</text></view>
|
||||
<view><text>所属上级谱</text><text>{{ genealogy.parentName }}</text></view>
|
||||
</view>
|
||||
<view class="overview-public__notice">
|
||||
<text>公开说明</text>
|
||||
<text>{{ genealogy.publicDescription }}</text>
|
||||
</view>
|
||||
<view class="overview-public__action" @click="applyToJoin">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>申请加入这部家谱</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="overview-state-panel" :class="{
|
||||
'overview-state--loading': overviewState === 'loading',
|
||||
'overview-state--empty': overviewState === 'empty',
|
||||
'overview-state--error': overviewState === 'error'
|
||||
'overview-state--error': overviewState === 'error',
|
||||
'overview-state--no-permission': overviewState === 'no-permission'
|
||||
}">
|
||||
<text class="overview-state-panel__title">{{ stateTitle }}</text>
|
||||
<text class="overview-state-panel__copy">{{ stateCopy }}</text>
|
||||
@@ -68,30 +92,49 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { appApi } from '@/utils/api.js'
|
||||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||||
|
||||
const genealogy = ref(null)
|
||||
const genealogyId = ref('')
|
||||
const overviewState = ref('loading')
|
||||
const loadError = ref('')
|
||||
const viewMode = ref('member')
|
||||
const accessRole = ref('owner')
|
||||
const overviewFixture = {
|
||||
id: '2001',
|
||||
surname: '汤',
|
||||
name: '汤氏南阳宗谱',
|
||||
hall: '敦睦堂',
|
||||
location: '河南·南阳',
|
||||
parentName: '汤氏中华总谱',
|
||||
branchName: '南阳主支',
|
||||
source: '由南阳汤氏族人整理并维护',
|
||||
publicDescription: '公开展示家谱身份、地区、堂号与支系信息；成员资料和世系详情仅向已加入成员开放。',
|
||||
motto: '敦亲睦族，敬祖传家。',
|
||||
memberCount: 428,
|
||||
activeCount: 316,
|
||||
visibility: '仅成员可见'
|
||||
}
|
||||
|
||||
const stateTitle = computed(() => ({
|
||||
loading: '正在展开家谱…',
|
||||
empty: '还没有可查看的家谱',
|
||||
error: '家谱暂时无法打开'
|
||||
error: '家谱暂时无法打开',
|
||||
'no-permission': '当前账号无权查看'
|
||||
}[overviewState.value] || ''))
|
||||
const stateCopy = computed(() => loadError.value || ({
|
||||
loading: '请稍候，正在读取家谱概览。',
|
||||
empty: '请从“我的家谱”选择一部家谱后再进入。',
|
||||
error: '可能是网络波动、家谱不存在或当前账号无访问权限。'
|
||||
error: '可能是网络波动或家谱不存在。',
|
||||
'no-permission': '这部家谱未向当前账号开放，请返回我的家谱或联系管理员。'
|
||||
}[overviewState.value] || ''))
|
||||
|
||||
const loadGenealogy = async (query = {}) => {
|
||||
const loadGenealogy = (query = {}) => {
|
||||
overviewState.value = 'loading'
|
||||
loadError.value = ''
|
||||
genealogy.value = null
|
||||
genealogyId.value = query.genealogyId || genealogyId.value || genealogyContext.getCurrentGenealogyId()
|
||||
genealogyId.value = query.genealogyId || genealogyId.value || ''
|
||||
viewMode.value = query.mode === 'public' ? 'public' : 'member'
|
||||
accessRole.value = query.role === 'member' ? 'member' : 'owner'
|
||||
|
||||
if (query.state === 'empty' || !genealogyId.value) {
|
||||
overviewState.value = 'empty'
|
||||
@@ -101,16 +144,14 @@ const loadGenealogy = async (query = {}) => {
|
||||
overviewState.value = 'error'
|
||||
return
|
||||
}
|
||||
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value)
|
||||
try {
|
||||
genealogy.value = await appApi.getOverview(genealogyId.value)
|
||||
overviewState.value = genealogy.value ? 'ready' : 'error'
|
||||
if (!genealogy.value) loadError.value = '家谱不存在或当前账号无权访问。'
|
||||
} catch (error) {
|
||||
loadError.value = error.message || '家谱加载失败，请稍后重试。'
|
||||
overviewState.value = 'error'
|
||||
if (query.state === 'no-permission') {
|
||||
overviewState.value = 'no-permission'
|
||||
return
|
||||
}
|
||||
if (query.state === 'loading') return
|
||||
|
||||
genealogy.value = { ...overviewFixture, id: genealogyId.value }
|
||||
overviewState.value = 'ready'
|
||||
}
|
||||
|
||||
onLoad(loadGenealogy)
|
||||
@@ -122,10 +163,11 @@ const toFamily = () => uni.reLaunch({ url: '/pages/family/f01-family-feed' })
|
||||
const toApplications = () => uni.navigateTo({ url: `/pages/genealogy/g10-application-review?genealogyId=${genealogyId.value}` })
|
||||
const toSettings = () => uni.navigateTo({ url: `/pages/genealogy/g11-genealogy-settings?genealogyId=${genealogyId.value}` })
|
||||
const toGenerationPoems = () => uni.navigateTo({ url: `/pages/genealogy/g12-generation-poems?genealogyId=${genealogyId.value}` })
|
||||
const applyToJoin = () => uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&genealogyId=${genealogyId.value}` })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.overview-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.overview-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.overview-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.overview-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.overview-page__header { position: relative; z-index: 3; }
|
||||
@@ -138,9 +180,9 @@ const toGenerationPoems = () => uni.navigateTo({ url: `/pages/genealogy/g12-gene
|
||||
.overview-hero__motto { display: block; margin-top: 6rpx; color: #e9dcc1; font-size: 23rpx; }
|
||||
.overview-hero__stats { display: flex; gap: 18rpx; margin-top: 12rpx; color: #dbc990; font-size: 22rpx; }
|
||||
.overview-actions { position: absolute; top: 29.2%; right: 7.2%; left: 7.2%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3.4% 3%; height: 36.2%; }
|
||||
.overview-actions--member { grid-template-rows: 1fr; height: 18%; }
|
||||
.overview-action { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 22rpx; box-sizing: border-box; color: $ink-muted; font-size: 22rpx; }
|
||||
.overview-action__title { margin-bottom: 9rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; }
|
||||
.overview-action--tree .overview-action__title { color: $brand-red; }
|
||||
.overview-family { position: absolute; top: 70.2%; right: 7.5%; left: 7.5%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.overview-family text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 28rpx; font-weight: 700; }
|
||||
.overview-family text:last-child { color: $brand-red; }
|
||||
@@ -152,6 +194,20 @@ const toGenerationPoems = () => uni.navigateTo({ url: `/pages/genealogy/g12-gene
|
||||
.overview-state-panel__action { position: relative; width: 300rpx; height: 76rpx; margin-top: 30rpx; }
|
||||
.overview-state-panel__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.overview-state-panel__action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 25rpx; font-weight: 700; }
|
||||
.overview-public { position: absolute; inset: 0; }
|
||||
.overview-public__hero { position: absolute; top: 6.5%; right: 8%; left: 8%; color: #fff8ec; }
|
||||
.overview-public__eyebrow { display: block; color: #dec483; font-size: 21rpx; letter-spacing: 3rpx; }
|
||||
.overview-public__title { display: block; margin-top: 10rpx; font-family: 'STKaiti', 'KaiTi', serif; font-size: 43rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.overview-public__source { display: block; margin-top: 7rpx; color: #e9dcc1; font-size: 22rpx; }
|
||||
.overview-public__details { position: absolute; top: 30%; right: 9%; left: 9%; display: grid; grid-template-columns: 1fr 1fr; gap: 18rpx 28rpx; }
|
||||
.overview-public__details > view { display: flex; flex-direction: column; }
|
||||
.overview-public__details text:first-child { color: $brand-red; font-size: 21rpx; }
|
||||
.overview-public__details text:last-child { margin-top: 6rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; }
|
||||
.overview-public__notice { position: absolute; top: 58%; right: 9%; left: 9%; display: flex; flex-direction: column; color: $ink-muted; font-size: 22rpx; line-height: 36rpx; }
|
||||
.overview-public__notice text:first-child { margin-bottom: 8rpx; color: $brand-red; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
|
||||
.overview-public__action { position: absolute; right: 9%; bottom: 7%; left: 9%; display: flex; height: 82rpx; align-items: center; justify-content: center; overflow: hidden; }
|
||||
.overview-public__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.overview-public__action text { position: relative; z-index: 1; color: #fff9ed; font-size: 27rpx; font-weight: 700; letter-spacing: 3rpx; }
|
||||
@media (min-width: 400px) {
|
||||
.overview-hero { top: 7%; }
|
||||
.overview-action { padding: 0 28rpx; }
|
||||
|
||||
@@ -1,116 +1,292 @@
|
||||
<!-- 页面编号：G-06；用途：公开家谱检索，统一承载初始、加载、结果与无结果状态。 -->
|
||||
<!-- 页面编号：G-06；用途：搜索家谱／邀请码加入双模式定位目标家谱。 -->
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<!-- 底图只提供完整纸纹，不以 CSS 补色或绘制装饰。 -->
|
||||
<image class="search-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="aspectFill" />
|
||||
<image class="search-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="scaleToFill" />
|
||||
<image class="search-page__footer" src="/static/assets/foundation/transparent/footer-mountain-bamboo.png" mode="widthFix" />
|
||||
<view class="search-page__header"><PageHeader title="查找家谱" /></view>
|
||||
<view class="search-page__header"><PageHeader title="加入家谱" /></view>
|
||||
|
||||
<view class="search-page__content">
|
||||
<!-- 选定题签稿：题签位图只提供材质，品牌谱印和标题保留为真实应用元素。 -->
|
||||
<view class="search-title-strip">
|
||||
<image class="search-title-strip__skin" src="/static/assets/modules/genealogy/opaque/g06-search-title-strip.png" mode="scaleToFill" />
|
||||
<image class="search-title-strip__seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<text class="search-title-strip__text">公开家谱检索</text>
|
||||
<text class="search-title-strip__text">加入家谱</text>
|
||||
</view>
|
||||
<view class="search-controls">
|
||||
<view class="search-field">
|
||||
<image class="search-field__skin" src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<input v-model="keyword" class="search-input" placeholder="输入姓氏、谱名或地区" placeholder-class="search-input__placeholder" @confirm="search" />
|
||||
</view>
|
||||
<view class="search-action" @click="search">
|
||||
<image class="search-action__skin" src="/static/assets/modules/genealogy/opaque/g06-search-button.png" mode="scaleToFill" />
|
||||
<text class="search-action__label">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="search-divider" src="/static/assets/modules/genealogy/transparent/section-divider.png" mode="scaleToFill" />
|
||||
|
||||
<!-- 同一路由内以数据状态切换，避免为结果或空结果新增占位页面。 -->
|
||||
<view v-if="searchState === 'loading'" class="search-status search-loading">
|
||||
<text>正在整理可申请加入的家谱</text>
|
||||
</view>
|
||||
<view v-else-if="searchState === 'initial'" class="search-status search-initial">
|
||||
<text class="search-status__lead">从姓氏、谱名或祖居地开始</text>
|
||||
<text class="search-status__copy">找到合适的家谱后，可申请加入并查阅。</text>
|
||||
<image class="search-status__hall" src="/static/assets/foundation/transparent/root-header-hall.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view v-else-if="searchState === 'results'" class="search-results">
|
||||
<view class="search-results__head"><text>检索到 {{ results.length }} 部可申请的家谱</text><text>点选后填写申请</text></view>
|
||||
<GenealogyCard v-for="item in results" :key="item.id" :genealogy="item" role="可申请" @select="openApply" />
|
||||
</view>
|
||||
<view v-else class="search-status search-empty">
|
||||
<image class="search-status__cloud" src="/static/assets/modules/genealogy/transparent/create-cloud.png" mode="aspectFit" />
|
||||
<text class="search-status__lead">暂未找到公开家谱</text>
|
||||
<text class="search-status__copy">可换一个姓氏、谱名或祖居地再试。</text>
|
||||
<view class="mode-tabs">
|
||||
<view class="mode-tab" :class="{ 'mode-tab--active': mode === 'search' }" @click="switchMode('search')">搜索家谱</view>
|
||||
<view class="mode-tab" :class="{ 'mode-tab--active': mode === 'invite' }" @click="switchMode('invite')">邀请码加入</view>
|
||||
</view>
|
||||
|
||||
<template v-if="mode === 'search'">
|
||||
<view class="search-controls">
|
||||
<view class="search-field">
|
||||
<image class="search-field__skin" src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<input v-model.trim="keyword" class="search-input" placeholder="姓氏、谱名、地区或堂号" placeholder-class="search-input__placeholder" @confirm="search" />
|
||||
<view v-if="keyword" class="search-clear" @click="clearSearch">清空</view>
|
||||
</view>
|
||||
<view class="search-action" @click="search">
|
||||
<image class="search-action__skin" src="/static/assets/modules/genealogy/opaque/g06-search-button.png" mode="scaleToFill" />
|
||||
<text class="search-action__label">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-row">
|
||||
<text class="filter-label">地区</text>
|
||||
<view v-for="area in areas" :key="area" class="filter-chip" :class="{ 'filter-chip--active': selectedArea === area }" @click="selectedArea = area">{{ area }}</view>
|
||||
</view>
|
||||
<image class="search-divider" src="/static/assets/modules/genealogy/transparent/section-divider.png" mode="scaleToFill" />
|
||||
|
||||
<view v-if="searchState === 'loading'" class="search-status search-loading">
|
||||
<text class="search-status__lead">正在检索公开家谱</text>
|
||||
<text class="search-status__copy">请稍候，正在整理匹配结果。</text>
|
||||
</view>
|
||||
<view v-else-if="searchState === 'initial'" class="search-status search-initial">
|
||||
<text class="search-status__lead">先确认家族是否已有家谱</text>
|
||||
<text class="search-status__copy">可按姓氏、谱名、地区或堂号查找，避免重复创建。</text>
|
||||
<image class="search-status__hall" src="/static/assets/foundation/transparent/root-header-hall.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view v-else-if="searchState === 'results'" class="search-results">
|
||||
<view class="search-results__head"><text>检索到 {{ results.length }} 部家谱</text><text>请核对支系与管理信息</text></view>
|
||||
<view v-for="item in results" :key="item.id" class="result-card genealogy-card" @click="openPreview(item)">
|
||||
<image class="result-card__skin" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
|
||||
<view class="result-card__content">
|
||||
<view class="result-card__head">
|
||||
<view>
|
||||
<text class="result-card__name">{{ item.name }}</text>
|
||||
<text class="result-card__identity">{{ item.surname }}氏 · {{ item.hall }}</text>
|
||||
</view>
|
||||
<text class="result-card__relation" :class="`result-card__relation--${item.relation}`">{{ item.actionLabel }}</text>
|
||||
</view>
|
||||
<view class="result-card__facts">
|
||||
<text>地区：{{ item.location }}</text>
|
||||
<text>所属上级谱：{{ item.parentName }}</text>
|
||||
<text>当前支系：{{ item.branchName }}</text>
|
||||
<text>管理信息：{{ item.manager }} · {{ item.certification }}</text>
|
||||
<text>{{ item.memberCount }} 位成员 · 更新于 {{ item.updatedAt }}</text>
|
||||
</view>
|
||||
<view class="result-card__action" @click.stop="handleResultAction(item)">{{ item.actionLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="searchState === 'empty'" class="search-status search-empty">
|
||||
<image class="search-status__cloud" src="/static/assets/modules/genealogy/transparent/create-cloud.png" mode="aspectFit" />
|
||||
<text class="search-status__lead">暂未找到匹配家谱</text>
|
||||
<text class="search-status__copy">可调整地区或关键词后重试，也可使用邀请码加入。</text>
|
||||
</view>
|
||||
<view v-else class="search-status search-error">
|
||||
<text class="search-status__lead">检索暂时失败</text>
|
||||
<text class="search-status__copy">当前仅展示失败样式，请稍后重新搜索。</text>
|
||||
<view class="status-retry" @click="search">重新搜索</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view class="invite-block">
|
||||
<text class="invite-title">输入家谱邀请码</text>
|
||||
<text class="invite-copy">邀请码用于定位指定家谱，加入前仍需确认真实姓名和关系。</text>
|
||||
<view class="invite-controls">
|
||||
<view class="invite-field">
|
||||
<image class="search-field__skin" src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<input v-model.trim="inviteCode" class="invite-input" maxlength="12" placeholder="请输入邀请码" placeholder-class="search-input__placeholder" />
|
||||
</view>
|
||||
<view class="search-action" @click="verifyInvite">
|
||||
<image class="search-action__skin" src="/static/assets/modules/genealogy/opaque/g06-search-button.png" mode="scaleToFill" />
|
||||
<text class="search-action__label">验证</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="invite-demo">样式验证可输入 JP2026</text>
|
||||
</view>
|
||||
<image class="search-divider" src="/static/assets/modules/genealogy/transparent/section-divider.png" mode="scaleToFill" />
|
||||
|
||||
<view v-if="inviteState === 'initial'" class="search-status invite-initial">
|
||||
<text class="search-status__lead">通过邀请码直接定位家谱</text>
|
||||
<text class="search-status__copy">验证有效后会显示目标家谱，确认关系后可直接加入。</text>
|
||||
</view>
|
||||
<view v-else-if="inviteState === 'invalid'" class="search-status invite-invalid">
|
||||
<text class="search-status__lead">邀请码无效或已过期</text>
|
||||
<text class="search-status__copy">请核对邀请码，或向家谱管理员重新获取。</text>
|
||||
</view>
|
||||
<view v-else class="invite-result">
|
||||
<text class="invite-result__label">已定位目标家谱</text>
|
||||
<view class="result-card genealogy-card">
|
||||
<image class="result-card__skin" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
|
||||
<view class="result-card__content">
|
||||
<text class="result-card__name">{{ inviteTarget.name }}</text>
|
||||
<view class="result-card__facts">
|
||||
<text>{{ inviteTarget.surname }}氏 · {{ inviteTarget.hall }} · {{ inviteTarget.location }}</text>
|
||||
<text>所属上级谱：{{ inviteTarget.parentName }}</text>
|
||||
<text>当前支系：{{ inviteTarget.branchName }}</text>
|
||||
<text>{{ inviteTarget.manager }} · {{ inviteTarget.certification }}</text>
|
||||
</view>
|
||||
<view class="result-card__action" @click="confirmInvite">确认关系并加入</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="invite-result__note">提交后直接加入，无需等待审核</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import GenealogyCard from '@/components/GenealogyCard.vue'
|
||||
import { appApi } from '@/utils/api.js'
|
||||
|
||||
const mode = ref('search')
|
||||
const keyword = ref('')
|
||||
const allResults = ref([])
|
||||
const results = ref([])
|
||||
const selectedArea = ref('全部')
|
||||
const searchState = ref('initial')
|
||||
const inviteCode = ref('')
|
||||
const inviteState = ref('initial')
|
||||
const results = ref([])
|
||||
let searchTimer = null
|
||||
|
||||
onMounted(async () => {
|
||||
searchState.value = 'loading'
|
||||
allResults.value = await appApi.getPublicGenealogies()
|
||||
searchState.value = 'initial'
|
||||
})
|
||||
const areas = ['全部', '河南', '山东']
|
||||
const resultFixtures = [
|
||||
{ id: 2001, surname: '汤', name: '汤氏南阳宗谱', hall: '敦睦堂', location: '河南·南阳', parentName: '汤氏中华总谱', branchName: '南阳主支', manager: '管理员 汤文礼', certification: '资料已认证', memberCount: 428, updatedAt: '2026-07-12', relation: 'available', actionLabel: '申请加入' },
|
||||
{ id: 2002, surname: '汤', name: '汤氏洛阳家谱', hall: '承志堂', location: '河南·洛阳', parentName: '汤氏中华总谱', branchName: '洛阳二支', manager: '管理员 汤文远', certification: '资料已认证', memberCount: 158, updatedAt: '2026-07-10', relation: 'joined', actionLabel: '已加入' },
|
||||
{ id: 2003, surname: '汤', name: '汤氏济宁宗谱', hall: '敬宗堂', location: '山东·济宁', parentName: '汤氏鲁西总谱', branchName: '济宁主支', manager: '管理员 汤正明', certification: '管理员已实名', memberCount: 286, updatedAt: '2026-07-08', relation: 'pending', actionLabel: '审核中' },
|
||||
{ id: 2004, surname: '汤', name: '汤氏清河家谱', hall: '思源堂', location: '山东·临清', parentName: '汤氏鲁西总谱', branchName: '清河支系', manager: '管理员 汤志成', certification: '资料已认证', memberCount: 96, updatedAt: '2026-07-05', relation: 'rejected', actionLabel: '修改后重新申请' },
|
||||
{ id: 2005, surname: '汤', name: '汤氏汝南支谱', hall: '崇本堂', location: '河南·驻马店', parentName: '汤氏中原总谱', branchName: '汝南三支', manager: '管理员 汤国安', certification: '管理员已实名', memberCount: 72, updatedAt: '2026-07-02', relation: 'removed', actionLabel: '重新申请' },
|
||||
{ id: 2006, surname: '汤', name: '汤氏新安家谱', hall: '继善堂', location: '河南·三门峡', parentName: '无上级谱', branchName: '新安主支', manager: '创建者 当前用户', certification: '资料待完善', memberCount: 34, updatedAt: '2026-06-28', relation: 'owned', actionLabel: '我创建的' }
|
||||
]
|
||||
|
||||
const search = () => {
|
||||
const value = keyword.value.trim()
|
||||
results.value = value
|
||||
? allResults.value.filter((item) => `${item.name}${item.surname}${item.location}`.includes(value))
|
||||
: allResults.value
|
||||
searchState.value = results.value.length ? 'results' : 'empty'
|
||||
const inviteTarget = computed(() => resultFixtures[0])
|
||||
|
||||
const syncModeFromRoute = () => {
|
||||
let requestedMode = 'search'
|
||||
if (typeof location !== 'undefined') {
|
||||
requestedMode = new URLSearchParams(location.hash.split('?')[1] || '').get('mode') || 'search'
|
||||
} else {
|
||||
const pages = getCurrentPages()
|
||||
requestedMode = pages[pages.length - 1]?.options?.mode || 'search'
|
||||
}
|
||||
mode.value = requestedMode === 'invite' ? 'invite' : 'search'
|
||||
}
|
||||
|
||||
const openApply = (genealogy) => uni.navigateTo({ url: `/pages/genealogy/g08-join-application?genealogyId=${genealogy.id}` })
|
||||
onLoad(syncModeFromRoute)
|
||||
onShow(syncModeFromRoute)
|
||||
onUnload(() => { if (searchTimer) clearTimeout(searchTimer) })
|
||||
|
||||
const switchMode = (nextMode) => {
|
||||
mode.value = nextMode
|
||||
searchState.value = 'initial'
|
||||
inviteState.value = 'initial'
|
||||
}
|
||||
|
||||
const search = () => {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchState.value = 'loading'
|
||||
searchTimer = setTimeout(() => {
|
||||
const value = keyword.value.trim()
|
||||
if (value === '失败') {
|
||||
searchState.value = 'error'
|
||||
return
|
||||
}
|
||||
results.value = resultFixtures.filter((item) => {
|
||||
const matchesKeyword = !value || `${item.name}${item.surname}${item.location}${item.hall}`.includes(value)
|
||||
const matchesArea = selectedArea.value === '全部' || item.location.includes(selectedArea.value)
|
||||
return matchesKeyword && matchesArea
|
||||
})
|
||||
searchState.value = results.value.length ? 'results' : 'empty'
|
||||
searchTimer = null
|
||||
}, 260)
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
keyword.value = ''
|
||||
results.value = []
|
||||
searchState.value = 'initial'
|
||||
}
|
||||
|
||||
const openPreview = (item) => {
|
||||
if (item.relation === 'available') {
|
||||
uni.navigateTo({ url: `/pages/genealogy/g05-genealogy-overview?mode=public&genealogyId=${item.id}` })
|
||||
}
|
||||
}
|
||||
|
||||
const handleResultAction = (item) => {
|
||||
if (item.relation === 'available') return uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&genealogyId=${item.id}` })
|
||||
if (item.relation === 'pending') return uni.navigateTo({ url: '/pages/genealogy/g09-my-applications?status=pending' })
|
||||
if (item.relation === 'rejected' || item.relation === 'removed') return uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&previous=${item.relation}&genealogyId=${item.id}` })
|
||||
return uni.reLaunch({ url: `/pages/genealogy/g01-my-genealogies?genealogyId=${item.id}` })
|
||||
}
|
||||
|
||||
const verifyInvite = () => {
|
||||
inviteState.value = inviteCode.value.toUpperCase() === 'JP2026' ? 'valid' : 'invalid'
|
||||
}
|
||||
const confirmInvite = () => uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=invite&genealogyId=${inviteTarget.value.id}` })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* G06 的完整检索位图与叠放控件样式必须作为同一 SFC 样式模块刷新。 */
|
||||
.search-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.search-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.search-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.search-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .15; pointer-events: none; }
|
||||
.search-page__footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .15; pointer-events: none; }
|
||||
.search-page__header { position: relative; z-index: 2; }
|
||||
.search-page__content { position: relative; z-index: 3; min-height: calc(100vh - 104rpx); padding: 30rpx 24rpx calc(58rpx + env(safe-area-inset-bottom)); box-sizing: border-box; }
|
||||
|
||||
.search-title-strip { position: relative; width: 100%; height: 138rpx; }
|
||||
.search-title-strip__skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.search-title-strip__seal { position: absolute; top: 27rpx; left: 52rpx; z-index: 1; width: 72rpx; height: 84rpx; }
|
||||
.search-title-strip__text { position: absolute; top: 0; right: 170rpx; bottom: 0; left: 156rpx; z-index: 1; display: flex; align-items: center; justify-content: center; color: #f5d596; font-family: 'STKaiti', 'KaiTi', serif; font-size: 39rpx; font-weight: 700; letter-spacing: 5rpx; }
|
||||
.search-controls { display: flex; align-items: center; gap: 20rpx; margin-top: 48rpx; }
|
||||
.search-title-strip__text { position: absolute; inset: 0 170rpx 0 156rpx; z-index: 1; display: flex; align-items: center; justify-content: center; color: #f5d596; font-family: 'STKaiti', 'KaiTi', serif; font-size: 39rpx; font-weight: 700; letter-spacing: 5rpx; }
|
||||
.mode-tabs { display: flex; width: 500rpx; margin: 30rpx auto 0; border-bottom: 1rpx solid rgba(181, 138, 75, .45); }
|
||||
.mode-tab { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 70rpx; color: $ink-muted; font-family: 'STKaiti', 'KaiTi', serif; font-size: 28rpx; }
|
||||
.mode-tab--active { color: $brand-red; font-weight: 700; }
|
||||
.mode-tab--active::after { position: absolute; right: 42rpx; bottom: -2rpx; left: 42rpx; height: 4rpx; background: $brand-red; content: ''; }
|
||||
.search-controls { display: flex; align-items: center; gap: 20rpx; margin-top: 32rpx; }
|
||||
.invite-controls { display: flex; align-items: center; gap: 20rpx; margin-top: 32rpx; }
|
||||
.search-field { position: relative; width: 430rpx; height: 95rpx; }
|
||||
.search-field__skin, .search-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.search-input { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 30rpx; box-sizing: border-box; color: $ink; font-size: 26rpx; }
|
||||
.search-field__skin,
|
||||
.search-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.search-input { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 82rpx 0 30rpx; box-sizing: border-box; color: $ink; font-size: 25rpx; }
|
||||
.search-input__placeholder { color: #ab9c83; }
|
||||
.search-clear { position: absolute; z-index: 2; top: 0; right: 20rpx; display: flex; height: 100%; align-items: center; color: $brand-red; font-size: 21rpx; }
|
||||
.search-action { position: relative; display: flex; width: 200rpx; height: 88rpx; align-items: center; justify-content: center; }
|
||||
.search-action__label { position: relative; z-index: 1; color: #fff4dc; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; letter-spacing: 7rpx; }
|
||||
.search-divider { display: block; width: 100%; height: 30rpx; margin: 40rpx 0 34rpx; }
|
||||
|
||||
.search-status { display: flex; min-height: 190rpx; flex-direction: column; align-items: center; justify-content: center; padding: 10rpx 28rpx 24rpx; box-sizing: border-box; text-align: center; }
|
||||
.search-action__label { position: relative; z-index: 1; color: #fff4dc; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; letter-spacing: 5rpx; }
|
||||
.filter-row { display: flex; align-items: center; gap: 12rpx; margin: 16rpx 14rpx 0; }
|
||||
.filter-label { color: $ink-muted; font-size: 22rpx; }
|
||||
.filter-chip { display: flex; min-width: 82rpx; min-height: 52rpx; align-items: center; justify-content: center; color: $ink-muted; font-size: 22rpx; }
|
||||
.filter-chip--active { color: $brand-red; font-weight: 700; }
|
||||
.search-divider { display: block; width: 100%; height: 30rpx; margin: 24rpx 0 24rpx; }
|
||||
.search-status { display: flex; min-height: 240rpx; flex-direction: column; align-items: center; justify-content: center; padding: 16rpx 28rpx 24rpx; box-sizing: border-box; text-align: center; }
|
||||
.search-status__cloud { width: 92rpx; height: 46rpx; margin-bottom: 4rpx; opacity: .78; }
|
||||
.search-status__lead { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; letter-spacing: 2rpx; }
|
||||
.search-status__copy { margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.search-status__hall { width: 330rpx; height: 132rpx; margin-top: 330rpx; opacity: .22; filter: grayscale(1); }
|
||||
.search-loading { min-height: 168rpx; color: $ink-muted; font-size: 24rpx; }
|
||||
.search-results { display: flex; flex-direction: column; gap: 18rpx; margin-top: 6rpx; }
|
||||
.search-results__head { display: flex; align-items: center; justify-content: space-between; padding: 0 16rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.search-status__lead { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; letter-spacing: 2rpx; }
|
||||
.search-status__copy { margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 36rpx; }
|
||||
.search-status__hall { width: 330rpx; height: 132rpx; margin-top: 210rpx; opacity: .22; filter: grayscale(1); }
|
||||
.status-retry { display: flex; min-height: 70rpx; align-items: center; margin-top: 18rpx; color: $brand-red; font-size: 24rpx; }
|
||||
.search-results { display: flex; flex-direction: column; gap: 16rpx; margin-top: 4rpx; }
|
||||
.search-results__head { display: flex; align-items: center; justify-content: space-between; padding: 0 16rpx; color: $ink-muted; font-size: 21rpx; }
|
||||
.search-results__head text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
|
||||
.result-card { position: relative; min-height: 314rpx; box-sizing: border-box; padding: 28rpx 30rpx; overflow: hidden; }
|
||||
.result-card__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.result-card__content { position: relative; z-index: 1; }
|
||||
.result-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
|
||||
.result-card__name,
|
||||
.result-card__identity { display: block; }
|
||||
.result-card__name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 33rpx; font-weight: 700; }
|
||||
.result-card__identity { margin-top: 5rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.result-card__relation { flex: 0 0 auto; max-width: 190rpx; margin-left: 12rpx; color: #9a641f; font-size: 21rpx; text-align: right; }
|
||||
.result-card__relation--rejected,
|
||||
.result-card__relation--removed { color: $brand-red; }
|
||||
.result-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8rpx 18rpx; margin-top: 16rpx; color: $ink-muted; font-size: 23rpx; line-height: 32rpx; }
|
||||
.result-card__facts text:nth-child(4),
|
||||
.result-card__facts text:nth-child(5) { grid-column: 1 / -1; }
|
||||
.result-card__action { display: flex; min-height: 58rpx; align-items: center; justify-content: center; margin-top: 14rpx; color: $brand-red; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
|
||||
.invite-block { padding: 24rpx 18rpx 0; }
|
||||
.invite-title { display: block; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
|
||||
.invite-copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 22rpx; line-height: 35rpx; }
|
||||
.invite-field { position: relative; flex: 1; height: 95rpx; }
|
||||
.invite-input { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 30rpx; box-sizing: border-box; color: $ink; font-size: 25rpx; letter-spacing: 3rpx; }
|
||||
.invite-demo { display: block; margin-top: 8rpx; color: #9b876f; font-size: 19rpx; }
|
||||
.invite-result__label { display: block; margin: 0 12rpx 12rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 27rpx; font-weight: 700; }
|
||||
.invite-result__note { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; text-align: center; }
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.search-page__content { padding-right: 20rpx; padding-left: 20rpx; }
|
||||
.search-title-strip__seal { left: 44rpx; }
|
||||
.search-title-strip__text { right: 148rpx; left: 138rpx; font-size: 37rpx; }
|
||||
.search-field { width: 430rpx; }
|
||||
.search-action { width: 200rpx; height: 88rpx; }
|
||||
.result-card { padding-right: 24rpx; padding-left: 24rpx; }
|
||||
.result-card__facts { grid-template-columns: 1fr; }
|
||||
.result-card__facts text { grid-column: 1 !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="join-page">
|
||||
<image class="join-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="aspectFill" />
|
||||
<image class="join-page__footer" src="/static/assets/foundation/transparent/footer-mountain-bamboo.png" mode="widthFix" />
|
||||
<view class="join-page__header"><PageHeader title="申请加入家谱" /></view>
|
||||
<view class="join-page__header"><PageHeader :title="sourceContract.headerTitle" /></view>
|
||||
|
||||
<view class="join-panel" :class="{
|
||||
'join-state--form': joinState === 'form',
|
||||
@@ -13,37 +13,40 @@
|
||||
<image class="join-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
|
||||
<view v-if="joinState === 'form'" class="join-form">
|
||||
<text class="join-form__eyebrow">公开家谱入谱申请</text>
|
||||
<text class="join-form__title">申请加入 {{ genealogyName }}</text>
|
||||
<text class="join-form__copy">请填写真实身份和亲属关系，管理员审核后会通过消息告知结果。</text>
|
||||
<text class="join-form__eyebrow">{{ sourceContract.eyebrow }}</text>
|
||||
<text class="join-form__title">{{ sourceContract.formTitle }} {{ genealogyName }}</text>
|
||||
<text class="join-form__copy">{{ sourceContract.formCopy }}</text>
|
||||
|
||||
<view class="join-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>真实姓名</text><input v-model="form.realName" placeholder="请输入真实姓名" placeholder-class="join-placeholder" />
|
||||
<text>真实姓名</text><input v-model="form.realName" placeholder="请输入真实姓名" placeholder-class="join-placeholder" @input="clearFieldError('realName')" />
|
||||
</view>
|
||||
<text v-if="fieldErrors.realName" class="join-field-error">{{ fieldErrors.realName }}</text>
|
||||
<view class="join-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>与家谱关系</text><input v-model="form.relation" placeholder="例如：汤正华堂侄" placeholder-class="join-placeholder" />
|
||||
<text>与家谱关系</text><input v-model="form.relation" placeholder="例如：汤正华堂侄" placeholder-class="join-placeholder" @input="clearFieldError('relation')" />
|
||||
</view>
|
||||
<text v-if="fieldErrors.relation" class="join-field-error">{{ fieldErrors.relation }}</text>
|
||||
<text class="relation-help">请以家谱中一位已知长辈为参照，例如：汤正华堂侄</text>
|
||||
<view class="join-field join-field--message">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>申请说明</text><textarea v-model="form.message" maxlength="80" placeholder="补充祖居地、长辈姓名等核验信息" placeholder-class="join-placeholder" />
|
||||
<text>{{ sourceContract.thirdFieldLabel }}</text><textarea v-model="form.message" maxlength="80" :placeholder="sourceContract.thirdFieldPlaceholder" placeholder-class="join-placeholder" />
|
||||
</view>
|
||||
|
||||
<text class="join-form__note">提交后可在“我的申请”中查看审核进度。</text>
|
||||
<text class="join-form__note">{{ sourceContract.note }}</text>
|
||||
<view class="join-action" @click="submitJoin">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>{{ isSubmitting ? '正在提交…' : '提交申请' }}</text>
|
||||
<text>{{ isSubmitting ? sourceContract.submittingLabel : sourceContract.submitLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="join-result">
|
||||
<text class="join-result__eyebrow">{{ joinState === 'success' ? '申请已送达' : '申请未提交' }}</text>
|
||||
<text class="join-result__title">{{ joinState === 'success' ? '等待管理员核实亲属关系' : '暂时无法提交申请' }}</text>
|
||||
<text class="join-result__eyebrow">{{ joinState === 'success' ? sourceContract.successEyebrow : sourceContract.errorEyebrow }}</text>
|
||||
<text class="join-result__title">{{ joinState === 'success' ? sourceContract.successTitle : sourceContract.errorTitle }}</text>
|
||||
<text class="join-result__copy">{{ resultCopy }}</text>
|
||||
<view class="join-action" @click="joinState === 'success' ? toMyApplications() : retryForm()">
|
||||
<view class="join-action" @click="joinState === 'success' ? completeFlow() : retryForm()">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>{{ joinState === 'success' ? '查看我的申请' : '重新填写' }}</text>
|
||||
<text>{{ joinState === 'success' ? sourceContract.nextLabel : '重新填写' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -56,6 +59,7 @@ import { onLoad } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
|
||||
const genealogyId = ref('')
|
||||
const source = ref('search')
|
||||
const genealogyName = ref('这部家谱')
|
||||
const genealogyPreview = {
|
||||
'1001': '汤氏家谱',
|
||||
@@ -65,12 +69,47 @@ const joinState = ref('form')
|
||||
const isSubmitting = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const form = reactive({ realName: '', relation: '', message: '' })
|
||||
const fieldErrors = reactive({ realName: '', relation: '' })
|
||||
const sourceContract = computed(() => source.value === 'invite' ? {
|
||||
headerTitle: '确认关系并加入',
|
||||
eyebrow: '邀请码直接加入',
|
||||
formTitle: '确认加入',
|
||||
formCopy: '请填写真实身份和亲属关系；提交后直接加入，无需等待管理员审核。',
|
||||
thirdFieldLabel: '补充信息',
|
||||
thirdFieldPlaceholder: '选填：补充祖居地、长辈姓名等信息',
|
||||
note: '邀请码来源提交后直接加入，无需等待审核。',
|
||||
submitLabel: '确认加入',
|
||||
submittingLabel: '正在加入…',
|
||||
successEyebrow: '已加入家谱',
|
||||
successTitle: '关系信息已提交',
|
||||
errorEyebrow: '加入未完成',
|
||||
errorTitle: '暂时无法加入家谱',
|
||||
nextLabel: '返回我的家谱',
|
||||
successCopy: `已直接加入“${genealogyName.value}”，无需等待审核；返回后将刷新并选中这部家谱。`
|
||||
} : {
|
||||
headerTitle: '申请加入家谱',
|
||||
eyebrow: '公开家谱入谱申请',
|
||||
formTitle: '申请加入',
|
||||
formCopy: '请填写真实身份和亲属关系，管理员审核后会通过消息告知结果。',
|
||||
thirdFieldLabel: '申请说明',
|
||||
thirdFieldPlaceholder: '补充祖居地、长辈姓名等核验信息',
|
||||
note: '提交后可在“我的申请”中查看审核进度。',
|
||||
submitLabel: '提交申请',
|
||||
submittingLabel: '正在提交…',
|
||||
successEyebrow: '申请已送达',
|
||||
successTitle: '等待管理员核实亲属关系',
|
||||
errorEyebrow: '申请未提交',
|
||||
errorTitle: '暂时无法提交申请',
|
||||
nextLabel: '查看我的申请',
|
||||
successCopy: `“${genealogyName.value}”的管理员会在核实后给出结果，请留意消息中心。`
|
||||
})
|
||||
const resultCopy = computed(() => joinState.value === 'success'
|
||||
? `“${genealogyName.value}”的管理员会在核实后给出结果，请留意消息中心。`
|
||||
? sourceContract.value.successCopy
|
||||
: errorMessage.value || '请检查网络后重新填写；未成功提交的内容不会进入审核列表。')
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || ''
|
||||
source.value = query.source === 'invite' ? 'invite' : 'search'
|
||||
if (query.state === 'success') {
|
||||
joinState.value = 'success'
|
||||
return
|
||||
@@ -85,22 +124,25 @@ onLoad((query) => {
|
||||
|
||||
const submitJoin = () => {
|
||||
if (isSubmitting.value) return
|
||||
if (!form.realName.trim() || !form.relation.trim()) {
|
||||
uni.showToast({ title: '请填写真实姓名和亲属关系', icon: 'none' })
|
||||
return
|
||||
}
|
||||
fieldErrors.realName = form.realName.trim() ? '' : '请填写真实姓名'
|
||||
fieldErrors.relation = form.relation.trim() ? '' : '请填写与家谱的关系'
|
||||
if (fieldErrors.realName || fieldErrors.relation) return
|
||||
isSubmitting.value = true
|
||||
setTimeout(() => {
|
||||
joinState.value = 'success'
|
||||
joinState.value = form.realName.trim() === '失败' ? 'error' : 'success'
|
||||
if (joinState.value === 'error') errorMessage.value = source.value === 'invite' ? '邀请码加入暂未完成，请稍后重试。' : '申请暂未提交，请稍后重试。'
|
||||
isSubmitting.value = false
|
||||
}, 280)
|
||||
}
|
||||
const clearFieldError = (field) => { fieldErrors[field] = '' }
|
||||
const retryForm = () => { joinState.value = 'form'; errorMessage.value = '' }
|
||||
const toMyApplications = () => uni.redirectTo({ url: '/pages/genealogy/g09-my-applications' })
|
||||
const toMyGenealogies = () => uni.reLaunch({ url: `/pages/genealogy/g01-my-genealogies?genealogyId=${genealogyId.value}` })
|
||||
const completeFlow = () => source.value === 'invite' ? toMyGenealogies() : toMyApplications()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.join-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.join-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.join-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.join-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.join-page__header { position: relative; z-index: 3; }
|
||||
@@ -116,6 +158,8 @@ const toMyApplications = () => uni.redirectTo({ url: '/pages/genealogy/g09-my-ap
|
||||
.join-field input, .join-field textarea { position: absolute; top: 0; right: 20rpx; bottom: 0; left: 170rpx; z-index: 1; height: 92rpx; color: $ink; font-size: 23rpx; line-height: 92rpx; }
|
||||
.join-field textarea { box-sizing: border-box; padding-top: 26rpx; line-height: 1.5; }
|
||||
.join-placeholder { color: #a79884; }
|
||||
.join-field-error { display: block; margin-top: 3rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
|
||||
.relation-help { display: block; margin-top: 5rpx; color: #8e7b67; font-size: 19rpx; line-height: 29rpx; }
|
||||
.join-form__note { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 21rpx; text-align: center; }
|
||||
.join-action { position: relative; width: 100%; height: 82rpx; margin-top: 20rpx; }
|
||||
.join-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
|
||||
@@ -14,14 +14,15 @@
|
||||
<view class="application-intro">
|
||||
<text>入谱申请进度</text><text>审核结果会同步到消息中心</text>
|
||||
</view>
|
||||
<view v-for="item in applications" :key="item.id" class="application-card" @click="openApprovedGenealogy(item)">
|
||||
<view v-for="item in applications" :key="item.id" class="application-card">
|
||||
<image class="application-card__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view class="application-card__body">
|
||||
<text class="application-card__name">{{ item.genealogyName }}</text>
|
||||
<text class="application-card__time">{{ item.appliedAt }}</text>
|
||||
<text class="application-card__relation">{{ item.relation }}</text>
|
||||
<text class="application-card__status" :class="`application-card__status--${item.status.toLowerCase()}`">{{ statusLabel(item.status) }}</text>
|
||||
<text class="application-card__hint">{{ item.status === 'APPROVED' ? '点按进入家谱' : item.status === 'PENDING' ? '请耐心等待管理员核实' : '可重新检索并提交申请' }}</text>
|
||||
<text class="application-card__hint">{{ statusHint(item.status) }}</text>
|
||||
<view v-if="actionFor(item)" class="application-card__action" @click="handleApplicationAction(item)">{{ actionFor(item) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -29,8 +30,8 @@
|
||||
<view v-else class="application-state-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view class="application-state-card__copy">
|
||||
<text>{{ applicationState === 'empty' ? '还没有入谱申请' : '申请记录暂时无法读取' }}</text>
|
||||
<text>{{ applicationState === 'empty' ? '从公开家谱检索开始，找到家谱后可提交加入申请。' : errorMessage || '请检查网络后重新查看。' }}</text>
|
||||
<text>{{ stateTitle }}</text>
|
||||
<text>{{ stateCopy }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="applicationState !== 'list'" class="application-page__action" @click="applicationState === 'error' ? loadApplications({}) : toSearch()">
|
||||
@@ -38,17 +39,32 @@
|
||||
<text>{{ applicationState === 'error' ? '重新查看' : '查找公开家谱' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="withdrawTarget" class="withdraw-layer" @click="cancelWithdraw">
|
||||
<view class="withdraw-dialog" @click.stop>
|
||||
<image class="withdraw-dialog__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view class="withdraw-dialog__content">
|
||||
<text class="withdraw-dialog__title">撤回加入申请</text>
|
||||
<text class="withdraw-dialog__copy">确认撤回对“{{ withdrawTarget.genealogyName }}”的申请？撤回后如需加入，可重新提交。</text>
|
||||
<view class="withdraw-dialog__actions">
|
||||
<view class="withdraw-action" @click="cancelWithdraw">暂不撤回</view>
|
||||
<view class="withdraw-action withdraw-action--danger" @click="confirmWithdraw">确认撤回</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
|
||||
const applications = ref([])
|
||||
const applicationState = ref('loading')
|
||||
const errorMessage = ref('')
|
||||
const withdrawTarget = ref(null)
|
||||
const applicationSamples = [
|
||||
{ id: 1, genealogyId: 1001, genealogyName: '汤氏家谱', relation: '自述为汤正华堂侄', appliedAt: '今天 10:24', status: 'PENDING' },
|
||||
{ id: 2, genealogyId: 1002, genealogyName: '汝南汤氏家谱', relation: '祖居河南汝南', appliedAt: '昨天 18:02', status: 'APPROVED' },
|
||||
@@ -58,28 +74,48 @@ const applicationSamples = [
|
||||
const statusLabel = (status) => ({
|
||||
'PENDING': '审核中',
|
||||
'APPROVED': '已通过',
|
||||
'REJECTED': '未通过'
|
||||
'REJECTED': '未通过',
|
||||
'WITHDRAWN': '已撤回'
|
||||
}[status] || '状态未知')
|
||||
|
||||
const statusHint = (status) => ({
|
||||
PENDING: '管理员尚未处理，可在审核前撤回',
|
||||
APPROVED: '申请已通过，可进入这部家谱',
|
||||
REJECTED: '请修改关系说明后重新提交',
|
||||
WITHDRAWN: '申请已撤回，不再进入管理员审核'
|
||||
}[status] || '')
|
||||
|
||||
const actionFor = (item) => ({ PENDING: '撤回申请', APPROVED: '进入家谱', REJECTED: '修改后重新提交' }[item.status] || '')
|
||||
const stateTitle = computed(() => applicationState.value === 'empty' ? '还没有入谱申请' : applicationState.value === 'loading' ? '正在整理申请记录' : '申请记录暂时无法读取')
|
||||
const stateCopy = computed(() => applicationState.value === 'empty' ? '从家谱搜索提交的申请会显示在这里；邀请码直接加入不进入本页。' : applicationState.value === 'loading' ? '请稍候，正在同步审核状态。' : errorMessage.value || '请检查网络后重新查看。')
|
||||
|
||||
const loadApplications = (query = {}) => {
|
||||
applicationState.value = 'loading'
|
||||
errorMessage.value = ''
|
||||
if (query.state === 'empty') { applicationState.value = 'empty'; return }
|
||||
if (query.state === 'error') { applicationState.value = 'error'; return }
|
||||
if (query.state === 'loading') { applicationState.value = 'loading'; return }
|
||||
applications.value = applicationSamples.map((item) => ({ ...item }))
|
||||
applicationState.value = 'list'
|
||||
}
|
||||
|
||||
onLoad(loadApplications)
|
||||
const openApprovedGenealogy = (item) => {
|
||||
if (item.status !== 'APPROVED') return
|
||||
uni.navigateTo({ url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${item.genealogyId}` })
|
||||
const handleApplicationAction = (item) => {
|
||||
if (item.status === 'APPROVED') return uni.navigateTo({ url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${item.genealogyId}` })
|
||||
if (item.status === 'REJECTED') return uni.navigateTo({ url: `/pages/genealogy/g08-join-application?source=search&previous=rejected&genealogyId=${item.genealogyId}` })
|
||||
if (item.status === 'PENDING') withdrawTarget.value = item
|
||||
}
|
||||
const cancelWithdraw = () => { withdrawTarget.value = null }
|
||||
const confirmWithdraw = () => {
|
||||
const target = applications.value.find((item) => item.id === withdrawTarget.value?.id)
|
||||
if (target) target.status = 'WITHDRAWN'
|
||||
cancelWithdraw()
|
||||
}
|
||||
const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-genealogies' })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.application-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.application-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.application-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.application-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.application-page__header { position: relative; z-index: 3; }
|
||||
@@ -93,10 +129,11 @@ const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-geneal
|
||||
.application-card__name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; }
|
||||
.application-card__time { position: absolute; top: 3rpx; right: 0; color: #998873; font-size: 20rpx; }
|
||||
.application-card__relation { display: block; max-width: 70%; margin-top: 14rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.application-card__status { position: absolute; right: 3%; bottom: 11%; color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||||
.application-card__status { position: absolute; right: 3%; bottom: 38%; color: $brand-red; font-size: 23rpx; font-weight: 700; }
|
||||
.application-card__status--approved { color: #537368; }
|
||||
.application-card__status--rejected { color: #7e6f62; }
|
||||
.application-card__hint { position: absolute; bottom: 5%; left: 0; color: #8d7c67; font-size: 20rpx; }
|
||||
.application-card__hint { position: absolute; bottom: 5%; left: 0; max-width: 62%; color: #8d7c67; font-size: 20rpx; }
|
||||
.application-card__action { position: absolute; right: 2%; bottom: 2%; z-index: 2; display: flex; min-height: 54rpx; align-items: center; color: $brand-red; font-size: 21rpx; font-weight: 700; }
|
||||
.application-state-card { position: relative; width: 100%; height: calc((100vw - 24px) * .34286); min-height: 228rpx; margin-top: 80rpx; }
|
||||
.application-state-card > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-state-card__copy { position: absolute; inset: 22% 12%; display: flex; flex-direction: column; justify-content: center; text-align: center; }
|
||||
@@ -105,4 +142,13 @@ const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-geneal
|
||||
.application-page__action { position: relative; width: 420rpx; height: 82rpx; margin: 34rpx auto 0; }
|
||||
.application-page__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-page__action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 26rpx; font-weight: 700; }
|
||||
.withdraw-layer { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 42rpx; background: rgba(34, 20, 12, .58); }
|
||||
.withdraw-dialog { position: relative; width: 100%; max-width: 660rpx; min-height: 390rpx; }
|
||||
.withdraw-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.withdraw-dialog__content { position: relative; z-index: 1; display: flex; min-height: 390rpx; flex-direction: column; align-items: center; box-sizing: border-box; padding: 74rpx 60rpx 46rpx; text-align: center; }
|
||||
.withdraw-dialog__title { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 36rpx; font-weight: 700; }
|
||||
.withdraw-dialog__copy { margin-top: 24rpx; color: $ink-muted; font-size: 23rpx; line-height: 38rpx; }
|
||||
.withdraw-dialog__actions { display: flex; width: 100%; margin-top: auto; border-top: 1rpx solid rgba(181, 138, 75, .42); }
|
||||
.withdraw-action { display: flex; flex: 1; min-height: 76rpx; align-items: center; justify-content: center; color: $ink-muted; font-size: 23rpx; }
|
||||
.withdraw-action--danger { border-left: 1rpx solid rgba(181, 138, 75, .42); color: $brand-red; }
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
<view class="review-content" :class="{
|
||||
'review-state--list': reviewState === 'list',
|
||||
'review-state--empty': reviewState === 'empty',
|
||||
'review-state--error': reviewState === 'error'
|
||||
'review-state--error': reviewState === 'error',
|
||||
'review-state--no-permission': reviewState === 'no-permission'
|
||||
}">
|
||||
<view class="review-intro">
|
||||
<text>核实亲属关系后再决定</text>
|
||||
@@ -40,20 +41,46 @@
|
||||
<view v-else class="review-state-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view class="review-state-card__copy">
|
||||
<text>{{ reviewState === 'empty' ? '暂无待审核申请' : '审核列表暂时无法读取' }}</text>
|
||||
<text>{{ reviewState === 'empty' ? '新的入谱申请会在这里出现，并同步发送消息提醒。' : errorMessage || '请检查网络或家谱权限后重试。' }}</text>
|
||||
<text>{{ stateTitle }}</text>
|
||||
<text>{{ stateCopy }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="reviewState === 'error'" class="review-page__retry" @click="loadApplications({ genealogyId })">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>重新查看</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="confirmation || helpVisible" class="review-dialog-layer" @click="closeDialog">
|
||||
<view class="review-dialog" @click.stop>
|
||||
<image class="review-dialog__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<view class="review-dialog__content">
|
||||
<template v-if="helpVisible">
|
||||
<text class="review-dialog__title">审核说明</text>
|
||||
<text class="review-dialog__copy">请核对申请人的姓名、亲属关系和补充说明，仅确认与本家谱存在真实关系的申请。</text>
|
||||
<view class="review-dialog__single" @click="closeDialog">我知道了</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text class="review-dialog__title">{{ confirmation.approved ? '确认通过申请？' : '确认拒绝申请？' }}</text>
|
||||
<text class="review-dialog__copy">{{ confirmation.approved ? '通过后，申请人将成为本家谱成员。' : '拒绝后，申请人会收到审核结果，并可修改后重新申请。' }}</text>
|
||||
<view class="review-dialog__actions">
|
||||
<view class="review-dialog__action" @click="closeDialog">取消</view>
|
||||
<view class="review-dialog__action review-dialog__action--primary" @click="applyAudit">{{ confirmation.approved ? '确认通过' : '确认拒绝' }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="feedbackVisible" class="review-feedback">
|
||||
<image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text>{{ feedbackMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||||
|
||||
@@ -65,6 +92,14 @@ const reviewSamples = [
|
||||
const genealogyId = ref('')
|
||||
const reviewState = ref('loading')
|
||||
const errorMessage = ref('')
|
||||
const confirmation = ref(null)
|
||||
const helpVisible = ref(false)
|
||||
const feedbackVisible = ref(false)
|
||||
const feedbackMessage = ref('')
|
||||
let feedbackTimer = null
|
||||
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
|
||||
const stateTitle = computed(() => reviewState.value === 'empty' ? '暂无待审核申请' : reviewState.value === 'no-permission' ? '当前账号无审核权限' : '审核列表暂时无法读取')
|
||||
const stateCopy = computed(() => reviewState.value === 'empty' ? '新的入谱申请会在这里出现，并同步发送消息提醒。' : reviewState.value === 'no-permission' ? '只有家谱所有者或具备审核权限的管理员可以处理申请。' : errorMessage.value || '请检查网络或家谱权限后重试。')
|
||||
|
||||
const loadApplications = (query = {}) => {
|
||||
reviewState.value = 'loading'
|
||||
@@ -72,6 +107,7 @@ const loadApplications = (query = {}) => {
|
||||
genealogyId.value = query.genealogyId?.value || query.genealogyId || genealogyId.value || genealogyContext.getCurrentGenealogyId()
|
||||
if (query.state === 'empty') { reviewState.value = 'empty'; return }
|
||||
if (query.state === 'error') { reviewState.value = 'error'; return }
|
||||
if (query.state === 'no-permission') { reviewState.value = 'no-permission'; return }
|
||||
if (!genealogyId.value) {
|
||||
errorMessage.value = '没有找到当前家谱，请从家谱总览进入。'
|
||||
reviewState.value = 'error'
|
||||
@@ -84,22 +120,27 @@ const loadApplications = (query = {}) => {
|
||||
|
||||
onLoad(loadApplications)
|
||||
const confirmAudit = (item, approved) => {
|
||||
uni.showModal({
|
||||
title: approved ? '确认通过申请？' : '确认拒绝申请？',
|
||||
content: approved ? '通过后，申请人将成为本家谱成员。' : '拒绝后，申请人会收到审核结果。',
|
||||
confirmText: approved ? '确认通过' : '确认拒绝',
|
||||
success: ({ confirm }) => {
|
||||
if (!confirm) return
|
||||
item.status = approved ? 'APPROVED' : 'REJECTED'
|
||||
uni.showToast({ title: approved ? '已通过申请' : '已拒绝申请', icon: 'none' })
|
||||
}
|
||||
})
|
||||
confirmation.value = { item, approved }
|
||||
}
|
||||
const showHelp = () => uni.showModal({ title: '审核说明', content: '请核对申请人的姓名、亲属关系和补充说明，仅确认与本家谱存在真实关系的申请。', showCancel: false })
|
||||
const closeDialog = () => { confirmation.value = null; helpVisible.value = false }
|
||||
const showFeedback = (message) => {
|
||||
feedbackMessage.value = message
|
||||
feedbackVisible.value = true
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
|
||||
}
|
||||
const applyAudit = () => {
|
||||
const current = confirmation.value
|
||||
if (!current) return
|
||||
current.item.status = current.approved ? 'APPROVED' : 'REJECTED'
|
||||
closeDialog()
|
||||
showFeedback(current.approved ? '已通过申请' : '已拒绝申请')
|
||||
}
|
||||
const showHelp = () => { helpVisible.value = true }
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.review-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.review-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.review-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.review-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.review-page__header { position: relative; z-index: 3; }
|
||||
@@ -130,4 +171,17 @@ const showHelp = () => uni.showModal({ title: '审核说明', content: '请核
|
||||
.review-page__retry { position: relative; width: 420rpx; height: 82rpx; margin: 32rpx auto 0; }
|
||||
.review-page__retry image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.review-page__retry text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 26rpx; font-weight: 700; }
|
||||
.review-dialog-layer { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 42rpx; background: rgba(34, 20, 12, .58); }
|
||||
.review-dialog { position: relative; width: 100%; max-width: 660rpx; min-height: 410rpx; }
|
||||
.review-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.review-dialog__content { position: relative; z-index: 1; display: flex; min-height: 410rpx; flex-direction: column; align-items: center; box-sizing: border-box; padding: 72rpx 60rpx 42rpx; text-align: center; }
|
||||
.review-dialog__title { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 36rpx; font-weight: 700; }
|
||||
.review-dialog__copy { margin-top: 24rpx; color: $ink-muted; font-size: 23rpx; line-height: 38rpx; }
|
||||
.review-dialog__actions { display: flex; width: 100%; margin-top: auto; border-top: 1rpx solid rgba(181, 138, 75, .42); }
|
||||
.review-dialog__action { display: flex; flex: 1; min-height: 74rpx; align-items: center; justify-content: center; color: $ink-muted; font-size: 23rpx; }
|
||||
.review-dialog__action--primary { border-left: 1rpx solid rgba(181, 138, 75, .42); color: $brand-red; font-weight: 700; }
|
||||
.review-dialog__single { display: flex; min-height: 76rpx; align-items: center; margin-top: auto; color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||||
.review-feedback { position: fixed; z-index: 40; top: 140rpx; left: 50%; display: flex; min-width: 250rpx; min-height: 76rpx; align-items: center; justify-content: center; padding: 0 36rpx; transform: translateX(-50%); }
|
||||
.review-feedback image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.review-feedback text { position: relative; z-index: 1; color: $ink; font-size: 23rpx; }
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
<view class="settings-panel" :class="{
|
||||
'settings-state--form': settingsState === 'form',
|
||||
'settings-state--success': settingsState === 'success',
|
||||
'settings-state--error': settingsState === 'error'
|
||||
'settings-state--error': settingsState === 'error',
|
||||
'settings-state--no-permission': settingsState === 'no-permission'
|
||||
}">
|
||||
<image class="settings-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
|
||||
@@ -20,8 +21,9 @@
|
||||
<view class="settings-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>家谱名称</text>
|
||||
<input v-model="genealogyDraft.name" maxlength="20" placeholder="请输入家谱名称" placeholder-class="settings-placeholder" />
|
||||
<input v-model="genealogyDraft.name" maxlength="20" placeholder="请输入家谱名称" placeholder-class="settings-placeholder" @input="nameError = ''" />
|
||||
</view>
|
||||
<text v-if="nameError" class="settings-field-error">{{ nameError }}</text>
|
||||
|
||||
<view class="visibility-block">
|
||||
<text class="visibility-block__label">公开范围</text>
|
||||
@@ -47,25 +49,32 @@
|
||||
</view>
|
||||
|
||||
<view v-else class="settings-result">
|
||||
<text class="settings-result__eyebrow">{{ settingsState === 'success' ? '设置已保存' : '设置未保存' }}</text>
|
||||
<text class="settings-result__title">{{ settingsState === 'success' ? '新的访问规则已经生效' : '暂时无法打开家谱设置' }}</text>
|
||||
<text class="settings-result__copy">{{ settingsState === 'success' ? `${genealogyDraft.name} · ${visibilityLabel}` : '请从家谱总览重新进入，当前修改不会被保留。' }}</text>
|
||||
<text class="settings-result__eyebrow">{{ settingsState === 'success' ? '设置已保存' : settingsState === 'no-permission' ? '权限不足' : '设置未保存' }}</text>
|
||||
<text class="settings-result__title">{{ settingsState === 'success' ? '新的访问规则已经生效' : settingsState === 'no-permission' ? '当前账号不能修改家谱' : '暂时无法打开家谱设置' }}</text>
|
||||
<text class="settings-result__copy">{{ settingsState === 'success' ? `${genealogyDraft.name} · ${visibilityLabel}` : settingsState === 'no-permission' ? '只有家谱所有者可以修改名称、公开范围和访问说明。' : '请从家谱总览重新进入，当前修改不会被保留。' }}</text>
|
||||
<view class="settings-action" @click="settingsState = 'form'">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<text>{{ settingsState === 'success' ? '继续调整' : '重新查看' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="feedbackVisible" class="settings-feedback">
|
||||
<image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text>设置已保存</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
|
||||
const genealogyId = ref('')
|
||||
const settingsState = ref('loading')
|
||||
const nameError = ref('')
|
||||
const feedbackVisible = ref(false)
|
||||
let feedbackTimer = null
|
||||
const genealogyDraft = reactive({
|
||||
name: '汤氏家谱',
|
||||
visibility: 'MEMBER_ONLY',
|
||||
@@ -82,20 +91,23 @@ const visibilityHint = computed(() => genealogyDraft.visibility === 'MEMBER_ONLY
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || ''
|
||||
settingsState.value = query.state === 'success' ? 'success' : query.state === 'error' || !genealogyId.value ? 'error' : 'form'
|
||||
settingsState.value = query.state === 'success' ? 'success' : query.state === 'no-permission' ? 'no-permission' : query.state === 'error' || !genealogyId.value ? 'error' : 'form'
|
||||
})
|
||||
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
|
||||
|
||||
const saveSettings = () => {
|
||||
if (!genealogyDraft.name.trim()) {
|
||||
uni.showToast({ title: '请填写家谱名称', icon: 'none' })
|
||||
nameError.value = '请填写家谱名称'
|
||||
return
|
||||
}
|
||||
settingsState.value = 'success'
|
||||
feedbackVisible.value = true
|
||||
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settings-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.settings-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.settings-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.settings-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.settings-page__header { position: relative; z-index: 3; }
|
||||
@@ -111,6 +123,7 @@ const saveSettings = () => {
|
||||
.settings-field input, .settings-field textarea { position: absolute; top: 0; right: 20rpx; bottom: 0; left: 164rpx; z-index: 1; height: 92rpx; color: $ink; font-size: 22rpx; line-height: 92rpx; }
|
||||
.settings-field textarea { box-sizing: border-box; padding-top: 26rpx; line-height: 1.5; }
|
||||
.settings-placeholder { color: #a79884; }
|
||||
.settings-field-error { display: block; margin-top: 3rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
|
||||
.visibility-block { margin-top: 17rpx; }
|
||||
.visibility-block__label { display: block; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.visibility-options { display: flex; gap: 14rpx; margin-top: 10rpx; }
|
||||
@@ -127,5 +140,8 @@ const saveSettings = () => {
|
||||
.settings-result__eyebrow { text-align: center; }
|
||||
.settings-result__copy { margin-top: 22rpx; }
|
||||
.settings-result .settings-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
|
||||
.settings-feedback { position: fixed; z-index: 30; top: 138rpx; left: 50%; display: flex; min-width: 240rpx; min-height: 74rpx; align-items: center; justify-content: center; padding: 0 34rpx; transform: translateX(-50%); }
|
||||
.settings-feedback image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.settings-feedback text { position: relative; z-index: 1; color: $ink; font-size: 22rpx; }
|
||||
@media (min-width: 400px) { .settings-panel { width: calc(100% - 48rpx); } .settings-form { right: 9%; left: 9%; } }
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
'poem-state--list': poemState === 'list',
|
||||
'poem-state--empty': poemState === 'empty',
|
||||
'poem-state--edit': poemState === 'edit',
|
||||
'poem-state--error': poemState === 'error'
|
||||
'poem-state--error': poemState === 'error',
|
||||
'poem-state--no-permission': poemState === 'no-permission'
|
||||
}">
|
||||
<image class="poem-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
|
||||
@@ -37,8 +38,9 @@
|
||||
<view class="poem-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<text>字辈内容</text>
|
||||
<textarea v-model="poemDraft" maxlength="24" placeholder="例如：启宗敦本继世传芳" placeholder-class="poem-placeholder" />
|
||||
<textarea v-model="poemDraft" maxlength="24" placeholder="例如：启宗敦本继世传芳" placeholder-class="poem-placeholder" @input="poemError = ''" />
|
||||
</view>
|
||||
<text v-if="poemError" class="poem-field-error">{{ poemError }}</text>
|
||||
<view class="poem-policy">
|
||||
<text>缺失旧世代时</text>
|
||||
<view class="poem-policy__option" @click="stopMissingOldGeneration = !stopMissingOldGeneration">
|
||||
@@ -58,24 +60,31 @@
|
||||
</view>
|
||||
|
||||
<view v-else class="poem-state-card">
|
||||
<text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : '字辈暂不可用' }}</text>
|
||||
<text class="poem-list__title">{{ poemState === 'empty' ? '从第一段传承字序开始' : '暂时无法读取字辈诗' }}</text>
|
||||
<text class="poem-list__copy">{{ poemState === 'empty' ? '管理员可以一次录入连续字辈，系统会按世代拆分展示。' : '请从家谱总览重新进入，或稍后再试。' }}</text>
|
||||
<text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : poemState === 'no-permission' ? '权限不足' : '字辈暂不可用' }}</text>
|
||||
<text class="poem-list__title">{{ poemState === 'empty' ? '从第一段传承字序开始' : poemState === 'no-permission' ? '当前账号不能维护字辈' : '暂时无法读取字辈诗' }}</text>
|
||||
<text class="poem-list__copy">{{ poemState === 'empty' ? '管理员可以一次录入连续字辈，系统会按世代拆分展示。' : poemState === 'no-permission' ? '普通成员可以查看字辈，但只有具备管理权限的成员可以维护。' : '请从家谱总览重新进入，或稍后再试。' }}</text>
|
||||
<view class="poem-action" @click="poemState === 'empty' ? openEditor() : poemState = 'list'">
|
||||
<image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>{{ poemState === 'empty' ? '开始录入' : '重新查看' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="feedbackVisible" class="poem-feedback">
|
||||
<image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text>字辈预览已更新</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
|
||||
const genealogyId = ref('')
|
||||
const poemState = ref('loading')
|
||||
const poemError = ref('')
|
||||
const feedbackVisible = ref(false)
|
||||
let feedbackTimer = null
|
||||
const poemDraft = ref('启宗敦本继世传芳')
|
||||
const stopMissingOldGeneration = ref(true)
|
||||
const poemRows = ref([
|
||||
@@ -88,24 +97,30 @@ const previewCharacters = computed(() => poemDraft.value.trim().split('').join('
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || ''
|
||||
poemState.value = query.state === 'empty' ? 'empty' : query.state === 'edit' ? 'edit' : query.state === 'error' || !genealogyId.value ? 'error' : 'list'
|
||||
poemState.value = query.state === 'empty' ? 'empty' : query.state === 'edit' ? 'edit' : query.state === 'no-permission' ? 'no-permission' : query.state === 'error' || !genealogyId.value ? 'error' : 'list'
|
||||
})
|
||||
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
|
||||
|
||||
const openEditor = () => { poemState.value = 'edit' }
|
||||
const savePoems = () => {
|
||||
const characters = poemDraft.value.trim().split('').filter(Boolean)
|
||||
if (!characters.length) {
|
||||
uni.showToast({ title: '请录入字辈内容', icon: 'none' })
|
||||
poemError.value = '请录入字辈内容'
|
||||
return
|
||||
}
|
||||
if (poemDraft.value.trim() === '失败') {
|
||||
poemError.value = '字辈保存失败，请稍后重试'
|
||||
return
|
||||
}
|
||||
poemRows.value = characters.slice(0, 4).map((character, index) => ({ generationNo: 12 + index, character, current: index === 2 }))
|
||||
poemState.value = 'list'
|
||||
uni.showToast({ title: '字辈预览已更新', icon: 'none' })
|
||||
feedbackVisible.value = true
|
||||
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.poem-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
|
||||
.poem-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.poem-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
|
||||
.poem-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
|
||||
.poem-page__header { position: relative; z-index: 3; }
|
||||
@@ -130,6 +145,7 @@ const savePoems = () => {
|
||||
.poem-field > text { position: absolute; top: 47rpx; left: 24rpx; z-index: 1; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.poem-field textarea { position: absolute; top: 0; right: 20rpx; bottom: 0; left: 164rpx; z-index: 1; box-sizing: border-box; height: 118rpx; padding-top: 34rpx; color: $ink; font-size: 22rpx; line-height: 1.5; }
|
||||
.poem-placeholder { color: #a79884; }
|
||||
.poem-field-error { display: block; margin-top: 4rpx; color: $brand-red; font-size: 20rpx; text-align: right; }
|
||||
.poem-policy { display: flex; align-items: center; justify-content: space-between; margin-top: 22rpx; }
|
||||
.poem-policy > text { color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.poem-policy__option { position: relative; width: 248rpx; height: 62rpx; }
|
||||
@@ -144,5 +160,8 @@ const savePoems = () => {
|
||||
.poem-state-card .poem-list__eyebrow { text-align: center; }
|
||||
.poem-state-card .poem-list__copy { margin-top: 22rpx; }
|
||||
.poem-state-card .poem-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
|
||||
.poem-feedback { position: fixed; z-index: 30; top: 138rpx; left: 50%; display: flex; min-width: 260rpx; min-height: 74rpx; align-items: center; justify-content: center; padding: 0 34rpx; transform: translateX(-50%); }
|
||||
.poem-feedback image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.poem-feedback text { position: relative; z-index: 1; color: $ink; font-size: 22rpx; }
|
||||
@media (min-width: 400px) { .poem-panel { width: calc(100% - 48rpx); } .poem-list, .poem-editor, .poem-state-card { right: 9%; left: 9%; } }
|
||||
</style>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<!-- 页面编号：T-02；用途：世系图小屏、无成员与加载失败状态。 -->
|
||||
<template><ModulePage page-id="t02" /></template>
|
||||
<script setup>import ModulePage from '@/components/ModulePage.vue'</script>
|
||||
Reference in New Issue
Block a user