Review changes batch 5 of 6
This commit is contained in:
+298
-118
@@ -2,97 +2,252 @@
|
||||
<template>
|
||||
<view class="auth-page login-page">
|
||||
<view class="page-canvas">
|
||||
<image class="page-backdrop" src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png" mode="scaleToFill" />
|
||||
<image class="brand-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<image
|
||||
class="page-backdrop"
|
||||
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
class="brand-seal"
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
|
||||
<view class="login-content">
|
||||
<view class="login-heading">
|
||||
<text class="login-title">登录家谱</text>
|
||||
<image class="title-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
|
||||
<image
|
||||
class="title-divider"
|
||||
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</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-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" />
|
||||
<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" />
|
||||
<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 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>
|
||||
<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="form-secondary-row">
|
||||
<view v-if="activeLoginMethod === 'password'" class="forgot-password" hover-class="tap-fade" @click="prepareForgotPassword">忘记密码</view>
|
||||
<view
|
||||
v-if="activeLoginMethod === 'password'"
|
||||
class="forgot-password"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareForgotPassword"
|
||||
>忘记密码</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login-submit" hover-class="button-pressed" @click="submitLogin">
|
||||
<image class="button-skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<view
|
||||
class="login-submit"
|
||||
hover-class="button-pressed"
|
||||
@click="submitLogin"
|
||||
>
|
||||
<image
|
||||
class="button-skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<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" />
|
||||
<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" />
|
||||
<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/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" />
|
||||
<view
|
||||
class="wechat-login"
|
||||
hover-class="button-pressed"
|
||||
@click="prepareWechatLogin"
|
||||
>
|
||||
<image
|
||||
class="button-skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="wechat-login__content">
|
||||
<image class="wechat-icon" src="/static/assets/foundation/transparent/auth-wechat.png" mode="aspectFit" />
|
||||
<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
|
||||
class="register-link"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareRegister"
|
||||
>注册账号</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="agreement-area" :class="{ 'agreement-area--error': agreementError }">
|
||||
<view
|
||||
class="agreement-area"
|
||||
:class="{ 'agreement-area--error': agreementError }"
|
||||
>
|
||||
<view class="agreement-row" @click="toggleAgreement">
|
||||
<image class="agreement-icon" :src="agreed ? '/static/assets/modules/auth/transparent/a02-agreement-checked.png' : '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'" mode="aspectFit" />
|
||||
<image
|
||||
class="agreement-icon"
|
||||
:src="
|
||||
agreed
|
||||
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
|
||||
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
|
||||
"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《用户协议》</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement"
|
||||
>《用户协议》</text
|
||||
>
|
||||
<text>与</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement"
|
||||
>《隐私政策》</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error">请先阅读并同意用户协议与隐私政策</text>
|
||||
<text v-if="agreementError" class="agreement-error"
|
||||
>请先阅读并同意用户协议与隐私政策</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前只验收自定义容器外观，真实行为验证数据留到接口阶段接入。 -->
|
||||
<view v-if="verificationVisible" class="verification-layer" @click="closeVerification">
|
||||
<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/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
class="verification-dialog__skin"
|
||||
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="verification-dialog__content">
|
||||
<text class="verification-title">安全验证</text>
|
||||
<text class="verification-copy">{{ verificationPurpose }}前需要完成行为验证</text>
|
||||
<text class="verification-copy"
|
||||
>{{ verificationPurpose }}前需要完成行为验证</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
|
||||
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>
|
||||
@@ -105,111 +260,116 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { ref } from "vue";
|
||||
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
|
||||
const LOGIN_METHOD_STORAGE_KEY = 'a01:last-login-method'
|
||||
const activeLoginMethod = ref('password')
|
||||
const passwordVisible = ref(false)
|
||||
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)
|
||||
const feedbackMessage = ref('')
|
||||
let feedbackTimer = null
|
||||
const LOGIN_METHOD_STORAGE_KEY = "a01:last-login-method";
|
||||
const activeLoginMethod = ref("password");
|
||||
const passwordVisible = ref(false);
|
||||
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);
|
||||
const feedbackMessage = ref("");
|
||||
let feedbackTimer = null;
|
||||
|
||||
onLoad(() => {
|
||||
const storedMethod = uni.getStorageSync(LOGIN_METHOD_STORAGE_KEY)
|
||||
if (storedMethod === 'sms') activeLoginMethod.value = 'sms'
|
||||
})
|
||||
const storedMethod = uni.getStorageSync(LOGIN_METHOD_STORAGE_KEY);
|
||||
if (storedMethod === "sms") activeLoginMethod.value = "sms";
|
||||
});
|
||||
|
||||
onUnload(() => {
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
})
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||||
});
|
||||
|
||||
const showFeedback = (message) => {
|
||||
feedbackMessage.value = message
|
||||
feedbackVisible.value = true
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
feedbackMessage.value = message;
|
||||
feedbackVisible.value = true;
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||||
feedbackTimer = setTimeout(() => {
|
||||
feedbackVisible.value = false
|
||||
feedbackTimer = null
|
||||
}, 2200)
|
||||
}
|
||||
feedbackVisible.value = false;
|
||||
feedbackTimer = null;
|
||||
}, 2200);
|
||||
};
|
||||
|
||||
const switchLoginMethod = (method) => {
|
||||
if (method !== 'password' && method !== 'sms') return
|
||||
activeLoginMethod.value = method
|
||||
uni.setStorageSync(LOGIN_METHOD_STORAGE_KEY, method)
|
||||
}
|
||||
if (method !== "password" && method !== "sms") return;
|
||||
activeLoginMethod.value = method;
|
||||
uni.setStorageSync(LOGIN_METHOD_STORAGE_KEY, method);
|
||||
};
|
||||
|
||||
const togglePasswordVisibility = () => {
|
||||
passwordVisible.value = !passwordVisible.value
|
||||
}
|
||||
passwordVisible.value = !passwordVisible.value;
|
||||
};
|
||||
|
||||
const toggleAgreement = () => {
|
||||
agreed.value = !agreed.value
|
||||
if (agreed.value) agreementError.value = false
|
||||
}
|
||||
agreed.value = !agreed.value;
|
||||
if (agreed.value) agreementError.value = false;
|
||||
};
|
||||
|
||||
const validatePhone = () => {
|
||||
if (/^1\d{10}$/.test(phone.value)) return true
|
||||
showFeedback('请输入正确的手机号')
|
||||
return false
|
||||
}
|
||||
if (/^1\d{10}$/.test(phone.value)) return true;
|
||||
showFeedback("请输入正确的手机号");
|
||||
return false;
|
||||
};
|
||||
|
||||
const requireAgreement = () => {
|
||||
if (agreed.value) return true
|
||||
agreementError.value = true
|
||||
return false
|
||||
}
|
||||
if (agreed.value) return true;
|
||||
agreementError.value = true;
|
||||
return false;
|
||||
};
|
||||
|
||||
const openVerification = (purpose) => {
|
||||
verificationPurpose.value = purpose
|
||||
verificationVisible.value = true
|
||||
}
|
||||
verificationPurpose.value = purpose;
|
||||
verificationVisible.value = true;
|
||||
};
|
||||
|
||||
const closeVerification = () => {
|
||||
verificationVisible.value = false
|
||||
}
|
||||
verificationVisible.value = false;
|
||||
};
|
||||
|
||||
const confirmVerification = () => {
|
||||
closeVerification()
|
||||
showFeedback('行为验证接口待接入')
|
||||
}
|
||||
closeVerification();
|
||||
showFeedback("行为验证接口待接入");
|
||||
};
|
||||
|
||||
const prepareGetCode = () => {
|
||||
if (!validatePhone() || !requireAgreement()) return
|
||||
openVerification('发送验证码')
|
||||
}
|
||||
if (!validatePhone() || !requireAgreement()) return;
|
||||
openVerification("发送验证码");
|
||||
};
|
||||
|
||||
const submitLogin = () => {
|
||||
if (!validatePhone()) return
|
||||
if (activeLoginMethod.value === 'password' && !password.value) {
|
||||
showFeedback('请输入密码')
|
||||
return
|
||||
if (!validatePhone()) return;
|
||||
if (activeLoginMethod.value === "password" && !password.value) {
|
||||
showFeedback("请输入密码");
|
||||
return;
|
||||
}
|
||||
if (activeLoginMethod.value === 'sms' && !/^\d{6}$/.test(verificationCode.value)) {
|
||||
showFeedback('请输入 6 位验证码')
|
||||
return
|
||||
if (
|
||||
activeLoginMethod.value === "sms" &&
|
||||
!/^\d{6}$/.test(verificationCode.value)
|
||||
) {
|
||||
showFeedback("请输入 6 位验证码");
|
||||
return;
|
||||
}
|
||||
if (!requireAgreement()) return
|
||||
openVerification('登录')
|
||||
}
|
||||
if (!requireAgreement()) return;
|
||||
openVerification("登录");
|
||||
};
|
||||
|
||||
const prepareForgotPassword = () => uni.navigateTo({ url: '/pages/auth/a05-reset-password' })
|
||||
const prepareRegister = () => uni.navigateTo({ url: '/pages/auth/a04-register' })
|
||||
const prepareForgotPassword = () =>
|
||||
uni.navigateTo({ url: "/pages/auth/a05-reset-password" });
|
||||
const prepareRegister = () =>
|
||||
uni.navigateTo({ url: "/pages/auth/a04-register" });
|
||||
|
||||
const prepareWechatLogin = () => {
|
||||
if (!requireAgreement()) return
|
||||
showFeedback('微信登录功能准备中')
|
||||
}
|
||||
if (!requireAgreement()) return;
|
||||
showFeedback("微信登录功能准备中");
|
||||
};
|
||||
|
||||
const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
const prepareAgreement = () => showFeedback("协议页面准备中");
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -310,7 +470,7 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
width: 1rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(176, 120, 52, 0.58);
|
||||
content: '';
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@@ -327,10 +487,12 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
height: 5rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #ad160d;
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
|
||||
.form-content { margin-top: 10rpx; }
|
||||
.form-content {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
@@ -349,7 +511,9 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
transform: translateX(-12rpx);
|
||||
}
|
||||
|
||||
.input-icon--sms { transform: translateX(-12rpx) scale(1.45); }
|
||||
.input-icon--sms {
|
||||
transform: translateX(-12rpx) scale(1.45);
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
flex: 1;
|
||||
@@ -359,7 +523,9 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.input-placeholder { color: #9f968d; }
|
||||
.input-placeholder {
|
||||
color: #9f968d;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
display: flex;
|
||||
@@ -411,7 +577,9 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-submit { height: 92rpx; }
|
||||
.login-submit {
|
||||
height: 92rpx;
|
||||
}
|
||||
|
||||
.button-skin {
|
||||
position: absolute;
|
||||
@@ -524,7 +692,9 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agreement-link { color: #a9160d; }
|
||||
.agreement-link {
|
||||
color: #a9160d;
|
||||
}
|
||||
|
||||
.agreement-error {
|
||||
display: block;
|
||||
@@ -539,13 +709,24 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
}
|
||||
|
||||
@keyframes agreement-shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
33% { transform: translateX(-8rpx); }
|
||||
66% { transform: translateX(8rpx); }
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
33% {
|
||||
transform: translateX(-8rpx);
|
||||
}
|
||||
66% {
|
||||
transform: translateX(8rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.tap-fade { opacity: 0.62; }
|
||||
.button-pressed { opacity: 0.82; }
|
||||
.tap-fade {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.button-pressed {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.feedback-toast {
|
||||
position: fixed;
|
||||
@@ -560,7 +741,7 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
min-height: 82rpx;
|
||||
border: 16rpx solid transparent;
|
||||
border-width: 16rpx 74rpx;
|
||||
border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png');
|
||||
border-image-source: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png");
|
||||
border-image-slice: 58 280 fill;
|
||||
border-image-width: 16rpx 74rpx;
|
||||
border-image-repeat: stretch;
|
||||
@@ -651,5 +832,4 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
color: #a9160d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
+198
-82
@@ -2,66 +2,151 @@
|
||||
<template>
|
||||
<view class="auth-page register-page">
|
||||
<view class="page-canvas">
|
||||
<image class="page-backdrop" src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png" mode="scaleToFill" />
|
||||
<image class="brand-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<image
|
||||
class="page-backdrop"
|
||||
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
class="brand-seal"
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
|
||||
<view class="register-content">
|
||||
<view class="page-heading">
|
||||
<view class="back-button" hover-class="tap-fade" @click="goBack">
|
||||
<image class="back-button__icon" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
|
||||
<image
|
||||
class="back-button__icon"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<text class="page-title">注册账号</text>
|
||||
<text class="page-subtitle">创建属于你的家谱账号</text>
|
||||
<image class="register-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
|
||||
<image
|
||||
class="register-divider"
|
||||
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.phone }">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<text class="input-label">手机号</text>
|
||||
<input v-model.trim="phone" class="auth-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" @input="clearFieldError('phone')" />
|
||||
<input
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('phone')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.phone" class="field-error">{{ fieldErrors.phone }}</text>
|
||||
<text v-if="fieldErrors.phone" class="field-error">{{
|
||||
fieldErrors.phone
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.password }">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.password }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<text class="input-label">设置密码</text>
|
||||
<input v-model="password" class="auth-input" password maxlength="32" placeholder="请设置登录密码" placeholder-class="placeholder" @input="clearFieldError('password')" />
|
||||
<input
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
placeholder="请设置登录密码"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('password')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.password" class="field-error">{{ fieldErrors.password }}</text>
|
||||
<text v-if="fieldErrors.password" class="field-error">{{
|
||||
fieldErrors.password
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.confirmPassword }">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<text class="input-label">确认密码</text>
|
||||
<input v-model="confirmPassword" class="auth-input" password maxlength="32" placeholder="请再次输入密码" placeholder-class="placeholder" @input="clearFieldError('confirmPassword')" />
|
||||
<input
|
||||
v-model="confirmPassword"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
placeholder="请再次输入密码"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.confirmPassword" class="field-error">{{ fieldErrors.confirmPassword }}</text>
|
||||
<text v-if="fieldErrors.confirmPassword" class="field-error">{{
|
||||
fieldErrors.confirmPassword
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="register-submit" hover-class="button-hover" @click="submitRegister">
|
||||
<image class="register-submit__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<view
|
||||
class="register-submit"
|
||||
hover-class="button-hover"
|
||||
@click="submitRegister"
|
||||
>
|
||||
<image
|
||||
class="register-submit__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="register-submit__content">注册账号</text>
|
||||
</view>
|
||||
|
||||
<view class="agreement-area" :class="{ 'agreement-area--error': agreementError }">
|
||||
<view
|
||||
class="agreement-area"
|
||||
:class="{ 'agreement-area--error': agreementError }"
|
||||
>
|
||||
<view class="agreement-row" @click="toggleAgreement">
|
||||
<image class="agreement-icon" :src="agreed ? '/static/assets/modules/auth/transparent/a02-agreement-checked.png' : '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'" mode="aspectFit" />
|
||||
<image
|
||||
class="agreement-icon"
|
||||
:src="
|
||||
agreed
|
||||
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
|
||||
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
|
||||
"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《用户协议》</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement"
|
||||
>《用户协议》</text
|
||||
>
|
||||
<text>与</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement">《隐私政策》</text>
|
||||
<text class="agreement-link" @click.stop="prepareAgreement"
|
||||
>《隐私政策》</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error">请先阅读并同意用户协议与隐私政策</text>
|
||||
<text v-if="agreementError" class="agreement-error"
|
||||
>请先阅读并同意用户协议与隐私政策</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="login-entry">
|
||||
<text>已有账号？</text>
|
||||
<view class="login-entry__link" hover-class="tap-fade" @click="prepareLogin">登录</view>
|
||||
<view
|
||||
class="login-entry__link"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareLogin"
|
||||
>登录</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -73,72 +158,73 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onUnload } from '@dcloudio/uni-app'
|
||||
import { ref } from "vue";
|
||||
import { onUnload } from "@dcloudio/uni-app";
|
||||
|
||||
const phone = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const agreed = ref(false)
|
||||
const agreementError = ref(false)
|
||||
const phone = ref("");
|
||||
const password = ref("");
|
||||
const confirmPassword = ref("");
|
||||
const agreed = ref(false);
|
||||
const agreementError = ref(false);
|
||||
const fieldErrors = ref({
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
const feedbackVisible = ref(false)
|
||||
const feedbackMessage = ref('')
|
||||
let feedbackTimer = null
|
||||
phone: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
const feedbackVisible = ref(false);
|
||||
const feedbackMessage = ref("");
|
||||
let feedbackTimer = null;
|
||||
|
||||
onUnload(() => {
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
})
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||||
});
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// “已有账号”用于退出注册流程，替换当前页可避免登录/注册页面反复叠加。
|
||||
const prepareLogin = () => uni.redirectTo({ url: '/pages/auth/a01-entry' })
|
||||
const prepareLogin = () => uni.redirectTo({ url: "/pages/auth/a01-entry" });
|
||||
|
||||
const showFeedback = (message) => {
|
||||
feedbackMessage.value = message
|
||||
feedbackVisible.value = true
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
feedbackMessage.value = message;
|
||||
feedbackVisible.value = true;
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||||
feedbackTimer = setTimeout(() => {
|
||||
feedbackVisible.value = false
|
||||
feedbackTimer = null
|
||||
}, 2200)
|
||||
}
|
||||
feedbackVisible.value = false;
|
||||
feedbackTimer = null;
|
||||
}, 2200);
|
||||
};
|
||||
|
||||
const prepareAgreement = () => showFeedback('协议页面准备中')
|
||||
const prepareAgreement = () => showFeedback("协议页面准备中");
|
||||
|
||||
const toggleAgreement = () => {
|
||||
agreed.value = !agreed.value
|
||||
if (agreed.value) agreementError.value = false
|
||||
}
|
||||
agreed.value = !agreed.value;
|
||||
if (agreed.value) agreementError.value = false;
|
||||
};
|
||||
|
||||
const clearFieldError = (field) => {
|
||||
fieldErrors.value[field] = ''
|
||||
}
|
||||
fieldErrors.value[field] = "";
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const nextErrors = { phone: '', password: '', confirmPassword: '' }
|
||||
if (!/^1\d{10}$/.test(phone.value)) nextErrors.phone = '请输入正确手机号'
|
||||
if (!password.value) nextErrors.password = '请设置密码'
|
||||
if (!confirmPassword.value) nextErrors.confirmPassword = '请再次输入密码'
|
||||
else if (password.value !== confirmPassword.value) nextErrors.confirmPassword = '两次输入的密码不一致'
|
||||
fieldErrors.value = nextErrors
|
||||
return !Object.values(nextErrors).some(Boolean)
|
||||
}
|
||||
const nextErrors = { phone: "", password: "", confirmPassword: "" };
|
||||
if (!/^1\d{10}$/.test(phone.value)) nextErrors.phone = "请输入正确手机号";
|
||||
if (!password.value) nextErrors.password = "请设置密码";
|
||||
if (!confirmPassword.value) nextErrors.confirmPassword = "请再次输入密码";
|
||||
else if (password.value !== confirmPassword.value)
|
||||
nextErrors.confirmPassword = "两次输入的密码不一致";
|
||||
fieldErrors.value = nextErrors;
|
||||
return !Object.values(nextErrors).some(Boolean);
|
||||
};
|
||||
|
||||
const submitRegister = () => {
|
||||
const formValid = validateForm()
|
||||
if (!agreed.value) agreementError.value = true
|
||||
if (!formValid || !agreed.value) return
|
||||
const formValid = validateForm();
|
||||
if (!agreed.value) agreementError.value = true;
|
||||
if (!formValid || !agreed.value) return;
|
||||
// 真实滑动验证由接口阶段的组件自带样式接管，本页不保留自定义假面板。
|
||||
showFeedback('滑动验证待接口接入')
|
||||
}
|
||||
showFeedback("滑动验证待接口接入");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -232,9 +318,13 @@ const submitRegister = () => {
|
||||
filter: brightness(0.68) saturate(1.5) contrast(1.2);
|
||||
}
|
||||
|
||||
.form-content { margin-top: 12rpx; }
|
||||
.form-content {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.field-block { min-height: 116rpx; }
|
||||
.field-block {
|
||||
min-height: 116rpx;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
@@ -257,7 +347,9 @@ const submitRegister = () => {
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.placeholder { color: #a79e94; }
|
||||
.placeholder {
|
||||
color: #a79e94;
|
||||
}
|
||||
|
||||
.field-error,
|
||||
.agreement-error {
|
||||
@@ -267,8 +359,13 @@ const submitRegister = () => {
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.field-error { padding-top: 4rpx; text-align: right; }
|
||||
.field-block--error .input-row { border-bottom-color: #b42318; }
|
||||
.field-error {
|
||||
padding-top: 4rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.field-block--error .input-row {
|
||||
border-bottom-color: #b42318;
|
||||
}
|
||||
|
||||
.register-submit {
|
||||
position: relative;
|
||||
@@ -295,7 +392,10 @@ const submitRegister = () => {
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.agreement-area { min-height: 118rpx; margin-top: 18rpx; }
|
||||
.agreement-area {
|
||||
min-height: 118rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
@@ -320,15 +420,28 @@ const submitRegister = () => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agreement-link { color: #a7160c; }
|
||||
.agreement-error { text-align: center; }
|
||||
.agreement-link {
|
||||
color: #a7160c;
|
||||
}
|
||||
.agreement-error {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agreement-area--error { animation: agreement-shake 240ms ease-out; }
|
||||
.agreement-area--error {
|
||||
animation: agreement-shake 240ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes agreement-shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
33% { transform: translateX(-8rpx); }
|
||||
66% { transform: translateX(8rpx); }
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
33% {
|
||||
transform: translateX(-8rpx);
|
||||
}
|
||||
66% {
|
||||
transform: translateX(8rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.login-entry {
|
||||
@@ -348,8 +461,12 @@ const submitRegister = () => {
|
||||
color: #a7160c;
|
||||
}
|
||||
|
||||
.tap-fade { opacity: 0.62; }
|
||||
.button-hover { opacity: 0.84; }
|
||||
.tap-fade {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.button-hover {
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
.feedback-toast {
|
||||
position: fixed;
|
||||
@@ -364,7 +481,7 @@ const submitRegister = () => {
|
||||
min-height: 82rpx;
|
||||
border: 16rpx solid transparent;
|
||||
border-width: 16rpx 74rpx;
|
||||
border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png');
|
||||
border-image-source: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png");
|
||||
border-image-slice: 58 280 fill;
|
||||
border-image-width: 16rpx 74rpx;
|
||||
border-image-repeat: stretch;
|
||||
@@ -380,5 +497,4 @@ const submitRegister = () => {
|
||||
font-size: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -2,76 +2,174 @@
|
||||
<template>
|
||||
<view class="auth-page reset-page">
|
||||
<view class="page-canvas">
|
||||
<image class="page-backdrop" src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png" mode="scaleToFill" />
|
||||
<image class="brand-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<image
|
||||
class="page-backdrop"
|
||||
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
class="brand-seal"
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
|
||||
<view class="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" />
|
||||
<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/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
|
||||
<image
|
||||
class="reset-divider"
|
||||
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.phone }">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<text class="input-label">手机号</text>
|
||||
<input v-model.trim="phone" class="auth-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" @input="clearFieldError('phone')" />
|
||||
<input
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('phone')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.phone" class="field-error">{{ fieldErrors.phone }}</text>
|
||||
<text v-if="fieldErrors.phone" class="field-error">{{
|
||||
fieldErrors.phone
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.verificationCode }">
|
||||
<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" @input="clearFieldError('verificationCode')" />
|
||||
<view class="get-code" hover-class="tap-fade" @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"
|
||||
>获取验证码</view
|
||||
>
|
||||
</view>
|
||||
<text v-if="fieldErrors.verificationCode" class="field-error">{{ fieldErrors.verificationCode }}</text>
|
||||
<text v-if="fieldErrors.verificationCode" class="field-error">{{
|
||||
fieldErrors.verificationCode
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.password }">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.password }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<text class="input-label">新密码</text>
|
||||
<input v-model="password" class="auth-input" password maxlength="32" placeholder="请设置新密码" placeholder-class="placeholder" @input="clearFieldError('password')" />
|
||||
<input
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
placeholder="请设置新密码"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('password')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.password" class="field-error">{{ fieldErrors.password }}</text>
|
||||
<text v-if="fieldErrors.password" class="field-error">{{
|
||||
fieldErrors.password
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view class="field-block" :class="{ 'field-block--error': fieldErrors.confirmPassword }">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<text class="input-label">确认新密码</text>
|
||||
<input v-model="confirmPassword" class="auth-input" password maxlength="32" placeholder="请再次输入新密码" placeholder-class="placeholder" @input="clearFieldError('confirmPassword')" />
|
||||
<input
|
||||
v-model="confirmPassword"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
placeholder="请再次输入新密码"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.confirmPassword" class="field-error">{{ fieldErrors.confirmPassword }}</text>
|
||||
<text v-if="fieldErrors.confirmPassword" class="field-error">{{
|
||||
fieldErrors.confirmPassword
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="reset-submit" hover-class="button-hover" @click="submitReset">
|
||||
<image class="reset-submit__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<view
|
||||
class="reset-submit"
|
||||
hover-class="button-hover"
|
||||
@click="submitReset"
|
||||
>
|
||||
<image
|
||||
class="reset-submit__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<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="tap-fade" @click="prepareLogin">返回登录</view>
|
||||
<view
|
||||
class="login-entry__link"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareLogin"
|
||||
>返回登录</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/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
class="success-dialog__skin"
|
||||
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<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/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<view
|
||||
class="success-action"
|
||||
hover-class="button-hover"
|
||||
@click="prepareLogin"
|
||||
>
|
||||
<image
|
||||
class="success-action__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="success-action__copy">返回登录</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -85,71 +183,78 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onUnload } from '@dcloudio/uni-app'
|
||||
import { ref } from "vue";
|
||||
import { onUnload } from "@dcloudio/uni-app";
|
||||
|
||||
const phone = ref('')
|
||||
const verificationCode = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const successVisible = ref(false)
|
||||
const feedbackVisible = ref(false)
|
||||
const feedbackMessage = ref('')
|
||||
const phone = ref("");
|
||||
const verificationCode = ref("");
|
||||
const password = ref("");
|
||||
const confirmPassword = ref("");
|
||||
const successVisible = ref(false);
|
||||
const feedbackVisible = ref(false);
|
||||
const feedbackMessage = ref("");
|
||||
const fieldErrors = ref({
|
||||
phone: '',
|
||||
verificationCode: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
let feedbackTimer = null
|
||||
phone: "",
|
||||
verificationCode: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
let feedbackTimer = null;
|
||||
|
||||
onUnload(() => {
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
})
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||||
});
|
||||
|
||||
const goBack = () => uni.navigateBack()
|
||||
const goBack = () => uni.navigateBack();
|
||||
|
||||
// 返回登录时替换当前认证页，避免登录与重设页反复叠加。
|
||||
const prepareLogin = () => uni.redirectTo({ url: '/pages/auth/a01-entry' })
|
||||
const prepareLogin = () => uni.redirectTo({ url: "/pages/auth/a01-entry" });
|
||||
|
||||
const showFeedback = (message) => {
|
||||
feedbackMessage.value = message
|
||||
feedbackVisible.value = true
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer)
|
||||
feedbackMessage.value = message;
|
||||
feedbackVisible.value = true;
|
||||
if (feedbackTimer) clearTimeout(feedbackTimer);
|
||||
feedbackTimer = setTimeout(() => {
|
||||
feedbackVisible.value = false
|
||||
feedbackTimer = null
|
||||
}, 2200)
|
||||
}
|
||||
feedbackVisible.value = false;
|
||||
feedbackTimer = null;
|
||||
}, 2200);
|
||||
};
|
||||
|
||||
const clearFieldError = (field) => {
|
||||
fieldErrors.value[field] = ''
|
||||
}
|
||||
fieldErrors.value[field] = "";
|
||||
};
|
||||
|
||||
const prepareGetCode = () => {
|
||||
if (!/^1\d{10}$/.test(phone.value)) {
|
||||
fieldErrors.value.phone = '请输入正确手机号'
|
||||
return
|
||||
fieldErrors.value.phone = "请输入正确手机号";
|
||||
return;
|
||||
}
|
||||
fieldErrors.value.phone = ''
|
||||
showFeedback('滑动验证待接口接入')
|
||||
}
|
||||
fieldErrors.value.phone = "";
|
||||
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 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 (!validateForm()) return
|
||||
successVisible.value = true
|
||||
}
|
||||
if (!validateForm()) return;
|
||||
successVisible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -217,12 +322,35 @@ const submitReset = () => {
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.back-button__icon { width: 42rpx; height: 42rpx; transform: scaleX(-1); }
|
||||
.page-title { color: #9f170f; 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: 300rpx; height: 50rpx; margin-top: 2rpx; filter: brightness(0.68) saturate(1.5) contrast(1.2); }
|
||||
.form-content { margin-top: 8rpx; }
|
||||
.field-block { min-height: 114rpx; }
|
||||
.back-button__icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.page-title {
|
||||
color: #9f170f;
|
||||
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: 300rpx;
|
||||
height: 50rpx;
|
||||
margin-top: 2rpx;
|
||||
filter: brightness(0.68) saturate(1.5) contrast(1.2);
|
||||
}
|
||||
.form-content {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.field-block {
|
||||
min-height: 114rpx;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
@@ -231,12 +359,39 @@ const submitReset = () => {
|
||||
border-bottom: 1rpx solid #cfaa70;
|
||||
}
|
||||
|
||||
.input-label { flex: 0 0 162rpx; color: #674b35; 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; }
|
||||
.input-label {
|
||||
flex: 0 0 162rpx;
|
||||
color: #674b35;
|
||||
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;
|
||||
@@ -249,11 +404,41 @@ const submitReset = () => {
|
||||
}
|
||||
|
||||
.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-size: 39rpx; 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; }
|
||||
.success-action__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.reset-submit__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fffaf0;
|
||||
font-size: 39rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.success-layer {
|
||||
position: fixed;
|
||||
@@ -267,23 +452,113 @@ const submitReset = () => {
|
||||
background: rgba(35, 18, 10, 0.62);
|
||||
}
|
||||
|
||||
.success-dialog { position: relative; width: 620rpx; height: 520rpx; }
|
||||
.success-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.success-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; height: 100%; padding: 64rpx 64rpx 42rpx; text-align: center; }
|
||||
.success-title { color: #8f160f; font-size: 43rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.success-copy { margin-top: 18rpx; color: #513a28; font-size: 26rpx; line-height: 40rpx; }
|
||||
.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: 82rpx; margin-top: 24rpx; overflow: hidden; }
|
||||
.success-action__copy { position: relative; z-index: 1; color: #fffaf0; font-size: 30rpx; letter-spacing: 4rpx; }
|
||||
.success-dialog {
|
||||
position: relative;
|
||||
width: 620rpx;
|
||||
height: 520rpx;
|
||||
}
|
||||
.success-dialog__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.success-dialog__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 64rpx 64rpx 42rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.success-title {
|
||||
color: #8f160f;
|
||||
font-size: 43rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.success-copy {
|
||||
margin-top: 18rpx;
|
||||
color: #513a28;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.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: 82rpx;
|
||||
margin-top: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.success-action__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fffaf0;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.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; box-sizing: border-box; width: 590rpx; min-height: 82rpx; border: 16rpx solid transparent; border-width: 16rpx 74rpx; border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png'); border-image-slice: 58 280 fill; border-image-width: 16rpx 74rpx; border-image-repeat: stretch; background: transparent; transform: translateX(-50%); }
|
||||
.feedback-toast__copy { position: relative; z-index: 1; padding: 16rpx 36rpx; 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;
|
||||
box-sizing: border-box;
|
||||
width: 590rpx;
|
||||
min-height: 82rpx;
|
||||
border: 16rpx solid transparent;
|
||||
border-width: 16rpx 74rpx;
|
||||
border-image-source: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png");
|
||||
border-image-slice: 58 280 fill;
|
||||
border-image-width: 16rpx 74rpx;
|
||||
border-image-repeat: stretch;
|
||||
background: transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.feedback-toast__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 16rpx 36rpx;
|
||||
color: #5c4330;
|
||||
font-size: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.tap-fade,
|
||||
.button-hover { opacity: 0.72; }
|
||||
.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; }
|
||||
.reset-content {
|
||||
padding-right: 48rpx;
|
||||
padding-left: 48rpx;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.input-label {
|
||||
flex-basis: 150rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+377
-109
@@ -2,58 +2,114 @@
|
||||
<template>
|
||||
<view class="auth-page status-page">
|
||||
<view class="page-canvas">
|
||||
<image class="page-backdrop" src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png" mode="scaleToFill" />
|
||||
<image class="brand-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<image
|
||||
class="page-backdrop"
|
||||
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<image
|
||||
class="brand-seal"
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
|
||||
<view class="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" />
|
||||
<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/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
|
||||
<image
|
||||
class="status-divider"
|
||||
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="status-body">
|
||||
<image class="status-icon" src="/static/assets/foundation/transparent/auth-login-outline.png" mode="aspectFit" />
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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="openRecovery">
|
||||
<image class="status-primary__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<view
|
||||
class="status-primary"
|
||||
hover-class="button-hover"
|
||||
@click="openRecovery"
|
||||
>
|
||||
<image
|
||||
class="status-primary__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="status-primary__copy">查看恢复方式</text>
|
||||
</view>
|
||||
<view class="status-secondary" hover-class="tap-fade" @click="goLogin">返回登录</view>
|
||||
<view class="status-secondary" hover-class="tap-fade" @click="goLogin"
|
||||
>返回登录</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
class="recovery-dialog__skin"
|
||||
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<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/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text class="recovery-note"
|
||||
>账号恢复服务将在功能阶段接入，当前仅审核页面样式与状态位置。</text
|
||||
>
|
||||
<view
|
||||
class="recovery-action"
|
||||
hover-class="button-hover"
|
||||
@click="closeRecovery"
|
||||
>
|
||||
<image
|
||||
class="recovery-action__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="recovery-action__copy">我知道了</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -63,77 +119,87 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
|
||||
const status = ref('risk')
|
||||
const recoveryVisible = ref(false)
|
||||
const status = ref("risk");
|
||||
const recoveryVisible = ref(false);
|
||||
|
||||
// A06 阻断状态的唯一合同；普通登录错误必须留在 A01 就近处理。
|
||||
const statusConfig = {
|
||||
frozen: {
|
||||
eyebrow: '账号冻结',
|
||||
title: '账号已被冻结',
|
||||
description: '当前账号因安全审核暂时无法登录。',
|
||||
reasonLabel: '限制原因',
|
||||
reason: '账号进入人工安全审核',
|
||||
impactLabel: '影响范围',
|
||||
impact: '暂时无法进入家谱及管理资料',
|
||||
recoveryLabel: '恢复方式',
|
||||
recovery: '提交账号申诉并等待审核结果',
|
||||
recoveryTitle: '申请解除冻结',
|
||||
recoveryDetail: '请准备注册手机号与身份说明，提交后由平台进行人工核验。'
|
||||
eyebrow: "账号冻结",
|
||||
title: "账号已被冻结",
|
||||
description: "当前账号因安全审核暂时无法登录。",
|
||||
reasonLabel: "限制原因",
|
||||
reason: "账号进入人工安全审核",
|
||||
impactLabel: "影响范围",
|
||||
impact: "暂时无法进入家谱及管理资料",
|
||||
recoveryLabel: "恢复方式",
|
||||
recovery: "提交账号申诉并等待审核结果",
|
||||
recoveryTitle: "申请解除冻结",
|
||||
recoveryDetail: "请准备注册手机号与身份说明，提交后由平台进行人工核验。",
|
||||
},
|
||||
disabled: {
|
||||
eyebrow: '账号停用',
|
||||
title: '账号已被停用',
|
||||
description: '当前账号处于停用状态，登录入口已关闭。',
|
||||
reasonLabel: '限制原因',
|
||||
reason: '账号已执行停用处理',
|
||||
impactLabel: '影响范围',
|
||||
impact: '无法登录，原有家谱资料不会被删除',
|
||||
recoveryLabel: '恢复方式',
|
||||
recovery: '联系平台核实停用原因与恢复条件',
|
||||
recoveryTitle: '联系平台核实',
|
||||
recoveryDetail: '请提供注册手机号和账号归属信息，平台核实后告知是否可以恢复。'
|
||||
eyebrow: "账号停用",
|
||||
title: "账号已被停用",
|
||||
description: "当前账号处于停用状态，登录入口已关闭。",
|
||||
reasonLabel: "限制原因",
|
||||
reason: "账号已执行停用处理",
|
||||
impactLabel: "影响范围",
|
||||
impact: "无法登录，原有家谱资料不会被删除",
|
||||
recoveryLabel: "恢复方式",
|
||||
recovery: "联系平台核实停用原因与恢复条件",
|
||||
recoveryTitle: "联系平台核实",
|
||||
recoveryDetail:
|
||||
"请提供注册手机号和账号归属信息，平台核实后告知是否可以恢复。",
|
||||
},
|
||||
risk: {
|
||||
eyebrow: '风险限制',
|
||||
title: '账号存在安全风险',
|
||||
description: '系统检测到异常登录，为保护家谱资料已暂停本次登录。',
|
||||
reasonLabel: '限制原因',
|
||||
reason: '登录环境或操作行为存在异常',
|
||||
impactLabel: '影响范围',
|
||||
impact: '本次登录被阻断，账号资料保持不变',
|
||||
recoveryLabel: '恢复方式',
|
||||
recovery: '完成身份核验后重新登录',
|
||||
recoveryTitle: '完成身份核验',
|
||||
recoveryDetail: '请使用注册手机号完成身份核验；核验通过后可重新尝试登录。'
|
||||
}
|
||||
}
|
||||
eyebrow: "风险限制",
|
||||
title: "账号存在安全风险",
|
||||
description: "系统检测到异常登录，为保护家谱资料已暂停本次登录。",
|
||||
reasonLabel: "限制原因",
|
||||
reason: "登录环境或操作行为存在异常",
|
||||
impactLabel: "影响范围",
|
||||
impact: "本次登录被阻断，账号资料保持不变",
|
||||
recoveryLabel: "恢复方式",
|
||||
recovery: "完成身份核验后重新登录",
|
||||
recoveryTitle: "完成身份核验",
|
||||
recoveryDetail: "请使用注册手机号完成身份核验；核验通过后可重新尝试登录。",
|
||||
},
|
||||
};
|
||||
|
||||
const currentState = computed(() => statusConfig[status.value])
|
||||
const currentState = computed(() => statusConfig[status.value]);
|
||||
|
||||
const resolveStatus = () => {
|
||||
let requestedStatus = 'risk'
|
||||
if (typeof location !== 'undefined') {
|
||||
const query = new URLSearchParams(location.hash.split('?')[1] || '')
|
||||
requestedStatus = query.get('status') || 'risk'
|
||||
let requestedStatus = "risk";
|
||||
if (typeof location !== "undefined") {
|
||||
const query = new URLSearchParams(location.hash.split("?")[1] || "");
|
||||
requestedStatus = query.get("status") || "risk";
|
||||
} else {
|
||||
const pages = getCurrentPages()
|
||||
requestedStatus = pages[pages.length - 1]?.options?.status || 'risk'
|
||||
const pages = getCurrentPages();
|
||||
requestedStatus = pages[pages.length - 1]?.options?.status || "risk";
|
||||
}
|
||||
status.value = Object.prototype.hasOwnProperty.call(statusConfig, requestedStatus) ? requestedStatus : 'risk'
|
||||
recoveryVisible.value = false
|
||||
}
|
||||
status.value = Object.prototype.hasOwnProperty.call(
|
||||
statusConfig,
|
||||
requestedStatus,
|
||||
)
|
||||
? requestedStatus
|
||||
: "risk";
|
||||
recoveryVisible.value = false;
|
||||
};
|
||||
|
||||
onLoad(resolveStatus)
|
||||
onShow(resolveStatus)
|
||||
onLoad(resolveStatus);
|
||||
onShow(resolveStatus);
|
||||
|
||||
const goLogin = () => uni.redirectTo({ url: '/pages/auth/a01-entry' })
|
||||
const openRecovery = () => { recoveryVisible.value = true }
|
||||
const closeRecovery = () => { recoveryVisible.value = false }
|
||||
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">
|
||||
@@ -148,48 +214,250 @@ const goBack = () => uni.navigateBack()
|
||||
color: #493323;
|
||||
}
|
||||
|
||||
.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: 184rpx; height: 221rpx; 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-size: 66rpx; font-weight: 700; letter-spacing: 7rpx; }
|
||||
.page-subtitle { margin-top: 12rpx; color: #806c58; font-size: 25rpx; letter-spacing: 1rpx; }
|
||||
.status-divider { width: 300rpx; height: 50rpx; margin-top: 2rpx; filter: brightness(0.68) saturate(1.5) contrast(1.2); }
|
||||
.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: 184rpx;
|
||||
height: 221rpx;
|
||||
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-size: 66rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 7rpx;
|
||||
}
|
||||
.page-subtitle {
|
||||
margin-top: 12rpx;
|
||||
color: #806c58;
|
||||
font-size: 25rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.status-divider {
|
||||
width: 300rpx;
|
||||
height: 50rpx;
|
||||
margin-top: 2rpx;
|
||||
filter: brightness(0.68) saturate(1.5) contrast(1.2);
|
||||
}
|
||||
|
||||
.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-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-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-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 {
|
||||
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-size: 38rpx; letter-spacing: 5rpx; }
|
||||
.status-secondary { display: flex; align-items: center; justify-content: center; min-height: 82rpx; color: #a7160c; font-size: 24rpx; }
|
||||
.recovery-action__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.status-primary__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fffaf0;
|
||||
font-size: 38rpx;
|
||||
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: 620rpx; height: 520rpx; }
|
||||
.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; height: 100%; padding: 58rpx 58rpx 36rpx; text-align: center; }
|
||||
.recovery-title { color: #8f160f; font-size: 42rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.recovery-copy { margin-top: 20rpx; color: #513a28; font-size: 26rpx; line-height: 40rpx; }
|
||||
.recovery-note { margin-top: 12rpx; color: #8d7965; font-size: 20rpx; line-height: 31rpx; }
|
||||
.recovery-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 80rpx; margin-top: 22rpx; overflow: hidden; }
|
||||
.recovery-action__copy { position: relative; z-index: 1; color: #fffaf0; font-size: 29rpx; letter-spacing: 4rpx; }
|
||||
.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: 620rpx;
|
||||
height: 520rpx;
|
||||
}
|
||||
.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;
|
||||
height: 100%;
|
||||
padding: 58rpx 58rpx 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.recovery-title {
|
||||
color: #8f160f;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.recovery-copy {
|
||||
margin-top: 20rpx;
|
||||
color: #513a28;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.recovery-note {
|
||||
margin-top: 12rpx;
|
||||
color: #8d7965;
|
||||
font-size: 20rpx;
|
||||
line-height: 31rpx;
|
||||
}
|
||||
.recovery-action {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
margin-top: 22rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.recovery-action__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #fffaf0;
|
||||
font-size: 29rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.tap-fade,
|
||||
.button-hover { opacity: 0.72; }
|
||||
.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; }
|
||||
.status-content {
|
||||
padding-right: 48rpx;
|
||||
padding-left: 48rpx;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
.status-detail__label {
|
||||
flex-basis: 108rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,42 +3,93 @@
|
||||
<view class="overview-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="overview-page__header">
|
||||
<PageHeader :title="viewMode === 'public' ? '家谱公开预览' : '家谱总览'" :action="overviewState === 'ready' && viewMode === 'member' && accessRole === 'owner' ? '管理' : ''" @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" />
|
||||
<view
|
||||
class="overview-surface"
|
||||
:class="{ 'overview-surface--state': overviewState !== 'ready' }"
|
||||
>
|
||||
<image
|
||||
class="overview-surface__skin"
|
||||
src="/static/assets/modules/genealogy/opaque/g05-overview-surface.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
||||
<template v-if="overviewState === 'ready' && genealogy && viewMode === 'member'">
|
||||
<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>
|
||||
<text class="overview-hero__kicker"
|
||||
>{{ genealogy.hall || "堂号待补" }} ·
|
||||
{{ genealogy.location || "所在地待补" }}</text
|
||||
>
|
||||
<text class="overview-hero__title">{{ genealogy.name }}</text>
|
||||
<text class="overview-hero__motto">{{ genealogy.motto || '敦亲睦族，敬祖传家。' }}</text>
|
||||
<text class="overview-hero__motto">{{
|
||||
genealogy.motto || "敦亲睦族，敬祖传家。"
|
||||
}}</text>
|
||||
<view class="overview-hero__stats">
|
||||
<text>共 {{ genealogy.memberCount || 0 }} 人</text>
|
||||
<text>已激活 {{ genealogy.activeCount || 0 }} 人</text>
|
||||
<text>{{ genealogy.visibility || '仅成员可见' }}</text>
|
||||
<text>{{ genealogy.visibility || "仅成员可见" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="overview-actions" :class="{ 'overview-actions--member': accessRole === 'member' }">
|
||||
<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>
|
||||
<text class="overview-action__title">世系树</text
|
||||
><text>查看家脉关系</text>
|
||||
</view>
|
||||
<view v-if="accessRole === 'owner'" class="overview-action overview-action--ancestor" @click="toFirstPerson">
|
||||
<text class="overview-action__title">录入族人</text><text>从首代开始完善</text>
|
||||
<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 v-else class="overview-action-lock">
|
||||
<text class="overview-action__title">录入族人</text
|
||||
><text>仅管理员可用</text>
|
||||
</view>
|
||||
<view v-if="accessRole === 'owner'" class="overview-action overview-action--review" @click="toApplications">
|
||||
<text class="overview-action__title">入谱审核</text><text>处理加入申请</text>
|
||||
<view
|
||||
class="overview-action overview-action--poem"
|
||||
@click="toGenerationPoems"
|
||||
>
|
||||
<text class="overview-action__title">字辈谱</text
|
||||
><text>传承行辈次序</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="accessRole === 'owner'"
|
||||
class="overview-action overview-action--review"
|
||||
@click="toApplications"
|
||||
>
|
||||
<text class="overview-action__title">入谱审核</text
|
||||
><text>处理加入申请</text>
|
||||
</view>
|
||||
<view v-else class="overview-action-lock">
|
||||
<text class="overview-action__title">入谱审核</text
|
||||
><text>仅管理员可用</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="overview-family" @click="toFamily">
|
||||
<text>家族近况</text><text>进入家族圈查看动态</text><text>查看</text>
|
||||
<text>家族近况</text><text>进入家族圈查看动态</text
|
||||
><text>查看</text>
|
||||
</view>
|
||||
<view class="overview-note">
|
||||
<text class="overview-note__title">家谱资料，仅向家人开放</text>
|
||||
@@ -47,40 +98,97 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else-if="overviewState === 'ready' && genealogy" class="overview-public">
|
||||
<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
|
||||
><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/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<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--no-permission': overviewState === 'no-permission'
|
||||
}">
|
||||
<text class="overview-state-panel__title">{{ stateTitle }}</text>
|
||||
<text class="overview-state-panel__copy">{{ stateCopy }}</text>
|
||||
<view v-if="overviewState !== 'loading'" class="overview-state-panel__action" @click="overviewState === 'error' ? reloadOverview() : toGenealogies()">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text>{{ overviewState === 'error' ? '重新查看' : '返回我的家谱' }}</text>
|
||||
<view
|
||||
v-else-if="overviewState === 'loading'"
|
||||
class="overview-state overview-state--loading"
|
||||
>
|
||||
<image
|
||||
class="overview-state__frame"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<AppLoading
|
||||
text="正在展开家谱"
|
||||
description="请稍候，正在读取家谱概览。"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="overview-state overview-state-panel"
|
||||
:class="{
|
||||
'overview-state--loading': overviewState === 'loading',
|
||||
'overview-state--empty': overviewState === 'empty',
|
||||
'overview-state--error': overviewState === 'error',
|
||||
'overview-state--no-permission': overviewState === 'no-permission',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="overview-state__frame"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="overview-state__content">
|
||||
<image
|
||||
class="overview-state__seal"
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="overview-state-panel__title">{{ stateTitle }}</text>
|
||||
<text class="overview-state-panel__copy">{{ stateCopy }}</text>
|
||||
<view
|
||||
class="overview-state-panel__action"
|
||||
@click="
|
||||
overviewState === 'error' ? reloadOverview() : toGenealogies()
|
||||
"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
overviewState === "error" ? "重新查看" : "返回我的家谱"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -88,126 +196,452 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
|
||||
const genealogy = ref(null)
|
||||
const genealogyId = ref('')
|
||||
const overviewState = ref('loading')
|
||||
const loadError = ref('')
|
||||
const viewMode = ref('member')
|
||||
const accessRole = ref('owner')
|
||||
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: '敦亲睦族，敬祖传家。',
|
||||
id: "2001",
|
||||
surname: "汤",
|
||||
name: "汤氏南阳宗谱",
|
||||
hall: "敦睦堂",
|
||||
location: "河南·南阳",
|
||||
parentName: "汤氏中华总谱",
|
||||
branchName: "南阳主支",
|
||||
source: "由南阳汤氏族人整理并维护",
|
||||
publicDescription:
|
||||
"公开展示家谱身份、地区、堂号与支系信息；成员资料和世系详情仅向已加入成员开放。",
|
||||
motto: "敦亲睦族，敬祖传家。",
|
||||
memberCount: 428,
|
||||
activeCount: 316,
|
||||
visibility: '仅成员可见'
|
||||
}
|
||||
visibility: "仅成员可见",
|
||||
};
|
||||
|
||||
const stateTitle = computed(() => ({
|
||||
loading: '正在展开家谱…',
|
||||
empty: '还没有可查看的家谱',
|
||||
error: '家谱暂时无法打开',
|
||||
'no-permission': '当前账号无权查看'
|
||||
}[overviewState.value] || ''))
|
||||
const stateCopy = computed(() => loadError.value || ({
|
||||
loading: '请稍候，正在读取家谱概览。',
|
||||
empty: '请从“我的家谱”选择一部家谱后再进入。',
|
||||
error: '可能是网络波动或家谱不存在。',
|
||||
'no-permission': '这部家谱未向当前账号开放，请返回我的家谱或联系管理员。'
|
||||
}[overviewState.value] || ''))
|
||||
const stateTitle = computed(
|
||||
() =>
|
||||
({
|
||||
loading: "正在展开家谱…",
|
||||
empty: "还没有可查看的家谱",
|
||||
error: "家谱暂时无法打开",
|
||||
"no-permission": "当前账号无权查看",
|
||||
})[overviewState.value] || "",
|
||||
);
|
||||
const stateCopy = computed(
|
||||
() =>
|
||||
loadError.value ||
|
||||
{
|
||||
loading: "请稍候，正在读取家谱概览。",
|
||||
empty: "请从“我的家谱”选择一部家谱后再进入。",
|
||||
error: "可能是网络波动或家谱不存在。",
|
||||
"no-permission": "这部家谱未向当前账号开放，请返回我的家谱或联系管理员。",
|
||||
}[overviewState.value] ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadGenealogy = (query = {}) => {
|
||||
overviewState.value = 'loading'
|
||||
loadError.value = ''
|
||||
genealogy.value = null
|
||||
genealogyId.value = query.genealogyId || genealogyId.value || ''
|
||||
viewMode.value = query.mode === 'public' ? 'public' : 'member'
|
||||
accessRole.value = query.role === 'member' ? 'member' : 'owner'
|
||||
overviewState.value = "loading";
|
||||
loadError.value = "";
|
||||
genealogy.value = null;
|
||||
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'
|
||||
return
|
||||
if (query.state === "empty" || !genealogyId.value) {
|
||||
overviewState.value = "empty";
|
||||
return;
|
||||
}
|
||||
if (query.state === 'error') {
|
||||
overviewState.value = 'error'
|
||||
return
|
||||
if (query.state === "error") {
|
||||
overviewState.value = "error";
|
||||
return;
|
||||
}
|
||||
if (query.state === 'no-permission') {
|
||||
overviewState.value = 'no-permission'
|
||||
return
|
||||
if (query.state === "no-permission") {
|
||||
overviewState.value = "no-permission";
|
||||
return;
|
||||
}
|
||||
if (query.state === 'loading') return
|
||||
if (query.state === "loading") return;
|
||||
|
||||
genealogy.value = { ...overviewFixture, id: genealogyId.value }
|
||||
overviewState.value = 'ready'
|
||||
}
|
||||
genealogy.value = { ...overviewFixture, id: genealogyId.value };
|
||||
overviewState.value = "ready";
|
||||
};
|
||||
|
||||
onLoad(loadGenealogy)
|
||||
const reloadOverview = () => loadGenealogy({ genealogyId: genealogyId.value })
|
||||
const toGenealogies = () => uni.reLaunch({ url: '/pages/genealogy/g01-my-genealogies' })
|
||||
const toTree = () => uni.navigateTo({ url: `/pages/tree/t01-tree-overview?genealogyId=${genealogyId.value}` })
|
||||
const toFirstPerson = () => uni.navigateTo({ url: `/pages/genealogy/g03-create-genealogy?step=ancestor&genealogyId=${genealogyId.value}` })
|
||||
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}` })
|
||||
onLoad(loadGenealogy);
|
||||
const reloadOverview = () => loadGenealogy({ genealogyId: genealogyId.value });
|
||||
const toGenealogies = () =>
|
||||
uni.reLaunch({ url: "/pages/genealogy/g01-my-genealogies" });
|
||||
const toTree = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t01-tree-overview?genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
const toFirstPerson = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/genealogy/g03-create-genealogy?step=ancestor&genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
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-x: hidden; background: $paper; }
|
||||
.overview-page__header { position: relative; z-index: 3; }
|
||||
.overview-surface { position: relative; z-index: 2; width: 100%; height: min(483px, calc(100vw * 1.3422)); }
|
||||
.overview-surface__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.overview-ready { position: absolute; inset: 0; }
|
||||
.overview-hero { position: absolute; top: 6.5%; right: 8%; left: 8%; color: #fff8ec; }
|
||||
.overview-hero__kicker { display: block; color: #dec483; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.overview-hero__title { display: block; margin-top: 12rpx; font-family: 'STKaiti', 'KaiTi', serif; font-size: 46rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.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-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; }
|
||||
.overview-note { position: absolute; top: 80.5%; right: 8.5%; left: 8.5%; display: flex; flex-direction: column; justify-content: center; height: 15%; color: $ink-muted; font-size: 22rpx; line-height: 1.6; }
|
||||
.overview-note__title { margin-bottom: 8rpx; color: $brand-red; font-family: 'STKaiti', 'KaiTi', serif; font-size: 28rpx; font-weight: 700; }
|
||||
.overview-state-panel { position: absolute; top: 29%; right: 8%; left: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48%; padding: 0 40rpx; box-sizing: border-box; text-align: center; }
|
||||
.overview-state-panel__title { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 34rpx; font-weight: 700; }
|
||||
.overview-state-panel__copy { max-width: 480rpx; margin-top: 18rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.7; }
|
||||
.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; }
|
||||
.overview-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.overview-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.overview-surface {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: min(483px, calc(100vw * 1.3422));
|
||||
}
|
||||
.overview-surface__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.overview-surface--state {
|
||||
height: calc(100vh - 112rpx);
|
||||
min-height: 1040rpx;
|
||||
}
|
||||
.overview-surface--state .overview-surface__skin {
|
||||
display: none;
|
||||
}
|
||||
.overview-ready {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.overview-hero {
|
||||
position: absolute;
|
||||
top: 6.5%;
|
||||
right: 8%;
|
||||
left: 8%;
|
||||
color: #fff8ec;
|
||||
}
|
||||
.overview-hero__kicker {
|
||||
display: block;
|
||||
color: #dec483;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.overview-hero__title {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.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 1fr;
|
||||
height: 36.2%;
|
||||
}
|
||||
.overview-action,
|
||||
.overview-action-lock {
|
||||
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-lock {
|
||||
opacity: 0.58;
|
||||
}
|
||||
.overview-action__title {
|
||||
margin-bottom: 9rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.overview-note {
|
||||
position: absolute;
|
||||
top: 80.5%;
|
||||
right: 8.5%;
|
||||
left: 8.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 15%;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.overview-note__title {
|
||||
margin-bottom: 8rpx;
|
||||
color: $brand-red;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-state {
|
||||
position: absolute;
|
||||
top: 28rpx;
|
||||
right: 28rpx;
|
||||
bottom: 28rpx;
|
||||
left: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.overview-state__frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overview-state__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 48rpx 34rpx;
|
||||
}
|
||||
.overview-state--loading .app-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.overview-state__seal {
|
||||
width: 132rpx;
|
||||
height: 136rpx;
|
||||
}
|
||||
.overview-state-panel__title {
|
||||
margin-top: 28rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-state-panel__copy {
|
||||
max-width: 520rpx;
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 27rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.overview-state-panel__action {
|
||||
position: relative;
|
||||
width: 560rpx;
|
||||
height: 124rpx;
|
||||
margin-top: 34rpx;
|
||||
}
|
||||
.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: 31rpx;
|
||||
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 > view:nth-child(5) {
|
||||
position: absolute;
|
||||
top: 250rpx;
|
||||
right: 0;
|
||||
left: 0;
|
||||
grid-column: 1 / -1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
.overview-public__details > view:nth-child(5) text:first-child {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.overview-public__details > view:nth-child(5) text:last-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.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: 78%;
|
||||
right: 9%;
|
||||
left: 9%;
|
||||
display: flex;
|
||||
color: $ink-muted;
|
||||
font-size: 19rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
.overview-public__notice text:first-child {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 12rpx;
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.overview-public__action {
|
||||
position: absolute;
|
||||
right: 9%;
|
||||
bottom: 2%;
|
||||
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; }
|
||||
.overview-hero {
|
||||
top: 7%;
|
||||
}
|
||||
.overview-action {
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,23 +2,39 @@
|
||||
<template>
|
||||
<view class="review-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="review-page__header"><PageHeader title="入谱审核" action="说明" @action="showHelp" /></view>
|
||||
<view class="review-page__header"
|
||||
><PageHeader title="入谱审核" action="说明" @action="showHelp"
|
||||
/></view>
|
||||
|
||||
<view class="review-content" :class="{
|
||||
'review-state--list': reviewState === 'list',
|
||||
'review-state--empty': reviewState === 'empty',
|
||||
'review-state--error': reviewState === 'error',
|
||||
'review-state--no-permission': reviewState === 'no-permission'
|
||||
}">
|
||||
<view class="review-intro">
|
||||
<view
|
||||
class="review-content"
|
||||
:class="{
|
||||
'review-state--list': reviewState === 'list',
|
||||
'review-state--empty': reviewState === 'empty',
|
||||
'review-state--error': reviewState === 'error',
|
||||
'review-state--no-permission': reviewState === 'no-permission',
|
||||
}"
|
||||
>
|
||||
<view v-if="reviewState !== 'loading'" class="review-intro">
|
||||
<text>核实亲属关系后再决定</text>
|
||||
<text>审核结果会通过消息告知申请人</text>
|
||||
<image src="/static/assets/modules/genealogy/transparent/section-divider.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<template v-if="reviewState === 'list'">
|
||||
<view v-for="item in applications" :key="item.id" class="application-card">
|
||||
<image class="application-card__skin" src="/static/assets/modules/genealogy/opaque/application-record-card.png" mode="scaleToFill" />
|
||||
<view
|
||||
v-for="item in applications"
|
||||
:key="item.id"
|
||||
class="application-card"
|
||||
>
|
||||
<image
|
||||
class="application-card__skin"
|
||||
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="application-card__body">
|
||||
<text class="application-card__name">{{ item.name }}</text>
|
||||
<text class="application-card__phone">{{ item.phone }}</text>
|
||||
@@ -26,34 +42,93 @@
|
||||
<text class="application-card__relation">{{ item.relation }}</text>
|
||||
<view v-if="item.status === 'PENDING'" class="review-actions">
|
||||
<view class="review-action" @click="confirmAudit(item, false)">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text>拒绝</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-secondary-button-v2.png"
|
||||
mode="aspectFit"
|
||||
/><text>拒绝申请</text>
|
||||
</view>
|
||||
<view class="review-action" @click="confirmAudit(item, true)">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>通过</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-primary-button-v2.png"
|
||||
mode="aspectFit"
|
||||
/><text>通过申请</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-else class="application-card__status">{{ item.status === 'APPROVED' ? '已通过' : '已拒绝' }}</text>
|
||||
<view
|
||||
v-else
|
||||
class="review-result"
|
||||
:class="
|
||||
item.status === 'APPROVED'
|
||||
? 'review-result--approved'
|
||||
: 'review-result--rejected'
|
||||
"
|
||||
>
|
||||
<image
|
||||
:src="
|
||||
item.status === 'APPROVED'
|
||||
? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
|
||||
: '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
|
||||
"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="application-card__status">{{
|
||||
item.status === "APPROVED" ? "已通过" : "已拒绝"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<AppLoading
|
||||
v-else-if="reviewState === 'loading'"
|
||||
text="正在整理审核申请"
|
||||
description="请稍候，正在读取待审核记录。"
|
||||
/>
|
||||
<view v-else class="review-state-card">
|
||||
<image src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="review-state-card__copy">
|
||||
<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/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>重新查看</text>
|
||||
<view
|
||||
v-if="reviewState === 'error'"
|
||||
class="review-page__retry"
|
||||
@click="loadApplications({ genealogyId })"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>重新查看</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<AppDialog
|
||||
:visible="!!confirmation || helpVisible"
|
||||
:title="helpVisible ? '审核说明' : confirmation?.approved ? '确认通过申请？' : '确认拒绝申请？'"
|
||||
:message="helpVisible ? '请核对申请人的姓名、亲属关系和补充说明，仅确认与本家谱存在真实关系的申请。' : confirmation?.approved ? '通过后，申请人将成为本家谱成员。' : '拒绝后，申请人会收到审核结果，并可修改后重新申请。'"
|
||||
:confirm-text="helpVisible ? '我知道了' : confirmation?.approved ? '确认通过' : '确认拒绝'"
|
||||
:title="
|
||||
helpVisible
|
||||
? '审核说明'
|
||||
: confirmation?.approved
|
||||
? '确认通过申请？'
|
||||
: '确认拒绝申请？'
|
||||
"
|
||||
:message="
|
||||
helpVisible
|
||||
? '请核对申请人的姓名、亲属关系和补充说明，仅确认与本家谱存在真实关系的申请。'
|
||||
: confirmation?.approved
|
||||
? '通过后，申请人将成为本家谱成员。'
|
||||
: '拒绝后，申请人会收到审核结果，并可修改后重新申请。'
|
||||
"
|
||||
:confirm-text="
|
||||
helpVisible
|
||||
? '我知道了'
|
||||
: confirmation?.approved
|
||||
? '确认通过'
|
||||
: '确认拒绝'
|
||||
"
|
||||
:show-cancel="!!confirmation"
|
||||
@confirm="helpVisible ? closeDialog() : applyAudit()"
|
||||
@cancel="closeDialog"
|
||||
@@ -61,106 +136,362 @@
|
||||
/>
|
||||
|
||||
<view v-if="feedbackVisible" class="review-feedback">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-toast-v3.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-toast-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ feedbackMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import AppDialog from '@/components/AppDialog.vue'
|
||||
import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
|
||||
const applications = ref([])
|
||||
const applications = ref([]);
|
||||
const reviewSamples = [
|
||||
{ id: 1, name: '汤志成', phone: '139****6421', relation: '自述为汤正华堂侄 · 祖居洛阳', appliedAt: '今天 10:24', status: 'PENDING' },
|
||||
{ id: 2, name: '汤雨薇', phone: '136****2798', relation: '自述为汤正国之女 · 已补充长辈姓名', appliedAt: '昨天 18:02', status: 'PENDING' }
|
||||
]
|
||||
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 || '请检查网络或家谱权限后重试。')
|
||||
{
|
||||
id: 1,
|
||||
name: "汤志成",
|
||||
phone: "139****6421",
|
||||
relation: "自述为汤正华堂侄 · 祖居洛阳",
|
||||
appliedAt: "今天 10:24",
|
||||
status: "PENDING",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "汤雨薇",
|
||||
phone: "136****2798",
|
||||
relation: "自述为汤正国之女 · 已补充长辈姓名",
|
||||
appliedAt: "昨天 18:02",
|
||||
status: "PENDING",
|
||||
},
|
||||
];
|
||||
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'
|
||||
errorMessage.value = ''
|
||||
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'
|
||||
return
|
||||
reviewState.value = "loading";
|
||||
errorMessage.value = "";
|
||||
genealogyId.value =
|
||||
query.genealogyId?.value ||
|
||||
query.genealogyId ||
|
||||
genealogyId.value ||
|
||||
genealogyContext.getCurrentGenealogyId();
|
||||
if (query.state === "loading") {
|
||||
reviewState.value = "loading";
|
||||
return;
|
||||
}
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value)
|
||||
applications.value = reviewSamples.map((item) => ({ ...item }))
|
||||
reviewState.value = 'list'
|
||||
}
|
||||
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";
|
||||
return;
|
||||
}
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value);
|
||||
applications.value = reviewSamples.map((item) => ({ ...item }));
|
||||
reviewState.value = "list";
|
||||
};
|
||||
|
||||
onLoad(loadApplications)
|
||||
onLoad(loadApplications);
|
||||
const confirmAudit = (item, approved) => {
|
||||
confirmation.value = { item, approved }
|
||||
}
|
||||
const closeDialog = () => { confirmation.value = null; helpVisible.value = false }
|
||||
confirmation.value = { item, approved };
|
||||
};
|
||||
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)
|
||||
}
|
||||
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 }
|
||||
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-x: hidden; background: $paper; }
|
||||
.review-page__header { position: relative; z-index: 3; }
|
||||
.review-content { position: relative; z-index: 2; padding: 24rpx 24rpx 60rpx; }
|
||||
.review-intro { position: relative; margin: 0 8rpx 24rpx; padding-bottom: 22rpx; }
|
||||
.review-intro text { display: block; }
|
||||
.review-intro text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; }
|
||||
.review-intro text:nth-child(2) { margin-top: 8rpx; color: $ink-muted; font-size: 21rpx; }
|
||||
.review-intro image { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 14rpx; }
|
||||
.application-card { position: relative; width: 100%; height: calc((100vw - 24px) * .34286); min-height: 228rpx; max-height: 282rpx; margin-bottom: 18rpx; }
|
||||
.application-card__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.application-card__body { position: absolute; inset: 18% 7% 12% 8.5%; }
|
||||
.application-card__name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; }
|
||||
.application-card__phone { margin-left: 14rpx; color: $ink-muted; font-size: 20rpx; }
|
||||
.application-card__time { position: absolute; top: 3rpx; right: 0; color: #998873; font-size: 20rpx; }
|
||||
.application-card__relation { display: block; max-width: 58%; margin-top: 15rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.review-actions { position: absolute; right: 0; bottom: 0; display: flex; gap: 12rpx; }
|
||||
.review-action { position: relative; width: 128rpx; height: 60rpx; }
|
||||
.review-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.review-action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.review-action:last-child text { color: #fff9ed; }
|
||||
.application-card__status { position: absolute; right: 3%; bottom: 10%; color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||||
.review-state-card { position: relative; width: 100%; height: calc((100vw - 24px) * .34286); min-height: 228rpx; margin-top: 70rpx; }
|
||||
.review-state-card > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.review-state-card__copy { position: absolute; inset: 22% 12%; display: flex; flex-direction: column; justify-content: center; text-align: center; }
|
||||
.review-state-card__copy text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
|
||||
.review-state-card__copy text:last-child { margin-top: 15rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.6; }
|
||||
.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-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; }
|
||||
.review-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.review-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.review-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 24rpx 24rpx 60rpx;
|
||||
}
|
||||
.review-intro {
|
||||
position: relative;
|
||||
margin: 0 8rpx 24rpx;
|
||||
padding-bottom: 22rpx;
|
||||
}
|
||||
.review-intro text {
|
||||
display: block;
|
||||
}
|
||||
.review-intro text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 29rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.review-intro text:nth-child(2) {
|
||||
margin-top: 8rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.review-intro image {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 14rpx;
|
||||
}
|
||||
.application-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc((100vw - 24px) * 0.34286);
|
||||
min-height: 228rpx;
|
||||
max-height: 282rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
.application-card__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.application-card__body {
|
||||
position: absolute;
|
||||
inset: 18% 7% 12% 8.5%;
|
||||
}
|
||||
.application-card__name {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.application-card__phone {
|
||||
margin-left: 14rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.application-card__time {
|
||||
position: absolute;
|
||||
top: 3rpx;
|
||||
right: 0;
|
||||
color: #998873;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.application-card__relation {
|
||||
display: block;
|
||||
max-width: 52%;
|
||||
margin-top: 15rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.review-actions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.review-action {
|
||||
position: relative;
|
||||
width: 148rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.review-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.review-action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.review-action:last-child text {
|
||||
color: #fff9ed;
|
||||
}
|
||||
.review-result {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 308rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.review-result image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.application-card__status {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.review-result--approved .application-card__status {
|
||||
color: #fff9ed;
|
||||
}
|
||||
.review-result--rejected .application-card__status {
|
||||
color: $ink;
|
||||
}
|
||||
.review-state-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc((100vw - 24px) * 0.34286);
|
||||
min-height: 228rpx;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
.review-state-card > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.review-state-card__copy {
|
||||
position: absolute;
|
||||
inset: 22% 12%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.review-state-card__copy text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.review-state-card__copy text:last-child {
|
||||
margin-top: 15rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.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-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>
|
||||
|
||||
@@ -4,142 +4,433 @@
|
||||
<GenealogyPageBackground />
|
||||
<view class="settings-page__header"><PageHeader title="家谱设置" /></view>
|
||||
|
||||
<view class="settings-panel" :class="{
|
||||
'settings-state--form': settingsState === 'form',
|
||||
'settings-state--success': settingsState === 'success',
|
||||
'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" />
|
||||
<view
|
||||
class="settings-panel"
|
||||
:class="{
|
||||
'settings-state--form': settingsState === 'form',
|
||||
'settings-state--success': settingsState === 'success',
|
||||
'settings-state--error': settingsState === 'error',
|
||||
'settings-state--no-permission': settingsState === 'no-permission',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="settings-panel__skin"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
||||
<view v-if="settingsState === 'form'" class="settings-form">
|
||||
<AppLoading
|
||||
v-if="settingsState === 'loading'"
|
||||
text="正在读取家谱设置"
|
||||
description="请稍候，正在准备名称与访问规则。"
|
||||
/>
|
||||
<view v-else-if="settingsState === 'form'" class="settings-form">
|
||||
<text class="settings-form__eyebrow">谱主可见 · 基础设置</text>
|
||||
<text class="settings-form__title">完善家谱访问规则</text>
|
||||
<text class="settings-form__copy">这里仅安排接口支持的名称、公开范围与访问说明；管理权转让将在成员选择场景中单独处理。</text>
|
||||
<text class="settings-form__copy"
|
||||
>这里仅安排接口支持的名称、公开范围与访问说明；管理权转让将在成员选择场景中单独处理。</text
|
||||
>
|
||||
|
||||
<view class="settings-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>家谱名称</text>
|
||||
<input v-model="genealogyDraft.name" maxlength="20" placeholder="请输入家谱名称" placeholder-class="settings-placeholder" @input="nameError = ''" />
|
||||
<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>
|
||||
<text v-if="nameError" class="settings-field-error">{{
|
||||
nameError
|
||||
}}</text>
|
||||
|
||||
<view class="visibility-block">
|
||||
<text class="visibility-block__label">公开范围</text>
|
||||
<view class="visibility-options">
|
||||
<view v-for="option in visibilityOptions" :key="option.value" class="visibility-option" @click="genealogyDraft.visibility = option.value">
|
||||
<image :src="genealogyDraft.visibility === option.value ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png' : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'" mode="aspectFit" />
|
||||
<text :class="{ 'visibility-option__text--active': genealogyDraft.visibility === option.value }">{{ option.label }}</text>
|
||||
<view
|
||||
v-for="option in visibilityOptions"
|
||||
:key="option.value"
|
||||
class="visibility-option"
|
||||
@click="genealogyDraft.visibility = option.value"
|
||||
>
|
||||
<image
|
||||
:src="
|
||||
genealogyDraft.visibility === option.value
|
||||
? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
|
||||
: '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
|
||||
"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text
|
||||
:class="{
|
||||
'visibility-option__text--active':
|
||||
genealogyDraft.visibility === option.value,
|
||||
}"
|
||||
>{{ option.label }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text class="visibility-block__hint">{{ visibilityHint }}</text>
|
||||
</view>
|
||||
|
||||
<view class="settings-field settings-field--note">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>访问说明</text>
|
||||
<textarea v-model="genealogyDraft.accessNote" maxlength="80" placeholder="向访问者说明家谱用途" placeholder-class="settings-placeholder" />
|
||||
<textarea
|
||||
v-model="genealogyDraft.accessNote"
|
||||
maxlength="80"
|
||||
placeholder="向访问者说明家谱用途"
|
||||
placeholder-class="settings-placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="settings-action" @click="saveSettings">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>保存设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="settings-result">
|
||||
<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>
|
||||
<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/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text>{{ settingsState === 'success' ? '继续调整' : '重新查看' }}</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
settingsState === "success" ? "继续调整" : "重新查看"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="feedbackVisible" class="settings-feedback">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>设置已保存</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
|
||||
const genealogyId = ref('')
|
||||
const settingsState = ref('loading')
|
||||
const nameError = ref('')
|
||||
const feedbackVisible = ref(false)
|
||||
let feedbackTimer = null
|
||||
const genealogyId = ref("");
|
||||
const settingsState = ref("loading");
|
||||
const nameError = ref("");
|
||||
const feedbackVisible = ref(false);
|
||||
let feedbackTimer = null;
|
||||
const genealogyDraft = reactive({
|
||||
name: '汤氏家谱',
|
||||
visibility: 'MEMBER_ONLY',
|
||||
accessNote: '家族资料，请妥善保存'
|
||||
})
|
||||
name: "汤氏家谱",
|
||||
visibility: "MEMBER_ONLY",
|
||||
accessNote: "家族资料，请妥善保存",
|
||||
});
|
||||
const visibilityOptions = [
|
||||
{ value: 'MEMBER_ONLY', label: '仅成员可见' },
|
||||
{ value: 'PUBLIC_APPLY', label: '公开可申请' }
|
||||
]
|
||||
const visibilityLabel = computed(() => visibilityOptions.find((item) => item.value === genealogyDraft.visibility)?.label || '')
|
||||
const visibilityHint = computed(() => genealogyDraft.visibility === 'MEMBER_ONLY'
|
||||
? '只有已加入本家谱的成员可以查看谱系和家族资料。'
|
||||
: '访客可检索到家谱并提交入谱申请，资料仍需审核后查看。')
|
||||
{ value: "MEMBER_ONLY", label: "仅成员可见" },
|
||||
{ value: "PUBLIC_APPLY", label: "公开可申请" },
|
||||
];
|
||||
const visibilityLabel = computed(
|
||||
() =>
|
||||
visibilityOptions.find((item) => item.value === genealogyDraft.visibility)
|
||||
?.label || "",
|
||||
);
|
||||
const visibilityHint = computed(() =>
|
||||
genealogyDraft.visibility === "MEMBER_ONLY"
|
||||
? "只有已加入本家谱的成员可以查看谱系和家族资料。"
|
||||
: "访客可检索到家谱并提交入谱申请，资料仍需审核后查看。",
|
||||
);
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || ''
|
||||
settingsState.value = query.state === 'success' ? 'success' : query.state === 'no-permission' ? 'no-permission' : query.state === 'error' || !genealogyId.value ? 'error' : 'form'
|
||||
})
|
||||
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
|
||||
genealogyId.value = query.genealogyId || "";
|
||||
settingsState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
: 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()) {
|
||||
nameError.value = '请填写家谱名称'
|
||||
return
|
||||
nameError.value = "请填写家谱名称";
|
||||
return;
|
||||
}
|
||||
settingsState.value = 'success'
|
||||
feedbackVisible.value = true
|
||||
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
|
||||
}
|
||||
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-x: hidden; background: $paper; }
|
||||
.settings-page__header { position: relative; z-index: 3; }
|
||||
.settings-panel { position: relative; z-index: 2; width: calc(100% - 32rpx); height: min(620px, calc((100vw - 16px) * 1.43)); margin: 18rpx auto 0; }
|
||||
.settings-panel__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.settings-form { position: absolute; inset: 7.5% 8%; }
|
||||
.settings-form__eyebrow, .settings-result__eyebrow { display: block; color: $brand-red; font-size: 23rpx; letter-spacing: 3rpx; }
|
||||
.settings-form__title, .settings-result__title { display: block; margin-top: 10rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 35rpx; font-weight: 700; }
|
||||
.settings-form__copy, .settings-result__copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.55; }
|
||||
.settings-field { position: relative; height: 92rpx; margin-top: 17rpx; }
|
||||
.settings-field > image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.settings-field > text { position: absolute; top: 31rpx; left: 24rpx; z-index: 1; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.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; }
|
||||
.visibility-option { position: relative; width: calc(50% - 7rpx); height: 64rpx; }
|
||||
.visibility-option image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.visibility-option text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.visibility-option .visibility-option__text--active { color: #fff9ed; }
|
||||
.visibility-block__hint { display: block; margin-top: 9rpx; color: $ink-muted; font-size: 19rpx; line-height: 1.45; }
|
||||
.settings-field--note { margin-top: 14rpx; }
|
||||
.settings-action { position: relative; width: 100%; height: 78rpx; margin-top: 19rpx; }
|
||||
.settings-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.settings-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; letter-spacing: 3rpx; }
|
||||
.settings-result { position: absolute; top: 29%; right: 12%; left: 12%; text-align: center; }
|
||||
.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%; } }
|
||||
.settings-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.settings-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.settings-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
height: min(620px, calc((100vw - 16px) * 1.43));
|
||||
margin: 18rpx auto 0;
|
||||
}
|
||||
.settings-panel__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.settings-form {
|
||||
position: absolute;
|
||||
inset: 7.5% 8%;
|
||||
}
|
||||
.settings-form__eyebrow,
|
||||
.settings-result__eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.settings-form__title,
|
||||
.settings-result__title {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.settings-form__copy,
|
||||
.settings-result__copy {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.settings-field {
|
||||
position: relative;
|
||||
height: 92rpx;
|
||||
margin-top: 17rpx;
|
||||
}
|
||||
.settings-field > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.settings-field > text {
|
||||
position: absolute;
|
||||
top: 31rpx;
|
||||
left: 24rpx;
|
||||
z-index: 1;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.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: 24rpx;
|
||||
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: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.visibility-block {
|
||||
margin-top: 17rpx;
|
||||
}
|
||||
.visibility-block__label {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.visibility-options {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.visibility-option {
|
||||
position: relative;
|
||||
width: calc(50% - 7rpx);
|
||||
height: 64rpx;
|
||||
}
|
||||
.visibility-option image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.visibility-option text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.visibility-option .visibility-option__text--active {
|
||||
color: #fff9ed;
|
||||
}
|
||||
.visibility-block__hint {
|
||||
display: block;
|
||||
margin-top: 9rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.settings-field--note {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.settings-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 78rpx;
|
||||
margin-top: 19rpx;
|
||||
}
|
||||
.settings-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.settings-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;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.settings-result {
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
right: 12%;
|
||||
left: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
.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>
|
||||
|
||||
@@ -2,164 +2,511 @@
|
||||
<template>
|
||||
<view class="poem-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="poem-page__header"><PageHeader title="字辈诗" :action="poemState === 'list' ? '维护' : ''" @action="openEditor" /></view>
|
||||
<view class="poem-page__header"
|
||||
><PageHeader
|
||||
title="字辈诗"
|
||||
:action="poemState === 'list' ? '维护' : ''"
|
||||
@action="openEditor"
|
||||
/></view>
|
||||
|
||||
<view class="poem-panel" :class="{
|
||||
'poem-state--list': poemState === 'list',
|
||||
'poem-state--empty': poemState === 'empty',
|
||||
'poem-state--edit': poemState === 'edit',
|
||||
'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" />
|
||||
<view
|
||||
class="poem-panel"
|
||||
:class="{
|
||||
'poem-state--list': poemState === 'list',
|
||||
'poem-state--empty': poemState === 'empty',
|
||||
'poem-state--edit': poemState === 'edit',
|
||||
'poem-state--error': poemState === 'error',
|
||||
'poem-state--no-permission': poemState === 'no-permission',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="poem-panel__skin"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
||||
<view v-if="poemState === 'list'" class="poem-list">
|
||||
<AppLoading
|
||||
v-if="poemState === 'loading'"
|
||||
text="正在整理字辈诗"
|
||||
description="请稍候，正在读取家谱字序。"
|
||||
/>
|
||||
<view v-else-if="poemState === 'list'" class="poem-list">
|
||||
<text class="poem-list__eyebrow">汤氏家谱 · 传承字序</text>
|
||||
<text class="poem-list__title">启宗敦本，继世传芳</text>
|
||||
<text class="poem-list__copy">按世代查看字辈，当前家谱使用到“敦”字辈。</text>
|
||||
<text class="poem-list__copy"
|
||||
>按世代查看字辈，当前家谱使用到“敦”字辈。</text
|
||||
>
|
||||
<view class="poem-rows">
|
||||
<view v-for="item in poemRows" :key="item.generationNo" class="poem-row" :class="{ 'poem-row--current': item.current }">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<view
|
||||
v-for="item in poemRows"
|
||||
:key="item.generationNo"
|
||||
class="poem-row"
|
||||
:class="{ 'poem-row--current': item.current }"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="poem-row__number">第 {{ item.generationNo }} 世</text>
|
||||
<text class="poem-row__character">{{ item.character }}</text>
|
||||
<text class="poem-row__status">{{ item.current ? '当前字辈' : '传承字序' }}</text>
|
||||
<text class="poem-row__status">{{
|
||||
item.current ? "当前字辈" : "传承字序"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="poem-action" @click="openEditor">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>维护字辈诗</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>维护字辈诗</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="poemState === 'edit'" class="poem-editor">
|
||||
<text class="poem-list__eyebrow">批量维护</text>
|
||||
<text class="poem-list__title">录入连续字辈</text>
|
||||
<text class="poem-list__copy">按照接口支持的连续文本录入，每个汉字对应一代；保存前可预览新字序。</text>
|
||||
<text class="poem-list__copy"
|
||||
>按照接口支持的连续文本录入，每个汉字对应一代；保存前可预览新字序。</text
|
||||
>
|
||||
<view class="poem-field">
|
||||
<image src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>字辈内容</text>
|
||||
<textarea v-model="poemDraft" maxlength="24" placeholder="例如：启宗敦本继世传芳" placeholder-class="poem-placeholder" @input="poemError = ''" />
|
||||
<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">
|
||||
<image :src="stopMissingOldGeneration ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png' : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'" mode="aspectFit" />
|
||||
<text :class="{ 'poem-policy__option-text--active': stopMissingOldGeneration }">{{ stopMissingOldGeneration ? '停止并提醒' : '继续补录' }}</text>
|
||||
<view
|
||||
class="poem-policy__option"
|
||||
@click="stopMissingOldGeneration = !stopMissingOldGeneration"
|
||||
>
|
||||
<image
|
||||
:src="
|
||||
stopMissingOldGeneration
|
||||
? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
|
||||
: '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
|
||||
"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text
|
||||
:class="{
|
||||
'poem-policy__option-text--active': stopMissingOldGeneration,
|
||||
}"
|
||||
>{{ stopMissingOldGeneration ? "停止并提醒" : "继续补录" }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text class="poem-preview">预览：{{ previewCharacters || '尚未录入字辈' }}</text>
|
||||
<text class="poem-preview"
|
||||
>预览：{{ previewCharacters || "尚未录入字辈" }}</text
|
||||
>
|
||||
<view class="poem-editor__actions">
|
||||
<view class="poem-action" @click="poemState = 'list'">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="poem-action__secondary">取消</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text class="poem-action__secondary">取消</text>
|
||||
</view>
|
||||
<view class="poem-action" @click="savePoems">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>保存字辈</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>保存字辈</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="poem-state-card">
|
||||
<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/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ 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/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>{{ poemState === "empty" ? "开始录入" : "重新查看" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="feedbackVisible" class="poem-feedback">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>字辈预览已更新</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
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 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([
|
||||
{ generationNo: 12, character: '启', current: false },
|
||||
{ generationNo: 13, character: '宗', current: false },
|
||||
{ generationNo: 14, character: '敦', current: true },
|
||||
{ generationNo: 15, character: '本', current: false }
|
||||
])
|
||||
const previewCharacters = computed(() => poemDraft.value.trim().split('').join(' · '))
|
||||
{ generationNo: 12, character: "启", current: false },
|
||||
{ generationNo: 13, character: "宗", current: false },
|
||||
{ generationNo: 14, character: "敦", current: true },
|
||||
{ generationNo: 15, character: "本", current: false },
|
||||
]);
|
||||
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 === 'no-permission' ? 'no-permission' : query.state === 'error' || !genealogyId.value ? 'error' : 'list'
|
||||
})
|
||||
onUnload(() => { if (feedbackTimer) clearTimeout(feedbackTimer) })
|
||||
genealogyId.value = query.genealogyId || "";
|
||||
poemState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
: 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 openEditor = () => {
|
||||
poemState.value = "edit";
|
||||
};
|
||||
const savePoems = () => {
|
||||
const characters = poemDraft.value.trim().split('').filter(Boolean)
|
||||
const characters = poemDraft.value.trim().split("").filter(Boolean);
|
||||
if (!characters.length) {
|
||||
poemError.value = '请录入字辈内容'
|
||||
return
|
||||
poemError.value = "请录入字辈内容";
|
||||
return;
|
||||
}
|
||||
if (poemDraft.value.trim() === '失败') {
|
||||
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'
|
||||
feedbackVisible.value = true
|
||||
feedbackTimer = setTimeout(() => { feedbackVisible.value = false; feedbackTimer = null }, 1800)
|
||||
}
|
||||
poemRows.value = characters
|
||||
.slice(0, 4)
|
||||
.map((character, index) => ({
|
||||
generationNo: 12 + index,
|
||||
character,
|
||||
current: index === 2,
|
||||
}));
|
||||
poemState.value = "list";
|
||||
feedbackVisible.value = true;
|
||||
feedbackTimer = setTimeout(() => {
|
||||
feedbackVisible.value = false;
|
||||
feedbackTimer = null;
|
||||
}, 1800);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.poem-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
|
||||
.poem-page__header { position: relative; z-index: 3; }
|
||||
.poem-panel { position: relative; z-index: 2; width: calc(100% - 32rpx); height: min(650px, calc((100vw - 16px) * 1.5)); margin: 18rpx auto 0; }
|
||||
.poem-panel__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.poem-list, .poem-editor, .poem-state-card { position: absolute; inset: 7.5% 8%; }
|
||||
.poem-list__eyebrow { display: block; color: $brand-red; font-size: 23rpx; letter-spacing: 3rpx; }
|
||||
.poem-list__title { display: block; margin-top: 11rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 35rpx; font-weight: 700; }
|
||||
.poem-list__copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.55; }
|
||||
.poem-rows { margin-top: 18rpx; }
|
||||
.poem-row { position: relative; height: 72rpx; margin-top: 10rpx; }
|
||||
.poem-row image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.poem-row__number { position: absolute; top: 24rpx; left: 24rpx; z-index: 1; color: $ink-muted; font-size: 21rpx; }
|
||||
.poem-row__character { position: absolute; top: 14rpx; left: 48%; z-index: 1; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 32rpx; font-weight: 700; }
|
||||
.poem-row__status { position: absolute; top: 25rpx; right: 22rpx; z-index: 1; color: $ink-muted; font-size: 19rpx; }
|
||||
.poem-row--current .poem-row__character, .poem-row--current .poem-row__status { color: $brand-red; }
|
||||
.poem-action { position: relative; width: 100%; height: 76rpx; margin-top: 20rpx; }
|
||||
.poem-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.poem-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; letter-spacing: 2rpx; }
|
||||
.poem-field { position: relative; height: 118rpx; margin-top: 22rpx; }
|
||||
.poem-field image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.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; }
|
||||
.poem-policy__option image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.poem-policy__option text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 21rpx; font-weight: 700; }
|
||||
.poem-policy__option .poem-policy__option-text--active { color: #fff9ed; }
|
||||
.poem-preview { display: block; margin-top: 22rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.6; }
|
||||
.poem-editor__actions { display: flex; gap: 14rpx; margin-top: 18rpx; }
|
||||
.poem-editor__actions .poem-action { width: calc(50% - 7rpx); margin-top: 0; }
|
||||
.poem-action .poem-action__secondary { color: $ink; }
|
||||
.poem-state-card { top: 29%; text-align: center; }
|
||||
.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%; } }
|
||||
.poem-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.poem-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.poem-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
height: min(650px, calc((100vw - 16px) * 1.5));
|
||||
margin: 18rpx auto 0;
|
||||
}
|
||||
.poem-panel__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.poem-list,
|
||||
.poem-editor,
|
||||
.poem-state-card {
|
||||
position: absolute;
|
||||
inset: 7.5% 8%;
|
||||
}
|
||||
.poem-list__eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.poem-list__title {
|
||||
display: block;
|
||||
margin-top: 11rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-list__copy {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.poem-rows {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.poem-row {
|
||||
position: relative;
|
||||
height: 72rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.poem-row image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.poem-row__number {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 24rpx;
|
||||
z-index: 1;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.poem-row__character {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
left: 48%;
|
||||
z-index: 1;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-row__status {
|
||||
position: absolute;
|
||||
top: 25rpx;
|
||||
right: 22rpx;
|
||||
z-index: 1;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.poem-row--current .poem-row__character,
|
||||
.poem-row--current .poem-row__status {
|
||||
color: $brand-red;
|
||||
}
|
||||
.poem-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 76rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.poem-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.poem-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;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.poem-field {
|
||||
position: relative;
|
||||
height: 118rpx;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.poem-field image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.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: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.poem-policy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.poem-policy > text {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-policy__option {
|
||||
position: relative;
|
||||
width: 248rpx;
|
||||
height: 62rpx;
|
||||
}
|
||||
.poem-policy__option image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.poem-policy__option text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-policy__option .poem-policy__option-text--active {
|
||||
color: #fff9ed;
|
||||
}
|
||||
.poem-preview {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.poem-editor__actions {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.poem-editor__actions .poem-action {
|
||||
width: calc(50% - 7rpx);
|
||||
margin-top: 0;
|
||||
}
|
||||
.poem-action .poem-action__secondary {
|
||||
color: $ink;
|
||||
}
|
||||
.poem-state-card {
|
||||
top: 29%;
|
||||
text-align: center;
|
||||
}
|
||||
.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>
|
||||
|
||||
+632
-111
@@ -1,17 +1,23 @@
|
||||
<!-- 页面编号：T-01；用途：世系树阅读、同页提示、空态与失败状态（页面设计阶段使用本地模拟数据）。 -->
|
||||
<!-- 页面编号：T-01；用途：纵向世系树阅读、同代横向提示、空态与失败态。 -->
|
||||
<template>
|
||||
<view class="tree-page" :class="{
|
||||
'tree-state--tree': treeState === 'tree',
|
||||
'tree-state--landscape': treeState === 'landscape',
|
||||
'tree-state--empty': treeState === 'empty',
|
||||
'tree-state--error': treeState === 'error'
|
||||
}">
|
||||
<view
|
||||
class="tree-page"
|
||||
:class="{
|
||||
'tree-state--tree': treeState === 'tree',
|
||||
'tree-state--landscape': treeState === 'landscape',
|
||||
'tree-state--empty': treeState === 'empty',
|
||||
'tree-state--error': treeState === 'error',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="tree-page__header"><PageHeader title="世系树" action="成员目录" @action="toDirectory" /></view>
|
||||
<view class="tree-page__header">
|
||||
<PageHeader title="世系树" action="成员目录" @action="toDirectory" />
|
||||
</view>
|
||||
|
||||
<view class="tree-toolbar">
|
||||
<view v-if="treeState !== 'loading'" class="tree-toolbar">
|
||||
<view class="tree-toolbar__title">
|
||||
<text>汤氏家谱</text><text>主支 · 第 12—14 世</text>
|
||||
<text>汤氏家谱</text>
|
||||
<text>主支 · 第 12—14 世</text>
|
||||
</view>
|
||||
<view class="tree-toolbar__actions">
|
||||
<text @click="treeState = 'landscape'">阅读提示</text>
|
||||
@@ -19,46 +25,137 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="tree-scroll" scroll-x :show-scrollbar="false">
|
||||
<view class="tree-canvas" :class="{ 'tree-canvas--state': treeState !== 'tree' }">
|
||||
<image class="tree-canvas__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
|
||||
<scroll-view
|
||||
class="tree-scroll"
|
||||
scroll-x
|
||||
:scroll-left="initialScrollLeft"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view
|
||||
class="tree-canvas"
|
||||
:class="{ 'tree-canvas--state': treeState !== 'tree' }"
|
||||
>
|
||||
<AppLoading
|
||||
v-if="treeState === 'loading'"
|
||||
text="正在整理世系"
|
||||
description="请稍候，正在准备家谱成员关系。"
|
||||
/>
|
||||
|
||||
<template v-if="treeState === 'tree'">
|
||||
<view class="generation-label generation-label--one"><text>第十二世</text></view>
|
||||
<view class="generation-label generation-label--two"><text>第十三世</text></view>
|
||||
<view class="generation-label generation-label--three"><text>第十四世</text></view>
|
||||
<view v-for="member in members" :key="member.id" class="member-node" :class="{ 'member-node--selected': selected?.id === member.id }" :style="nodeStyle(member)" @click="selected = member">
|
||||
<image class="member-node__skin" src="/static/assets/modules/genealogy/opaque/g06-search-input-wide.png" mode="scaleToFill" />
|
||||
<template v-else-if="treeState === 'tree'">
|
||||
<view class="lineage-pan-cue">
|
||||
<text>同代分支可左右查看</text>
|
||||
</view>
|
||||
|
||||
<view class="generation-band generation-band--twelve">
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>第十二世 · 始祖</text>
|
||||
</view>
|
||||
<view class="generation-band generation-band--thirteen">
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>第十三世 · 两房</text>
|
||||
</view>
|
||||
<view class="generation-band generation-band--fourteen">
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>第十四世 · 三支</text>
|
||||
</view>
|
||||
|
||||
<view class="lineage-connector lineage-connector--root" />
|
||||
<view class="lineage-connector lineage-connector--root-branch" />
|
||||
<view class="lineage-connector lineage-connector--gen13-left" />
|
||||
<view class="lineage-connector lineage-connector--gen13-right" />
|
||||
<view class="lineage-connector lineage-connector--left-trunk" />
|
||||
<view class="lineage-connector lineage-connector--left-branch" />
|
||||
<view class="lineage-connector lineage-connector--gen14-left" />
|
||||
<view class="lineage-connector lineage-connector--gen14-middle" />
|
||||
<view class="lineage-connector lineage-connector--right-trunk" />
|
||||
<view class="lineage-connector lineage-connector--right-branch" />
|
||||
<view class="lineage-connector lineage-connector--gen14-right" />
|
||||
|
||||
<view
|
||||
v-for="member in members"
|
||||
:key="member.id"
|
||||
class="member-node"
|
||||
:class="{ 'member-node--selected': selected?.id === member.id }"
|
||||
:style="nodeStyle(member)"
|
||||
@click="selected = member"
|
||||
>
|
||||
<image
|
||||
class="member-node__skin"
|
||||
:src="
|
||||
selected?.id === member.id
|
||||
? '/static/assets/modules/tree/transparent/t01-member-node-selected.png'
|
||||
: '/static/assets/modules/tree/transparent/t01-member-node-standard.png'
|
||||
"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="node-name">{{ member.name }}</text>
|
||||
<text class="node-relation">{{ member.relation }}</text>
|
||||
<text class="node-relation"
|
||||
>{{ member.relation }} · {{ member.branch }}</text
|
||||
>
|
||||
<text class="node-years">{{ member.years }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else class="tree-state-card">
|
||||
<text class="tree-state-card__eyebrow">{{ stateCopy.eyebrow }}</text>
|
||||
<text class="tree-state-card__title">{{ stateCopy.title }}</text>
|
||||
<text class="tree-state-card__copy">{{ stateCopy.copy }}</text>
|
||||
<view class="tree-state-card__action" @click="handleStateAction">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text>{{ stateCopy.action }}</text>
|
||||
<image
|
||||
class="tree-state-card__skin"
|
||||
src="/static/assets/modules/tree/transparent/t01-state-panel.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="tree-state-card__content">
|
||||
<text class="tree-state-card__eyebrow">{{
|
||||
stateCopy.eyebrow
|
||||
}}</text>
|
||||
<text class="tree-state-card__title">{{ stateCopy.title }}</text>
|
||||
<text class="tree-state-card__copy">{{ stateCopy.copy }}</text>
|
||||
<view class="tree-state-card__action" @click="handleStateAction">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{ stateCopy.action }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view v-if="treeState === 'tree' && selected" class="member-sheet">
|
||||
<image class="member-sheet__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
|
||||
<image
|
||||
class="member-sheet__skin"
|
||||
src="/static/assets/modules/tree/transparent/t01-member-drawer.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="member-sheet__copy">
|
||||
<text class="sheet-name">{{ selected.name }}</text>
|
||||
<text class="sheet-meta">第 {{ selected.generation }} 世 · {{ selected.relation }} · {{ selected.branch }}</text>
|
||||
<text class="sheet-meta"
|
||||
>第 {{ selected.generation }} 世 · {{ selected.relation }} ·
|
||||
{{ selected.branch }}</text
|
||||
>
|
||||
</view>
|
||||
<view class="sheet-actions">
|
||||
<view class="sheet-action sheet-member-action" @click="toMember">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text>查看资料</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-secondary-button-v2.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>查看资料</text>
|
||||
</view>
|
||||
<view class="sheet-action" @click="toAddRelative">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>添加亲属</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-primary-button-v2.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>添加亲属</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -66,99 +163,523 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import ModulePageBackground from '@/components/ModulePageBackground.vue'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import { genealogyContext } from '@/utils/genealogy-context.js'
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
|
||||
const genealogyId = ref('')
|
||||
const treeState = ref('loading')
|
||||
const selected = ref(null)
|
||||
const genealogyId = ref("");
|
||||
const treeState = ref("loading");
|
||||
const selected = ref(null);
|
||||
const initialScrollLeft = ref(20);
|
||||
const members = ref([
|
||||
{ id: 101, name: '汤文远', relation: '始祖', years: '1940—2012', generation: 12, branch: '主支', x: 50, y: 15 },
|
||||
{ id: 102, name: '汤正国', relation: '长子', years: '1965—', generation: 13, branch: '长房', x: 31, y: 43 },
|
||||
{ id: 103, name: '汤正华', relation: '次子', years: '1968—', generation: 13, branch: '二房', x: 69, y: 43 },
|
||||
{ id: 104, name: '汤凯', relation: '长孙', years: '1992—', generation: 14, branch: '长房', x: 20, y: 72 },
|
||||
{ id: 105, name: '汤悦', relation: '长孙女', years: '1995—', generation: 14, branch: '长房', x: 50, y: 72 },
|
||||
{ id: 106, name: '汤晨', relation: '次孙', years: '1998—', generation: 14, branch: '二房', x: 80, y: 72 }
|
||||
])
|
||||
{
|
||||
id: 101,
|
||||
name: "汤文远",
|
||||
relation: "始祖",
|
||||
years: "1940—2012",
|
||||
generation: 12,
|
||||
branch: "主支",
|
||||
x: 450,
|
||||
y: 135,
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: "汤正国",
|
||||
relation: "长子",
|
||||
years: "1965—",
|
||||
generation: 13,
|
||||
branch: "长房",
|
||||
x: 275,
|
||||
y: 350,
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: "汤正华",
|
||||
relation: "次子",
|
||||
years: "1968—",
|
||||
generation: 13,
|
||||
branch: "二房",
|
||||
x: 625,
|
||||
y: 350,
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
name: "汤凯",
|
||||
relation: "长孙",
|
||||
years: "1992—",
|
||||
generation: 14,
|
||||
branch: "长房",
|
||||
x: 150,
|
||||
y: 650,
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
name: "汤悦",
|
||||
relation: "长孙女",
|
||||
years: "1995—",
|
||||
generation: 14,
|
||||
branch: "长房",
|
||||
x: 400,
|
||||
y: 650,
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
name: "汤晨",
|
||||
relation: "次孙",
|
||||
years: "1998—",
|
||||
generation: 14,
|
||||
branch: "二房",
|
||||
x: 690,
|
||||
y: 650,
|
||||
},
|
||||
]);
|
||||
|
||||
const stateCopy = computed(() => ({
|
||||
landscape: { eyebrow: '横向阅读提示', title: '左右拖动查看完整世系', copy: '世系按代际从上到下排列；横向拖动画布可以查看同一世代的其他支系。', action: '进入世系图' },
|
||||
empty: { eyebrow: '尚未建立世系', title: '从第一位先祖开始记录', copy: '录入首代成员后，即可继续补充子女、配偶与后代关系。', action: '录入首代成员' },
|
||||
error: { eyebrow: '世系暂不可用', title: '暂时无法读取成员关系', copy: '请从当前家谱重新进入；已经录入的成员资料不会受到影响。', action: '重新查看' },
|
||||
loading: { eyebrow: '正在整理世系', title: '请稍候', copy: '正在准备家谱成员关系。', action: '重新查看' }
|
||||
}[treeState.value] || {}))
|
||||
const stateCopy = computed(
|
||||
() =>
|
||||
({
|
||||
landscape: {
|
||||
eyebrow: "世系阅读提示",
|
||||
title: "上下看世代，左右看同代分支",
|
||||
copy: "始祖位于上方，后代逐世向下展开；同一世代分支较多时，可左右拖动查看。",
|
||||
action: "进入世系树",
|
||||
},
|
||||
empty: {
|
||||
eyebrow: "尚未建立世系",
|
||||
title: "从第一位先祖开始记录",
|
||||
copy: "录入首代成员后，即可继续补充子女、配偶与后代关系。",
|
||||
action: "录入首代成员",
|
||||
},
|
||||
error: {
|
||||
eyebrow: "世系暂不可用",
|
||||
title: "暂时无法读取成员关系",
|
||||
copy: "请从当前家谱重新进入；已经录入的成员资料不会受到影响。",
|
||||
action: "重新查看",
|
||||
},
|
||||
})[treeState.value] || {},
|
||||
);
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || genealogyContext.getCurrentGenealogyId() || ''
|
||||
if (query.state === 'landscape' || query.state === 'empty' || query.state === 'error') {
|
||||
treeState.value = query.state
|
||||
return
|
||||
genealogyId.value =
|
||||
query.genealogyId || genealogyContext.getCurrentGenealogyId() || "";
|
||||
if (
|
||||
query.state === "loading" ||
|
||||
["landscape", "empty", "error"].includes(query.state)
|
||||
) {
|
||||
treeState.value = query.state;
|
||||
return;
|
||||
}
|
||||
if (!genealogyId.value) {
|
||||
treeState.value = 'empty'
|
||||
return
|
||||
treeState.value = "empty";
|
||||
return;
|
||||
}
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value)
|
||||
selected.value = members.value.find((item) => String(item.id) === String(query.selectedId)) || members.value[0]
|
||||
treeState.value = 'tree'
|
||||
})
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value);
|
||||
selected.value =
|
||||
members.value.find(
|
||||
(item) => String(item.id) === String(query.selectedId),
|
||||
) || members.value[0];
|
||||
treeState.value = "tree";
|
||||
});
|
||||
|
||||
const nodeStyle = (member) => ({ left: `${member.x}%`, top: `${member.y}%` })
|
||||
const nodeStyle = (member) => ({
|
||||
left: `${member.x}rpx`,
|
||||
top: `${member.y}rpx`,
|
||||
});
|
||||
const handleStateAction = () => {
|
||||
if (treeState.value === 'empty') {
|
||||
uni.navigateTo({ url: `/pages/tree/t04-add-relative?genealogyId=${genealogyId.value || 1001}&mode=first` })
|
||||
return
|
||||
if (treeState.value === "empty") {
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t04-add-relative?genealogyId=${genealogyId.value || 1001}&mode=first`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
selected.value = members.value[0]
|
||||
treeState.value = 'tree'
|
||||
}
|
||||
const toMember = () => uni.navigateTo({ url: `/pages/tree/t03-member-profile?genealogyId=${genealogyId.value}&personId=${selected.value.id}` })
|
||||
const toDirectory = () => uni.navigateTo({ url: `/pages/tree/t07-member-directory?genealogyId=${genealogyId.value}` })
|
||||
const toRelationship = () => uni.navigateTo({ url: `/pages/tree/t06-edit-relationship?genealogyId=${genealogyId.value}` })
|
||||
const toAddRelative = () => uni.navigateTo({ url: `/pages/tree/t04-add-relative?genealogyId=${genealogyId.value}&personId=${selected.value.id}` })
|
||||
selected.value = members.value[0];
|
||||
treeState.value = "tree";
|
||||
};
|
||||
const toMember = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t03-member-profile?genealogyId=${genealogyId.value}&personId=${selected.value.id}`,
|
||||
});
|
||||
const toDirectory = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t07-member-directory?genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
const toRelationship = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t06-edit-relationship?genealogyId=${genealogyId.value}`,
|
||||
});
|
||||
const toAddRelative = () =>
|
||||
uni.navigateTo({
|
||||
url: `/pages/tree/t04-add-relative?genealogyId=${genealogyId.value}&personId=${selected.value.id}`,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-page { position: relative; height: 100vh; overflow: hidden; background: $paper; }
|
||||
.tree-page__header, .tree-toolbar, .tree-scroll, .member-sheet { position: relative; z-index: 2; }
|
||||
.tree-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 28rpx 14rpx; }
|
||||
.tree-toolbar__title text { display: block; }
|
||||
.tree-toolbar__title text:first-child { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 28rpx; font-weight: 700; }
|
||||
.tree-toolbar__title text:last-child { margin-top: 5rpx; color: $ink-muted; font-size: 19rpx; }
|
||||
.tree-toolbar__actions { display: flex; gap: 24rpx; color: $brand-red; font-size: 21rpx; }
|
||||
.tree-scroll { width: 100%; height: calc(100vh - 330rpx); white-space: nowrap; }
|
||||
.tree-canvas { position: relative; width: 1180rpx; height: 1040rpx; margin: 0 18rpx; }
|
||||
.tree-canvas--state { width: calc(100vw - 36rpx); }
|
||||
.tree-canvas__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.generation-label { position: absolute; left: 3.5%; z-index: 2; color: #92764f; font-size: 19rpx; writing-mode: vertical-rl; letter-spacing: 3rpx; }
|
||||
.generation-label--one { top: 16%; }
|
||||
.generation-label--two { top: 44%; }
|
||||
.generation-label--three { top: 73%; }
|
||||
.member-node { position: absolute; width: 190rpx; height: 132rpx; transform: translate(-50%, -50%); text-align: center; }
|
||||
.member-node__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.node-name, .node-relation, .node-years { position: relative; z-index: 1; display: block; }
|
||||
.node-name { padding-top: 22rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 29rpx; font-weight: 700; }
|
||||
.node-relation { margin-top: 6rpx; color: $brand-red; font-size: 19rpx; }
|
||||
.node-years { margin-top: 4rpx; color: $ink-muted; font-size: 17rpx; }
|
||||
.member-node--selected .node-name { color: $brand-red; }
|
||||
.tree-state-card { position: absolute; top: 28%; right: 9%; left: 9%; z-index: 2; text-align: center; white-space: normal; }
|
||||
.tree-state-card__eyebrow { display: block; color: $brand-red; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.tree-state-card__title { display: block; margin-top: 14rpx; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 36rpx; font-weight: 700; }
|
||||
.tree-state-card__copy { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.7; }
|
||||
.tree-state-card__action { position: relative; width: 380rpx; height: 76rpx; margin: 30rpx auto 0; }
|
||||
.tree-state-card__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.tree-state-card__action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
.member-sheet { position: fixed; right: 18rpx; bottom: calc(14rpx + env(safe-area-inset-bottom)); left: 18rpx; height: 178rpx; }
|
||||
.member-sheet__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.member-sheet__copy { position: absolute; top: 34rpx; left: 44rpx; z-index: 1; }
|
||||
.sheet-name { display: block; color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 31rpx; font-weight: 700; }
|
||||
.sheet-meta { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 19rpx; }
|
||||
.sheet-actions { position: absolute; top: 46rpx; right: 34rpx; z-index: 1; display: flex; gap: 10rpx; }
|
||||
.sheet-action { position: relative; width: 130rpx; height: 62rpx; }
|
||||
.sheet-action image { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.sheet-action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 20rpx; font-weight: 700; }
|
||||
.sheet-action:last-child text { color: #fff9ed; }
|
||||
.tree-page {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.tree-page__header,
|
||||
.tree-toolbar,
|
||||
.tree-scroll,
|
||||
.member-sheet {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.tree-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 28rpx 12rpx;
|
||||
}
|
||||
.tree-toolbar__title text {
|
||||
display: block;
|
||||
}
|
||||
.tree-toolbar__title text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tree-toolbar__title text:last-child {
|
||||
margin-top: 5rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.tree-toolbar__actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.tree-scroll {
|
||||
width: 100%;
|
||||
height: calc(100vh - 272rpx);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tree-canvas {
|
||||
position: relative;
|
||||
width: 900rpx;
|
||||
height: 900rpx;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
.tree-canvas--state {
|
||||
width: calc(100vw - 32rpx);
|
||||
}
|
||||
.lineage-pan-cue {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 22rpx;
|
||||
z-index: 3;
|
||||
color: #9a7748;
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.generation-band {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
z-index: 3;
|
||||
width: 184rpx;
|
||||
height: 38rpx;
|
||||
color: #8f6c3f;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.generation-band image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.generation-band text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.generation-band--twelve {
|
||||
top: 48rpx;
|
||||
}
|
||||
.generation-band--thirteen {
|
||||
top: 250rpx;
|
||||
}
|
||||
.generation-band--fourteen {
|
||||
top: 522rpx;
|
||||
}
|
||||
.lineage-connector {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #b78a42;
|
||||
}
|
||||
.lineage-connector--root {
|
||||
left: 449rpx;
|
||||
top: 177rpx;
|
||||
width: 2rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
.lineage-connector--root-branch {
|
||||
left: 275rpx;
|
||||
top: 264rpx;
|
||||
width: 350rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
.lineage-connector--gen13-left {
|
||||
left: 274rpx;
|
||||
top: 264rpx;
|
||||
width: 2rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
.lineage-connector--gen13-right {
|
||||
left: 624rpx;
|
||||
top: 264rpx;
|
||||
width: 2rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
.lineage-connector--left-trunk {
|
||||
left: 274rpx;
|
||||
top: 392rpx;
|
||||
width: 2rpx;
|
||||
height: 149rpx;
|
||||
}
|
||||
.lineage-connector--left-branch {
|
||||
left: 150rpx;
|
||||
top: 540rpx;
|
||||
width: 250rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
.lineage-connector--gen14-left {
|
||||
left: 149rpx;
|
||||
top: 540rpx;
|
||||
width: 2rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.lineage-connector--gen14-middle {
|
||||
left: 399rpx;
|
||||
top: 540rpx;
|
||||
width: 2rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.lineage-connector--right-trunk {
|
||||
left: 624rpx;
|
||||
top: 392rpx;
|
||||
width: 2rpx;
|
||||
height: 149rpx;
|
||||
}
|
||||
.lineage-connector--right-branch {
|
||||
left: 625rpx;
|
||||
top: 540rpx;
|
||||
width: 65rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
.lineage-connector--gen14-right {
|
||||
left: 689rpx;
|
||||
top: 540rpx;
|
||||
width: 2rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.member-node {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 224rpx;
|
||||
height: 86rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
.member-node__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.node-name,
|
||||
.node-relation,
|
||||
.node-years {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
.node-name {
|
||||
padding-top: 5rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.node-relation {
|
||||
margin-top: 0;
|
||||
color: $brand-red;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.node-years {
|
||||
margin-top: 0;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.member-node--selected {
|
||||
width: 236rpx;
|
||||
height: 94rpx;
|
||||
}
|
||||
.member-node--selected .node-name {
|
||||
color: $brand-red;
|
||||
}
|
||||
.tree-state-card {
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
right: 24rpx;
|
||||
left: 24rpx;
|
||||
z-index: 2;
|
||||
height: 360rpx;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
.tree-state-card__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.tree-state-card__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 62rpx 58rpx 42rpx;
|
||||
}
|
||||
.tree-state-card__eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.tree-state-card__title {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tree-state-card__copy {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.tree-state-card__action {
|
||||
position: relative;
|
||||
width: 360rpx;
|
||||
height: 70rpx;
|
||||
margin: 22rpx auto 0;
|
||||
}
|
||||
.tree-state-card__action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.tree-state-card__action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-sheet {
|
||||
position: fixed;
|
||||
right: 18rpx;
|
||||
bottom: calc(14rpx + env(safe-area-inset-bottom));
|
||||
left: 18rpx;
|
||||
height: 190rpx;
|
||||
}
|
||||
.member-sheet__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.member-sheet__copy {
|
||||
position: absolute;
|
||||
top: 38rpx;
|
||||
left: 44rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.sheet-name {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sheet-meta {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.sheet-actions {
|
||||
position: absolute;
|
||||
right: 36rpx;
|
||||
bottom: 30rpx;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.sheet-action {
|
||||
position: relative;
|
||||
width: 148rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.sheet-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.sheet-action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: $ink;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sheet-action:last-child text {
|
||||
color: #fff9ed;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.tree-toolbar {
|
||||
padding-right: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.tree-toolbar__actions {
|
||||
gap: 14rpx;
|
||||
}
|
||||
.member-sheet {
|
||||
height: 206rpx;
|
||||
}
|
||||
.member-sheet__copy {
|
||||
top: 32rpx;
|
||||
left: 36rpx;
|
||||
}
|
||||
.sheet-actions {
|
||||
right: 28rpx;
|
||||
bottom: 26rpx;
|
||||
}
|
||||
.sheet-action {
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user