修改部分样式
This commit is contained in:
rain
+229
-204
@@ -1,212 +1,242 @@
|
||||
<!-- 页面编号：A-01；用途：APP 唯一登录入口，承载密码与验证码登录。 -->
|
||||
<template>
|
||||
<AuthPageShell class="auth-page login-page">
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="login-tabs" role="tablist" aria-label="登录方式">
|
||||
<button
|
||||
class="auth-plain-button login-tab"
|
||||
role="tab"
|
||||
:aria-selected="activeLoginMethod === 'password'"
|
||||
:class="{ active: activeLoginMethod === 'password' }"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="switchLoginMethod('password')"
|
||||
>密码登录</button
|
||||
>
|
||||
<button
|
||||
class="auth-plain-button login-tab"
|
||||
role="tab"
|
||||
:aria-selected="activeLoginMethod === 'sms'"
|
||||
:class="{ active: activeLoginMethod === 'sms' }"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="switchLoginMethod('sms')"
|
||||
>验证码登录</button
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="input-row input-row--required">
|
||||
<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"
|
||||
:disabled="sendingCode || submitting || tacVisible || authenticationCommitted || (cooldownSeconds > 0 && phone.length > 0)"
|
||||
placeholder="手机号"
|
||||
aria-label="手机号"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="next"
|
||||
@input="handlePhoneInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-if="activeLoginMethod === 'password'" class="input-row input-row--required">
|
||||
<image
|
||||
class="input-icon"
|
||||
src="/static/assets/modules/auth/transparent/a01-icon-lock-v1.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<input
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
:password="!passwordVisible"
|
||||
maxlength="32"
|
||||
:disabled="submitting || tacVisible"
|
||||
placeholder="密码"
|
||||
aria-label="登录密码"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="done"
|
||||
@confirm="submitLogin"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button password-toggle"
|
||||
:aria-label="passwordVisible ? '隐藏密码' : '显示密码'"
|
||||
:aria-pressed="passwordVisible"
|
||||
:disabled="submitting || tacVisible"
|
||||
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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="input-row input-row--required">
|
||||
<image
|
||||
class="input-icon input-icon--sms"
|
||||
src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<input
|
||||
v-model.trim="verificationCode"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:disabled="submitting"
|
||||
placeholder="短信验证码"
|
||||
aria-label="短信验证码"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="done"
|
||||
@confirm="submitLogin"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button get-code"
|
||||
:class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
|
||||
:disabled="sendingCode || submitting || cooldownSeconds > 0"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareGetCode"
|
||||
>{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="form-secondary-row">
|
||||
<button
|
||||
class="auth-plain-button forgot-password"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareForgotPassword"
|
||||
>忘记密码</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="login-tabs" role="tablist" aria-label="登录方式">
|
||||
<button
|
||||
class="auth-plain-button login-submit"
|
||||
class="auth-plain-button login-tab"
|
||||
role="tab"
|
||||
:aria-selected="activeLoginMethod === 'password'"
|
||||
:class="{ active: activeLoginMethod === 'password' }"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
:aria-busy="submitting"
|
||||
hover-class="button-pressed"
|
||||
@click="submitLogin"
|
||||
hover-class="tap-fade"
|
||||
@click="switchLoginMethod('password')"
|
||||
>
|
||||
密码登录
|
||||
</button>
|
||||
<button
|
||||
class="auth-plain-button login-tab"
|
||||
role="tab"
|
||||
:aria-selected="activeLoginMethod === 'sms'"
|
||||
:class="{ active: activeLoginMethod === 'sms' }"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="switchLoginMethod('sms')"
|
||||
>
|
||||
验证码登录
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="input-row input-row--required">
|
||||
<image
|
||||
class="button-skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
class="input-icon"
|
||||
src="/static/assets/modules/auth/transparent/a01-icon-phone-v1.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="login-submit__copy">{{
|
||||
submitting
|
||||
? authenticationCommitted
|
||||
? "正在进入…"
|
||||
: "登录中…"
|
||||
: authenticationCommitted
|
||||
? "进入家谱"
|
||||
: "登录"
|
||||
}}</text>
|
||||
</button>
|
||||
|
||||
<view class="register-entry">
|
||||
<text>还没有账号？</text>
|
||||
<button
|
||||
class="auth-plain-button register-link"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareRegister"
|
||||
>注册账号</button
|
||||
>
|
||||
<input
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:disabled="
|
||||
sendingCode ||
|
||||
submitting ||
|
||||
tacVisible ||
|
||||
authenticationCommitted ||
|
||||
(cooldownSeconds > 0 && phone.length > 0)
|
||||
"
|
||||
placeholder="手机号"
|
||||
aria-label="手机号"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="next"
|
||||
@input="handlePhoneInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="agreement-area"
|
||||
:class="{ 'agreement-area--error': agreementError }"
|
||||
v-if="activeLoginMethod === 'password'"
|
||||
class="input-row input-row--required"
|
||||
>
|
||||
<view class="agreement-row">
|
||||
<button
|
||||
class="auth-plain-button agreement-toggle"
|
||||
role="checkbox"
|
||||
:aria-checked="agreed"
|
||||
:aria-label="agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
@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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
|
||||
>《用户协议》</button
|
||||
>
|
||||
<text>与</text>
|
||||
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
|
||||
>《隐私政策》</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error" role="alert"
|
||||
>请先阅读并同意用户协议与隐私政策</text
|
||||
<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"
|
||||
:disabled="submitting || tacVisible"
|
||||
placeholder="密码"
|
||||
aria-label="登录密码"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="done"
|
||||
@confirm="submitLogin"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button password-toggle"
|
||||
:aria-label="passwordVisible ? '隐藏密码' : '显示密码'"
|
||||
:aria-pressed="passwordVisible"
|
||||
:disabled="submitting || tacVisible"
|
||||
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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="input-row input-row--required">
|
||||
<image
|
||||
class="input-icon input-icon--sms"
|
||||
src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<input
|
||||
v-model.trim="verificationCode"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:disabled="submitting"
|
||||
placeholder="短信验证码"
|
||||
aria-label="短信验证码"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="done"
|
||||
@confirm="submitLogin"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button get-code"
|
||||
:class="{
|
||||
'get-code--disabled': sendingCode || cooldownSeconds > 0,
|
||||
}"
|
||||
:disabled="sendingCode || submitting || cooldownSeconds > 0"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareGetCode"
|
||||
>
|
||||
{{
|
||||
sendingCode
|
||||
? "请求中…"
|
||||
: cooldownSeconds > 0
|
||||
? `${cooldownSeconds}s 后重发`
|
||||
: "获取验证码"
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="form-secondary-row">
|
||||
<button
|
||||
class="auth-plain-button forgot-password"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareForgotPassword"
|
||||
>
|
||||
忘记密码
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="auth-plain-button login-submit"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
:aria-busy="submitting"
|
||||
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">{{
|
||||
submitting
|
||||
? authenticationCommitted
|
||||
? "正在进入…"
|
||||
: "登录中…"
|
||||
: authenticationCommitted
|
||||
? "进入家谱"
|
||||
: "登录"
|
||||
}}</text>
|
||||
</button>
|
||||
|
||||
<view class="register-entry">
|
||||
<text>还没有账号？</text>
|
||||
<button
|
||||
class="auth-plain-button register-link"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareRegister"
|
||||
>
|
||||
注册账号
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="agreement-area"
|
||||
:class="{ 'agreement-area--error': agreementError }"
|
||||
>
|
||||
<view class="agreement-row">
|
||||
<button
|
||||
class="auth-plain-button agreement-toggle"
|
||||
role="checkbox"
|
||||
:aria-checked="agreed"
|
||||
:aria-label="
|
||||
agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'
|
||||
"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
@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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<button
|
||||
class="auth-plain-button agreement-link"
|
||||
@click="prepareAgreement"
|
||||
>
|
||||
《用户协议》
|
||||
</button>
|
||||
<text>与</text>
|
||||
<button
|
||||
class="auth-plain-button agreement-link"
|
||||
@click="prepareAgreement"
|
||||
>
|
||||
《隐私政策》
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error" role="alert"
|
||||
>请先阅读并同意用户协议与隐私政策</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template #overlay>
|
||||
<TacVerification
|
||||
:visible="tacVisible"
|
||||
@@ -338,7 +368,8 @@ const blockBusyAction = () => {
|
||||
|
||||
const switchLoginMethod = (method) => {
|
||||
if (blockBusyAction()) return;
|
||||
if (method === "password" || method === "sms") activeLoginMethod.value = method;
|
||||
if (method === "password" || method === "sms")
|
||||
activeLoginMethod.value = method;
|
||||
};
|
||||
|
||||
const togglePasswordVisibility = () => {
|
||||
@@ -414,7 +445,8 @@ const prepareGetCode = async () => {
|
||||
{ requestController: authRequestController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
|
||||
if (phone.value !== requestedPhone)
|
||||
throw new Error("手机号已变化，请重新获取验证码");
|
||||
const requirement = normalizeCaptchaRequirement(response);
|
||||
if (!requirement.required) {
|
||||
await appApi.sendSmsCode(
|
||||
@@ -507,7 +539,8 @@ const completeTac = async (result) => {
|
||||
if (!expectedContext || !action) return;
|
||||
try {
|
||||
const ticket = normalizeTacSuccess(result, expectedContext.requestId);
|
||||
if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
|
||||
if (phone.value !== expectedContext.subject)
|
||||
throw new Error("手机号已变化，请重新验证");
|
||||
if (action.kind === "password-login") {
|
||||
if (
|
||||
phone.value !== action.phone ||
|
||||
@@ -554,10 +587,7 @@ const completeTac = async (result) => {
|
||||
} catch (error) {
|
||||
closeTac();
|
||||
if (pageActive) {
|
||||
if (
|
||||
action?.kind === "sms-code" &&
|
||||
isSmsDeliveryOutcomeUnknown(error)
|
||||
) {
|
||||
if (action?.kind === "sms-code" && isSmsDeliveryOutcomeUnknown(error)) {
|
||||
sentPhone.value = expectedContext.subject;
|
||||
smsCooldown.start();
|
||||
showFeedback("发送结果未知，如收到短信可直接填写；60 秒后可重试");
|
||||
@@ -594,10 +624,7 @@ const submitLogin = async () => {
|
||||
showFeedback("请输入密码");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
activeLoginMethod.value === "sms" &&
|
||||
sentPhone.value !== phone.value
|
||||
) {
|
||||
if (activeLoginMethod.value === "sms" && sentPhone.value !== phone.value) {
|
||||
showFeedback("请先获取当前手机号的验证码");
|
||||
return;
|
||||
}
|
||||
@@ -646,7 +673,6 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.login-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@@ -930,5 +956,4 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
|
||||
.button-pressed {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
+288
-219
@@ -1,229 +1,296 @@
|
||||
<!-- 页面编号：A-04；用途：注册账号与本页服务协议确认。 -->
|
||||
<template>
|
||||
<AuthPageShell class="auth-page register-page">
|
||||
<view class="register-content">
|
||||
<view class="page-heading">
|
||||
<view class="register-content">
|
||||
<view class="page-heading">
|
||||
<button
|
||||
class="auth-plain-button back-button"
|
||||
aria-label="返回登录"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>
|
||||
<image
|
||||
class="back-button__icon"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-phone"
|
||||
><text class="required-mark">*</text>手机号</label
|
||||
>
|
||||
<input
|
||||
id="a04-phone"
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:disabled="
|
||||
sendingCode ||
|
||||
submitting ||
|
||||
tacVisible ||
|
||||
registrationCommitted ||
|
||||
(cooldownSeconds > 0 && phone.length > 0)
|
||||
"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.phone)"
|
||||
:aria-describedby="
|
||||
fieldErrors.phone ? 'a04-phone-error' : undefined
|
||||
"
|
||||
@input="handlePhoneInput"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.phone"
|
||||
id="a04-phone-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.phone }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="field-block">
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-nickname">昵称</label>
|
||||
<input
|
||||
id="a04-nickname"
|
||||
v-model.trim="nickName"
|
||||
class="auth-input"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请输入昵称"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.verificationCode }"
|
||||
>
|
||||
<view class="input-row code-row">
|
||||
<label class="input-label" for="a04-verification-code"
|
||||
><text class="required-mark">*</text>验证码</label
|
||||
>
|
||||
<input
|
||||
id="a04-verification-code"
|
||||
v-model.trim="verificationCode"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.verificationCode)"
|
||||
:aria-describedby="
|
||||
fieldErrors.verificationCode
|
||||
? 'a04-verification-code-error'
|
||||
: undefined
|
||||
"
|
||||
@input="clearFieldError('verificationCode')"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button get-code"
|
||||
:class="{
|
||||
'get-code--disabled': sendingCode || cooldownSeconds > 0,
|
||||
}"
|
||||
:disabled="
|
||||
sendingCode ||
|
||||
submitting ||
|
||||
cooldownSeconds > 0 ||
|
||||
registrationCommitted
|
||||
"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareGetCode"
|
||||
>
|
||||
{{
|
||||
sendingCode
|
||||
? "请求中…"
|
||||
: cooldownSeconds > 0
|
||||
? `${cooldownSeconds}s 后重发`
|
||||
: "获取验证码"
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.verificationCode"
|
||||
id="a04-verification-code-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.verificationCode }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.password }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-password"
|
||||
><text class="required-mark">*</text>设置密码</label
|
||||
>
|
||||
<input
|
||||
id="a04-password"
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请设置登录密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.password)"
|
||||
:aria-describedby="
|
||||
fieldErrors.password ? 'a04-password-error' : undefined
|
||||
"
|
||||
@input="clearFieldError('password')"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.password"
|
||||
id="a04-password-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.password }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-confirm-password"
|
||||
><text class="required-mark">*</text>确认密码</label
|
||||
>
|
||||
<input
|
||||
id="a04-confirm-password"
|
||||
v-model="confirmPassword"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请再次输入密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
|
||||
:aria-describedby="
|
||||
fieldErrors.confirmPassword
|
||||
? 'a04-confirm-password-error'
|
||||
: undefined
|
||||
"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.confirmPassword"
|
||||
id="a04-confirm-password-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.confirmPassword }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="auth-plain-button register-submit"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
:aria-busy="submitting"
|
||||
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">{{
|
||||
submitting
|
||||
? registrationCommitted
|
||||
? "正在进入…"
|
||||
: "注册中…"
|
||||
: registrationCommitted
|
||||
? "进入家谱"
|
||||
: "注册账号"
|
||||
}}</text>
|
||||
</button>
|
||||
|
||||
<view
|
||||
class="agreement-area"
|
||||
:class="{ 'agreement-area--error': agreementError }"
|
||||
>
|
||||
<view class="agreement-row">
|
||||
<button
|
||||
class="auth-plain-button back-button"
|
||||
aria-label="返回登录"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
class="auth-plain-button agreement-toggle"
|
||||
role="checkbox"
|
||||
:aria-checked="agreed"
|
||||
:aria-label="
|
||||
agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'
|
||||
"
|
||||
:disabled="
|
||||
sendingCode || submitting || tacVisible || registrationCommitted
|
||||
"
|
||||
@click="toggleAgreement"
|
||||
>
|
||||
<image
|
||||
class="back-button__icon"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-phone"><text class="required-mark">*</text>手机号</label>
|
||||
<input
|
||||
id="a04-phone"
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:disabled="sendingCode || submitting || tacVisible || registrationCommitted || (cooldownSeconds > 0 && phone.length > 0)"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.phone)"
|
||||
:aria-describedby="fieldErrors.phone ? 'a04-phone-error' : undefined"
|
||||
@input="handlePhoneInput"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.phone" id="a04-phone-error" class="field-error" role="alert">{{
|
||||
fieldErrors.phone
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view class="field-block">
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-nickname">昵称</label>
|
||||
<input
|
||||
id="a04-nickname"
|
||||
v-model.trim="nickName"
|
||||
class="auth-input"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请输入昵称"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.verificationCode }"
|
||||
>
|
||||
<view class="input-row code-row">
|
||||
<label class="input-label" for="a04-verification-code"><text class="required-mark">*</text>验证码</label>
|
||||
<input
|
||||
id="a04-verification-code"
|
||||
v-model.trim="verificationCode"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.verificationCode)"
|
||||
:aria-describedby="fieldErrors.verificationCode ? 'a04-verification-code-error' : undefined"
|
||||
@input="clearFieldError('verificationCode')"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button get-code"
|
||||
:class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
|
||||
:disabled="sendingCode || submitting || cooldownSeconds > 0 || registrationCommitted"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareGetCode"
|
||||
>{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
|
||||
>
|
||||
</view>
|
||||
<text v-if="fieldErrors.verificationCode" id="a04-verification-code-error" class="field-error" role="alert">{{
|
||||
fieldErrors.verificationCode
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.password }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-password"><text class="required-mark">*</text>设置密码</label>
|
||||
<input
|
||||
id="a04-password"
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请设置登录密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.password)"
|
||||
:aria-describedby="fieldErrors.password ? 'a04-password-error' : undefined"
|
||||
@input="clearFieldError('password')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.password" id="a04-password-error" class="field-error" role="alert">{{
|
||||
fieldErrors.password
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a04-confirm-password"><text class="required-mark">*</text>确认密码</label>
|
||||
<input
|
||||
id="a04-confirm-password"
|
||||
v-model="confirmPassword"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting || registrationCommitted"
|
||||
placeholder="请再次输入密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
|
||||
:aria-describedby="fieldErrors.confirmPassword ? 'a04-confirm-password-error' : undefined"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.confirmPassword" id="a04-confirm-password-error" class="field-error" role="alert">{{
|
||||
fieldErrors.confirmPassword
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="auth-plain-button register-submit"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
:aria-busy="submitting"
|
||||
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">{{
|
||||
submitting
|
||||
? registrationCommitted
|
||||
? "正在进入…"
|
||||
: "注册中…"
|
||||
: registrationCommitted
|
||||
? "进入家谱"
|
||||
: "注册账号"
|
||||
}}</text>
|
||||
</button>
|
||||
|
||||
<view
|
||||
class="agreement-area"
|
||||
:class="{ 'agreement-area--error': agreementError }"
|
||||
>
|
||||
<view class="agreement-row">
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<button
|
||||
class="auth-plain-button agreement-toggle"
|
||||
role="checkbox"
|
||||
:aria-checked="agreed"
|
||||
:aria-label="agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'"
|
||||
:disabled="sendingCode || submitting || tacVisible || registrationCommitted"
|
||||
@click="toggleAgreement"
|
||||
class="auth-plain-button agreement-link"
|
||||
@click="prepareAgreement"
|
||||
>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
《用户协议》
|
||||
</button>
|
||||
<text>与</text>
|
||||
<button
|
||||
class="auth-plain-button agreement-link"
|
||||
@click="prepareAgreement"
|
||||
>
|
||||
《隐私政策》
|
||||
</button>
|
||||
<view class="agreement-copy">
|
||||
<text>我已阅读并同意</text>
|
||||
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
|
||||
>《用户协议》</button
|
||||
>
|
||||
<text>与</text>
|
||||
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
|
||||
>《隐私政策》</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error" role="alert"
|
||||
>请先阅读并同意用户协议与隐私政策</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="login-entry">
|
||||
<text>已有账号？</text>
|
||||
<button
|
||||
class="auth-plain-button login-entry__link"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>登录</button
|
||||
>
|
||||
</view>
|
||||
<text v-if="agreementError" class="agreement-error" role="alert"
|
||||
>请先阅读并同意用户协议与隐私政策</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="login-entry">
|
||||
<text>已有账号？</text>
|
||||
<button
|
||||
class="auth-plain-button login-entry__link"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template #overlay>
|
||||
<TacVerification
|
||||
:visible="tacVisible"
|
||||
@@ -303,16 +370,17 @@ const submitting = ref(false);
|
||||
const registrationCommitted = ref(false);
|
||||
const cooldownSeconds = ref(0);
|
||||
const sentPhone = ref("");
|
||||
const isDirty = computed(() =>
|
||||
!registrationCommitted.value &&
|
||||
Boolean(
|
||||
phone.value ||
|
||||
const isDirty = computed(
|
||||
() =>
|
||||
!registrationCommitted.value &&
|
||||
Boolean(
|
||||
phone.value ||
|
||||
nickName.value ||
|
||||
verificationCode.value ||
|
||||
password.value ||
|
||||
confirmPassword.value ||
|
||||
agreed.value,
|
||||
),
|
||||
),
|
||||
);
|
||||
let feedbackTimer = null;
|
||||
let tacSequence = 0;
|
||||
@@ -416,7 +484,8 @@ const handlePhoneInput = () => {
|
||||
};
|
||||
|
||||
const prepareGetCode = async () => {
|
||||
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0) return;
|
||||
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0)
|
||||
return;
|
||||
if (!isAuthPhone(phone.value)) {
|
||||
fieldErrors.value.phone = "请输入正确手机号";
|
||||
return;
|
||||
@@ -435,7 +504,8 @@ const prepareGetCode = async () => {
|
||||
{ requestController: authRequestController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
|
||||
if (phone.value !== requestedPhone)
|
||||
throw new Error("手机号已变化，请重新获取验证码");
|
||||
const requirement = normalizeCaptchaRequirement(response);
|
||||
if (!requirement.required) {
|
||||
await appApi.sendSmsCode(
|
||||
@@ -473,7 +543,8 @@ const completeTac = async (result) => {
|
||||
if (!expectedContext) return;
|
||||
try {
|
||||
const ticket = normalizeTacSuccess(result, expectedContext.requestId);
|
||||
if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
|
||||
if (phone.value !== expectedContext.subject)
|
||||
throw new Error("手机号已变化，请重新验证");
|
||||
closeTac();
|
||||
sendingCode.value = true;
|
||||
await appApi.sendSmsCode(
|
||||
@@ -566,7 +637,6 @@ const submitRegister = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.register-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@@ -818,5 +888,4 @@ const submitRegister = async () => {
|
||||
.button-hover {
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
+216
-166
@@ -1,168 +1,220 @@
|
||||
<!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
|
||||
<template>
|
||||
<AuthPageShell class="auth-page reset-page">
|
||||
<view class="reset-content">
|
||||
<view class="page-heading">
|
||||
<button
|
||||
class="auth-plain-button back-button"
|
||||
aria-label="返回登录"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>
|
||||
<image
|
||||
class="back-button__icon"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a05-phone"><text class="required-mark">*</text>手机号</label>
|
||||
<input
|
||||
id="a05-phone"
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:disabled="sendingCode || submitting || (cooldownSeconds > 0 && phone.length > 0)"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.phone)"
|
||||
:aria-describedby="fieldErrors.phone ? 'a05-phone-error' : undefined"
|
||||
@input="handlePhoneInput"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.phone" id="a05-phone-error" class="field-error" role="alert">{{
|
||||
fieldErrors.phone
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.verificationCode }"
|
||||
>
|
||||
<view class="input-row code-row">
|
||||
<label class="input-label" for="a05-verification-code"><text class="required-mark">*</text>验证码</label>
|
||||
<input
|
||||
id="a05-verification-code"
|
||||
v-model.trim="verificationCode"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:disabled="submitting"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.verificationCode)"
|
||||
:aria-describedby="fieldErrors.verificationCode ? 'a05-verification-code-error' : undefined"
|
||||
@input="clearFieldError('verificationCode')"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button get-code"
|
||||
:class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
|
||||
:disabled="sendingCode || submitting || cooldownSeconds > 0"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareGetCode"
|
||||
>{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
|
||||
>
|
||||
</view>
|
||||
<text v-if="fieldErrors.verificationCode" id="a05-verification-code-error" class="field-error" role="alert">{{
|
||||
fieldErrors.verificationCode
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.password }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a05-password"><text class="required-mark">*</text>新密码</label>
|
||||
<input
|
||||
id="a05-password"
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting"
|
||||
placeholder="请设置新密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.password)"
|
||||
:aria-describedby="fieldErrors.password ? 'a05-password-error' : undefined"
|
||||
@input="clearFieldError('password')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.password" id="a05-password-error" class="field-error" role="alert">{{
|
||||
fieldErrors.password
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a05-confirm-password"><text class="required-mark">*</text>确认新密码</label>
|
||||
<input
|
||||
id="a05-confirm-password"
|
||||
v-model="confirmPassword"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting"
|
||||
placeholder="请再次输入新密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
|
||||
:aria-describedby="fieldErrors.confirmPassword ? 'a05-confirm-password-error' : undefined"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.confirmPassword" id="a05-confirm-password-error" class="field-error" role="alert">{{
|
||||
fieldErrors.confirmPassword
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="reset-content">
|
||||
<view class="page-heading">
|
||||
<button
|
||||
class="auth-plain-button reset-submit"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
:aria-busy="submitting"
|
||||
hover-class="button-hover"
|
||||
@click="submitReset"
|
||||
class="auth-plain-button back-button"
|
||||
aria-label="返回登录"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>
|
||||
<image
|
||||
class="reset-submit__skin"
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
class="back-button__icon"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<text class="reset-submit__content">{{ submitting ? "提交中…" : "确认重设" }}</text>
|
||||
</button>
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<text class="reset-tip">重设成功后，请使用新密码登录</text>
|
||||
<view class="login-entry">
|
||||
<text>想起密码了？</text>
|
||||
<button
|
||||
class="auth-plain-button login-entry__link"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>返回登录</button
|
||||
<view class="form-content">
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.phone }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a05-phone"
|
||||
><text class="required-mark">*</text>手机号</label
|
||||
>
|
||||
<input
|
||||
id="a05-phone"
|
||||
v-model.trim="phone"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
:disabled="
|
||||
sendingCode ||
|
||||
submitting ||
|
||||
(cooldownSeconds > 0 && phone.length > 0)
|
||||
"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.phone)"
|
||||
:aria-describedby="
|
||||
fieldErrors.phone ? 'a05-phone-error' : undefined
|
||||
"
|
||||
@input="handlePhoneInput"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.phone"
|
||||
id="a05-phone-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.phone }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.verificationCode }"
|
||||
>
|
||||
<view class="input-row code-row">
|
||||
<label class="input-label" for="a05-verification-code"
|
||||
><text class="required-mark">*</text>验证码</label
|
||||
>
|
||||
<input
|
||||
id="a05-verification-code"
|
||||
v-model.trim="verificationCode"
|
||||
class="auth-input"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:disabled="submitting"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.verificationCode)"
|
||||
:aria-describedby="
|
||||
fieldErrors.verificationCode
|
||||
? 'a05-verification-code-error'
|
||||
: undefined
|
||||
"
|
||||
@input="clearFieldError('verificationCode')"
|
||||
/>
|
||||
<button
|
||||
class="auth-plain-button get-code"
|
||||
:class="{
|
||||
'get-code--disabled': sendingCode || cooldownSeconds > 0,
|
||||
}"
|
||||
:disabled="sendingCode || submitting || cooldownSeconds > 0"
|
||||
hover-class="tap-fade"
|
||||
@click="prepareGetCode"
|
||||
>
|
||||
{{
|
||||
sendingCode
|
||||
? "请求中…"
|
||||
: cooldownSeconds > 0
|
||||
? `${cooldownSeconds}s 后重发`
|
||||
: "获取验证码"
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.verificationCode"
|
||||
id="a05-verification-code-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.verificationCode }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.password }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a05-password"
|
||||
><text class="required-mark">*</text>新密码</label
|
||||
>
|
||||
<input
|
||||
id="a05-password"
|
||||
v-model="password"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting"
|
||||
placeholder="请设置新密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.password)"
|
||||
:aria-describedby="
|
||||
fieldErrors.password ? 'a05-password-error' : undefined
|
||||
"
|
||||
@input="clearFieldError('password')"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.password"
|
||||
id="a05-password-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.password }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="field-block"
|
||||
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
|
||||
>
|
||||
<view class="input-row">
|
||||
<label class="input-label" for="a05-confirm-password"
|
||||
><text class="required-mark">*</text>确认新密码</label
|
||||
>
|
||||
<input
|
||||
id="a05-confirm-password"
|
||||
v-model="confirmPassword"
|
||||
class="auth-input"
|
||||
password
|
||||
maxlength="32"
|
||||
:disabled="submitting"
|
||||
placeholder="请再次输入新密码"
|
||||
placeholder-class="placeholder"
|
||||
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
|
||||
:aria-describedby="
|
||||
fieldErrors.confirmPassword
|
||||
? 'a05-confirm-password-error'
|
||||
: undefined
|
||||
"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
</view>
|
||||
<text
|
||||
v-if="fieldErrors.confirmPassword"
|
||||
id="a05-confirm-password-error"
|
||||
class="field-error"
|
||||
role="alert"
|
||||
>{{ fieldErrors.confirmPassword }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="auth-plain-button reset-submit"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
:aria-busy="submitting"
|
||||
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">{{
|
||||
submitting ? "提交中…" : "确认重设"
|
||||
}}</text>
|
||||
</button>
|
||||
|
||||
<text class="reset-tip">重设成功后，请使用新密码登录</text>
|
||||
<view class="login-entry">
|
||||
<text>想起密码了？</text>
|
||||
<button
|
||||
class="auth-plain-button login-entry__link"
|
||||
:disabled="submitting || sendingCode || tacVisible"
|
||||
hover-class="tap-fade"
|
||||
@click="requestBack"
|
||||
>
|
||||
返回登录
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template #overlay>
|
||||
<TacVerification
|
||||
:visible="tacVisible"
|
||||
@@ -230,11 +282,7 @@ import { createAuthSmsCooldown } from "@/utils/auth-sms-cooldown.js";
|
||||
import { runtimeConfig } from "@/utils/config.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { calcMD5 } from "@/utils/md5.js";
|
||||
import {
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
import { handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
PASSWORD_POLICY_MESSAGE,
|
||||
validatePassword,
|
||||
@@ -260,14 +308,15 @@ const fieldErrors = ref({
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
const isDirty = computed(() =>
|
||||
!successVisible.value &&
|
||||
Boolean(
|
||||
phone.value ||
|
||||
const isDirty = computed(
|
||||
() =>
|
||||
!successVisible.value &&
|
||||
Boolean(
|
||||
phone.value ||
|
||||
verificationCode.value ||
|
||||
password.value ||
|
||||
confirmPassword.value,
|
||||
),
|
||||
),
|
||||
);
|
||||
let feedbackTimer = null;
|
||||
let tacSequence = 0;
|
||||
@@ -348,7 +397,8 @@ const handlePhoneInput = () => {
|
||||
};
|
||||
|
||||
const prepareGetCode = async () => {
|
||||
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0) return;
|
||||
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0)
|
||||
return;
|
||||
if (!isAuthPhone(phone.value)) {
|
||||
fieldErrors.value.phone = "请输入正确手机号";
|
||||
return;
|
||||
@@ -363,7 +413,8 @@ const prepareGetCode = async () => {
|
||||
{ requestController: authRequestController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
|
||||
if (phone.value !== requestedPhone)
|
||||
throw new Error("手机号已变化，请重新获取验证码");
|
||||
const requirement = normalizeCaptchaRequirement(response);
|
||||
if (!requirement.required) {
|
||||
await appApi.sendSmsCode(
|
||||
@@ -401,7 +452,8 @@ const completeTac = async (result) => {
|
||||
if (!expectedContext) return;
|
||||
try {
|
||||
const ticket = normalizeTacSuccess(result, expectedContext.requestId);
|
||||
if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
|
||||
if (phone.value !== expectedContext.subject)
|
||||
throw new Error("手机号已变化，请重新验证");
|
||||
closeTac();
|
||||
sendingCode.value = true;
|
||||
await appApi.sendSmsCode(
|
||||
@@ -487,7 +539,6 @@ const submitReset = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.reset-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@@ -668,5 +719,4 @@ const submitReset = async () => {
|
||||
.button-hover {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,79 +1,75 @@
|
||||
<!-- 页面编号：A-06；用途：只承接账号冻结、停用与风险限制等阻断登录状态。 -->
|
||||
<template>
|
||||
<AuthPageShell class="auth-page status-page">
|
||||
<view class="status-content">
|
||||
<view class="page-heading">
|
||||
<view class="back-button" hover-class="tap-fade" @click="requestBack">
|
||||
<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>
|
||||
<view class="status-content">
|
||||
<view class="page-heading">
|
||||
<view class="back-button" hover-class="tap-fade" @click="requestBack">
|
||||
<image
|
||||
class="status-divider"
|
||||
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
|
||||
class="back-button__icon"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="status-body">
|
||||
<image
|
||||
class="status-icon"
|
||||
src="/static/assets/foundation/transparent/auth-login-outline.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="status-eyebrow">{{ currentState.eyebrow }}</text>
|
||||
<text class="status-title">{{ currentState.title }}</text>
|
||||
<text class="status-description">{{ currentState.description }}</text>
|
||||
|
||||
<view class="status-details">
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{
|
||||
currentState.reasonLabel
|
||||
}}</text>
|
||||
<text class="status-detail__value">{{
|
||||
currentState.reason
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{
|
||||
currentState.impactLabel
|
||||
}}</text>
|
||||
<text class="status-detail__value">{{
|
||||
currentState.impact
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{
|
||||
currentState.recoveryLabel
|
||||
}}</text>
|
||||
<text class="status-detail__value">{{
|
||||
currentState.recovery
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="status-primary"
|
||||
hover-class="button-hover"
|
||||
@click="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="requestBack"
|
||||
>返回登录</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"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="status-body">
|
||||
<image
|
||||
class="status-icon"
|
||||
src="/static/assets/foundation/transparent/auth-login-outline.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="status-eyebrow">{{ currentState.eyebrow }}</text>
|
||||
<text class="status-title">{{ currentState.title }}</text>
|
||||
<text class="status-description">{{ currentState.description }}</text>
|
||||
|
||||
<view class="status-details">
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{
|
||||
currentState.reasonLabel
|
||||
}}</text>
|
||||
<text class="status-detail__value">{{ currentState.reason }}</text>
|
||||
</view>
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{
|
||||
currentState.impactLabel
|
||||
}}</text>
|
||||
<text class="status-detail__value">{{ currentState.impact }}</text>
|
||||
</view>
|
||||
<view class="status-detail">
|
||||
<text class="status-detail__label">{{
|
||||
currentState.recoveryLabel
|
||||
}}</text>
|
||||
<text class="status-detail__value">{{
|
||||
currentState.recovery
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="status-primary"
|
||||
hover-class="button-hover"
|
||||
@click="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="requestBack"
|
||||
>返回登录</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<template #overlay>
|
||||
<view
|
||||
v-if="recoveryVisible"
|
||||
@@ -415,5 +411,4 @@ onBackPress((event) => handleBackPress(event, requestBack));
|
||||
.button-hover {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,53 @@
|
||||
<template>
|
||||
<view class="family-page" :class="`feed-state--${feedState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="family-page__header"><PageHeader root title="家族动态" :action="hasValidContext ? '发布' : ''" @action="toPublish" /></view>
|
||||
<view class="family-page__header"
|
||||
><PageHeader
|
||||
root
|
||||
title="家族动态"
|
||||
:action="hasValidContext ? '发布' : ''"
|
||||
@action="toPublish"
|
||||
/></view>
|
||||
<view class="feed-content">
|
||||
<view class="feed-heading"><text>家族圈</text><text>家宴、通知与共同记忆</text></view>
|
||||
<view v-if="hasValidContext" class="feed-shortcuts"><view v-for="item in shortcuts" :key="item.key" class="feed-shortcut" @click="openSection(item.key)"><text>{{ item.label }}</text></view></view>
|
||||
<AppLoading v-if="feedState === 'loading'" text="正在读取家族动态" description="请稍候，正在整理家族近况。" />
|
||||
<view v-else-if="feedState === 'list'" class="feed-list"><view v-for="item in feeds" :key="item.id" class="feed-card" @click="openFeed(item)"><text class="feed-card__publisher">{{ item.publisher }}</text><text class="feed-card__content">{{ item.content }}</text><text class="feed-card__meta">{{ feedTypeLabel(item.type) }} · {{ item.time }}</text></view></view>
|
||||
<view v-else class="feed-state-card"><view class="feed-state-card__copy"><text>{{ stateCopy.title }}</text><text>{{ stateCopy.copy }}</text></view></view>
|
||||
<view class="feed-action" @click="handlePrimaryAction"><text>{{ stateCopy.action }}</text></view>
|
||||
<view class="feed-heading"
|
||||
><text>家族圈</text><text>家宴、通知与共同记忆</text></view
|
||||
>
|
||||
<view v-if="hasValidContext" class="feed-shortcuts"
|
||||
><view
|
||||
v-for="item in shortcuts"
|
||||
:key="item.key"
|
||||
class="feed-shortcut"
|
||||
@click="openSection(item.key)"
|
||||
><text>{{ item.label }}</text></view
|
||||
></view
|
||||
>
|
||||
<AppLoading
|
||||
v-if="feedState === 'loading'"
|
||||
text="正在读取家族动态"
|
||||
description="请稍候，正在整理家族近况。"
|
||||
/>
|
||||
<view v-else-if="feedState === 'list'" class="feed-list"
|
||||
><view
|
||||
v-for="item in feeds"
|
||||
:key="item.id"
|
||||
class="feed-card"
|
||||
@click="openFeed(item)"
|
||||
><text class="feed-card__publisher">{{ item.publisher }}</text
|
||||
><text class="feed-card__content">{{ item.content }}</text
|
||||
><text class="feed-card__meta"
|
||||
>{{ feedTypeLabel(item.type) }} · {{ item.time }}</text
|
||||
></view
|
||||
></view
|
||||
>
|
||||
<view v-else class="feed-state-card"
|
||||
><view class="feed-state-card__copy"
|
||||
><text>{{ stateCopy.title }}</text
|
||||
><text>{{ stateCopy.copy }}</text></view
|
||||
></view
|
||||
>
|
||||
<view class="feed-action" @click="handlePrimaryAction"
|
||||
><text>{{ stateCopy.action }}</text></view
|
||||
>
|
||||
</view>
|
||||
<AppTabbar active="family" />
|
||||
</view>
|
||||
@@ -25,20 +64,206 @@ import { appApi, isRequestCancelled } from "@/utils/api.js";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
import { goRoot, openPage } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref(""); const hasValidContext = ref(false); const feedState = ref("loading"); const feeds = ref([]); let active = true;
|
||||
const feedTypeLabel = (type) => String(type || "").trim().toLowerCase() === "text" ? "文字动态" : "家族动态";
|
||||
const shortcuts = [{ key: "articles", label: "谱文" }, { key: "albums", label: "相册" }, { key: "rituals", label: "礼仪" }, { key: "memos", label: "备忘" }, { key: "people", label: "人物录" }, { key: "gifts", label: "贺礼簿" }, { key: "merits", label: "功德录" }, { key: "videos", label: "家族视频" }];
|
||||
const stateCopy = computed(() => !hasValidContext.value ? { title: "请先选择有效家谱", copy: "家族动态必须归属明确家谱。", action: "返回我的家谱" } : feedState.value === "empty" ? { title: "还没有家族动态", copy: "发布第一条动态，记录家族此刻。", action: "发布家族动态" } : feedState.value === "error" ? { title: "动态暂时无法读取", copy: "请稍后重新读取。", action: "重新读取" } : { title: "", copy: "", action: "发布家族动态" });
|
||||
const loadFeeds = async () => { if (!hasValidContext.value) return; feedState.value = "loading"; try { const rows = await appApi.getFeeds(genealogyId.value); if (!active) return; feeds.value = rows; feedState.value = feeds.value.length ? "list" : "empty"; } catch (error) { if (!active || isRequestCancelled(error)) return; feedState.value = "error"; } };
|
||||
onLoad((query) => { const supplied = Object.prototype.hasOwnProperty.call(query || {}, "genealogyId"); genealogyId.value = supplied ? String(query.genealogyId || "") : String(genealogyContext.getCurrentGenealogyId() || ""); hasValidContext.value = /^[1-9]\d*$/.test(genealogyId.value); if (hasValidContext.value) void loadFeeds(); else feedState.value = "error"; });
|
||||
onShow(() => { if (hasValidContext.value) void loadFeeds(); });
|
||||
const toPublish = () => hasValidContext.value ? openPage("F02", { genealogyId: genealogyId.value }, "F01") : goRoot("G01");
|
||||
const openFeed = (item) => openPage("F03", { genealogyId: genealogyId.value, feedId: item.id }, "F01");
|
||||
const openSection = (key) => { const routes = { articles: "F04", albums: "F07", rituals: "R05", memos: "R10", people: "R01", gifts: "R03", merits: "R11", videos: "F10" }; return openPage(routes[key], { genealogyId: genealogyId.value }, "F01"); };
|
||||
const handlePrimaryAction = () => feedState.value === "error" ? loadFeeds() : toPublish();
|
||||
const genealogyId = ref("");
|
||||
const hasValidContext = ref(false);
|
||||
const feedState = ref("loading");
|
||||
const feeds = ref([]);
|
||||
let active = true;
|
||||
const feedTypeLabel = (type) =>
|
||||
String(type || "")
|
||||
.trim()
|
||||
.toLowerCase() === "text"
|
||||
? "文字动态"
|
||||
: "家族动态";
|
||||
const shortcuts = [
|
||||
{ key: "articles", label: "谱文" },
|
||||
{ key: "albums", label: "相册" },
|
||||
{ key: "rituals", label: "礼仪" },
|
||||
{ key: "memos", label: "备忘" },
|
||||
{ key: "people", label: "人物录" },
|
||||
{ key: "gifts", label: "贺礼簿" },
|
||||
{ key: "merits", label: "功德录" },
|
||||
{ key: "videos", label: "家族视频" },
|
||||
];
|
||||
const stateCopy = computed(() =>
|
||||
!hasValidContext.value
|
||||
? {
|
||||
title: "请先选择有效家谱",
|
||||
copy: "家族动态必须归属明确家谱。",
|
||||
action: "返回我的家谱",
|
||||
}
|
||||
: feedState.value === "empty"
|
||||
? {
|
||||
title: "还没有家族动态",
|
||||
copy: "发布第一条动态，记录家族此刻。",
|
||||
action: "发布家族动态",
|
||||
}
|
||||
: feedState.value === "error"
|
||||
? {
|
||||
title: "动态暂时无法读取",
|
||||
copy: "请稍后重新读取。",
|
||||
action: "重新读取",
|
||||
}
|
||||
: { title: "", copy: "", action: "发布家族动态" },
|
||||
);
|
||||
const loadFeeds = async () => {
|
||||
if (!hasValidContext.value) return;
|
||||
feedState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getFeeds(genealogyId.value);
|
||||
if (!active) return;
|
||||
feeds.value = rows;
|
||||
feedState.value = feeds.value.length ? "list" : "empty";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
feedState.value = "error";
|
||||
}
|
||||
};
|
||||
onLoad((query) => {
|
||||
const supplied = Object.prototype.hasOwnProperty.call(
|
||||
query || {},
|
||||
"genealogyId",
|
||||
);
|
||||
genealogyId.value = supplied
|
||||
? String(query.genealogyId || "")
|
||||
: String(genealogyContext.getCurrentGenealogyId() || "");
|
||||
hasValidContext.value = /^[1-9]\d*$/.test(genealogyId.value);
|
||||
if (hasValidContext.value) void loadFeeds();
|
||||
else feedState.value = "error";
|
||||
});
|
||||
onShow(() => {
|
||||
if (hasValidContext.value) void loadFeeds();
|
||||
});
|
||||
const toPublish = () =>
|
||||
hasValidContext.value
|
||||
? openPage("F02", { genealogyId: genealogyId.value }, "F01")
|
||||
: goRoot("G01");
|
||||
const openFeed = (item) =>
|
||||
openPage("F03", { genealogyId: genealogyId.value, feedId: item.id }, "F01");
|
||||
const openSection = (key) => {
|
||||
const routes = {
|
||||
articles: "F04",
|
||||
albums: "F07",
|
||||
rituals: "R05",
|
||||
memos: "R10",
|
||||
people: "R01",
|
||||
gifts: "R03",
|
||||
merits: "R11",
|
||||
videos: "F10",
|
||||
};
|
||||
return openPage(routes[key], { genealogyId: genealogyId.value }, "F01");
|
||||
};
|
||||
const handlePrimaryAction = () =>
|
||||
feedState.value === "error" ? loadFeeds() : toPublish();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.family-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.family-page__header,.feed-content{z-index:1}.feed-content{flex:1;padding:24rpx 24rpx 190rpx}.feed-heading text{display:block}.feed-heading text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:31rpx;font-weight:700}.feed-heading text:last-child{margin-top:6rpx;color:$ink-muted;font-size:23rpx}.feed-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:15rpx}.feed-shortcut{min-height:48px;display:flex;align-items:center;justify-content:center}.feed-shortcut text{color:$ink;font-size:22rpx;font-weight:700}.feed-list{margin-top:22rpx}.feed-card,.feed-state-card{@include adaptive.adaptive-family-letter;box-sizing:border-box;margin-top:16rpx;padding:30rpx}.feed-card text,.feed-state-card text{display:block}.feed-card__publisher{color:$brand-red;font-size:22rpx}.feed-card__content{margin-top:12rpx;color:$ink;font-size:28rpx;line-height:1.55}.feed-card__meta{margin-top:12rpx;color:$ink-muted;font-size:21rpx}.feed-state-card{min-height:230rpx;display:flex;align-items:center;justify-content:center;text-align:center}.feed-state-card text:first-child{color:$ink;font-size:31rpx;font-weight:700}.feed-state-card text:last-child{margin-top:13rpx;color:$ink-muted;font-size:23rpx;line-height:1.45}.feed-action{@include adaptive.adaptive-scroll-button(primary);width:514rpx;max-width:100%;min-height:76rpx;margin:19rpx auto}.feed-action text{display:flex;height:100%;align-items:center;justify-content:center;color:#fff9ed;font-size:24rpx;font-weight:700}
|
||||
.family-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.family-page__header,
|
||||
.feed-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.feed-content {
|
||||
flex: 1;
|
||||
padding: 24rpx 24rpx 190rpx;
|
||||
}
|
||||
.feed-heading text {
|
||||
display: block;
|
||||
}
|
||||
.feed-heading text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-heading text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.feed-shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.feed-shortcut {
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.feed-shortcut text {
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-list {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.feed-card,
|
||||
.feed-state-card {
|
||||
@include adaptive.adaptive-family-letter;
|
||||
box-sizing: border-box;
|
||||
margin-top: 16rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.feed-card text,
|
||||
.feed-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.feed-card__publisher {
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.feed-card__content {
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.feed-card__meta {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.feed-state-card {
|
||||
min-height: 230rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.feed-state-card text:first-child {
|
||||
color: $ink;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-state-card text:last-child {
|
||||
margin-top: 13rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.feed-action {
|
||||
@include adaptive.adaptive-scroll-button(primary);
|
||||
width: 514rpx;
|
||||
max-width: 100%;
|
||||
min-height: 76rpx;
|
||||
margin: 19rpx auto;
|
||||
}
|
||||
.feed-action text {
|
||||
display: flex;
|
||||
min-height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,15 +2,25 @@
|
||||
<template>
|
||||
<view class="publish-page" :class="`publish-state--${publishState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="publish-page__header"><PageHeader title="发布动态" custom-back @back="requestBack" /></view>
|
||||
<view class="publish-page__header"
|
||||
><PageHeader title="发布动态" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="publish-panel">
|
||||
<view v-if="publishState === 'form'" class="publish-form">
|
||||
<text>记录此刻</text>
|
||||
<text>填写需要的内容；留空的字段由服务端按接口默认行为处理。</text>
|
||||
|
||||
<view class="publish-field publish-field--content">
|
||||
<text class="publish-field__label"><text class="required-mark">*</text>动态内容</text>
|
||||
<textarea v-model="form.feedContent" auto-height placeholder="写下想对家人说的话" placeholder-class="publish-placeholder" @input="submitError = ''" />
|
||||
<text class="publish-field__label"
|
||||
><text class="required-mark">*</text>动态内容</text
|
||||
>
|
||||
<textarea
|
||||
v-model="form.feedContent"
|
||||
auto-height
|
||||
placeholder="写下想对家人说的话"
|
||||
placeholder-class="publish-placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="publish-field">
|
||||
<text class="publish-field__label">动态类型</text>
|
||||
@@ -22,23 +32,53 @@
|
||||
<view class="publish-field publish-field--media">
|
||||
<view>
|
||||
<text class="publish-field__label">动态配图</text>
|
||||
<text class="publish-field__hint">图片选定后会先取得真实上传回执，并在提交动态时关联。</text>
|
||||
<text class="publish-field__hint"
|
||||
>图片选定后会先取得真实上传回执，并在提交动态时关联。</text
|
||||
>
|
||||
</view>
|
||||
<button class="upload-button" :disabled="isUploading || isSubmitting" @click="uploadImage">{{ isUploading ? '上传中…' : '添加图片' }}</button>
|
||||
<text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`" class="upload-receipt">已上传：{{ receipt.fileName || '图片' }}</text>
|
||||
<text v-if="uploadError" class="publish-error">{{ uploadError }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="isUploading || isSubmitting"
|
||||
@click="uploadImage"
|
||||
>
|
||||
{{ isUploading ? "上传中…" : "添加图片" }}
|
||||
</button>
|
||||
<text
|
||||
v-for="(receipt, index) in mediaReceipts"
|
||||
:key="`${receipt.ossId}-${index}`"
|
||||
class="upload-receipt"
|
||||
>已上传：{{ receipt.fileName || "图片" }}</text
|
||||
>
|
||||
<text v-if="uploadError" class="publish-error">{{
|
||||
uploadError
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="publish-field">
|
||||
<text class="publish-field__label">排序值</text>
|
||||
<input v-model="form.sortOrder" type="number" placeholder="留空时服务端默认为 0" placeholder-class="publish-placeholder" @input="submitError = ''" />
|
||||
<input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="留空时服务端默认为 0"
|
||||
placeholder-class="publish-placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="submitError" class="publish-error">{{ submitError }}</text>
|
||||
<AppButton block :label="isSubmitting ? '正在提交' : '提交动态'" :disabled="isSubmitting || isUploading" @click="submit" />
|
||||
<AppButton
|
||||
block
|
||||
:label="isSubmitting ? '正在提交' : '提交动态'"
|
||||
:disabled="isSubmitting || isUploading"
|
||||
@click="submit"
|
||||
/>
|
||||
</view>
|
||||
<view v-else class="publish-result">
|
||||
<text>{{ resultCopy.title }}</text>
|
||||
<text>{{ resultCopy.copy }}</text>
|
||||
<AppButton block :label="resultCopy.action" @click="handleResultAction" />
|
||||
<AppButton
|
||||
block
|
||||
:label="resultCopy.action"
|
||||
@click="handleResultAction"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog
|
||||
@@ -62,10 +102,22 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const form = reactive({ feedContent: "", feedType: "text", sortOrder: "" });
|
||||
@@ -77,28 +129,37 @@ const submitError = ref("");
|
||||
const uploadError = ref("");
|
||||
const discardVisible = ref(false);
|
||||
const requestController = createRequestController();
|
||||
const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
|
||||
const isDirty = computed(() => Boolean(
|
||||
form.feedContent.trim() || form.sortOrder.trim() || mediaReceipts.value.length,
|
||||
));
|
||||
const mediaOssIds = computed(() =>
|
||||
mediaReceipts.value.map((item) => item.ossId).join(","),
|
||||
);
|
||||
const isDirty = computed(() =>
|
||||
Boolean(
|
||||
form.feedContent.trim() ||
|
||||
form.sortOrder.trim() ||
|
||||
mediaReceipts.value.length,
|
||||
),
|
||||
);
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const resultCopy = computed(() => ({
|
||||
success: {
|
||||
title: "动态已提交服务端",
|
||||
copy: "服务端已返回成功信封。返回动态列表后将重新读取服务端数据。",
|
||||
action: "返回家族动态",
|
||||
},
|
||||
error: {
|
||||
title: "动态未提交",
|
||||
copy: "当前内容仍保留在页面中，可返回表单继续核对。",
|
||||
action: "返回填写",
|
||||
},
|
||||
invalid: {
|
||||
title: "动态入口无效",
|
||||
copy: "没有取得有效家谱标识，页面不会创建无归属动态。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
}[publishState.value]));
|
||||
const resultCopy = computed(
|
||||
() =>
|
||||
({
|
||||
success: {
|
||||
title: "动态已提交服务端",
|
||||
copy: "服务端已返回成功信封。返回动态列表后将重新读取服务端数据。",
|
||||
action: "返回家族动态",
|
||||
},
|
||||
error: {
|
||||
title: "动态未提交",
|
||||
copy: "当前内容仍保留在页面中，可返回表单继续核对。",
|
||||
action: "返回填写",
|
||||
},
|
||||
invalid: {
|
||||
title: "动态入口无效",
|
||||
copy: "没有取得有效家谱标识，页面不会创建无归属动态。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
})[publishState.value],
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
@@ -136,12 +197,16 @@ const submit = async () => {
|
||||
isSubmitting.value = true;
|
||||
submitError.value = "";
|
||||
try {
|
||||
await appApi.createFeed(genealogyId.value, {
|
||||
feedContent: form.feedContent,
|
||||
feedType: form.feedType,
|
||||
mediaOssIds: mediaOssIds.value,
|
||||
sortOrder: form.sortOrder,
|
||||
}, { requestController });
|
||||
await appApi.createFeed(
|
||||
genealogyId.value,
|
||||
{
|
||||
feedContent: form.feedContent,
|
||||
feedType: form.feedType,
|
||||
mediaOssIds: mediaOssIds.value,
|
||||
sortOrder: form.sortOrder,
|
||||
},
|
||||
{ requestController },
|
||||
);
|
||||
Object.assign(form, { feedContent: "", feedType: "text", sortOrder: "" });
|
||||
mediaReceipts.value = [];
|
||||
publishState.value = "success";
|
||||
@@ -153,14 +218,15 @@ const submit = async () => {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: isSubmitting.value || isUploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": requestDiscardConfirmation,
|
||||
});
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: isSubmitting.value || isUploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": requestDiscardConfirmation,
|
||||
});
|
||||
const returnToFamily = async () => {
|
||||
const confirmed = isDirty.value ? await requestDiscardConfirmation() : true;
|
||||
if (!confirmed) return false;
|
||||
@@ -183,28 +249,138 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.publish-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.publish-page__header, .publish-panel { @include adaptive.adaptive-family-content; z-index: 1; }
|
||||
.publish-panel { width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 9%; box-sizing: border-box; }
|
||||
.publish-form > text, .publish-result > text { display: block; }
|
||||
.publish-form > text:first-child, .publish-result > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||||
.publish-form > text:nth-child(2), .publish-result > text:nth-child(2) { margin-top: 12rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }
|
||||
.publish-field { @include adaptive.adaptive-family-field; margin-top: 20rpx; padding: 18rpx 22rpx; }
|
||||
.publish-field__label { display: block; color: $ink; font-size: 25rpx; font-weight: 700; }
|
||||
.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; line-height: 1; transform: translateY(-3rpx); }
|
||||
.publish-field input, .publish-field textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 12rpx; color: $ink; font-size: 24rpx; }
|
||||
.publish-field input { min-height: 64rpx; }
|
||||
.publish-field__value--readonly { display:flex; min-height:76rpx; align-items:center; justify-content:space-between; margin-top:12rpx; padding:0 20rpx; border:1rpx solid rgba(128,89,49,.22); border-radius:10rpx; background:rgba(255,252,245,.48); }
|
||||
.publish-field__value--readonly text:first-child { color:$ink; font-size:24rpx; }
|
||||
.publish-field__value--readonly text:last-child { color:$ink-muted; font-size:20rpx; }
|
||||
.publish-field--content textarea { min-height: 200rpx; line-height: 1.7; }
|
||||
.publish-field--media { display: grid; gap: 12rpx; }
|
||||
.publish-field__hint { display: block; margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }
|
||||
.upload-button { justify-self: start; min-height: 88rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.upload-receipt { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
|
||||
.publish-placeholder { color: #8e806e; }
|
||||
.publish-error { margin-top: 12rpx; color: $brand-red; font-size: 22rpx; line-height: 1.5; }
|
||||
.publish-form > .app-button { margin-top: 24rpx; }
|
||||
.publish-result { margin-top: 20%; text-align: center; }
|
||||
.publish-result > .app-button { margin: 30rpx auto 0; }
|
||||
.publish-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.publish-page__header,
|
||||
.publish-panel {
|
||||
@include adaptive.adaptive-family-content;
|
||||
z-index: 1;
|
||||
}
|
||||
.publish-panel {
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 0;
|
||||
padding: 9%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.publish-form > text,
|
||||
.publish-result > text {
|
||||
display: block;
|
||||
}
|
||||
.publish-form > text:first-child,
|
||||
.publish-result > text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.publish-form > text:nth-child(2),
|
||||
.publish-result > text:nth-child(2) {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.publish-field {
|
||||
@include adaptive.adaptive-family-field;
|
||||
margin-top: 20rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
}
|
||||
.publish-field__label {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.publish-field input,
|
||||
.publish-field textarea {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.publish-field input {
|
||||
min-height: 64rpx;
|
||||
}
|
||||
.publish-field__value--readonly {
|
||||
display: flex;
|
||||
min-height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.22);
|
||||
border-radius: 10rpx;
|
||||
background: rgba(255, 252, 245, 0.48);
|
||||
}
|
||||
.publish-field__value--readonly text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.publish-field__value--readonly text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.publish-field--content textarea {
|
||||
min-height: 200rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.publish-field--media {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.publish-field__hint {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.publish-placeholder {
|
||||
color: #8e806e;
|
||||
}
|
||||
.publish-error {
|
||||
margin-top: 12rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.publish-form > .app-button {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.publish-result {
|
||||
margin-top: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
.publish-result > .app-button {
|
||||
margin: 30rpx auto 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,30 +2,49 @@
|
||||
<template>
|
||||
<view class="feed-detail-page" :class="`feed-state--${feedState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="feed-detail-header"><PageHeader title="动态详情" custom-back @back="requestBack" /></view>
|
||||
<view class="feed-detail-header"
|
||||
><PageHeader title="动态详情" custom-back @back="requestBack"
|
||||
/></view>
|
||||
|
||||
<view class="feed-detail-content">
|
||||
<AppLoading v-if="feedState === 'loading'" text="正在读取动态" description="请稍候，正在同步家族动态与评论。" />
|
||||
<AppLoading
|
||||
v-if="feedState === 'loading'"
|
||||
text="正在读取动态"
|
||||
description="请稍候，正在同步家族动态与评论。"
|
||||
/>
|
||||
|
||||
<view v-else-if="feedState === 'ready'" class="feed-detail-body">
|
||||
<view class="feed-card">
|
||||
<view class="feed-card__heading">
|
||||
<text>{{ feedTypeLabel(feed.type) }}</text>
|
||||
<text>{{ feed.time || '未标注时间' }}</text>
|
||||
<text>{{ feed.time || "未标注时间" }}</text>
|
||||
</view>
|
||||
<text class="feed-card__content">{{ feed.content }}</text>
|
||||
<view class="feed-card__meta">
|
||||
<text>发布：{{ feed.publisher }}</text>
|
||||
<text>{{ feed.likeCount }} 次点赞 · {{ feed.commentCount }} 条评论</text>
|
||||
<text
|
||||
>{{ feed.likeCount }} 次点赞 ·
|
||||
{{ feed.commentCount }} 条评论</text
|
||||
>
|
||||
</view>
|
||||
<AppButton
|
||||
compact
|
||||
type="secondary"
|
||||
:disabled="isTogglingLike || !hasLikeState"
|
||||
:label="isTogglingLike ? '正在提交' : (hasLikeState ? (feed.likedByMe ? '取消点赞' : '点赞') : '点赞状态不可用')"
|
||||
:label="
|
||||
isTogglingLike
|
||||
? '正在提交'
|
||||
: hasLikeState
|
||||
? feed.likedByMe
|
||||
? '取消点赞'
|
||||
: '点赞'
|
||||
: '点赞状态不可用'
|
||||
"
|
||||
@click="toggleLike"
|
||||
/>
|
||||
<text v-if="!hasLikeState" class="like-note">点赞状态暂不可用，页面不会猜测下一次操作。</text>
|
||||
<text v-if="!hasLikeState" class="like-note"
|
||||
>点赞状态暂不可用，页面不会猜测下一次操作。</text
|
||||
>
|
||||
<text v-if="likeError" class="like-error">{{ likeError }}</text>
|
||||
</view>
|
||||
|
||||
@@ -36,7 +55,7 @@
|
||||
<view v-for="item in comments" :key="item.id" class="comment-card">
|
||||
<view class="comment-card__heading">
|
||||
<text>{{ item.author }}</text>
|
||||
<text>{{ item.time || '刚刚' }}</text>
|
||||
<text>{{ item.time || "刚刚" }}</text>
|
||||
</view>
|
||||
<text class="comment-card__content">{{ item.content }}</text>
|
||||
</view>
|
||||
@@ -52,7 +71,9 @@
|
||||
placeholder-class="comment-editor__placeholder"
|
||||
@input="commentError = ''"
|
||||
/>
|
||||
<text v-if="commentError" class="comment-error">{{ commentError }}</text>
|
||||
<text v-if="commentError" class="comment-error">{{
|
||||
commentError
|
||||
}}</text>
|
||||
<AppButton
|
||||
block
|
||||
:disabled="isSubmittingComment"
|
||||
@@ -66,7 +87,12 @@
|
||||
<view v-else class="feed-state-card">
|
||||
<text>{{ stateCopy.title }}</text>
|
||||
<text>{{ stateCopy.copy }}</text>
|
||||
<AppButton type="secondary" block :label="stateCopy.action" @click="handleStateAction" />
|
||||
<AppButton
|
||||
type="secondary"
|
||||
block
|
||||
:label="stateCopy.action"
|
||||
@click="handleStateAction"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -79,7 +105,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, handleBackPress, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -95,10 +125,15 @@ const isTogglingLike = ref(false);
|
||||
const likeError = ref("");
|
||||
const controller = createRequestController();
|
||||
let pageActive = true;
|
||||
const feedTypeLabel = (type) => String(type || "").trim().toLowerCase() === "text" ? "文字动态" : "家族动态";
|
||||
const feedTypeLabel = (type) =>
|
||||
String(type || "")
|
||||
.trim()
|
||||
.toLowerCase() === "text"
|
||||
? "文字动态"
|
||||
: "家族动态";
|
||||
|
||||
const hasValidContext = computed(() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(feedId.value),
|
||||
const hasValidContext = computed(
|
||||
() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(feedId.value),
|
||||
);
|
||||
const hasLikeState = computed(() => typeof feed.value?.likedByMe === "boolean");
|
||||
const stateCopy = computed(() => {
|
||||
@@ -134,13 +169,20 @@ const loadFeed = async () => {
|
||||
}
|
||||
feedState.value = "loading";
|
||||
try {
|
||||
const current = await appApi.getFeedDetail(genealogyId.value, feedId.value, { requestController: controller });
|
||||
const current = await appApi.getFeedDetail(
|
||||
genealogyId.value,
|
||||
feedId.value,
|
||||
{ requestController: controller },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
feed.value = current;
|
||||
feedState.value = "ready";
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return;
|
||||
feedState.value = error?.code === "HTTP_ERROR" && error?.httpStatus === 404 ? "missing" : "error";
|
||||
feedState.value =
|
||||
error?.code === "HTTP_ERROR" && error?.httpStatus === 404
|
||||
? "missing"
|
||||
: "error";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -148,7 +190,9 @@ const loadComments = async () => {
|
||||
if (!hasValidContext.value || feedState.value !== "ready") return;
|
||||
commentState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getFeedComments(genealogyId.value, feedId.value, { requestController: controller });
|
||||
const rows = await appApi.getFeedComments(genealogyId.value, feedId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!pageActive) return;
|
||||
comments.value = rows;
|
||||
commentState.value = rows.length ? "list" : "empty";
|
||||
@@ -164,12 +208,20 @@ const refresh = async () => {
|
||||
};
|
||||
|
||||
const toggleLike = async () => {
|
||||
if (isTogglingLike.value || !hasValidContext.value || !feed.value || !hasLikeState.value) return;
|
||||
if (
|
||||
isTogglingLike.value ||
|
||||
!hasValidContext.value ||
|
||||
!feed.value ||
|
||||
!hasLikeState.value
|
||||
)
|
||||
return;
|
||||
const nextLiked = !feed.value.likedByMe;
|
||||
isTogglingLike.value = true;
|
||||
likeError.value = "";
|
||||
try {
|
||||
await appApi.setFeedLike(genealogyId.value, feedId.value, nextLiked, { requestController: controller });
|
||||
await appApi.setFeedLike(genealogyId.value, feedId.value, nextLiked, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!pageActive) return;
|
||||
await loadFeed();
|
||||
} catch (error) {
|
||||
@@ -190,7 +242,12 @@ const submitComment = async () => {
|
||||
isSubmittingComment.value = true;
|
||||
commentError.value = "";
|
||||
try {
|
||||
await appApi.createFeedComment(genealogyId.value, feedId.value, { commentContent }, { requestController: controller });
|
||||
await appApi.createFeedComment(
|
||||
genealogyId.value,
|
||||
feedId.value,
|
||||
{ commentContent },
|
||||
{ requestController: controller },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
commentDraft.value = "";
|
||||
await refresh();
|
||||
@@ -215,46 +272,176 @@ onUnload(() => {
|
||||
controller.abort();
|
||||
});
|
||||
|
||||
const backToFamily = () => hasValidContext.value
|
||||
? returnTo("F01", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const backToFamily = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("F01", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const requestBack = () => backToFamily();
|
||||
const handleStateAction = () => feedState.value === "error" ? refresh() : backToFamily();
|
||||
const handleStateAction = () =>
|
||||
feedState.value === "error" ? refresh() : backToFamily();
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.feed-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.feed-detail-header, .feed-detail-content { z-index: 1; }
|
||||
.feed-detail-content { flex: 1; padding: 18rpx 24rpx 72rpx; }
|
||||
.feed-detail-body { margin-top: 18rpx; }
|
||||
.feed-card, .comment-section, .feed-state-card { @include adaptive.adaptive-family-content; box-sizing: border-box; }
|
||||
.feed-card { padding: 30rpx; }
|
||||
.feed-card__heading, .feed-card__meta, .comment-card__heading { display: flex; justify-content: space-between; gap: 18rpx; }
|
||||
.feed-card__heading text:first-child, .comment-card__heading text:first-child { color: $brand-red; font-size: 23rpx; font-weight: 700; }
|
||||
.feed-card__heading text:last-child, .comment-card__heading text:last-child { color: $ink-muted; font-size: 21rpx; text-align: right; }
|
||||
.feed-card__content { display: block; margin-top: 20rpx; color: $ink; font-size: 29rpx; line-height: 1.7; white-space: pre-wrap; }
|
||||
.feed-card__meta { margin-top: 22rpx; color: $ink-muted; font-size: 21rpx; }
|
||||
.feed-card .app-button { margin-top: 18rpx; }
|
||||
.like-note, .like-error { display: block; margin-top: 10rpx; font-size: 22rpx; }
|
||||
.like-note { color: $ink-muted; }
|
||||
.like-error { color: $brand-red; }
|
||||
.comment-section { margin-top: 18rpx; padding: 28rpx; }
|
||||
.section-title { display: block; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 32rpx; font-weight: 700; }
|
||||
.comment-list { margin-top: 18rpx; }
|
||||
.comment-card { padding: 18rpx 0; border-bottom: 1rpx solid rgba(128, 89, 49, .16); }
|
||||
.comment-card__content { display: block; margin-top: 10rpx; color: $ink; font-size: 25rpx; line-height: 1.55; white-space: pre-wrap; }
|
||||
.comment-state-copy { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.5; }
|
||||
.comment-editor { margin-top: 24rpx; padding-top: 22rpx; border-top: 1rpx solid rgba(128, 89, 49, .18); }
|
||||
.comment-editor textarea { display: block; box-sizing: border-box; width: 100%; min-height: 130rpx; padding: 18rpx; border: 1rpx solid rgba(128, 89, 49, .3); border-radius: 12rpx; color: $ink; font-size: 25rpx; line-height: 1.55; }
|
||||
.comment-editor__placeholder { color: #ab9a86; }
|
||||
.comment-editor .app-button { margin-top: 18rpx; }
|
||||
.comment-error { display: block; margin-top: 10rpx; color: $brand-red; font-size: 22rpx; }
|
||||
.feed-state-card { min-height: 340rpx; margin-top: 36rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.feed-state-card > text { display: block; }
|
||||
.feed-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.feed-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.feed-state-card .app-button { margin-top: 30rpx; }
|
||||
.feed-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.feed-detail-header,
|
||||
.feed-detail-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.feed-detail-content {
|
||||
flex: 1;
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.feed-detail-body {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.feed-card,
|
||||
.comment-section,
|
||||
.feed-state-card {
|
||||
@include adaptive.adaptive-family-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.feed-card {
|
||||
padding: 30rpx;
|
||||
}
|
||||
.feed-card__heading,
|
||||
.feed-card__meta,
|
||||
.comment-card__heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
}
|
||||
.feed-card__heading text:first-child,
|
||||
.comment-card__heading text:first-child {
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-card__heading text:last-child,
|
||||
.comment-card__heading text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.feed-card__content {
|
||||
display: block;
|
||||
margin-top: 20rpx;
|
||||
color: $ink;
|
||||
font-size: 29rpx;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.feed-card__meta {
|
||||
margin-top: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.feed-card .app-button {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.like-note,
|
||||
.like-error {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.like-note {
|
||||
color: $ink-muted;
|
||||
}
|
||||
.like-error {
|
||||
color: $brand-red;
|
||||
}
|
||||
.comment-section {
|
||||
margin-top: 18rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
.section-title {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.comment-list {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.comment-card {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1rpx solid rgba(128, 89, 49, 0.16);
|
||||
}
|
||||
.comment-card__content {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.comment-state-copy {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.comment-editor {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 22rpx;
|
||||
border-top: 1rpx solid rgba(128, 89, 49, 0.18);
|
||||
}
|
||||
.comment-editor textarea {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 130rpx;
|
||||
padding: 18rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.3);
|
||||
border-radius: 12rpx;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.comment-editor__placeholder {
|
||||
color: #ab9a86;
|
||||
}
|
||||
.comment-editor .app-button {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.comment-error {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.feed-state-card {
|
||||
min-height: 340rpx;
|
||||
margin-top: 36rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.feed-state-card > text {
|
||||
display: block;
|
||||
}
|
||||
.feed-state-card > text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.feed-state-card > text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.feed-state-card .app-button {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,13 +2,28 @@
|
||||
<template>
|
||||
<view class="article-list-page" :class="`article-list-state--${listState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="article-list-header"><PageHeader title="谱文" :action="hasValidContext ? '新建' : ''" @action="createArticle" /></view>
|
||||
<view class="article-list-header"
|
||||
><PageHeader
|
||||
title="谱文"
|
||||
:action="hasValidContext ? '新建' : ''"
|
||||
@action="createArticle"
|
||||
/></view>
|
||||
<view class="article-list-content">
|
||||
<view v-if="listState === 'list'" class="article-list-items">
|
||||
<view v-for="item in articles" :key="item.id" class="article-card" @click="openArticle(item)">
|
||||
<view
|
||||
v-for="item in articles"
|
||||
:key="item.id"
|
||||
class="article-card"
|
||||
@click="openArticle(item)"
|
||||
>
|
||||
<text class="article-card__title">{{ item.title }}</text>
|
||||
<text class="article-card__summary">{{ item.summary || item.content }}</text>
|
||||
<text class="article-card__meta">{{ item.author || '家族成员' }} · {{ item.time || '未标注时间' }}</text>
|
||||
<text class="article-card__summary">{{
|
||||
item.summary || item.content
|
||||
}}</text>
|
||||
<text class="article-card__meta"
|
||||
>{{ item.author || "家族成员" }} ·
|
||||
{{ item.time || "未标注时间" }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="article-list-state-card">
|
||||
@@ -33,44 +48,60 @@ const genealogyId = ref("");
|
||||
const hasValidContext = ref(false);
|
||||
const listState = ref("loading");
|
||||
const articles = ref([]);
|
||||
const stateCopy = computed(() => hasValidContext.value
|
||||
? listState.value === "empty" ? {
|
||||
title: "还没有谱文",
|
||||
copy: "新建第一篇谱文，记录值得传承的故事。",
|
||||
action: "新建谱文",
|
||||
} : listState.value === "error" ? {
|
||||
title: "谱文暂时无法读取",
|
||||
copy: "请检查网络后重新读取。",
|
||||
action: "重新读取",
|
||||
} : {
|
||||
title: "正在读取谱文",
|
||||
copy: "请稍候。",
|
||||
action: "重新读取",
|
||||
}
|
||||
: {
|
||||
title: "谱文入口无效",
|
||||
copy: "没有取得有效家谱标识，页面不会展示其他家谱内容。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
const stateCopy = computed(() =>
|
||||
hasValidContext.value
|
||||
? listState.value === "empty"
|
||||
? {
|
||||
title: "还没有谱文",
|
||||
copy: "新建第一篇谱文，记录值得传承的故事。",
|
||||
action: "新建谱文",
|
||||
}
|
||||
: listState.value === "error"
|
||||
? {
|
||||
title: "谱文暂时无法读取",
|
||||
copy: "请检查网络后重新读取。",
|
||||
action: "重新读取",
|
||||
}
|
||||
: {
|
||||
title: "正在读取谱文",
|
||||
copy: "请稍候。",
|
||||
action: "重新读取",
|
||||
}
|
||||
: {
|
||||
title: "谱文入口无效",
|
||||
copy: "没有取得有效家谱标识，页面不会展示其他家谱内容。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
);
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
hasValidContext.value = /^[1-9]\d*$/.test(genealogyId.value);
|
||||
if (hasValidContext.value) void loadArticles(); else listState.value = "invalid";
|
||||
if (hasValidContext.value) void loadArticles();
|
||||
else listState.value = "invalid";
|
||||
});
|
||||
onShow(() => {
|
||||
if (hasValidContext.value) void loadArticles();
|
||||
});
|
||||
onShow(() => { if (hasValidContext.value) void loadArticles(); });
|
||||
const loadArticles = async () => {
|
||||
listState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getArticles(genealogyId.value);
|
||||
articles.value = rows;
|
||||
listState.value = articles.value.length ? "list" : "empty";
|
||||
} catch { listState.value = "error"; }
|
||||
} catch {
|
||||
listState.value = "error";
|
||||
}
|
||||
};
|
||||
const createArticle = () => hasValidContext.value
|
||||
? openPage("F06", { genealogyId: genealogyId.value, mode: "create" }, "F04")
|
||||
: Promise.resolve(false);
|
||||
const openArticle = (item) => openPage("F05", { genealogyId: genealogyId.value, articleId: item.id }, "F04");
|
||||
const createArticle = () =>
|
||||
hasValidContext.value
|
||||
? openPage("F06", { genealogyId: genealogyId.value, mode: "create" }, "F04")
|
||||
: Promise.resolve(false);
|
||||
const openArticle = (item) =>
|
||||
openPage(
|
||||
"F05",
|
||||
{ genealogyId: genealogyId.value, articleId: item.id },
|
||||
"F04",
|
||||
);
|
||||
const handleStateAction = () => {
|
||||
if (!hasValidContext.value) return goBack();
|
||||
return listState.value === "error" ? loadArticles() : createArticle();
|
||||
@@ -79,18 +110,76 @@ const handleStateAction = () => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.article-list-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.article-list-header, .article-list-content { z-index: 1; }
|
||||
.article-list-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.article-list-items { margin-top: 24rpx; }
|
||||
.article-card { @include adaptive.adaptive-family-content; display: flex; min-height: 150rpx; flex-direction: column; justify-content: center; box-sizing: border-box; margin-bottom: 16rpx; padding: 28rpx; }
|
||||
.article-card text { display: block; }
|
||||
.article-card__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 31rpx; font-weight: 700; }
|
||||
.article-card__summary { margin-top: 9rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.45; }
|
||||
.article-card__meta { margin-top: 10rpx; color: $brand-red; font-size: 21rpx; }
|
||||
.article-list-state-card { @include adaptive.adaptive-family-content; width: 100%; min-height: 340rpx; margin-top: 30rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.article-list-state-card > text { display: block; }
|
||||
.article-list-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.article-list-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.article-list-state-card .app-button { margin-top: 28rpx; }
|
||||
.article-list-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.article-list-header,
|
||||
.article-list-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.article-list-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.article-list-items {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.article-card {
|
||||
@include adaptive.adaptive-family-content;
|
||||
display: flex;
|
||||
min-height: 150rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
.article-card text {
|
||||
display: block;
|
||||
}
|
||||
.article-card__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-card__summary {
|
||||
margin-top: 9rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.article-card__meta {
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.article-list-state-card {
|
||||
@include adaptive.adaptive-family-content;
|
||||
width: 100%;
|
||||
min-height: 340rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.article-list-state-card > text {
|
||||
display: block;
|
||||
}
|
||||
.article-list-state-card > text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-list-state-card > text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.article-list-state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,17 +2,31 @@
|
||||
<template>
|
||||
<view class="article-detail-page" :class="`article-state--${articleState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="article-detail-header"><PageHeader title="谱文详情" custom-back @back="backToArticles" /></view>
|
||||
<view class="article-detail-header"
|
||||
><PageHeader title="谱文详情" custom-back @back="backToArticles"
|
||||
/></view>
|
||||
|
||||
<view class="article-detail-content">
|
||||
<AppLoading v-if="articleState === 'loading'" text="正在读取谱文" description="请稍候，正在同步谱文正文。" />
|
||||
<AppLoading
|
||||
v-if="articleState === 'loading'"
|
||||
text="正在读取谱文"
|
||||
description="请稍候，正在同步谱文正文。"
|
||||
/>
|
||||
<view v-else-if="articleState === 'ready'" class="article-card">
|
||||
<text v-if="article.category" class="article-card__category">{{ article.category }}</text>
|
||||
<text v-if="article.category" class="article-card__category">{{
|
||||
article.category
|
||||
}}</text>
|
||||
<text class="article-card__title">{{ article.title }}</text>
|
||||
<text class="article-card__meta">{{ article.author }} · {{ article.time || '未标注时间' }}</text>
|
||||
<text v-if="article.summary" class="article-card__summary">{{ article.summary }}</text>
|
||||
<text class="article-card__meta"
|
||||
>{{ article.author }} · {{ article.time || "未标注时间" }}</text
|
||||
>
|
||||
<text v-if="article.summary" class="article-card__summary">{{
|
||||
article.summary
|
||||
}}</text>
|
||||
<view class="article-card__divider" />
|
||||
<text class="article-card__content">{{ article.content || '作者暂未填写正文。' }}</text>
|
||||
<text class="article-card__content">{{
|
||||
article.content || "作者暂未填写正文。"
|
||||
}}</text>
|
||||
<text class="article-card__views">阅读 {{ article.viewCount }} 次</text>
|
||||
</view>
|
||||
<view v-else class="article-state-card">
|
||||
@@ -31,7 +45,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -41,8 +59,9 @@ const article = ref(null);
|
||||
const controller = createRequestController();
|
||||
let pageActive = true;
|
||||
|
||||
const hasValidContext = computed(() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(articleId.value),
|
||||
const hasValidContext = computed(
|
||||
() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(articleId.value),
|
||||
);
|
||||
const stateCopy = computed(() => {
|
||||
if (!hasValidContext.value) {
|
||||
@@ -73,13 +92,20 @@ const loadArticle = async () => {
|
||||
}
|
||||
articleState.value = "loading";
|
||||
try {
|
||||
const current = await appApi.getArticleDetail(genealogyId.value, articleId.value, { requestController: controller });
|
||||
const current = await appApi.getArticleDetail(
|
||||
genealogyId.value,
|
||||
articleId.value,
|
||||
{ requestController: controller },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
article.value = current;
|
||||
articleState.value = "ready";
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return;
|
||||
articleState.value = error?.code === "HTTP_ERROR" && error?.httpStatus === 404 ? "missing" : "error";
|
||||
articleState.value =
|
||||
error?.code === "HTTP_ERROR" && error?.httpStatus === 404
|
||||
? "missing"
|
||||
: "error";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -96,31 +122,111 @@ onUnload(() => {
|
||||
controller.abort();
|
||||
});
|
||||
|
||||
const backToArticles = () => hasValidContext.value
|
||||
? returnTo("F04", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const handleStateAction = () => articleState.value === "error" ? loadArticle() : backToArticles();
|
||||
const backToArticles = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("F04", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const handleStateAction = () =>
|
||||
articleState.value === "error" ? loadArticle() : backToArticles();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.article-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.article-detail-header, .article-detail-content { z-index: 1; }
|
||||
.article-detail-content { flex: 1; padding: 18rpx 24rpx 72rpx; }
|
||||
.article-card, .article-state-card { @include adaptive.adaptive-family-content; box-sizing: border-box; }
|
||||
.article-card { margin-top: 18rpx; padding: 34rpx 30rpx; }
|
||||
.article-card__category, .article-card__title, .article-card__meta, .article-card__summary, .article-card__content, .article-card__views { display: block; }
|
||||
.article-card__category { color: $brand-red; font-size: 23rpx; font-weight: 700; }
|
||||
.article-card__title { margin-top: 14rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 40rpx; font-weight: 700; line-height: 1.32; }
|
||||
.article-card__meta { margin-top: 16rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.article-card__summary { margin-top: 22rpx; color: $ink-muted; font-size: 25rpx; line-height: 1.6; }
|
||||
.article-card__divider { height: 1rpx; margin: 26rpx 0; background: rgba(128, 89, 49, .22); }
|
||||
.article-card__content { color: $ink; font-size: 28rpx; line-height: 1.85; white-space: pre-wrap; }
|
||||
.article-card__views { margin-top: 30rpx; color: $ink-muted; font-size: 21rpx; text-align: right; }
|
||||
.article-state-card { min-height: 350rpx; margin-top: 36rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.article-state-card > text { display: block; }
|
||||
.article-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.article-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.article-state-card .app-button { margin-top: 28rpx; }
|
||||
.article-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.article-detail-header,
|
||||
.article-detail-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.article-detail-content {
|
||||
flex: 1;
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.article-card,
|
||||
.article-state-card {
|
||||
@include adaptive.adaptive-family-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.article-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 34rpx 30rpx;
|
||||
}
|
||||
.article-card__category,
|
||||
.article-card__title,
|
||||
.article-card__meta,
|
||||
.article-card__summary,
|
||||
.article-card__content,
|
||||
.article-card__views {
|
||||
display: block;
|
||||
}
|
||||
.article-card__category {
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-card__title {
|
||||
margin-top: 14rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.32;
|
||||
}
|
||||
.article-card__meta {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.article-card__summary {
|
||||
margin-top: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.article-card__divider {
|
||||
height: 1rpx;
|
||||
margin: 26rpx 0;
|
||||
background: rgba(128, 89, 49, 0.22);
|
||||
}
|
||||
.article-card__content {
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.85;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.article-card__views {
|
||||
margin-top: 30rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.article-state-card {
|
||||
min-height: 350rpx;
|
||||
margin-top: 36rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.article-state-card > text {
|
||||
display: block;
|
||||
}
|
||||
.article-state-card > text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-state-card > text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.article-state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,119 @@
|
||||
<!-- 页面编号：F-06；用途：按 Apifox 的完整 AppArticleBody 创建谱文。 -->
|
||||
<template>
|
||||
<view class="article-editor-page" :class="`article-editor-state--${editorState}`">
|
||||
<view
|
||||
class="article-editor-page"
|
||||
:class="`article-editor-state--${editorState}`"
|
||||
>
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="article-editor-page__header"><PageHeader title="新建谱文" custom-back @back="requestBack" /></view>
|
||||
<view class="article-editor-page__header"
|
||||
><PageHeader title="新建谱文" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="article-editor-content">
|
||||
<view v-if="editorState === 'form'" class="editor-panel">
|
||||
<view class="editor-panel__body">
|
||||
<text class="editor-eyebrow">服务端创建</text>
|
||||
<text class="editor-title">把值得传承的故事写下来</text>
|
||||
<text class="editor-intro">除标题和正文外，其余字段均可按需填写；留空时不提交该字段。</text>
|
||||
<text class="editor-intro"
|
||||
>除标题和正文外，其余字段均可按需填写；留空时不提交该字段。</text
|
||||
>
|
||||
|
||||
<view class="editor-field">
|
||||
<text class="editor-field__label">文章分类</text>
|
||||
<view class="editor-control editor-control--unavailable"><text>服务端暂未提供可选择的分类项</text></view>
|
||||
<view class="editor-control editor-control--unavailable"
|
||||
><text>服务端暂未提供可选择的分类项</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="editor-field">
|
||||
<text class="editor-field__label"><text class="required-mark">*</text>文章标题</text>
|
||||
<view class="editor-control"><input v-model="form.articleTitle" placeholder="请输入文章标题" placeholder-class="editor-placeholder" @input="submitError = ''" /></view>
|
||||
<text class="editor-field__label"
|
||||
><text class="required-mark">*</text>文章标题</text
|
||||
>
|
||||
<view class="editor-control"
|
||||
><input
|
||||
v-model="form.articleTitle"
|
||||
placeholder="请输入文章标题"
|
||||
placeholder-class="editor-placeholder"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
</view>
|
||||
<view class="editor-field">
|
||||
<text class="editor-field__label">文章摘要</text>
|
||||
<view class="editor-control editor-control--textarea"><textarea v-model="form.articleSummary" auto-height placeholder="概括文章内容" placeholder-class="editor-placeholder" @input="submitError = ''" /></view>
|
||||
<view class="editor-control editor-control--textarea">
|
||||
<textarea
|
||||
v-model="form.articleSummary"
|
||||
auto-height
|
||||
placeholder="概括文章内容"
|
||||
placeholder-class="editor-placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="editor-field editor-field--cover">
|
||||
<view>
|
||||
<text class="editor-field__label">封面图片</text>
|
||||
<text class="editor-field__hint">选择图片后会取得真实上传回执，并作为封面关联。</text>
|
||||
<text class="editor-field__hint"
|
||||
>选择图片后会取得真实上传回执，并作为封面关联。</text
|
||||
>
|
||||
</view>
|
||||
<button class="upload-button" :disabled="uploading || isSubmitting" @click="uploadCover">{{ uploading ? '上传中…' : '选择图片' }}</button>
|
||||
<text v-if="coverFileName" class="upload-receipt">已上传：{{ coverFileName }}</text>
|
||||
<text v-if="uploadError" class="editor-save-error">{{ uploadError }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="uploading || isSubmitting"
|
||||
@click="uploadCover"
|
||||
>
|
||||
{{ uploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="coverFileName" class="upload-receipt"
|
||||
>已上传：{{ coverFileName }}</text
|
||||
>
|
||||
<text v-if="uploadError" class="editor-save-error">{{
|
||||
uploadError
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="editor-field">
|
||||
<text class="editor-field__label"><text class="required-mark">*</text>正文内容</text>
|
||||
<view class="editor-control editor-control--textarea editor-control--article"><textarea v-model="form.articleContent" auto-height placeholder="记录家训、往事或想留给后人的话" placeholder-class="editor-placeholder" @input="submitError = ''" /></view>
|
||||
<text class="editor-field__label"
|
||||
><text class="required-mark">*</text>正文内容</text
|
||||
>
|
||||
<view
|
||||
class="editor-control editor-control--textarea editor-control--article"
|
||||
>
|
||||
<textarea
|
||||
v-model="form.articleContent"
|
||||
auto-height
|
||||
placeholder="记录家训、往事或想留给后人的话"
|
||||
placeholder-class="editor-placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="editor-field">
|
||||
<text class="editor-field__label">作者名称</text>
|
||||
<view class="editor-control"><input v-model="form.authorName" placeholder="请输入作者名称" placeholder-class="editor-placeholder" @input="submitError = ''" /></view>
|
||||
<view class="editor-control"
|
||||
><input
|
||||
v-model="form.authorName"
|
||||
placeholder="请输入作者名称"
|
||||
placeholder-class="editor-placeholder"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
</view>
|
||||
<view class="editor-field">
|
||||
<text class="editor-field__label">排序值</text>
|
||||
<view class="editor-control"><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" placeholder-class="editor-placeholder" @input="submitError = ''" /></view>
|
||||
<view class="editor-control"
|
||||
><input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
placeholder-class="editor-placeholder"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
</view>
|
||||
<text v-if="submitError" class="editor-save-error">{{ submitError }}</text>
|
||||
<AppButton block :label="isSubmitting ? '正在提交' : '提交谱文'" :disabled="isSubmitting || uploading" @click="submit" />
|
||||
<text v-if="submitError" class="editor-save-error">{{
|
||||
submitError
|
||||
}}</text>
|
||||
<AppButton
|
||||
block
|
||||
:label="isSubmitting ? '正在提交' : '提交谱文'"
|
||||
:disabled="isSubmitting || uploading"
|
||||
@click="submit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="editor-result-card">
|
||||
@@ -52,7 +121,11 @@
|
||||
<text class="editor-eyebrow">{{ resultCopy.eyebrow }}</text>
|
||||
<text class="editor-result-card__title">{{ resultCopy.title }}</text>
|
||||
<text class="editor-result-card__copy">{{ resultCopy.copy }}</text>
|
||||
<AppButton block :label="resultCopy.action" @click="handleResultAction" />
|
||||
<AppButton
|
||||
block
|
||||
:label="resultCopy.action"
|
||||
@click="handleResultAction"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -77,10 +150,22 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const editorState = ref("form");
|
||||
const genealogyId = ref("");
|
||||
@@ -99,23 +184,26 @@ const form = reactive({
|
||||
sortOrder: "",
|
||||
});
|
||||
const requestController = createRequestController();
|
||||
const isDirty = computed(() => Boolean(
|
||||
Object.values(form).some((value) => value.trim()) || coverOssId.value,
|
||||
));
|
||||
const isDirty = computed(() =>
|
||||
Boolean(
|
||||
Object.values(form).some((value) => value.trim()) || coverOssId.value,
|
||||
),
|
||||
);
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const resultCopy = computed(() => editorState.value === "success"
|
||||
? {
|
||||
eyebrow: "服务端已接受",
|
||||
title: "谱文已提交",
|
||||
copy: "服务端已返回成功信封。返回谱文列表后将重新读取服务端数据。",
|
||||
action: "返回谱文列表",
|
||||
}
|
||||
: {
|
||||
eyebrow: "谱文入口无效",
|
||||
title: "无法创建谱文",
|
||||
copy: "没有取得有效家谱标识，页面不会创建无归属谱文。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
const resultCopy = computed(() =>
|
||||
editorState.value === "success"
|
||||
? {
|
||||
eyebrow: "服务端已接受",
|
||||
title: "谱文已提交",
|
||||
copy: "服务端已返回成功信封。返回谱文列表后将重新读取服务端数据。",
|
||||
action: "返回谱文列表",
|
||||
}
|
||||
: {
|
||||
eyebrow: "谱文入口无效",
|
||||
title: "无法创建谱文",
|
||||
copy: "没有取得有效家谱标识，页面不会创建无归属谱文。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
@@ -126,7 +214,8 @@ const cancelDiscard = discardConfirmation.cancel;
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (!hasValidContext.value || query?.mode !== "create") editorState.value = "invalid";
|
||||
if (!hasValidContext.value || query?.mode !== "create")
|
||||
editorState.value = "invalid";
|
||||
});
|
||||
|
||||
const uploadCover = async () => {
|
||||
@@ -149,34 +238,43 @@ const uploadCover = async () => {
|
||||
const submit = async () => {
|
||||
if (isSubmitting.value || uploading.value || !hasValidContext.value) return;
|
||||
if (!form.articleTitle.trim() || !form.articleContent.trim()) {
|
||||
submitError.value = !form.articleTitle.trim() ? "请填写文章标题" : "请填写正文内容";
|
||||
submitError.value = !form.articleTitle.trim()
|
||||
? "请填写文章标题"
|
||||
: "请填写正文内容";
|
||||
return;
|
||||
}
|
||||
isSubmitting.value = true;
|
||||
submitError.value = "";
|
||||
try {
|
||||
await appApi.createArticle(genealogyId.value, {
|
||||
...form,
|
||||
coverOssId: coverOssId.value,
|
||||
}, { requestController });
|
||||
await appApi.createArticle(
|
||||
genealogyId.value,
|
||||
{
|
||||
...form,
|
||||
coverOssId: coverOssId.value,
|
||||
},
|
||||
{ requestController },
|
||||
);
|
||||
editorState.value = "success";
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) submitError.value = error?.message || "谱文提交失败，请稍后重试。";
|
||||
if (!isRequestCancelled(error))
|
||||
submitError.value = error?.message || "谱文提交失败，请稍后重试。";
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: isSubmitting.value || uploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": requestDiscardConfirmation,
|
||||
});
|
||||
const handleResultAction = () => editorState.value === "success"
|
||||
? returnTo("F04", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: isSubmitting.value || uploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": requestDiscardConfirmation,
|
||||
});
|
||||
const handleResultAction = () =>
|
||||
editorState.value === "success"
|
||||
? returnTo("F04", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => {
|
||||
requestController.abort();
|
||||
@@ -186,36 +284,175 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.article-editor-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.article-editor-page__header, .article-editor-content { z-index: 1; }
|
||||
.article-editor-content { padding: 18rpx 20rpx calc(38rpx + env(safe-area-inset-bottom)); }
|
||||
.editor-panel, .editor-result-card { @include adaptive.adaptive-family-panel; width: 100%; }
|
||||
.editor-panel__body { padding: 38rpx 34rpx 42rpx; }
|
||||
.editor-eyebrow { display: block; color: $brand-red; font-size: 23rpx; letter-spacing: 3rpx; text-align: center; }
|
||||
.editor-title { display: block; margin-top: 10rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 34rpx; font-weight: 700; text-align: center; }
|
||||
.editor-intro { display: block; margin: 10rpx 8rpx 22rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.55; text-align: center; }
|
||||
.editor-field { margin-top: 18rpx; }
|
||||
.editor-field__label { display: block; margin: 0 8rpx 8rpx; color: $ink; font-size: 25rpx; font-weight: 700; }
|
||||
.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; line-height: 1; transform: translateY(-3rpx); }
|
||||
.editor-control { @include adaptive.adaptive-family-field; display: flex; min-height: 82rpx; align-items: center; }
|
||||
.editor-control input, .editor-control textarea { box-sizing: border-box; width: 100%; color: $ink; font-size: 24rpx; }
|
||||
.editor-control input { min-height: 82rpx; padding: 0 28rpx; }
|
||||
.editor-control--textarea { min-height: 132rpx; padding: 20rpx 24rpx; }
|
||||
.editor-control--article { min-height: 220rpx; }
|
||||
.editor-control--unavailable { padding: 0 28rpx; color: $ink-muted; font-size: 23rpx; }
|
||||
.editor-control textarea { min-height: 92rpx; line-height: 1.65; }
|
||||
.editor-control--article textarea { min-height: 180rpx; }
|
||||
.editor-field--cover { display: grid; gap: 12rpx; padding: 18rpx 22rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.editor-field--cover .editor-field__label { margin: 0; }
|
||||
.editor-field__hint { display: block; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }
|
||||
.upload-button { justify-self: start; min-height: 88rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.upload-receipt { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
|
||||
.editor-placeholder { color: #9e8e79; }
|
||||
.editor-save-error { display: block; margin: 12rpx 8rpx 0; color: $brand-red; font-size: 24rpx; line-height: 34rpx; text-align: center; }
|
||||
.editor-panel__body > .app-button { margin-top: 22rpx; }
|
||||
.editor-result-card { min-height: 420rpx; }
|
||||
.editor-result-card__body { padding: 112rpx 52rpx 68rpx; text-align: center; }
|
||||
.editor-result-card__title { display: block; margin-top: 14rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||||
.editor-result-card__copy { display: block; margin-top: 16rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.editor-result-card__body > .app-button { margin-top: 30rpx; }
|
||||
.article-editor-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.article-editor-page__header,
|
||||
.article-editor-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.article-editor-content {
|
||||
padding: 18rpx 20rpx calc(38rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
.editor-panel,
|
||||
.editor-result-card {
|
||||
@include adaptive.adaptive-family-panel;
|
||||
width: 100%;
|
||||
}
|
||||
.editor-panel__body {
|
||||
padding: 38rpx 34rpx 42rpx;
|
||||
}
|
||||
.editor-eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 23rpx;
|
||||
letter-spacing: 3rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.editor-title {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
.editor-intro {
|
||||
display: block;
|
||||
margin: 10rpx 8rpx 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
}
|
||||
.editor-field {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.editor-field__label {
|
||||
display: block;
|
||||
margin: 0 8rpx 8rpx;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.editor-control {
|
||||
@include adaptive.adaptive-family-field;
|
||||
display: flex;
|
||||
min-height: 82rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.editor-control input,
|
||||
.editor-control textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.editor-control input {
|
||||
min-height: 82rpx;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
.editor-control--textarea {
|
||||
min-height: 132rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
.editor-control--article {
|
||||
min-height: 220rpx;
|
||||
}
|
||||
.editor-control--unavailable {
|
||||
padding: 0 28rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.editor-control textarea {
|
||||
min-height: 92rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.editor-control--article textarea {
|
||||
min-height: 180rpx;
|
||||
}
|
||||
.editor-field--cover {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.editor-field--cover .editor-field__label {
|
||||
margin: 0;
|
||||
}
|
||||
.editor-field__hint {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 88rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.editor-placeholder {
|
||||
color: #9e8e79;
|
||||
}
|
||||
.editor-save-error {
|
||||
display: block;
|
||||
margin: 12rpx 8rpx 0;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.editor-panel__body > .app-button {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.editor-result-card {
|
||||
min-height: 420rpx;
|
||||
}
|
||||
.editor-result-card__body {
|
||||
padding: 112rpx 52rpx 68rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.editor-result-card__title {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.editor-result-card__copy {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.editor-result-card__body > .app-button {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
+312
-34
@@ -2,22 +2,98 @@
|
||||
<template>
|
||||
<view class="album-list-page">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="album-list-header"><PageHeader title="家族相册" :action="hasValidContext ? '新建' : ''" custom-back @back="requestBack" @action="openCreateDialog" /></view>
|
||||
<view class="album-list-header"
|
||||
><PageHeader
|
||||
title="家族相册"
|
||||
:action="hasValidContext ? '新建' : ''"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
@action="openCreateDialog"
|
||||
/></view>
|
||||
<view class="album-list-content">
|
||||
<view v-if="!hasValidContext" class="album-state-card"><text>相册入口无效</text><text>没有取得有效家谱标识。</text><AppButton block label="返回上一页" @click="goBack" /></view>
|
||||
<view v-else-if="listState === 'loading'" class="album-state-card"><AppLoading text="正在读取家族相册" /></view>
|
||||
<view v-else-if="listState === 'error'" class="album-state-card"><text>暂时无法读取家族相册</text><text>{{ listError }}</text><AppButton block type="secondary" label="重新加载" @click="loadAlbums" /></view>
|
||||
<view v-else-if="listState === 'empty'" class="album-state-card"><text>还没有相册</text><text>新建第一本相册，整理家族影像。</text><AppButton block label="新建相册" @click="openCreateDialog" /></view>
|
||||
<view v-if="!hasValidContext" class="album-state-card"
|
||||
><text>相册入口无效</text><text>没有取得有效家谱标识。</text
|
||||
><AppButton block label="返回上一页" @click="goBack"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'loading'" class="album-state-card"
|
||||
><AppLoading text="正在读取家族相册"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'error'" class="album-state-card"
|
||||
><text>暂时无法读取家族相册</text><text>{{ listError }}</text
|
||||
><AppButton block type="secondary" label="重新加载" @click="loadAlbums"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'empty'" class="album-state-card"
|
||||
><text>还没有相册</text><text>新建第一本相册，整理家族影像。</text
|
||||
><AppButton block label="新建相册" @click="openCreateDialog"
|
||||
/></view>
|
||||
<view v-else class="album-list">
|
||||
<view v-for="item in albums" :key="item.id" class="album-card" @click="openAlbum(item)"><text>{{ item.name }}</text><text v-if="item.description">{{ item.description }}</text><text>{{ item.photoCount }} 张照片</text></view>
|
||||
<view
|
||||
v-for="item in albums"
|
||||
:key="item.id"
|
||||
class="album-card"
|
||||
@click="openAlbum(item)"
|
||||
><text>{{ item.name }}</text
|
||||
><text v-if="item.description">{{ item.description }}</text
|
||||
><text>{{ item.photoCount }} 张照片</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog :visible="dialogVisible" eyebrow="新建相册" title="为家人整理一段影像" :confirm-text="isSubmitting ? '正在提交' : '提交相册'" cancel-text="取消" show-cancel :close-on-mask="false" @confirm="submitAlbum" @cancel="closeCreateDialog">
|
||||
<view class="album-dialog-field"><text><text class="required-mark">*</text>相册名称</text><input v-model="form.albumName" placeholder="例如：春节团圆" @input="submitError = ''" /></view>
|
||||
<view class="album-dialog-field"><text>相册说明</text><textarea v-model="form.albumDesc" auto-height placeholder="介绍这组影像" @input="submitError = ''" /></view>
|
||||
<view class="album-dialog-field album-dialog-field--cover"><view><text>封面图片</text><text class="album-field-hint">选择图片后会取得真实上传回执，并作为封面关联。</text></view><button class="upload-button" :disabled="uploading || isSubmitting" @click="uploadCover">{{ uploading ? '上传中…' : '选择图片' }}</button><text v-if="coverFileName" class="upload-receipt">已上传：{{ coverFileName }}</text><text v-if="uploadError" class="album-field-error">{{ uploadError }}</text></view>
|
||||
<view class="album-dialog-field"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="submitError = ''" /></view>
|
||||
<text v-if="submitError" class="album-field-error">{{ submitError }}</text>
|
||||
<AppDialog
|
||||
:visible="dialogVisible"
|
||||
eyebrow="新建相册"
|
||||
title="为家人整理一段影像"
|
||||
:confirm-text="isSubmitting ? '正在提交' : '提交相册'"
|
||||
cancel-text="取消"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="submitAlbum"
|
||||
@cancel="closeCreateDialog"
|
||||
>
|
||||
<view class="album-dialog-field"
|
||||
><text><text class="required-mark">*</text>相册名称</text
|
||||
><input
|
||||
v-model="form.albumName"
|
||||
placeholder="例如：春节团圆"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<view class="album-dialog-field"
|
||||
><text>相册说明</text
|
||||
><textarea
|
||||
v-model="form.albumDesc"
|
||||
auto-height
|
||||
placeholder="介绍这组影像"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="album-dialog-field album-dialog-field--cover"
|
||||
><view
|
||||
><text>封面图片</text
|
||||
><text class="album-field-hint"
|
||||
>选择图片后会取得真实上传回执，并作为封面关联。</text
|
||||
></view
|
||||
><button
|
||||
class="upload-button"
|
||||
:disabled="uploading || isSubmitting"
|
||||
@click="uploadCover"
|
||||
>
|
||||
{{ uploading ? "上传中…" : "选择图片" }}</button
|
||||
><text v-if="coverFileName" class="upload-receipt"
|
||||
>已上传：{{ coverFileName }}</text
|
||||
><text v-if="uploadError" class="album-field-error">{{
|
||||
uploadError
|
||||
}}</text></view
|
||||
>
|
||||
<view class="album-dialog-field"
|
||||
><text>排序值</text
|
||||
><input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<text v-if="submitError" class="album-field-error">{{
|
||||
submitError
|
||||
}}</text>
|
||||
</AppDialog>
|
||||
</view>
|
||||
</template>
|
||||
@@ -30,9 +106,21 @@ import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, handleBackPress, openPage, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
openPage,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const albums = ref([]);
|
||||
@@ -49,11 +137,19 @@ const isSubmitting = ref(false);
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const text = (value) => typeof value === "string" || typeof value === "number" ? String(value).trim() : "";
|
||||
const text = (value) =>
|
||||
typeof value === "string" || typeof value === "number"
|
||||
? String(value).trim()
|
||||
: "";
|
||||
const toAlbum = (item) => {
|
||||
const id = text(item?.albumId);
|
||||
if (!/^[1-9]\d*$/.test(id)) return null;
|
||||
return { id, name: text(item.albumName) || "未命名相册", description: text(item.albumDesc), photoCount: Number.isSafeInteger(item.photoCount) ? item.photoCount : 0 };
|
||||
return {
|
||||
id,
|
||||
name: text(item.albumName) || "未命名相册",
|
||||
description: text(item.albumDesc),
|
||||
photoCount: Number.isSafeInteger(item.photoCount) ? item.photoCount : 0,
|
||||
};
|
||||
};
|
||||
const loadAlbums = async () => {
|
||||
if (!hasValidContext.value) return;
|
||||
@@ -61,7 +157,9 @@ const loadAlbums = async () => {
|
||||
listState.value = "loading";
|
||||
listError.value = "";
|
||||
try {
|
||||
const rows = await appApi.getAlbums(genealogyId.value, { requestController: controller });
|
||||
const rows = await appApi.getAlbums(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
albums.value = rows.map(toAlbum).filter(Boolean);
|
||||
listState.value = albums.value.length ? "list" : "empty";
|
||||
@@ -71,35 +169,215 @@ const loadAlbums = async () => {
|
||||
listError.value = error?.message || "请稍后重试。";
|
||||
}
|
||||
};
|
||||
const resetDraft = () => { Object.assign(form, { albumName: "", albumDesc: "", sortOrder: "" }); coverOssId.value = null; coverFileName.value = ""; submitError.value = ""; uploadError.value = ""; };
|
||||
const openCreateDialog = () => { if (!hasValidContext.value || isSubmitting.value || uploading.value) return; resetDraft(); dialogVisible.value = true; };
|
||||
const closeCreateDialog = () => { if (!isSubmitting.value && !uploading.value) dialogVisible.value = false; };
|
||||
const resetDraft = () => {
|
||||
Object.assign(form, { albumName: "", albumDesc: "", sortOrder: "" });
|
||||
coverOssId.value = null;
|
||||
coverFileName.value = "";
|
||||
submitError.value = "";
|
||||
uploadError.value = "";
|
||||
};
|
||||
const openCreateDialog = () => {
|
||||
if (!hasValidContext.value || isSubmitting.value || uploading.value) return;
|
||||
resetDraft();
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const closeCreateDialog = () => {
|
||||
if (!isSubmitting.value && !uploading.value) dialogVisible.value = false;
|
||||
};
|
||||
const uploadCover = async () => {
|
||||
if (uploading.value || isSubmitting.value) return;
|
||||
uploading.value = true;
|
||||
uploadError.value = "";
|
||||
try { const receipt = await pickAndUploadImage({ requestController: controller }); coverOssId.value = receipt.ossId; coverFileName.value = receipt.fileName || "封面图片"; }
|
||||
catch (error) { if (!isImagePickCancelled(error) && !isRequestCancelled(error)) uploadError.value = error?.message || "封面图片上传失败，请稍后重试。"; }
|
||||
finally { uploading.value = false; }
|
||||
try {
|
||||
const receipt = await pickAndUploadImage({ requestController: controller });
|
||||
coverOssId.value = receipt.ossId;
|
||||
coverFileName.value = receipt.fileName || "封面图片";
|
||||
} catch (error) {
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error))
|
||||
uploadError.value = error?.message || "封面图片上传失败，请稍后重试。";
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
const submitAlbum = async () => {
|
||||
if (isSubmitting.value || uploading.value) return;
|
||||
if (!form.albumName.trim()) { submitError.value = "请填写相册名称"; return; }
|
||||
if (!form.albumName.trim()) {
|
||||
submitError.value = "请填写相册名称";
|
||||
return;
|
||||
}
|
||||
isSubmitting.value = true;
|
||||
submitError.value = "";
|
||||
try { await appApi.createAlbum(genealogyId.value, { ...form, coverOssId: coverOssId.value }, { requestController: controller }); dialogVisible.value = false; await loadAlbums(); }
|
||||
catch (error) { if (!isRequestCancelled(error)) submitError.value = error?.message || "相册提交失败，请稍后重试。"; }
|
||||
finally { isSubmitting.value = false; }
|
||||
try {
|
||||
await appApi.createAlbum(
|
||||
genealogyId.value,
|
||||
{ ...form, coverOssId: coverOssId.value },
|
||||
{ requestController: controller },
|
||||
);
|
||||
dialogVisible.value = false;
|
||||
await loadAlbums();
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error))
|
||||
submitError.value = error?.message || "相册提交失败，请稍后重试。";
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const openAlbum = (item) => openPage("F08", { genealogyId: genealogyId.value, albumId: item.id }, "F07");
|
||||
const requestBack = () => runBackGuard({ transientOpen: dialogVisible.value, submitting: isSubmitting.value || uploading.value, "close-transient": closeCreateDialog, "block-submitting": () => true });
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (hasValidContext.value) loadAlbums(); else listState.value = "invalid"; });
|
||||
onShow(() => { if (hasValidContext.value && !dialogVisible.value && listState.value !== "loading") loadAlbums(); });
|
||||
const openAlbum = (item) =>
|
||||
openPage("F08", { genealogyId: genealogyId.value, albumId: item.id }, "F07");
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: dialogVisible.value,
|
||||
submitting: isSubmitting.value || uploading.value,
|
||||
"close-transient": closeCreateDialog,
|
||||
"block-submitting": () => true,
|
||||
});
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (hasValidContext.value) loadAlbums();
|
||||
else listState.value = "invalid";
|
||||
});
|
||||
onShow(() => {
|
||||
if (
|
||||
hasValidContext.value &&
|
||||
!dialogVisible.value &&
|
||||
listState.value !== "loading"
|
||||
)
|
||||
loadAlbums();
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { active = false; controller.abort(); });
|
||||
onUnmounted(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.album-list-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.album-list-header, .album-list-content { z-index: 1; }.album-list-content { padding: 18rpx 24rpx 72rpx; }.album-state-card, .album-card { @include adaptive.adaptive-family-content; }.album-state-card { min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }.album-state-card text, .album-card text { display: block; }.album-state-card text:first-child, .album-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }.album-state-card text:nth-child(2), .album-card text:not(:first-child) { margin-top: 12rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.55; }.album-state-card .app-button { margin-top: 28rpx; }.album-list { display: flex; flex-direction: column; gap: 16rpx; }.album-card { padding: 28rpx 30rpx; }.album-dialog-field { width: 100%; margin: 20rpx 0; text-align: left; }.album-dialog-field > text:first-child, .album-dialog-field--cover > view > text:first-child { display: block; color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; }.album-dialog-field input, .album-dialog-field textarea { @include adaptive.adaptive-family-field; box-sizing: border-box; display: block; width: 100%; margin-top: 10rpx; padding: 16rpx 22rpx; color: $ink; font-size: 24rpx; }.album-dialog-field input { min-height: 76rpx; padding-top: 0; padding-bottom: 0; }.album-dialog-field textarea { min-height: 112rpx; line-height: 1.55; }.album-dialog-field--cover { display: grid; gap: 12rpx; padding: 18rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }.album-field-hint { display: block; margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }.upload-button { justify-self: start; min-height: 88rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-receipt { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }.album-field-error { display: block; margin-top: 8rpx; color: $brand-red; font-size: 21rpx; line-height: 1.45; }
|
||||
.album-list-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.album-list-header,
|
||||
.album-list-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.album-list-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.album-state-card,
|
||||
.album-card {
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.album-state-card {
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.album-state-card text,
|
||||
.album-card text {
|
||||
display: block;
|
||||
}
|
||||
.album-state-card text:first-child,
|
||||
.album-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.album-state-card text:nth-child(2),
|
||||
.album-card text:not(:first-child) {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.album-state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.album-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.album-card {
|
||||
padding: 28rpx 30rpx;
|
||||
}
|
||||
.album-dialog-field {
|
||||
width: 100%;
|
||||
margin: 20rpx 0;
|
||||
text-align: left;
|
||||
}
|
||||
.album-dialog-field > text:first-child,
|
||||
.album-dialog-field--cover > view > text:first-child {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.album-dialog-field input,
|
||||
.album-dialog-field textarea {
|
||||
@include adaptive.adaptive-family-field;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
padding: 16rpx 22rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.album-dialog-field input {
|
||||
min-height: 76rpx;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.album-dialog-field textarea {
|
||||
min-height: 112rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.album-dialog-field--cover {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
padding: 18rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.album-field-hint {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 88rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.album-field-error {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
color: $brand-red;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,14 +2,36 @@
|
||||
<template>
|
||||
<view class="album-detail-page">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="album-detail-header"><PageHeader title="相册详情" :action="valid ? '添加' : ''" custom-back @back="returnToAlbums" @action="addPhoto" /></view>
|
||||
<view class="album-detail-header"
|
||||
><PageHeader
|
||||
title="相册详情"
|
||||
:action="valid ? '添加' : ''"
|
||||
custom-back
|
||||
@back="returnToAlbums"
|
||||
@action="addPhoto"
|
||||
/></view>
|
||||
<view class="album-detail-content">
|
||||
<view v-if="!valid" class="album-state-card"><text>相册入口无效</text><AppButton block label="返回相册列表" @click="returnToAlbums" /></view>
|
||||
<view v-else-if="state === 'loading'" class="album-state-card"><AppLoading text="正在读取相册照片" /></view>
|
||||
<view v-else-if="state === 'error'" class="album-state-card"><text>暂时无法读取相册照片</text><AppButton block type="secondary" label="重新加载" @click="loadPhotos" /></view>
|
||||
<view v-else-if="state === 'empty'" class="album-state-card"><text>还没有照片</text><text>添加照片后会直接读取服务端相册记录。</text><AppButton block label="添加照片" @click="addPhoto" /></view>
|
||||
<view v-if="!valid" class="album-state-card"
|
||||
><text>相册入口无效</text
|
||||
><AppButton block label="返回相册列表" @click="returnToAlbums"
|
||||
/></view>
|
||||
<view v-else-if="state === 'loading'" class="album-state-card"
|
||||
><AppLoading text="正在读取相册照片"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="album-state-card"
|
||||
><text>暂时无法读取相册照片</text
|
||||
><AppButton block type="secondary" label="重新加载" @click="loadPhotos"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="album-state-card"
|
||||
><text>还没有照片</text><text>添加照片后会直接读取服务端相册记录。</text
|
||||
><AppButton block label="添加照片" @click="addPhoto"
|
||||
/></view>
|
||||
<view v-else class="photo-list">
|
||||
<view v-for="item in photos" :key="item.id" class="photo-card"><text>{{ item.title }}</text><text v-if="item.description">{{ item.description }}</text><text v-if="item.meta">{{ item.meta }}</text></view>
|
||||
<view v-for="item in photos" :key="item.id" class="photo-card"
|
||||
><text>{{ item.title }}</text
|
||||
><text v-if="item.description">{{ item.description }}</text
|
||||
><text v-if="item.meta">{{ item.meta }}</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -22,7 +44,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, openPage, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -31,36 +57,124 @@ const photos = ref([]);
|
||||
const state = ref("loading");
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(albumId.value));
|
||||
const valid = computed(
|
||||
() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(albumId.value),
|
||||
);
|
||||
const loadPhotos = async () => {
|
||||
if (!valid.value) return;
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getAlbumPhotos(genealogyId.value, albumId.value, { requestController: controller });
|
||||
const rows = await appApi.getAlbumPhotos(genealogyId.value, albumId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
photos.value = rows.map((item) => ({
|
||||
id: String(item.photoId || ""),
|
||||
title: String(item.photoTitle || "未命名照片"),
|
||||
description: String(item.photoDesc || ""),
|
||||
meta: [item.photographer, item.shootTime].filter(Boolean).join(" · "),
|
||||
})).filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
photos.value = rows
|
||||
.map((item) => ({
|
||||
id: String(item.photoId || ""),
|
||||
title: String(item.photoTitle || "未命名照片"),
|
||||
description: String(item.photoDesc || ""),
|
||||
meta: [item.photographer, item.shootTime].filter(Boolean).join(" · "),
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
state.value = photos.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
state.value = "error";
|
||||
}
|
||||
};
|
||||
const returnToAlbums = () => /^[1-9]\d*$/.test(genealogyId.value) ? returnTo("F07", { genealogyId: genealogyId.value }) : goBack();
|
||||
const addPhoto = () => valid.value ? openPage("F09", { genealogyId: genealogyId.value, albumId: albumId.value }, "F08") : Promise.resolve(false);
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); albumId.value = String(query?.albumId || ""); if (valid.value) loadPhotos(); });
|
||||
onShow(() => { if (valid.value && state.value !== "loading") loadPhotos(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
const returnToAlbums = () =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value)
|
||||
? returnTo("F07", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const addPhoto = () =>
|
||||
valid.value
|
||||
? openPage(
|
||||
"F09",
|
||||
{ genealogyId: genealogyId.value, albumId: albumId.value },
|
||||
"F08",
|
||||
)
|
||||
: Promise.resolve(false);
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
albumId.value = String(query?.albumId || "");
|
||||
if (valid.value) loadPhotos();
|
||||
});
|
||||
onShow(() => {
|
||||
if (valid.value && state.value !== "loading") loadPhotos();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.album-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.album-detail-header, .album-detail-content { z-index: 1; }.album-detail-content { padding: 22rpx 24rpx calc(48rpx + env(safe-area-inset-bottom)); }
|
||||
.album-state-card, .photo-card { @include adaptive.adaptive-family-content; }.album-state-card { width: 100%; min-height: 340rpx; padding: 84rpx 44rpx 56rpx; box-sizing: border-box; text-align: center; }.album-state-card text { display: block; }.album-state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }.album-state-card text:nth-child(2) { margin-top: 10rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }.album-state-card .app-button { margin-top: 34rpx; }
|
||||
.photo-list { display: flex; flex-direction: column; gap: 16rpx; }.photo-card { padding: 28rpx 32rpx; }.photo-card text { display: block; }.photo-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }.photo-card text:not(:first-child) { margin-top: 8rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.5; }
|
||||
.album-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.album-detail-header,
|
||||
.album-detail-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.album-detail-content {
|
||||
padding: 22rpx 24rpx calc(48rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
.album-state-card,
|
||||
.photo-card {
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.album-state-card {
|
||||
width: 100%;
|
||||
min-height: 340rpx;
|
||||
padding: 84rpx 44rpx 56rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
.album-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.album-state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.album-state-card text:nth-child(2) {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.album-state-card .app-button {
|
||||
margin-top: 34rpx;
|
||||
}
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.photo-card {
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.photo-card text {
|
||||
display: block;
|
||||
}
|
||||
.photo-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.photo-card text:not(:first-child) {
|
||||
margin-top: 8rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,49 +2,101 @@
|
||||
<template>
|
||||
<view class="media-upload-page" :class="`media-state--${pageState}`">
|
||||
<ModulePageBackground module="family" />
|
||||
<view class="media-upload-header"><PageHeader title="添加照片" custom-back @back="requestBack" /></view>
|
||||
<view class="media-upload-header"
|
||||
><PageHeader title="添加照片" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="media-upload-content">
|
||||
<view v-if="pageState === 'form'" class="media-panel">
|
||||
<text class="media-panel__title">添加一张家族照片</text>
|
||||
<text class="media-panel__note">请先选择图片。保存时只会提交真实上传回执中的文件标识。</text>
|
||||
<text class="media-panel__note"
|
||||
>请先选择图片。保存时只会提交真实上传回执中的文件标识。</text
|
||||
>
|
||||
|
||||
<view class="media-field media-field--upload">
|
||||
<text class="media-field__label"><text class="required-mark">*</text>照片</text>
|
||||
<button class="upload-button" :disabled="uploading || submitting" @click="selectPhoto">{{ uploading ? '上传中…' : (receipt ? '重新选择图片' : '选择图片') }}</button>
|
||||
<text v-if="receipt" class="upload-receipt">已上传：{{ receipt.fileName || '图片' }}</text>
|
||||
<text class="media-field__label"
|
||||
><text class="required-mark">*</text>照片</text
|
||||
>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="uploading || submitting"
|
||||
@click="selectPhoto"
|
||||
>
|
||||
{{ uploading ? "上传中…" : receipt ? "重新选择图片" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="receipt" class="upload-receipt"
|
||||
>已上传：{{ receipt.fileName || "图片" }}</text
|
||||
>
|
||||
</view>
|
||||
<text v-if="uploadError" class="field-error">{{ uploadError }}</text>
|
||||
|
||||
<view class="media-field">
|
||||
<text class="media-field__label">照片标题</text>
|
||||
<input v-model="form.photoTitle" maxlength="60" placeholder="例如：祖宅合影" placeholder-class="placeholder" @input="submitError = ''" />
|
||||
<input
|
||||
v-model="form.photoTitle"
|
||||
maxlength="60"
|
||||
placeholder="例如：祖宅合影"
|
||||
placeholder-class="placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="media-field media-field--textarea">
|
||||
<text class="media-field__label">照片说明</text>
|
||||
<textarea v-model="form.photoDesc" maxlength="500" auto-height placeholder="补充照片中的人物、场景或故事" placeholder-class="placeholder" @input="submitError = ''" />
|
||||
<textarea
|
||||
v-model="form.photoDesc"
|
||||
maxlength="500"
|
||||
auto-height
|
||||
placeholder="补充照片中的人物、场景或故事"
|
||||
placeholder-class="placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="media-field">
|
||||
<text class="media-field__label">拍摄人</text>
|
||||
<input v-model="form.photographer" maxlength="30" placeholder="请输入拍摄人" placeholder-class="placeholder" @input="submitError = ''" />
|
||||
<input
|
||||
v-model="form.photographer"
|
||||
maxlength="30"
|
||||
placeholder="请输入拍摄人"
|
||||
placeholder-class="placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="media-field media-field--picker">
|
||||
<text class="media-field__label">拍摄日期</text>
|
||||
<picker mode="date" :value="form.shootDate" @change="selectShootDate">
|
||||
<view :class="{ placeholder: !form.shootDate }">{{ form.shootDate || '请选择' }}</view>
|
||||
<view :class="{ placeholder: !form.shootDate }">{{
|
||||
form.shootDate || "请选择"
|
||||
}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="media-field media-field--picker">
|
||||
<text class="media-field__label">拍摄时间</text>
|
||||
<picker mode="time" :value="form.shootClock" @change="selectShootClock">
|
||||
<view :class="{ placeholder: !form.shootClock }">{{ form.shootClock || '请选择' }}</view>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.shootClock"
|
||||
@change="selectShootClock"
|
||||
>
|
||||
<view :class="{ placeholder: !form.shootClock }">{{
|
||||
form.shootClock || "请选择"
|
||||
}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="media-field">
|
||||
<text class="media-field__label">排序值</text>
|
||||
<input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" placeholder-class="placeholder" @input="submitError = ''" />
|
||||
<input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
placeholder-class="placeholder"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="submitError" class="field-error">{{ submitError }}</text>
|
||||
<AppButton block :disabled="uploading || submitting" :label="submitting ? '正在保存…' : '保存照片'" @click="submitPhoto" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="uploading || submitting"
|
||||
:label="submitting ? '正在保存…' : '保存照片'"
|
||||
@click="submitPhoto"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-else class="media-state-card">
|
||||
@@ -74,10 +126,22 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const albumId = ref("");
|
||||
@@ -87,17 +151,44 @@ const uploadError = ref("");
|
||||
const submitError = ref("");
|
||||
const uploading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const form = reactive({ photoTitle: "", photoDesc: "", photographer: "", shootDate: "", shootClock: "", sortOrder: "" });
|
||||
const form = reactive({
|
||||
photoTitle: "",
|
||||
photoDesc: "",
|
||||
photographer: "",
|
||||
shootDate: "",
|
||||
shootClock: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
const controller = createRequestController();
|
||||
const discardVisible = ref(false);
|
||||
const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const confirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(albumId.value));
|
||||
const isDirty = computed(() => Boolean(receipt.value) || Object.values(form).some((value) => value.trim()));
|
||||
const shootTime = computed(() => form.shootDate ? `${form.shootDate} ${form.shootClock || "00:00"}:00` : "");
|
||||
const stateCopy = computed(() => pageState.value === "success"
|
||||
? { title: "照片已提交服务端", copy: "服务端已返回成功结果。", action: "返回相册" }
|
||||
: { title: "照片入口无效", copy: "没有取得有效家谱或相册标识。", action: "返回上一页" });
|
||||
const hasValidContext = computed(
|
||||
() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(albumId.value),
|
||||
);
|
||||
const isDirty = computed(
|
||||
() =>
|
||||
Boolean(receipt.value) || Object.values(form).some((value) => value.trim()),
|
||||
);
|
||||
const shootTime = computed(() =>
|
||||
form.shootDate ? `${form.shootDate} ${form.shootClock || "00:00"}:00` : "",
|
||||
);
|
||||
const stateCopy = computed(() =>
|
||||
pageState.value === "success"
|
||||
? {
|
||||
title: "照片已提交服务端",
|
||||
copy: "服务端已返回成功结果。",
|
||||
action: "返回相册",
|
||||
}
|
||||
: {
|
||||
title: "照片入口无效",
|
||||
copy: "没有取得有效家谱或相册标识。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
);
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
@@ -119,8 +210,14 @@ const selectPhoto = async () => {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
const selectShootDate = (event) => { form.shootDate = event.detail.value || ""; submitError.value = ""; };
|
||||
const selectShootClock = (event) => { form.shootClock = event.detail.value || ""; submitError.value = ""; };
|
||||
const selectShootDate = (event) => {
|
||||
form.shootDate = event.detail.value || "";
|
||||
submitError.value = "";
|
||||
};
|
||||
const selectShootClock = (event) => {
|
||||
form.shootClock = event.detail.value || "";
|
||||
submitError.value = "";
|
||||
};
|
||||
|
||||
const submitPhoto = async () => {
|
||||
if (uploading.value || submitting.value || !hasValidContext.value) return;
|
||||
@@ -132,31 +229,43 @@ const submitPhoto = async () => {
|
||||
submitError.value = "";
|
||||
try {
|
||||
const { shootDate, shootClock, ...photoForm } = form;
|
||||
await appApi.createAlbumPhoto(genealogyId.value, albumId.value, {
|
||||
...photoForm,
|
||||
shootTime: shootTime.value,
|
||||
ossId: receipt.value.ossId,
|
||||
}, { requestController: controller });
|
||||
await appApi.createAlbumPhoto(
|
||||
genealogyId.value,
|
||||
albumId.value,
|
||||
{
|
||||
...photoForm,
|
||||
shootTime: shootTime.value,
|
||||
ossId: receipt.value.ossId,
|
||||
},
|
||||
{ requestController: controller },
|
||||
);
|
||||
pageState.value = "success";
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) submitError.value = error?.message || "照片保存失败，请稍后重试";
|
||||
if (!isRequestCancelled(error))
|
||||
submitError.value = error?.message || "照片保存失败，请稍后重试";
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const returnToAlbum = () => hasValidContext.value
|
||||
? returnTo("F08", { genealogyId: genealogyId.value, albumId: albumId.value })
|
||||
: goBack();
|
||||
const requestBack = () => runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: uploading.value || submitting.value,
|
||||
"close-transient": confirmation.cancel,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
const handleStateAction = () => pageState.value === "success" ? returnToAlbum() : goBack();
|
||||
const returnToAlbum = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("F08", {
|
||||
genealogyId: genealogyId.value,
|
||||
albumId: albumId.value,
|
||||
})
|
||||
: goBack();
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: uploading.value || submitting.value,
|
||||
"close-transient": confirmation.cancel,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
const handleStateAction = () =>
|
||||
pageState.value === "success" ? returnToAlbum() : goBack();
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => {
|
||||
controller.abort();
|
||||
@@ -167,32 +276,156 @@ onUnmounted(() => {
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.media-upload-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.media-upload-header, .media-upload-content { z-index: 1; }
|
||||
.media-upload-content { flex: 1; padding: 20rpx 24rpx calc(48rpx + env(safe-area-inset-bottom)); }
|
||||
.media-panel, .media-state-card { @include adaptive.adaptive-family-panel; box-sizing: border-box; }
|
||||
.media-panel { padding: 38rpx 32rpx 42rpx; }
|
||||
.media-panel__title, .media-panel__note, .media-field__label, .field-error { display: block; }
|
||||
.media-panel__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||||
.media-panel__note { margin-top: 10rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.55; }
|
||||
.media-field { margin-top: 20rpx; }
|
||||
.media-field__label { margin: 0 6rpx 8rpx; color: $ink; font-size: 25rpx; font-weight: 700; }
|
||||
.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; line-height: 1; transform: translateY(-3rpx); }
|
||||
.media-field input, .media-field textarea { @include adaptive.adaptive-family-field; box-sizing: border-box; display: block; width: 100%; color: $ink; font-size: 24rpx; }
|
||||
.media-field input { min-height: 78rpx; padding: 0 22rpx; }
|
||||
.media-field--picker picker { display: block; min-height: 78rpx; }
|
||||
.media-field--picker picker > view { display: flex; min-height: 78rpx; align-items: center; padding: 0 22rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); color: $ink; font-size: 24rpx; }
|
||||
.media-field textarea { min-height: 116rpx; padding: 18rpx 22rpx; line-height: 1.55; }
|
||||
.placeholder { color: #9e8e79; }
|
||||
.media-field--upload { display: grid; gap: 12rpx; padding: 18rpx 20rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.media-field--upload .media-field__label { margin: 0; }
|
||||
.upload-button { justify-self: start; min-height: 88rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.upload-receipt { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
|
||||
.field-error { margin-top: 10rpx; color: $brand-red; font-size: 22rpx; line-height: 1.45; }
|
||||
.media-panel .app-button { margin-top: 28rpx; }
|
||||
.media-state-card { min-height: 410rpx; padding: 98rpx 46rpx 58rpx; text-align: center; }
|
||||
.media-state-card text { display: block; }
|
||||
.media-state-card__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.media-state-card__copy { margin-top: 16rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.65; }
|
||||
.media-state-card .app-button { margin-top: 30rpx; }
|
||||
.media-upload-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.media-upload-header,
|
||||
.media-upload-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.media-upload-content {
|
||||
flex: 1;
|
||||
padding: 20rpx 24rpx calc(48rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
.media-panel,
|
||||
.media-state-card {
|
||||
@include adaptive.adaptive-family-panel;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.media-panel {
|
||||
padding: 38rpx 32rpx 42rpx;
|
||||
}
|
||||
.media-panel__title,
|
||||
.media-panel__note,
|
||||
.media-field__label,
|
||||
.field-error {
|
||||
display: block;
|
||||
}
|
||||
.media-panel__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.media-panel__note {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.media-field {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.media-field__label {
|
||||
margin: 0 6rpx 8rpx;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.media-field input,
|
||||
.media-field textarea {
|
||||
@include adaptive.adaptive-family-field;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.media-field input {
|
||||
min-height: 78rpx;
|
||||
padding: 0 22rpx;
|
||||
}
|
||||
.media-field--picker picker {
|
||||
display: block;
|
||||
min-height: 78rpx;
|
||||
}
|
||||
.media-field--picker picker > view {
|
||||
display: flex;
|
||||
min-height: 78rpx;
|
||||
align-items: center;
|
||||
padding: 0 22rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.media-field textarea {
|
||||
min-height: 116rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.placeholder {
|
||||
color: #9e8e79;
|
||||
}
|
||||
.media-field--upload {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.media-field--upload .media-field__label {
|
||||
margin: 0;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 88rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.field-error {
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.media-panel .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.media-state-card {
|
||||
min-height: 410rpx;
|
||||
padding: 98rpx 46rpx 58rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.media-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.media-state-card__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.media-state-card__copy {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.media-state-card .app-button {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,73 @@
|
||||
<!-- 页面编号：F-10；用途：家族视频。当前缺读取、发布和播放业务 owner。 -->
|
||||
<template>
|
||||
<view class="video-page"><ModulePageBackground module="family" /><view class="page-header"><PageHeader title="家族视频" custom-back @back="returnToFamily" /></view><view class="page-content"><view class="state-card"><text>家族视频暂未开放</text><text>视频功能正在准备中。开放后，家人的影像会在这里展示。</text><AppButton block :label="hasValidContext ? '返回家族动态' : '返回上一页'" @click="returnToFamily" /></view></view></view>
|
||||
<view class="video-page"
|
||||
><ModulePageBackground module="family" /><view class="page-header"
|
||||
><PageHeader title="家族视频" custom-back @back="returnToFamily" /></view
|
||||
><view class="page-content"
|
||||
><view class="state-card"
|
||||
><text>家族视频暂未开放</text
|
||||
><text>视频功能正在准备中。开放后，家人的影像会在这里展示。</text
|
||||
><AppButton
|
||||
block
|
||||
:label="hasValidContext ? '返回家族动态' : '返回上一页'"
|
||||
@click="returnToFamily" /></view></view
|
||||
></view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed,ref } from "vue"; import { onLoad } from "@dcloudio/uni-app"; import AppButton from "@/components/AppButton.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { goBack,returnTo } from "@/utils/navigation.js"; const genealogyId=ref("");const hasValidContext=computed(()=>/^[1-9]\d*$/.test(genealogyId.value));onLoad((query)=>{genealogyId.value=String(query?.genealogyId||"");});const returnToFamily=()=>hasValidContext.value?returnTo("F01",{genealogyId:genealogyId.value}):goBack();
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||||
const genealogyId = ref("");
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
});
|
||||
const returnToFamily = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("F01", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.video-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-family-content}.state-card text{display:block}.state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
.video-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,9 +45,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="contextInvalidated" class="state-panel state-panel--context">
|
||||
<view
|
||||
v-else-if="contextInvalidated"
|
||||
class="state-panel state-panel--context"
|
||||
>
|
||||
<text class="state-title">当前家谱已不可用</text>
|
||||
<text class="state-copy">权限或家谱列表可能已经变化，请明确选择仍可访问的家谱。</text>
|
||||
<text class="state-copy"
|
||||
>权限或家谱列表可能已经变化，请明确选择仍可访问的家谱。</text
|
||||
>
|
||||
<AppButton block label="选择可用家谱" @click="openSwitcher" />
|
||||
</view>
|
||||
|
||||
@@ -89,7 +94,9 @@
|
||||
src="/static/assets/foundation/transparent/meta-admin.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="current-meta-item-text">{{ currentRoleLabel }}</text>
|
||||
<text class="current-meta-item-text">{{
|
||||
currentRoleLabel
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -259,7 +266,11 @@
|
||||
<view class="add-dialog__heading">
|
||||
<text class="dialog-title">添加家谱</text>
|
||||
<text class="dialog-copy">建议先搜索已有家谱，避免重复创建</text>
|
||||
<text v-if="quota" class="dialog-copy">{{ quota.createRemaining === -1 ? '当前可继续创建家谱' : `还可创建 ${quota.createRemaining} 部家谱` }}</text>
|
||||
<text v-if="quota" class="dialog-copy">{{
|
||||
quota.createRemaining === -1
|
||||
? "当前可继续创建家谱"
|
||||
: `还可创建 ${quota.createRemaining} 部家谱`
|
||||
}}</text>
|
||||
<view
|
||||
class="add-dialog__close"
|
||||
role="button"
|
||||
@@ -368,7 +379,12 @@ import {
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { genealogyContext } from "@/utils/genealogy-context.js";
|
||||
import { consumeNavigationResult, handleBackPress, openPage, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
consumeNavigationResult,
|
||||
handleBackPress,
|
||||
openPage,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const isLoading = ref(false);
|
||||
const hasError = ref(false);
|
||||
@@ -395,9 +411,7 @@ let presentationState = "default";
|
||||
let skipNextShowRefresh = true;
|
||||
|
||||
const syncEmptyStateFromRoute = (query = {}) => {
|
||||
presentationState = ["empty", "loading", "error"].includes(
|
||||
query?.state,
|
||||
)
|
||||
presentationState = ["empty", "loading", "error"].includes(query?.state)
|
||||
? query.state
|
||||
: "default";
|
||||
forceEmptyState.value = presentationState === "empty";
|
||||
@@ -413,8 +427,7 @@ const reconcilePageGenealogyContext = () => {
|
||||
genealogyContext.reconcileCurrentGenealogyId(
|
||||
availableIds,
|
||||
requestedGenealogyId.value,
|
||||
) ||
|
||||
null;
|
||||
) || null;
|
||||
contextReconcileFailed.value = false;
|
||||
contextInvalidated.value = Boolean(
|
||||
availableIds.length &&
|
||||
@@ -469,7 +482,8 @@ const loadUnreadCount = async () => {
|
||||
const count = await appApi.getUnreadNotificationCount({
|
||||
requestController: unreadRequestController,
|
||||
});
|
||||
if (pageActive && generation === unreadLoadGeneration) unreadCount.value = count;
|
||||
if (pageActive && generation === unreadLoadGeneration)
|
||||
unreadCount.value = count;
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) unreadCount.value = 0;
|
||||
}
|
||||
@@ -484,7 +498,12 @@ const loadQuota = async () => {
|
||||
});
|
||||
if (pageActive && generation === quotaLoadGeneration) quota.value = result;
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error) && pageActive && generation === quotaLoadGeneration) quota.value = null;
|
||||
if (
|
||||
!isRequestCancelled(error) &&
|
||||
pageActive &&
|
||||
generation === quotaLoadGeneration
|
||||
)
|
||||
quota.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -749,7 +768,8 @@ const openShortcut = (key) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / contain no-repeat;
|
||||
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png")
|
||||
center / contain no-repeat;
|
||||
color: #fff7e7;
|
||||
}
|
||||
.current-seal-title {
|
||||
@@ -1093,7 +1113,8 @@ const openShortcut = (key) => {
|
||||
height: 184rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / contain no-repeat;
|
||||
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
|
||||
.empty-seal__text {
|
||||
@@ -1142,12 +1163,14 @@ const openShortcut = (key) => {
|
||||
|
||||
.empty-search-action {
|
||||
margin-top: 26rpx;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png") center / contain no-repeat;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
|
||||
.empty-invite-action {
|
||||
margin-top: 22rpx;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
|
||||
.empty-search-action__copy,
|
||||
@@ -1187,7 +1210,8 @@ const openShortcut = (key) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30rpx;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png") center / contain no-repeat;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.state-retry__copy {
|
||||
color: #fff9ec;
|
||||
|
||||
@@ -8,53 +8,120 @@
|
||||
<view class="create-card">
|
||||
<text class="create-card__eyebrow">立谱信息</text>
|
||||
<text class="create-card__title">为家族创建一部家谱</text>
|
||||
<text class="create-card__note">创建成功后会回到我的家谱；首代人物可在后续合同开放后再录入。</text>
|
||||
<text class="create-card__note"
|
||||
>创建成功后会回到我的家谱；首代人物可在后续合同开放后再录入。</text
|
||||
>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>姓氏</text>
|
||||
<input v-model="form.surname" maxlength="4" placeholder="请输入姓氏" placeholder-class="placeholder" @input="clearFieldError('surname')" />
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>姓氏</text
|
||||
>
|
||||
<input
|
||||
v-model="form.surname"
|
||||
maxlength="4"
|
||||
placeholder="请输入姓氏"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('surname')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.surname" class="field-error">{{ fieldErrors.surname }}</text>
|
||||
<text v-if="fieldErrors.surname" class="field-error">{{
|
||||
fieldErrors.surname
|
||||
}}</text>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>谱名</text>
|
||||
<input v-model="form.genealogyName" maxlength="24" placeholder="请输入家谱名称" placeholder-class="placeholder" @input="clearFieldError('genealogyName')" />
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>谱名</text
|
||||
>
|
||||
<input
|
||||
v-model="form.genealogyName"
|
||||
maxlength="24"
|
||||
placeholder="请输入家谱名称"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('genealogyName')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.genealogyName" class="field-error">{{ fieldErrors.genealogyName }}</text>
|
||||
<text v-if="fieldErrors.genealogyName" class="field-error">{{
|
||||
fieldErrors.genealogyName
|
||||
}}</text>
|
||||
|
||||
<view class="field-row field-row--selector" @click="openRegionPicker">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>所在地区</text>
|
||||
<text class="region-selector-value" :class="{ 'region-selector-value--placeholder': !selectedRegion }">{{ selectedRegion ? regionPickerTrail.map((item) => item.label).join(' / ') : (regionLoading ? '正在加载地区…' : (regionPickerError || '请选择所在地区')) }}</text>
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>所在地区</text
|
||||
>
|
||||
<text
|
||||
class="region-selector-value"
|
||||
:class="{ 'region-selector-value--placeholder': !selectedRegion }"
|
||||
>{{
|
||||
selectedRegion
|
||||
? regionPickerTrail.map((item) => item.label).join(" / ")
|
||||
: regionLoading
|
||||
? "正在加载地区…"
|
||||
: regionPickerError || "请选择所在地区"
|
||||
}}</text
|
||||
>
|
||||
</view>
|
||||
<text v-if="fieldErrors.regionCode" class="field-error">{{ fieldErrors.regionCode }}</text>
|
||||
<text v-if="fieldErrors.regionCode" class="field-error">{{
|
||||
fieldErrors.regionCode
|
||||
}}</text>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">堂号</text>
|
||||
<input v-model="form.ancestralHall" maxlength="12" placeholder="请输入堂号" placeholder-class="placeholder" />
|
||||
<input
|
||||
v-model="form.ancestralHall"
|
||||
maxlength="12"
|
||||
placeholder="请输入堂号"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">所在地</text>
|
||||
<input v-model="form.originPlace" maxlength="30" placeholder="请输入所在地" placeholder-class="placeholder" />
|
||||
<input
|
||||
v-model="form.originPlace"
|
||||
maxlength="30"
|
||||
placeholder="请输入所在地"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">详细地址</text>
|
||||
<input v-model="form.addressDetail" maxlength="60" placeholder="请输入详细地址" placeholder-class="placeholder" />
|
||||
<input
|
||||
v-model="form.addressDetail"
|
||||
maxlength="60"
|
||||
placeholder="请输入详细地址"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="intro-field">
|
||||
<text class="intro-field__label">家谱简介</text>
|
||||
<textarea v-model="form.intro" maxlength="200" auto-height placeholder="可记录迁徙、家训或建谱缘由" placeholder-class="placeholder" />
|
||||
<textarea
|
||||
v-model="form.intro"
|
||||
maxlength="200"
|
||||
auto-height
|
||||
placeholder="可记录迁徙、家训或建谱缘由"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="cover-field">
|
||||
<view>
|
||||
<text class="cover-field__label">封面图片</text>
|
||||
<text class="cover-field__hint">选择图片后会取得真实上传回执，并在创建家谱时关联。</text>
|
||||
<text class="cover-field__hint"
|
||||
>选择图片后会取得真实上传回执，并在创建家谱时关联。</text
|
||||
>
|
||||
</view>
|
||||
<button class="upload-button" :disabled="isUploading || isSubmitting" @click="uploadCover">{{ isUploading ? '上传中…' : '选择图片' }}</button>
|
||||
<text v-if="coverFileName" class="upload-receipt">已上传：{{ coverFileName }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="isUploading || isSubmitting"
|
||||
@click="uploadCover"
|
||||
>
|
||||
{{ isUploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="coverFileName" class="upload-receipt"
|
||||
>已上传：{{ coverFileName }}</text
|
||||
>
|
||||
</view>
|
||||
<text v-if="uploadError" class="field-error">{{ uploadError }}</text>
|
||||
|
||||
@@ -65,14 +132,23 @@
|
||||
v-for="option in GENEALOGY_ACCESS_PRESET_OPTIONS"
|
||||
:key="option.value"
|
||||
class="access-rule__option"
|
||||
:class="{ 'access-rule__option--active': form.accessPreset === option.value }"
|
||||
:class="{
|
||||
'access-rule__option--active':
|
||||
form.accessPreset === option.value,
|
||||
}"
|
||||
@click="form.accessPreset = option.value"
|
||||
>{{ option.label }}</view>
|
||||
>{{ option.label }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text v-if="submitError" class="submit-error">{{ submitError }}</text>
|
||||
<AppButton block :disabled="isSubmitting || isUploading" :label="isSubmitting ? '正在创建…' : '确认创建家谱'" @click="submitCreate" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="isSubmitting || isUploading"
|
||||
:label="isSubmitting ? '正在创建…' : '确认创建家谱'"
|
||||
@click="submitCreate"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -84,7 +160,12 @@
|
||||
</view>
|
||||
<view class="region-sheet__picker">
|
||||
<view class="region-sheet__column-headings">
|
||||
<text v-for="label in ['省份', '城市', '区县']" :key="label" class="region-sheet__column-heading">{{ label }}</text>
|
||||
<text
|
||||
v-for="label in ['省份', '城市', '区县']"
|
||||
:key="label"
|
||||
class="region-sheet__column-heading"
|
||||
>{{ label }}</text
|
||||
>
|
||||
</view>
|
||||
<picker-view
|
||||
class="region-sheet__picker-view"
|
||||
@@ -100,14 +181,22 @@
|
||||
v-for="(option, optionIndex) in column"
|
||||
:key="option.regionCode"
|
||||
class="region-sheet__picker-item"
|
||||
:class="{ 'region-sheet__picker-item--selected': regionPickerIndexes[columnIndex] === optionIndex }"
|
||||
>{{ option.label }}</view>
|
||||
:class="{
|
||||
'region-sheet__picker-item--selected':
|
||||
regionPickerIndexes[columnIndex] === optionIndex,
|
||||
}"
|
||||
>{{ option.label }}</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<view class="region-sheet__footer">
|
||||
<view class="region-sheet__cancel" @click="closeRegionPicker">取消</view>
|
||||
<button class="region-sheet__confirm" @click="confirmRegionSelection">确认选择</button>
|
||||
<view class="region-sheet__cancel" @click="closeRegionPicker"
|
||||
>取消</view
|
||||
>
|
||||
<button class="region-sheet__confirm" @click="confirmRegionSelection">
|
||||
确认选择
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -134,11 +223,26 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { GENEALOGY_ACCESS_PRESET, GENEALOGY_ACCESS_PRESET_OPTIONS, toApiGenealogyAccess } from "@/utils/genealogy-contracts.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { finishPage, handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
GENEALOGY_ACCESS_PRESET,
|
||||
GENEALOGY_ACCESS_PRESET_OPTIONS,
|
||||
toApiGenealogyAccess,
|
||||
} from "@/utils/genealogy-contracts.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
finishPage,
|
||||
handleBackPress,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const form = reactive({
|
||||
surname: "",
|
||||
@@ -149,7 +253,11 @@ const form = reactive({
|
||||
intro: "",
|
||||
accessPreset: GENEALOGY_ACCESS_PRESET.MEMBER_ONLY,
|
||||
});
|
||||
const fieldErrors = reactive({ surname: "", genealogyName: "", regionCode: "" });
|
||||
const fieldErrors = reactive({
|
||||
surname: "",
|
||||
genealogyName: "",
|
||||
regionCode: "",
|
||||
});
|
||||
const submitError = ref("");
|
||||
const isSubmitting = ref(false);
|
||||
const isUploading = ref(false);
|
||||
@@ -166,14 +274,18 @@ const regionPickerError = ref("");
|
||||
const regionLoading = ref(false);
|
||||
const regionPickerOpen = ref(false);
|
||||
const discardDialogVisible = ref(false);
|
||||
const regionPickerIndicatorStyle = "height: 104rpx; border-top: 1px solid rgba(159, 23, 15, .46); border-bottom: 1px solid rgba(159, 23, 15, .46); background: rgba(159, 23, 15, .08);";
|
||||
const regionPickerIndicatorStyle =
|
||||
"height: 104rpx; border-top: 1px solid rgba(159, 23, 15, .46); border-bottom: 1px solid rgba(159, 23, 15, .46); background: rgba(159, 23, 15, .08);";
|
||||
let pageActive = true;
|
||||
const hasDraft = computed(() =>
|
||||
Object.entries(form).some(([key, value]) =>
|
||||
key === "accessPreset"
|
||||
? value !== GENEALOGY_ACCESS_PRESET.MEMBER_ONLY
|
||||
: String(value).trim(),
|
||||
) || Boolean(selectedRegion.value?.regionCode) || Boolean(coverOssId.value),
|
||||
const hasDraft = computed(
|
||||
() =>
|
||||
Object.entries(form).some(([key, value]) =>
|
||||
key === "accessPreset"
|
||||
? value !== GENEALOGY_ACCESS_PRESET.MEMBER_ONLY
|
||||
: String(value).trim(),
|
||||
) ||
|
||||
Boolean(selectedRegion.value?.regionCode) ||
|
||||
Boolean(coverOssId.value),
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardDialogVisible.value = visible;
|
||||
@@ -190,17 +302,26 @@ const clearFieldError = (field) => {
|
||||
const validate = () => {
|
||||
fieldErrors.surname = form.surname.trim() ? "" : "请填写姓氏";
|
||||
fieldErrors.genealogyName = form.genealogyName.trim() ? "" : "请填写谱名";
|
||||
fieldErrors.regionCode = selectedRegion.value?.regionCode ? "" : "请选择所在地区";
|
||||
return !fieldErrors.surname && !fieldErrors.genealogyName && !fieldErrors.regionCode;
|
||||
fieldErrors.regionCode = selectedRegion.value?.regionCode
|
||||
? ""
|
||||
: "请选择所在地区";
|
||||
return (
|
||||
!fieldErrors.surname &&
|
||||
!fieldErrors.genealogyName &&
|
||||
!fieldErrors.regionCode
|
||||
);
|
||||
};
|
||||
|
||||
const fetchRegionChildren = async (parentCode) => {
|
||||
regionLoading.value = true;
|
||||
regionPickerError.value = "";
|
||||
try {
|
||||
return await appApi.getRegionChildren(parentCode, { requestController: regionController });
|
||||
return await appApi.getRegionChildren(parentCode, {
|
||||
requestController: regionController,
|
||||
});
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) regionPickerError.value = error?.message || "地区列表加载失败，请重试";
|
||||
if (!isRequestCancelled(error))
|
||||
regionPickerError.value = error?.message || "地区列表加载失败，请重试";
|
||||
return [];
|
||||
} finally {
|
||||
regionLoading.value = false;
|
||||
@@ -218,7 +339,8 @@ const loadRegionRoot = async () => {
|
||||
};
|
||||
|
||||
const loadPickerColumns = async (provinceIndex = 0, cityIndex = 0) => {
|
||||
const provinces = regionPickerColumns.value[0] || await fetchRegionChildren("0");
|
||||
const provinces =
|
||||
regionPickerColumns.value[0] || (await fetchRegionChildren("0"));
|
||||
const province = provinces[provinceIndex];
|
||||
if (!province) return;
|
||||
|
||||
@@ -238,7 +360,9 @@ const loadPickerColumns = async (provinceIndex = 0, cityIndex = 0) => {
|
||||
|
||||
const handleRegionPickerChange = async (event) => {
|
||||
if (regionLoading.value) return;
|
||||
const nextIndexes = (event?.detail?.value || []).map((index) => Number(index) || 0);
|
||||
const nextIndexes = (event?.detail?.value || []).map(
|
||||
(index) => Number(index) || 0,
|
||||
);
|
||||
const indexes = regionPickerIndexes.value;
|
||||
const provinceIndex = nextIndexes[0] || 0;
|
||||
const cityIndex = nextIndexes[1] || 0;
|
||||
@@ -276,7 +400,9 @@ const confirmRegionSelection = () => {
|
||||
});
|
||||
const region = trail[trail.length - 1];
|
||||
if (!region) return;
|
||||
regionPickerIndexes.value = trail.map((_, index) => Number(indexes[index]) || 0);
|
||||
regionPickerIndexes.value = trail.map(
|
||||
(_, index) => Number(indexes[index]) || 0,
|
||||
);
|
||||
selectedRegion.value = region;
|
||||
regionPickerTrail.value = trail;
|
||||
fieldErrors.regionCode = "";
|
||||
@@ -293,7 +419,8 @@ const requestBack = () =>
|
||||
transientOpen: regionPickerOpen.value || discardDialogVisible.value,
|
||||
dirty: hasDraft.value,
|
||||
submitting: isSubmitting.value || isUploading.value,
|
||||
"close-transient": () => regionPickerOpen.value ? closeRegionPicker() : cancelDiscard(),
|
||||
"close-transient": () =>
|
||||
regionPickerOpen.value ? closeRegionPicker() : cancelDiscard(),
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": requestDiscardConfirmation,
|
||||
});
|
||||
@@ -305,12 +432,18 @@ const uploadCover = async () => {
|
||||
isUploading.value = true;
|
||||
uploadError.value = "";
|
||||
try {
|
||||
const receipt = await pickAndUploadImage({ requestController: createController });
|
||||
const receipt = await pickAndUploadImage({
|
||||
requestController: createController,
|
||||
});
|
||||
if (!pageActive) return;
|
||||
coverOssId.value = receipt.ossId;
|
||||
coverFileName.value = receipt.fileName || "封面图片";
|
||||
} catch (error) {
|
||||
if (pageActive && !isImagePickCancelled(error) && !isRequestCancelled(error)) {
|
||||
if (
|
||||
pageActive &&
|
||||
!isImagePickCancelled(error) &&
|
||||
!isRequestCancelled(error)
|
||||
) {
|
||||
uploadError.value = error?.message || "封面图片上传失败，请稍后重试";
|
||||
}
|
||||
} finally {
|
||||
@@ -329,23 +462,30 @@ const submitCreate = async () => {
|
||||
isSubmitting.value = true;
|
||||
submitError.value = "";
|
||||
try {
|
||||
const created = await appApi.createGenealogy({
|
||||
surname: form.surname,
|
||||
genealogyName: form.genealogyName,
|
||||
regionCode: selectedRegion.value.regionCode,
|
||||
ancestralHall: form.ancestralHall,
|
||||
originPlace: form.originPlace,
|
||||
addressDetail: form.addressDetail,
|
||||
intro: form.intro,
|
||||
coverOssId: coverOssId.value,
|
||||
...access,
|
||||
}, { requestController: createController });
|
||||
const created = await appApi.createGenealogy(
|
||||
{
|
||||
surname: form.surname,
|
||||
genealogyName: form.genealogyName,
|
||||
regionCode: selectedRegion.value.regionCode,
|
||||
ancestralHall: form.ancestralHall,
|
||||
originPlace: form.originPlace,
|
||||
addressDetail: form.addressDetail,
|
||||
intro: form.intro,
|
||||
coverOssId: coverOssId.value,
|
||||
...access,
|
||||
},
|
||||
{ requestController: createController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
await finishPage("G01", {}, {
|
||||
operation: "genealogy-created",
|
||||
entityId: created.id,
|
||||
refresh: true,
|
||||
});
|
||||
await finishPage(
|
||||
"G01",
|
||||
{},
|
||||
{
|
||||
operation: "genealogy-created",
|
||||
entityId: created.id,
|
||||
refresh: true,
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return;
|
||||
submitError.value = error?.message || "创建失败，请稍后重试";
|
||||
@@ -365,51 +505,299 @@ onUnload(() => {
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.create-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-content { z-index: 1; padding: 24rpx 32rpx 72rpx; }
|
||||
.create-card { @include adaptive.adaptive-genealogy-state-panel; padding: 48rpx 38rpx 42rpx; }
|
||||
.create-card__eyebrow, .create-card__title, .create-card__note, .field-error, .submit-error { display: block; }
|
||||
.create-card__eyebrow { color: $brand-red; font-size: 26rpx; font-weight: 700; letter-spacing: 3rpx; }
|
||||
.create-card__title { margin-top: 12rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 42rpx; font-weight: 700; }
|
||||
.create-card__note { margin-top: 16rpx; color: $ink-muted; font-size: 25rpx; line-height: 1.65; }
|
||||
.field-row { display: flex; min-height: 100rpx; align-items: center; margin-top: 22rpx; padding: 0 20rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.field-row__label { width: 142rpx; flex: 0 0 auto; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }
|
||||
.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; line-height: 1; transform: translateY(-3rpx); }
|
||||
.field-row input { min-width: 0; flex: 1; color: $ink; font-size: 28rpx; }
|
||||
.field-row--selector { justify-content: space-between; cursor: pointer; }
|
||||
.region-selector-value { min-width: 0; flex: 1; color: $ink; font-size: 28rpx; text-align: right; overflow-wrap: anywhere; }
|
||||
.region-selector-value--placeholder { color: #ab9a86; }
|
||||
.placeholder { color: #ab9a86; }
|
||||
.intro-field { margin-top: 22rpx; padding: 20rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.intro-field__label { display: block; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }
|
||||
.intro-field textarea { display: block; width: 100%; min-height: 120rpx; margin-top: 14rpx; color: $ink; font-size: 27rpx; line-height: 1.55; }
|
||||
.cover-field { display: grid; gap: 12rpx; margin-top: 22rpx; padding: 20rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.cover-field__label { display: block; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }
|
||||
.cover-field__hint { display: block; margin-top: 6rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; }
|
||||
.upload-button { justify-self: start; min-height: 60rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.upload-receipt { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
|
||||
.field-error, .submit-error { margin-top: 10rpx; color: $brand-red; font-size: 24rpx; line-height: 1.5; }
|
||||
.access-rule { margin-top: 28rpx; }
|
||||
.access-rule__label { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 31rpx; font-weight: 700; }
|
||||
.access-rule__options { display: flex; margin-top: 16rpx; gap: 16rpx; }
|
||||
.access-rule__option { flex: 1; padding: 20rpx 12rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; color: $ink-muted; font-size: 25rpx; text-align: center; }
|
||||
.access-rule__option--active { border-color: $brand-red; background: rgba(159, 23, 15, .07); color: $brand-red; font-weight: 700; }
|
||||
.create-card .app-button { margin-top: 32rpx; }
|
||||
.region-sheet { position: fixed; z-index: 10; inset: 0; display: flex; align-items: flex-end; }
|
||||
.region-sheet__mask { position: absolute; inset: 0; background: rgba(43, 30, 20, .42); }
|
||||
.region-sheet__panel { position: relative; width: 100%; padding: 22rpx 28rpx calc(24rpx + env(safe-area-inset-bottom)); border-radius: 30rpx 30rpx 0 0; background: #fdf9ef; box-shadow: 0 -12rpx 36rpx rgba(43, 30, 20, .2); }
|
||||
.region-sheet__intro { padding: 0 10rpx 16rpx; text-align: center; }
|
||||
.region-sheet__title { display: block; }
|
||||
.region-sheet__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||||
.region-sheet__picker { overflow: hidden; border: 1rpx solid rgba(128, 89, 49, .28); border-radius: 16rpx; background: rgba(255, 252, 245, .8); }
|
||||
.region-sheet__column-headings { display: flex; height: 84rpx; border-bottom: 1rpx solid rgba(128, 89, 49, .18); }
|
||||
.region-sheet__column-heading { box-sizing: border-box; width: 33.333%; padding: 24rpx 12rpx; color: $ink-muted; font-size: 26rpx; text-align: center; }
|
||||
.region-sheet__column-heading + .region-sheet__column-heading { border-left: 1rpx solid rgba(128, 89, 49, .16); }
|
||||
.region-sheet__picker-view { width: 100%; height: 520rpx; }
|
||||
.region-sheet__picker-item { box-sizing: border-box; height: 104rpx; overflow: hidden; padding: 0 6rpx; color: $ink-muted; font-size: 26rpx; line-height: 104rpx; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.region-sheet__picker-item--selected { color: $brand-red; font-weight: 700; }
|
||||
.region-sheet__footer { display: flex; align-items: center; margin-top: 22rpx; gap: 12rpx; }
|
||||
.region-sheet__cancel { min-width: 116rpx; padding: 20rpx 10rpx; color: $ink-muted; font-size: 28rpx; text-align: center; }
|
||||
.region-sheet__confirm { flex: 1; height: 82rpx; margin: 0; padding: 0; border: 0; border-radius: 10rpx; background: $brand-red; color: #fff; font-size: 29rpx; font-weight: 700; line-height: 82rpx; }
|
||||
.region-sheet__confirm::after { display: none; }
|
||||
.create-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
padding: 24rpx 32rpx 72rpx;
|
||||
}
|
||||
.create-card {
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
padding: 48rpx 38rpx 42rpx;
|
||||
}
|
||||
.create-card__eyebrow,
|
||||
.create-card__title,
|
||||
.create-card__note,
|
||||
.field-error,
|
||||
.submit-error {
|
||||
display: block;
|
||||
}
|
||||
.create-card__eyebrow {
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.create-card__title {
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.create-card__note {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.field-row {
|
||||
display: flex;
|
||||
min-height: 100rpx;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.field-row__label {
|
||||
width: 142rpx;
|
||||
flex: 0 0 auto;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.field-row input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.field-row--selector {
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
.region-selector-value {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.region-selector-value--placeholder {
|
||||
color: #ab9a86;
|
||||
}
|
||||
.placeholder {
|
||||
color: #ab9a86;
|
||||
}
|
||||
.intro-field {
|
||||
margin-top: 22rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.intro-field__label {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.intro-field textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
margin-top: 14rpx;
|
||||
color: $ink;
|
||||
font-size: 27rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.cover-field {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
margin-top: 22rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.cover-field__label {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cover-field__hint {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 60rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.field-error,
|
||||
.submit-error {
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.access-rule {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.access-rule__label {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.access-rule__options {
|
||||
display: flex;
|
||||
margin-top: 16rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.access-rule__option {
|
||||
flex: 1;
|
||||
padding: 20rpx 12rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.access-rule__option--active {
|
||||
border-color: $brand-red;
|
||||
background: rgba(159, 23, 15, 0.07);
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.create-card .app-button {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.region-sheet {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.region-sheet__mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(43, 30, 20, 0.42);
|
||||
}
|
||||
.region-sheet__panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 22rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fdf9ef;
|
||||
box-shadow: 0 -12rpx 36rpx rgba(43, 30, 20, 0.2);
|
||||
}
|
||||
.region-sheet__intro {
|
||||
padding: 0 10rpx 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.region-sheet__title {
|
||||
display: block;
|
||||
}
|
||||
.region-sheet__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.region-sheet__picker {
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.28);
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 252, 245, 0.8);
|
||||
}
|
||||
.region-sheet__column-headings {
|
||||
display: flex;
|
||||
height: 84rpx;
|
||||
border-bottom: 1rpx solid rgba(128, 89, 49, 0.18);
|
||||
}
|
||||
.region-sheet__column-heading {
|
||||
box-sizing: border-box;
|
||||
width: 33.333%;
|
||||
padding: 24rpx 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.region-sheet__column-heading + .region-sheet__column-heading {
|
||||
border-left: 1rpx solid rgba(128, 89, 49, 0.16);
|
||||
}
|
||||
.region-sheet__picker-view {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
}
|
||||
.region-sheet__picker-item {
|
||||
box-sizing: border-box;
|
||||
height: 104rpx;
|
||||
overflow: hidden;
|
||||
padding: 0 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 26rpx;
|
||||
line-height: 104rpx;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.region-sheet__picker-item--selected {
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.region-sheet__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.region-sheet__cancel {
|
||||
min-width: 116rpx;
|
||||
padding: 20rpx 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.region-sheet__confirm {
|
||||
flex: 1;
|
||||
height: 82rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 10rpx;
|
||||
background: $brand-red;
|
||||
color: #fff;
|
||||
font-size: 29rpx;
|
||||
font-weight: 700;
|
||||
line-height: 82rpx;
|
||||
}
|
||||
.region-sheet__confirm::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,9 @@
|
||||
<text v-if="genealogy.personCount !== null"
|
||||
>世系 {{ genealogy.personCount }} 人</text
|
||||
>
|
||||
<text>{{ getGenealogyAccessPresetLabel(genealogy.accessPreset) }}</text>
|
||||
<text>{{
|
||||
getGenealogyAccessPresetLabel(genealogy.accessPreset)
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="overview-hero__stats">
|
||||
<text v-if="genealogy.joinTime"
|
||||
@@ -85,7 +87,9 @@
|
||||
</view>
|
||||
<view class="overview-summary">
|
||||
<text class="overview-action__title">访问范围</text
|
||||
><text>{{ getGenealogyAccessPresetLabel(genealogy.accessPreset) }}</text>
|
||||
><text>{{
|
||||
getGenealogyAccessPresetLabel(genealogy.accessPreset)
|
||||
}}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
@@ -110,28 +114,42 @@
|
||||
viewMode === "preview" ? "本地流程预览" : "公开家谱"
|
||||
}}</text>
|
||||
<text class="overview-public__title">{{ genealogy.name }}</text>
|
||||
<text class="overview-public__source">{{ genealogy.source || "来源信息待同步" }}</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
|
||||
><text>地区</text
|
||||
><text>{{ genealogy.location || "待补充" }}</text></view
|
||||
>
|
||||
<view
|
||||
><text>堂号</text><text>{{ genealogy.hall || "待补充" }}</text></view
|
||||
><text>堂号</text
|
||||
><text>{{ genealogy.hall || "待补充" }}</text></view
|
||||
>
|
||||
<view
|
||||
><text>当前支系</text><text>{{ genealogy.branchName || "待补充" }}</text></view
|
||||
><text>当前支系</text
|
||||
><text>{{ genealogy.branchName || "待补充" }}</text></view
|
||||
>
|
||||
<view
|
||||
><text>{{ viewMode === "preview" ? "首代人物" : "所属上级谱" }}</text
|
||||
><text>{{ (viewMode === "preview" ? genealogy.ancestorName : genealogy.parentName) || "待补充" }}</text></view
|
||||
><text>{{
|
||||
viewMode === "preview" ? "首代人物" : "所属上级谱"
|
||||
}}</text
|
||||
><text>{{
|
||||
(viewMode === "preview"
|
||||
? genealogy.ancestorName
|
||||
: genealogy.parentName) || "待补充"
|
||||
}}</text></view
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="viewMode === 'public' && (genealogy.manager || genealogy.certification)"
|
||||
v-if="
|
||||
viewMode === 'public' &&
|
||||
(genealogy.manager || genealogy.certification)
|
||||
"
|
||||
class="overview-public__trust"
|
||||
>
|
||||
<text>{{ genealogy.manager || "管理者待确认" }}</text>
|
||||
@@ -231,11 +249,11 @@ const publicActionLabel = computed(() => {
|
||||
if (publicRelation.value === "pending") return "查看申请进度";
|
||||
if (!publicCanApply.value) return "";
|
||||
return (
|
||||
({
|
||||
{
|
||||
available: "申请加入这部家谱",
|
||||
rejected: "修改后重新申请",
|
||||
removed: "重新申请加入",
|
||||
})[publicRelation.value] || ""
|
||||
}[publicRelation.value] || ""
|
||||
);
|
||||
});
|
||||
|
||||
@@ -332,8 +350,7 @@ onUnload(() => {
|
||||
});
|
||||
const reloadOverview = () => loadGenealogy({ genealogyId: genealogyId.value });
|
||||
const toGenealogies = () => returnTo("G01", {});
|
||||
const toTree = () =>
|
||||
openPage("T01", { genealogyId: genealogyId.value }, "G05");
|
||||
const toTree = () => openPage("T01", { genealogyId: genealogyId.value }, "G05");
|
||||
const toFamily = () => goRoot("F01", { genealogyId: genealogyId.value });
|
||||
const toApplications = () =>
|
||||
openPage("G10", { genealogyId: genealogyId.value }, "G05");
|
||||
@@ -424,7 +441,9 @@ const applyToJoin = () => {
|
||||
font-size: 22rpx;
|
||||
transform: translateY(-18rpx);
|
||||
}
|
||||
.overview-hero__stats + .overview-hero__stats { margin-left: 18rpx; }
|
||||
.overview-hero__stats + .overview-hero__stats {
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
.overview-actions {
|
||||
display: grid;
|
||||
min-height: 386rpx;
|
||||
|
||||
@@ -1,18 +1,45 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="page-header"><PageHeader title="搜索家谱" custom-back @back="backToGenealogies" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="搜索家谱" custom-back @back="backToGenealogies"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view class="search-note"><text>公开家谱</text><text>以下结果来自服务端公开家谱列表。</text></view>
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取公开家谱" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取公开家谱</text><AppButton block type="secondary" label="重新加载" @click="loadGenealogies" /></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>暂未找到公开家谱</text></view>
|
||||
<view class="search-note"
|
||||
><text>公开家谱</text
|
||||
><text>以下结果来自服务端公开家谱列表。</text></view
|
||||
>
|
||||
<view v-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取公开家谱"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取公开家谱</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadGenealogies"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>暂未找到公开家谱</text></view
|
||||
>
|
||||
<view v-else class="result-list">
|
||||
<view v-for="item in rows" :key="item.id" class="genealogy-card">
|
||||
<view class="card-heading"><text>{{ item.name }}</text><text v-if="item.surname">{{ item.surname }}氏</text></view>
|
||||
<text v-if="item.location" class="card-meta">{{ item.location }}</text>
|
||||
<view class="card-heading"
|
||||
><text>{{ item.name }}</text
|
||||
><text v-if="item.surname">{{ item.surname }}氏</text></view
|
||||
>
|
||||
<text v-if="item.location" class="card-meta">{{
|
||||
item.location
|
||||
}}</text>
|
||||
<text v-if="item.intro" class="card-copy">{{ item.intro }}</text>
|
||||
<view class="card-footer"><text>{{ item.memberCount }} 位成员</text><AppButton :label="item.canManage ? '已在我的家谱' : '申请加入'" :disabled="item.canManage" @click="applyToJoin(item)" /></view>
|
||||
<view class="card-footer"
|
||||
><text>{{ item.memberCount }} 位成员</text
|
||||
><AppButton
|
||||
:label="item.canManage ? '已在我的家谱' : '申请加入'"
|
||||
:disabled="item.canManage"
|
||||
@click="applyToJoin(item)"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -26,7 +53,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { openPage, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const rows = ref([]);
|
||||
@@ -37,31 +68,165 @@ const loadGenealogies = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
const result = await appApi.getPublicGenealogies({ requestController: controller });
|
||||
const result = await appApi.getPublicGenealogies({
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
rows.value = result.map((item) => ({
|
||||
id: String(item.genealogyId),
|
||||
name: String(item.genealogyName || "未命名家谱"),
|
||||
surname: String(item.surname || ""),
|
||||
location: String(item.regionFullName || item.regionName || item.originPlace || item.addressDetail || ""),
|
||||
intro: String(item.intro || ""),
|
||||
memberCount: Number.isSafeInteger(item.memberCount) ? item.memberCount : 0,
|
||||
canManage: item.canManage === true
|
||||
})).filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
rows.value = result
|
||||
.map((item) => ({
|
||||
id: String(item.genealogyId),
|
||||
name: String(item.genealogyName || "未命名家谱"),
|
||||
surname: String(item.surname || ""),
|
||||
location: String(
|
||||
item.regionFullName ||
|
||||
item.regionName ||
|
||||
item.originPlace ||
|
||||
item.addressDetail ||
|
||||
"",
|
||||
),
|
||||
intro: String(item.intro || ""),
|
||||
memberCount: Number.isSafeInteger(item.memberCount)
|
||||
? item.memberCount
|
||||
: 0,
|
||||
canManage: item.canManage === true,
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
state.value = rows.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
state.value = "error";
|
||||
}
|
||||
};
|
||||
const applyToJoin = (item) => openPage("G08", { genealogyId: item.id, genealogyName: item.name }, "G06");
|
||||
const applyToJoin = (item) =>
|
||||
openPage("G08", { genealogyId: item.id, genealogyName: item.name }, "G06");
|
||||
const backToGenealogies = () => returnTo("G01");
|
||||
onLoad(loadGenealogies);
|
||||
onShow(() => { if (state.value !== "loading") loadGenealogies(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onShow(() => {
|
||||
if (state.value !== "loading") loadGenealogies();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.search-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.search-note,.state-card,.genealogy-card{@include adaptive.adaptive-genealogy-state-panel}.search-note{display:flex;min-height:112rpx;flex-direction:column;justify-content:center;padding:20rpx 30rpx}.search-note text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:30rpx;font-weight:700}.search-note text:last-child{margin-top:6rpx;color:$ink-muted;font-size:21rpx}.state-card{display:flex;min-height:310rpx;flex-direction:column;align-items:center;justify-content:center;margin-top:18rpx;padding:42rpx;text-align:center;color:$ink;font-size:28rpx}.state-card .app-button{width:100%;margin-top:22rpx}.result-list{display:flex;flex-direction:column;gap:16rpx;margin-top:18rpx}.genealogy-card{padding:28rpx 32rpx}.card-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18rpx}.card-heading text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:31rpx;font-weight:700;overflow-wrap:anywhere}.card-heading text:last-child{flex:0 0 auto;color:$brand-red;font-size:22rpx}.card-meta,.card-copy{display:block;color:$ink-muted;font-size:22rpx;line-height:1.5}.card-meta{margin-top:10rpx}.card-copy{margin-top:8rpx}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:18rpx;margin-top:20rpx;color:$ink-muted;font-size:21rpx}.card-footer .app-button{min-width:180rpx}@media(max-width:340px){.page-content{padding-right:20rpx;padding-left:20rpx}.card-footer{align-items:flex-start;flex-direction:column}.card-footer .app-button{width:100%}}
|
||||
.search-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.search-note,
|
||||
.state-card,
|
||||
.genealogy-card {
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
}
|
||||
.search-note {
|
||||
display: flex;
|
||||
min-height: 112rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
.search-note text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.search-note text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 310rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 18rpx;
|
||||
padding: 42rpx;
|
||||
text-align: center;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.result-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.genealogy-card {
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.card-heading {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
}
|
||||
.card-heading text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.card-heading text:last-child {
|
||||
flex: 0 0 auto;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.card-meta,
|
||||
.card-copy {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.card-meta {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.card-copy {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
margin-top: 20rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.card-footer .app-button {
|
||||
min-width: 180rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.card-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card-footer .app-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
<template>
|
||||
<view class="join-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="page-header"><PageHeader title="申请加入家谱" custom-back @back="requestBack" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="申请加入家谱" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="!hasValidContext" class="state-card">
|
||||
<text>申请入口无效</text>
|
||||
@@ -17,7 +19,7 @@
|
||||
<view v-else class="join-form">
|
||||
<view class="form-heading">
|
||||
<text>申请加入</text>
|
||||
<text>{{ genealogyName || '当前家谱' }}</text>
|
||||
<text>{{ genealogyName || "当前家谱" }}</text>
|
||||
</view>
|
||||
<view v-for="field in fields" :key="field.key" class="form-field">
|
||||
<text>{{ field.label }}</text>
|
||||
@@ -41,7 +43,12 @@
|
||||
/>
|
||||
</view>
|
||||
<text v-if="error" class="form-error">{{ error }}</text>
|
||||
<AppButton block :disabled="state === 'submitting'" :label="state === 'submitting' ? '正在提交' : '提交申请'" @click="submit" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="state === 'submitting'"
|
||||
:label="state === 'submitting' ? '正在提交' : '提交申请'"
|
||||
@click="submit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog
|
||||
@@ -66,7 +73,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
@@ -75,18 +86,54 @@ const genealogyName = ref("");
|
||||
const state = ref("form");
|
||||
const error = ref("");
|
||||
const discardVisible = ref(false);
|
||||
const form = reactive({ applicantName: "", phone: "", relationDesc: "", applyReason: "", inviterUserId: "" });
|
||||
const form = reactive({
|
||||
applicantName: "",
|
||||
phone: "",
|
||||
relationDesc: "",
|
||||
applyReason: "",
|
||||
inviterUserId: "",
|
||||
});
|
||||
const fields = [
|
||||
{ key: "applicantName", label: "申请人姓名", maxlength: 50, placeholder: "填写您的姓名" },
|
||||
{ key: "phone", label: "手机号", inputType: "number", maxlength: 11, placeholder: "填写联系电话" },
|
||||
{ key: "relationDesc", label: "关系说明", maxlength: 100, placeholder: "例如：本族成员" },
|
||||
{ key: "applyReason", label: "申请理由", multiline: true, maxlength: 500, placeholder: "说明申请加入的原因" },
|
||||
{ key: "inviterUserId", label: "邀请人编号", inputType: "number", maxlength: 20, placeholder: "如有邀请人可填写编号" },
|
||||
{
|
||||
key: "applicantName",
|
||||
label: "申请人姓名",
|
||||
maxlength: 50,
|
||||
placeholder: "填写您的姓名",
|
||||
},
|
||||
{
|
||||
key: "phone",
|
||||
label: "手机号",
|
||||
inputType: "number",
|
||||
maxlength: 11,
|
||||
placeholder: "填写联系电话",
|
||||
},
|
||||
{
|
||||
key: "relationDesc",
|
||||
label: "关系说明",
|
||||
maxlength: 100,
|
||||
placeholder: "例如：本族成员",
|
||||
},
|
||||
{
|
||||
key: "applyReason",
|
||||
label: "申请理由",
|
||||
multiline: true,
|
||||
maxlength: 500,
|
||||
placeholder: "说明申请加入的原因",
|
||||
},
|
||||
{
|
||||
key: "inviterUserId",
|
||||
label: "邀请人编号",
|
||||
inputType: "number",
|
||||
maxlength: 20,
|
||||
placeholder: "如有邀请人可填写编号",
|
||||
},
|
||||
];
|
||||
const controller = createRequestController();
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const dirty = computed(() => Object.values(form).some((value) => value.trim()));
|
||||
const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const confirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
const confirmDiscard = confirmation.confirm;
|
||||
const cancelDiscard = confirmation.cancel;
|
||||
|
||||
@@ -101,7 +148,11 @@ const submit = async () => {
|
||||
state.value = "submitting";
|
||||
error.value = "";
|
||||
try {
|
||||
await appApi.applyToJoin(genealogyId.value, { ...form }, { requestController: controller });
|
||||
await appApi.applyToJoin(
|
||||
genealogyId.value,
|
||||
{ ...form },
|
||||
{ requestController: controller },
|
||||
);
|
||||
state.value = "success";
|
||||
} catch (cause) {
|
||||
if (!isRequestCancelled(cause)) {
|
||||
@@ -110,37 +161,115 @@ const submit = async () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
const requestBack = () => runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: dirty.value && state.value === "form",
|
||||
submitting: state.value === "submitting",
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: dirty.value && state.value === "form",
|
||||
submitting: state.value === "submitting",
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { controller.abort(); confirmation.dispose(); });
|
||||
onUnmounted(() => {
|
||||
controller.abort();
|
||||
confirmation.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.join-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-header, .page-content { z-index: 1; }
|
||||
.page-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.state-card, .join-form { @include adaptive.adaptive-genealogy-state-panel; }
|
||||
.state-card { min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.state-card text { display: block; }
|
||||
.state-card text:first-child, .form-heading text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.state-card .app-button, .join-form .app-button { margin-top: 28rpx; }
|
||||
.join-form { padding: 30rpx; }
|
||||
.form-heading { display: flex; flex-direction: column; gap: 8rpx; padding-bottom: 22rpx; border-bottom: 1rpx solid rgba(128, 89, 49, .24); }
|
||||
.form-heading text:last-child { color: $brand-red; font-size: 24rpx; }
|
||||
.form-field { margin-top: 22rpx; }
|
||||
.form-field > text { display: block; color: $ink; font-size: 24rpx; font-weight: 700; }
|
||||
.form-field input, .form-field textarea { @include adaptive.adaptive-genealogy-form-field; box-sizing: border-box; display: block; width: 100%; margin-top: 10rpx; padding: 16rpx 22rpx; color: $ink; font-size: 24rpx; }
|
||||
.form-field input { min-height: 76rpx; padding-top: 0; padding-bottom: 0; }
|
||||
.form-field textarea { min-height: 120rpx; line-height: 1.55; }
|
||||
.form-error { display: block; margin-top: 16rpx; color: $brand-red; font-size: 22rpx; line-height: 1.45; }
|
||||
.join-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.join-form {
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
}
|
||||
.state-card {
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child,
|
||||
.form-heading text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button,
|
||||
.join-form .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.join-form {
|
||||
padding: 30rpx;
|
||||
}
|
||||
.form-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
padding-bottom: 22rpx;
|
||||
border-bottom: 1rpx solid rgba(128, 89, 49, 0.24);
|
||||
}
|
||||
.form-heading text:last-child {
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.form-field {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.form-field > text {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
@include adaptive.adaptive-genealogy-form-field;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
padding: 16rpx 22rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.form-field input {
|
||||
min-height: 76rpx;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.form-field textarea {
|
||||
min-height: 120rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.form-error {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,12 +2,30 @@
|
||||
<template>
|
||||
<view class="applications-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="page-header"><PageHeader title="我的申请" custom-back @back="returnToGenealogies" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="我的申请" custom-back @back="returnToGenealogies"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取我的申请" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取我的申请</text><AppButton block type="secondary" label="重新加载" @click="loadApplications" /></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>暂无加入申请</text><text>申请记录会直接从服务端读取。</text><AppButton block label="返回我的家谱" @click="returnToGenealogies" /></view>
|
||||
<view v-else class="state-card"><text>已读取 {{ applications.length }} 条申请</text><text>申请详情接口尚未开放，当前不会用本地数据补造申请内容。</text><AppButton block label="返回我的家谱" @click="returnToGenealogies" /></view>
|
||||
<view v-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取我的申请"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取我的申请</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadApplications"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>暂无加入申请</text><text>申请记录会直接从服务端读取。</text
|
||||
><AppButton block label="返回我的家谱" @click="returnToGenealogies"
|
||||
/></view>
|
||||
<view v-else class="state-card"
|
||||
><text>已读取 {{ applications.length }} 条申请</text
|
||||
><text>申请详情接口尚未开放，当前不会用本地数据补造申请内容。</text
|
||||
><AppButton block label="返回我的家谱" @click="returnToGenealogies"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -19,7 +37,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const applications = ref([]);
|
||||
@@ -30,7 +52,9 @@ const loadApplications = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
applications.value = await appApi.getMyJoinApplications({ requestController: controller });
|
||||
applications.value = await appApi.getMyJoinApplications({
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
state.value = applications.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
@@ -40,11 +64,53 @@ const loadApplications = async () => {
|
||||
};
|
||||
const returnToGenealogies = () => returnTo("G01");
|
||||
onLoad(loadApplications);
|
||||
onShow(() => { if (state.value !== "loading") loadApplications(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onShow(() => {
|
||||
if (state.value !== "loading") loadApplications();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.applications-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-genealogy-state-panel}.state-card text{display:block}.state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
.applications-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,13 +2,35 @@
|
||||
<template>
|
||||
<view class="review-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="page-header"><PageHeader title="申请审核" custom-back @back="returnToGenealogies" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="申请审核" custom-back @back="returnToGenealogies"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="!valid" class="state-card"><text>申请审核入口无效</text><AppButton block label="返回我的家谱" @click="returnToGenealogies" /></view>
|
||||
<view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取待审核申请" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取待审核申请</text><AppButton block type="secondary" label="重新加载" @click="loadApplications" /></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>暂无待审核申请</text><text>待审核记录会直接从服务端读取。</text><AppButton block label="返回我的家谱" @click="returnToGenealogies" /></view>
|
||||
<view v-else class="state-card"><text>已读取 {{ applications.length }} 条待审核申请</text><text>审核详情接口尚未开放，当前不会用本地数据补造申请内容或审核结果。</text><AppButton block label="返回我的家谱" @click="returnToGenealogies" /></view>
|
||||
<view v-if="!valid" class="state-card"
|
||||
><text>申请审核入口无效</text
|
||||
><AppButton block label="返回我的家谱" @click="returnToGenealogies"
|
||||
/></view>
|
||||
<view v-else-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取待审核申请"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取待审核申请</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadApplications"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>暂无待审核申请</text><text>待审核记录会直接从服务端读取。</text
|
||||
><AppButton block label="返回我的家谱" @click="returnToGenealogies"
|
||||
/></view>
|
||||
<view v-else class="state-card"
|
||||
><text>已读取 {{ applications.length }} 条待审核申请</text
|
||||
><text
|
||||
>审核详情接口尚未开放，当前不会用本地数据补造申请内容或审核结果。</text
|
||||
><AppButton block label="返回我的家谱" @click="returnToGenealogies"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -20,7 +42,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -34,7 +60,10 @@ const loadApplications = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
applications.value = await appApi.getPendingApplications(genealogyId.value, { requestController: controller });
|
||||
applications.value = await appApi.getPendingApplications(
|
||||
genealogyId.value,
|
||||
{ requestController: controller },
|
||||
);
|
||||
if (!active) return;
|
||||
state.value = applications.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
@@ -43,12 +72,57 @@ const loadApplications = async () => {
|
||||
}
|
||||
};
|
||||
const returnToGenealogies = () => returnTo("G01");
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadApplications(); });
|
||||
onShow(() => { if (valid.value && state.value !== "loading") loadApplications(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (valid.value) loadApplications();
|
||||
});
|
||||
onShow(() => {
|
||||
if (valid.value && state.value !== "loading") loadApplications();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.review-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-genealogy-state-panel}.state-card text{display:block}.state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
.review-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,58 +2,132 @@
|
||||
<template>
|
||||
<view class="settings-page" :class="`settings-state--${pageState}`">
|
||||
<GenealogyPageBackground />
|
||||
<view class="page-header"><PageHeader title="家谱设置" custom-back @back="returnToOverview" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="家谱设置" custom-back @back="returnToOverview"
|
||||
/></view>
|
||||
|
||||
<view class="page-content">
|
||||
<AppLoading v-if="pageState === 'loading'" text="正在读取家谱设置" description="请稍候，正在同步当前家谱信息。" />
|
||||
<AppLoading
|
||||
v-if="pageState === 'loading'"
|
||||
text="正在读取家谱设置"
|
||||
description="请稍候，正在同步当前家谱信息。"
|
||||
/>
|
||||
|
||||
<view v-else-if="pageState === 'form'" class="settings-card">
|
||||
<text class="settings-card__title">编辑家谱信息</text>
|
||||
<text class="settings-card__note">带红色星号的内容不能为空；其余内容可按需要补充。</text>
|
||||
<text class="settings-card__note"
|
||||
>带红色星号的内容不能为空；其余内容可按需要补充。</text
|
||||
>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>姓氏</text>
|
||||
<input v-model="form.surname" maxlength="4" placeholder="请输入姓氏" placeholder-class="placeholder" @input="clearFieldError('surname')" />
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>姓氏</text
|
||||
>
|
||||
<input
|
||||
v-model="form.surname"
|
||||
maxlength="4"
|
||||
placeholder="请输入姓氏"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('surname')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.surname" class="field-error">{{ fieldErrors.surname }}</text>
|
||||
<text v-if="fieldErrors.surname" class="field-error">{{
|
||||
fieldErrors.surname
|
||||
}}</text>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>谱名</text>
|
||||
<input v-model="form.genealogyName" maxlength="24" placeholder="请输入家谱名称" placeholder-class="placeholder" @input="clearFieldError('genealogyName')" />
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>谱名</text
|
||||
>
|
||||
<input
|
||||
v-model="form.genealogyName"
|
||||
maxlength="24"
|
||||
placeholder="请输入家谱名称"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearFieldError('genealogyName')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.genealogyName" class="field-error">{{ fieldErrors.genealogyName }}</text>
|
||||
<text v-if="fieldErrors.genealogyName" class="field-error">{{
|
||||
fieldErrors.genealogyName
|
||||
}}</text>
|
||||
|
||||
<view class="field-row field-row--selector" @click="openRegionPicker">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>所在地区</text>
|
||||
<text class="region-selector-value" :class="{ 'region-selector-value--placeholder': !regionDisplay }">{{ regionDisplay || (regionLoading ? '正在加载地区…' : (regionPickerError || '请选择所在地区')) }}</text>
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>所在地区</text
|
||||
>
|
||||
<text
|
||||
class="region-selector-value"
|
||||
:class="{ 'region-selector-value--placeholder': !regionDisplay }"
|
||||
>{{
|
||||
regionDisplay ||
|
||||
(regionLoading
|
||||
? "正在加载地区…"
|
||||
: regionPickerError || "请选择所在地区")
|
||||
}}</text
|
||||
>
|
||||
</view>
|
||||
<text v-if="fieldErrors.regionCode" class="field-error">{{ fieldErrors.regionCode }}</text>
|
||||
<text v-if="fieldErrors.regionCode" class="field-error">{{
|
||||
fieldErrors.regionCode
|
||||
}}</text>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">堂号</text>
|
||||
<input v-model="form.ancestralHall" maxlength="12" placeholder="请输入堂号" placeholder-class="placeholder" />
|
||||
<input
|
||||
v-model="form.ancestralHall"
|
||||
maxlength="12"
|
||||
placeholder="请输入堂号"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">所在地</text>
|
||||
<input v-model="form.originPlace" maxlength="30" placeholder="请输入所在地" placeholder-class="placeholder" />
|
||||
<input
|
||||
v-model="form.originPlace"
|
||||
maxlength="30"
|
||||
placeholder="请输入所在地"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">详细地址</text>
|
||||
<input v-model="form.addressDetail" maxlength="60" placeholder="请输入详细地址" placeholder-class="placeholder" />
|
||||
<input
|
||||
v-model="form.addressDetail"
|
||||
maxlength="60"
|
||||
placeholder="请输入详细地址"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="intro-field">
|
||||
<text class="intro-field__label">家谱简介</text>
|
||||
<textarea v-model="form.intro" maxlength="200" auto-height placeholder="记录家谱缘由、迁徙或家训" placeholder-class="placeholder" />
|
||||
<textarea
|
||||
v-model="form.intro"
|
||||
maxlength="200"
|
||||
auto-height
|
||||
placeholder="记录家谱缘由、迁徙或家训"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="cover-field">
|
||||
<view>
|
||||
<text class="cover-field__label">封面图片</text>
|
||||
<text class="cover-field__hint">{{ coverOssId ? '当前已关联封面；重新选择后会以新的真实上传回执更新。' : '选择图片后会取得真实上传回执，并在保存时关联。' }}</text>
|
||||
<text class="cover-field__hint">{{
|
||||
coverOssId
|
||||
? "当前已关联封面；重新选择后会以新的真实上传回执更新。"
|
||||
: "选择图片后会取得真实上传回执，并在保存时关联。"
|
||||
}}</text>
|
||||
</view>
|
||||
<button class="upload-button" :disabled="isUploading || isSubmitting" @click="uploadCover">{{ isUploading ? '上传中…' : '选择图片' }}</button>
|
||||
<text v-if="coverFileName" class="upload-receipt">已上传：{{ coverFileName }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="isUploading || isSubmitting"
|
||||
@click="uploadCover"
|
||||
>
|
||||
{{ isUploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="coverFileName" class="upload-receipt"
|
||||
>已上传：{{ coverFileName }}</text
|
||||
>
|
||||
</view>
|
||||
<text v-if="uploadError" class="field-error">{{ uploadError }}</text>
|
||||
|
||||
@@ -64,14 +138,23 @@
|
||||
v-for="option in GENEALOGY_ACCESS_PRESET_OPTIONS"
|
||||
:key="option.value"
|
||||
class="access-rule__option"
|
||||
:class="{ 'access-rule__option--active': form.accessPreset === option.value }"
|
||||
:class="{
|
||||
'access-rule__option--active':
|
||||
form.accessPreset === option.value,
|
||||
}"
|
||||
@click="form.accessPreset = option.value"
|
||||
>{{ option.label }}</view>
|
||||
>{{ option.label }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text v-if="submitError" class="submit-error">{{ submitError }}</text>
|
||||
<AppButton block :disabled="isSubmitting || isUploading" :label="isSubmitting ? '正在保存…' : '保存设置'" @click="submitUpdate" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="isSubmitting || isUploading"
|
||||
:label="isSubmitting ? '正在保存…' : '保存设置'"
|
||||
@click="submitUpdate"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-else class="state-card">
|
||||
@@ -84,20 +167,48 @@
|
||||
<view v-if="regionPickerOpen" class="region-sheet">
|
||||
<view class="region-sheet__mask" @click="closeRegionPicker" />
|
||||
<view class="region-sheet__panel">
|
||||
<view class="region-sheet__intro"><text class="region-sheet__title">选择地区</text></view>
|
||||
<view class="region-sheet__intro"
|
||||
><text class="region-sheet__title">选择地区</text></view
|
||||
>
|
||||
<view class="region-sheet__picker">
|
||||
<view class="region-sheet__column-headings">
|
||||
<text v-for="label in ['省份', '城市', '区县']" :key="label" class="region-sheet__column-heading">{{ label }}</text>
|
||||
<text
|
||||
v-for="label in ['省份', '城市', '区县']"
|
||||
:key="label"
|
||||
class="region-sheet__column-heading"
|
||||
>{{ label }}</text
|
||||
>
|
||||
</view>
|
||||
<picker-view class="region-sheet__picker-view" :indicator-style="regionPickerIndicatorStyle" :value="regionPickerIndexes" @change="handleRegionPickerChange">
|
||||
<picker-view-column v-for="(column, columnIndex) in regionPickerColumns" :key="columnIndex">
|
||||
<view v-for="(option, optionIndex) in column" :key="option.regionCode" class="region-sheet__picker-item" :class="{ 'region-sheet__picker-item--selected': regionPickerIndexes[columnIndex] === optionIndex }">{{ option.label }}</view>
|
||||
<picker-view
|
||||
class="region-sheet__picker-view"
|
||||
:indicator-style="regionPickerIndicatorStyle"
|
||||
:value="regionPickerIndexes"
|
||||
@change="handleRegionPickerChange"
|
||||
>
|
||||
<picker-view-column
|
||||
v-for="(column, columnIndex) in regionPickerColumns"
|
||||
:key="columnIndex"
|
||||
>
|
||||
<view
|
||||
v-for="(option, optionIndex) in column"
|
||||
:key="option.regionCode"
|
||||
class="region-sheet__picker-item"
|
||||
:class="{
|
||||
'region-sheet__picker-item--selected':
|
||||
regionPickerIndexes[columnIndex] === optionIndex,
|
||||
}"
|
||||
>{{ option.label }}</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<view class="region-sheet__footer">
|
||||
<view class="region-sheet__cancel" @click="closeRegionPicker">取消</view>
|
||||
<button class="region-sheet__confirm" @click="confirmRegionSelection">确认选择</button>
|
||||
<view class="region-sheet__cancel" @click="closeRegionPicker"
|
||||
>取消</view
|
||||
>
|
||||
<button class="region-sheet__confirm" @click="confirmRegionSelection">
|
||||
确认选择
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -111,9 +222,20 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { GENEALOGY_ACCESS_PRESET, GENEALOGY_ACCESS_PRESET_OPTIONS, toApiGenealogyAccess } from "@/utils/genealogy-contracts.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
GENEALOGY_ACCESS_PRESET,
|
||||
GENEALOGY_ACCESS_PRESET_OPTIONS,
|
||||
toApiGenealogyAccess,
|
||||
} from "@/utils/genealogy-contracts.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -127,7 +249,11 @@ const form = reactive({
|
||||
intro: "",
|
||||
accessPreset: GENEALOGY_ACCESS_PRESET.MEMBER_ONLY,
|
||||
});
|
||||
const fieldErrors = reactive({ surname: "", genealogyName: "", regionCode: "" });
|
||||
const fieldErrors = reactive({
|
||||
surname: "",
|
||||
genealogyName: "",
|
||||
regionCode: "",
|
||||
});
|
||||
const submitError = ref("");
|
||||
const isSubmitting = ref(false);
|
||||
const isUploading = ref(false);
|
||||
@@ -143,7 +269,8 @@ const regionPickerIndexes = ref([0]);
|
||||
const regionPickerError = ref("");
|
||||
const regionLoading = ref(false);
|
||||
const regionPickerOpen = ref(false);
|
||||
const regionPickerIndicatorStyle = "height: 104rpx; border-top: 1px solid rgba(159, 23, 15, .46); border-bottom: 1px solid rgba(159, 23, 15, .46); background: rgba(159, 23, 15, .08);";
|
||||
const regionPickerIndicatorStyle =
|
||||
"height: 104rpx; border-top: 1px solid rgba(159, 23, 15, .46); border-bottom: 1px solid rgba(159, 23, 15, .46); background: rgba(159, 23, 15, .08);";
|
||||
const controller = createRequestController();
|
||||
let pageActive = true;
|
||||
|
||||
@@ -155,12 +282,24 @@ const regionDisplay = computed(() =>
|
||||
);
|
||||
const stateCopy = computed(() => {
|
||||
if (pageState.value === "success") {
|
||||
return { title: "家谱设置已保存", copy: "服务端已返回成功结果。", action: "返回家谱总览" };
|
||||
return {
|
||||
title: "家谱设置已保存",
|
||||
copy: "服务端已返回成功结果。",
|
||||
action: "返回家谱总览",
|
||||
};
|
||||
}
|
||||
if (!hasValidContext.value) {
|
||||
return { title: "家谱入口无效", copy: "没有取得有效家谱标识。", action: "返回上一页" };
|
||||
return {
|
||||
title: "家谱入口无效",
|
||||
copy: "没有取得有效家谱标识。",
|
||||
action: "返回上一页",
|
||||
};
|
||||
}
|
||||
return { title: "家谱设置暂时无法读取", copy: "请检查网络后重新读取。", action: "重新读取" };
|
||||
return {
|
||||
title: "家谱设置暂时无法读取",
|
||||
copy: "请检查网络后重新读取。",
|
||||
action: "重新读取",
|
||||
};
|
||||
});
|
||||
|
||||
const clearFieldError = (field) => {
|
||||
@@ -170,17 +309,27 @@ const clearFieldError = (field) => {
|
||||
const validate = () => {
|
||||
fieldErrors.surname = form.surname.trim() ? "" : "请填写姓氏";
|
||||
fieldErrors.genealogyName = form.genealogyName.trim() ? "" : "请填写谱名";
|
||||
fieldErrors.regionCode = (selectedRegion.value?.regionCode || currentRegionCode.value) ? "" : "请选择所在地区";
|
||||
return !fieldErrors.surname && !fieldErrors.genealogyName && !fieldErrors.regionCode;
|
||||
fieldErrors.regionCode =
|
||||
selectedRegion.value?.regionCode || currentRegionCode.value
|
||||
? ""
|
||||
: "请选择所在地区";
|
||||
return (
|
||||
!fieldErrors.surname &&
|
||||
!fieldErrors.genealogyName &&
|
||||
!fieldErrors.regionCode
|
||||
);
|
||||
};
|
||||
|
||||
const fetchRegionChildren = async (parentCode) => {
|
||||
regionLoading.value = true;
|
||||
regionPickerError.value = "";
|
||||
try {
|
||||
return await appApi.getRegionChildren(parentCode, { requestController: controller });
|
||||
return await appApi.getRegionChildren(parentCode, {
|
||||
requestController: controller,
|
||||
});
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) regionPickerError.value = error?.message || "地区列表加载失败，请重试";
|
||||
if (!isRequestCancelled(error))
|
||||
regionPickerError.value = error?.message || "地区列表加载失败，请重试";
|
||||
return [];
|
||||
} finally {
|
||||
regionLoading.value = false;
|
||||
@@ -188,7 +337,8 @@ const fetchRegionChildren = async (parentCode) => {
|
||||
};
|
||||
|
||||
const loadPickerColumns = async (provinceIndex = 0, cityIndex = 0) => {
|
||||
const provinces = regionPickerColumns.value[0] || await fetchRegionChildren("0");
|
||||
const provinces =
|
||||
regionPickerColumns.value[0] || (await fetchRegionChildren("0"));
|
||||
const province = provinces[provinceIndex];
|
||||
if (!province) return;
|
||||
const cities = await fetchRegionChildren(province.regionCode);
|
||||
@@ -215,7 +365,9 @@ const loadRegionRoot = async () => {
|
||||
|
||||
const handleRegionPickerChange = async (event) => {
|
||||
if (regionLoading.value) return;
|
||||
const nextIndexes = (event?.detail?.value || []).map((index) => Number(index) || 0);
|
||||
const nextIndexes = (event?.detail?.value || []).map(
|
||||
(index) => Number(index) || 0,
|
||||
);
|
||||
const indexes = regionPickerIndexes.value;
|
||||
const provinceIndex = nextIndexes[0] || 0;
|
||||
const cityIndex = nextIndexes[1] || 0;
|
||||
@@ -236,9 +388,13 @@ const openRegionPicker = async () => {
|
||||
if (!regionPickerColumns.value.length) await loadRegionRoot();
|
||||
if (regionPickerColumns.value.length) regionPickerOpen.value = true;
|
||||
};
|
||||
const closeRegionPicker = () => { regionPickerOpen.value = false; };
|
||||
const closeRegionPicker = () => {
|
||||
regionPickerOpen.value = false;
|
||||
};
|
||||
const confirmRegionSelection = () => {
|
||||
const trail = regionPickerColumns.value.map((column, index) => column[Number(regionPickerIndexes.value[index])]).filter(Boolean);
|
||||
const trail = regionPickerColumns.value
|
||||
.map((column, index) => column[Number(regionPickerIndexes.value[index])])
|
||||
.filter(Boolean);
|
||||
const region = trail[trail.length - 1];
|
||||
if (!region) return;
|
||||
selectedRegion.value = region;
|
||||
@@ -256,7 +412,9 @@ const loadSettings = async () => {
|
||||
}
|
||||
pageState.value = "loading";
|
||||
try {
|
||||
const settings = await appApi.getGenealogySettings(genealogyId.value, { requestController: controller });
|
||||
const settings = await appApi.getGenealogySettings(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!pageActive) return;
|
||||
Object.assign(form, {
|
||||
surname: settings.surname,
|
||||
@@ -265,7 +423,8 @@ const loadSettings = async () => {
|
||||
originPlace: settings.originPlace,
|
||||
addressDetail: settings.addressDetail,
|
||||
intro: settings.intro,
|
||||
accessPreset: settings.accessPreset || GENEALOGY_ACCESS_PRESET.MEMBER_ONLY,
|
||||
accessPreset:
|
||||
settings.accessPreset || GENEALOGY_ACCESS_PRESET.MEMBER_ONLY,
|
||||
});
|
||||
currentRegionCode.value = settings.regionCode;
|
||||
currentRegionDisplay.value = settings.regionFullName || settings.regionName;
|
||||
@@ -287,7 +446,11 @@ const uploadCover = async () => {
|
||||
coverOssId.value = receipt.ossId;
|
||||
coverFileName.value = receipt.fileName || "封面图片";
|
||||
} catch (error) {
|
||||
if (pageActive && !isImagePickCancelled(error) && !isRequestCancelled(error)) {
|
||||
if (
|
||||
pageActive &&
|
||||
!isImagePickCancelled(error) &&
|
||||
!isRequestCancelled(error)
|
||||
) {
|
||||
uploadError.value = error?.message || "封面图片上传失败，请稍后重试";
|
||||
}
|
||||
} finally {
|
||||
@@ -305,17 +468,21 @@ const submitUpdate = async () => {
|
||||
isSubmitting.value = true;
|
||||
submitError.value = "";
|
||||
try {
|
||||
await appApi.updateGenealogy(genealogyId.value, {
|
||||
surname: form.surname,
|
||||
genealogyName: form.genealogyName,
|
||||
regionCode: selectedRegion.value?.regionCode || currentRegionCode.value,
|
||||
ancestralHall: form.ancestralHall,
|
||||
originPlace: form.originPlace,
|
||||
addressDetail: form.addressDetail,
|
||||
intro: form.intro,
|
||||
...(coverOssId.value ? { coverOssId: coverOssId.value } : {}),
|
||||
...access,
|
||||
}, { requestController: controller });
|
||||
await appApi.updateGenealogy(
|
||||
genealogyId.value,
|
||||
{
|
||||
surname: form.surname,
|
||||
genealogyName: form.genealogyName,
|
||||
regionCode: selectedRegion.value?.regionCode || currentRegionCode.value,
|
||||
ancestralHall: form.ancestralHall,
|
||||
originPlace: form.originPlace,
|
||||
addressDetail: form.addressDetail,
|
||||
intro: form.intro,
|
||||
...(coverOssId.value ? { coverOssId: coverOssId.value } : {}),
|
||||
...access,
|
||||
},
|
||||
{ requestController: controller },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
pageState.value = "success";
|
||||
} catch (error) {
|
||||
@@ -326,11 +493,19 @@ const submitUpdate = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const returnToOverview = () => hasValidContext.value ? returnTo("G05", { genealogyId: genealogyId.value }) : goBack();
|
||||
const handleStateAction = () => pageState.value === "success" ? returnToOverview() : loadSettings();
|
||||
const returnToOverview = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("G05", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const handleStateAction = () =>
|
||||
pageState.value === "success" ? returnToOverview() : loadSettings();
|
||||
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); });
|
||||
onMounted(() => { void loadSettings(); });
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
});
|
||||
onMounted(() => {
|
||||
void loadSettings();
|
||||
});
|
||||
onUnload(() => {
|
||||
pageActive = false;
|
||||
controller.abort();
|
||||
@@ -340,54 +515,305 @@ onUnload(() => {
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.settings-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-header, .page-content { z-index: 1; }
|
||||
.page-content { flex: 1; padding: 24rpx 32rpx 72rpx; }
|
||||
.settings-card, .state-card { @include adaptive.adaptive-genealogy-state-panel; box-sizing: border-box; }
|
||||
.settings-card { padding: 42rpx 38rpx; }
|
||||
.settings-card__title, .settings-card__note, .field-error, .submit-error { display: block; }
|
||||
.settings-card__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 40rpx; font-weight: 700; }
|
||||
.settings-card__note { margin-top: 12rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.55; }
|
||||
.field-row { display: flex; min-height: 100rpx; align-items: center; margin-top: 22rpx; padding: 0 20rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.field-row__label { width: 142rpx; flex: 0 0 auto; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }
|
||||
.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; line-height: 1; transform: translateY(-3rpx); }
|
||||
.field-row input { min-width: 0; flex: 1; color: $ink; font-size: 28rpx; }
|
||||
.field-row--selector { justify-content: space-between; cursor: pointer; }
|
||||
.region-selector-value { min-width: 0; flex: 1; color: $ink; font-size: 28rpx; text-align: right; overflow-wrap: anywhere; }
|
||||
.region-selector-value--placeholder, .placeholder { color: #ab9a86; }
|
||||
.intro-field, .cover-field { margin-top: 22rpx; padding: 20rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; background: rgba(255, 252, 245, .7); }
|
||||
.intro-field__label, .cover-field__label { display: block; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }
|
||||
.intro-field textarea { display: block; width: 100%; min-height: 120rpx; margin-top: 14rpx; color: $ink; font-size: 27rpx; line-height: 1.55; }
|
||||
.cover-field { display: grid; gap: 12rpx; }
|
||||
.cover-field__hint { display: block; margin-top: 6rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; }
|
||||
.upload-button { justify-self: start; min-height: 60rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.upload-receipt { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
|
||||
.field-error, .submit-error { margin-top: 10rpx; color: $brand-red; font-size: 24rpx; line-height: 1.5; }
|
||||
.access-rule { margin-top: 28rpx; }
|
||||
.access-rule__label { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 31rpx; font-weight: 700; }
|
||||
.access-rule__options { display: flex; margin-top: 16rpx; gap: 16rpx; }
|
||||
.access-rule__option { flex: 1; padding: 20rpx 12rpx; border: 1rpx solid rgba(128, 89, 49, .34); border-radius: 12rpx; color: $ink-muted; font-size: 25rpx; text-align: center; }
|
||||
.access-rule__option--active { border-color: $brand-red; background: rgba(159, 23, 15, .07); color: $brand-red; font-weight: 700; }
|
||||
.settings-card .app-button { margin-top: 32rpx; }
|
||||
.state-card { min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.state-card text { display: block; }
|
||||
.state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.state-card .app-button { margin-top: 28rpx; }
|
||||
.region-sheet { position: fixed; z-index: 10; inset: 0; display: flex; align-items: flex-end; }
|
||||
.region-sheet__mask { position: absolute; inset: 0; background: rgba(43, 30, 20, .42); }
|
||||
.region-sheet__panel { width: 100%; padding: 22rpx 28rpx calc(24rpx + env(safe-area-inset-bottom)); border-radius: 30rpx 30rpx 0 0; background: #fdf9ef; box-shadow: 0 -12rpx 36rpx rgba(43, 30, 20, .2); }
|
||||
.region-sheet__intro { padding: 0 10rpx 16rpx; text-align: center; }
|
||||
.region-sheet__title { display: block; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 36rpx; font-weight: 700; }
|
||||
.region-sheet__picker { border: 1rpx solid rgba(128, 89, 49, .28); border-radius: 16rpx; background: rgba(255, 252, 245, .8); }
|
||||
.region-sheet__column-headings { display: flex; height: 84rpx; border-bottom: 1rpx solid rgba(128, 89, 49, .18); }
|
||||
.region-sheet__column-heading { box-sizing: border-box; width: 33.333%; padding: 24rpx 12rpx; color: $ink-muted; font-size: 26rpx; text-align: center; }
|
||||
.region-sheet__column-heading + .region-sheet__column-heading { border-left: 1rpx solid rgba(128, 89, 49, .16); }
|
||||
.region-sheet__picker-view { width: 100%; height: 520rpx; }
|
||||
.region-sheet__picker-item { box-sizing: border-box; height: 104rpx; padding: 0 6rpx; color: $ink-muted; font-size: 26rpx; line-height: 104rpx; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.region-sheet__picker-item--selected { color: $brand-red; font-weight: 700; }
|
||||
.region-sheet__footer { display: flex; align-items: center; margin-top: 22rpx; gap: 12rpx; }
|
||||
.region-sheet__cancel { min-width: 116rpx; padding: 20rpx 10rpx; color: $ink-muted; font-size: 28rpx; text-align: center; }
|
||||
.region-sheet__confirm { flex: 1; height: 82rpx; margin: 0; padding: 0; border: 0; border-radius: 10rpx; background: $brand-red; color: #fff; font-size: 29rpx; font-weight: 700; line-height: 82rpx; }
|
||||
.region-sheet__confirm::after { display: none; }
|
||||
.settings-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 24rpx 32rpx 72rpx;
|
||||
}
|
||||
.settings-card,
|
||||
.state-card {
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.settings-card {
|
||||
padding: 42rpx 38rpx;
|
||||
}
|
||||
.settings-card__title,
|
||||
.settings-card__note,
|
||||
.field-error,
|
||||
.submit-error {
|
||||
display: block;
|
||||
}
|
||||
.settings-card__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.settings-card__note {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.field-row {
|
||||
display: flex;
|
||||
min-height: 100rpx;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.field-row__label {
|
||||
width: 142rpx;
|
||||
flex: 0 0 auto;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.field-row input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.field-row--selector {
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
.region-selector-value {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.region-selector-value--placeholder,
|
||||
.placeholder {
|
||||
color: #ab9a86;
|
||||
}
|
||||
.intro-field,
|
||||
.cover-field {
|
||||
margin-top: 22rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.intro-field__label,
|
||||
.cover-field__label {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.intro-field textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
margin-top: 14rpx;
|
||||
color: $ink;
|
||||
font-size: 27rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.cover-field {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.cover-field__hint {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 60rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.field-error,
|
||||
.submit-error {
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.access-rule {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.access-rule__label {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.access-rule__options {
|
||||
display: flex;
|
||||
margin-top: 16rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.access-rule__option {
|
||||
flex: 1;
|
||||
padding: 20rpx 12rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 25rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.access-rule__option--active {
|
||||
border-color: $brand-red;
|
||||
background: rgba(159, 23, 15, 0.07);
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.settings-card .app-button {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.state-card {
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.region-sheet {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.region-sheet__mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(43, 30, 20, 0.42);
|
||||
}
|
||||
.region-sheet__panel {
|
||||
width: 100%;
|
||||
padding: 22rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fdf9ef;
|
||||
box-shadow: 0 -12rpx 36rpx rgba(43, 30, 20, 0.2);
|
||||
}
|
||||
.region-sheet__intro {
|
||||
padding: 0 10rpx 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.region-sheet__title {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.region-sheet__picker {
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.28);
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 252, 245, 0.8);
|
||||
}
|
||||
.region-sheet__column-headings {
|
||||
display: flex;
|
||||
height: 84rpx;
|
||||
border-bottom: 1rpx solid rgba(128, 89, 49, 0.18);
|
||||
}
|
||||
.region-sheet__column-heading {
|
||||
box-sizing: border-box;
|
||||
width: 33.333%;
|
||||
padding: 24rpx 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.region-sheet__column-heading + .region-sheet__column-heading {
|
||||
border-left: 1rpx solid rgba(128, 89, 49, 0.16);
|
||||
}
|
||||
.region-sheet__picker-view {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
}
|
||||
.region-sheet__picker-item {
|
||||
box-sizing: border-box;
|
||||
height: 104rpx;
|
||||
padding: 0 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 26rpx;
|
||||
line-height: 104rpx;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.region-sheet__picker-item--selected {
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.region-sheet__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.region-sheet__cancel {
|
||||
min-width: 116rpx;
|
||||
padding: 20rpx 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.region-sheet__confirm {
|
||||
flex: 1;
|
||||
height: 82rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 10rpx;
|
||||
background: $brand-red;
|
||||
color: #fff;
|
||||
font-size: 29rpx;
|
||||
font-weight: 700;
|
||||
line-height: 82rpx;
|
||||
}
|
||||
.region-sheet__confirm::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,67 +3,145 @@
|
||||
<view class="poem-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="poem-page__header">
|
||||
<PageHeader :title="pageTitle" :action="poemState === 'list' || poemState === 'empty' ? '维护' : ''" custom-back @action="enterManagement" @back="requestBack" />
|
||||
<PageHeader
|
||||
:title="pageTitle"
|
||||
:action="poemState === 'list' || poemState === 'empty' ? '维护' : ''"
|
||||
custom-back
|
||||
@action="enterManagement"
|
||||
@back="requestBack"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="poem-panel" :class="`poem-state--${poemState}`">
|
||||
<AppLoading v-if="poemState === 'loading'" text="正在读取字辈诗" description="正在整理家谱的传承字序。" />
|
||||
<AppLoading
|
||||
v-if="poemState === 'loading'"
|
||||
text="正在读取字辈诗"
|
||||
description="正在整理家谱的传承字序。"
|
||||
/>
|
||||
|
||||
<view v-else-if="poemState === 'list'" class="poem-list">
|
||||
<text class="poem-list__eyebrow">{{ genealogyName }} · 传承字序</text>
|
||||
<text class="poem-list__title">{{ generationRangeTitle }}</text>
|
||||
<text class="poem-list__copy">按已记录的世代和字辈展示传承字序。</text>
|
||||
<view class="poem-rows">
|
||||
<view v-for="item in visiblePoemRows" :key="item.poemId" class="poem-row" :class="{ 'poem-row--disabled': item.status === GENERATION_POEM_STATUS.DISABLED }">
|
||||
<view
|
||||
v-for="item in visiblePoemRows"
|
||||
:key="item.poemId"
|
||||
class="poem-row"
|
||||
:class="{
|
||||
'poem-row--disabled':
|
||||
item.status === GENERATION_POEM_STATUS.DISABLED,
|
||||
}"
|
||||
>
|
||||
<text class="poem-row__number">第 {{ item.generationNo }} 世</text>
|
||||
<text class="poem-row__character">{{ item.generationText }}</text>
|
||||
<text class="poem-row__status">{{ item.status === GENERATION_POEM_STATUS.DISABLED ? '已停用·记录保留' : '传承字序' }}</text>
|
||||
<text class="poem-row__status">{{
|
||||
item.status === GENERATION_POEM_STATUS.DISABLED
|
||||
? "已停用·记录保留"
|
||||
: "传承字序"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="remainingPoemCount > 0" class="poem-load-more" @click="loadMorePoems">
|
||||
<view
|
||||
v-if="remainingPoemCount > 0"
|
||||
class="poem-load-more"
|
||||
@click="loadMorePoems"
|
||||
>
|
||||
<text>继续加载后续字辈（剩余 {{ remainingPoemCount }} 代）</text>
|
||||
</view>
|
||||
<view class="poem-action" @click="enterManagement">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ canManage ? '继续维护字辈诗' : '读取维护列表' }}</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>{{ canManage ? "继续维护字辈诗" : "读取维护列表" }}</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">
|
||||
<text>字辈内容</text>
|
||||
<textarea v-model="poemDraft" auto-height :maxlength="MAX_GENERATION_POEM_INPUT_LENGTH" placeholder="例如：启宗敦本，或 克勤 克俭 承先 启后" placeholder-class="poem-placeholder" @input="invalidatePreview" />
|
||||
<textarea
|
||||
v-model="poemDraft"
|
||||
auto-height
|
||||
:maxlength="MAX_GENERATION_POEM_INPUT_LENGTH"
|
||||
placeholder="例如：启宗敦本，或 克勤 克俭 承先 启后"
|
||||
placeholder-class="poem-placeholder"
|
||||
@input="invalidatePreview"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="poemError" class="poem-field-error">{{ poemError }}</text>
|
||||
<view class="poem-policy">
|
||||
<text>未被新文本覆盖的后续世代</text>
|
||||
<view class="poem-policy__option" @click="toggleDisableMissing">
|
||||
<image :src="disableMissing ? '/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': disableMissing }">{{ disableMissing ? '停用并保留记录' : '保持原状态' }}</text>
|
||||
<image
|
||||
:src="
|
||||
disableMissing
|
||||
? '/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': disableMissing }"
|
||||
>{{ disableMissing ? "停用并保留记录" : "保持原状态" }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text class="poem-preview">{{ previewSummary }}</text>
|
||||
<view class="poem-editor__actions">
|
||||
<view class="poem-action" @click="requestLeaveEditor">
|
||||
<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" :class="{ 'poem-action--disabled': previewing || saving }" @click="previewPoems">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="poem-action__secondary">{{ previewing ? '正在预览' : '服务端预览' }}</text>
|
||||
<view
|
||||
class="poem-action"
|
||||
:class="{ 'poem-action--disabled': previewing || saving }"
|
||||
@click="previewPoems"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text class="poem-action__secondary">{{
|
||||
previewing ? "正在预览" : "服务端预览"
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="poem-action" :class="{ 'poem-action--disabled': !canSave || saving }" @click="savePoems">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ saving ? '正在保存' : '保存字辈' }}</text>
|
||||
<view
|
||||
class="poem-action"
|
||||
:class="{ 'poem-action--disabled': !canSave || saving }"
|
||||
@click="savePoems"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>{{ saving ? "正在保存" : "保存字辈" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="poem-state-card">
|
||||
<text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : '字辈暂不可用' }}</text>
|
||||
<text class="poem-list__title">{{ poemState === 'empty' ? '当前读取没有正常状态字辈' : '暂时无法读取字辈诗' }}</text>
|
||||
<text class="poem-list__eyebrow">{{
|
||||
poemState === "empty" ? "尚未建立字辈" : "字辈暂不可用"
|
||||
}}</text>
|
||||
<text class="poem-list__title">{{
|
||||
poemState === "empty"
|
||||
? "当前读取没有正常状态字辈"
|
||||
: "暂时无法读取字辈诗"
|
||||
}}</text>
|
||||
<text class="poem-list__copy">{{ stateCopy }}</text>
|
||||
<view class="poem-action" @click="handleStateAction">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ poemState === 'empty' ? '读取维护列表' : '重新读取' }}</text>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/><text>{{
|
||||
poemState === "empty" ? "读取维护列表" : "重新读取"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -79,7 +157,9 @@
|
||||
@confirm="confirmDiscard"
|
||||
@cancel="cancelDiscard"
|
||||
/>
|
||||
<view v-if="feedbackMessage" class="poem-feedback"><text>{{ feedbackMessage }}</text></view>
|
||||
<view v-if="feedbackMessage" class="poem-feedback"
|
||||
><text>{{ feedbackMessage }}</text></view
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -91,7 +171,11 @@ import AppLoading from "@/components/AppLoading.vue";
|
||||
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
MAX_GENERATION_POEM_INPUT_LENGTH,
|
||||
GENERATION_POEM_STATUS,
|
||||
@@ -119,32 +203,46 @@ const previewSignature = ref("");
|
||||
const requestController = createRequestController();
|
||||
let requestSequence = 0;
|
||||
|
||||
const visiblePoemRows = computed(() => poemRows.value.slice(0, visiblePoemCount.value));
|
||||
const remainingPoemCount = computed(() => Math.max(0, poemRows.value.length - visiblePoemCount.value));
|
||||
const pageTitle = computed(() => poemState.value === "edit" ? "维护字辈诗" : "字辈诗");
|
||||
const visiblePoemRows = computed(() =>
|
||||
poemRows.value.slice(0, visiblePoemCount.value),
|
||||
);
|
||||
const remainingPoemCount = computed(() =>
|
||||
Math.max(0, poemRows.value.length - visiblePoemCount.value),
|
||||
);
|
||||
const pageTitle = computed(() =>
|
||||
poemState.value === "edit" ? "维护字辈诗" : "字辈诗",
|
||||
);
|
||||
const generationRangeTitle = computed(() => {
|
||||
if (!poemRows.value.length) return "尚未建立字辈";
|
||||
const first = poemRows.value[0].generationNo;
|
||||
const last = poemRows.value[poemRows.value.length - 1].generationNo;
|
||||
return first === last ? `第 ${first} 世字辈` : `第 ${first}—${last} 世字辈`;
|
||||
});
|
||||
const draftSignature = computed(() => `${poemDraft.value}\u0000${disableMissing.value}`);
|
||||
const canSave = computed(() => Boolean(preview.value) && previewSignature.value === draftSignature.value);
|
||||
const draftSignature = computed(
|
||||
() => `${poemDraft.value}\u0000${disableMissing.value}`,
|
||||
);
|
||||
const canSave = computed(
|
||||
() =>
|
||||
Boolean(preview.value) && previewSignature.value === draftSignature.value,
|
||||
);
|
||||
const previewSummary = computed(() => {
|
||||
if (previewing.value) return "正在请求服务端预览。";
|
||||
if (!preview.value) return "尚未请求服务端预览；预览成功后才可保存。";
|
||||
return `服务端预览：新增 ${preview.value.createCount} 条，更新 ${preview.value.updateCount} 条，保留 ${preview.value.keepCount} 条，停用 ${preview.value.disableCount} 条。`;
|
||||
});
|
||||
const stateCopy = computed(() => poemState.value === "empty"
|
||||
? "当前尚未添加可用的字辈，可进入维护页面查看。"
|
||||
: "暂未读取到可展示的字辈，请稍后重试。",
|
||||
const stateCopy = computed(() =>
|
||||
poemState.value === "empty"
|
||||
? "当前尚未添加可用的字辈，可进入维护页面查看。"
|
||||
: "暂未读取到可展示的字辈，请稍后重试。",
|
||||
);
|
||||
const isDirty = computed(() => Boolean(
|
||||
poemState.value === "edit" && editorSnapshot.value && (
|
||||
poemDraft.value !== editorSnapshot.value.poemDraft ||
|
||||
disableMissing.value !== editorSnapshot.value.disableMissing
|
||||
const isDirty = computed(() =>
|
||||
Boolean(
|
||||
poemState.value === "edit" &&
|
||||
editorSnapshot.value &&
|
||||
(poemDraft.value !== editorSnapshot.value.poemDraft ||
|
||||
disableMissing.value !== editorSnapshot.value.disableMissing),
|
||||
),
|
||||
));
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
@@ -168,8 +266,12 @@ const loadPoems = async ({ management = false } = {}) => {
|
||||
poemError.value = "";
|
||||
try {
|
||||
const rows = management
|
||||
? await appApi.getGenerationPoemManagement(genealogyId.value, { requestController })
|
||||
: await appApi.getGenerationPoems(genealogyId.value, { requestController });
|
||||
? await appApi.getGenerationPoemManagement(genealogyId.value, {
|
||||
requestController,
|
||||
})
|
||||
: await appApi.getGenerationPoems(genealogyId.value, {
|
||||
requestController,
|
||||
});
|
||||
if (sequence !== requestSequence) return false;
|
||||
applyRows(rows);
|
||||
canManage.value = management;
|
||||
@@ -182,7 +284,10 @@ const loadPoems = async ({ management = false } = {}) => {
|
||||
}
|
||||
};
|
||||
const loadMorePoems = () => {
|
||||
visiblePoemCount.value = Math.min(poemRows.value.length, visiblePoemCount.value + POEM_RENDER_BATCH_SIZE);
|
||||
visiblePoemCount.value = Math.min(
|
||||
poemRows.value.length,
|
||||
visiblePoemCount.value + POEM_RENDER_BATCH_SIZE,
|
||||
);
|
||||
};
|
||||
const invalidatePreview = () => {
|
||||
poemError.value = "";
|
||||
@@ -202,7 +307,10 @@ const openEditor = () => {
|
||||
disableMissing.value = false;
|
||||
preview.value = null;
|
||||
previewSignature.value = "";
|
||||
editorSnapshot.value = Object.freeze({ poemDraft: poemDraft.value, disableMissing: disableMissing.value });
|
||||
editorSnapshot.value = Object.freeze({
|
||||
poemDraft: poemDraft.value,
|
||||
disableMissing: disableMissing.value,
|
||||
});
|
||||
poemState.value = "edit";
|
||||
return true;
|
||||
};
|
||||
@@ -234,13 +342,18 @@ const previewPoems = async () => {
|
||||
previewing.value = true;
|
||||
poemError.value = "";
|
||||
try {
|
||||
preview.value = await appApi.previewGenerationPoemBatch(genealogyId.value, {
|
||||
poemText: poemDraft.value,
|
||||
disableMissing: disableMissing.value,
|
||||
}, { requestController });
|
||||
preview.value = await appApi.previewGenerationPoemBatch(
|
||||
genealogyId.value,
|
||||
{
|
||||
poemText: poemDraft.value,
|
||||
disableMissing: disableMissing.value,
|
||||
},
|
||||
{ requestController },
|
||||
);
|
||||
previewSignature.value = draftSignature.value;
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) poemError.value = error?.message || "服务端预览失败，请稍后重试。";
|
||||
if (!isRequestCancelled(error))
|
||||
poemError.value = error?.message || "服务端预览失败，请稍后重试。";
|
||||
} finally {
|
||||
previewing.value = false;
|
||||
}
|
||||
@@ -250,10 +363,14 @@ const savePoems = async () => {
|
||||
saving.value = true;
|
||||
poemError.value = "";
|
||||
try {
|
||||
await appApi.saveGenerationPoemBatch(genealogyId.value, {
|
||||
poemText: poemDraft.value,
|
||||
disableMissing: disableMissing.value,
|
||||
}, { requestController });
|
||||
await appApi.saveGenerationPoemBatch(
|
||||
genealogyId.value,
|
||||
{
|
||||
poemText: poemDraft.value,
|
||||
disableMissing: disableMissing.value,
|
||||
},
|
||||
{ requestController },
|
||||
);
|
||||
feedbackMessage.value = "服务端字辈已保存，正在刷新维护列表。";
|
||||
const loaded = await loadPoems({ management: true });
|
||||
if (!loaded) {
|
||||
@@ -263,20 +380,23 @@ const savePoems = async () => {
|
||||
editorSnapshot.value = null;
|
||||
feedbackMessage.value = "服务端字辈已保存并已刷新。";
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) poemError.value = error?.message || "字辈保存失败，请稍后重试。";
|
||||
if (!isRequestCancelled(error))
|
||||
poemError.value = error?.message || "字辈保存失败，请稍后重试。";
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
internalTrail: poemState.value === "edit",
|
||||
submitting: previewing.value || saving.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"pop-internal-trail": requestLeaveEditor,
|
||||
"block-submitting": () => true,
|
||||
});
|
||||
const handleStateAction = () => poemState.value === "empty" ? enterManagement() : loadPoems();
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
internalTrail: poemState.value === "edit",
|
||||
submitting: previewing.value || saving.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"pop-internal-trail": requestLeaveEditor,
|
||||
"block-submitting": () => true,
|
||||
});
|
||||
const handleStateAction = () =>
|
||||
poemState.value === "empty" ? enterManagement() : loadPoems();
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
@@ -292,46 +412,267 @@ onUnload(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.poem-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.poem-page__header { z-index: 3; }
|
||||
.poem-panel { @include adaptive.adaptive-genealogy-state-panel; z-index: 2; width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 76rpx 8%; box-sizing: border-box; }
|
||||
.poem-panel > .app-loading { grid-area: 1 / 1 / -1 / -1; }
|
||||
.poem-list, .poem-editor, .poem-state-card { min-width: 0; }
|
||||
.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-load-more { display: flex; min-height: 64rpx; align-items: center; justify-content: center; margin-top: 14rpx; background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat; }
|
||||
.poem-load-more text { color: $ink; font-size: 23rpx; font-weight: 700; }
|
||||
.poem-row { @include adaptive.adaptive-genealogy-form-field; display: grid; min-height: 72rpx; margin-top: 10rpx; grid-template-columns: minmax(116rpx, 38%) minmax(0, 1fr) auto; align-items: center; }
|
||||
.poem-row__number { z-index: 1; grid-column: 1; margin-left: 24rpx; color: $ink-muted; font-size: 23rpx; }
|
||||
.poem-row__character { z-index: 1; grid-column: 2; min-width: 0; padding: 12rpx 16rpx 12rpx 0; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 32rpx; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
|
||||
.poem-row__status { z-index: 1; grid-column: 3; margin-right: 22rpx; color: $ink-muted; font-size: 22rpx; }
|
||||
.poem-row--disabled .poem-row__character, .poem-row--disabled .poem-row__status { color: $ink-muted; opacity: .62; }
|
||||
.poem-action { display: grid; width: 100%; min-height: 76rpx; margin-top: 20rpx; }
|
||||
.poem-action--disabled { opacity: .55; }
|
||||
.poem-action image { grid-area: 1 / 1; width: 100%; height: 100%; }
|
||||
.poem-action text { z-index: 1; display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 25rpx; font-weight: 700; letter-spacing: 2rpx; }
|
||||
.poem-field { @include adaptive.adaptive-genealogy-form-field; display: grid; min-height: 118rpx; margin-top: 22rpx; }
|
||||
.poem-field > text { z-index: 1; grid-area: 1 / 1; align-self: center; margin-left: 24rpx; color: $ink; font-size: 22rpx; font-weight: 700; }
|
||||
.poem-field textarea { z-index: 1; grid-area: 1 / 1; box-sizing: border-box; width: auto; min-width: 0; min-height: 118rpx; margin-right: 20rpx; margin-left: 164rpx; 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 { display: grid; width: 248rpx; min-height: 62rpx; }
|
||||
.poem-policy__option image { grid-area: 1 / 1; width: 100%; height: 100%; }
|
||||
.poem-policy__option text { z-index: 1; display: flex; grid-area: 1 / 1; 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((100% - 28rpx) / 3); margin-top: 0; }
|
||||
.poem-action .poem-action__secondary { color: $ink; }
|
||||
.poem-state-card { padding: 180rpx 4% 70rpx; 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%); background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat; }
|
||||
.poem-feedback text { z-index: 1; color: $ink; font-size: 22rpx; }
|
||||
@media (min-width: 400px) { .poem-panel { width: calc(100% - 48rpx); } }
|
||||
.poem-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.poem-page__header {
|
||||
z-index: 3;
|
||||
}
|
||||
.poem-panel {
|
||||
@include adaptive.adaptive-genealogy-state-panel;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 0;
|
||||
padding: 76rpx 8%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.poem-panel > .app-loading {
|
||||
grid-area: 1 / 1 / -1 / -1;
|
||||
}
|
||||
.poem-list,
|
||||
.poem-editor,
|
||||
.poem-state-card {
|
||||
min-width: 0;
|
||||
}
|
||||
.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-load-more {
|
||||
display: flex;
|
||||
min-height: 64rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 14rpx;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.poem-load-more text {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-row {
|
||||
@include adaptive.adaptive-genealogy-form-field;
|
||||
display: grid;
|
||||
min-height: 72rpx;
|
||||
margin-top: 10rpx;
|
||||
grid-template-columns: minmax(116rpx, 38%) minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
.poem-row__number {
|
||||
z-index: 1;
|
||||
grid-column: 1;
|
||||
margin-left: 24rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.poem-row__character {
|
||||
z-index: 1;
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
padding: 12rpx 16rpx 12rpx 0;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
.poem-row__status {
|
||||
z-index: 1;
|
||||
grid-column: 3;
|
||||
margin-right: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.poem-row--disabled .poem-row__character,
|
||||
.poem-row--disabled .poem-row__status {
|
||||
color: $ink-muted;
|
||||
opacity: 0.62;
|
||||
}
|
||||
.poem-action {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.poem-action--disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.poem-action image {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.poem-action text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
grid-area: 1 / 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #fff9ed;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.poem-field {
|
||||
@include adaptive.adaptive-genealogy-form-field;
|
||||
display: grid;
|
||||
min-height: 118rpx;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.poem-field > text {
|
||||
z-index: 1;
|
||||
grid-area: 1 / 1;
|
||||
align-self: center;
|
||||
margin-left: 24rpx;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.poem-field textarea {
|
||||
z-index: 1;
|
||||
grid-area: 1 / 1;
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 118rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-left: 164rpx;
|
||||
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 {
|
||||
display: grid;
|
||||
width: 248rpx;
|
||||
min-height: 62rpx;
|
||||
}
|
||||
.poem-policy__option image {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.poem-policy__option text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
grid-area: 1 / 1;
|
||||
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((100% - 28rpx) / 3);
|
||||
margin-top: 0;
|
||||
}
|
||||
.poem-action .poem-action__secondary {
|
||||
color: $ink;
|
||||
}
|
||||
.poem-state-card {
|
||||
padding: 180rpx 4% 70rpx;
|
||||
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%);
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.poem-feedback text {
|
||||
z-index: 1;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.poem-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,10 +4,27 @@
|
||||
<ModulePageBackground module="notification" />
|
||||
<view class="page-header"><PageHeader root title="消息中心" /></view>
|
||||
<view class="page-content">
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取消息" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取消息</text><AppButton block type="secondary" label="重新加载" @click="loadNotifications" /></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>暂无消息</text><text>消息列表会直接从服务端读取。</text><AppButton block label="返回我的" @click="returnToProfile" /></view>
|
||||
<view v-else class="state-card"><text>已读取 {{ notifications.length }} 条消息</text><text>消息详情接口尚未开放，当前不会用本地数据补造正文或已读状态。</text><AppButton block label="返回我的" @click="returnToProfile" /></view>
|
||||
<view v-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取消息"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取消息</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadNotifications"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>暂无消息</text><text>消息列表会直接从服务端读取。</text
|
||||
><AppButton block label="返回我的" @click="returnToProfile"
|
||||
/></view>
|
||||
<view v-else class="state-card"
|
||||
><text>已读取 {{ notifications.length }} 条消息</text
|
||||
><text
|
||||
>消息详情接口尚未开放，当前不会用本地数据补造正文或已读状态。</text
|
||||
><AppButton block label="返回我的" @click="returnToProfile"
|
||||
/></view>
|
||||
</view>
|
||||
<AppTabbar active="profile" />
|
||||
</view>
|
||||
@@ -21,7 +38,11 @@ import AppLoading from "@/components/AppLoading.vue";
|
||||
import AppTabbar from "@/components/AppTabbar.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goRoot } from "@/utils/navigation.js";
|
||||
|
||||
const notifications = ref([]);
|
||||
@@ -32,7 +53,9 @@ const loadNotifications = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
notifications.value = await appApi.getNotifications({ requestController: controller });
|
||||
notifications.value = await appApi.getNotifications({
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
state.value = notifications.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
@@ -42,11 +65,54 @@ const loadNotifications = async () => {
|
||||
};
|
||||
const returnToProfile = () => goRoot("M01");
|
||||
onLoad(loadNotifications);
|
||||
onShow(() => { if (state.value !== "loading") loadNotifications(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onShow(() => {
|
||||
if (state.value !== "loading") loadNotifications();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.message-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{flex:1;padding:18rpx 24rpx 190rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-family-content}.state-card text{display:block}.state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
.message-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 18rpx 24rpx 190rpx;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,24 +2,53 @@
|
||||
<template>
|
||||
<view class="message-detail-page">
|
||||
<ModulePageBackground module="notification" />
|
||||
<view class="page-header"><PageHeader title="消息详情" custom-back @back="backToMessages" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="消息详情" custom-back @back="backToMessages"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取消息详情" /></view>
|
||||
<view v-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取消息详情"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card">
|
||||
<text>暂时无法读取消息详情</text>
|
||||
<text>{{ loadError || "请稍后重试。" }}</text>
|
||||
<AppButton block type="secondary" label="重新加载" @click="loadDetail" />
|
||||
<AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadDetail"
|
||||
/>
|
||||
<AppButton block label="返回消息中心" @click="backToMessages" />
|
||||
</view>
|
||||
<view v-else class="detail-card">
|
||||
<text class="detail-title">{{ detail.noticeTitle || "通知消息" }}</text>
|
||||
<text v-if="detail.publishTime" class="detail-time">{{ detail.publishTime }}</text>
|
||||
<view class="detail-content"><text>{{ detail.noticeContent || "暂无通知正文" }}</text></view>
|
||||
<view v-if="detail.noticeType || detail.genealogyName || detail.senderNickName || detail.bizSummary" class="detail-meta">
|
||||
<view v-if="detail.noticeType" class="detail-meta__row"><text>通知类型</text><text>{{ detail.noticeType }}</text></view>
|
||||
<view v-if="detail.genealogyName" class="detail-meta__row"><text>所属家谱</text><text>{{ detail.genealogyName }}</text></view>
|
||||
<view v-if="detail.senderNickName" class="detail-meta__row"><text>发送人</text><text>{{ detail.senderNickName }}</text></view>
|
||||
<view v-if="detail.bizSummary" class="detail-meta__row"><text>关联事项</text><text>{{ detail.bizSummary }}</text></view>
|
||||
<text v-if="detail.publishTime" class="detail-time">{{
|
||||
detail.publishTime
|
||||
}}</text>
|
||||
<view class="detail-content"
|
||||
><text>{{ detail.noticeContent || "暂无通知正文" }}</text></view
|
||||
>
|
||||
<view
|
||||
v-if="
|
||||
detail.noticeType ||
|
||||
detail.genealogyName ||
|
||||
detail.senderNickName ||
|
||||
detail.bizSummary
|
||||
"
|
||||
class="detail-meta"
|
||||
>
|
||||
<view v-if="detail.noticeType" class="detail-meta__row"
|
||||
><text>通知类型</text><text>{{ detail.noticeType }}</text></view
|
||||
>
|
||||
<view v-if="detail.genealogyName" class="detail-meta__row"
|
||||
><text>所属家谱</text><text>{{ detail.genealogyName }}</text></view
|
||||
>
|
||||
<view v-if="detail.senderNickName" class="detail-meta__row"
|
||||
><text>发送人</text><text>{{ detail.senderNickName }}</text></view
|
||||
>
|
||||
<view v-if="detail.bizSummary" class="detail-meta__row"
|
||||
><text>关联事项</text><text>{{ detail.bizSummary }}</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -33,7 +62,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const notificationId = ref("");
|
||||
@@ -48,7 +81,9 @@ const loadDetail = async () => {
|
||||
state.value = "loading";
|
||||
loadError.value = "";
|
||||
try {
|
||||
detail.value = await appApi.getNotificationDetail(notificationId.value, { requestController: controller });
|
||||
detail.value = await appApi.getNotificationDetail(notificationId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
state.value = "ready";
|
||||
} catch (error) {
|
||||
@@ -72,5 +107,86 @@ onUnload(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.message-detail-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{flex:1;padding:18rpx 24rpx 72rpx}.state-card,.detail-card{box-sizing:border-box;@include adaptive.adaptive-family-content}.state-card{min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center}.state-card text{display:block}.state-card text:first-child,.detail-title{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}.detail-card{padding:44rpx 38rpx}.detail-title,.detail-time{display:block}.detail-time{margin-top:16rpx;color:$ink-muted;font-size:24rpx}.detail-content{margin-top:36rpx;color:$ink;font-size:29rpx;line-height:1.8;white-space:pre-wrap}.detail-meta{margin-top:42rpx;padding-top:24rpx;border-top:1rpx solid rgba(91,70,42,.16)}.detail-meta__row{display:flex;gap:22rpx;padding:10rpx 0;color:$ink-muted;font-size:24rpx;line-height:1.5}.detail-meta__row text:first-child{flex:0 0 116rpx}.detail-meta__row text:last-child{flex:1;color:$ink}
|
||||
.message-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.detail-card {
|
||||
box-sizing: border-box;
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.state-card {
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child,
|
||||
.detail-title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.detail-card {
|
||||
padding: 44rpx 38rpx;
|
||||
}
|
||||
.detail-title,
|
||||
.detail-time {
|
||||
display: block;
|
||||
}
|
||||
.detail-time {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.detail-content {
|
||||
margin-top: 36rpx;
|
||||
color: $ink;
|
||||
font-size: 29rpx;
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.detail-meta {
|
||||
margin-top: 42rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid rgba(91, 70, 42, 0.16);
|
||||
}
|
||||
.detail-meta__row {
|
||||
display: flex;
|
||||
gap: 22rpx;
|
||||
padding: 10rpx 0;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.detail-meta__row text:first-child {
|
||||
flex: 0 0 116rpx;
|
||||
}
|
||||
.detail-meta__row text:last-child {
|
||||
flex: 1;
|
||||
color: $ink;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-header"><PageHeader root title="我的" /></view>
|
||||
<view class="page-content">
|
||||
<view v-if="loading" class="state-card"><text>正在读取个人资料…</text></view>
|
||||
<view v-if="loading" class="state-card"
|
||||
><text>正在读取个人资料…</text></view
|
||||
>
|
||||
<view v-else-if="loadError" class="state-card">
|
||||
<text>个人资料暂时无法读取</text>
|
||||
<text>{{ loadError }}</text>
|
||||
@@ -12,19 +14,33 @@
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="profile-summary">
|
||||
<view class="profile-summary__avatar"><image src="/static/assets/foundation/transparent/auth-login-outline.png" mode="aspectFit" /></view>
|
||||
<view class="profile-summary__avatar"
|
||||
><image
|
||||
src="/static/assets/foundation/transparent/auth-login-outline.png"
|
||||
mode="aspectFit"
|
||||
/></view>
|
||||
<view class="profile-summary__identity">
|
||||
<text>{{ profile.nickName || "未设置昵称" }}</text>
|
||||
<text>{{ profile.realName || "未设置真实姓名" }}</text>
|
||||
<text>{{ profile.phone || "未提供手机号" }}</text>
|
||||
</view>
|
||||
<AppButton class="profile-summary__edit" label="编辑资料" @click="openEdit" />
|
||||
<AppButton
|
||||
class="profile-summary__edit"
|
||||
label="编辑资料"
|
||||
@click="openEdit"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="profile-fields">
|
||||
<view class="profile-field"><text>性别</text><text>{{ sexText }}</text></view>
|
||||
<view class="profile-field"><text>生日</text><text>{{ birthdayText }}</text></view>
|
||||
<view class="profile-field"><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view>
|
||||
<view class="profile-field"
|
||||
><text>性别</text><text>{{ sexText }}</text></view
|
||||
>
|
||||
<view class="profile-field"
|
||||
><text>生日</text><text>{{ birthdayText }}</text></view
|
||||
>
|
||||
<view class="profile-field"
|
||||
><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="profile-menu">
|
||||
@@ -49,10 +65,22 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppTabbar from "@/components/AppTabbar.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { openPage } from "@/utils/navigation.js";
|
||||
|
||||
const profile = reactive({ avatar: null, nickName: "", realName: "", phone: "", sex: "", birthday: "", email: "" });
|
||||
const profile = reactive({
|
||||
avatar: null,
|
||||
nickName: "",
|
||||
realName: "",
|
||||
phone: "",
|
||||
sex: "",
|
||||
birthday: "",
|
||||
email: "",
|
||||
});
|
||||
const loading = ref(false);
|
||||
const loadError = ref("");
|
||||
const requestController = createRequestController();
|
||||
@@ -60,7 +88,11 @@ let pageActive = true;
|
||||
|
||||
const sexText = computed(() => (profile.sex ? "待确认" : "未设置"));
|
||||
|
||||
const birthdayText = computed(() => /^\d{4}-\d{2}-\d{2}/.test(profile.birthday) ? profile.birthday.slice(0, 10) : "未设置");
|
||||
const birthdayText = computed(() =>
|
||||
/^\d{4}-\d{2}-\d{2}/.test(profile.birthday)
|
||||
? profile.birthday.slice(0, 10)
|
||||
: "未设置",
|
||||
);
|
||||
|
||||
const loadProfile = async () => {
|
||||
if (loading.value) return;
|
||||
@@ -91,28 +123,131 @@ onUnload(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.profile-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-header, .page-content { z-index: 1; }
|
||||
.page-content { flex: 1; padding: 18rpx 24rpx 190rpx; }
|
||||
.state-card, .profile-summary, .profile-fields { @include adaptive.adaptive-family-content; }
|
||||
.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.state-card text { display: block; }
|
||||
.state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.state-card .app-button { margin-top: 28rpx; }
|
||||
.profile-summary { display: grid; grid-template-columns: 96rpx minmax(0, 1fr); align-items: center; gap: 18rpx; padding: 30rpx; }
|
||||
.profile-summary__avatar { display: flex; width: 96rpx; height: 96rpx; align-items: center; justify-content: center; border: 1rpx solid rgba(159, 23, 15, .32); border-radius: 50%; background: rgba(159, 23, 15, .06); }
|
||||
.profile-summary__avatar image { width: 64rpx; height: 64rpx; opacity: .8; }
|
||||
.profile-summary__identity { min-width: 0; }
|
||||
.profile-summary__identity text { display: block; overflow-wrap: anywhere; }
|
||||
.profile-summary__identity text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 32rpx; font-weight: 700; }
|
||||
.profile-summary__identity text:nth-child(2), .profile-summary__identity text:last-child { margin-top: 5rpx; color: $ink-muted; font-size: 21rpx; }
|
||||
.profile-summary__edit { grid-column: 1 / -1; margin-top: 6rpx; }
|
||||
.profile-fields { display: flex; flex-direction: column; margin-top: 18rpx; padding: 8rpx 30rpx; }
|
||||
.profile-field { display: flex; min-height: 82rpx; align-items: center; justify-content: space-between; gap: 20rpx; border-bottom: 1rpx solid rgba(181, 137, 63, .3); }
|
||||
.profile-field:last-child { border-bottom: 0; }
|
||||
.profile-field text:first-child { flex: 0 0 auto; color: $ink; font-size: 24rpx; font-weight: 700; }
|
||||
.profile-field text:last-child { min-width: 0; color: $ink-muted; font-size: 22rpx; overflow-wrap: anywhere; text-align: right; }
|
||||
.profile-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14rpx; margin-top: 24rpx; }
|
||||
.profile-menu .app-button { margin: 0; }
|
||||
.profile-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 18rpx 24rpx 190rpx;
|
||||
}
|
||||
.state-card,
|
||||
.profile-summary,
|
||||
.profile-fields {
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.profile-summary {
|
||||
display: grid;
|
||||
grid-template-columns: 96rpx minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.profile-summary__avatar {
|
||||
display: flex;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.32);
|
||||
border-radius: 50%;
|
||||
background: rgba(159, 23, 15, 0.06);
|
||||
}
|
||||
.profile-summary__avatar image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.profile-summary__identity {
|
||||
min-width: 0;
|
||||
}
|
||||
.profile-summary__identity text {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.profile-summary__identity text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.profile-summary__identity text:nth-child(2),
|
||||
.profile-summary__identity text:last-child {
|
||||
margin-top: 5rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.profile-summary__edit {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.profile-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 18rpx;
|
||||
padding: 8rpx 30rpx;
|
||||
}
|
||||
.profile-field {
|
||||
display: flex;
|
||||
min-height: 82rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
border-bottom: 1rpx solid rgba(181, 137, 63, 0.3);
|
||||
}
|
||||
.profile-field:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.profile-field text:first-child {
|
||||
flex: 0 0 auto;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.profile-field text:last-child {
|
||||
min-width: 0;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: right;
|
||||
}
|
||||
.profile-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.profile-menu .app-button {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,9 +2,13 @@
|
||||
<template>
|
||||
<view class="profile-edit-page">
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-header"><PageHeader title="编辑资料" custom-back @back="backToProfile" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="编辑资料" custom-back @back="backToProfile"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="loading" class="state-card"><text>正在读取个人资料…</text></view>
|
||||
<view v-if="loading" class="state-card"
|
||||
><text>正在读取个人资料…</text></view
|
||||
>
|
||||
<view v-else-if="loadError" class="state-card">
|
||||
<text>个人资料暂时无法读取</text>
|
||||
<text>{{ loadError }}</text>
|
||||
@@ -13,23 +17,78 @@
|
||||
<template v-else>
|
||||
<view class="form-panel">
|
||||
<view class="avatar-row">
|
||||
<view><text>头像</text><text>{{ avatarMessage }}</text></view>
|
||||
<button class="upload-button" :disabled="uploading || saving" @click="uploadAvatar">{{ uploading ? "上传中…" : "选择图片" }}</button>
|
||||
<view
|
||||
><text>头像</text><text>{{ avatarMessage }}</text></view
|
||||
>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="uploading || saving"
|
||||
@click="uploadAvatar"
|
||||
>
|
||||
{{ uploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
</view>
|
||||
<text v-if="avatarError" class="field-error">{{ avatarError }}</text>
|
||||
|
||||
<view class="form-row"><text>昵称</text><input v-model.trim="form.nickName" maxlength="30" placeholder="请输入昵称" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
|
||||
<view class="form-row"><text>真实姓名</text><input v-model.trim="form.realName" maxlength="30" placeholder="请输入真实姓名" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
|
||||
<view class="form-row form-row--readonly"><text>性别</text><view class="readonly-value"><text>{{ form.sex ? "待确认" : "未设置" }}</text><text>选项待提供</text></view></view>
|
||||
<view class="form-row"
|
||||
><text>昵称</text
|
||||
><input
|
||||
v-model.trim="form.nickName"
|
||||
maxlength="30"
|
||||
placeholder="请输入昵称"
|
||||
placeholder-class="placeholder"
|
||||
:disabled="saving || uploading"
|
||||
/></view>
|
||||
<view class="form-row"
|
||||
><text>真实姓名</text
|
||||
><input
|
||||
v-model.trim="form.realName"
|
||||
maxlength="30"
|
||||
placeholder="请输入真实姓名"
|
||||
placeholder-class="placeholder"
|
||||
:disabled="saving || uploading"
|
||||
/></view>
|
||||
<view class="form-row form-row--readonly"
|
||||
><text>性别</text
|
||||
><view class="readonly-value"
|
||||
><text>{{ form.sex ? "待确认" : "未设置" }}</text
|
||||
><text>选项待提供</text></view
|
||||
></view
|
||||
>
|
||||
<view class="form-row">
|
||||
<text>生日</text>
|
||||
<picker mode="date" :value="form.birthday" :disabled="saving || uploading" @change="changeBirthday"><view class="picker-value" :class="{ 'picker-value--placeholder': !form.birthday }">{{ form.birthday || "请选择生日" }}</view></picker>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="form.birthday"
|
||||
:disabled="saving || uploading"
|
||||
@change="changeBirthday"
|
||||
><view
|
||||
class="picker-value"
|
||||
:class="{ 'picker-value--placeholder': !form.birthday }"
|
||||
>{{ form.birthday || "请选择生日" }}</view
|
||||
></picker
|
||||
>
|
||||
</view>
|
||||
<view class="form-row"><text>邮箱</text><input v-model.trim="form.email" maxlength="100" placeholder="请输入邮箱" placeholder-class="placeholder" :disabled="saving || uploading" /></view>
|
||||
<view class="form-row"
|
||||
><text>邮箱</text
|
||||
><input
|
||||
v-model.trim="form.email"
|
||||
maxlength="100"
|
||||
placeholder="请输入邮箱"
|
||||
placeholder-class="placeholder"
|
||||
:disabled="saving || uploading"
|
||||
/></view>
|
||||
</view>
|
||||
<text class="form-note">资料字段均可按需填写；留空不会提交为修改。</text>
|
||||
<text class="form-note"
|
||||
>资料字段均可按需填写；留空不会提交为修改。</text
|
||||
>
|
||||
<text v-if="saveError" class="save-error">{{ saveError }}</text>
|
||||
<AppButton block :disabled="saving || uploading" :label="saving ? '保存中…' : '保存资料'" @click="saveProfile" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="saving || uploading"
|
||||
:label="saving ? '保存中…' : '保存资料'"
|
||||
@click="saveProfile"
|
||||
/>
|
||||
</template>
|
||||
</view>
|
||||
<AppToast :visible="feedbackVisible" :message="feedbackMessage" />
|
||||
@@ -43,12 +102,33 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppToast from "@/components/AppToast.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage, toConsumerOssId } from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
toConsumerOssId,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { finishPage, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const form = reactive({ nickName: "", realName: "", sex: "", birthday: "", email: "" });
|
||||
const original = reactive({ nickName: "", realName: "", sex: "", birthday: "", email: "", avatar: null });
|
||||
const form = reactive({
|
||||
nickName: "",
|
||||
realName: "",
|
||||
sex: "",
|
||||
birthday: "",
|
||||
email: "",
|
||||
});
|
||||
const original = reactive({
|
||||
nickName: "",
|
||||
realName: "",
|
||||
sex: "",
|
||||
birthday: "",
|
||||
email: "",
|
||||
avatar: null,
|
||||
});
|
||||
const avatarId = ref(null);
|
||||
const avatarFileName = ref("");
|
||||
const loading = ref(true);
|
||||
@@ -78,7 +158,8 @@ const showFeedback = (message) => {
|
||||
}, 2200);
|
||||
};
|
||||
|
||||
const toBirthdayDate = (value) => /^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : "";
|
||||
const toBirthdayDate = (value) =>
|
||||
/^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : "";
|
||||
|
||||
const loadProfile = async () => {
|
||||
if (loading.value === false && (uploading.value || saving.value)) return;
|
||||
@@ -98,7 +179,8 @@ const loadProfile = async () => {
|
||||
avatarId.value = profile.avatar;
|
||||
avatarFileName.value = "";
|
||||
} catch (error) {
|
||||
if (pageActive && !isRequestCancelled(error)) loadError.value = error?.message || "请稍后重试";
|
||||
if (pageActive && !isRequestCancelled(error))
|
||||
loadError.value = error?.message || "请稍后重试";
|
||||
} finally {
|
||||
if (pageActive) loading.value = false;
|
||||
}
|
||||
@@ -118,7 +200,11 @@ const uploadAvatar = async () => {
|
||||
avatarId.value = toConsumerOssId(receipt.ossId);
|
||||
avatarFileName.value = receipt.fileName || "新头像";
|
||||
} catch (error) {
|
||||
if (pageActive && !isImagePickCancelled(error) && !isRequestCancelled(error)) {
|
||||
if (
|
||||
pageActive &&
|
||||
!isImagePickCancelled(error) &&
|
||||
!isRequestCancelled(error)
|
||||
) {
|
||||
avatarError.value = error?.message || "头像上传失败，请稍后重试";
|
||||
}
|
||||
} finally {
|
||||
@@ -129,10 +215,13 @@ const uploadAvatar = async () => {
|
||||
const buildUpdatePayload = () => {
|
||||
const data = {};
|
||||
for (const field of ["nickName", "realName", "sex", "email"]) {
|
||||
if (form[field] && form[field] !== original[field]) data[field] = form[field];
|
||||
if (form[field] && form[field] !== original[field])
|
||||
data[field] = form[field];
|
||||
}
|
||||
if (form.birthday && form.birthday !== original.birthday) data.birthday = form.birthday;
|
||||
if (avatarId.value && avatarId.value !== original.avatar) data.avatar = avatarId.value;
|
||||
if (form.birthday && form.birthday !== original.birthday)
|
||||
data.birthday = form.birthday;
|
||||
if (avatarId.value && avatarId.value !== original.avatar)
|
||||
data.avatar = avatarId.value;
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -148,9 +237,14 @@ const saveProfile = async () => {
|
||||
try {
|
||||
await appApi.updateProfile(payload, { requestController });
|
||||
if (!pageActive) return;
|
||||
await finishPage("M01", {}, { operation: "profile-updated", refresh: true });
|
||||
await finishPage(
|
||||
"M01",
|
||||
{},
|
||||
{ operation: "profile-updated", refresh: true },
|
||||
);
|
||||
} catch (error) {
|
||||
if (pageActive && !isRequestCancelled(error)) saveError.value = error?.message || "保存失败，请稍后重试";
|
||||
if (pageActive && !isRequestCancelled(error))
|
||||
saveError.value = error?.message || "保存失败，请稍后重试";
|
||||
} finally {
|
||||
if (pageActive) saving.value = false;
|
||||
}
|
||||
@@ -171,32 +265,158 @@ onUnload(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.profile-edit-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-header, .page-content { z-index: 1; }
|
||||
.page-content { flex: 1; padding: 24rpx 30rpx 72rpx; }
|
||||
.state-card, .form-panel { @include adaptive.adaptive-profile-content; }
|
||||
.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
|
||||
.state-card text { display: block; }
|
||||
.state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
|
||||
.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||||
.state-card .app-button { margin-top: 28rpx; }
|
||||
.form-panel { padding: 16rpx 30rpx 22rpx; }
|
||||
.avatar-row, .form-row { display: grid; grid-template-columns: 142rpx minmax(0, 1fr); min-height: 92rpx; align-items: center; gap: 16rpx; border-bottom: 1rpx solid rgba(181, 137, 63, .42); }
|
||||
.avatar-row > view text { display: block; }
|
||||
.avatar-row > view text:first-child, .form-row > text { color: $ink; font-size: 23rpx; font-weight: 700; }
|
||||
.avatar-row > view text:last-child { margin-top: 4rpx; color: $ink-muted; font-size: 19rpx; overflow-wrap: anywhere; }
|
||||
.upload-button { display: flex; min-height: 88rpx; align-items: center; justify-content: center; border: 0; background: transparent; color: $brand-red; font-size: 22rpx; text-align: right; }
|
||||
.form-row input, .picker-value { width: auto; min-width: 0; min-height: 68rpx; color: $ink; font-size: 23rpx; text-align: right; }
|
||||
.picker-value { display: flex; align-items: center; justify-content: flex-end; }
|
||||
.readonly-value { display:flex; min-height:68rpx; align-items:center; justify-content:flex-end; gap:12rpx; color:$ink-muted; }
|
||||
.readonly-value text:first-child { color:$ink; font-size:23rpx; }
|
||||
.readonly-value text:last-child { color:$ink-muted; font-size:19rpx; }
|
||||
.picker-value--placeholder, .placeholder { color: #ab9a86; }
|
||||
.field-error, .save-error, .form-note { display: block; color: $ink-muted; font-size: 20rpx; line-height: 1.5; }
|
||||
.field-error, .save-error { color: #b42318; }
|
||||
.field-error { margin-top: 8rpx; text-align: right; }
|
||||
.form-note { margin: 16rpx 4rpx 0; }
|
||||
.save-error { margin: 12rpx 4rpx 0; }
|
||||
.page-content > .app-button { margin-top: 24rpx; }
|
||||
@media (max-width: 340px) { .page-content { padding-right: 22rpx; padding-left: 22rpx; } .form-panel { padding-right: 24rpx; padding-left: 24rpx; } .avatar-row, .form-row { grid-template-columns: 116rpx minmax(0, 1fr); gap: 12rpx; } }
|
||||
.profile-edit-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 24rpx 30rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.form-panel {
|
||||
@include adaptive.adaptive-profile-content;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.form-panel {
|
||||
padding: 16rpx 30rpx 22rpx;
|
||||
}
|
||||
.avatar-row,
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 142rpx minmax(0, 1fr);
|
||||
min-height: 92rpx;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
border-bottom: 1rpx solid rgba(181, 137, 63, 0.42);
|
||||
}
|
||||
.avatar-row > view text {
|
||||
display: block;
|
||||
}
|
||||
.avatar-row > view text:first-child,
|
||||
.form-row > text {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.avatar-row > view text:last-child {
|
||||
margin-top: 4rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 19rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.upload-button {
|
||||
display: flex;
|
||||
min-height: 88rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.form-row input,
|
||||
.picker-value {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 68rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.picker-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.readonly-value {
|
||||
display: flex;
|
||||
min-height: 68rpx;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12rpx;
|
||||
color: $ink-muted;
|
||||
}
|
||||
.readonly-value text:first-child {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.readonly-value text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 19rpx;
|
||||
}
|
||||
.picker-value--placeholder,
|
||||
.placeholder {
|
||||
color: #ab9a86;
|
||||
}
|
||||
.field-error,
|
||||
.save-error,
|
||||
.form-note {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.field-error,
|
||||
.save-error {
|
||||
color: #b42318;
|
||||
}
|
||||
.field-error {
|
||||
margin-top: 8rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.form-note {
|
||||
margin: 16rpx 4rpx 0;
|
||||
}
|
||||
.save-error {
|
||||
margin: 12rpx 4rpx 0;
|
||||
}
|
||||
.page-content > .app-button {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
.form-panel {
|
||||
padding-right: 24rpx;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
.avatar-row,
|
||||
.form-row {
|
||||
grid-template-columns: 116rpx minmax(0, 1fr);
|
||||
gap: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,21 +2,40 @@
|
||||
<template>
|
||||
<view class="security-page">
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-header"><PageHeader title="账号与安全" custom-back @back="backToProfile" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="账号与安全" custom-back @back="backToProfile"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="loading" class="state-card"><AppLoading text="正在读取账号安全资料" /></view>
|
||||
<view v-if="loading" class="state-card"
|
||||
><AppLoading text="正在读取账号安全资料"
|
||||
/></view>
|
||||
<view v-else-if="loadError" class="state-card">
|
||||
<text>账号安全资料暂时无法读取</text><text>{{ loadError }}</text>
|
||||
<AppButton block label="重新读取" @click="loadProfile" />
|
||||
</view>
|
||||
<view v-else class="security-card">
|
||||
<text class="security-card__title">当前账号安全概览</text>
|
||||
<view class="security-field"><text>绑定手机号</text><text>{{ maskedPhone }}</text></view>
|
||||
<view class="security-field"><text>账号编号</text><text>{{ profile.userNo || "未提供" }}</text></view>
|
||||
<view class="security-field"><text>账号状态</text><text>{{ profile.status || "未提供" }}</text></view>
|
||||
<text class="security-note">当前仅展示可确认的账户信息，其他安全记录暂不可查看。</text>
|
||||
<view class="security-field"
|
||||
><text>绑定手机号</text><text>{{ maskedPhone }}</text></view
|
||||
>
|
||||
<view class="security-field"
|
||||
><text>账号编号</text
|
||||
><text>{{ profile.userNo || "未提供" }}</text></view
|
||||
>
|
||||
<view class="security-field"
|
||||
><text>账号状态</text
|
||||
><text>{{ profile.status || "未提供" }}</text></view
|
||||
>
|
||||
<text class="security-note"
|
||||
>当前仅展示可确认的账户信息，其他安全记录暂不可查看。</text
|
||||
>
|
||||
<AppButton block label="修改密码" @click="openPassword" />
|
||||
<AppButton type="secondary" block label="换绑手机号" @click="openPhone" />
|
||||
<AppButton
|
||||
type="secondary"
|
||||
block
|
||||
label="换绑手机号"
|
||||
@click="openPhone"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -29,7 +48,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { openPage, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const profile = reactive({ phone: "", userNo: "", status: "" });
|
||||
@@ -37,9 +60,11 @@ const loading = ref(false);
|
||||
const loadError = ref("");
|
||||
const controller = createRequestController();
|
||||
let pageActive = true;
|
||||
const maskedPhone = computed(() => /^\d{7,}$/.test(profile.phone)
|
||||
? `${profile.phone.slice(0, 3)}****${profile.phone.slice(-4)}`
|
||||
: "未提供");
|
||||
const maskedPhone = computed(() =>
|
||||
/^\d{7,}$/.test(profile.phone)
|
||||
? `${profile.phone.slice(0, 3)}****${profile.phone.slice(-4)}`
|
||||
: "未提供",
|
||||
);
|
||||
|
||||
const loadProfile = async () => {
|
||||
if (loading.value) return;
|
||||
@@ -49,7 +74,8 @@ const loadProfile = async () => {
|
||||
const data = await appApi.getProfile({ requestController: controller });
|
||||
if (pageActive) Object.assign(profile, data);
|
||||
} catch (error) {
|
||||
if (pageActive && !isRequestCancelled(error)) loadError.value = error?.message || "请稍后重试";
|
||||
if (pageActive && !isRequestCancelled(error))
|
||||
loadError.value = error?.message || "请稍后重试";
|
||||
} finally {
|
||||
if (pageActive) loading.value = false;
|
||||
}
|
||||
@@ -58,18 +84,86 @@ const backToProfile = () => returnTo("M01");
|
||||
const openPassword = () => openPage("M04", {}, "M03");
|
||||
const openPhone = () => openPage("M05", {}, "M03");
|
||||
onShow(loadProfile);
|
||||
onUnload(() => { pageActive = false; controller.abort(); });
|
||||
onUnload(() => {
|
||||
pageActive = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.security-page { display:flex; min-height:100vh; flex-direction:column; background:$paper; }
|
||||
.page-header,.page-content { z-index:1; }.page-content { padding:18rpx 24rpx 72rpx; }
|
||||
.state-card,.security-card { box-sizing:border-box; min-height:340rpx; padding:54rpx 42rpx 44rpx; @include adaptive.adaptive-family-content; }
|
||||
.state-card { text-align:center; }.state-card text,.security-card text { display:block; }
|
||||
.state-card text:first-child,.security-card__title { color:$ink; font-family:STKaiti,KaiTi,serif; font-size:35rpx; font-weight:700; }
|
||||
.state-card text:nth-child(2) { margin-top:18rpx; color:$ink-muted; font-size:24rpx; line-height:1.65; }.state-card .app-button { margin-top:28rpx; }
|
||||
.security-field { display:flex; min-height:82rpx; align-items:center; justify-content:space-between; gap:20rpx; border-bottom:1rpx solid rgba(181,137,63,.3); }
|
||||
.security-field:first-of-type { margin-top:24rpx; }.security-field text:first-child { color:$ink; font-size:24rpx; font-weight:700; }.security-field text:last-child { color:$ink-muted; font-size:22rpx; text-align:right; overflow-wrap:anywhere; }
|
||||
.security-note { margin-top:22rpx; color:$ink-muted; font-size:22rpx; line-height:1.6; }.security-card .app-button { margin-top:20rpx; }
|
||||
.security-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.security-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 54rpx 42rpx 44rpx;
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.state-card {
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text,
|
||||
.security-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child,
|
||||
.security-card__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.security-field {
|
||||
display: flex;
|
||||
min-height: 82rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
border-bottom: 1rpx solid rgba(181, 137, 63, 0.3);
|
||||
}
|
||||
.security-field:first-of-type {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.security-field text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.security-field text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.security-note {
|
||||
margin-top: 22rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.security-card .app-button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,56 @@
|
||||
<!-- 页面编号：M-04；用途：修改登录密码。 -->
|
||||
<template>
|
||||
<view class="password-page" :class="{ 'password-state--ready': passwordState === 'ready', 'password-state--saving': passwordState === 'saving' }">
|
||||
<view
|
||||
class="password-page"
|
||||
:class="{
|
||||
'password-state--ready': passwordState === 'ready',
|
||||
'password-state--saving': passwordState === 'saving',
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-layer"><PageHeader title="修改密码" custom-back @back="requestBack" /></view>
|
||||
<view class="page-layer"
|
||||
><PageHeader title="修改密码" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content page-layer">
|
||||
<view class="security-tip"><text>设置安全密码</text><text>建议使用 8–32 位字母与数字组合，不要与其他应用共用。</text></view>
|
||||
<view class="security-tip"
|
||||
><text>设置安全密码</text
|
||||
><text>建议使用 8–32 位字母与数字组合，不要与其他应用共用。</text></view
|
||||
>
|
||||
<view class="form-panel">
|
||||
<view v-for="field in passwordFields" :key="field.key" class="field-block">
|
||||
<view
|
||||
v-for="field in passwordFields"
|
||||
:key="field.key"
|
||||
class="field-block"
|
||||
>
|
||||
<view class="form-row">
|
||||
<text>{{ field.label }}</text>
|
||||
<input v-model="passwordForm[field.key]" :password="!passwordVisible[field.key]" maxlength="32" :aria-label="field.label" :placeholder="field.placeholder" @input="errors[field.key] = ''" />
|
||||
<view class="password-toggle" role="button" :aria-label="`${passwordVisible[field.key] ? '隐藏' : '显示'}${field.label}`" @click="togglePassword(field.key)">{{ passwordVisible[field.key] ? "隐藏" : "显示" }}</view>
|
||||
<input
|
||||
v-model="passwordForm[field.key]"
|
||||
:password="!passwordVisible[field.key]"
|
||||
maxlength="32"
|
||||
:aria-label="field.label"
|
||||
:placeholder="field.placeholder"
|
||||
@input="errors[field.key] = ''"
|
||||
/>
|
||||
<view
|
||||
class="password-toggle"
|
||||
role="button"
|
||||
:aria-label="`${passwordVisible[field.key] ? '隐藏' : '显示'}${field.label}`"
|
||||
@click="togglePassword(field.key)"
|
||||
>{{ passwordVisible[field.key] ? "隐藏" : "显示" }}</view
|
||||
>
|
||||
</view>
|
||||
<text v-if="errors[field.key]" class="field-error">{{ errors[field.key] }}</text>
|
||||
<text v-if="errors[field.key]" class="field-error">{{
|
||||
errors[field.key]
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<AppButton block :disabled="passwordState === 'saving'" :label="passwordState === 'saving' ? '正在提交' : '确认修改密码'" @click="savePassword" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="passwordState === 'saving'"
|
||||
:label="passwordState === 'saving' ? '正在提交' : '确认修改密码'"
|
||||
@click="savePassword"
|
||||
/>
|
||||
</view>
|
||||
<AppToast :visible="toastVisible" :message="toastMessage" />
|
||||
<AppDialog
|
||||
@@ -41,7 +76,11 @@ import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppToast from "@/components/AppToast.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { calcMD5 } from "@/utils/md5.js";
|
||||
import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
@@ -51,7 +90,11 @@ import {
|
||||
} from "@/utils/validation.js";
|
||||
|
||||
const passwordForm = reactive({ current: "", next: "", confirm: "" });
|
||||
const passwordVisible = reactive({ current: false, next: false, confirm: false });
|
||||
const passwordVisible = reactive({
|
||||
current: false,
|
||||
next: false,
|
||||
confirm: false,
|
||||
});
|
||||
const errors = reactive({ current: "", next: "", confirm: "" });
|
||||
const passwordState = ref("ready");
|
||||
const discardVisible = ref(false);
|
||||
@@ -60,7 +103,9 @@ const passwordFields = [
|
||||
{ key: "next", label: "新密码", placeholder: "8–32 位字母与数字" },
|
||||
{ key: "confirm", label: "确认新密码", placeholder: "请再次输入新密码" },
|
||||
];
|
||||
const toastVisible = ref(false); const toastMessage = ref(""); let timer = null;
|
||||
const toastVisible = ref(false);
|
||||
const toastMessage = ref("");
|
||||
let timer = null;
|
||||
const passwordRequestController = createRequestController();
|
||||
let pageActive = true;
|
||||
const formSnapshot = computed(() => JSON.stringify(passwordForm));
|
||||
@@ -72,25 +117,39 @@ const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
const requestDiscardConfirmation = discardConfirmation.request;
|
||||
const confirmDiscard = discardConfirmation.confirm;
|
||||
const cancelDiscard = discardConfirmation.cancel;
|
||||
const showToast = (message) => { toastMessage.value = message; toastVisible.value = true; clearTimeout(timer); timer = setTimeout(() => (toastVisible.value = false), 1800); };
|
||||
const togglePassword = (key) => { passwordVisible[key] = !passwordVisible[key]; };
|
||||
const showToast = (message) => {
|
||||
toastMessage.value = message;
|
||||
toastVisible.value = true;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => (toastVisible.value = false), 1800);
|
||||
};
|
||||
const togglePassword = (key) => {
|
||||
passwordVisible[key] = !passwordVisible[key];
|
||||
};
|
||||
const validateForm = () => {
|
||||
errors.current = passwordForm.current ? "" : "请输入当前密码";
|
||||
const nextPassword = validatePassword(passwordForm.next);
|
||||
errors.next = nextPassword.valid ? "" : PASSWORD_POLICY_MESSAGE;
|
||||
if (!errors.next && passwordForm.next === passwordForm.current)
|
||||
errors.next = "新密码不能与当前密码相同";
|
||||
errors.confirm = !passwordForm.confirm ? "请再次输入新密码" : passwordForm.confirm !== passwordForm.next ? "两次输入的新密码不一致" : "";
|
||||
errors.confirm = !passwordForm.confirm
|
||||
? "请再次输入新密码"
|
||||
: passwordForm.confirm !== passwordForm.next
|
||||
? "两次输入的新密码不一致"
|
||||
: "";
|
||||
return !Object.values(errors).some(Boolean);
|
||||
};
|
||||
const savePassword = async () => {
|
||||
if (!validateForm() || passwordState.value === "saving") return;
|
||||
passwordState.value = "saving";
|
||||
try {
|
||||
await appApi.changePassword({
|
||||
oldPasswordHash: calcMD5(passwordForm.current),
|
||||
newPasswordHash: calcMD5(passwordForm.next),
|
||||
}, { requestController: passwordRequestController });
|
||||
await appApi.changePassword(
|
||||
{
|
||||
oldPasswordHash: calcMD5(passwordForm.current),
|
||||
newPasswordHash: calcMD5(passwordForm.next),
|
||||
},
|
||||
{ requestController: passwordRequestController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
passwordForm.current = "";
|
||||
passwordForm.next = "";
|
||||
@@ -125,5 +184,100 @@ onUnload(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.password-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.security-tip,.form-panel{@include adaptive.adaptive-profile-content}.security-tip{min-height:170rpx;padding:38rpx 44rpx;text-align:center}.security-tip text{display:block}.security-tip text:first-child{color:$ink;font-size:32rpx;font-weight:700}.security-tip text:last-child{margin-top:10rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.form-panel{margin-top:20rpx;padding:22rpx 34rpx 30rpx}.field-block+.field-block{margin-top:6rpx}.form-row{display:grid;grid-template-columns:142rpx minmax(0,1fr) 74rpx;min-height:92rpx;align-items:center;gap:12rpx;border-bottom:1px solid rgba(181,137,63,.42)}.form-row>text{color:$ink;font-size:23rpx;font-weight:700}.form-row input{width:auto;min-width:0;min-height:68rpx;color:$ink;font-size:23rpx}.password-toggle{display:flex;min-height:68rpx;align-items:center;justify-content:flex-end;color:$brand-red;font-size:21rpx}.field-error{display:block;padding-top:7rpx;color:#b42318;font-size:20rpx;line-height:1.4;text-align:right}.page-content>.app-button{margin-top:28rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}.form-panel{padding-right:26rpx;padding-left:26rpx}.form-row{grid-template-columns:120rpx minmax(0,1fr) 64rpx;gap:8rpx}}
|
||||
.password-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-layer {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 28rpx 30rpx 72rpx;
|
||||
}
|
||||
.security-tip,
|
||||
.form-panel {
|
||||
@include adaptive.adaptive-profile-content;
|
||||
}
|
||||
.security-tip {
|
||||
min-height: 170rpx;
|
||||
padding: 38rpx 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.security-tip text {
|
||||
display: block;
|
||||
}
|
||||
.security-tip text:first-child {
|
||||
color: $ink;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.security-tip text:last-child {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.form-panel {
|
||||
margin-top: 20rpx;
|
||||
padding: 22rpx 34rpx 30rpx;
|
||||
}
|
||||
.field-block + .field-block {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 142rpx minmax(0, 1fr) 74rpx;
|
||||
min-height: 92rpx;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
border-bottom: 1px solid rgba(181, 137, 63, 0.42);
|
||||
}
|
||||
.form-row > text {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.form-row input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 68rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.password-toggle {
|
||||
display: flex;
|
||||
min-height: 68rpx;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: $brand-red;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.field-error {
|
||||
display: block;
|
||||
padding-top: 7rpx;
|
||||
color: #b42318;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.4;
|
||||
text-align: right;
|
||||
}
|
||||
.page-content > .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
.form-panel {
|
||||
padding-right: 26rpx;
|
||||
padding-left: 26rpx;
|
||||
}
|
||||
.form-row {
|
||||
grid-template-columns: 120rpx minmax(0, 1fr) 64rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,66 @@
|
||||
<!-- 页面编号：M-05；用途：换绑手机号。缺专用发码/资料 DTO 且需人工 TAC/短信时保持关闭。 -->
|
||||
<template>
|
||||
<view class="phone-page"><ModulePageBackground module="profile" /><view class="page-header"><PageHeader title="换绑手机号" custom-back @back="backToSecurity" /></view><view class="page-content"><view class="state-card"><text>暂不能在线换绑手机号</text><text>为保护账户安全，请联系管理员协助办理手机号换绑。</text><AppButton block label="返回账号与安全" @click="backToSecurity" /></view></view></view>
|
||||
<view class="phone-page"
|
||||
><ModulePageBackground module="profile" /><view class="page-header"
|
||||
><PageHeader
|
||||
title="换绑手机号"
|
||||
custom-back
|
||||
@back="backToSecurity" /></view
|
||||
><view class="page-content"
|
||||
><view class="state-card"
|
||||
><text>暂不能在线换绑手机号</text
|
||||
><text>为保护账户安全，请联系管理员协助办理手机号换绑。</text
|
||||
><AppButton
|
||||
block
|
||||
label="返回账号与安全"
|
||||
@click="backToSecurity" /></view></view
|
||||
></view>
|
||||
</template>
|
||||
<script setup>
|
||||
import AppButton from "@/components/AppButton.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { returnTo } from "@/utils/navigation.js"; const backToSecurity=()=>returnTo("M03");
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { returnTo } from "@/utils/navigation.js";
|
||||
const backToSecurity = () => returnTo("M03");
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.phone-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-family-content}.state-card text{display:block}.state-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
.phone-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
@include adaptive.adaptive-family-content;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,16 +5,57 @@
|
||||
<view class="page-layer"><PageHeader title="帮助中心" /></view>
|
||||
<view class="page-content page-layer">
|
||||
<text class="help-source-note">{{ sourceNote }}</text>
|
||||
<view class="search-box"><input v-model.trim="keyword" aria-label="搜索帮助" placeholder="搜索问题关键词" /><text>{{ filteredQuestions.length }} 条</text></view>
|
||||
<scroll-view scroll-x class="category-scroll" :show-scrollbar="false"><view class="category-row"><view v-for="category in helpCategories" :key="category.value" class="category-chip" :class="{ active: activeCategory === category.value }" role="button" @click="activeCategory = category.value">{{ category.label }}</view></view></scroll-view>
|
||||
<view class="search-box"
|
||||
><input
|
||||
v-model.trim="keyword"
|
||||
aria-label="搜索帮助"
|
||||
placeholder="搜索问题关键词"
|
||||
/><text>{{ filteredQuestions.length }} 条</text></view
|
||||
>
|
||||
<scroll-view scroll-x class="category-scroll" :show-scrollbar="false"
|
||||
><view class="category-row"
|
||||
><view
|
||||
v-for="category in helpCategories"
|
||||
:key="category.value"
|
||||
class="category-chip"
|
||||
:class="{ active: activeCategory === category.value }"
|
||||
role="button"
|
||||
@click="activeCategory = category.value"
|
||||
>{{ category.label }}</view
|
||||
></view
|
||||
></scroll-view
|
||||
>
|
||||
<view v-if="filteredQuestions.length" class="question-list">
|
||||
<view v-for="item in filteredQuestions" :key="item.id" class="question-card">
|
||||
<view class="question-heading" role="button" :aria-label="item.question" @click="toggleQuestion(item.id)"><text>{{ item.question }}</text><text>{{ expandedIds.includes(item.id) ? "收起" : "查看" }}</text></view>
|
||||
<text v-if="expandedIds.includes(item.id)" class="answer">{{ item.answer }}</text>
|
||||
<view
|
||||
v-for="item in filteredQuestions"
|
||||
:key="item.id"
|
||||
class="question-card"
|
||||
>
|
||||
<view
|
||||
class="question-heading"
|
||||
role="button"
|
||||
:aria-label="item.question"
|
||||
@click="toggleQuestion(item.id)"
|
||||
><text>{{ item.question }}</text
|
||||
><text>{{
|
||||
expandedIds.includes(item.id) ? "收起" : "查看"
|
||||
}}</text></view
|
||||
>
|
||||
<text v-if="expandedIds.includes(item.id)" class="answer">{{
|
||||
item.answer
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-card"><text>没有找到相关问题</text><text>换个关键词试试，或直接提交意见反馈。</text></view>
|
||||
<AppButton block type="secondary" label="联系家谱助手" @click="contactSupport" />
|
||||
<view v-else class="empty-card"
|
||||
><text>没有找到相关问题</text
|
||||
><text>换个关键词试试，或直接提交意见反馈。</text></view
|
||||
>
|
||||
<AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="联系家谱助手"
|
||||
@click="contactSupport"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -25,39 +66,71 @@ import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { openPage } from "@/utils/navigation.js";
|
||||
|
||||
const questions = ref([]);
|
||||
const helpState = ref("loading");
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const categoryLabels = Object.freeze({ common: "常见问题", member: "成员管理", lineage: "世系关系" });
|
||||
const categoryLabels = Object.freeze({
|
||||
common: "常见问题",
|
||||
member: "成员管理",
|
||||
lineage: "世系关系",
|
||||
});
|
||||
const helpCategories = computed(() => [
|
||||
{ value: "", label: "全部" },
|
||||
...[...new Set(questions.value.map((item) => item.category).filter(Boolean))].map((value) => ({ value, label: categoryLabels[value.toLowerCase()] || value })),
|
||||
...[
|
||||
...new Set(questions.value.map((item) => item.category).filter(Boolean)),
|
||||
].map((value) => ({
|
||||
value,
|
||||
label: categoryLabels[value.toLowerCase()] || value,
|
||||
})),
|
||||
]);
|
||||
const activeCategory = ref("");
|
||||
const keyword = ref("");
|
||||
const expandedIds = ref([]);
|
||||
const sourceNote = computed(() => ({ loading: "正在读取帮助文章…", error: "帮助文章暂时无法读取，请稍后重试。", empty: "暂未收到可展示的帮助文章。", ready: "帮助内容来自服务端，可按分类或关键词查找。" })[helpState.value]);
|
||||
const sourceNote = computed(
|
||||
() =>
|
||||
({
|
||||
loading: "正在读取帮助文章…",
|
||||
error: "帮助文章暂时无法读取，请稍后重试。",
|
||||
empty: "暂未收到可展示的帮助文章。",
|
||||
ready: "帮助内容来自服务端，可按分类或关键词查找。",
|
||||
})[helpState.value],
|
||||
);
|
||||
const filteredQuestions = computed(() => {
|
||||
const query = keyword.value.toLowerCase();
|
||||
return questions.value.filter((item) => (!activeCategory.value || item.category === activeCategory.value) && (!query || `${item.question}${item.answer}`.toLowerCase().includes(query)));
|
||||
return questions.value.filter(
|
||||
(item) =>
|
||||
(!activeCategory.value || item.category === activeCategory.value) &&
|
||||
(!query ||
|
||||
`${item.question}${item.answer}`.toLowerCase().includes(query)),
|
||||
);
|
||||
});
|
||||
const toggleQuestion = (id) => { expandedIds.value = expandedIds.value.includes(id) ? expandedIds.value.filter((item) => item !== id) : [...expandedIds.value, id]; };
|
||||
const toggleQuestion = (id) => {
|
||||
expandedIds.value = expandedIds.value.includes(id)
|
||||
? expandedIds.value.filter((item) => item !== id)
|
||||
: [...expandedIds.value, id];
|
||||
};
|
||||
const contactSupport = () => openPage("M07", {}, "M06");
|
||||
const loadHelpArticles = async () => {
|
||||
controller.abort();
|
||||
helpState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getHelpArticles({ requestController: controller });
|
||||
const rows = await appApi.getHelpArticles({
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
questions.value = rows.map((item) => ({
|
||||
id: String(item.helpId),
|
||||
category: String(item.helpCategory || "其他"),
|
||||
question: String(item.helpTitle || "未命名帮助文章"),
|
||||
answer: String(item.helpContent || "暂无正文")
|
||||
answer: String(item.helpContent || "暂无正文"),
|
||||
}));
|
||||
helpState.value = questions.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
@@ -66,11 +139,149 @@ const loadHelpArticles = async () => {
|
||||
}
|
||||
};
|
||||
onLoad(loadHelpArticles);
|
||||
onShow(() => { if (helpState.value !== "loading") loadHelpArticles(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onShow(() => {
|
||||
if (helpState.value !== "loading") loadHelpArticles();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.help-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:24rpx 28rpx 72rpx}.help-source-note{display:block;margin:0 4rpx 16rpx;color:$ink-muted;font-size:21rpx;line-height:1.55}.search-box{@include adaptive.adaptive-profile-field;display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:86rpx;align-items:center;gap:16rpx;padding:0 30rpx}.search-box input{width:auto;min-width:0;min-height:68rpx;color:$ink;font-size:23rpx}.search-box text{color:$ink-muted;font-size:20rpx}.category-scroll{width:100%;margin-top:18rpx}.category-row{display:flex;width:max-content;gap:12rpx;padding:2rpx}.category-chip{display:flex;min-width:100rpx;min-height:64rpx;align-items:center;justify-content:center;padding:0 22rpx;box-sizing:border-box;color:$ink-muted;font-size:22rpx}.category-chip.active{@include adaptive.adaptive-scroll-button(secondary);color:$brand-red;font-weight:700}.question-list{display:flex;flex-direction:column;gap:14rpx;margin-top:18rpx}.question-card,.empty-card{@include adaptive.adaptive-profile-content}.question-card{min-height:104rpx;padding:24rpx 34rpx}.question-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:58rpx;align-items:center;gap:18rpx}.question-heading text:first-child{color:$ink;font-size:24rpx;font-weight:700;overflow-wrap:anywhere}.question-heading text:last-child{color:$brand-red;font-size:20rpx}.answer{display:block;padding:14rpx 4rpx 6rpx;border-top:1px solid rgba(181,137,63,.32);color:$ink-muted;font-size:22rpx;line-height:1.65;overflow-wrap:anywhere}.empty-card{min-height:220rpx;padding:58rpx 44rpx;text-align:center}.empty-card text{display:block}.empty-card text:first-child{color:$ink;font-size:29rpx;font-weight:700}.empty-card text:last-child{margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.5}.page-content>.app-button{margin-top:28rpx}@media(max-width:340px){.page-content{padding-right:20rpx;padding-left:20rpx}}
|
||||
.help-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-layer {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 24rpx 28rpx 72rpx;
|
||||
}
|
||||
.help-source-note {
|
||||
display: block;
|
||||
margin: 0 4rpx 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.search-box {
|
||||
@include adaptive.adaptive-profile-field;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
min-height: 86rpx;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.search-box input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 68rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.search-box text {
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.category-scroll {
|
||||
width: 100%;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.category-row {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
gap: 12rpx;
|
||||
padding: 2rpx;
|
||||
}
|
||||
.category-chip {
|
||||
display: flex;
|
||||
min-width: 100rpx;
|
||||
min-height: 64rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 22rpx;
|
||||
box-sizing: border-box;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.category-chip.active {
|
||||
@include adaptive.adaptive-scroll-button(secondary);
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.question-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.question-card,
|
||||
.empty-card {
|
||||
@include adaptive.adaptive-profile-content;
|
||||
}
|
||||
.question-card {
|
||||
min-height: 104rpx;
|
||||
padding: 24rpx 34rpx;
|
||||
}
|
||||
.question-heading {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
min-height: 58rpx;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
}
|
||||
.question-heading text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.question-heading text:last-child {
|
||||
color: $brand-red;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.answer {
|
||||
display: block;
|
||||
padding: 14rpx 4rpx 6rpx;
|
||||
border-top: 1px solid rgba(181, 137, 63, 0.32);
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.65;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.empty-card {
|
||||
min-height: 220rpx;
|
||||
padding: 58rpx 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-card text {
|
||||
display: block;
|
||||
}
|
||||
.empty-card text:first-child {
|
||||
color: $ink;
|
||||
font-size: 29rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.empty-card text:last-child {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.page-content > .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+239
-26
@@ -11,11 +11,20 @@
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-layer"><PageHeader title="意见反馈" custom-back @back="requestBack" /></view>
|
||||
<view class="page-layer"
|
||||
><PageHeader title="意见反馈" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content page-layer">
|
||||
<text class="lead">你的建议会帮助我们把家谱做得更好</text>
|
||||
<view class="type-field" role="group" aria-label="反馈类型（选填）" aria-describedby="feedback-type-note">
|
||||
<text id="feedback-type-note" class="field-note">反馈类型为选填，可再次点击取消选择。</text>
|
||||
<view
|
||||
class="type-field"
|
||||
role="group"
|
||||
aria-label="反馈类型（选填）"
|
||||
aria-describedby="feedback-type-note"
|
||||
>
|
||||
<text id="feedback-type-note" class="field-note"
|
||||
>反馈类型为选填，可再次点击取消选择。</text
|
||||
>
|
||||
<view class="type-grid">
|
||||
<button
|
||||
v-for="type in feedbackTypes"
|
||||
@@ -25,7 +34,9 @@
|
||||
:aria-pressed="feedbackForm.feedbackType === type"
|
||||
:disabled="feedbackState === 'submitting'"
|
||||
@click="selectFeedbackType(type)"
|
||||
>{{ type }}</button>
|
||||
>
|
||||
{{ type }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-panel">
|
||||
@@ -35,7 +46,11 @@
|
||||
maxlength="500"
|
||||
aria-label="问题描述"
|
||||
aria-required="true"
|
||||
:aria-describedby="errors.feedbackContent ? 'feedback-content-help feedback-content-error' : 'feedback-content-help'"
|
||||
:aria-describedby="
|
||||
errors.feedbackContent
|
||||
? 'feedback-content-help feedback-content-error'
|
||||
: 'feedback-content-help'
|
||||
"
|
||||
:aria-invalid="Boolean(errors.feedbackContent)"
|
||||
:disabled="feedbackState === 'submitting'"
|
||||
:focus="feedbackContentFocused"
|
||||
@@ -43,9 +58,18 @@
|
||||
@input="errors.feedbackContent = ''"
|
||||
@blur="feedbackContentFocused = false"
|
||||
/>
|
||||
<text class="counter">{{ feedbackForm.feedbackContent.length }}/500</text>
|
||||
<text id="feedback-content-help" class="field-note">请勿填写密码、验证码等敏感信息。</text>
|
||||
<text v-if="errors.feedbackContent" id="feedback-content-error" class="field-error">{{ errors.feedbackContent }}</text>
|
||||
<text class="counter"
|
||||
>{{ feedbackForm.feedbackContent.length }}/500</text
|
||||
>
|
||||
<text id="feedback-content-help" class="field-note"
|
||||
>请勿填写密码、验证码等敏感信息。</text
|
||||
>
|
||||
<text
|
||||
v-if="errors.feedbackContent"
|
||||
id="feedback-content-error"
|
||||
class="field-error"
|
||||
>{{ errors.feedbackContent }}</text
|
||||
>
|
||||
<view class="contact-row">
|
||||
<text>联系方式</text>
|
||||
<input
|
||||
@@ -68,8 +92,14 @@
|
||||
}"
|
||||
:role="feedbackResultTone === 'error' ? 'alert' : 'status'"
|
||||
:aria-live="feedbackResultTone === 'error' ? 'assertive' : 'polite'"
|
||||
>{{ feedbackResult }}</view>
|
||||
<AppButton block :disabled="submitDisabled" :label="submitLabel" @click="submitFeedback" />
|
||||
>{{ feedbackResult }}</view
|
||||
>
|
||||
<AppButton
|
||||
block
|
||||
:disabled="submitDisabled"
|
||||
:label="submitLabel"
|
||||
@click="submitFeedback"
|
||||
/>
|
||||
</view>
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
@@ -93,12 +123,20 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const feedbackTypes = ["功能问题", "使用建议", "内容纠错", "其他"];
|
||||
const feedbackForm = reactive({ feedbackType: "", feedbackContent: "", contactInfo: "" });
|
||||
const feedbackForm = reactive({
|
||||
feedbackType: "",
|
||||
feedbackContent: "",
|
||||
contactInfo: "",
|
||||
});
|
||||
const errors = reactive({ feedbackContent: "" });
|
||||
const feedbackState = ref("ready");
|
||||
const feedbackResult = ref("");
|
||||
@@ -117,10 +155,13 @@ const normalizedForm = computed(() => ({
|
||||
const formSnapshot = computed(() => JSON.stringify(normalizedForm.value));
|
||||
const baseline = ref(formSnapshot.value);
|
||||
const isDirty = computed(() => formSnapshot.value !== baseline.value);
|
||||
const submitDisabled = computed(() =>
|
||||
feedbackState.value === "submitting" ||
|
||||
(Boolean(lastSubmittedSnapshot.value) && formSnapshot.value === lastSubmittedSnapshot.value) ||
|
||||
(Boolean(lastUncertainSnapshot.value) && formSnapshot.value === lastUncertainSnapshot.value),
|
||||
const submitDisabled = computed(
|
||||
() =>
|
||||
feedbackState.value === "submitting" ||
|
||||
(Boolean(lastSubmittedSnapshot.value) &&
|
||||
formSnapshot.value === lastSubmittedSnapshot.value) ||
|
||||
(Boolean(lastUncertainSnapshot.value) &&
|
||||
formSnapshot.value === lastUncertainSnapshot.value),
|
||||
);
|
||||
const submitLabel = computed(() => {
|
||||
if (feedbackState.value === "submitting") return "正在提交";
|
||||
@@ -136,7 +177,9 @@ const requestDiscardConfirmation = discardConfirmation.request;
|
||||
const confirmDiscard = discardConfirmation.confirm;
|
||||
const cancelDiscard = discardConfirmation.cancel;
|
||||
const validateFeedback = () => {
|
||||
errors.feedbackContent = feedbackForm.feedbackContent.trim() ? "" : "请填写问题描述";
|
||||
errors.feedbackContent = feedbackForm.feedbackContent.trim()
|
||||
? ""
|
||||
: "请填写问题描述";
|
||||
if (errors.feedbackContent) {
|
||||
feedbackContentFocused.value = false;
|
||||
nextTick(() => {
|
||||
@@ -156,14 +199,23 @@ const feedbackErrorMessage = (error) => {
|
||||
if (error?.httpStatus === 401) {
|
||||
return "登录状态已失效，服务器未确认提交成功。请重新登录后再处理。";
|
||||
}
|
||||
return error?.message ? `服务器未确认提交成功：${error.message}` : "服务器未确认提交成功，请稍后再试。";
|
||||
return error?.message
|
||||
? `服务器未确认提交成功：${error.message}`
|
||||
: "服务器未确认提交成功，请稍后再试。";
|
||||
};
|
||||
const submittedFeedbackMessage = "反馈已提交。以下内容为本次提交记录；修改任一项后可提交新反馈。";
|
||||
const submittedFeedbackMessage =
|
||||
"反馈已提交。以下内容为本次提交记录；修改任一项后可提交新反馈。";
|
||||
const submittedWithPendingEditsMessage = "上一份反馈已提交，当前修改尚未提交。";
|
||||
const uncertainFeedbackMessage = "提交结果可能未知。为避免重复记录，当前内容不能直接重提；请稍后确认或修改后提交新反馈。";
|
||||
const uncertainWithPendingEditsMessage = "上一份反馈的提交结果仍待确认，当前修改尚未提交。";
|
||||
const uncertainFeedbackMessage =
|
||||
"提交结果可能未知。为避免重复记录，当前内容不能直接重提；请稍后确认或修改后提交新反馈。";
|
||||
const uncertainWithPendingEditsMessage =
|
||||
"上一份反馈的提交结果仍待确认，当前修改尚未提交。";
|
||||
const isFeedbackResultUncertain = (error) => {
|
||||
if (["REQUEST_TIMEOUT", "NETWORK_ERROR", "RESPONSE_INVALID"].includes(error?.code)) {
|
||||
if (
|
||||
["REQUEST_TIMEOUT", "NETWORK_ERROR", "RESPONSE_INVALID"].includes(
|
||||
error?.code,
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (error?.code !== "HTTP_ERROR") return false;
|
||||
@@ -173,9 +225,12 @@ const isFeedbackResultUncertain = (error) => {
|
||||
const submitFeedback = async () => {
|
||||
if (!validateFeedback() || feedbackState.value === "submitting") return;
|
||||
if (
|
||||
(lastSubmittedSnapshot.value && formSnapshot.value === lastSubmittedSnapshot.value) ||
|
||||
(lastUncertainSnapshot.value && formSnapshot.value === lastUncertainSnapshot.value)
|
||||
) return;
|
||||
(lastSubmittedSnapshot.value &&
|
||||
formSnapshot.value === lastSubmittedSnapshot.value) ||
|
||||
(lastUncertainSnapshot.value &&
|
||||
formSnapshot.value === lastUncertainSnapshot.value)
|
||||
)
|
||||
return;
|
||||
const submittedSnapshot = formSnapshot.value;
|
||||
const submittedPayload = JSON.parse(submittedSnapshot);
|
||||
feedbackState.value = "submitting";
|
||||
@@ -259,5 +314,163 @@ onUnload(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.feedback-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:26rpx 30rpx 72rpx}.lead{display:block;color:$ink-muted;font-size:23rpx;line-height:1.5;text-align:center}.type-field{margin-top:20rpx}.field-note{display:block;color:$ink-muted;font-size:20rpx;line-height:1.5}.type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14rpx;margin-top:10rpx}.type-chip{margin:0;padding:0;border:0;background:transparent;line-height:normal;@include adaptive.adaptive-profile-field;display:flex;min-height:88rpx;align-items:center;justify-content:center;color:$ink-muted;font-size:22rpx;text-align:center}.type-chip::after{border:0}.type-chip.active{color:$brand-red;font-weight:700;filter:saturate(1.2)}.type-chip[disabled]{opacity:.55}.form-panel{@include adaptive.adaptive-profile-content;margin-top:20rpx;padding:30rpx 34rpx}.form-panel textarea{display:block;width:auto;min-width:0;min-height:210rpx;color:$ink;font-size:24rpx;line-height:1.65}.form-panel textarea[disabled],.contact-row input[disabled]{opacity:.65}.counter{display:block;color:$ink-muted;font-size:20rpx;text-align:right}.contact-row{display:grid;grid-template-columns:130rpx minmax(0,1fr);min-height:88rpx;align-items:center;gap:16rpx;margin-top:16rpx;border-top:1px solid rgba(181,137,63,.38)}.contact-row text{color:$ink;font-size:23rpx;font-weight:700}.contact-row input{width:auto;min-width:0;min-height:68rpx;color:$ink;font-size:22rpx;text-align:right}.field-error{display:block;margin-top:7rpx;color:#b42318;font-size:20rpx;line-height:1.4;text-align:right}.privacy-note{display:block;margin-top:15rpx;color:$ink-muted;font-size:20rpx;line-height:1.5;text-align:center}.feedback-result{margin-top:18rpx;padding:18rpx 20rpx;border:1px solid rgba(122,91,46,.24);border-radius:12rpx;font-size:21rpx;line-height:1.55}.feedback-result--success{border-color:rgba(41,112,66,.34);background:rgba(234,246,237,.88);color:#245f39}.feedback-result--error{border-color:rgba(180,35,24,.3);background:rgba(255,241,239,.9);color:#8f241c}.feedback-result--uncertain{border-color:rgba(155,101,22,.34);background:rgba(255,248,229,.92);color:#76500f}.page-content>.app-button{margin-top:24rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}.form-panel{padding-right:26rpx;padding-left:26rpx}}
|
||||
.feedback-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-layer {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 26rpx 30rpx 72rpx;
|
||||
}
|
||||
.lead {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
.type-field {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.field-note {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.type-chip {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
line-height: normal;
|
||||
@include adaptive.adaptive-profile-field;
|
||||
display: flex;
|
||||
min-height: 88rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.type-chip::after {
|
||||
border: 0;
|
||||
}
|
||||
.type-chip.active {
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
filter: saturate(1.2);
|
||||
}
|
||||
.type-chip[disabled] {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.form-panel {
|
||||
@include adaptive.adaptive-profile-content;
|
||||
margin-top: 20rpx;
|
||||
padding: 30rpx 34rpx;
|
||||
}
|
||||
.form-panel textarea {
|
||||
display: block;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 210rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.form-panel textarea[disabled],
|
||||
.contact-row input[disabled] {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.counter {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.contact-row {
|
||||
display: grid;
|
||||
grid-template-columns: 130rpx minmax(0, 1fr);
|
||||
min-height: 88rpx;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
border-top: 1px solid rgba(181, 137, 63, 0.38);
|
||||
}
|
||||
.contact-row text {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.contact-row input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 68rpx;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.field-error {
|
||||
display: block;
|
||||
margin-top: 7rpx;
|
||||
color: #b42318;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.4;
|
||||
text-align: right;
|
||||
}
|
||||
.privacy-note {
|
||||
display: block;
|
||||
margin-top: 15rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
.feedback-result {
|
||||
margin-top: 18rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
border: 1px solid rgba(122, 91, 46, 0.24);
|
||||
border-radius: 12rpx;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.feedback-result--success {
|
||||
border-color: rgba(41, 112, 66, 0.34);
|
||||
background: rgba(234, 246, 237, 0.88);
|
||||
color: #245f39;
|
||||
}
|
||||
.feedback-result--error {
|
||||
border-color: rgba(180, 35, 24, 0.3);
|
||||
background: rgba(255, 241, 239, 0.9);
|
||||
color: #8f241c;
|
||||
}
|
||||
.feedback-result--uncertain {
|
||||
border-color: rgba(155, 101, 22, 0.34);
|
||||
background: rgba(255, 248, 229, 0.92);
|
||||
color: #76500f;
|
||||
}
|
||||
.page-content > .app-button {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
.form-panel {
|
||||
padding-right: 26rpx;
|
||||
padding-left: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+155
-14
@@ -1,23 +1,42 @@
|
||||
<template>
|
||||
<view class="promotion-page">
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-layer"><PageHeader title="推广中心" custom-back @back="requestBack" /></view>
|
||||
<view class="page-layer"
|
||||
><PageHeader title="推广中心" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content page-layer">
|
||||
<view class="invite-hero">
|
||||
<image src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>家谱服务推荐</text>
|
||||
<text>以下推荐内容由服务端配置。</text>
|
||||
</view>
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取推广内容" /></view>
|
||||
<view v-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取推广内容"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card">
|
||||
<text>暂时无法读取推广内容</text><AppButton block type="secondary" label="重新加载" @click="loadPromotions" />
|
||||
<text>暂时无法读取推广内容</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadPromotions"
|
||||
/>
|
||||
</view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>当前没有可展示的推广内容</text></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>当前没有可展示的推广内容</text></view
|
||||
>
|
||||
<view v-else class="promotion-list">
|
||||
<view v-for="item in promotions" :key="item.id" class="promotion-card">
|
||||
<text class="promotion-title">{{ item.title }}</text>
|
||||
<text v-if="item.platform" class="promotion-platform">{{ item.platform }}</text>
|
||||
<text v-if="item.description" class="promotion-copy">{{ item.description }}</text>
|
||||
<text v-if="item.platform" class="promotion-platform">{{
|
||||
item.platform
|
||||
}}</text>
|
||||
<text v-if="item.description" class="promotion-copy">{{
|
||||
item.description
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -31,15 +50,28 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const promotions = ref([]);
|
||||
const state = ref("loading");
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const platformLabels = Object.freeze({ app: "APP 应用", pc: "管理后台", wechat: "微信小程序" });
|
||||
const formatPlatform = (value) => platformLabels[String(value || "").trim().toLowerCase()] || String(value || "").trim();
|
||||
const platformLabels = Object.freeze({
|
||||
app: "APP 应用",
|
||||
pc: "管理后台",
|
||||
wechat: "微信小程序",
|
||||
});
|
||||
const formatPlatform = (value) =>
|
||||
platformLabels[
|
||||
String(value || "")
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
] || String(value || "").trim();
|
||||
const loadPromotions = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
@@ -50,7 +82,7 @@ const loadPromotions = async () => {
|
||||
id: String(item.promotionId),
|
||||
title: String(item.promotionTitle || "未命名推广"),
|
||||
description: String(item.promotionDesc || ""),
|
||||
platform: formatPlatform(item.platform)
|
||||
platform: formatPlatform(item.platform),
|
||||
}));
|
||||
state.value = promotions.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
@@ -60,12 +92,121 @@ const loadPromotions = async () => {
|
||||
};
|
||||
const requestBack = () => runBackGuard({});
|
||||
onLoad(loadPromotions);
|
||||
onShow(() => { if (state.value !== "loading") loadPromotions(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onShow(() => {
|
||||
if (state.value !== "loading") loadPromotions();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.promotion-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.invite-hero,.state-card,.promotion-card{@include adaptive.adaptive-profile-content}.invite-hero{display:flex;min-height:250rpx;flex-direction:column;align-items:center;justify-content:center;padding:38rpx 48rpx;text-align:center}.invite-hero image{width:90rpx;height:102rpx}.invite-hero text{display:block}.invite-hero text:nth-child(2){margin-top:12rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:34rpx;font-weight:700}.invite-hero text:last-child{margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.state-card{display:flex;min-height:210rpx;flex-direction:column;align-items:center;justify-content:center;margin-top:20rpx;padding:38rpx;text-align:center;color:$ink;font-size:26rpx}.state-card .app-button{width:100%;margin-top:22rpx}.promotion-list{display:flex;flex-direction:column;gap:16rpx;margin-top:20rpx}.promotion-card{position:relative;display:flex;min-height:142rpx;flex-direction:column;padding:30rpx 34rpx}.promotion-title{color:$ink;font-size:28rpx;font-weight:700;overflow-wrap:anywhere}.promotion-platform{align-self:flex-start;margin-top:10rpx;padding:3rpx 12rpx;border:1rpx solid rgba(181,46,34,.26);border-radius:999rpx;color:$brand-red;font-size:20rpx;line-height:1.3}.promotion-copy{margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55;overflow-wrap:anywhere}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}}
|
||||
.promotion-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-layer {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 28rpx 30rpx 72rpx;
|
||||
}
|
||||
.invite-hero,
|
||||
.state-card,
|
||||
.promotion-card {
|
||||
@include adaptive.adaptive-profile-content;
|
||||
}
|
||||
.invite-hero {
|
||||
display: flex;
|
||||
min-height: 250rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 38rpx 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.invite-hero image {
|
||||
width: 90rpx;
|
||||
height: 102rpx;
|
||||
}
|
||||
.invite-hero text {
|
||||
display: block;
|
||||
}
|
||||
.invite-hero text:nth-child(2) {
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.invite-hero text:last-child {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 210rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
padding: 38rpx;
|
||||
text-align: center;
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.promotion-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.promotion-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 142rpx;
|
||||
flex-direction: column;
|
||||
padding: 30rpx 34rpx;
|
||||
}
|
||||
.promotion-title {
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.promotion-platform {
|
||||
align-self: flex-start;
|
||||
margin-top: 10rpx;
|
||||
padding: 3rpx 12rpx;
|
||||
border: 1rpx solid rgba(181, 46, 34, 0.26);
|
||||
border-radius: 999rpx;
|
||||
color: $brand-red;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.promotion-copy {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,43 @@
|
||||
<template>
|
||||
<view class="orders-page">
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-layer"><PageHeader title="VIP 与订单" custom-back @back="requestBack" /></view>
|
||||
<view class="page-layer"
|
||||
><PageHeader title="VIP 与订单" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content page-layer">
|
||||
<view class="service-card"><text>服务套餐</text><text>套餐和订单均从服务端读取；本页不发起支付或创建订单。</text></view>
|
||||
<view v-if="state === 'loading'" class="state-card"><AppLoading text="正在读取服务套餐" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取套餐或订单</text><AppButton block type="secondary" label="重新加载" @click="loadVip" /></view>
|
||||
<view class="service-card"
|
||||
><text>服务套餐</text
|
||||
><text>套餐和订单均从服务端读取；本页不发起支付或创建订单。</text></view
|
||||
>
|
||||
<view v-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取服务套餐"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取套餐或订单</text
|
||||
><AppButton block type="secondary" label="重新加载" @click="loadVip"
|
||||
/></view>
|
||||
<template v-else>
|
||||
<view v-if="packages.length" class="package-list"><view v-for="item in packages" :key="item.id" class="package-card"><view class="package-heading"><text>{{ item.name }}</text><text v-if="item.price">¥{{ item.price }}</text></view><text v-if="item.description">{{ item.description }}</text><text v-if="item.duration">{{ item.duration }}</text></view></view>
|
||||
<view v-else class="state-card"><text>当前没有可展示的服务套餐</text></view>
|
||||
<view class="section-heading"><text>订单记录</text><text>{{ orders.length }} 条</text></view>
|
||||
<view v-if="orders.length" class="order-list"><view v-for="item in orders" :key="item.id" class="order-card"><text>{{ item.title }}</text><text>{{ item.status }}</text></view></view>
|
||||
<view v-if="packages.length" class="package-list"
|
||||
><view v-for="item in packages" :key="item.id" class="package-card"
|
||||
><view class="package-heading"
|
||||
><text>{{ item.name }}</text
|
||||
><text v-if="item.price">¥{{ item.price }}</text></view
|
||||
><text v-if="item.description">{{ item.description }}</text
|
||||
><text v-if="item.duration">{{ item.duration }}</text></view
|
||||
></view
|
||||
>
|
||||
<view v-else class="state-card"
|
||||
><text>当前没有可展示的服务套餐</text></view
|
||||
>
|
||||
<view class="section-heading"
|
||||
><text>订单记录</text><text>{{ orders.length }} 条</text></view
|
||||
>
|
||||
<view v-if="orders.length" class="order-list"
|
||||
><view v-for="item in orders" :key="item.id" class="order-card"
|
||||
><text>{{ item.title }}</text
|
||||
><text>{{ item.status }}</text></view
|
||||
></view
|
||||
>
|
||||
<view v-else class="order-empty"><text>暂无订单记录</text></view>
|
||||
</template>
|
||||
</view>
|
||||
@@ -24,7 +51,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const packages = ref([]);
|
||||
@@ -32,28 +63,44 @@ const orders = ref([]);
|
||||
const state = ref("loading");
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const formatPrice = (value) => Number.isFinite(Number(value)) ? Number(value).toFixed(2) : "";
|
||||
const formatPrice = (value) =>
|
||||
Number.isFinite(Number(value)) ? Number(value).toFixed(2) : "";
|
||||
const durationUnits = Object.freeze({ year: "年", month: "个月", day: "天" });
|
||||
const formatDuration = (value, unit) => {
|
||||
if (value === undefined || value === null || value === "") return "";
|
||||
if (Number.isFinite(Number(value)) && Number(value) <= 0) return "永久有效";
|
||||
const normalizedUnit = String(unit || "").trim().toLowerCase();
|
||||
return durationUnits[normalizedUnit] ? `${value} ${durationUnits[normalizedUnit]}` : String(value);
|
||||
const normalizedUnit = String(unit || "")
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
return durationUnits[normalizedUnit]
|
||||
? `${value} ${durationUnits[normalizedUnit]}`
|
||||
: String(value);
|
||||
};
|
||||
const loadVip = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
const packageRows = await appApi.getVipPackages({ requestController: controller });
|
||||
const orderRows = await appApi.getVipOrders({ requestController: controller });
|
||||
const packageRows = await appApi.getVipPackages({
|
||||
requestController: controller,
|
||||
});
|
||||
const orderRows = await appApi.getVipOrders({
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
packages.value = packageRows.map((item) => ({
|
||||
id: String(item.packageId), name: String(item.packageName || "未命名套餐"), description: String(item.packageDesc || ""),
|
||||
price: formatPrice(item.price), duration: formatDuration(item.durationValue, item.durationUnit)
|
||||
id: String(item.packageId),
|
||||
name: String(item.packageName || "未命名套餐"),
|
||||
description: String(item.packageDesc || ""),
|
||||
price: formatPrice(item.price),
|
||||
duration: formatDuration(item.durationValue, item.durationUnit),
|
||||
}));
|
||||
orders.value = orderRows.map((item) => ({
|
||||
id: String(item.orderId || item.id || ""), title: String(item.packageName || item.orderNo || "VIP 订单"), status: String(item.orderStatus || item.status || "" )
|
||||
})).filter((item) => item.id);
|
||||
orders.value = orderRows
|
||||
.map((item) => ({
|
||||
id: String(item.orderId || item.id || ""),
|
||||
title: String(item.packageName || item.orderNo || "VIP 订单"),
|
||||
status: String(item.orderStatus || item.status || ""),
|
||||
}))
|
||||
.filter((item) => item.id);
|
||||
state.value = "ready";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
@@ -62,12 +109,138 @@ const loadVip = async () => {
|
||||
};
|
||||
const requestBack = () => runBackGuard({});
|
||||
onLoad(loadVip);
|
||||
onShow(() => { if (state.value !== "loading") loadVip(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
onShow(() => {
|
||||
if (state.value !== "loading") loadVip();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.orders-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.service-card,.state-card,.package-card,.order-card,.order-empty{@include adaptive.adaptive-profile-content}.service-card{min-height:170rpx;padding:38rpx 44rpx;text-align:center}.service-card text{display:block}.service-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:34rpx;font-weight:700}.service-card text:last-child{margin-top:12rpx;color:$ink-muted;font-size:21rpx;line-height:1.55}.state-card{display:flex;min-height:190rpx;flex-direction:column;align-items:center;justify-content:center;margin-top:18rpx;padding:36rpx;text-align:center;color:$ink;font-size:26rpx}.state-card .app-button{width:100%;margin-top:22rpx}.package-list,.order-list{display:flex;flex-direction:column;gap:14rpx;margin-top:18rpx}.package-card{padding:28rpx 32rpx}.package-heading{display:flex;align-items:center;justify-content:space-between;gap:16rpx;color:$ink;font-size:27rpx;font-weight:700}.package-heading text:last-child{flex:0 0 auto;color:$brand-red}.package-card>text{display:block;margin-top:10rpx;color:$ink-muted;font-size:21rpx;line-height:1.5}.section-heading{display:flex;justify-content:space-between;margin:28rpx 6rpx 12rpx;color:$ink;font-size:27rpx;font-weight:700}.section-heading text:last-child{color:$ink-muted;font-size:21rpx;font-weight:400}.order-card{display:flex;justify-content:space-between;gap:18rpx;padding:26rpx 32rpx;color:$ink;font-size:24rpx}.order-card text:last-child{color:$ink-muted}.order-empty{padding:38rpx;text-align:center;color:$ink-muted;font-size:23rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}}
|
||||
.orders-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-layer {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 28rpx 30rpx 72rpx;
|
||||
}
|
||||
.service-card,
|
||||
.state-card,
|
||||
.package-card,
|
||||
.order-card,
|
||||
.order-empty {
|
||||
@include adaptive.adaptive-profile-content;
|
||||
}
|
||||
.service-card {
|
||||
min-height: 170rpx;
|
||||
padding: 38rpx 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.service-card text {
|
||||
display: block;
|
||||
}
|
||||
.service-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.service-card text:last-child {
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 190rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 18rpx;
|
||||
padding: 36rpx;
|
||||
text-align: center;
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.package-list,
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.package-card {
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.package-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
color: $ink;
|
||||
font-size: 27rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.package-heading text:last-child {
|
||||
flex: 0 0 auto;
|
||||
color: $brand-red;
|
||||
}
|
||||
.package-card > text {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.section-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 28rpx 6rpx 12rpx;
|
||||
color: $ink;
|
||||
font-size: 27rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.section-heading text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.order-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.order-card text:last-child {
|
||||
color: $ink-muted;
|
||||
}
|
||||
.order-empty {
|
||||
padding: 38rpx;
|
||||
text-align: center;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,67 @@
|
||||
<!-- 页面编号：M-10；用途：协议、隐私、版本与退出登录。 -->
|
||||
<template>
|
||||
<view class="about-page" :class="{ 'about-state--logging-out': logoutSubmitting }">
|
||||
<view
|
||||
class="about-page"
|
||||
:class="{ 'about-state--logging-out': logoutSubmitting }"
|
||||
>
|
||||
<ModulePageBackground module="profile" />
|
||||
<view class="page-layer"><PageHeader title="关于家谱" custom-back @back="requestBack" /></view>
|
||||
<view class="page-layer"
|
||||
><PageHeader title="关于家谱" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content page-layer">
|
||||
<view class="brand-card"><image src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" /><text>家谱</text><text>传承每一段值得珍藏的家族记忆</text><text>版本 {{ appVersion }}</text></view>
|
||||
<view class="brand-card"
|
||||
><image
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/><text>家谱</text><text>传承每一段值得珍藏的家族记忆</text
|
||||
><text>版本 {{ appVersion }}</text></view
|
||||
>
|
||||
<view class="settings-list">
|
||||
<view v-for="item in agreementItems" :key="item.key" class="settings-row" role="button" :aria-label="item.label" @click="openAgreement(item)"><view><text>{{ item.label }}</text><text>{{ item.note }}</text></view><image src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" /></view>
|
||||
<view
|
||||
v-for="item in agreementItems"
|
||||
:key="item.key"
|
||||
class="settings-row"
|
||||
role="button"
|
||||
:aria-label="item.label"
|
||||
@click="openAgreement(item)"
|
||||
><view
|
||||
><text>{{ item.label }}</text
|
||||
><text>{{ item.note }}</text></view
|
||||
><image
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
/></view>
|
||||
</view>
|
||||
<AppButton block type="secondary" label="退出登录" @click="logoutVisible = true" />
|
||||
<AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="退出登录"
|
||||
@click="logoutVisible = true"
|
||||
/>
|
||||
</view>
|
||||
<AppDialog :visible="agreementVisible" :close-on-mask="false" eyebrow="协议与说明" :title="activeAgreement.label" :message="activeAgreement.copy" confirm-text="关闭" @confirm="agreementVisible = false" @close="agreementVisible = false" />
|
||||
<AppDialog :visible="logoutVisible" eyebrow="账号操作" title="确认退出登录？" message="退出后需要重新验证账号；本机保存的密码不会被保留。" :confirm-text="logoutSubmitting ? '正在退出' : '确认退出'" cancel-text="取消" show-cancel :close-on-mask="false" @confirm="confirmLogout" @cancel="logoutVisible = false" @close="logoutVisible = false" />
|
||||
<AppDialog
|
||||
:visible="agreementVisible"
|
||||
:close-on-mask="false"
|
||||
eyebrow="协议与说明"
|
||||
:title="activeAgreement.label"
|
||||
:message="activeAgreement.copy"
|
||||
confirm-text="关闭"
|
||||
@confirm="agreementVisible = false"
|
||||
@close="agreementVisible = false"
|
||||
/>
|
||||
<AppDialog
|
||||
:visible="logoutVisible"
|
||||
eyebrow="账号操作"
|
||||
title="确认退出登录？"
|
||||
message="退出后需要重新验证账号；本机保存的密码不会被保留。"
|
||||
:confirm-text="logoutSubmitting ? '正在退出' : '确认退出'"
|
||||
cancel-text="取消"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmLogout"
|
||||
@cancel="logoutVisible = false"
|
||||
@close="logoutVisible = false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -29,16 +79,35 @@ import { session } from "@/utils/session.js";
|
||||
|
||||
const appVersion = manifest.versionName;
|
||||
const agreementItems = [
|
||||
{ key: "terms", label: "用户协议", note: "了解账号与服务使用规则", copy: "用户协议正文将在正式协议服务接入后展示。当前页面不代表最终法律文本。" },
|
||||
{ key: "privacy", label: "隐私政策", note: "了解个人资料如何使用与保护", copy: "隐私政策正文将在正式协议服务接入后展示。敏感资料默认按权限与脱敏规则展示。" },
|
||||
{ key: "version", label: "版本说明", note: `当前版本 ${appVersion}`, copy: `当前安装版本为 ${appVersion}。基础版本采用浅色国风主题。` },
|
||||
{
|
||||
key: "terms",
|
||||
label: "用户协议",
|
||||
note: "了解账号与服务使用规则",
|
||||
copy: "用户协议正文将在正式协议服务接入后展示。当前页面不代表最终法律文本。",
|
||||
},
|
||||
{
|
||||
key: "privacy",
|
||||
label: "隐私政策",
|
||||
note: "了解个人资料如何使用与保护",
|
||||
copy: "隐私政策正文将在正式协议服务接入后展示。敏感资料默认按权限与脱敏规则展示。",
|
||||
},
|
||||
{
|
||||
key: "version",
|
||||
label: "版本说明",
|
||||
note: `当前版本 ${appVersion}`,
|
||||
copy: `当前安装版本为 ${appVersion}。基础版本采用浅色国风主题。`,
|
||||
},
|
||||
];
|
||||
const activeAgreement = reactive({ label: "", copy: "" });
|
||||
const agreementVisible = ref(false);
|
||||
const logoutVisible = ref(false);
|
||||
const logoutSubmitting = ref(false);
|
||||
const logoutRequestController = createRequestController();
|
||||
const openAgreement = (item) => { activeAgreement.label = item.label; activeAgreement.copy = item.copy; agreementVisible.value = true; };
|
||||
const openAgreement = (item) => {
|
||||
activeAgreement.label = item.label;
|
||||
activeAgreement.copy = item.copy;
|
||||
agreementVisible.value = true;
|
||||
};
|
||||
const confirmLogout = async () => {
|
||||
if (logoutSubmitting.value) return false;
|
||||
logoutSubmitting.value = true;
|
||||
@@ -68,5 +137,98 @@ onUnload(() => logoutRequestController.abort());
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.about-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.brand-card{@include adaptive.adaptive-profile-summary;display:flex;min-height:300rpx;flex-direction:column;align-items:center;justify-content:center;padding:36rpx 44rpx;text-align:center}.brand-card image{width:92rpx;height:106rpx}.brand-card text{display:block}.brand-card text:nth-child(2){margin-top:6rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:40rpx;font-weight:700;letter-spacing:4rpx}.brand-card text:nth-child(3){margin-top:8rpx;color:$ink-muted;font-size:22rpx;line-height:1.5}.brand-card text:last-child{margin-top:10rpx;color:$ink-muted;font-size:20rpx}.settings-list{display:flex;flex-direction:column;gap:12rpx;margin-top:22rpx}.settings-row{@include adaptive.adaptive-profile-field;display:grid;grid-template-columns:minmax(0,1fr) 32rpx;min-height:104rpx;align-items:center;gap:18rpx;padding:18rpx 30rpx}.settings-row view{min-width:0}.settings-row text{display:block;overflow-wrap:anywhere}.settings-row text:first-child{color:$ink;font-size:24rpx;font-weight:700}.settings-row text:last-child{margin-top:6rpx;color:$ink-muted;font-size:20rpx}.settings-row image{width:30rpx;height:30rpx}.page-content>.app-button{margin-top:28rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}}
|
||||
.about-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-layer {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 28rpx 30rpx 72rpx;
|
||||
}
|
||||
.brand-card {
|
||||
@include adaptive.adaptive-profile-summary;
|
||||
display: flex;
|
||||
min-height: 300rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 36rpx 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.brand-card image {
|
||||
width: 92rpx;
|
||||
height: 106rpx;
|
||||
}
|
||||
.brand-card text {
|
||||
display: block;
|
||||
}
|
||||
.brand-card text:nth-child(2) {
|
||||
margin-top: 6rpx;
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.brand-card text:nth-child(3) {
|
||||
margin-top: 8rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.brand-card text:last-child {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.settings-row {
|
||||
@include adaptive.adaptive-profile-field;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 32rpx;
|
||||
min-height: 104rpx;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 18rpx 30rpx;
|
||||
}
|
||||
.settings-row view {
|
||||
min-width: 0;
|
||||
}
|
||||
.settings-row text {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.settings-row text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.settings-row text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.settings-row image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.page-content > .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.page-content {
|
||||
padding-right: 22rpx;
|
||||
padding-left: 22rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
? "从第一位值得铭记的家人开始建立人物录。"
|
||||
: peopleState === "invalid"
|
||||
? "没有找到可访问的成员家谱，页面不会展示其他家谱人物。"
|
||||
: "请稍后重新进入，已有档案不会受到影响。"
|
||||
: "请稍后重新进入，已有档案不会受到影响。"
|
||||
}}</text>
|
||||
</view>
|
||||
<AppButton
|
||||
@@ -111,7 +111,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, openPage } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -298,7 +302,8 @@ onUnload(() => {
|
||||
.people-result-empty,
|
||||
.people-state-card {
|
||||
margin-top: 38rpx;
|
||||
background: url("/static/assets/modules/records/transparent/r01-person-name-card.png") top center / 100% 220rpx no-repeat;
|
||||
background: url("/static/assets/modules/records/transparent/r01-person-name-card.png")
|
||||
top center / 100% 220rpx no-repeat;
|
||||
text-align: center;
|
||||
}
|
||||
.people-state-card__copy {
|
||||
|
||||
@@ -1,50 +1,84 @@
|
||||
<!-- 页面编号：R-02；用途：人物录详情与不写库的人物资料预览。 -->
|
||||
<template>
|
||||
<view class="person-detail-page" :class="`person-detail-state--${personState}`">
|
||||
<view
|
||||
class="person-detail-page"
|
||||
:class="`person-detail-state--${personState}`"
|
||||
>
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="person-detail-header">
|
||||
<PageHeader
|
||||
title="人物详情"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
/>
|
||||
<PageHeader title="人物详情" custom-back @back="requestBack" />
|
||||
</view>
|
||||
|
||||
<view v-if="personState === 'loading'" class="person-detail-loading">
|
||||
<AppLoading text="正在读取人物档案" description="请稍候，正在整理人物资料。" />
|
||||
<AppLoading
|
||||
text="正在读取人物档案"
|
||||
description="请稍候，正在整理人物资料。"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-else class="person-detail-content">
|
||||
<template v-if="personState === 'detail'">
|
||||
<view class="person-identity-card">
|
||||
<view class="person-identity-card__copy">
|
||||
<text class="person-identity-card__name">{{ person.name || "待填写姓名" }}</text>
|
||||
<text class="person-identity-card__meta">{{ person.relation || "人物预览" }} · 第 {{ person.generation || "—" }} 世</text>
|
||||
<text class="person-identity-card__name">{{
|
||||
person.name || "待填写姓名"
|
||||
}}</text>
|
||||
<text class="person-identity-card__meta"
|
||||
>{{ person.relation || "人物预览" }} · 第
|
||||
{{ person.generation || "—" }} 世</text
|
||||
>
|
||||
<text class="person-identity-card__hint">人物录档案</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="personState === 'detail'">
|
||||
<view v-for="item in detailSections" :key="item.title" class="person-archive-card">
|
||||
<view><text>{{ item.title }}</text><text>{{ item.copy || "未填写" }}</text></view>
|
||||
<view
|
||||
v-for="item in detailSections"
|
||||
:key="item.title"
|
||||
class="person-archive-card"
|
||||
>
|
||||
<view
|
||||
><text>{{ item.title }}</text
|
||||
><text>{{ item.copy || "未填写" }}</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="person-related-actions">
|
||||
<AppButton type="secondary" block label="成长日志" @click="toGrowthJournal" />
|
||||
<view class="person-related-unavailable"><text>人生大事</text><text>暂未开放</text></view>
|
||||
<AppButton
|
||||
type="secondary"
|
||||
block
|
||||
label="成长日志"
|
||||
@click="toGrowthJournal"
|
||||
/>
|
||||
<view class="person-related-unavailable"
|
||||
><text>人生大事</text><text>暂未开放</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="person-edit-action" @click="toMemberProfile"><AppButton block label="查看成员档案" /></view>
|
||||
<view class="person-edit-action" @click="toMemberProfile"
|
||||
><AppButton block label="查看成员档案"
|
||||
/></view>
|
||||
</template>
|
||||
|
||||
<view v-else class="person-state-card">
|
||||
<view>
|
||||
<text>{{ personState === 'expired' ? '人物档案已失效' : '人物档案暂不可用' }}</text>
|
||||
<text>{{ personState === 'expired' ? '这份人物资料不存在或不属于当前家谱。' : '请返回人物录重新选择，页面不会回退到其他人物。' }}</text>
|
||||
<text>{{
|
||||
personState === "expired" ? "人物档案已失效" : "人物档案暂不可用"
|
||||
}}</text>
|
||||
<text>{{
|
||||
personState === "expired"
|
||||
? "这份人物资料不存在或不属于当前家谱。"
|
||||
: "请返回人物录重新选择，页面不会回退到其他人物。"
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="person-state-action"><AppButton type="secondary" block label="返回人物录" @click="returnToPeople" /></view>
|
||||
<view class="person-state-action"
|
||||
><AppButton
|
||||
type="secondary"
|
||||
block
|
||||
label="返回人物录"
|
||||
@click="returnToPeople"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -55,7 +89,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
@@ -146,7 +184,12 @@ const loadPerson = async () => {
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query.genealogyId || "");
|
||||
personId.value = String(query.personId || "");
|
||||
if (query.mode !== "view" || !genealogyId.value || !personId.value || query.state === "error") {
|
||||
if (
|
||||
query.mode !== "view" ||
|
||||
!genealogyId.value ||
|
||||
!personId.value ||
|
||||
query.state === "error"
|
||||
) {
|
||||
personState.value = "error";
|
||||
return;
|
||||
}
|
||||
@@ -163,31 +206,148 @@ onUnload(() => {
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.person-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.person-detail-header,.person-detail-loading,.person-detail-content { z-index: 1; }
|
||||
.person-detail-loading { min-height: calc(100vh - 100rpx); }
|
||||
.person-detail-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.person-identity-card { @include adaptive.adaptive-records-person; display: flex; min-height: 190rpx; padding: 30rpx 10%; }
|
||||
.person-identity-card__copy { display: flex; flex: 1; flex-direction: column; justify-content: center; }
|
||||
.person-identity-card__copy text { display: block; }
|
||||
.person-identity-card__name { color: $ink; font-family: STKaiti,KaiTi,serif; font-size: 38rpx; font-weight: 700; }
|
||||
.person-identity-card__meta { margin-top: 8rpx; color: $ink-muted; font-size: 25rpx; font-weight: 600; }
|
||||
.person-identity-card__hint { margin-top: 8rpx; color: #806a51; font-size: 21rpx; }
|
||||
.person-archive-card { min-height: 154rpx; margin-top: 14rpx; padding: 32rpx 42rpx; box-sizing: border-box; }
|
||||
.person-archive-card,.person-state-card { @include adaptive.adaptive-records-content; }
|
||||
.person-archive-card text { display: block; }
|
||||
.person-archive-card text:first-child { color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||||
.person-archive-card text:last-child { margin-top: 11rpx; color: $ink; font-size: 24rpx; line-height: 1.55; }
|
||||
.person-edit-action { margin-top: 20rpx; }
|
||||
.person-related-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14rpx; margin-top: 18rpx; }
|
||||
.person-related-unavailable { display:flex; min-height:88rpx; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; border:1rpx solid rgba(128,89,49,.24); border-radius:8rpx; background:rgba(255,252,245,.38); color:$ink-muted; }
|
||||
.person-related-unavailable text:first-child { font-size:25rpx; font-weight:700; }
|
||||
.person-related-unavailable text:last-child { margin-top:4rpx; font-size:20rpx; }
|
||||
.person-state-card { display: flex; flex-direction: column; min-height: 300rpx; margin-top: 26rpx; padding: 72rpx 54rpx 42rpx; box-sizing: border-box; text-align: center; }
|
||||
.person-state-card text { display: block; }
|
||||
.person-state-card text:first-child { color: $ink; font-family: STKaiti,KaiTi,serif; font-size: 34rpx; font-weight: 700; }
|
||||
.person-state-card text:last-child { margin-top: 16rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.6; }
|
||||
.person-state-action { margin: 24rpx 48rpx 0; }
|
||||
@media (min-width: 400px) { .person-detail-content { padding-right: 32rpx; padding-left: 32rpx; } }
|
||||
@media (max-width: 340px) { .person-detail-content { padding-right: 18rpx; padding-left: 18rpx; } .person-identity-card__name { font-size: 35rpx; } }
|
||||
.person-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.person-detail-header,
|
||||
.person-detail-loading,
|
||||
.person-detail-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.person-detail-loading {
|
||||
min-height: calc(100vh - 100rpx);
|
||||
}
|
||||
.person-detail-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.person-identity-card {
|
||||
@include adaptive.adaptive-records-person;
|
||||
display: flex;
|
||||
min-height: 190rpx;
|
||||
padding: 30rpx 10%;
|
||||
}
|
||||
.person-identity-card__copy {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.person-identity-card__copy text {
|
||||
display: block;
|
||||
}
|
||||
.person-identity-card__name {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.person-identity-card__meta {
|
||||
margin-top: 8rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 25rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.person-identity-card__hint {
|
||||
margin-top: 8rpx;
|
||||
color: #806a51;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.person-archive-card {
|
||||
min-height: 154rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 32rpx 42rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.person-archive-card,
|
||||
.person-state-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.person-archive-card text {
|
||||
display: block;
|
||||
}
|
||||
.person-archive-card text:first-child {
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.person-archive-card text:last-child {
|
||||
margin-top: 11rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.person-edit-action {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.person-related-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.person-related-unavailable {
|
||||
display: flex;
|
||||
min-height: 88rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.24);
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 252, 245, 0.38);
|
||||
color: $ink-muted;
|
||||
}
|
||||
.person-related-unavailable text:first-child {
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.person-related-unavailable text:last-child {
|
||||
margin-top: 4rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.person-state-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300rpx;
|
||||
margin-top: 26rpx;
|
||||
padding: 72rpx 54rpx 42rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
.person-state-card text {
|
||||
display: block;
|
||||
}
|
||||
.person-state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.person-state-card text:last-child {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.person-state-action {
|
||||
margin: 24rpx 48rpx 0;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.person-detail-content {
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
}
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.person-detail-content {
|
||||
padding-right: 18rpx;
|
||||
padding-left: 18rpx;
|
||||
}
|
||||
.person-identity-card__name {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+146
-27
@@ -2,15 +2,45 @@
|
||||
<template>
|
||||
<view class="gift-page">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header"><PageHeader title="贺礼簿" :action="valid ? '新建' : ''" custom-back @back="returnToFamily" @action="createRelative" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader
|
||||
title="贺礼簿"
|
||||
:action="valid ? '新建' : ''"
|
||||
custom-back
|
||||
@back="returnToFamily"
|
||||
@action="createRelative"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="!valid" class="state-card"><text>贺礼簿入口无效</text><AppButton block label="返回上一页" @click="returnToFamily" /></view>
|
||||
<view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取亲友往来" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取亲友往来</text><AppButton block type="secondary" label="重新加载" @click="loadRecords" /></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>还没有亲友往来记录</text><AppButton block label="新建往来记录" @click="createRelative" /></view>
|
||||
<view v-if="!valid" class="state-card"
|
||||
><text>贺礼簿入口无效</text
|
||||
><AppButton block label="返回上一页" @click="returnToFamily"
|
||||
/></view>
|
||||
<view v-else-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取亲友往来"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取亲友往来</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadRecords"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>还没有亲友往来记录</text
|
||||
><AppButton block label="新建往来记录" @click="createRelative"
|
||||
/></view>
|
||||
<view v-else class="record-list">
|
||||
<view v-for="item in records" :key="item.id" class="record-card">
|
||||
<view><text>{{ item.name }}</text><text>{{ item.relation }}{{ item.event ? ` · ${item.event}` : '' }}</text><text v-if="item.time || item.content">{{ item.time || item.content }}</text></view>
|
||||
<view
|
||||
><text>{{ item.name }}</text
|
||||
><text
|
||||
>{{ item.relation
|
||||
}}{{ item.event ? ` · ${item.event}` : "" }}</text
|
||||
><text v-if="item.time || item.content">{{
|
||||
item.time || item.content
|
||||
}}</text></view
|
||||
>
|
||||
<text v-if="item.amount">¥{{ item.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -25,7 +55,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, openPage, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -39,35 +73,120 @@ const loadRecords = async () => {
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getRelativeRecords(genealogyId.value, { requestController: controller });
|
||||
const rows = await appApi.getRelativeRecords(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
records.value = rows.map((item) => ({
|
||||
id: String(item.relativeId || ""),
|
||||
name: String(item.relativeName || "未命名亲友"),
|
||||
relation: String(item.relationName || ""),
|
||||
event: String(item.eventName || ""),
|
||||
time: String(item.eventTime || ""),
|
||||
amount: item.giftAmount == null || item.giftAmount === "" ? "" : String(item.giftAmount),
|
||||
content: String(item.recordContent || ""),
|
||||
})).filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
records.value = rows
|
||||
.map((item) => ({
|
||||
id: String(item.relativeId || ""),
|
||||
name: String(item.relativeName || "未命名亲友"),
|
||||
relation: String(item.relationName || ""),
|
||||
event: String(item.eventName || ""),
|
||||
time: String(item.eventTime || ""),
|
||||
amount:
|
||||
item.giftAmount == null || item.giftAmount === ""
|
||||
? ""
|
||||
: String(item.giftAmount),
|
||||
content: String(item.recordContent || ""),
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
state.value = records.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
state.value = "error";
|
||||
}
|
||||
};
|
||||
const returnToFamily = () => valid.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
|
||||
const createRelative = () => valid.value ? openPage("R04", { genealogyId: genealogyId.value, mode: "create" }, "R03") : Promise.resolve(false);
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadRecords(); });
|
||||
onShow(() => { if (valid.value && state.value !== "loading") loadRecords(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
const returnToFamily = () =>
|
||||
valid.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
|
||||
const createRelative = () =>
|
||||
valid.value
|
||||
? openPage("R04", { genealogyId: genealogyId.value, mode: "create" }, "R03")
|
||||
: Promise.resolve(false);
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (valid.value) loadRecords();
|
||||
});
|
||||
onShow(() => {
|
||||
if (valid.value && state.value !== "loading") loadRecords();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.gift-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.state-card, .record-card { @include adaptive.adaptive-records-content; }
|
||||
.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; text-align: center; color: $ink; font-size: 28rpx; }.state-card .app-button { width: 100%; margin-top: 24rpx; }
|
||||
.record-list { display: flex; flex-direction: column; gap: 16rpx; }.record-card { display: flex; min-height: 138rpx; align-items: center; justify-content: space-between; gap: 18rpx; padding: 28rpx 32rpx; }.record-card > view { min-width: 0; flex: 1; }.record-card text { display: block; }.record-card > view text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; overflow-wrap: anywhere; }.record-card > view text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }.record-card > text { flex: 0 0 auto; color: $brand-red; font-size: 22rpx; }
|
||||
.gift-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.record-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 42rpx;
|
||||
text-align: center;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.record-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.record-card {
|
||||
display: flex;
|
||||
min-height: 138rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.record-card > view {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.record-card text {
|
||||
display: block;
|
||||
}
|
||||
.record-card > view text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.record-card > view text:not(:first-child) {
|
||||
margin-top: 7rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.record-card > text {
|
||||
flex: 0 0 auto;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,32 +1,130 @@
|
||||
<!-- 页面编号：R-04；用途：按 Apifox 的完整 AppRelativeRecordBody 创建亲友往来记录。 -->
|
||||
<template>
|
||||
<view class="gift-editor-page" :class="`relative-editor-state--${editorState}`">
|
||||
<view
|
||||
class="gift-editor-page"
|
||||
:class="`relative-editor-state--${editorState}`"
|
||||
>
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header"><PageHeader title="新建往来记录" custom-back @back="requestBack" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="新建往来记录" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="editorState === 'form'" class="form-card">
|
||||
<text>记录一份家人往来</text>
|
||||
<text class="form-copy">除亲友姓名外，其他字段均可按需填写；留空时不提交该字段。</text>
|
||||
<view class="field-row"><text><text class="required-mark">*</text>亲友姓名</text><input v-model="form.relativeName" placeholder="请输入亲友姓名" @input="submitError = ''" /></view>
|
||||
<view class="field-row"><text>关系称谓</text><input v-model="form.relationName" placeholder="请输入关系称谓" @input="submitError = ''" /></view>
|
||||
<view class="field-row"><text>礼仪事项</text><input v-model="form.eventName" placeholder="请输入礼仪事项" @input="submitError = ''" /></view>
|
||||
<view class="field-row field-row--picker"><text>事项日期</text><picker mode="date" :value="form.eventDate" @change="selectEventDate"><view>{{ form.eventDate || '请选择' }}</view></picker></view>
|
||||
<view class="field-row field-row--picker"><text>事项时间</text><picker mode="time" :value="form.eventClock" @change="selectEventClock"><view>{{ form.eventClock || '请选择' }}</view></picker></view>
|
||||
<view class="field-row"><text>礼金金额</text><input v-model="form.giftAmount" type="digit" placeholder="请输入礼金金额" @input="submitError = ''" /></view>
|
||||
<view class="field-row field-row--textarea"><text>往来备注</text><textarea v-model="form.recordContent" auto-height placeholder="记录往来内容" @input="submitError = ''" /></view>
|
||||
<text class="form-copy"
|
||||
>除亲友姓名外，其他字段均可按需填写；留空时不提交该字段。</text
|
||||
>
|
||||
<view class="field-row"
|
||||
><text><text class="required-mark">*</text>亲友姓名</text
|
||||
><input
|
||||
v-model="form.relativeName"
|
||||
placeholder="请输入亲友姓名"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<view class="field-row"
|
||||
><text>关系称谓</text
|
||||
><input
|
||||
v-model="form.relationName"
|
||||
placeholder="请输入关系称谓"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<view class="field-row"
|
||||
><text>礼仪事项</text
|
||||
><input
|
||||
v-model="form.eventName"
|
||||
placeholder="请输入礼仪事项"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<view class="field-row field-row--picker"
|
||||
><text>事项日期</text
|
||||
><picker mode="date" :value="form.eventDate" @change="selectEventDate"
|
||||
><view>{{ form.eventDate || "请选择" }}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field-row field-row--picker"
|
||||
><text>事项时间</text
|
||||
><picker
|
||||
mode="time"
|
||||
:value="form.eventClock"
|
||||
@change="selectEventClock"
|
||||
><view>{{ form.eventClock || "请选择" }}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field-row"
|
||||
><text>礼金金额</text
|
||||
><input
|
||||
v-model="form.giftAmount"
|
||||
type="digit"
|
||||
placeholder="请输入礼金金额"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<view class="field-row field-row--textarea"
|
||||
><text>往来备注</text
|
||||
><textarea
|
||||
v-model="form.recordContent"
|
||||
auto-height
|
||||
placeholder="记录往来内容"
|
||||
@input="submitError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="upload-field">
|
||||
<view><text>相关图片</text><text>图片选定后会先取得真实上传回执，并在提交记录时关联。</text></view>
|
||||
<button class="upload-button" :disabled="isUploading || isSubmitting" @click="uploadImage">{{ isUploading ? '上传中…' : '添加图片' }}</button>
|
||||
<text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`">已上传：{{ receipt.fileName || '图片' }}</text>
|
||||
<view
|
||||
><text>相关图片</text
|
||||
><text
|
||||
>图片选定后会先取得真实上传回执，并在提交记录时关联。</text
|
||||
></view
|
||||
>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="isUploading || isSubmitting"
|
||||
@click="uploadImage"
|
||||
>
|
||||
{{ isUploading ? "上传中…" : "添加图片" }}
|
||||
</button>
|
||||
<text
|
||||
v-for="(receipt, index) in mediaReceipts"
|
||||
:key="`${receipt.ossId}-${index}`"
|
||||
>已上传：{{ receipt.fileName || "图片" }}</text
|
||||
>
|
||||
<text v-if="uploadError" class="save-error">{{ uploadError }}</text>
|
||||
</view>
|
||||
<view class="field-row"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="submitError = ''" /></view>
|
||||
<view class="field-row"
|
||||
><text>排序值</text
|
||||
><input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
@input="submitError = ''"
|
||||
/></view>
|
||||
<text v-if="submitError" class="save-error">{{ submitError }}</text>
|
||||
<AppButton block :disabled="isSubmitting || isUploading" :label="isSubmitting ? '正在提交' : '提交往来记录'" @click="saveRelative" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="isSubmitting || isUploading"
|
||||
:label="isSubmitting ? '正在提交' : '提交往来记录'"
|
||||
@click="saveRelative"
|
||||
/>
|
||||
</view>
|
||||
<view v-else class="state-card"><text>{{ resultCopy.title }}</text><text>{{ resultCopy.copy }}</text><AppButton block :label="resultCopy.action" @click="handleResultAction" /></view>
|
||||
<view v-else class="state-card"
|
||||
><text>{{ resultCopy.title }}</text
|
||||
><text>{{ resultCopy.copy }}</text
|
||||
><AppButton
|
||||
block
|
||||
:label="resultCopy.action"
|
||||
@click="handleResultAction"
|
||||
/></view>
|
||||
</view>
|
||||
<AppDialog :visible="discardVisible" :close-on-mask="false" eyebrow="放弃确认" title="放弃当前填写？" message="尚未提交的内容将从当前页面清除。" confirm-text="确认放弃" cancel-text="继续填写" show-cancel @confirm="confirmDiscard" @cancel="cancelDiscard" />
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
:close-on-mask="false"
|
||||
eyebrow="放弃确认"
|
||||
title="放弃当前填写？"
|
||||
message="尚未提交的内容将从当前页面清除。"
|
||||
confirm-text="确认放弃"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
@confirm="confirmDiscard"
|
||||
@cancel="cancelDiscard"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -37,10 +135,22 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const editorState = ref("form");
|
||||
@@ -49,74 +159,275 @@ const isUploading = ref(false);
|
||||
const discardVisible = ref(false);
|
||||
const submitError = ref("");
|
||||
const uploadError = ref("");
|
||||
const form = reactive({ relativeName: "", relationName: "", eventName: "", eventDate: "", eventClock: "", giftAmount: "", recordContent: "", sortOrder: "" });
|
||||
const form = reactive({
|
||||
relativeName: "",
|
||||
relationName: "",
|
||||
eventName: "",
|
||||
eventDate: "",
|
||||
eventClock: "",
|
||||
giftAmount: "",
|
||||
recordContent: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
const mediaReceipts = ref([]);
|
||||
const requestController = createRequestController();
|
||||
const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
|
||||
const eventTime = computed(() => form.eventDate ? `${form.eventDate} ${form.eventClock || "00:00"}:00` : "");
|
||||
const isDirty = computed(() => Object.values(form).some((value) => String(value).trim()) || mediaReceipts.value.length > 0);
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const resultCopy = computed(() => editorState.value === "success"
|
||||
? { title: "往来记录已提交服务端", copy: "返回贺礼簿后会重新读取服务端记录。", action: "返回贺礼簿" }
|
||||
: { title: "往来记录入口无效", copy: "没有取得有效家谱标识，页面不会创建无归属记录。", action: "返回上一页" },
|
||||
const mediaOssIds = computed(() =>
|
||||
mediaReceipts.value.map((item) => item.ossId).join(","),
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const eventTime = computed(() =>
|
||||
form.eventDate ? `${form.eventDate} ${form.eventClock || "00:00"}:00` : "",
|
||||
);
|
||||
const isDirty = computed(
|
||||
() =>
|
||||
Object.values(form).some((value) => String(value).trim()) ||
|
||||
mediaReceipts.value.length > 0,
|
||||
);
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const resultCopy = computed(() =>
|
||||
editorState.value === "success"
|
||||
? {
|
||||
title: "往来记录已提交服务端",
|
||||
copy: "返回贺礼簿后会重新读取服务端记录。",
|
||||
action: "返回贺礼簿",
|
||||
}
|
||||
: {
|
||||
title: "往来记录入口无效",
|
||||
copy: "没有取得有效家谱标识，页面不会创建无归属记录。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
const requestDiscardConfirmation = discardConfirmation.request;
|
||||
const confirmDiscard = discardConfirmation.confirm;
|
||||
const cancelDiscard = discardConfirmation.cancel;
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (!hasValidContext.value || query?.mode !== "create") editorState.value = "invalid";
|
||||
if (!hasValidContext.value || query?.mode !== "create")
|
||||
editorState.value = "invalid";
|
||||
});
|
||||
const selectEventDate = (event) => { form.eventDate = event.detail.value || ""; submitError.value = ""; };
|
||||
const selectEventClock = (event) => { form.eventClock = event.detail.value || ""; submitError.value = ""; };
|
||||
const selectEventDate = (event) => {
|
||||
form.eventDate = event.detail.value || "";
|
||||
submitError.value = "";
|
||||
};
|
||||
const selectEventClock = (event) => {
|
||||
form.eventClock = event.detail.value || "";
|
||||
submitError.value = "";
|
||||
};
|
||||
const uploadImage = async () => {
|
||||
if (isUploading.value || isSubmitting.value) return;
|
||||
isUploading.value = true;
|
||||
uploadError.value = "";
|
||||
try {
|
||||
mediaReceipts.value = [...mediaReceipts.value, await pickAndUploadImage({ requestController })];
|
||||
mediaReceipts.value = [
|
||||
...mediaReceipts.value,
|
||||
await pickAndUploadImage({ requestController }),
|
||||
];
|
||||
} catch (error) {
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error)) uploadError.value = error?.message || "图片上传失败，请稍后重试。";
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error))
|
||||
uploadError.value = error?.message || "图片上传失败，请稍后重试。";
|
||||
} finally {
|
||||
isUploading.value = false;
|
||||
}
|
||||
};
|
||||
const saveRelative = async () => {
|
||||
if (isSubmitting.value || isUploading.value || !hasValidContext.value) return;
|
||||
if (!form.relativeName.trim()) { submitError.value = "请填写亲友姓名"; return; }
|
||||
if (!form.relativeName.trim()) {
|
||||
submitError.value = "请填写亲友姓名";
|
||||
return;
|
||||
}
|
||||
isSubmitting.value = true;
|
||||
submitError.value = "";
|
||||
try {
|
||||
const { eventDate, eventClock, ...recordForm } = form;
|
||||
await appApi.createRelativeRecord(genealogyId.value, { ...recordForm, eventTime: eventTime.value, mediaOssIds: mediaOssIds.value }, { requestController });
|
||||
Object.assign(form, { relativeName: "", relationName: "", eventName: "", eventDate: "", eventClock: "", giftAmount: "", recordContent: "", sortOrder: "" });
|
||||
await appApi.createRelativeRecord(
|
||||
genealogyId.value,
|
||||
{
|
||||
...recordForm,
|
||||
eventTime: eventTime.value,
|
||||
mediaOssIds: mediaOssIds.value,
|
||||
},
|
||||
{ requestController },
|
||||
);
|
||||
Object.assign(form, {
|
||||
relativeName: "",
|
||||
relationName: "",
|
||||
eventName: "",
|
||||
eventDate: "",
|
||||
eventClock: "",
|
||||
giftAmount: "",
|
||||
recordContent: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
mediaReceipts.value = [];
|
||||
editorState.value = "success";
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) submitError.value = error?.message || "往来记录提交失败，请稍后重试。";
|
||||
if (!isRequestCancelled(error))
|
||||
submitError.value = error?.message || "往来记录提交失败，请稍后重试。";
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => runBackGuard({ transientOpen: discardVisible.value, dirty: isDirty.value, submitting: isSubmitting.value || isUploading.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": requestDiscardConfirmation });
|
||||
const handleResultAction = () => editorState.value === "success" ? returnTo("R03", { genealogyId: genealogyId.value }) : goBack();
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: isSubmitting.value || isUploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": requestDiscardConfirmation,
|
||||
});
|
||||
const handleResultAction = () =>
|
||||
editorState.value === "success"
|
||||
? returnTo("R03", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { requestController.abort(); discardConfirmation.dispose(); });
|
||||
onUnmounted(() => {
|
||||
requestController.abort();
|
||||
discardConfirmation.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.gift-editor-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.form-card, .state-card { box-sizing: border-box; padding: 46rpx; @include adaptive.adaptive-records-content; }
|
||||
.form-card > text:first-child, .state-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
|
||||
.field-row { display: grid; grid-template-columns: 142rpx minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }
|
||||
.field-row > text, .upload-field > view > text:first-child { color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }
|
||||
.field-row input, .field-row textarea { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }.field-row--textarea { align-items: start; }.field-row textarea { min-height: 72rpx; text-align: left; }
|
||||
.field-row--picker picker { min-width: 0; }.field-row--picker picker > view { min-height: 48rpx; display: flex; align-items: center; justify-content: flex-end; color: $ink; font-size: 23rpx; }
|
||||
.upload-field { display: grid; gap: 12rpx; margin-top: 14rpx; padding: 18rpx 24rpx; @include adaptive.adaptive-records-field; }.upload-field > view > text { display: block; }.upload-field > view > text:last-child { margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }
|
||||
.upload-button { justify-self: start; min-height: 60rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-field > text { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
|
||||
.save-error { display: block; margin-top: 14rpx; color: $brand-red; font-size: 22rpx; }.form-card .app-button { margin-top: 18rpx; }.state-card { min-height: 340rpx; padding-top: 80rpx; text-align: center; }.state-card > text:nth-child(2) { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }.state-card .app-button { margin-top: 28rpx; }
|
||||
.gift-editor-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.form-card,
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx;
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.form-card > text:first-child,
|
||||
.state-card > text:first-child {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.form-copy {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.field-row {
|
||||
display: grid;
|
||||
grid-template-columns: 142rpx minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12rpx 20rpx;
|
||||
min-height: 82rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 14rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
@include adaptive.adaptive-records-field;
|
||||
}
|
||||
.field-row > text,
|
||||
.upload-field > view > text:first-child {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.field-row input,
|
||||
.field-row textarea {
|
||||
min-width: 0;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.field-row--textarea {
|
||||
align-items: start;
|
||||
}
|
||||
.field-row textarea {
|
||||
min-height: 72rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.field-row--picker picker {
|
||||
min-width: 0;
|
||||
}
|
||||
.field-row--picker picker > view {
|
||||
min-height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.upload-field {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 18rpx 24rpx;
|
||||
@include adaptive.adaptive-records-field;
|
||||
}
|
||||
.upload-field > view > text {
|
||||
display: block;
|
||||
}
|
||||
.upload-field > view > text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 60rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-field > text {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.save-error {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.form-card .app-button {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.state-card {
|
||||
min-height: 340rpx;
|
||||
padding-top: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card > text:nth-child(2) {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,47 @@
|
||||
<template>
|
||||
<view class="ritual-list-page">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header"><PageHeader title="礼仪活动" :action="valid ? '新建' : ''" custom-back @back="returnToFamily" @action="createCeremony" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader
|
||||
title="礼仪活动"
|
||||
:action="valid ? '新建' : ''"
|
||||
custom-back
|
||||
@back="returnToFamily"
|
||||
@action="createCeremony"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="!valid" class="state-card"><text>礼仪活动入口无效</text><AppButton block label="返回上一页" @click="returnToFamily" /></view>
|
||||
<view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取礼仪活动" /></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取礼仪活动</text><AppButton block type="secondary" label="重新加载" @click="loadCeremonies" /></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"><text>还没有礼仪活动</text><AppButton block label="新建礼仪活动" @click="createCeremony" /></view>
|
||||
<view v-else class="ceremony-list"><view v-for="item in ceremonies" :key="item.id" class="ceremony-card" @click="openCeremony(item)"><view><text>{{ item.title }}</text><text>{{ item.type }}{{ item.time ? ` · ${item.time}` : '' }}</text><text v-if="item.description">{{ item.description }}</text></view><text>{{ item.giftCount }} 笔献礼</text></view></view>
|
||||
<view v-if="!valid" class="state-card"
|
||||
><text>礼仪活动入口无效</text
|
||||
><AppButton block label="返回上一页" @click="returnToFamily"
|
||||
/></view>
|
||||
<view v-else-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取礼仪活动"
|
||||
/></view>
|
||||
<view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取礼仪活动</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadCeremonies"
|
||||
/></view>
|
||||
<view v-else-if="state === 'empty'" class="state-card"
|
||||
><text>还没有礼仪活动</text
|
||||
><AppButton block label="新建礼仪活动" @click="createCeremony"
|
||||
/></view>
|
||||
<view v-else class="ceremony-list"
|
||||
><view
|
||||
v-for="item in ceremonies"
|
||||
:key="item.id"
|
||||
class="ceremony-card"
|
||||
@click="openCeremony(item)"
|
||||
><view
|
||||
><text>{{ item.title }}</text
|
||||
><text>{{ item.type }}{{ item.time ? ` · ${item.time}` : "" }}</text
|
||||
><text v-if="item.description">{{ item.description }}</text></view
|
||||
><text>{{ item.giftCount }} 笔献礼</text></view
|
||||
></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -19,21 +53,140 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, openPage, returnTo } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref(""); const ceremonies = ref([]); const state = ref("loading"); const controller = createRequestController(); let active = true;
|
||||
const genealogyId = ref("");
|
||||
const ceremonies = ref([]);
|
||||
const state = ref("loading");
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const loadCeremonies = async () => { if (!valid.value) return; controller.abort(); state.value = "loading"; try { const rows = await appApi.getCeremonies(genealogyId.value, { requestController: controller }); if (!active) return; ceremonies.value = rows.map((item) => ({ id: String(item.ceremonyId), title: String(item.ceremonyTitle || "未命名活动"), type: String(item.ceremonyType || ""), time: String(item.ceremonyTime || ""), description: String(item.ceremonyDesc || ""), giftCount: Number.isSafeInteger(item.giftCount) ? item.giftCount : 0 })).filter((item) => /^[1-9]\d*$/.test(item.id)); state.value = ceremonies.value.length ? "ready" : "empty"; } catch (error) { if (!active || isRequestCancelled(error)) return; state.value = "error"; } };
|
||||
const returnToFamily = () => valid.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
|
||||
const createCeremony = () => valid.value ? openPage("R07", { genealogyId: genealogyId.value, mode: "create" }, "R05") : Promise.resolve(false);
|
||||
const openCeremony = (item) => openPage("R06", { genealogyId: genealogyId.value, ceremonyId: item.id }, "R05");
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadCeremonies(); });
|
||||
onShow(() => { if (valid.value && state.value !== "loading") loadCeremonies(); });
|
||||
onUnload(() => { active = false; controller.abort(); });
|
||||
const loadCeremonies = async () => {
|
||||
if (!valid.value) return;
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getCeremonies(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
ceremonies.value = rows
|
||||
.map((item) => ({
|
||||
id: String(item.ceremonyId),
|
||||
title: String(item.ceremonyTitle || "未命名活动"),
|
||||
type: String(item.ceremonyType || ""),
|
||||
time: String(item.ceremonyTime || ""),
|
||||
description: String(item.ceremonyDesc || ""),
|
||||
giftCount: Number.isSafeInteger(item.giftCount) ? item.giftCount : 0,
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
state.value = ceremonies.value.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
state.value = "error";
|
||||
}
|
||||
};
|
||||
const returnToFamily = () =>
|
||||
valid.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
|
||||
const createCeremony = () =>
|
||||
valid.value
|
||||
? openPage("R07", { genealogyId: genealogyId.value, mode: "create" }, "R05")
|
||||
: Promise.resolve(false);
|
||||
const openCeremony = (item) =>
|
||||
openPage(
|
||||
"R06",
|
||||
{ genealogyId: genealogyId.value, ceremonyId: item.id },
|
||||
"R05",
|
||||
);
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (valid.value) loadCeremonies();
|
||||
});
|
||||
onShow(() => {
|
||||
if (valid.value && state.value !== "loading") loadCeremonies();
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.ritual-list-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card,.ceremony-card{@include adaptive.adaptive-records-content}.state-card{display:flex;min-height:320rpx;flex-direction:column;align-items:center;justify-content:center;padding:42rpx;text-align:center;color:$ink;font-size:28rpx}.state-card .app-button{width:100%;margin-top:24rpx}.ceremony-list{display:flex;flex-direction:column;gap:16rpx}.ceremony-card{display:flex;min-height:138rpx;align-items:center;justify-content:space-between;gap:18rpx;padding:28rpx 32rpx}.ceremony-card>view{min-width:0;flex:1}.ceremony-card text{display:block}.ceremony-card>view text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:30rpx;font-weight:700;overflow-wrap:anywhere}.ceremony-card>view text:not(:first-child){margin-top:7rpx;color:$ink-muted;font-size:21rpx;line-height:1.45;overflow-wrap:anywhere}.ceremony-card>text{flex:0 0 auto;color:$brand-red;font-size:21rpx}
|
||||
.ritual-list-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.ceremony-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 42rpx;
|
||||
text-align: center;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.ceremony-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.ceremony-card {
|
||||
display: flex;
|
||||
min-height: 138rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.ceremony-card > view {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.ceremony-card text {
|
||||
display: block;
|
||||
}
|
||||
.ceremony-card > view text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.ceremony-card > view text:not(:first-child) {
|
||||
margin-top: 7rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.ceremony-card > text {
|
||||
flex: 0 0 auto;
|
||||
color: $brand-red;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,154 @@
|
||||
<template>
|
||||
<view class="ritual-detail-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="礼仪详情" custom-back @back="returnToList" /></view><view class="page-content"><view v-if="!valid" class="state-card"><text>礼仪入口无效</text><AppButton block label="返回上一页" @click="returnToList" /></view><view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取礼仪详情" /></view><view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取礼仪详情</text><AppButton block type="secondary" label="重新加载" @click="loadDetail" /></view><view v-else class="detail-card"><text>{{ detail.title }}</text><text>{{ detail.type }}{{ detail.time ? ` · ${detail.time}` : '' }}</text><text v-if="detail.location">地点：{{ detail.location }}</text><text v-if="detail.description">{{ detail.description }}</text><text>已有 {{ detail.giftCount }} 笔献礼</text></view></view></view>
|
||||
<view class="ritual-detail-page"
|
||||
><ModulePageBackground module="records" /><view class="page-header"
|
||||
><PageHeader title="礼仪详情" custom-back @back="returnToList" /></view
|
||||
><view class="page-content"
|
||||
><view v-if="!valid" class="state-card"
|
||||
><text>礼仪入口无效</text
|
||||
><AppButton block label="返回上一页" @click="returnToList" /></view
|
||||
><view v-else-if="state === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取礼仪详情" /></view
|
||||
><view v-else-if="state === 'error'" class="state-card"
|
||||
><text>暂时无法读取礼仪详情</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadDetail" /></view
|
||||
><view v-else class="detail-card"
|
||||
><text>{{ detail.title }}</text
|
||||
><text
|
||||
>{{ detail.type }}{{ detail.time ? ` · ${detail.time}` : "" }}</text
|
||||
><text v-if="detail.location">地点：{{ detail.location }}</text
|
||||
><text v-if="detail.description">{{ detail.description }}</text
|
||||
><text>已有 {{ detail.giftCount }} 笔献礼</text></view
|
||||
></view
|
||||
></view
|
||||
>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, ref } from "vue"; import { onLoad, onUnload } from "@dcloudio/uni-app"; import AppButton from "@/components/AppButton.vue"; import AppLoading from "@/components/AppLoading.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js"; import { goBack, returnTo } from "@/utils/navigation.js";
|
||||
const genealogyId=ref(""); const ceremonyId=ref(""); const state=ref("loading"); const detail=ref({title:"",type:"",time:"",location:"",description:"",giftCount:0}); const controller=createRequestController(); let active=true; const valid=computed(()=>/^[1-9]\d*$/.test(genealogyId.value)&&/^[1-9]\d*$/.test(ceremonyId.value));
|
||||
const loadDetail=async()=>{if(!valid.value)return;controller.abort();state.value="loading";try{const item=await appApi.getCeremonyDetail(genealogyId.value,ceremonyId.value,{requestController:controller});if(!active)return;detail.value={title:String(item.ceremonyTitle||"未命名活动"),type:String(item.ceremonyType||""),time:String(item.ceremonyTime||""),location:String(item.location||item.locationAddress||""),description:String(item.ceremonyDesc||""),giftCount:Number.isSafeInteger(item.giftCount)?item.giftCount:0};state.value="ready";}catch(error){if(!active||isRequestCancelled(error))return;state.value="error";}};
|
||||
onLoad((query)=>{genealogyId.value=String(query?.genealogyId||"");ceremonyId.value=String(query?.ceremonyId||"");if(valid.value)loadDetail();else state.value="invalid";});onUnload(()=>{active=false;controller.abort();});const returnToList=()=>/^[1-9]\d*$/.test(genealogyId.value)?returnTo("R05",{genealogyId:genealogyId.value}):goBack();
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||||
const genealogyId = ref("");
|
||||
const ceremonyId = ref("");
|
||||
const state = ref("loading");
|
||||
const detail = ref({
|
||||
title: "",
|
||||
type: "",
|
||||
time: "",
|
||||
location: "",
|
||||
description: "",
|
||||
giftCount: 0,
|
||||
});
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const valid = computed(
|
||||
() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(ceremonyId.value),
|
||||
);
|
||||
const loadDetail = async () => {
|
||||
if (!valid.value) return;
|
||||
controller.abort();
|
||||
state.value = "loading";
|
||||
try {
|
||||
const item = await appApi.getCeremonyDetail(
|
||||
genealogyId.value,
|
||||
ceremonyId.value,
|
||||
{ requestController: controller },
|
||||
);
|
||||
if (!active) return;
|
||||
detail.value = {
|
||||
title: String(item.ceremonyTitle || "未命名活动"),
|
||||
type: String(item.ceremonyType || ""),
|
||||
time: String(item.ceremonyTime || ""),
|
||||
location: String(item.location || item.locationAddress || ""),
|
||||
description: String(item.ceremonyDesc || ""),
|
||||
giftCount: Number.isSafeInteger(item.giftCount) ? item.giftCount : 0,
|
||||
};
|
||||
state.value = "ready";
|
||||
} catch (error) {
|
||||
if (!active || isRequestCancelled(error)) return;
|
||||
state.value = "error";
|
||||
}
|
||||
};
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
ceremonyId.value = String(query?.ceremonyId || "");
|
||||
if (valid.value) loadDetail();
|
||||
else state.value = "invalid";
|
||||
});
|
||||
onUnload(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
});
|
||||
const returnToList = () =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value)
|
||||
? returnTo("R05", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;.ritual-detail-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card,.detail-card{@include adaptive.adaptive-records-content}.state-card{display:flex;min-height:320rpx;flex-direction:column;align-items:center;justify-content:center;padding:42rpx;text-align:center;color:$ink;font-size:28rpx}.state-card .app-button{width:100%;margin-top:24rpx}.detail-card{display:flex;min-height:320rpx;flex-direction:column;padding:42rpx}.detail-card text{display:block}.detail-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:36rpx;font-weight:700}.detail-card text:not(:first-child){margin-top:14rpx;color:$ink-muted;font-size:23rpx;line-height:1.6}
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.ritual-detail-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card,
|
||||
.detail-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 42rpx;
|
||||
text-align: center;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.detail-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
padding: 42rpx;
|
||||
}
|
||||
.detail-card text {
|
||||
display: block;
|
||||
}
|
||||
.detail-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.detail-card text:not(:first-child) {
|
||||
margin-top: 14rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,63 +2,149 @@
|
||||
<template>
|
||||
<view class="ritual-editor-page" :class="`ritual-state--${pageState}`">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header"><PageHeader title="新建礼仪活动" custom-back @back="requestBack" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader title="新建礼仪活动" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="pageState === 'form'" class="editor-card">
|
||||
<text class="editor-card__title">记录一场家族礼仪</text>
|
||||
<text class="editor-card__note">带红色星号的内容不能为空；其余内容可按需要补充。</text>
|
||||
<text class="editor-card__note"
|
||||
>带红色星号的内容不能为空；其余内容可按需要补充。</text
|
||||
>
|
||||
|
||||
<view class="field-row">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>活动类型</text>
|
||||
<input v-model="form.ceremonyType" maxlength="30" placeholder="例如：祭祖、家宴" placeholder-class="placeholder" @input="clearError" />
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>活动类型</text
|
||||
>
|
||||
<input
|
||||
v-model="form.ceremonyType"
|
||||
maxlength="30"
|
||||
placeholder="例如：祭祖、家宴"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label"><text class="required-mark">*</text>活动标题</text>
|
||||
<input v-model="form.ceremonyTitle" maxlength="60" placeholder="请输入活动标题" placeholder-class="placeholder" @input="clearError" />
|
||||
<text class="field-row__label"
|
||||
><text class="required-mark">*</text>活动标题</text
|
||||
>
|
||||
<input
|
||||
v-model="form.ceremonyTitle"
|
||||
maxlength="60"
|
||||
placeholder="请输入活动标题"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="textarea-field">
|
||||
<text class="textarea-field__label">活动说明</text>
|
||||
<textarea v-model="form.ceremonyDesc" maxlength="500" auto-height placeholder="补充活动安排或说明" placeholder-class="placeholder" @input="clearError" />
|
||||
<textarea
|
||||
v-model="form.ceremonyDesc"
|
||||
maxlength="500"
|
||||
auto-height
|
||||
placeholder="补充活动安排或说明"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row field-row--picker">
|
||||
<text class="field-row__label">活动日期</text>
|
||||
<picker mode="date" :value="form.ceremonyDate" @change="selectCeremonyDate"><view :class="{ placeholder: !form.ceremonyDate }">{{ form.ceremonyDate || '请选择' }}</view></picker>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="form.ceremonyDate"
|
||||
@change="selectCeremonyDate"
|
||||
><view :class="{ placeholder: !form.ceremonyDate }">{{
|
||||
form.ceremonyDate || "请选择"
|
||||
}}</view></picker
|
||||
>
|
||||
</view>
|
||||
<view class="field-row field-row--picker">
|
||||
<text class="field-row__label">活动时间</text>
|
||||
<picker mode="time" :value="form.ceremonyClock" @change="selectCeremonyClock"><view :class="{ placeholder: !form.ceremonyClock }">{{ form.ceremonyClock || '请选择' }}</view></picker>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.ceremonyClock"
|
||||
@change="selectCeremonyClock"
|
||||
><view :class="{ placeholder: !form.ceremonyClock }">{{
|
||||
form.ceremonyClock || "请选择"
|
||||
}}</view></picker
|
||||
>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">地点</text>
|
||||
<input v-model="form.location" maxlength="60" placeholder="请输入地点" placeholder-class="placeholder" @input="clearError" />
|
||||
<input
|
||||
v-model="form.location"
|
||||
maxlength="60"
|
||||
placeholder="请输入地点"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">详细地址</text>
|
||||
<input v-model="form.locationAddress" maxlength="120" placeholder="请输入详细地址" placeholder-class="placeholder" @input="clearError" />
|
||||
<input
|
||||
v-model="form.locationAddress"
|
||||
maxlength="120"
|
||||
placeholder="请输入详细地址"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">经度</text>
|
||||
<input v-model="form.longitude" type="digit" placeholder="地图选点后填写" placeholder-class="placeholder" @input="clearError" />
|
||||
<input
|
||||
v-model="form.longitude"
|
||||
type="digit"
|
||||
placeholder="地图选点后填写"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">纬度</text>
|
||||
<input v-model="form.latitude" type="digit" placeholder="地图选点后填写" placeholder-class="placeholder" @input="clearError" />
|
||||
<input
|
||||
v-model="form.latitude"
|
||||
type="digit"
|
||||
placeholder="地图选点后填写"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<view class="cover-field">
|
||||
<view>
|
||||
<text class="cover-field__label">封面图片</text>
|
||||
<text class="cover-field__hint">选择图片后会取得真实上传回执，并在保存时关联。</text>
|
||||
<text class="cover-field__hint"
|
||||
>选择图片后会取得真实上传回执，并在保存时关联。</text
|
||||
>
|
||||
</view>
|
||||
<button class="upload-button" :disabled="uploading || submitting" @click="uploadCover">{{ uploading ? '上传中…' : '选择图片' }}</button>
|
||||
<text v-if="coverFileName" class="upload-receipt">已上传：{{ coverFileName }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="uploading || submitting"
|
||||
@click="uploadCover"
|
||||
>
|
||||
{{ uploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="coverFileName" class="upload-receipt"
|
||||
>已上传：{{ coverFileName }}</text
|
||||
>
|
||||
</view>
|
||||
<text v-if="uploadError" class="form-error">{{ uploadError }}</text>
|
||||
<view class="field-row">
|
||||
<text class="field-row__label">排序值</text>
|
||||
<input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" placeholder-class="placeholder" @input="clearError" />
|
||||
<input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
placeholder-class="placeholder"
|
||||
@input="clearError"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="submitError" class="form-error">{{ submitError }}</text>
|
||||
<AppButton block :disabled="uploading || submitting" :label="submitting ? '正在保存…' : '保存活动'" @click="submit" />
|
||||
<AppButton
|
||||
block
|
||||
:disabled="uploading || submitting"
|
||||
:label="submitting ? '正在保存…' : '保存活动'"
|
||||
@click="submit"
|
||||
/>
|
||||
</view>
|
||||
<view v-else class="state-card">
|
||||
<text>{{ stateCopy.title }}</text>
|
||||
@@ -67,7 +153,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog :visible="discardVisible" title="放弃活动草稿？" message="当前内容尚未保存到服务端，返回后不会保留。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmation.confirm" @cancel="confirmation.cancel" />
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
title="放弃活动草稿？"
|
||||
message="当前内容尚未保存到服务端，返回后不会保留。"
|
||||
confirm-text="放弃并返回"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmation.confirm"
|
||||
@cancel="confirmation.cancel"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -77,14 +173,37 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const pageState = ref("form");
|
||||
const form = reactive({ ceremonyType: "", ceremonyTitle: "", ceremonyDesc: "", ceremonyDate: "", ceremonyClock: "", location: "", locationAddress: "", longitude: "", latitude: "", sortOrder: "" });
|
||||
const form = reactive({
|
||||
ceremonyType: "",
|
||||
ceremonyTitle: "",
|
||||
ceremonyDesc: "",
|
||||
ceremonyDate: "",
|
||||
ceremonyClock: "",
|
||||
location: "",
|
||||
locationAddress: "",
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
const coverOssId = ref(null);
|
||||
const coverFileName = ref("");
|
||||
const uploadError = ref("");
|
||||
@@ -93,22 +212,51 @@ const uploading = ref(false);
|
||||
const submitting = ref(false);
|
||||
const controller = createRequestController();
|
||||
const discardVisible = ref(false);
|
||||
const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const confirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const isDirty = computed(() => Boolean(coverOssId.value) || Object.values(form).some((value) => value.trim()));
|
||||
const ceremonyTime = computed(() => form.ceremonyDate ? `${form.ceremonyDate} ${form.ceremonyClock || "00:00"}:00` : "");
|
||||
const stateCopy = computed(() => pageState.value === "success"
|
||||
? { title: "礼仪活动已提交服务端", copy: "服务端已返回成功结果。", action: "返回礼仪活动" }
|
||||
: { title: "礼仪活动入口无效", copy: "没有取得有效家谱标识。", action: "返回上一页" });
|
||||
const isDirty = computed(
|
||||
() =>
|
||||
Boolean(coverOssId.value) ||
|
||||
Object.values(form).some((value) => value.trim()),
|
||||
);
|
||||
const ceremonyTime = computed(() =>
|
||||
form.ceremonyDate
|
||||
? `${form.ceremonyDate} ${form.ceremonyClock || "00:00"}:00`
|
||||
: "",
|
||||
);
|
||||
const stateCopy = computed(() =>
|
||||
pageState.value === "success"
|
||||
? {
|
||||
title: "礼仪活动已提交服务端",
|
||||
copy: "服务端已返回成功结果。",
|
||||
action: "返回礼仪活动",
|
||||
}
|
||||
: {
|
||||
title: "礼仪活动入口无效",
|
||||
copy: "没有取得有效家谱标识。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
);
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (!hasValidContext.value || query?.mode !== "create") pageState.value = "invalid";
|
||||
if (!hasValidContext.value || query?.mode !== "create")
|
||||
pageState.value = "invalid";
|
||||
});
|
||||
const clearError = () => { submitError.value = ""; };
|
||||
const selectCeremonyDate = (event) => { form.ceremonyDate = event.detail.value || ""; clearError(); };
|
||||
const selectCeremonyClock = (event) => { form.ceremonyClock = event.detail.value || ""; clearError(); };
|
||||
const clearError = () => {
|
||||
submitError.value = "";
|
||||
};
|
||||
const selectCeremonyDate = (event) => {
|
||||
form.ceremonyDate = event.detail.value || "";
|
||||
clearError();
|
||||
};
|
||||
const selectCeremonyClock = (event) => {
|
||||
form.ceremonyClock = event.detail.value || "";
|
||||
clearError();
|
||||
};
|
||||
const uploadCover = async () => {
|
||||
if (uploading.value || submitting.value) return;
|
||||
uploading.value = true;
|
||||
@@ -118,7 +266,8 @@ const uploadCover = async () => {
|
||||
coverOssId.value = receipt.ossId;
|
||||
coverFileName.value = receipt.fileName || "活动封面";
|
||||
} catch (error) {
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error)) uploadError.value = error?.message || "封面图片上传失败，请稍后重试";
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error))
|
||||
uploadError.value = error?.message || "封面图片上传失败，请稍后重试";
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
@@ -126,43 +275,222 @@ const uploadCover = async () => {
|
||||
const submit = async () => {
|
||||
if (uploading.value || submitting.value || !hasValidContext.value) return;
|
||||
if (!form.ceremonyType.trim() || !form.ceremonyTitle.trim()) {
|
||||
submitError.value = !form.ceremonyType.trim() ? "请填写活动类型" : "请填写活动标题";
|
||||
submitError.value = !form.ceremonyType.trim()
|
||||
? "请填写活动类型"
|
||||
: "请填写活动标题";
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
submitError.value = "";
|
||||
try {
|
||||
const { ceremonyDate, ceremonyClock, ...ceremonyForm } = form;
|
||||
await appApi.createCeremony(genealogyId.value, {
|
||||
...ceremonyForm,
|
||||
ceremonyTime: ceremonyTime.value,
|
||||
...(form.longitude ? { longitude: Number(form.longitude) } : {}),
|
||||
...(form.latitude ? { latitude: Number(form.latitude) } : {}),
|
||||
...(coverOssId.value ? { coverOssId: coverOssId.value } : {}),
|
||||
}, { requestController: controller });
|
||||
await appApi.createCeremony(
|
||||
genealogyId.value,
|
||||
{
|
||||
...ceremonyForm,
|
||||
ceremonyTime: ceremonyTime.value,
|
||||
...(form.longitude ? { longitude: Number(form.longitude) } : {}),
|
||||
...(form.latitude ? { latitude: Number(form.latitude) } : {}),
|
||||
...(coverOssId.value ? { coverOssId: coverOssId.value } : {}),
|
||||
},
|
||||
{ requestController: controller },
|
||||
);
|
||||
pageState.value = "success";
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) submitError.value = error?.message || "礼仪活动保存失败，请稍后重试";
|
||||
if (!isRequestCancelled(error))
|
||||
submitError.value = error?.message || "礼仪活动保存失败，请稍后重试";
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
const returnToList = () => hasValidContext.value ? returnTo("R05", { genealogyId: genealogyId.value }) : goBack();
|
||||
const requestBack = () => runBackGuard({ transientOpen: discardVisible.value, dirty: isDirty.value, submitting: uploading.value || submitting.value, "close-transient": confirmation.cancel, "block-submitting": () => true, "confirm-discard": confirmation.request });
|
||||
const handleStateAction = () => pageState.value === "success" ? returnToList() : goBack();
|
||||
const returnToList = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("R05", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
const requestBack = () =>
|
||||
runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: isDirty.value,
|
||||
submitting: uploading.value || submitting.value,
|
||||
"close-transient": confirmation.cancel,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
const handleStateAction = () =>
|
||||
pageState.value === "success" ? returnToList() : goBack();
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { controller.abort(); confirmation.dispose(); });
|
||||
onUnmounted(() => {
|
||||
controller.abort();
|
||||
confirmation.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.ritual-editor-page { display:flex; min-height:100vh; flex-direction:column; background:$paper; }
|
||||
.page-header,.page-content { z-index:1; }.page-content { flex:1; padding:22rpx 28rpx 72rpx; }
|
||||
.editor-card,.state-card { @include adaptive.adaptive-records-content; box-sizing:border-box; }
|
||||
.editor-card { padding:38rpx 32rpx 42rpx; }.editor-card__title,.editor-card__note,.field-row__label,.textarea-field__label,.form-error { display:block; }
|
||||
.editor-card__title { color:$ink; font-family:STKaiti,KaiTi,serif; font-size:38rpx; font-weight:700; }.editor-card__note { margin-top:10rpx; color:$ink-muted; font-size:23rpx; line-height:1.55; }
|
||||
.field-row { display:flex; min-height:92rpx; align-items:center; margin-top:20rpx; padding:0 18rpx; border:1rpx solid rgba(128,89,49,.34); border-radius:12rpx; background:rgba(255,252,245,.7); }.field-row__label { width:150rpx; flex:0 0 auto; color:$ink; font-size:26rpx; font-weight:700; }.field-row input { min-width:0; flex:1; color:$ink; font-size:25rpx; }.field-row--picker picker { min-width:0; flex:1; }.field-row--picker picker > view { min-height:92rpx; display:flex; align-items:center; color:$ink; font-size:25rpx; }.required-mark { display:inline-block; margin-right:4rpx; color:$brand-red; font-size:26rpx; transform:translateY(-3rpx); }.placeholder { color:#9e8e79; }
|
||||
.textarea-field,.cover-field { margin-top:20rpx; padding:18rpx; border:1rpx solid rgba(128,89,49,.34); border-radius:12rpx; background:rgba(255,252,245,.7); }.textarea-field__label,.cover-field__label { color:$ink; font-size:26rpx; font-weight:700; }.textarea-field textarea { display:block; width:100%; min-height:122rpx; margin-top:12rpx; color:$ink; font-size:25rpx; line-height:1.55; }
|
||||
.cover-field { display:grid; gap:12rpx; }.cover-field__hint { display:block; margin-top:5rpx; color:$ink-muted; font-size:20rpx; line-height:1.45; }.upload-button { justify-self:start; min-height:88rpx; margin:0; padding:0 20rpx; border:1rpx solid rgba(159,23,15,.42); border-radius:8rpx; background:transparent; color:$brand-red; font-size:22rpx; }.upload-receipt { color:$ink-muted; font-size:21rpx; overflow-wrap:anywhere; }.form-error { margin-top:10rpx; color:$brand-red; font-size:22rpx; line-height:1.45; }.editor-card .app-button { margin-top:28rpx; }
|
||||
.state-card { min-height:340rpx; padding:78rpx 52rpx 50rpx; text-align:center; }.state-card text { display:block; }.state-card text:first-child { color:$ink; font-size:35rpx; font-weight:700; }.state-card text:nth-child(2) { margin-top:18rpx; color:$ink-muted; font-size:24rpx; line-height:1.65; }.state-card .app-button { margin-top:28rpx; }
|
||||
.ritual-editor-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 22rpx 28rpx 72rpx;
|
||||
}
|
||||
.editor-card,
|
||||
.state-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.editor-card {
|
||||
padding: 38rpx 32rpx 42rpx;
|
||||
}
|
||||
.editor-card__title,
|
||||
.editor-card__note,
|
||||
.field-row__label,
|
||||
.textarea-field__label,
|
||||
.form-error {
|
||||
display: block;
|
||||
}
|
||||
.editor-card__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.editor-card__note {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.field-row {
|
||||
display: flex;
|
||||
min-height: 92rpx;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 18rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.field-row__label {
|
||||
width: 150rpx;
|
||||
flex: 0 0 auto;
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.field-row input {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.field-row--picker picker {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.field-row--picker picker > view {
|
||||
min-height: 92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.placeholder {
|
||||
color: #9e8e79;
|
||||
}
|
||||
.textarea-field,
|
||||
.cover-field {
|
||||
margin-top: 20rpx;
|
||||
padding: 18rpx;
|
||||
border: 1rpx solid rgba(128, 89, 49, 0.34);
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 252, 245, 0.7);
|
||||
}
|
||||
.textarea-field__label,
|
||||
.cover-field__label {
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.textarea-field textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 122rpx;
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.cover-field {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.cover-field__hint {
|
||||
display: block;
|
||||
margin-top: 5rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 88rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.form-error {
|
||||
margin-top: 10rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.editor-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.state-card {
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,42 +3,177 @@
|
||||
<view class="record-page">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header">
|
||||
<PageHeader title="成长日志" :action="valid && view === 'list' ? '新建' : ''" custom-back @back="requestBack" @action="openCreate" />
|
||||
<PageHeader
|
||||
title="成长日志"
|
||||
:action="valid && view === 'list' ? '新建' : ''"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
@action="openCreate"
|
||||
/>
|
||||
</view>
|
||||
<view class="page-content">
|
||||
<view v-if="view === 'form'" class="form-card">
|
||||
<text>新建成长记录</text>
|
||||
<text class="form-copy">红色 * 为必填项，其余内容可按需补充。</text>
|
||||
<view class="field field--context"><text>关联人物</text><view><text>{{ personName }}</text><text>{{ personId ? '已自动关联' : '未关联人物' }}</text></view></view>
|
||||
<view class="field"><text>记录类型</text><input v-model="form.recordType" placeholder="请输入记录类型" @input="error = ''" /></view>
|
||||
<view class="field"><text><text class="required-mark">*</text>记录标题</text><input v-model="form.recordTitle" placeholder="请输入记录标题" @input="error = ''" /></view>
|
||||
<view class="field field--textarea"><text>记录内容</text><textarea v-model="form.recordContent" auto-height placeholder="记录成长片段" @input="error = ''" /></view>
|
||||
<view class="field field--picker"><text>记录日期</text><picker mode="date" :value="form.recordDate" @change="selectRecordDate"><view :class="{ placeholder: !form.recordDate }">{{ form.recordDate || '请选择' }}</view></picker></view>
|
||||
<view class="field field--picker"><text>记录时间</text><picker mode="time" :value="form.recordClock" @change="selectRecordClock"><view :class="{ placeholder: !form.recordClock }">{{ form.recordClock || '请选择' }}</view></picker></view>
|
||||
<view class="field field--picker"><text>提醒日期</text><picker mode="date" :value="form.remindDate" @change="selectRemindDate"><view :class="{ placeholder: !form.remindDate }">{{ form.remindDate || '请选择' }}</view></picker></view>
|
||||
<view class="field field--picker"><text>提醒时间</text><picker mode="time" :value="form.remindClock" @change="selectRemindClock"><view :class="{ placeholder: !form.remindClock }">{{ form.remindClock || '请选择' }}</view></picker></view>
|
||||
<view class="field field--context"
|
||||
><text>关联人物</text
|
||||
><view
|
||||
><text>{{ personName }}</text
|
||||
><text>{{ personId ? "已自动关联" : "未关联人物" }}</text></view
|
||||
></view
|
||||
>
|
||||
<view class="field"
|
||||
><text>记录类型</text
|
||||
><input
|
||||
v-model="form.recordType"
|
||||
placeholder="请输入记录类型"
|
||||
@input="error = ''"
|
||||
/></view>
|
||||
<view class="field"
|
||||
><text><text class="required-mark">*</text>记录标题</text
|
||||
><input
|
||||
v-model="form.recordTitle"
|
||||
placeholder="请输入记录标题"
|
||||
@input="error = ''"
|
||||
/></view>
|
||||
<view class="field field--textarea"
|
||||
><text>记录内容</text
|
||||
><textarea
|
||||
v-model="form.recordContent"
|
||||
auto-height
|
||||
placeholder="记录成长片段"
|
||||
@input="error = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="field field--picker"
|
||||
><text>记录日期</text
|
||||
><picker
|
||||
mode="date"
|
||||
:value="form.recordDate"
|
||||
@change="selectRecordDate"
|
||||
><view :class="{ placeholder: !form.recordDate }">{{
|
||||
form.recordDate || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field field--picker"
|
||||
><text>记录时间</text
|
||||
><picker
|
||||
mode="time"
|
||||
:value="form.recordClock"
|
||||
@change="selectRecordClock"
|
||||
><view :class="{ placeholder: !form.recordClock }">{{
|
||||
form.recordClock || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field field--picker"
|
||||
><text>提醒日期</text
|
||||
><picker
|
||||
mode="date"
|
||||
:value="form.remindDate"
|
||||
@change="selectRemindDate"
|
||||
><view :class="{ placeholder: !form.remindDate }">{{
|
||||
form.remindDate || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field field--picker"
|
||||
><text>提醒时间</text
|
||||
><picker
|
||||
mode="time"
|
||||
:value="form.remindClock"
|
||||
@change="selectRemindClock"
|
||||
><view :class="{ placeholder: !form.remindClock }">{{
|
||||
form.remindClock || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="upload-field">
|
||||
<view><text>相关图片</text><text>图片选定后会先取得真实上传回执，并在提交记录时关联。</text></view>
|
||||
<button class="upload-button" :disabled="uploading || submitting" @click="uploadImage">{{ uploading ? '上传中…' : '添加图片' }}</button>
|
||||
<text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`">已上传：{{ receipt.fileName || '图片' }}</text>
|
||||
<view
|
||||
><text>相关图片</text
|
||||
><text
|
||||
>图片选定后会先取得真实上传回执，并在提交记录时关联。</text
|
||||
></view
|
||||
>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="uploading || submitting"
|
||||
@click="uploadImage"
|
||||
>
|
||||
{{ uploading ? "上传中…" : "添加图片" }}
|
||||
</button>
|
||||
<text
|
||||
v-for="(receipt, index) in mediaReceipts"
|
||||
:key="`${receipt.ossId}-${index}`"
|
||||
>已上传：{{ receipt.fileName || "图片" }}</text
|
||||
>
|
||||
<text v-if="uploadError" class="error">{{ uploadError }}</text>
|
||||
</view>
|
||||
<view class="field"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="error = ''" /></view>
|
||||
<view class="field"
|
||||
><text>排序值</text
|
||||
><input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
@input="error = ''"
|
||||
/></view>
|
||||
<text v-if="error" class="error">{{ error }}</text>
|
||||
<view class="form-actions"><AppButton type="secondary" label="取消" @click="cancelCreate" /><AppButton :disabled="submitting || uploading" :label="submitting ? '正在提交' : '提交成长记录'" @click="submit" /></view>
|
||||
<view class="form-actions"
|
||||
><AppButton
|
||||
type="secondary"
|
||||
label="取消"
|
||||
@click="cancelCreate" /><AppButton
|
||||
:disabled="submitting || uploading"
|
||||
:label="submitting ? '正在提交' : '提交成长记录'"
|
||||
@click="submit"
|
||||
/></view>
|
||||
</view>
|
||||
<view v-else-if="!valid" class="state-card"><text>成长日志入口无效</text><AppButton block label="返回上一页" @click="requestBack" /></view>
|
||||
<view v-else-if="listState === 'loading'" class="state-card"><AppLoading text="正在读取成长记录" /></view>
|
||||
<view v-else-if="listState === 'error'" class="state-card"><text>暂时无法读取成长记录</text><AppButton block type="secondary" label="重新加载" @click="loadRecords" /></view>
|
||||
<view v-else-if="listState === 'empty'" class="state-card"><text>还没有成长记录</text><AppButton block label="新建成长记录" @click="openCreate" /></view>
|
||||
<view v-else-if="!valid" class="state-card"
|
||||
><text>成长日志入口无效</text
|
||||
><AppButton block label="返回上一页" @click="requestBack"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取成长记录"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'error'" class="state-card"
|
||||
><text>暂时无法读取成长记录</text
|
||||
><AppButton
|
||||
block
|
||||
type="secondary"
|
||||
label="重新加载"
|
||||
@click="loadRecords"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'empty'" class="state-card"
|
||||
><text>还没有成长记录</text
|
||||
><AppButton block label="新建成长记录" @click="openCreate"
|
||||
/></view>
|
||||
<view v-else class="record-list">
|
||||
<text v-if="saveNotice" class="save-notice">成长记录已提交，并已从服务端重新读取。</text>
|
||||
<text v-if="saveNotice" class="save-notice"
|
||||
>成长记录已提交，并已从服务端重新读取。</text
|
||||
>
|
||||
<view v-for="item in records" :key="item.id" class="record-card">
|
||||
<view><text>{{ item.title }}</text><text>{{ item.type || item.personName }}{{ item.date ? ` · ${item.date}` : '' }}</text><text v-if="item.content">{{ item.content }}</text></view>
|
||||
<view
|
||||
><text>{{ item.title }}</text
|
||||
><text
|
||||
>{{ item.type || item.personName
|
||||
}}{{ item.date ? ` · ${item.date}` : "" }}</text
|
||||
><text v-if="item.content">{{ item.content }}</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog :visible="discardVisible" title="放弃成长记录？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" />
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
title="放弃成长记录？"
|
||||
message="尚未提交的内容将被清除。"
|
||||
confirm-text="放弃并返回"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmDiscard"
|
||||
@cancel="cancelDiscard"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -50,9 +185,16 @@ import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -67,21 +209,57 @@ const uploading = ref(false);
|
||||
const error = ref("");
|
||||
const uploadError = ref("");
|
||||
const discardVisible = ref(false);
|
||||
const form = reactive({ lineagePersonId: "", recordType: "", recordTitle: "", recordContent: "", recordDate: "", recordClock: "", remindDate: "", remindClock: "", sortOrder: "" });
|
||||
const form = reactive({
|
||||
lineagePersonId: "",
|
||||
recordType: "",
|
||||
recordTitle: "",
|
||||
recordContent: "",
|
||||
recordDate: "",
|
||||
recordClock: "",
|
||||
remindDate: "",
|
||||
remindClock: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
const mediaReceipts = ref([]);
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
|
||||
const recordTime = computed(() => form.recordDate ? `${form.recordDate} ${form.recordClock || "00:00"}:00` : "");
|
||||
const remindTime = computed(() => form.remindDate ? `${form.remindDate} ${form.remindClock || "00:00"}:00` : "");
|
||||
const dirty = computed(() => Object.values(form).some((value) => String(value).trim()) || mediaReceipts.value.length > 0);
|
||||
const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const confirmDiscard = () => { confirmation.confirm(); resetForm(); view.value = "list"; };
|
||||
const mediaOssIds = computed(() =>
|
||||
mediaReceipts.value.map((item) => item.ossId).join(","),
|
||||
);
|
||||
const recordTime = computed(() =>
|
||||
form.recordDate ? `${form.recordDate} ${form.recordClock || "00:00"}:00` : "",
|
||||
);
|
||||
const remindTime = computed(() =>
|
||||
form.remindDate ? `${form.remindDate} ${form.remindClock || "00:00"}:00` : "",
|
||||
);
|
||||
const dirty = computed(
|
||||
() =>
|
||||
Object.values(form).some((value) => String(value).trim()) ||
|
||||
mediaReceipts.value.length > 0,
|
||||
);
|
||||
const confirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
const confirmDiscard = () => {
|
||||
confirmation.confirm();
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
};
|
||||
const cancelDiscard = confirmation.cancel;
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(form, { lineagePersonId: personId.value, recordType: "", recordTitle: "", recordContent: "", recordDate: "", recordClock: "", remindDate: "", remindClock: "", sortOrder: "" });
|
||||
Object.assign(form, {
|
||||
lineagePersonId: personId.value,
|
||||
recordType: "",
|
||||
recordTitle: "",
|
||||
recordContent: "",
|
||||
recordDate: "",
|
||||
recordClock: "",
|
||||
remindDate: "",
|
||||
remindClock: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
mediaReceipts.value = [];
|
||||
error.value = "";
|
||||
uploadError.value = "";
|
||||
@@ -91,75 +269,323 @@ const loadRecords = async () => {
|
||||
controller.abort();
|
||||
listState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getGrowthRecords(genealogyId.value, { requestController: controller });
|
||||
const rows = await appApi.getGrowthRecords(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
records.value = rows.map((item) => ({
|
||||
id: String(item.recordId || ""),
|
||||
title: String(item.recordTitle || "未命名记录"),
|
||||
type: String(item.recordType || ""),
|
||||
personName: String(item.lineagePersonName || "未关联人物"),
|
||||
date: String(item.recordDate || item.remindTime || ""),
|
||||
content: String(item.recordContent || ""),
|
||||
})).filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
records.value = rows
|
||||
.map((item) => ({
|
||||
id: String(item.recordId || ""),
|
||||
title: String(item.recordTitle || "未命名记录"),
|
||||
type: String(item.recordType || ""),
|
||||
personName: String(item.lineagePersonName || "未关联人物"),
|
||||
date: String(item.recordDate || item.remindTime || ""),
|
||||
content: String(item.recordContent || ""),
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
listState.value = records.value.length ? "ready" : "empty";
|
||||
} catch (cause) {
|
||||
if (!active || isRequestCancelled(cause)) return;
|
||||
listState.value = "error";
|
||||
}
|
||||
};
|
||||
const openCreate = () => { if (!valid.value) return; saveNotice.value = false; resetForm(); view.value = "form"; };
|
||||
const cancelCreate = () => { resetForm(); view.value = "list"; };
|
||||
const selectRecordDate = (event) => { form.recordDate = event.detail.value || ""; error.value = ""; };
|
||||
const selectRecordClock = (event) => { form.recordClock = event.detail.value || ""; error.value = ""; };
|
||||
const selectRemindDate = (event) => { form.remindDate = event.detail.value || ""; error.value = ""; };
|
||||
const selectRemindClock = (event) => { form.remindClock = event.detail.value || ""; error.value = ""; };
|
||||
const openCreate = () => {
|
||||
if (!valid.value) return;
|
||||
saveNotice.value = false;
|
||||
resetForm();
|
||||
view.value = "form";
|
||||
};
|
||||
const cancelCreate = () => {
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
};
|
||||
const selectRecordDate = (event) => {
|
||||
form.recordDate = event.detail.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const selectRecordClock = (event) => {
|
||||
form.recordClock = event.detail.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const selectRemindDate = (event) => {
|
||||
form.remindDate = event.detail.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const selectRemindClock = (event) => {
|
||||
form.remindClock = event.detail.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const uploadImage = async () => {
|
||||
if (uploading.value || submitting.value) return;
|
||||
uploading.value = true;
|
||||
uploadError.value = "";
|
||||
try { mediaReceipts.value = [...mediaReceipts.value, await pickAndUploadImage({ requestController: controller })]; }
|
||||
catch (cause) { if (!isImagePickCancelled(cause) && !isRequestCancelled(cause)) uploadError.value = cause?.message || "图片上传失败，请稍后重试。"; }
|
||||
finally { uploading.value = false; }
|
||||
try {
|
||||
mediaReceipts.value = [
|
||||
...mediaReceipts.value,
|
||||
await pickAndUploadImage({ requestController: controller }),
|
||||
];
|
||||
} catch (cause) {
|
||||
if (!isImagePickCancelled(cause) && !isRequestCancelled(cause))
|
||||
uploadError.value = cause?.message || "图片上传失败，请稍后重试。";
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
const submit = async () => {
|
||||
if (submitting.value || uploading.value || !valid.value) return;
|
||||
if (!form.recordTitle.trim()) { error.value = "请填写记录标题"; return; }
|
||||
if (!form.recordTitle.trim()) {
|
||||
error.value = "请填写记录标题";
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const { recordClock, remindDate, remindClock, ...recordForm } = form;
|
||||
await appApi.createGrowthRecord(genealogyId.value, { ...recordForm, recordDate: recordTime.value, remindTime: remindTime.value, mediaOssIds: mediaOssIds.value }, { requestController: controller });
|
||||
await appApi.createGrowthRecord(
|
||||
genealogyId.value,
|
||||
{
|
||||
...recordForm,
|
||||
recordDate: recordTime.value,
|
||||
remindTime: remindTime.value,
|
||||
mediaOssIds: mediaOssIds.value,
|
||||
},
|
||||
{ requestController: controller },
|
||||
);
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
saveNotice.value = true;
|
||||
await loadRecords();
|
||||
} catch (cause) {
|
||||
if (!isRequestCancelled(cause)) error.value = cause?.message || "成长记录提交失败，请稍后重试。";
|
||||
} finally { submitting.value = false; }
|
||||
if (!isRequestCancelled(cause))
|
||||
error.value = cause?.message || "成长记录提交失败，请稍后重试。";
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => view.value !== "form"
|
||||
? goBack()
|
||||
: runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value || uploading.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request });
|
||||
const requestBack = () =>
|
||||
view.value !== "form"
|
||||
? goBack()
|
||||
: runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: dirty.value,
|
||||
submitting: submitting.value || uploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
personId.value = /^[1-9]\d*$/.test(String(query?.personId || "")) ? String(query.personId) : "";
|
||||
personName.value = String(query?.personName || (personId.value ? "当前查看的人物" : "当前家谱"));
|
||||
personId.value = /^[1-9]\d*$/.test(String(query?.personId || ""))
|
||||
? String(query.personId)
|
||||
: "";
|
||||
personName.value = String(
|
||||
query?.personName || (personId.value ? "当前查看的人物" : "当前家谱"),
|
||||
);
|
||||
resetForm();
|
||||
if (valid.value) loadRecords();
|
||||
else listState.value = "invalid";
|
||||
});
|
||||
onShow(() => { if (valid.value && view.value === "list" && listState.value !== "loading") loadRecords(); });
|
||||
onShow(() => {
|
||||
if (valid.value && view.value === "list" && listState.value !== "loading")
|
||||
loadRecords();
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { active = false; controller.abort(); confirmation.dispose(); });
|
||||
onUnmounted(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
confirmation.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.record-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.form-card, .state-card, .record-card { @include adaptive.adaptive-records-content; }.form-card { box-sizing: border-box; padding: 46rpx; }.form-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
|
||||
.field { margin-top: 16rpx; }.field > text { display: block; margin: 0 8rpx 8rpx; color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }.field input, .field textarea, .field--picker picker > view { @include adaptive.adaptive-records-field; box-sizing: border-box; width: 100%; min-height: 76rpx; padding: 16rpx 22rpx; color: $ink; font-size: 23rpx; }.field textarea { min-height: 150rpx; }.field--picker picker { display: block; }.field--picker .placeholder { color: $ink-muted; }
|
||||
.field--context > view { @include adaptive.adaptive-records-field; display: flex; min-height: 76rpx; align-items: center; justify-content: space-between; padding: 16rpx 22rpx; box-sizing: border-box; }.field--context > view > text:first-child { color: $ink; font-size: 23rpx; }.field--context > view > text:last-child { color: $ink-muted; font-size: 21rpx; }
|
||||
.upload-field { display: grid; gap: 12rpx; margin-top: 16rpx; padding: 18rpx 22rpx; @include adaptive.adaptive-records-field; }.upload-field > view > text { display: block; }.upload-field > view > text:first-child { color: $ink; font-size: 23rpx; font-weight: 700; }.upload-field > view > text:last-child { margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }.upload-button { justify-self: start; min-height: 88rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-field > text, .error { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }.error { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; }
|
||||
.form-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 16rpx; margin-top: 20rpx; }.form-actions .app-button { width: 100%; min-width: 0; }.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; color: $ink; font-size: 28rpx; text-align: center; }.state-card .app-button { width: 100%; margin-top: 24rpx; }.record-list { display: flex; flex-direction: column; gap: 16rpx; }.save-notice { display: block; color: $brand-red; font-size: 22rpx; }.record-card { min-height: 128rpx; padding: 28rpx 32rpx; }.record-card text { display: block; }.record-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }.record-card text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }
|
||||
.record-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.form-card,
|
||||
.state-card,
|
||||
.record-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.form-card {
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx;
|
||||
}
|
||||
.form-card > text:first-child {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.form-copy {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.field {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.field > text {
|
||||
display: block;
|
||||
margin: 0 8rpx 8rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.field input,
|
||||
.field textarea,
|
||||
.field--picker picker > view {
|
||||
@include adaptive.adaptive-records-field;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
padding: 16rpx 22rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.field textarea {
|
||||
min-height: 150rpx;
|
||||
}
|
||||
.field--picker picker {
|
||||
display: block;
|
||||
}
|
||||
.field--picker .placeholder {
|
||||
color: $ink-muted;
|
||||
}
|
||||
.field--context > view {
|
||||
@include adaptive.adaptive-records-field;
|
||||
display: flex;
|
||||
min-height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 22rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.field--context > view > text:first-child {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.field--context > view > text:last-child {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
.upload-field {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
margin-top: 16rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
@include adaptive.adaptive-records-field;
|
||||
}
|
||||
.upload-field > view > text {
|
||||
display: block;
|
||||
}
|
||||
.upload-field > view > text:first-child {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.upload-field > view > text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 88rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-field > text,
|
||||
.error {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.error {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.form-actions {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.form-actions .app-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 42rpx;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.record-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.save-notice {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.record-card {
|
||||
min-height: 128rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.record-card text {
|
||||
display: block;
|
||||
}
|
||||
.record-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.record-card text:not(:first-child) {
|
||||
margin-top: 7rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,73 @@
|
||||
<!-- 页面编号：R-09；用途：人生大事。当前没有独立业务 operation。 -->
|
||||
<template>
|
||||
<view class="life-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="人生大事" custom-back @back="returnToRecords" /></view><view class="page-content"><view class="state-card"><text>人生大事暂未开放</text><text>该功能正在准备中。开放后，重要人生经历会在这里沉淀为家族记忆。</text><AppButton block :label="hasValidContext ? '返回记录首页' : '返回上一页'" @click="returnToRecords" /></view></view></view>
|
||||
<view class="life-page"
|
||||
><ModulePageBackground module="records" /><view class="page-header"
|
||||
><PageHeader title="人生大事" custom-back @back="returnToRecords" /></view
|
||||
><view class="page-content"
|
||||
><view class="state-card"
|
||||
><text>人生大事暂未开放</text
|
||||
><text
|
||||
>该功能正在准备中。开放后，重要人生经历会在这里沉淀为家族记忆。</text
|
||||
><AppButton
|
||||
block
|
||||
:label="hasValidContext ? '返回记录首页' : '返回上一页'"
|
||||
@click="returnToRecords" /></view></view
|
||||
></view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed,ref } from "vue"; import { onLoad } from "@dcloudio/uni-app"; import AppButton from "@/components/AppButton.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { goBack,returnTo } from "@/utils/navigation.js"; const genealogyId=ref("");const hasValidContext=computed(()=>/^[1-9]\d*$/.test(genealogyId.value));onLoad((query)=>{genealogyId.value=String(query?.genealogyId||"");});const returnToRecords=()=>hasValidContext.value?returnTo("R01",{genealogyId:genealogyId.value}):goBack();
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||||
const genealogyId = ref("");
|
||||
const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
});
|
||||
const returnToRecords = () =>
|
||||
hasValidContext.value
|
||||
? returnTo("R01", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.life-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card{box-sizing:border-box;min-height:340rpx;padding:78rpx 52rpx 50rpx;text-align:center;@include adaptive.adaptive-records-content}.state-card text{display:block}.state-card text:first-child{color:$ink;font-size:35rpx;font-weight:700}.state-card text:nth-child(2){margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
|
||||
.life-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.state-card {
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
text-align: center;
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.state-card text {
|
||||
display: block;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
+410
-50
@@ -2,35 +2,130 @@
|
||||
<template>
|
||||
<view class="memo-page">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header"><PageHeader title="家族备忘" :action="valid && view === 'list' ? '新建' : ''" custom-back @back="requestBack" @action="openCreate" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader
|
||||
title="家族备忘"
|
||||
:action="valid && view === 'list' ? '新建' : ''"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
@action="openCreate"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="view === 'form'" class="form-card">
|
||||
<text>新建家族备忘</text>
|
||||
<text class="form-copy">红色 * 为必填项，其余内容可按需补充。</text>
|
||||
<view class="field"><text><text class="required-mark">*</text>备忘标题</text><input v-model="form.memoTitle" maxlength="40" placeholder="请输入备忘标题" @input="error = ''" /></view>
|
||||
<picker mode="date" :value="form.remindDate" @change="selectRemindDate"><view class="field field--picker"><text>提醒日期</text><text>{{ form.remindDate || '请选择' }}</text></view></picker>
|
||||
<picker mode="time" :value="form.remindClock" @change="selectRemindClock"><view class="field field--picker"><text>提醒时间</text><text>{{ form.remindClock || '请选择' }}</text></view></picker>
|
||||
<view class="field field--textarea"><text>备忘内容</text><textarea v-model="form.memoContent" auto-height maxlength="1200" placeholder="记录需要提醒的事情" @input="error = ''" /></view>
|
||||
<view class="field"
|
||||
><text><text class="required-mark">*</text>备忘标题</text
|
||||
><input
|
||||
v-model="form.memoTitle"
|
||||
maxlength="40"
|
||||
placeholder="请输入备忘标题"
|
||||
@input="error = ''"
|
||||
/></view>
|
||||
<picker mode="date" :value="form.remindDate" @change="selectRemindDate"
|
||||
><view class="field field--picker"
|
||||
><text>提醒日期</text
|
||||
><text>{{ form.remindDate || "请选择" }}</text></view
|
||||
></picker
|
||||
>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.remindClock"
|
||||
@change="selectRemindClock"
|
||||
><view class="field field--picker"
|
||||
><text>提醒时间</text
|
||||
><text>{{ form.remindClock || "请选择" }}</text></view
|
||||
></picker
|
||||
>
|
||||
<view class="field field--textarea"
|
||||
><text>备忘内容</text
|
||||
><textarea
|
||||
v-model="form.memoContent"
|
||||
auto-height
|
||||
maxlength="1200"
|
||||
placeholder="记录需要提醒的事情"
|
||||
@input="error = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="upload-field">
|
||||
<view><text>相关图片</text><text>图片选定后会先取得真实上传回执，并在提交备忘时关联。</text></view>
|
||||
<button class="upload-button" :disabled="uploading || submitting" @click="uploadImage">{{ uploading ? '上传中…' : '添加图片' }}</button>
|
||||
<text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`">已上传：{{ receipt.fileName || '图片' }}</text>
|
||||
<view
|
||||
><text>相关图片</text
|
||||
><text
|
||||
>图片选定后会先取得真实上传回执，并在提交备忘时关联。</text
|
||||
></view
|
||||
>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="uploading || submitting"
|
||||
@click="uploadImage"
|
||||
>
|
||||
{{ uploading ? "上传中…" : "添加图片" }}
|
||||
</button>
|
||||
<text
|
||||
v-for="(receipt, index) in mediaReceipts"
|
||||
:key="`${receipt.ossId}-${index}`"
|
||||
>已上传：{{ receipt.fileName || "图片" }}</text
|
||||
>
|
||||
<text v-if="uploadError" class="error">{{ uploadError }}</text>
|
||||
</view>
|
||||
<view class="field"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="error = ''" /></view>
|
||||
<view class="field"
|
||||
><text>排序值</text
|
||||
><input
|
||||
v-model="form.sortOrder"
|
||||
type="number"
|
||||
placeholder="数值越小越靠前"
|
||||
@input="error = ''"
|
||||
/></view>
|
||||
<text v-if="error" class="error">{{ error }}</text>
|
||||
<view class="form-actions"><AppButton type="secondary" label="取消" @click="cancelCreate" /><AppButton :disabled="submitting || uploading" :label="submitting ? '正在提交' : '提交备忘'" @click="submit" /></view>
|
||||
<view class="form-actions"
|
||||
><AppButton
|
||||
type="secondary"
|
||||
label="取消"
|
||||
@click="cancelCreate" /><AppButton
|
||||
:disabled="submitting || uploading"
|
||||
:label="submitting ? '正在提交' : '提交备忘'"
|
||||
@click="submit"
|
||||
/></view>
|
||||
</view>
|
||||
<view v-else-if="!valid" class="state-card"><text>家族备忘入口无效</text><AppButton block label="返回上一页" @click="requestBack" /></view>
|
||||
<view v-else-if="listState === 'loading'" class="state-card"><AppLoading text="正在读取家族备忘" /></view>
|
||||
<view v-else-if="listState === 'error'" class="state-card"><text>暂时无法读取家族备忘</text><AppButton block type="secondary" label="重新加载" @click="loadMemos" /></view>
|
||||
<view v-else-if="listState === 'empty'" class="state-card"><text>还没有家族备忘</text><AppButton block label="新建备忘" @click="openCreate" /></view>
|
||||
<view v-else-if="!valid" class="state-card"
|
||||
><text>家族备忘入口无效</text
|
||||
><AppButton block label="返回上一页" @click="requestBack"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取家族备忘"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'error'" class="state-card"
|
||||
><text>暂时无法读取家族备忘</text
|
||||
><AppButton block type="secondary" label="重新加载" @click="loadMemos"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'empty'" class="state-card"
|
||||
><text>还没有家族备忘</text
|
||||
><AppButton block label="新建备忘" @click="openCreate"
|
||||
/></view>
|
||||
<view v-else class="memo-list">
|
||||
<text v-if="saveNotice" class="save-notice">备忘已提交，并已从服务端重新读取。</text>
|
||||
<view v-for="item in memos" :key="item.id" class="memo-card"><view><text>{{ item.title }}</text><text v-if="item.remindTime">{{ item.remindTime }}</text><text v-if="item.content">{{ item.content }}</text></view></view>
|
||||
<text v-if="saveNotice" class="save-notice"
|
||||
>备忘已提交，并已从服务端重新读取。</text
|
||||
>
|
||||
<view v-for="item in memos" :key="item.id" class="memo-card"
|
||||
><view
|
||||
><text>{{ item.title }}</text
|
||||
><text v-if="item.remindTime">{{ item.remindTime }}</text
|
||||
><text v-if="item.content">{{ item.content }}</text></view
|
||||
></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog :visible="discardVisible" title="放弃家族备忘？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" />
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
title="放弃家族备忘？"
|
||||
message="尚未提交的内容将被清除。"
|
||||
confirm-text="放弃并返回"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmDiscard"
|
||||
@cancel="cancelDiscard"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -42,9 +137,16 @@ import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -57,75 +159,333 @@ const uploading = ref(false);
|
||||
const error = ref("");
|
||||
const uploadError = ref("");
|
||||
const discardVisible = ref(false);
|
||||
const form = reactive({ memoTitle: "", remindDate: "", remindClock: "", memoContent: "", sortOrder: "" });
|
||||
const form = reactive({
|
||||
memoTitle: "",
|
||||
remindDate: "",
|
||||
remindClock: "",
|
||||
memoContent: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
const mediaReceipts = ref([]);
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const remindTime = computed(() => form.remindDate ? `${form.remindDate} ${form.remindClock || "00:00"}:00` : "");
|
||||
const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
|
||||
const dirty = computed(() => Object.values(form).some((value) => String(value).trim()) || mediaReceipts.value.length > 0);
|
||||
const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const confirmDiscard = () => { confirmation.confirm(); resetForm(); view.value = "list"; };
|
||||
const remindTime = computed(() =>
|
||||
form.remindDate ? `${form.remindDate} ${form.remindClock || "00:00"}:00` : "",
|
||||
);
|
||||
const mediaOssIds = computed(() =>
|
||||
mediaReceipts.value.map((item) => item.ossId).join(","),
|
||||
);
|
||||
const dirty = computed(
|
||||
() =>
|
||||
Object.values(form).some((value) => String(value).trim()) ||
|
||||
mediaReceipts.value.length > 0,
|
||||
);
|
||||
const confirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
const confirmDiscard = () => {
|
||||
confirmation.confirm();
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
};
|
||||
const cancelDiscard = confirmation.cancel;
|
||||
|
||||
const resetForm = () => { Object.assign(form, { memoTitle: "", remindDate: "", remindClock: "", memoContent: "", sortOrder: "" }); mediaReceipts.value = []; error.value = ""; uploadError.value = ""; };
|
||||
const resetForm = () => {
|
||||
Object.assign(form, {
|
||||
memoTitle: "",
|
||||
remindDate: "",
|
||||
remindClock: "",
|
||||
memoContent: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
mediaReceipts.value = [];
|
||||
error.value = "";
|
||||
uploadError.value = "";
|
||||
};
|
||||
const loadMemos = async () => {
|
||||
if (!valid.value) return;
|
||||
controller.abort();
|
||||
listState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getMemos(genealogyId.value, { requestController: controller });
|
||||
const rows = await appApi.getMemos(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
memos.value = rows.map((item) => ({ id: String(item.memoId || ""), title: String(item.memoTitle || "未命名备忘"), remindTime: String(item.remindTime || ""), content: String(item.memoContent || "") })).filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
memos.value = rows
|
||||
.map((item) => ({
|
||||
id: String(item.memoId || ""),
|
||||
title: String(item.memoTitle || "未命名备忘"),
|
||||
remindTime: String(item.remindTime || ""),
|
||||
content: String(item.memoContent || ""),
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
listState.value = memos.value.length ? "ready" : "empty";
|
||||
} catch (cause) {
|
||||
if (!active || isRequestCancelled(cause)) return;
|
||||
listState.value = "error";
|
||||
}
|
||||
};
|
||||
const openCreate = () => { if (!valid.value) return; saveNotice.value = false; resetForm(); view.value = "form"; };
|
||||
const cancelCreate = () => { resetForm(); view.value = "list"; };
|
||||
const selectRemindDate = (event) => { form.remindDate = event.detail.value || ""; };
|
||||
const selectRemindClock = (event) => { form.remindClock = event.detail.value || ""; };
|
||||
const openCreate = () => {
|
||||
if (!valid.value) return;
|
||||
saveNotice.value = false;
|
||||
resetForm();
|
||||
view.value = "form";
|
||||
};
|
||||
const cancelCreate = () => {
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
};
|
||||
const selectRemindDate = (event) => {
|
||||
form.remindDate = event.detail.value || "";
|
||||
};
|
||||
const selectRemindClock = (event) => {
|
||||
form.remindClock = event.detail.value || "";
|
||||
};
|
||||
const uploadImage = async () => {
|
||||
if (uploading.value || submitting.value) return;
|
||||
uploading.value = true;
|
||||
uploadError.value = "";
|
||||
try { mediaReceipts.value = [...mediaReceipts.value, await pickAndUploadImage({ requestController: controller })]; }
|
||||
catch (cause) { if (!isImagePickCancelled(cause) && !isRequestCancelled(cause)) uploadError.value = cause?.message || "图片上传失败，请稍后重试。"; }
|
||||
finally { uploading.value = false; }
|
||||
try {
|
||||
mediaReceipts.value = [
|
||||
...mediaReceipts.value,
|
||||
await pickAndUploadImage({ requestController: controller }),
|
||||
];
|
||||
} catch (cause) {
|
||||
if (!isImagePickCancelled(cause) && !isRequestCancelled(cause))
|
||||
uploadError.value = cause?.message || "图片上传失败，请稍后重试。";
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
const submit = async () => {
|
||||
if (submitting.value || uploading.value || !valid.value) return;
|
||||
if (!form.memoTitle.trim()) { error.value = "请填写备忘标题"; return; }
|
||||
if (!form.memoTitle.trim()) {
|
||||
error.value = "请填写备忘标题";
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await appApi.createMemo(genealogyId.value, { memoTitle: form.memoTitle, remindTime: remindTime.value, memoContent: form.memoContent, mediaOssIds: mediaOssIds.value, sortOrder: form.sortOrder }, { requestController: controller });
|
||||
await appApi.createMemo(
|
||||
genealogyId.value,
|
||||
{
|
||||
memoTitle: form.memoTitle,
|
||||
remindTime: remindTime.value,
|
||||
memoContent: form.memoContent,
|
||||
mediaOssIds: mediaOssIds.value,
|
||||
sortOrder: form.sortOrder,
|
||||
},
|
||||
{ requestController: controller },
|
||||
);
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
saveNotice.value = true;
|
||||
await loadMemos();
|
||||
} catch (cause) {
|
||||
if (!isRequestCancelled(cause)) error.value = cause?.message || "备忘提交失败，请稍后重试。";
|
||||
} finally { submitting.value = false; }
|
||||
if (!isRequestCancelled(cause))
|
||||
error.value = cause?.message || "备忘提交失败，请稍后重试。";
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => view.value !== "form"
|
||||
? goBack()
|
||||
: runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value || uploading.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request });
|
||||
const requestBack = () =>
|
||||
view.value !== "form"
|
||||
? goBack()
|
||||
: runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: dirty.value,
|
||||
submitting: submitting.value || uploading.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadMemos(); else listState.value = "invalid"; });
|
||||
onShow(() => { if (valid.value && view.value === "list" && listState.value !== "loading") loadMemos(); });
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (valid.value) loadMemos();
|
||||
else listState.value = "invalid";
|
||||
});
|
||||
onShow(() => {
|
||||
if (valid.value && view.value === "list" && listState.value !== "loading")
|
||||
loadMemos();
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { active = false; controller.abort(); confirmation.dispose(); });
|
||||
onUnmounted(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
confirmation.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.memo-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.form-card, .state-card, .memo-card { @include adaptive.adaptive-records-content; }.form-card { box-sizing: border-box; padding: 46rpx; }.form-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
|
||||
.field { display: grid; grid-template-columns: 142rpx minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }.field > text, .upload-field > view > text:first-child { color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }.field input, .field > text:last-child { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }.field--textarea { align-items: start; }.field textarea { min-height: 116rpx; color: $ink; font-size: 23rpx; line-height: 1.55; }
|
||||
.upload-field { display: grid; gap: 12rpx; margin-top: 14rpx; padding: 18rpx 24rpx; @include adaptive.adaptive-records-field; }.upload-field > view > text { display: block; }.upload-field > view > text:last-child { margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }.upload-button { justify-self: start; min-height: 88rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-field > text { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }.error { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; }
|
||||
.form-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 16rpx; margin-top: 20rpx; }.form-actions .app-button { width: 100%; min-width: 0; }.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; color: $ink; font-size: 28rpx; text-align: center; }.state-card .app-button { width: 100%; margin-top: 24rpx; }.memo-list { display: flex; flex-direction: column; gap: 16rpx; }.save-notice { display: block; color: $brand-red; font-size: 22rpx; }.memo-card { min-height: 128rpx; padding: 28rpx 32rpx; }.memo-card text { display: block; }.memo-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }.memo-card text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }
|
||||
.memo-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.form-card,
|
||||
.state-card,
|
||||
.memo-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.form-card {
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx;
|
||||
}
|
||||
.form-card > text:first-child {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.form-copy {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.field {
|
||||
display: grid;
|
||||
grid-template-columns: 142rpx minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12rpx 20rpx;
|
||||
min-height: 82rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 14rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
@include adaptive.adaptive-records-field;
|
||||
}
|
||||
.field > text,
|
||||
.upload-field > view > text:first-child {
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.field input,
|
||||
.field > text:last-child {
|
||||
min-width: 0;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.field--textarea {
|
||||
align-items: start;
|
||||
}
|
||||
.field textarea {
|
||||
min-height: 116rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.upload-field {
|
||||
display: grid;
|
||||
gap: 12rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 18rpx 24rpx;
|
||||
@include adaptive.adaptive-records-field;
|
||||
}
|
||||
.upload-field > view > text {
|
||||
display: block;
|
||||
}
|
||||
.upload-field > view > text:last-child {
|
||||
margin-top: 6rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.upload-button {
|
||||
justify-self: start;
|
||||
min-height: 88rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.upload-field > text {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.error {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.form-actions {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.form-actions .app-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 42rpx;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.memo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.save-notice {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.memo-card {
|
||||
min-height: 128rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.memo-card text {
|
||||
display: block;
|
||||
}
|
||||
.memo-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.memo-card text:not(:first-child) {
|
||||
margin-top: 7rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,29 +2,120 @@
|
||||
<template>
|
||||
<view class="merit-page">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header"><PageHeader title="功德记录" :action="valid && view === 'list' ? '新建' : ''" custom-back @back="requestBack" @action="openCreate" /></view>
|
||||
<view class="page-header"
|
||||
><PageHeader
|
||||
title="功德记录"
|
||||
:action="valid && view === 'list' ? '新建' : ''"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
@action="openCreate"
|
||||
/></view>
|
||||
<view class="page-content">
|
||||
<view v-if="view === 'form'" class="form-card">
|
||||
<text>新建功德记录</text>
|
||||
<text class="form-copy">红色 * 为必填项，其余内容可按需补充。</text>
|
||||
<view v-for="field in fields" :key="field.key" class="field"><text><text v-if="field.required" class="required-mark">*</text>{{ field.label }}</text><textarea v-if="field.key === 'content'" v-model="form[field.key]" auto-height :placeholder="`请输入${field.label}`" @input="error = ''" /><input v-else v-model="form[field.key]" :type="field.inputType || 'text'" :placeholder="field.placeholder || `请输入${field.label}`" @input="error = ''" /></view>
|
||||
<view class="field field--picker"><text>功德类型</text><picker :range="meritTypeOptions.map((item) => item.label)" :value="meritTypeIndex" @change="selectMeritType"><view :class="{ placeholder: !form.type }">{{ meritTypeLabel || '请选择' }}</view></picker></view>
|
||||
<view class="field field--picker"><text>记录日期</text><picker mode="date" :value="form.meritDate" @change="selectMeritDate"><view :class="{ placeholder: !form.meritDate }">{{ form.meritDate || '请选择' }}</view></picker></view>
|
||||
<view class="field field--picker"><text>记录时间</text><picker mode="time" :value="form.meritClock" @change="selectMeritClock"><view :class="{ placeholder: !form.meritClock }">{{ form.meritClock || '请选择' }}</view></picker></view>
|
||||
<view v-for="field in fields" :key="field.key" class="field"
|
||||
><text
|
||||
><text v-if="field.required" class="required-mark">*</text
|
||||
>{{ field.label }}</text
|
||||
><textarea
|
||||
v-if="field.key === 'content'"
|
||||
v-model="form[field.key]"
|
||||
auto-height
|
||||
:placeholder="`请输入${field.label}`"
|
||||
@input="error = ''" /><input
|
||||
v-else
|
||||
v-model="form[field.key]"
|
||||
:type="field.inputType || 'text'"
|
||||
:placeholder="field.placeholder || `请输入${field.label}`"
|
||||
@input="error = ''"
|
||||
/></view>
|
||||
<view class="field field--picker"
|
||||
><text>功德类型</text
|
||||
><picker
|
||||
:range="meritTypeOptions.map((item) => item.label)"
|
||||
:value="meritTypeIndex"
|
||||
@change="selectMeritType"
|
||||
><view :class="{ placeholder: !form.type }">{{
|
||||
meritTypeLabel || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field field--picker"
|
||||
><text>记录日期</text
|
||||
><picker mode="date" :value="form.meritDate" @change="selectMeritDate"
|
||||
><view :class="{ placeholder: !form.meritDate }">{{
|
||||
form.meritDate || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<view class="field field--picker"
|
||||
><text>记录时间</text
|
||||
><picker
|
||||
mode="time"
|
||||
:value="form.meritClock"
|
||||
@change="selectMeritClock"
|
||||
><view :class="{ placeholder: !form.meritClock }">{{
|
||||
form.meritClock || "请选择"
|
||||
}}</view></picker
|
||||
></view
|
||||
>
|
||||
<text v-if="error" class="error">{{ error }}</text>
|
||||
<view class="form-actions"><AppButton type="secondary" label="取消" @click="cancelCreate" /><AppButton :disabled="submitting" :label="submitting ? '正在提交' : '提交功德记录'" @click="submit" /></view>
|
||||
<view class="form-actions"
|
||||
><AppButton
|
||||
type="secondary"
|
||||
label="取消"
|
||||
@click="cancelCreate" /><AppButton
|
||||
:disabled="submitting"
|
||||
:label="submitting ? '正在提交' : '提交功德记录'"
|
||||
@click="submit"
|
||||
/></view>
|
||||
</view>
|
||||
<view v-else-if="!valid" class="state-card"><text>功德记录入口无效</text><AppButton block label="返回上一页" @click="requestBack" /></view>
|
||||
<view v-else-if="listState === 'loading'" class="state-card"><AppLoading text="正在读取功德记录" /></view>
|
||||
<view v-else-if="listState === 'error'" class="state-card"><text>暂时无法读取功德记录</text><AppButton block type="secondary" label="重新加载" @click="loadMerits" /></view>
|
||||
<view v-else-if="listState === 'empty'" class="state-card"><text>还没有功德记录</text><AppButton block label="新建功德记录" @click="openCreate" /></view>
|
||||
<view v-else-if="!valid" class="state-card"
|
||||
><text>功德记录入口无效</text
|
||||
><AppButton block label="返回上一页" @click="requestBack"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'loading'" class="state-card"
|
||||
><AppLoading text="正在读取功德记录"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'error'" class="state-card"
|
||||
><text>暂时无法读取功德记录</text
|
||||
><AppButton block type="secondary" label="重新加载" @click="loadMerits"
|
||||
/></view>
|
||||
<view v-else-if="listState === 'empty'" class="state-card"
|
||||
><text>还没有功德记录</text
|
||||
><AppButton block label="新建功德记录" @click="openCreate"
|
||||
/></view>
|
||||
<view v-else class="merit-list">
|
||||
<text v-if="saveNotice" class="save-notice">功德记录已提交，并已从服务端重新读取。</text>
|
||||
<text class="merit-summary">共 {{ merits.length }} 笔，金额合计 ¥{{ totalAmount }}</text>
|
||||
<view v-for="item in merits" :key="item.id" class="merit-card"><view><text>{{ item.title }}</text><text>{{ item.donor }}{{ item.type ? ` · ${item.type}` : '' }}</text><text v-if="item.time || item.content">{{ item.time || item.content }}</text></view><text>¥{{ item.amount }}</text></view>
|
||||
<text v-if="saveNotice" class="save-notice"
|
||||
>功德记录已提交，并已从服务端重新读取。</text
|
||||
>
|
||||
<text class="merit-summary"
|
||||
>共 {{ merits.length }} 笔，金额合计 ¥{{ totalAmount }}</text
|
||||
>
|
||||
<view v-for="item in merits" :key="item.id" class="merit-card"
|
||||
><view
|
||||
><text>{{ item.title }}</text
|
||||
><text
|
||||
>{{ item.donor }}{{ item.type ? ` · ${item.type}` : "" }}</text
|
||||
><text v-if="item.time || item.content">{{
|
||||
item.time || item.content
|
||||
}}</text></view
|
||||
><text>¥{{ item.amount }}</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog :visible="discardVisible" title="放弃功德记录？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" />
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
title="放弃功德记录？"
|
||||
message="尚未提交的内容将被清除。"
|
||||
confirm-text="放弃并返回"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmDiscard"
|
||||
@cancel="cancelDiscard"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -36,7 +127,11 @@ import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
@@ -48,13 +143,27 @@ const saveNotice = ref(false);
|
||||
const submitting = ref(false);
|
||||
const error = ref("");
|
||||
const discardVisible = ref(false);
|
||||
const form = reactive({ donor: "", title: "", type: "", amount: "", meritDate: "", meritClock: "", content: "", sortOrder: "" });
|
||||
const form = reactive({
|
||||
donor: "",
|
||||
title: "",
|
||||
type: "",
|
||||
amount: "",
|
||||
meritDate: "",
|
||||
meritClock: "",
|
||||
content: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
const fields = [
|
||||
{ key: "donor", label: "捐赠人", required: true },
|
||||
{ key: "title", label: "功德标题", required: true },
|
||||
{ key: "amount", inputType: "digit", label: "金额" },
|
||||
{ key: "content", label: "记录内容" },
|
||||
{ key: "sortOrder", label: "排序值", inputType: "number", placeholder: "数值越小越靠前" },
|
||||
{
|
||||
key: "sortOrder",
|
||||
label: "排序值",
|
||||
inputType: "number",
|
||||
placeholder: "数值越小越靠前",
|
||||
},
|
||||
];
|
||||
const meritTypeOptions = Object.freeze([
|
||||
{ value: "donation", label: "捐赠" },
|
||||
@@ -65,76 +174,316 @@ const meritTypeOptions = Object.freeze([
|
||||
const controller = createRequestController();
|
||||
let active = true;
|
||||
const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
||||
const dirty = computed(() => Object.values(form).some((value) => String(value).trim()));
|
||||
const meritTime = computed(() => form.meritDate ? `${form.meritDate} ${form.meritClock || "00:00"}:00` : "");
|
||||
const meritTypeIndex = computed(() => Math.max(0, meritTypeOptions.findIndex((item) => item.value === form.type)));
|
||||
const meritTypeLabel = computed(() => meritTypeOptions.find((item) => item.value === form.type)?.label || "");
|
||||
const totalAmount = computed(() => merits.value.reduce((total, item) => total + item.amount, 0).toFixed(2));
|
||||
const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
|
||||
const confirmDiscard = () => { confirmation.confirm(); resetForm(); view.value = "list"; };
|
||||
const dirty = computed(() =>
|
||||
Object.values(form).some((value) => String(value).trim()),
|
||||
);
|
||||
const meritTime = computed(() =>
|
||||
form.meritDate ? `${form.meritDate} ${form.meritClock || "00:00"}:00` : "",
|
||||
);
|
||||
const meritTypeIndex = computed(() =>
|
||||
Math.max(
|
||||
0,
|
||||
meritTypeOptions.findIndex((item) => item.value === form.type),
|
||||
),
|
||||
);
|
||||
const meritTypeLabel = computed(
|
||||
() => meritTypeOptions.find((item) => item.value === form.type)?.label || "",
|
||||
);
|
||||
const totalAmount = computed(() =>
|
||||
merits.value.reduce((total, item) => total + item.amount, 0).toFixed(2),
|
||||
);
|
||||
const confirmation = createDiscardConfirmation((visible) => {
|
||||
discardVisible.value = visible;
|
||||
});
|
||||
const confirmDiscard = () => {
|
||||
confirmation.confirm();
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
};
|
||||
const cancelDiscard = confirmation.cancel;
|
||||
|
||||
const resetForm = () => { Object.assign(form, { donor: "", title: "", type: "", amount: "", meritDate: "", meritClock: "", content: "", sortOrder: "" }); error.value = ""; };
|
||||
const resetForm = () => {
|
||||
Object.assign(form, {
|
||||
donor: "",
|
||||
title: "",
|
||||
type: "",
|
||||
amount: "",
|
||||
meritDate: "",
|
||||
meritClock: "",
|
||||
content: "",
|
||||
sortOrder: "",
|
||||
});
|
||||
error.value = "";
|
||||
};
|
||||
const loadMerits = async () => {
|
||||
if (!valid.value) return;
|
||||
controller.abort();
|
||||
listState.value = "loading";
|
||||
try {
|
||||
const rows = await appApi.getMeritRecords(genealogyId.value, { requestController: controller });
|
||||
const rows = await appApi.getMeritRecords(genealogyId.value, {
|
||||
requestController: controller,
|
||||
});
|
||||
if (!active) return;
|
||||
merits.value = rows.map((item) => ({
|
||||
id: String(item.meritId || ""),
|
||||
donor: String(item.donorName || "未署名"),
|
||||
title: String(item.meritTitle || "未命名功德"),
|
||||
type: String(item.meritType || ""),
|
||||
amount: Number.isFinite(Number(item.amount)) ? Number(item.amount) : 0,
|
||||
time: String(item.meritTime || ""),
|
||||
content: String(item.meritContent || ""),
|
||||
})).filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
merits.value = rows
|
||||
.map((item) => ({
|
||||
id: String(item.meritId || ""),
|
||||
donor: String(item.donorName || "未署名"),
|
||||
title: String(item.meritTitle || "未命名功德"),
|
||||
type: String(item.meritType || ""),
|
||||
amount: Number.isFinite(Number(item.amount)) ? Number(item.amount) : 0,
|
||||
time: String(item.meritTime || ""),
|
||||
content: String(item.meritContent || ""),
|
||||
}))
|
||||
.filter((item) => /^[1-9]\d*$/.test(item.id));
|
||||
listState.value = merits.value.length ? "ready" : "empty";
|
||||
} catch (cause) {
|
||||
if (!active || isRequestCancelled(cause)) return;
|
||||
listState.value = "error";
|
||||
}
|
||||
};
|
||||
const openCreate = () => { if (!valid.value) return; saveNotice.value = false; resetForm(); view.value = "form"; };
|
||||
const cancelCreate = () => { resetForm(); view.value = "list"; };
|
||||
const selectMeritDate = (event) => { form.meritDate = event.detail.value || ""; error.value = ""; };
|
||||
const selectMeritClock = (event) => { form.meritClock = event.detail.value || ""; error.value = ""; };
|
||||
const selectMeritType = (event) => { form.type = meritTypeOptions[Number(event.detail.value)]?.value || ""; error.value = ""; };
|
||||
const openCreate = () => {
|
||||
if (!valid.value) return;
|
||||
saveNotice.value = false;
|
||||
resetForm();
|
||||
view.value = "form";
|
||||
};
|
||||
const cancelCreate = () => {
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
};
|
||||
const selectMeritDate = (event) => {
|
||||
form.meritDate = event.detail.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const selectMeritClock = (event) => {
|
||||
form.meritClock = event.detail.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const selectMeritType = (event) => {
|
||||
form.type = meritTypeOptions[Number(event.detail.value)]?.value || "";
|
||||
error.value = "";
|
||||
};
|
||||
const submit = async () => {
|
||||
if (submitting.value || !valid.value) return;
|
||||
const donorName = form.donor.trim();
|
||||
const meritTitle = form.title.trim();
|
||||
const amountText = form.amount.trim();
|
||||
if (!donorName || !meritTitle) { error.value = !donorName ? "请填写捐赠人" : "请填写功德标题"; return; }
|
||||
if (amountText && !Number.isFinite(Number(amountText))) { error.value = "金额必须是数字"; return; }
|
||||
if (!donorName || !meritTitle) {
|
||||
error.value = !donorName ? "请填写捐赠人" : "请填写功德标题";
|
||||
return;
|
||||
}
|
||||
if (amountText && !Number.isFinite(Number(amountText))) {
|
||||
error.value = "金额必须是数字";
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await appApi.createMeritRecord(genealogyId.value, { donorName, meritTitle, meritType: form.type, meritContent: form.content, meritTime: meritTime.value, sortOrder: form.sortOrder, ...(amountText ? { amount: Number(amountText) } : {}) }, { requestController: controller });
|
||||
await appApi.createMeritRecord(
|
||||
genealogyId.value,
|
||||
{
|
||||
donorName,
|
||||
meritTitle,
|
||||
meritType: form.type,
|
||||
meritContent: form.content,
|
||||
meritTime: meritTime.value,
|
||||
sortOrder: form.sortOrder,
|
||||
...(amountText ? { amount: Number(amountText) } : {}),
|
||||
},
|
||||
{ requestController: controller },
|
||||
);
|
||||
resetForm();
|
||||
view.value = "list";
|
||||
saveNotice.value = true;
|
||||
await loadMerits();
|
||||
} catch (cause) {
|
||||
if (!isRequestCancelled(cause)) error.value = cause?.message || "功德记录提交失败，请稍后重试。";
|
||||
} finally { submitting.value = false; }
|
||||
if (!isRequestCancelled(cause))
|
||||
error.value = cause?.message || "功德记录提交失败，请稍后重试。";
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
const requestBack = () => view.value !== "form"
|
||||
? goBack()
|
||||
: runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request });
|
||||
const requestBack = () =>
|
||||
view.value !== "form"
|
||||
? goBack()
|
||||
: runBackGuard({
|
||||
transientOpen: discardVisible.value,
|
||||
dirty: dirty.value,
|
||||
submitting: submitting.value,
|
||||
"close-transient": cancelDiscard,
|
||||
"block-submitting": () => true,
|
||||
"confirm-discard": confirmation.request,
|
||||
});
|
||||
|
||||
onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadMerits(); else listState.value = "invalid"; });
|
||||
onShow(() => { if (valid.value && view.value === "list" && listState.value !== "loading") loadMerits(); });
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
if (valid.value) loadMerits();
|
||||
else listState.value = "invalid";
|
||||
});
|
||||
onShow(() => {
|
||||
if (valid.value && view.value === "list" && listState.value !== "loading")
|
||||
loadMerits();
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnmounted(() => { active = false; controller.abort(); confirmation.dispose(); });
|
||||
onUnmounted(() => {
|
||||
active = false;
|
||||
controller.abort();
|
||||
confirmation.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
.merit-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
|
||||
.form-card, .state-card, .merit-card { @include adaptive.adaptive-records-content; }.form-card { box-sizing: border-box; padding: 46rpx; }.form-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
|
||||
.field { margin-top: 16rpx; }.field > text { display: block; margin: 0 8rpx 8rpx; color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }.field input, .field textarea, .field--picker picker > view { @include adaptive.adaptive-records-field; box-sizing: border-box; width: 100%; min-height: 76rpx; padding: 16rpx 22rpx; color: $ink; font-size: 23rpx; }.field textarea { min-height: 150rpx; }.field--picker picker { display: block; }.field--picker .placeholder { color: $ink-muted; }.error { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; }
|
||||
.form-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 16rpx; margin-top: 20rpx; }.form-actions .app-button { width: 100%; min-width: 0; }.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; color: $ink; font-size: 28rpx; text-align: center; }.state-card .app-button { width: 100%; margin-top: 24rpx; }.merit-list { display: flex; flex-direction: column; gap: 16rpx; }.save-notice { display: block; color: $brand-red; font-size: 22rpx; }.merit-summary { display: block; color: $ink-muted; font-size: 22rpx; }.merit-card { display: flex; min-height: 138rpx; align-items: center; justify-content: space-between; gap: 18rpx; padding: 28rpx 32rpx; }.merit-card > view { min-width: 0; flex: 1; }.merit-card text { display: block; }.merit-card > view text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; overflow-wrap: anywhere; }.merit-card > view text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }.merit-card > text { flex: 0 0 auto; color: $brand-red; font-size: 22rpx; }
|
||||
.merit-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.page-header,
|
||||
.page-content {
|
||||
z-index: 1;
|
||||
}
|
||||
.page-content {
|
||||
padding: 18rpx 24rpx 72rpx;
|
||||
}
|
||||
.form-card,
|
||||
.state-card,
|
||||
.merit-card {
|
||||
@include adaptive.adaptive-records-content;
|
||||
}
|
||||
.form-card {
|
||||
box-sizing: border-box;
|
||||
padding: 46rpx;
|
||||
}
|
||||
.form-card > text:first-child {
|
||||
display: block;
|
||||
color: $ink;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.form-copy {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.field {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.field > text {
|
||||
display: block;
|
||||
margin: 0 8rpx 8rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 26rpx;
|
||||
transform: translateY(-3rpx);
|
||||
}
|
||||
.field input,
|
||||
.field textarea,
|
||||
.field--picker picker > view {
|
||||
@include adaptive.adaptive-records-field;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
padding: 16rpx 22rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.field textarea {
|
||||
min-height: 150rpx;
|
||||
}
|
||||
.field--picker picker {
|
||||
display: block;
|
||||
}
|
||||
.field--picker .placeholder {
|
||||
color: $ink-muted;
|
||||
}
|
||||
.error {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.form-actions {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.form-actions .app-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.state-card {
|
||||
display: flex;
|
||||
min-height: 320rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 42rpx;
|
||||
color: $ink;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card .app-button {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.merit-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.save-notice {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.merit-summary {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.merit-card {
|
||||
display: flex;
|
||||
min-height: 138rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
.merit-card > view {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.merit-card text {
|
||||
display: block;
|
||||
}
|
||||
.merit-card > view text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.merit-card > view text:not(:first-child) {
|
||||
margin-top: 7rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.merit-card > text {
|
||||
flex: 0 0 auto;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -85,48 +85,50 @@
|
||||
/>
|
||||
|
||||
<template v-else-if="treeState === 'tree'">
|
||||
<view
|
||||
v-for="connector in lineageConnectors"
|
||||
:key="connector.id"
|
||||
class="lineage-connector"
|
||||
:class="{ 'lineage-connector--spouse': connector.kind === 'spouse' }"
|
||||
:style="connector.style"
|
||||
/>
|
||||
<view
|
||||
v-for="connector in lineageConnectors"
|
||||
:key="connector.id"
|
||||
class="lineage-connector"
|
||||
:class="{
|
||||
'lineage-connector--spouse': connector.kind === 'spouse',
|
||||
}"
|
||||
:style="connector.style"
|
||||
/>
|
||||
|
||||
<view
|
||||
v-for="member in layoutMembers"
|
||||
:key="member.id"
|
||||
:id="`tree-member-${member.id}`"
|
||||
class="member-node"
|
||||
:class="{
|
||||
'member-node--selected': selected?.id === member.id,
|
||||
'member-node--spouse': Boolean(member.spouseOf),
|
||||
}"
|
||||
:style="nodeGridStyle(member)"
|
||||
@click="openMemberPanel(member)"
|
||||
>
|
||||
<view class="member-node__surface">
|
||||
<view class="member-node__portrait">
|
||||
<view
|
||||
v-for="member in layoutMembers"
|
||||
:key="member.id"
|
||||
:id="`tree-member-${member.id}`"
|
||||
class="member-node"
|
||||
:class="{
|
||||
'member-node--selected': selected?.id === member.id,
|
||||
'member-node--spouse': Boolean(member.spouseOf),
|
||||
}"
|
||||
:style="nodeGridStyle(member)"
|
||||
@click="openMemberPanel(member)"
|
||||
>
|
||||
<view class="member-node__surface">
|
||||
<view class="member-node__portrait">
|
||||
<image
|
||||
class="member-node__avatar"
|
||||
src="/static/assets/foundation/transparent/tab-profile.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
class="member-node__avatar"
|
||||
src="/static/assets/foundation/transparent/tab-profile.png"
|
||||
class="member-node__divider"
|
||||
src="/static/assets/foundation/transparent/auth-divider-knot.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
class="member-node__divider"
|
||||
src="/static/assets/foundation/transparent/auth-divider-knot.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="member-node__copy">
|
||||
<text class="node-name">{{ member.name }}</text>
|
||||
<text class="node-relation"
|
||||
>{{ nodeRelationText(member) }}</text
|
||||
>
|
||||
<text class="node-years">{{ member.years }}</text>
|
||||
<view class="member-node__copy">
|
||||
<text class="node-name">{{ member.name }}</text>
|
||||
<text class="node-relation">{{
|
||||
nodeRelationText(member)
|
||||
}}</text>
|
||||
<text class="node-years">{{ member.years }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else class="tree-state-card">
|
||||
@@ -177,7 +179,10 @@
|
||||
/>
|
||||
<view class="member-action-profile__copy">
|
||||
<text>{{ selected.name }}</text>
|
||||
<text>第 {{ selected.generation }} 世 · {{ selected.relation }} · {{ selected.branch }}</text>
|
||||
<text
|
||||
>第 {{ selected.generation }} 世 · {{ selected.relation }} ·
|
||||
{{ selected.branch }}</text
|
||||
>
|
||||
<text>点击头像查看资料</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -197,7 +202,9 @@
|
||||
:visible="unavailableActionVisible"
|
||||
eyebrow="服务状态"
|
||||
:title="unavailableAction?.label || '当前操作'"
|
||||
:message="unavailableAction?.unavailableCopy || '该操作暂未接入可靠服务合同。'"
|
||||
:message="
|
||||
unavailableAction?.unavailableCopy || '该操作暂未接入可靠服务合同。'
|
||||
"
|
||||
confirm-text="我知道了"
|
||||
@confirm="unavailableActionVisible = false"
|
||||
@cancel="unavailableActionVisible = false"
|
||||
@@ -247,17 +254,43 @@ const members = ref([]);
|
||||
|
||||
const memberActions = Object.freeze([
|
||||
{ key: "VIEW_PROFILE", label: "查看资料", routeKey: "T03" },
|
||||
{ key: "ADD_FATHER", label: "添加父亲", routeKey: "T04", relationType: "FATHER" },
|
||||
{ key: "ADD_MOTHER", label: "添加母亲", routeKey: "T04", relationType: "MOTHER" },
|
||||
{ key: "ADD_SPOUSE", label: "添加配偶", routeKey: "T04", relationType: "SPOUSE" },
|
||||
{ key: "ADD_SIBLING", label: "添加兄弟姐妹", routeKey: "T04", relationType: "SIBLING" },
|
||||
{
|
||||
key: "ADD_FATHER",
|
||||
label: "添加父亲",
|
||||
routeKey: "T04",
|
||||
relationType: "FATHER",
|
||||
},
|
||||
{
|
||||
key: "ADD_MOTHER",
|
||||
label: "添加母亲",
|
||||
routeKey: "T04",
|
||||
relationType: "MOTHER",
|
||||
},
|
||||
{
|
||||
key: "ADD_SPOUSE",
|
||||
label: "添加配偶",
|
||||
routeKey: "T04",
|
||||
relationType: "SPOUSE",
|
||||
},
|
||||
{
|
||||
key: "ADD_SIBLING",
|
||||
label: "添加兄弟姐妹",
|
||||
routeKey: "T04",
|
||||
relationType: "SIBLING",
|
||||
},
|
||||
{ key: "ADJUST_RANK", label: "调整排行", routeKey: "T06", mode: "rank" },
|
||||
{ key: "ADD_SON", label: "添加儿子", routeKey: "T04", relationType: "SON" },
|
||||
{ key: "ADD_DAUGHTER", label: "添加女儿", routeKey: "T04", relationType: "DAUGHTER" },
|
||||
{
|
||||
key: "ADD_DAUGHTER",
|
||||
label: "添加女儿",
|
||||
routeKey: "T04",
|
||||
relationType: "DAUGHTER",
|
||||
},
|
||||
{
|
||||
key: "BIND_INVITE",
|
||||
label: "邀请绑定",
|
||||
unavailableCopy: "邀请签发、目标身份查找、绑定 mutation 和结果查询尚无可靠合同；当前不会借邀请码或普通入谱申请替代。",
|
||||
unavailableCopy:
|
||||
"邀请签发、目标身份查找、绑定 mutation 和结果查询尚无可靠合同；当前不会借邀请码或普通入谱申请替代。",
|
||||
},
|
||||
{ key: "EDIT_PROFILE", label: "编辑信息", routeKey: "T05" },
|
||||
]);
|
||||
@@ -278,14 +311,21 @@ const layoutMembers = computed(() => {
|
||||
.filter((member) => Number(member.generation) === generation)
|
||||
.sort(
|
||||
(left, right) =>
|
||||
String(left.parentId || "").localeCompare(String(right.parentId || "")) ||
|
||||
String(left.spouseOf || left.id).localeCompare(String(right.spouseOf || right.id)) ||
|
||||
String(left.parentId || "").localeCompare(
|
||||
String(right.parentId || ""),
|
||||
) ||
|
||||
String(left.spouseOf || left.id).localeCompare(
|
||||
String(right.spouseOf || right.id),
|
||||
) ||
|
||||
Number(Boolean(left.spouseOf)) - Number(Boolean(right.spouseOf)) ||
|
||||
String(left.id).localeCompare(String(right.id)),
|
||||
),
|
||||
]),
|
||||
);
|
||||
const maxCount = Math.max(1, ...Array.from(groups.values()).map((group) => group.length));
|
||||
const maxCount = Math.max(
|
||||
1,
|
||||
...Array.from(groups.values()).map((group) => group.length),
|
||||
);
|
||||
const canvasWidth = Math.max(660, maxCount * MEMBER_GAP + 80);
|
||||
return generations.flatMap((generation, generationIndex) => {
|
||||
const group = groups.get(generation) || [];
|
||||
@@ -365,7 +405,8 @@ const lineageConnectors = computed(() => {
|
||||
});
|
||||
const childrenByParent = new Map();
|
||||
layoutMembers.value.forEach((member) => {
|
||||
if (member.spouseOf || !member.parentId || !memberById.has(member.parentId)) return;
|
||||
if (member.spouseOf || !member.parentId || !memberById.has(member.parentId))
|
||||
return;
|
||||
const children = childrenByParent.get(member.parentId) || [];
|
||||
children.push(member);
|
||||
childrenByParent.set(member.parentId, children);
|
||||
@@ -382,7 +423,9 @@ const lineageConnectors = computed(() => {
|
||||
const parentAnchorY = spouse
|
||||
? snapToGrid(parentBottom + FAMILY_LINK_OFFSET)
|
||||
: parentBottom;
|
||||
const childTop = Math.min(...children.map((child) => child.y - NODE_HALF_HEIGHT));
|
||||
const childTop = Math.min(
|
||||
...children.map((child) => child.y - NODE_HALF_HEIGHT),
|
||||
);
|
||||
const branchY = snapToGrid((parentAnchorY + childTop) / 2);
|
||||
const minX = Math.min(...children.map((child) => child.x));
|
||||
const maxX = Math.max(...children.map((child) => child.x));
|
||||
@@ -403,12 +446,20 @@ const lineageConnectors = computed(() => {
|
||||
connectors.push({
|
||||
id: `${parentId}-${spouse.id}-family-spouse`,
|
||||
kind: "family",
|
||||
style: verticalStyle(spouse.x, spouse.y + NODE_HALF_HEIGHT, parentAnchorY),
|
||||
style: verticalStyle(
|
||||
spouse.x,
|
||||
spouse.y + NODE_HALF_HEIGHT,
|
||||
parentAnchorY,
|
||||
),
|
||||
});
|
||||
connectors.push({
|
||||
id: `${parentId}-${spouse.id}-family-bridge`,
|
||||
kind: "family",
|
||||
style: horizontalStyle(Math.min(parent.x, spouse.x), Math.max(parent.x, spouse.x), parentAnchorY),
|
||||
style: horizontalStyle(
|
||||
Math.min(parent.x, spouse.x),
|
||||
Math.max(parent.x, spouse.x),
|
||||
parentAnchorY,
|
||||
),
|
||||
});
|
||||
}
|
||||
connectors.push({
|
||||
@@ -422,10 +473,12 @@ const lineageConnectors = computed(() => {
|
||||
gridRow: `${Math.round(branchY / GRID_UNIT) + 1} / span 1`,
|
||||
},
|
||||
});
|
||||
children.forEach((child) => connectors.push({
|
||||
id: `${parentId}-${child.id}`,
|
||||
style: verticalStyle(child.x, branchY, child.y - NODE_HALF_HEIGHT),
|
||||
}));
|
||||
children.forEach((child) =>
|
||||
connectors.push({
|
||||
id: `${parentId}-${child.id}`,
|
||||
style: verticalStyle(child.x, branchY, child.y - NODE_HALF_HEIGHT),
|
||||
}),
|
||||
);
|
||||
});
|
||||
layoutMembers.value.forEach((member) => {
|
||||
if (!member.spouseOf) return;
|
||||
@@ -505,7 +558,9 @@ const loadTree = async (query = {}) => {
|
||||
selected.value =
|
||||
layoutMembers.value.find(
|
||||
(item) => String(item.id) === String(query.selectedId),
|
||||
) || layoutMembers.value[0] || null;
|
||||
) ||
|
||||
layoutMembers.value[0] ||
|
||||
null;
|
||||
treeState.value = members.value.length ? "tree" : "empty";
|
||||
if (treeState.value === "tree" && selected.value) {
|
||||
await nextTick();
|
||||
@@ -545,14 +600,17 @@ const handleTreeScroll = (event) => {
|
||||
if (ignoreTreeScroll || treeState.value !== "tree") return;
|
||||
const scrollLeft = Number(event?.detail?.scrollLeft || 0);
|
||||
currentTreeScrollLeft.value = scrollLeft;
|
||||
treeHasDrifted.value = Math.abs(scrollLeft - centeredTreeScrollLeft.value) > 80;
|
||||
treeHasDrifted.value =
|
||||
Math.abs(scrollLeft - centeredTreeScrollLeft.value) > 80;
|
||||
};
|
||||
|
||||
const getFamilyPartner = (member) => {
|
||||
if (!member) return null;
|
||||
const partnerId = member.spouseOf || layoutMembers.value.find(
|
||||
(item) => String(item.spouseOf || "") === String(member.id),
|
||||
)?.id;
|
||||
const partnerId =
|
||||
member.spouseOf ||
|
||||
layoutMembers.value.find(
|
||||
(item) => String(item.spouseOf || "") === String(member.id),
|
||||
)?.id;
|
||||
const partner = layoutMembers.value.find(
|
||||
(item) => String(item.id) === String(partnerId || ""),
|
||||
);
|
||||
@@ -566,9 +624,7 @@ const recenterSelectedMember = async () => {
|
||||
const [scrollRect, nodeRect, spouseRect] = await new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery();
|
||||
query.select(".tree-scroll").boundingClientRect();
|
||||
query
|
||||
.select(`#tree-member-${selected.value.id}`)
|
||||
.boundingClientRect();
|
||||
query.select(`#tree-member-${selected.value.id}`).boundingClientRect();
|
||||
if (spouse) {
|
||||
query.select(`#tree-member-${spouse.id}`).boundingClientRect();
|
||||
}
|
||||
@@ -580,14 +636,15 @@ const recenterSelectedMember = async () => {
|
||||
: nodeRect.left;
|
||||
const targetRight = spouseRect
|
||||
? Math.max(
|
||||
nodeRect.left + nodeRect.width,
|
||||
spouseRect.left + spouseRect.width,
|
||||
)
|
||||
nodeRect.left + nodeRect.width,
|
||||
spouseRect.left + spouseRect.width,
|
||||
)
|
||||
: nodeRect.left + nodeRect.width;
|
||||
const centeredScrollLeft = Math.max(
|
||||
0,
|
||||
currentTreeScrollLeft.value +
|
||||
(targetLeft + targetRight) / 2 - (scrollRect.left + scrollRect.width / 2),
|
||||
(targetLeft + targetRight) / 2 -
|
||||
(scrollRect.left + scrollRect.width / 2),
|
||||
);
|
||||
treeScrollLeft.value = centeredScrollLeft;
|
||||
currentTreeScrollLeft.value = centeredScrollLeft;
|
||||
@@ -623,13 +680,25 @@ const handleStateAction = () => {
|
||||
const toMember = () => {
|
||||
if (!selected.value) return Promise.resolve(false);
|
||||
memberActionPanelVisible.value = false;
|
||||
return openPage("T03", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, "T01");
|
||||
return openPage(
|
||||
"T03",
|
||||
{ genealogyId: genealogyId.value, personId: String(selected.value.id) },
|
||||
"T01",
|
||||
);
|
||||
};
|
||||
const toDirectory = () =>
|
||||
openPage("T07", { genealogyId: genealogyId.value }, "T01");
|
||||
const toRank = () =>
|
||||
selected.value
|
||||
? openPage("T06", { genealogyId: genealogyId.value, personId: String(selected.value.id), mode: "rank" }, "T01")
|
||||
? openPage(
|
||||
"T06",
|
||||
{
|
||||
genealogyId: genealogyId.value,
|
||||
personId: String(selected.value.id),
|
||||
mode: "rank",
|
||||
},
|
||||
"T01",
|
||||
)
|
||||
: Promise.resolve(false);
|
||||
const openMemberPanel = (member) => {
|
||||
selected.value = member;
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="member-page__header">
|
||||
<PageHeader title="成员档案"
|
||||
<PageHeader
|
||||
title="成员档案"
|
||||
:action="canPreviewEdit ? '编辑预览' : ''"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
@@ -26,14 +27,26 @@
|
||||
</view>
|
||||
|
||||
<view class="member-panel">
|
||||
<AppLoading v-if="memberState === 'loading'" text="正在读取成员档案" description="请稍候，正在整理成员资料。" />
|
||||
<AppLoading
|
||||
v-if="memberState === 'loading'"
|
||||
text="正在读取成员档案"
|
||||
description="请稍候，正在整理成员资料。"
|
||||
/>
|
||||
|
||||
<view v-else-if="memberState === 'detail' && member" class="member-detail">
|
||||
<view
|
||||
v-else-if="memberState === 'detail' && member"
|
||||
class="member-detail"
|
||||
>
|
||||
<view class="member-heading">
|
||||
<view class="member-heading__seal"><text>{{ member.name.slice(0, 1) }}</text></view>
|
||||
<view class="member-heading__seal"
|
||||
><text>{{ member.name.slice(0, 1) }}</text></view
|
||||
>
|
||||
<view>
|
||||
<text>{{ member.name }}</text>
|
||||
<text>第 {{ member.generation }} 世 · {{ member.relation }} · {{ member.branch }}</text>
|
||||
<text
|
||||
>第 {{ member.generation }} 世 · {{ member.relation }} ·
|
||||
{{ member.branch }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -45,10 +58,13 @@
|
||||
|
||||
<text class="member-section-title">基本资料</text>
|
||||
<view v-for="item in details" :key="item.label" class="member-info-row">
|
||||
<text>{{ item.label }}</text><text>{{ item.value || "未填写" }}</text>
|
||||
<text>{{ item.label }}</text
|
||||
><text>{{ item.value || "未填写" }}</text>
|
||||
</view>
|
||||
|
||||
<text class="member-section-title member-section-title--relation">亲属关系</text>
|
||||
<text class="member-section-title member-section-title--relation"
|
||||
>亲属关系</text
|
||||
>
|
||||
<view class="member-relatives">
|
||||
<view
|
||||
v-for="relative in member.relatives"
|
||||
@@ -56,22 +72,40 @@
|
||||
:data-person-id="relative.id"
|
||||
@click="openRelative(relative.id)"
|
||||
>
|
||||
<text>{{ relative.relation }}</text><text>{{ relative.name }}</text>
|
||||
<text>{{ relative.relation }}</text
|
||||
><text>{{ relative.name }}</text>
|
||||
</view>
|
||||
<text v-if="!member.relatives.length">尚未记录可查看的亲属</text>
|
||||
</view>
|
||||
|
||||
<view class="member-record-actions">
|
||||
<view role="button" aria-label="查看成长日志" @click="toGrowthJournal"><text>成长日志</text></view>
|
||||
<view role="button" aria-label="查看人生事服务状态" @click="toLifeEvents"><text>人生事（待开放）</text></view>
|
||||
<view role="button" aria-label="查看成长日志" @click="toGrowthJournal"
|
||||
><text>成长日志</text></view
|
||||
>
|
||||
<view
|
||||
role="button"
|
||||
aria-label="查看人生事服务状态"
|
||||
@click="toLifeEvents"
|
||||
><text>人生事（待开放）</text></view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view v-if="canPreviewEdit" class="member-profile-action" @click="toEdit"><text>制作成员编辑预览</text></view>
|
||||
<view
|
||||
v-if="canPreviewEdit"
|
||||
class="member-profile-action"
|
||||
@click="toEdit"
|
||||
><text>制作成员编辑预览</text></view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view v-else-if="memberState === 'restricted' && member" class="member-restricted">
|
||||
<view
|
||||
v-else-if="memberState === 'restricted' && member"
|
||||
class="member-restricted"
|
||||
>
|
||||
<view class="member-heading">
|
||||
<view class="member-heading__seal"><text>{{ member.name.slice(0, 1) }}</text></view>
|
||||
<view class="member-heading__seal"
|
||||
><text>{{ member.name.slice(0, 1) }}</text></view
|
||||
>
|
||||
<view>
|
||||
<text>{{ member.name }}</text>
|
||||
<text>第 {{ member.generation }} 世 · {{ member.relation }}</text>
|
||||
@@ -79,13 +113,17 @@
|
||||
</view>
|
||||
<text>{{ restrictedCopy.title }}</text>
|
||||
<text>{{ restrictedCopy.copy }}</text>
|
||||
<view class="member-restricted-action" @click="toTree"><text>返回上一位成员</text></view>
|
||||
<view class="member-restricted-action" @click="toTree"
|
||||
><text>返回上一位成员</text></view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view v-else class="member-error">
|
||||
<text>成员档案暂不可用</text>
|
||||
<text>{{ errorMessage }}</text>
|
||||
<view class="member-profile-action" @click="toTree"><text>返回世系树</text></view>
|
||||
<view class="member-profile-action" @click="toTree"
|
||||
><text>返回世系树</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -97,7 +135,11 @@ import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
consumeNavigationResult,
|
||||
handleBackPress,
|
||||
@@ -116,23 +158,69 @@ const trailIndex = ref(-1);
|
||||
const memberRequestController = createRequestController();
|
||||
let loadSequence = 0;
|
||||
|
||||
const details = computed(() => member.value ? [
|
||||
{ label: "别名", value: member.value.aliasName },
|
||||
{ label: "字辈", value: member.value.generationName },
|
||||
{ label: "性别（字典值）", value: member.value.sex },
|
||||
{ label: "人物状态（字典值）", value: member.value.personStatus },
|
||||
{ label: "出生日期", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.birthDate },
|
||||
{ label: "出生农历", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.birthLunar },
|
||||
{ label: "生卒信息", value: member.value.years },
|
||||
{ label: "出生地", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.birthplace },
|
||||
{ label: "逝世农历", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.deathLunar },
|
||||
{ label: "逝世地", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.deathPlace },
|
||||
{ label: "安葬地", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.burialPlace },
|
||||
{ label: "配偶", value: member.value.spouseNames },
|
||||
{ label: "所属支系", value: member.value.branch },
|
||||
{ label: "生平", value: member.value.status === "forbidden" ? "按权限隐藏" : member.value.biography },
|
||||
{ label: "备注", value: member.value.remark },
|
||||
] : []);
|
||||
const details = computed(() =>
|
||||
member.value
|
||||
? [
|
||||
{ label: "别名", value: member.value.aliasName },
|
||||
{ label: "字辈", value: member.value.generationName },
|
||||
{ label: "性别（字典值）", value: member.value.sex },
|
||||
{ label: "人物状态（字典值）", value: member.value.personStatus },
|
||||
{
|
||||
label: "出生日期",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.birthDate,
|
||||
},
|
||||
{
|
||||
label: "出生农历",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.birthLunar,
|
||||
},
|
||||
{ label: "生卒信息", value: member.value.years },
|
||||
{
|
||||
label: "出生地",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.birthplace,
|
||||
},
|
||||
{
|
||||
label: "逝世农历",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.deathLunar,
|
||||
},
|
||||
{
|
||||
label: "逝世地",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.deathPlace,
|
||||
},
|
||||
{
|
||||
label: "安葬地",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.burialPlace,
|
||||
},
|
||||
{ label: "配偶", value: member.value.spouseNames },
|
||||
{ label: "所属支系", value: member.value.branch },
|
||||
{
|
||||
label: "生平",
|
||||
value:
|
||||
member.value.status === "forbidden"
|
||||
? "按权限隐藏"
|
||||
: member.value.biography,
|
||||
},
|
||||
{ label: "备注", value: member.value.remark },
|
||||
]
|
||||
: [],
|
||||
);
|
||||
const canPreviewEdit = computed(() => memberState.value === "detail");
|
||||
const restrictedCopy = computed(() =>
|
||||
member.value?.status === "forbidden"
|
||||
@@ -145,18 +233,29 @@ const restrictedCopy = computed(() =>
|
||||
copy: "页面只保留姓名、关系与世代，不展示其他资料或操作入口。",
|
||||
},
|
||||
);
|
||||
const statusLabel = computed(() => ({ privacy: "隐私资料", deceased: "离世纪念", forbidden: "访问受限" })[member.value?.status] || "成员状态");
|
||||
const statusDescription = computed(() => ({
|
||||
privacy: "部分资料仅向授权成员展示",
|
||||
deceased: "查看生平保留与纪念资料说明",
|
||||
forbidden: "当前账号只能查看有限身份信息",
|
||||
})[member.value?.status] || "查看成员状态说明");
|
||||
const memberContextDescription = computed(() => ({
|
||||
loading: "正在读取成员资料",
|
||||
detail: "成员身份与亲属关系",
|
||||
restricted: "隐私成员仅展示基础身份",
|
||||
error: "请重新选择成员",
|
||||
}[memberState.value] || "请重新选择成员"));
|
||||
const statusLabel = computed(
|
||||
() =>
|
||||
({ privacy: "隐私资料", deceased: "离世纪念", forbidden: "访问受限" })[
|
||||
member.value?.status
|
||||
] || "成员状态",
|
||||
);
|
||||
const statusDescription = computed(
|
||||
() =>
|
||||
({
|
||||
privacy: "部分资料仅向授权成员展示",
|
||||
deceased: "查看生平保留与纪念资料说明",
|
||||
forbidden: "当前账号只能查看有限身份信息",
|
||||
})[member.value?.status] || "查看成员状态说明",
|
||||
);
|
||||
const memberContextDescription = computed(
|
||||
() =>
|
||||
({
|
||||
loading: "正在读取成员资料",
|
||||
detail: "成员身份与亲属关系",
|
||||
restricted: "隐私成员仅展示基础身份",
|
||||
error: "请重新选择成员",
|
||||
})[memberState.value] || "请重新选择成员",
|
||||
);
|
||||
|
||||
const loadMember = async (nextPersonId, { preserveCurrent = false } = {}) => {
|
||||
const normalizedPersonId = String(nextPersonId || "");
|
||||
@@ -210,7 +309,9 @@ const initializeMemberTrail = async (initialPersonId) => {
|
||||
memberTrail.splice(0, memberTrail.length);
|
||||
trailIndex.value = -1;
|
||||
const normalizedPersonId = String(initialPersonId || "");
|
||||
const loaded = await loadMember(normalizedPersonId, { preserveCurrent: true });
|
||||
const loaded = await loadMember(normalizedPersonId, {
|
||||
preserveCurrent: true,
|
||||
});
|
||||
if (!loaded) return false;
|
||||
memberTrail.splice(0, memberTrail.length, normalizedPersonId);
|
||||
trailIndex.value = 0;
|
||||
@@ -219,7 +320,8 @@ const initializeMemberTrail = async (initialPersonId) => {
|
||||
|
||||
const openRelative = async (nextPersonId) => {
|
||||
const normalizedPersonId = String(nextPersonId || "");
|
||||
if (!normalizedPersonId || normalizedPersonId === personId.value) return false;
|
||||
if (!normalizedPersonId || normalizedPersonId === personId.value)
|
||||
return false;
|
||||
|
||||
// 先读取目标成员，只有真实读取成功后才截断前进历史并推进轨迹；失败时
|
||||
// 当前成员、当前索引和既有历史全部保持不变。
|
||||
@@ -235,7 +337,9 @@ const popMemberTrail = async () => {
|
||||
while (trailIndex.value > 0) {
|
||||
const targetIndex = trailIndex.value - 1;
|
||||
const historicalPersonId = memberTrail[targetIndex];
|
||||
const loaded = await loadMember(historicalPersonId, { preserveCurrent: true });
|
||||
const loaded = await loadMember(historicalPersonId, {
|
||||
preserveCurrent: true,
|
||||
});
|
||||
if (loaded) {
|
||||
trailIndex.value = targetIndex;
|
||||
return true;
|
||||
@@ -285,58 +389,265 @@ onUnload(() => {
|
||||
|
||||
const toEdit = () => {
|
||||
if (!canPreviewEdit.value) return false;
|
||||
return openPage("T05", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
|
||||
return openPage(
|
||||
"T05",
|
||||
{ genealogyId: genealogyId.value, personId: personId.value },
|
||||
"T03",
|
||||
);
|
||||
};
|
||||
const openMemberState = () =>
|
||||
openPage("T08", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
|
||||
openPage(
|
||||
"T08",
|
||||
{ genealogyId: genealogyId.value, personId: personId.value },
|
||||
"T03",
|
||||
);
|
||||
const toGrowthJournal = () =>
|
||||
openPage("R08", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
|
||||
openPage(
|
||||
"R08",
|
||||
{ genealogyId: genealogyId.value, personId: personId.value },
|
||||
"T03",
|
||||
);
|
||||
const toLifeEvents = () =>
|
||||
openPage("R09", { genealogyId: genealogyId.value, personId: personId.value }, "T03");
|
||||
openPage(
|
||||
"R09",
|
||||
{ genealogyId: genealogyId.value, personId: personId.value },
|
||||
"T03",
|
||||
);
|
||||
const toTree = requestBack;
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.member-page { display: flex; min-height: 100vh; flex-direction: column; padding-bottom: 28rpx; box-sizing: border-box; background: $paper; }
|
||||
.member-page__header, .member-context, .member-panel { z-index: 2; }
|
||||
.member-context { @include adaptive.adaptive-tree-field; width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 16rpx 24rpx; }
|
||||
.member-context text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
|
||||
.member-context text:first-child { color: $ink; font-size: 26rpx; font-weight: 700; }
|
||||
.member-panel { @include adaptive.adaptive-tree-panel; width: calc(100% - 32rpx); margin: 16rpx auto 0; padding: 9% 8%; }
|
||||
.member-panel > .app-loading { margin-top: 30%; }
|
||||
.member-heading { display: flex; align-items: center; gap: 20rpx; }
|
||||
.member-heading__seal { display: flex; width: 74rpx; height: 74rpx; flex: 0 0 74rpx; align-items: center; justify-content: center; background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / contain no-repeat; }
|
||||
.member-heading__seal text { color: #fff7e7; font-size: 28rpx; }
|
||||
.member-heading > view:last-child text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
|
||||
.member-heading > view:last-child text:last-child { font-size: 23rpx; }
|
||||
.member-heading > view:last-child text:first-child { color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 36rpx; font-weight: 700; }
|
||||
.member-status-entry { @include adaptive.adaptive-genealogy-list-card; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14rpx; margin-top: 18rpx; padding: 18rpx 22rpx; }
|
||||
.member-status-entry text { color: $ink-muted; font-size: 22rpx; line-height: 1.4; }
|
||||
.member-status-entry text:first-child, .member-status-entry text:last-child { color: $brand-red; font-weight: 700; }
|
||||
.member-section-title { display: block; margin-top: 24rpx; color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||||
.member-info-row { @include adaptive.adaptive-tree-field; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 64rpx; align-items: center; gap: 18rpx; margin-top: 8rpx; padding: 8rpx 18rpx; }
|
||||
.member-info-row text { color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
|
||||
.member-info-row text:last-child { color: $ink; text-align: right; }
|
||||
.member-relatives { margin-top: 8rpx; font-size: 23rpx; }
|
||||
.member-relatives > view { display: flex; justify-content: space-between; gap: 20rpx; padding: 12rpx 18rpx; color: $ink; font-size: 23rpx; }
|
||||
.member-relatives > view text:last-child { color: $brand-red; }
|
||||
.member-relatives > text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.5; }
|
||||
.member-record-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12rpx; margin-top: 20rpx; }
|
||||
.member-record-actions > view { @include adaptive.adaptive-scroll-button(secondary); display: flex; min-height: 72rpx; align-items: center; justify-content: center; padding: 8rpx 14rpx; text-align: center; }
|
||||
.member-record-actions text { color: $brand-red; font-size: 22rpx; font-weight: 700; line-height: 1.35; }
|
||||
.member-profile-action { @include adaptive.adaptive-scroll-button(primary); display: flex; min-height: 76rpx; align-items: center; justify-content: center; margin-top: 22rpx; }
|
||||
.member-profile-action text { color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
.member-restricted { padding-top: 14rpx; }
|
||||
.member-restricted > text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.6; text-align: center; }
|
||||
.member-restricted > text:first-of-type { margin-top: 28rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 31rpx; font-weight: 700; }
|
||||
.member-restricted > text + text { margin-top: 12rpx; }
|
||||
.member-restricted-action { @include adaptive.adaptive-scroll-button(secondary); display: flex; min-height: 76rpx; align-items: center; justify-content: center; margin-top: 22rpx; }
|
||||
.member-restricted-action text { color: $brand-red; font-size: 24rpx; font-weight: 700; }
|
||||
.member-error { margin-top: 30%; text-align: center; }
|
||||
.member-error > text { display: block; color: $ink-muted; font-size: 24rpx; line-height: 1.55; }
|
||||
.member-error > text:nth-child(2) { font-size: 24rpx; }
|
||||
.member-error > text:first-child { color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 34rpx; font-weight: 700; }
|
||||
@media (min-width: 400px) { .member-context, .member-panel { width: calc(100% - 48rpx); } }
|
||||
.member-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
padding-bottom: 28rpx;
|
||||
box-sizing: border-box;
|
||||
background: $paper;
|
||||
}
|
||||
.member-page__header,
|
||||
.member-context,
|
||||
.member-panel {
|
||||
z-index: 2;
|
||||
}
|
||||
.member-context {
|
||||
@include adaptive.adaptive-tree-field;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 0;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
.member-context text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.member-context text:first-child {
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-panel {
|
||||
@include adaptive.adaptive-tree-panel;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 16rpx auto 0;
|
||||
padding: 9% 8%;
|
||||
}
|
||||
.member-panel > .app-loading {
|
||||
margin-top: 30%;
|
||||
}
|
||||
.member-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.member-heading__seal {
|
||||
display: flex;
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
flex: 0 0 74rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.member-heading__seal text {
|
||||
color: #fff7e7;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.member-heading > view:last-child text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.member-heading > view:last-child text:last-child {
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.member-heading > view:last-child text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-status-entry {
|
||||
@include adaptive.adaptive-genealogy-list-card;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
}
|
||||
.member-status-entry text {
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.member-status-entry text:first-child,
|
||||
.member-status-entry text:last-child {
|
||||
color: $brand-red;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-section-title {
|
||||
display: block;
|
||||
margin-top: 24rpx;
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-info-row {
|
||||
@include adaptive.adaptive-tree-field;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
min-height: 64rpx;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
margin-top: 8rpx;
|
||||
padding: 8rpx 18rpx;
|
||||
}
|
||||
.member-info-row text {
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.member-info-row text:last-child {
|
||||
color: $ink;
|
||||
text-align: right;
|
||||
}
|
||||
.member-relatives {
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.member-relatives > view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
padding: 12rpx 18rpx;
|
||||
color: $ink;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.member-relatives > view text:last-child {
|
||||
color: $brand-red;
|
||||
}
|
||||
.member-relatives > text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.member-record-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.member-record-actions > view {
|
||||
@include adaptive.adaptive-scroll-button(secondary);
|
||||
display: flex;
|
||||
min-height: 72rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8rpx 14rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.member-record-actions text {
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.member-profile-action {
|
||||
@include adaptive.adaptive-scroll-button(primary);
|
||||
display: flex;
|
||||
min-height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.member-profile-action text {
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-restricted {
|
||||
padding-top: 14rpx;
|
||||
}
|
||||
.member-restricted > text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
.member-restricted > text:first-of-type {
|
||||
margin-top: 28rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-restricted > text + text {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.member-restricted-action {
|
||||
@include adaptive.adaptive-scroll-button(secondary);
|
||||
display: flex;
|
||||
min-height: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.member-restricted-action text {
|
||||
color: $brand-red;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-error {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.member-error > text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.member-error > text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.member-error > text:first-child {
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.member-context,
|
||||
.member-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+448
-111
@@ -10,19 +10,33 @@
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="add-relative-page__header">
|
||||
<PageHeader :title="isFirstMember ? '录入首位成员' : '新增亲属'" custom-back @back="requestBack" />
|
||||
<PageHeader
|
||||
:title="isFirstMember ? '录入首位成员' : '新增亲属'"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="add-relative-panel">
|
||||
<AppLoading v-if="addState === 'loading'" text="正在读取成员资料" description="请稍候，正在确认当前人物。" />
|
||||
<AppLoading
|
||||
v-if="addState === 'loading'"
|
||||
text="正在读取成员资料"
|
||||
description="请稍候，正在确认当前人物。"
|
||||
/>
|
||||
|
||||
<view v-else-if="addState === 'form'" class="add-relative-form">
|
||||
<text class="form-eyebrow">{{ isFirstMember ? "建立世系起点" : "补全家族关系" }}</text>
|
||||
<text class="form-eyebrow">{{
|
||||
isFirstMember ? "建立世系起点" : "补全家族关系"
|
||||
}}</text>
|
||||
<text class="form-title">{{ formTitle }}</text>
|
||||
<text class="form-copy">{{ formCopy }}</text>
|
||||
|
||||
<view v-if="!isFirstMember" class="member-context">
|
||||
<text>当前成员</text><text>{{ currentMember.name }} · 第 {{ currentMember.generation }} 世</text>
|
||||
<text>当前成员</text
|
||||
><text
|
||||
>{{ currentMember.name }} · 第
|
||||
{{ currentMember.generation }} 世</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="form-field">
|
||||
@@ -35,35 +49,66 @@
|
||||
@input="clearError('name')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</text>
|
||||
<text v-if="fieldErrors.name" class="field-error">{{
|
||||
fieldErrors.name
|
||||
}}</text>
|
||||
|
||||
<view class="form-field">
|
||||
<text>人物编号</text>
|
||||
<input v-model="addForm.personNo" maxlength="40" placeholder="不填则由服务端生成" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.personNo"
|
||||
maxlength="40"
|
||||
placeholder="不填则由服务端生成"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<picker :range="sexOptions.map((item) => item.label)" :value="optionIndex(sexOptions, addForm.sex)" @change="selectOption('sex', sexOptions, $event)">
|
||||
<picker
|
||||
:range="sexOptions.map((item) => item.label)"
|
||||
:value="optionIndex(sexOptions, addForm.sex)"
|
||||
@change="selectOption('sex', sexOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>性别</text><text>{{ optionLabel(sexOptions, addForm.sex) || "请选择" }}</text>
|
||||
<text>性别</text
|
||||
><text>{{ optionLabel(sexOptions, addForm.sex) || "请选择" }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<picker :range="bindingModeOptions.map((item) => item.label)" :value="optionIndex(bindingModeOptions, addForm.bindingMode)" @change="selectBindingMode">
|
||||
<picker
|
||||
:range="bindingModeOptions.map((item) => item.label)"
|
||||
:value="optionIndex(bindingModeOptions, addForm.bindingMode)"
|
||||
@change="selectBindingMode"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>身份认领</text><text>{{ optionLabel(bindingModeOptions, addForm.bindingMode) }}</text>
|
||||
<text>身份认领</text
|
||||
><text>{{
|
||||
optionLabel(bindingModeOptions, addForm.bindingMode)
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>业务用户</text>
|
||||
<text class="form-field__hint">{{ appUserBindingHint }}</text>
|
||||
</view>
|
||||
<text v-if="fieldErrors.bindingMode" class="field-error">{{ fieldErrors.bindingMode }}</text>
|
||||
<text v-if="fieldErrors.bindingMode" class="field-error">{{
|
||||
fieldErrors.bindingMode
|
||||
}}</text>
|
||||
<view class="form-field form-field--upload">
|
||||
<text>头像</text>
|
||||
<view>
|
||||
<button class="upload-button" :disabled="isAvatarUploading || isSubmitting" @click="uploadAvatar">{{ isAvatarUploading ? "上传中…" : "选择图片" }}</button>
|
||||
<text v-if="avatarFileName" class="upload-receipt">已上传：{{ avatarFileName }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="isAvatarUploading || isSubmitting"
|
||||
@click="uploadAvatar"
|
||||
>
|
||||
{{ isAvatarUploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="avatarFileName" class="upload-receipt"
|
||||
>已上传：{{ avatarFileName }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="avatarUploadError" class="field-error">{{ avatarUploadError }}</text>
|
||||
<text v-if="avatarUploadError" class="field-error">{{
|
||||
avatarUploadError
|
||||
}}</text>
|
||||
|
||||
<picker
|
||||
v-if="!isFirstMember"
|
||||
@@ -76,73 +121,162 @@
|
||||
<text>{{ addForm.relation || "请选择亲属关系" }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<text v-if="fieldErrors.relation" class="field-error">{{ fieldErrors.relation }}</text>
|
||||
<text v-if="fieldErrors.relation" class="field-error">{{
|
||||
fieldErrors.relation
|
||||
}}</text>
|
||||
|
||||
<view class="form-field">
|
||||
<text>别名</text>
|
||||
<input v-model="addForm.aliasName" maxlength="40" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.aliasName"
|
||||
maxlength="40"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>字辈</text>
|
||||
<input v-model="addForm.generationName" maxlength="12" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.generationName"
|
||||
maxlength="12"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>世代</text>
|
||||
<input v-if="!isFirstMember" v-model="addForm.generation" type="number" placeholder="可选正整数" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-if="!isFirstMember"
|
||||
v-model="addForm.generation"
|
||||
type="number"
|
||||
placeholder="可选正整数"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
<text v-else>首位成员固定为 1</text>
|
||||
</view>
|
||||
<picker :range="personOptionLabels" :value="personOptionIndex(addForm.fatherId)" @change="selectPerson('fatherId', $event)">
|
||||
<view class="form-field form-field--picker"><text>父亲</text><text>{{ personOptionLabel(addForm.fatherId) }}</text></view>
|
||||
<picker
|
||||
:range="personOptionLabels"
|
||||
:value="personOptionIndex(addForm.fatherId)"
|
||||
@change="selectPerson('fatherId', $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker"
|
||||
><text>父亲</text
|
||||
><text>{{ personOptionLabel(addForm.fatherId) }}</text></view
|
||||
>
|
||||
</picker>
|
||||
<picker :range="personOptionLabels" :value="personOptionIndex(addForm.motherId)" @change="selectPerson('motherId', $event)">
|
||||
<view class="form-field form-field--picker"><text>母亲</text><text>{{ personOptionLabel(addForm.motherId) }}</text></view>
|
||||
<picker
|
||||
:range="personOptionLabels"
|
||||
:value="personOptionIndex(addForm.motherId)"
|
||||
@change="selectPerson('motherId', $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker"
|
||||
><text>母亲</text
|
||||
><text>{{ personOptionLabel(addForm.motherId) }}</text></view
|
||||
>
|
||||
</picker>
|
||||
|
||||
<picker mode="date" :value="addForm.birthDate" @change="selectBirthDate">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="addForm.birthDate"
|
||||
@change="selectBirthDate"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>出生日期</text><text>{{ addForm.birthDate || "请选择" }}</text>
|
||||
<text>出生日期</text
|
||||
><text>{{ addForm.birthDate || "请选择" }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<picker :range="lunarOptions.map((item) => item.label)" :value="optionIndex(lunarOptions, addForm.birthLunar)" @change="selectOption('birthLunar', lunarOptions, $event)">
|
||||
<picker
|
||||
:range="lunarOptions.map((item) => item.label)"
|
||||
:value="optionIndex(lunarOptions, addForm.birthLunar)"
|
||||
@change="selectOption('birthLunar', lunarOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>出生农历</text><text>{{ optionLabel(lunarOptions, addForm.birthLunar) || "请选择" }}</text>
|
||||
<text>出生农历</text
|
||||
><text>{{
|
||||
optionLabel(lunarOptions, addForm.birthLunar) || "请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>出生地</text>
|
||||
<input v-model="addForm.birthPlace" maxlength="60" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.birthPlace"
|
||||
maxlength="60"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<picker mode="date" :value="addForm.deathDate" @change="selectDeathDate">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="addForm.deathDate"
|
||||
@change="selectDeathDate"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>逝世日期</text><text>{{ addForm.deathDate || "请选择" }}</text>
|
||||
<text>逝世日期</text
|
||||
><text>{{ addForm.deathDate || "请选择" }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<picker :range="lunarOptions.map((item) => item.label)" :value="optionIndex(lunarOptions, addForm.deathLunar)" @change="selectOption('deathLunar', lunarOptions, $event)">
|
||||
<picker
|
||||
:range="lunarOptions.map((item) => item.label)"
|
||||
:value="optionIndex(lunarOptions, addForm.deathLunar)"
|
||||
@change="selectOption('deathLunar', lunarOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>逝世农历</text><text>{{ optionLabel(lunarOptions, addForm.deathLunar) || "请选择" }}</text>
|
||||
<text>逝世农历</text
|
||||
><text>{{
|
||||
optionLabel(lunarOptions, addForm.deathLunar) || "请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>逝世地</text>
|
||||
<input v-model="addForm.deathPlace" maxlength="60" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.deathPlace"
|
||||
maxlength="60"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>安葬地</text>
|
||||
<input v-model="addForm.burialPlace" maxlength="60" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.burialPlace"
|
||||
maxlength="60"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<picker :range="personStatusOptions.map((item) => item.label)" :value="optionIndex(personStatusOptions, addForm.personStatus)" @change="selectOption('personStatus', personStatusOptions, $event)">
|
||||
<picker
|
||||
:range="personStatusOptions.map((item) => item.label)"
|
||||
:value="optionIndex(personStatusOptions, addForm.personStatus)"
|
||||
@change="selectOption('personStatus', personStatusOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>人物状态</text><text>{{ optionLabel(personStatusOptions, addForm.personStatus) || "请选择" }}</text>
|
||||
<text>人物状态</text
|
||||
><text>{{
|
||||
optionLabel(personStatusOptions, addForm.personStatus) || "请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>排序值</text>
|
||||
<input v-model="addForm.sortOrder" type="number" placeholder="可选整数，值越小越靠前" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="addForm.sortOrder"
|
||||
type="number"
|
||||
placeholder="可选整数，值越小越靠前"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>关系名称</text>
|
||||
<input v-if="isFirstMember" v-model="addForm.relationName" maxlength="30" placeholder="可选关系显示名称" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-if="isFirstMember"
|
||||
v-model="addForm.relationName"
|
||||
maxlength="30"
|
||||
placeholder="可选关系显示名称"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
<text v-else>{{ relationLabel }}</text>
|
||||
</view>
|
||||
|
||||
@@ -169,7 +303,10 @@
|
||||
|
||||
<text class="form-note">{{ formNote }}</text>
|
||||
<view class="form-action" @click="submitAdd">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ isSubmitting ? "正在保存…" : "保存成员" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -179,7 +316,10 @@
|
||||
<text class="form-title">{{ resultCopy.title }}</text>
|
||||
<text class="form-copy">{{ resultCopy.copy }}</text>
|
||||
<view class="form-action" @click="handleResultAction">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ resultCopy.action }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -207,14 +347,17 @@ import AppLoading from "@/components/AppLoading.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import {
|
||||
handleBackPress,
|
||||
returnTo,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const addState = ref("loading");
|
||||
const genealogyId = ref("");
|
||||
@@ -240,7 +383,14 @@ const relationIntents = Object.freeze({
|
||||
SON: { label: "儿子" },
|
||||
DAUGHTER: { label: "女儿" },
|
||||
});
|
||||
const genericRelationTypes = Object.freeze(["FATHER", "MOTHER", "SPOUSE", "SIBLING", "SON", "DAUGHTER"]);
|
||||
const genericRelationTypes = Object.freeze([
|
||||
"FATHER",
|
||||
"MOTHER",
|
||||
"SPOUSE",
|
||||
"SIBLING",
|
||||
"SON",
|
||||
"DAUGHTER",
|
||||
]);
|
||||
const sexOptions = Object.freeze([
|
||||
{ label: "男", value: "0" },
|
||||
{ label: "女", value: "1" },
|
||||
@@ -261,7 +411,9 @@ const bindingModeOptions = Object.freeze([
|
||||
{ label: "绑定指定用户", value: "SPECIFIED" },
|
||||
]);
|
||||
const personOptions = ref([{ label: "不选择", value: "" }]);
|
||||
const personOptionLabels = computed(() => personOptions.value.map((item) => item.label));
|
||||
const personOptionLabels = computed(() =>
|
||||
personOptions.value.map((item) => item.label),
|
||||
);
|
||||
const addForm = reactive({
|
||||
bindingMode: "NONE",
|
||||
personNo: "",
|
||||
@@ -290,15 +442,22 @@ const addForm = reactive({
|
||||
const fieldErrors = reactive({ name: "", relation: "", bindingMode: "" });
|
||||
|
||||
const isFirstMember = computed(() => mode.value === "first");
|
||||
const activeRelationIntent = computed(() => relationIntents[relationType.value] || null);
|
||||
const activeRelationIntent = computed(
|
||||
() => relationIntents[relationType.value] || null,
|
||||
);
|
||||
const relationOptions = computed(() => {
|
||||
const types = activeRelationIntent.value ? [relationType.value] : genericRelationTypes;
|
||||
const types = activeRelationIntent.value
|
||||
? [relationType.value]
|
||||
: genericRelationTypes;
|
||||
return types.map((type) => relationIntents[type].label);
|
||||
});
|
||||
const relationLabel = computed(() => activeRelationIntent.value?.label || addForm.relation || "亲属关系");
|
||||
const relationLabel = computed(
|
||||
() => activeRelationIntent.value?.label || addForm.relation || "亲属关系",
|
||||
);
|
||||
const appUserBindingHint = computed(() => {
|
||||
if (addForm.bindingMode === "NONE") return "不绑定账号，不提交业务用户 ID";
|
||||
if (addForm.bindingMode === "SELF") return "由服务端从 Token 绑定当前登录账号，不提交业务用户 ID";
|
||||
if (addForm.bindingMode === "SELF")
|
||||
return "由服务端从 Token 绑定当前登录账号，不提交业务用户 ID";
|
||||
return "需先选择指定业务用户；当前没有可用候选接口";
|
||||
});
|
||||
const hasValidContext = computed(
|
||||
@@ -306,18 +465,20 @@ const hasValidContext = computed(
|
||||
Boolean(genealogyId.value) &&
|
||||
(isFirstMember.value ? !personId.value : Boolean(currentMember.value)),
|
||||
);
|
||||
const relationIndex = computed(() => Math.max(0, relationOptions.value.indexOf(addForm.relation)));
|
||||
const relationIndex = computed(() =>
|
||||
Math.max(0, relationOptions.value.indexOf(addForm.relation)),
|
||||
);
|
||||
const formTitle = computed(() =>
|
||||
isFirstMember.value ? "录入家谱中的第一位成员" : `为${currentMember.value?.name || "当前成员"}添加${relationLabel.value}`,
|
||||
isFirstMember.value
|
||||
? "录入家谱中的第一位成员"
|
||||
: `为${currentMember.value?.name || "当前成员"}添加${relationLabel.value}`,
|
||||
);
|
||||
const formCopy = computed(() =>
|
||||
isFirstMember.value
|
||||
? "首位成员将成为世系起点，后续可从此人继续补充配偶、子女和后代。"
|
||||
: "先确认新成员与当前成员的关系，再填写可核实的身份信息。",
|
||||
);
|
||||
const formNote = computed(() =>
|
||||
"红色 * 为必填项，其余内容可按家谱记载补充。",
|
||||
);
|
||||
const formNote = computed(() => "红色 * 为必填项，其余内容可按家谱记载补充。");
|
||||
const resultCopy = computed(() => {
|
||||
if (hasValidContext.value) {
|
||||
return {
|
||||
@@ -335,7 +496,9 @@ const resultCopy = computed(() => {
|
||||
};
|
||||
});
|
||||
const hasDraft = computed(() =>
|
||||
Object.entries(addForm).some(([field, value]) => field !== "bindingMode" && String(value).trim()),
|
||||
Object.entries(addForm).some(
|
||||
([field, value]) => field !== "bindingMode" && String(value).trim(),
|
||||
),
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardDialogVisible.value = visible;
|
||||
@@ -363,18 +526,23 @@ const loadCurrentMember = async () => {
|
||||
};
|
||||
const loadPersonOptions = async () => {
|
||||
try {
|
||||
const rows = await appApi.getLineagePersonOptions(genealogyId.value, { requestController: personOptionsRequestController });
|
||||
const rows = await appApi.getLineagePersonOptions(genealogyId.value, {
|
||||
requestController: personOptionsRequestController,
|
||||
});
|
||||
const options = rows
|
||||
.map((item) => {
|
||||
const value = String(item?.personId ?? item?.id ?? "");
|
||||
if (!/^[1-9]\d*$/.test(value)) return null;
|
||||
const name = String(item?.name || item?.personName || item?.personNo || "未命名人物");
|
||||
const name = String(
|
||||
item?.name || item?.personName || item?.personNo || "未命名人物",
|
||||
);
|
||||
return { value, label: `${name}（${value}）` };
|
||||
})
|
||||
.filter(Boolean);
|
||||
personOptions.value = [{ label: "不选择", value: "" }, ...options];
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) personOptions.value = [{ label: "暂无可选人物", value: "" }];
|
||||
if (!isRequestCancelled(error))
|
||||
personOptions.value = [{ label: "暂无可选人物", value: "" }];
|
||||
}
|
||||
};
|
||||
onLoad((query) => {
|
||||
@@ -382,7 +550,11 @@ onLoad((query) => {
|
||||
personId.value = String(query.personId || "");
|
||||
mode.value = query.mode === "first" ? "first" : "relative";
|
||||
relationType.value = String(query.relationType || "");
|
||||
if (!genealogyId.value || query.state === "error" || (!isFirstMember.value && !personId.value)) {
|
||||
if (
|
||||
!genealogyId.value ||
|
||||
query.state === "error" ||
|
||||
(!isFirstMember.value && !personId.value)
|
||||
) {
|
||||
addState.value = "error";
|
||||
errorMessage.value = "当前家谱或成员上下文无效，请从世系树重新进入。";
|
||||
return;
|
||||
@@ -421,22 +593,35 @@ const requestBack = () =>
|
||||
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
|
||||
const clearError = (field) => { fieldErrors[field] = ""; };
|
||||
const clearError = (field) => {
|
||||
fieldErrors[field] = "";
|
||||
};
|
||||
const selectRelation = (event) => {
|
||||
addForm.relation = relationOptions.value[Number(event.detail.value)] || "";
|
||||
clearError("relation");
|
||||
};
|
||||
const optionIndex = (options, value) => Math.max(0, options.findIndex((item) => item.value === value));
|
||||
const optionLabel = (options, value) => options.find((item) => item.value === value)?.label || "";
|
||||
const optionIndex = (options, value) =>
|
||||
Math.max(
|
||||
0,
|
||||
options.findIndex((item) => item.value === value),
|
||||
);
|
||||
const optionLabel = (options, value) =>
|
||||
options.find((item) => item.value === value)?.label || "";
|
||||
const selectOption = (field, options, event) => {
|
||||
addForm[field] = options[Number(event.detail.value)]?.value || "";
|
||||
};
|
||||
const selectBindingMode = (event) => {
|
||||
addForm.bindingMode = bindingModeOptions[Number(event.detail.value)]?.value || "NONE";
|
||||
addForm.bindingMode =
|
||||
bindingModeOptions[Number(event.detail.value)]?.value || "NONE";
|
||||
fieldErrors.bindingMode = "";
|
||||
};
|
||||
const personOptionIndex = (value) => Math.max(0, personOptions.value.findIndex((item) => item.value === value));
|
||||
const personOptionLabel = (value) => personOptions.value.find((item) => item.value === value)?.label || "不选择";
|
||||
const personOptionIndex = (value) =>
|
||||
Math.max(
|
||||
0,
|
||||
personOptions.value.findIndex((item) => item.value === value),
|
||||
);
|
||||
const personOptionLabel = (value) =>
|
||||
personOptions.value.find((item) => item.value === value)?.label || "不选择";
|
||||
const selectPerson = (field, event) => {
|
||||
addForm[field] = personOptions.value[Number(event.detail.value)]?.value || "";
|
||||
};
|
||||
@@ -445,27 +630,37 @@ const uploadAvatar = async () => {
|
||||
isAvatarUploading.value = true;
|
||||
avatarUploadError.value = "";
|
||||
try {
|
||||
const receipt = await pickAndUploadImage({ requestController: addRequestController });
|
||||
const receipt = await pickAndUploadImage({
|
||||
requestController: addRequestController,
|
||||
});
|
||||
addForm.avatarOssId = receipt.ossId;
|
||||
avatarFileName.value = receipt.fileName || "头像图片";
|
||||
} catch (error) {
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error)) avatarUploadError.value = error?.message || "头像上传失败，请稍后重试";
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error))
|
||||
avatarUploadError.value = error?.message || "头像上传失败，请稍后重试";
|
||||
} finally {
|
||||
isAvatarUploading.value = false;
|
||||
}
|
||||
};
|
||||
const selectBirthDate = (event) => { addForm.birthDate = event.detail.value || ""; };
|
||||
const selectDeathDate = (event) => { addForm.deathDate = event.detail.value || ""; };
|
||||
const selectBirthDate = (event) => {
|
||||
addForm.birthDate = event.detail.value || "";
|
||||
};
|
||||
const selectDeathDate = (event) => {
|
||||
addForm.deathDate = event.detail.value || "";
|
||||
};
|
||||
const validateAddForm = () => {
|
||||
fieldErrors.name = addForm.name.trim() ? "" : "请填写成员姓名";
|
||||
fieldErrors.relation = isFirstMember.value || addForm.relation ? "" : "请选择与当前成员的关系";
|
||||
fieldErrors.bindingMode = addForm.bindingMode === "SPECIFIED"
|
||||
? "当前未提供可选业务用户，不能指定认领"
|
||||
: "";
|
||||
fieldErrors.relation =
|
||||
isFirstMember.value || addForm.relation ? "" : "请选择与当前成员的关系";
|
||||
fieldErrors.bindingMode =
|
||||
addForm.bindingMode === "SPECIFIED"
|
||||
? "当前未提供可选业务用户，不能指定认领"
|
||||
: "";
|
||||
return !fieldErrors.name && !fieldErrors.relation && !fieldErrors.bindingMode;
|
||||
};
|
||||
const submitAdd = async () => {
|
||||
if (isSubmitting.value || isAvatarUploading.value || !validateAddForm()) return;
|
||||
if (isSubmitting.value || isAvatarUploading.value || !validateAddForm())
|
||||
return;
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
@@ -492,17 +687,27 @@ const submitAdd = async () => {
|
||||
...(isFirstMember.value
|
||||
? { generation: 1, relationName: addForm.relationName }
|
||||
: {
|
||||
...(addForm.generation ? { generation: Number(addForm.generation) } : {}),
|
||||
relationName: relationLabel.value,
|
||||
}),
|
||||
...(addForm.generation
|
||||
? { generation: Number(addForm.generation) }
|
||||
: {}),
|
||||
relationName: relationLabel.value,
|
||||
}),
|
||||
};
|
||||
if (isFirstMember.value) {
|
||||
await appApi.createPerson(genealogyId.value, payload, { requestController: addRequestController });
|
||||
await appApi.createPerson(genealogyId.value, payload, {
|
||||
requestController: addRequestController,
|
||||
});
|
||||
} else {
|
||||
const type = activeRelationIntent.value
|
||||
? relationType.value
|
||||
: genericRelationTypes[relationOptions.value.indexOf(addForm.relation)];
|
||||
await appApi.createRelatedPerson(genealogyId.value, personId.value, type, payload, { requestController: addRequestController });
|
||||
await appApi.createRelatedPerson(
|
||||
genealogyId.value,
|
||||
personId.value,
|
||||
type,
|
||||
payload,
|
||||
{ requestController: addRequestController },
|
||||
);
|
||||
}
|
||||
Object.assign(addForm, {
|
||||
bindingMode: "NONE",
|
||||
@@ -539,11 +744,10 @@ const submitAdd = async () => {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
const handleResultAction = () => hasValidContext.value ? (addState.value = "form") : returnToTree();
|
||||
const handleResultAction = () =>
|
||||
hasValidContext.value ? (addState.value = "form") : returnToTree();
|
||||
const returnToTree = async () => {
|
||||
const confirmed = hasDraft.value
|
||||
? await requestDiscardConfirmation()
|
||||
: true;
|
||||
const confirmed = hasDraft.value ? await requestDiscardConfirmation() : true;
|
||||
if (!confirmed) return false;
|
||||
return returnTo("T01", { genealogyId: genealogyId.value });
|
||||
};
|
||||
@@ -552,29 +756,162 @@ const returnToTree = async () => {
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.add-relative-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.add-relative-page__header { z-index: 3; }
|
||||
.add-relative-panel { @include adaptive.adaptive-tree-panel; z-index: 2; width: calc(100% - 32rpx); margin: 18rpx auto 28rpx; padding: 7.5% 8%; }
|
||||
.form-eyebrow { display: block; color: $brand-red; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.form-title { display: block; margin-top: 10rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 34rpx; font-weight: 700; line-height: 1.35; }
|
||||
.form-copy, .form-note { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.5; }
|
||||
.member-context, .form-field { @include adaptive.adaptive-tree-field; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 78rpx; align-items: center; gap: 20rpx; margin-top: 14rpx; padding: 12rpx 22rpx; }
|
||||
.member-context text:first-child, .form-field > text:first-child { color: $ink; font-size: 24rpx; font-weight: 700; }
|
||||
.member-context text:last-child, .form-field > text:last-child, .form-field input, .form-field textarea { min-width: 0; color: $ink; font-size: 24rpx; line-height: 1.45; text-align: right; }
|
||||
.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 22rpx; line-height: 1; transform: translateY(-2rpx); }
|
||||
.form-field textarea { width: auto; min-height: 54rpx; text-align: left; }
|
||||
.form-field__hint, .upload-receipt { color: $ink-muted; font-size: 21rpx; line-height: 1.4; text-align: right; }
|
||||
.form-field--upload > view { display: grid; justify-items: end; gap: 6rpx; }
|
||||
.upload-button { min-height: 54rpx; margin: 0; padding: 0 16rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.form-field--summary { align-items: start; }
|
||||
.form-placeholder { color: #a79884; }
|
||||
.field-error { display: block; margin: 5rpx 18rpx 0; color: $brand-red; font-size: 22rpx; line-height: 32rpx; }
|
||||
.form-note { text-align: center; }
|
||||
.form-action { display: grid; width: 100%; min-height: 76rpx; margin-top: 18rpx; }
|
||||
.form-action image, .form-action text { grid-area: 1 / 1; width: 100%; height: 100%; }
|
||||
.form-action text { z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
.add-result { margin-top: 30%; text-align: center; }
|
||||
.add-result .form-eyebrow, .add-result .form-copy { text-align: center; }
|
||||
.add-result .form-action { width: 420rpx; max-width: 100%; margin-right: auto; margin-left: auto; }
|
||||
@media (min-width: 400px) { .add-relative-panel { width: calc(100% - 48rpx); } }
|
||||
.add-relative-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.add-relative-page__header {
|
||||
z-index: 3;
|
||||
}
|
||||
.add-relative-panel {
|
||||
@include adaptive.adaptive-tree-panel;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 28rpx;
|
||||
padding: 7.5% 8%;
|
||||
}
|
||||
.form-eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.form-title {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.form-copy,
|
||||
.form-note {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.member-context,
|
||||
.form-field {
|
||||
@include adaptive.adaptive-tree-field;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
min-height: 78rpx;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 12rpx 22rpx;
|
||||
}
|
||||
.member-context text:first-child,
|
||||
.form-field > text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-context text:last-child,
|
||||
.form-field > text:last-child,
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
min-width: 0;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.45;
|
||||
text-align: right;
|
||||
}
|
||||
.required-mark {
|
||||
display: inline-block;
|
||||
margin-right: 4rpx;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
.form-field textarea {
|
||||
width: auto;
|
||||
min-height: 54rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.form-field__hint,
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.4;
|
||||
text-align: right;
|
||||
}
|
||||
.form-field--upload > view {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 6rpx;
|
||||
}
|
||||
.upload-button {
|
||||
min-height: 54rpx;
|
||||
margin: 0;
|
||||
padding: 0 16rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.form-field--summary {
|
||||
align-items: start;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
.form-placeholder {
|
||||
color: #a79884;
|
||||
}
|
||||
.field-error {
|
||||
display: block;
|
||||
margin: 5rpx 18rpx 0;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.form-note {
|
||||
text-align: center;
|
||||
}
|
||||
.form-action {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.form-action image,
|
||||
.form-action text {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.form-action text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.add-result {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.add-result .form-eyebrow,
|
||||
.add-result .form-copy {
|
||||
text-align: center;
|
||||
}
|
||||
.add-result .form-action {
|
||||
width: 420rpx;
|
||||
max-width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.add-relative-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+485
-133
@@ -9,124 +9,279 @@
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="edit-member-page__header"><PageHeader title="编辑成员" custom-back @back="requestBack" /></view>
|
||||
<view class="edit-member-page__header"
|
||||
><PageHeader title="编辑成员" custom-back @back="requestBack"
|
||||
/></view>
|
||||
<view class="edit-member-panel">
|
||||
<AppLoading v-if="editState === 'loading'" text="正在读取成员资料" description="请稍候，正在确认可编辑字段。" />
|
||||
<AppLoading
|
||||
v-if="editState === 'loading'"
|
||||
text="正在读取成员资料"
|
||||
description="请稍候，正在确认可编辑字段。"
|
||||
/>
|
||||
|
||||
<view v-else-if="editState === 'form'" class="edit-member-form">
|
||||
<text class="form-eyebrow">成员档案维护</text>
|
||||
<text class="form-title">完善{{ originalMember.name }}的生命记录</text>
|
||||
<text class="form-copy">基础身份用于世系展示，生平说明会显示在有权限查看的成员档案中。</text>
|
||||
<text class="form-copy"
|
||||
>基础身份用于世系展示，生平说明会显示在有权限查看的成员档案中。</text
|
||||
>
|
||||
|
||||
<view class="member-context">
|
||||
<text>成员身份</text><text>第 {{ originalMember.generation }} 世 · {{ originalMember.branch }}</text>
|
||||
<text>成员身份</text
|
||||
><text
|
||||
>第 {{ originalMember.generation }} 世 ·
|
||||
{{ originalMember.branch }}</text
|
||||
>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>姓名</text>
|
||||
<input v-model="editForm.name" maxlength="20" placeholder="请输入姓名" placeholder-class="form-placeholder" @input="clearError('name')" />
|
||||
<input
|
||||
v-model="editForm.name"
|
||||
maxlength="20"
|
||||
placeholder="请输入姓名"
|
||||
placeholder-class="form-placeholder"
|
||||
@input="clearError('name')"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</text>
|
||||
<text v-if="fieldErrors.name" class="field-error">{{
|
||||
fieldErrors.name
|
||||
}}</text>
|
||||
|
||||
<view class="form-field">
|
||||
<text>人物编号</text>
|
||||
<input v-model="editForm.personNo" maxlength="40" placeholder="不填则由服务端生成" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.personNo"
|
||||
maxlength="40"
|
||||
placeholder="不填则由服务端生成"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<picker :range="sexOptions.map((item) => item.label)" :value="optionIndex(sexOptions, editForm.sex)" @change="selectOption('sex', sexOptions, $event)">
|
||||
<picker
|
||||
:range="sexOptions.map((item) => item.label)"
|
||||
:value="optionIndex(sexOptions, editForm.sex)"
|
||||
@change="selectOption('sex', sexOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>性别</text><text>{{ optionLabel(sexOptions, editForm.sex) || "请选择" }}</text>
|
||||
<text>性别</text
|
||||
><text>{{
|
||||
optionLabel(sexOptions, editForm.sex) || "请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<picker :range="bindingModeOptions.map((item) => item.label)" :value="optionIndex(bindingModeOptions, editForm.bindingMode)" @change="selectBindingMode">
|
||||
<picker
|
||||
:range="bindingModeOptions.map((item) => item.label)"
|
||||
:value="optionIndex(bindingModeOptions, editForm.bindingMode)"
|
||||
@change="selectBindingMode"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>身份认领</text><text>{{ optionLabel(bindingModeOptions, editForm.bindingMode) }}</text>
|
||||
<text>身份认领</text
|
||||
><text>{{
|
||||
optionLabel(bindingModeOptions, editForm.bindingMode)
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>业务用户</text>
|
||||
<text class="form-field__hint">{{ appUserBindingHint }}</text>
|
||||
</view>
|
||||
<text v-if="fieldErrors.bindingMode" class="field-error">{{ fieldErrors.bindingMode }}</text>
|
||||
<text v-if="fieldErrors.bindingMode" class="field-error">{{
|
||||
fieldErrors.bindingMode
|
||||
}}</text>
|
||||
<view class="form-field form-field--upload">
|
||||
<text>头像</text>
|
||||
<view>
|
||||
<button class="upload-button" :disabled="isAvatarUploading || isSubmitting" @click="uploadAvatar">{{ isAvatarUploading ? "上传中…" : "选择图片" }}</button>
|
||||
<text v-if="avatarFileName" class="upload-receipt">已上传：{{ avatarFileName }}</text>
|
||||
<button
|
||||
class="upload-button"
|
||||
:disabled="isAvatarUploading || isSubmitting"
|
||||
@click="uploadAvatar"
|
||||
>
|
||||
{{ isAvatarUploading ? "上传中…" : "选择图片" }}
|
||||
</button>
|
||||
<text v-if="avatarFileName" class="upload-receipt"
|
||||
>已上传：{{ avatarFileName }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="avatarUploadError" class="field-error">{{ avatarUploadError }}</text>
|
||||
<text v-if="avatarUploadError" class="field-error">{{
|
||||
avatarUploadError
|
||||
}}</text>
|
||||
|
||||
<view class="form-field">
|
||||
<text>别名</text>
|
||||
<input v-model="editForm.aliasName" placeholder="别名或曾用名" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.aliasName"
|
||||
placeholder="别名或曾用名"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>字辈</text>
|
||||
<input v-model="editForm.generationName" maxlength="12" placeholder="例如：文字辈" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.generationName"
|
||||
maxlength="12"
|
||||
placeholder="例如：文字辈"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>世代</text>
|
||||
<input v-model="editForm.generation" type="number" placeholder="正整数" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.generation"
|
||||
type="number"
|
||||
placeholder="正整数"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<picker :range="personOptionLabels" :value="personOptionIndex(editForm.fatherId)" @change="selectPerson('fatherId', $event)">
|
||||
<view class="form-field form-field--picker"><text>父亲</text><text>{{ personOptionLabel(editForm.fatherId) }}</text></view>
|
||||
<picker
|
||||
:range="personOptionLabels"
|
||||
:value="personOptionIndex(editForm.fatherId)"
|
||||
@change="selectPerson('fatherId', $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker"
|
||||
><text>父亲</text
|
||||
><text>{{ personOptionLabel(editForm.fatherId) }}</text></view
|
||||
>
|
||||
</picker>
|
||||
<picker :range="personOptionLabels" :value="personOptionIndex(editForm.motherId)" @change="selectPerson('motherId', $event)">
|
||||
<view class="form-field form-field--picker"><text>母亲</text><text>{{ personOptionLabel(editForm.motherId) }}</text></view>
|
||||
<picker
|
||||
:range="personOptionLabels"
|
||||
:value="personOptionIndex(editForm.motherId)"
|
||||
@change="selectPerson('motherId', $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker"
|
||||
><text>母亲</text
|
||||
><text>{{ personOptionLabel(editForm.motherId) }}</text></view
|
||||
>
|
||||
</picker>
|
||||
<picker mode="date" :value="editForm.birthDate" @change="selectDate('birthDate', $event)">
|
||||
<view class="form-field form-field--picker"><text>出生日期</text><text>{{ editForm.birthDate || "未填写" }}</text></view>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="editForm.birthDate"
|
||||
@change="selectDate('birthDate', $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker"
|
||||
><text>出生日期</text
|
||||
><text>{{ editForm.birthDate || "未填写" }}</text></view
|
||||
>
|
||||
</picker>
|
||||
<picker :range="lunarOptions.map((item) => item.label)" :value="optionIndex(lunarOptions, editForm.birthLunar)" @change="selectOption('birthLunar', lunarOptions, $event)">
|
||||
<picker
|
||||
:range="lunarOptions.map((item) => item.label)"
|
||||
:value="optionIndex(lunarOptions, editForm.birthLunar)"
|
||||
@change="selectOption('birthLunar', lunarOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>出生农历</text><text>{{ optionLabel(lunarOptions, editForm.birthLunar) || "请选择" }}</text>
|
||||
<text>出生农历</text
|
||||
><text>{{
|
||||
optionLabel(lunarOptions, editForm.birthLunar) || "请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>出生地</text>
|
||||
<input v-model="editForm.birthPlace" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.birthPlace"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<picker mode="date" :value="editForm.deathDate" @change="selectDate('deathDate', $event)">
|
||||
<view class="form-field form-field--picker"><text>离世日期</text><text>{{ editForm.deathDate || "在世或未填写" }}</text></view>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="editForm.deathDate"
|
||||
@change="selectDate('deathDate', $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker"
|
||||
><text>离世日期</text
|
||||
><text>{{ editForm.deathDate || "在世或未填写" }}</text></view
|
||||
>
|
||||
</picker>
|
||||
<picker :range="lunarOptions.map((item) => item.label)" :value="optionIndex(lunarOptions, editForm.deathLunar)" @change="selectOption('deathLunar', lunarOptions, $event)">
|
||||
<picker
|
||||
:range="lunarOptions.map((item) => item.label)"
|
||||
:value="optionIndex(lunarOptions, editForm.deathLunar)"
|
||||
@change="selectOption('deathLunar', lunarOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>逝世农历</text><text>{{ optionLabel(lunarOptions, editForm.deathLunar) || "请选择" }}</text>
|
||||
<text>逝世农历</text
|
||||
><text>{{
|
||||
optionLabel(lunarOptions, editForm.deathLunar) || "请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>逝世地</text>
|
||||
<input v-model="editForm.deathPlace" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.deathPlace"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>安葬地</text>
|
||||
<input v-model="editForm.burialPlace" placeholder="按家谱记载填写" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.burialPlace"
|
||||
placeholder="按家谱记载填写"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<picker :range="personStatusOptions.map((item) => item.label)" :value="optionIndex(personStatusOptions, editForm.personStatus)" @change="selectOption('personStatus', personStatusOptions, $event)">
|
||||
<picker
|
||||
:range="personStatusOptions.map((item) => item.label)"
|
||||
:value="optionIndex(personStatusOptions, editForm.personStatus)"
|
||||
@change="selectOption('personStatus', personStatusOptions, $event)"
|
||||
>
|
||||
<view class="form-field form-field--picker">
|
||||
<text>人物状态</text><text>{{ optionLabel(personStatusOptions, editForm.personStatus) || "请选择" }}</text>
|
||||
<text>人物状态</text
|
||||
><text>{{
|
||||
optionLabel(personStatusOptions, editForm.personStatus) ||
|
||||
"请选择"
|
||||
}}</text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="form-field">
|
||||
<text>排序值</text>
|
||||
<input v-model="editForm.sortOrder" type="number" placeholder="可选整数，值越小越靠前" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.sortOrder"
|
||||
type="number"
|
||||
placeholder="可选整数，值越小越靠前"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field">
|
||||
<text>关系名称</text>
|
||||
<input v-model="editForm.relationName" maxlength="30" placeholder="可选关系显示名称" placeholder-class="form-placeholder" />
|
||||
<input
|
||||
v-model="editForm.relationName"
|
||||
maxlength="30"
|
||||
placeholder="可选关系显示名称"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field form-field--summary">
|
||||
<text>人物简介</text>
|
||||
<textarea v-model="editForm.summary" auto-height maxlength="500" placeholder="记录生平、迁徙或重要经历" placeholder-class="form-placeholder" />
|
||||
<textarea
|
||||
v-model="editForm.summary"
|
||||
auto-height
|
||||
maxlength="500"
|
||||
placeholder="记录生平、迁徙或重要经历"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-field form-field--summary">
|
||||
<text>备注</text>
|
||||
<textarea v-model="editForm.remark" auto-height placeholder="记录其他需要保留的信息" placeholder-class="form-placeholder" />
|
||||
<textarea
|
||||
v-model="editForm.remark"
|
||||
auto-height
|
||||
placeholder="记录其他需要保留的信息"
|
||||
placeholder-class="form-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="fieldErrors.dates" class="field-error">{{ fieldErrors.dates }}</text>
|
||||
<text v-if="fieldErrors.dates" class="field-error">{{
|
||||
fieldErrors.dates
|
||||
}}</text>
|
||||
|
||||
<text class="form-note">隐私字段只向本人和具备维护权限的家谱管理员展示。</text>
|
||||
<text class="form-note"
|
||||
>隐私字段只向本人和具备维护权限的家谱管理员展示。</text
|
||||
>
|
||||
<view class="form-action" @click="saveMember">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ isSubmitting ? "正在保存…" : "保存资料" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -136,7 +291,10 @@
|
||||
<text class="form-title">{{ resultCopy.title }}</text>
|
||||
<text class="form-copy">{{ resultCopy.copy }}</text>
|
||||
<view class="form-action" @click="handleResultAction">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ resultCopy.action }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -164,14 +322,17 @@ import AppLoading from "@/components/AppLoading.vue";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
runBackGuard,
|
||||
} from "@/utils/navigation.js";
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import {
|
||||
isImagePickCancelled,
|
||||
pickAndUploadImage,
|
||||
} from "@/utils/resumable-image-upload.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const editState = ref("loading");
|
||||
const genealogyId = ref("");
|
||||
@@ -235,11 +396,17 @@ const bindingModeOptions = Object.freeze([
|
||||
{ label: "绑定指定用户", value: "SPECIFIED" },
|
||||
]);
|
||||
const personOptions = ref([{ label: "不选择", value: "" }]);
|
||||
const personOptionLabels = computed(() => personOptions.value.map((item) => item.label));
|
||||
const personOptionLabels = computed(() =>
|
||||
personOptions.value.map((item) => item.label),
|
||||
);
|
||||
const appUserBindingHint = computed(() => {
|
||||
if (editForm.bindingMode === "NONE") return "不绑定账号，保存时不提交业务用户 ID";
|
||||
if (editForm.bindingMode === "SELF") return "由服务端从 Token 绑定当前登录账号，保存时不提交业务用户 ID";
|
||||
return editForm.appUserId ? "保留当前已认领的指定业务用户" : "需先选择指定业务用户；当前没有可用候选接口";
|
||||
if (editForm.bindingMode === "NONE")
|
||||
return "不绑定账号，保存时不提交业务用户 ID";
|
||||
if (editForm.bindingMode === "SELF")
|
||||
return "由服务端从 Token 绑定当前登录账号，保存时不提交业务用户 ID";
|
||||
return editForm.appUserId
|
||||
? "保留当前已认领的指定业务用户"
|
||||
: "需先选择指定业务用户；当前没有可用候选接口";
|
||||
});
|
||||
|
||||
const formSnapshot = computed(() => JSON.stringify(editForm));
|
||||
@@ -252,13 +419,33 @@ const isDirty = computed(
|
||||
Boolean(baseline.value) &&
|
||||
formSnapshot.value !== baseline.value,
|
||||
);
|
||||
const resultCopy = computed(() => ({
|
||||
error: failedAction.value === "save"
|
||||
? { eyebrow: "保存失败", title: "成员档案尚未保存", copy: errorMessage.value || "服务未确认本次修改，请检查填写后重试。", action: "返回修改" }
|
||||
: hasValidContext.value
|
||||
? { eyebrow: "资料读取失败", title: "暂时无法读取成员档案", copy: errorMessage.value || "请返回后重试。", action: "重新读取" }
|
||||
: { eyebrow: "成员入口无效", title: "没有找到要编辑的成员", copy: errorMessage.value || "请从成员档案重新进入。", action: "返回上一页" },
|
||||
}[editState.value] || {}));
|
||||
const resultCopy = computed(
|
||||
() =>
|
||||
({
|
||||
error:
|
||||
failedAction.value === "save"
|
||||
? {
|
||||
eyebrow: "保存失败",
|
||||
title: "成员档案尚未保存",
|
||||
copy:
|
||||
errorMessage.value || "服务未确认本次修改，请检查填写后重试。",
|
||||
action: "返回修改",
|
||||
}
|
||||
: hasValidContext.value
|
||||
? {
|
||||
eyebrow: "资料读取失败",
|
||||
title: "暂时无法读取成员档案",
|
||||
copy: errorMessage.value || "请返回后重试。",
|
||||
action: "重新读取",
|
||||
}
|
||||
: {
|
||||
eyebrow: "成员入口无效",
|
||||
title: "没有找到要编辑的成员",
|
||||
copy: errorMessage.value || "请从成员档案重新进入。",
|
||||
action: "返回上一页",
|
||||
},
|
||||
})[editState.value] || {},
|
||||
);
|
||||
const discardConfirmation = createDiscardConfirmation((visible) => {
|
||||
discardDialogVisible.value = visible;
|
||||
});
|
||||
@@ -278,15 +465,18 @@ const loadMember = async () => {
|
||||
originalMember.value = member;
|
||||
Object.assign(editForm, {
|
||||
appUserId: member.appUserId || "",
|
||||
bindingMode: member.bindingMode || (member.appUserId ? "SPECIFIED" : "NONE"),
|
||||
bindingMode:
|
||||
member.bindingMode || (member.appUserId ? "SPECIFIED" : "NONE"),
|
||||
personNo: member.personNo || "",
|
||||
name: member.name,
|
||||
aliasName: member.aliasName || "",
|
||||
sex: member.sex || "",
|
||||
generation: member.generation || "",
|
||||
generationName: member.generationName || "",
|
||||
fatherId: member.relatives.find((item) => item.relation === "父亲")?.id || "",
|
||||
motherId: member.relatives.find((item) => item.relation === "母亲")?.id || "",
|
||||
fatherId:
|
||||
member.relatives.find((item) => item.relation === "父亲")?.id || "",
|
||||
motherId:
|
||||
member.relatives.find((item) => item.relation === "母亲")?.id || "",
|
||||
avatarOssId: member.avatarOssId || "",
|
||||
birthDate: datePart(member.birthDate),
|
||||
birthLunar: member.birthLunar || "",
|
||||
@@ -315,18 +505,23 @@ const loadMember = async () => {
|
||||
};
|
||||
const loadPersonOptions = async () => {
|
||||
try {
|
||||
const rows = await appApi.getLineagePersonOptions(genealogyId.value, { requestController: personOptionsRequestController });
|
||||
const rows = await appApi.getLineagePersonOptions(genealogyId.value, {
|
||||
requestController: personOptionsRequestController,
|
||||
});
|
||||
const options = rows
|
||||
.map((item) => {
|
||||
const value = String(item?.personId ?? item?.id ?? "");
|
||||
if (!/^[1-9]\d*$/.test(value) || value === personId.value) return null;
|
||||
const name = String(item?.name || item?.personName || item?.personNo || "未命名人物");
|
||||
const name = String(
|
||||
item?.name || item?.personName || item?.personNo || "未命名人物",
|
||||
);
|
||||
return { value, label: `${name}（${value}）` };
|
||||
})
|
||||
.filter(Boolean);
|
||||
personOptions.value = [{ label: "不选择", value: "" }, ...options];
|
||||
} catch (error) {
|
||||
if (!isRequestCancelled(error)) personOptions.value = [{ label: "暂无可选人物", value: "" }];
|
||||
if (!isRequestCancelled(error))
|
||||
personOptions.value = [{ label: "暂无可选人物", value: "" }];
|
||||
}
|
||||
};
|
||||
|
||||
@@ -360,31 +555,48 @@ const requestBack = () =>
|
||||
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
|
||||
const clearError = (field) => { fieldErrors[field] = ""; };
|
||||
const optionIndex = (options, value) => Math.max(0, options.findIndex((item) => item.value === value));
|
||||
const optionLabel = (options, value) => options.find((item) => item.value === value)?.label || "";
|
||||
const clearError = (field) => {
|
||||
fieldErrors[field] = "";
|
||||
};
|
||||
const optionIndex = (options, value) =>
|
||||
Math.max(
|
||||
0,
|
||||
options.findIndex((item) => item.value === value),
|
||||
);
|
||||
const optionLabel = (options, value) =>
|
||||
options.find((item) => item.value === value)?.label || "";
|
||||
const selectOption = (field, options, event) => {
|
||||
editForm[field] = options[Number(event.detail.value)]?.value || "";
|
||||
};
|
||||
const selectBindingMode = (event) => {
|
||||
editForm.bindingMode = bindingModeOptions[Number(event.detail.value)]?.value || "NONE";
|
||||
editForm.bindingMode =
|
||||
bindingModeOptions[Number(event.detail.value)]?.value || "NONE";
|
||||
fieldErrors.bindingMode = "";
|
||||
};
|
||||
const personOptionIndex = (value) => Math.max(0, personOptions.value.findIndex((item) => item.value === value));
|
||||
const personOptionLabel = (value) => personOptions.value.find((item) => item.value === value)?.label || "不选择";
|
||||
const personOptionIndex = (value) =>
|
||||
Math.max(
|
||||
0,
|
||||
personOptions.value.findIndex((item) => item.value === value),
|
||||
);
|
||||
const personOptionLabel = (value) =>
|
||||
personOptions.value.find((item) => item.value === value)?.label || "不选择";
|
||||
const selectPerson = (field, event) => {
|
||||
editForm[field] = personOptions.value[Number(event.detail.value)]?.value || "";
|
||||
editForm[field] =
|
||||
personOptions.value[Number(event.detail.value)]?.value || "";
|
||||
};
|
||||
const uploadAvatar = async () => {
|
||||
if (isAvatarUploading.value || isSubmitting.value) return;
|
||||
isAvatarUploading.value = true;
|
||||
avatarUploadError.value = "";
|
||||
try {
|
||||
const receipt = await pickAndUploadImage({ requestController: editRequestController });
|
||||
const receipt = await pickAndUploadImage({
|
||||
requestController: editRequestController,
|
||||
});
|
||||
editForm.avatarOssId = receipt.ossId;
|
||||
avatarFileName.value = receipt.fileName || "头像图片";
|
||||
} catch (error) {
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error)) avatarUploadError.value = error?.message || "头像上传失败，请稍后重试";
|
||||
if (!isImagePickCancelled(error) && !isRequestCancelled(error))
|
||||
avatarUploadError.value = error?.message || "头像上传失败，请稍后重试";
|
||||
} finally {
|
||||
isAvatarUploading.value = false;
|
||||
}
|
||||
@@ -395,41 +607,57 @@ const selectDate = (field, event) => {
|
||||
};
|
||||
const validateEditForm = () => {
|
||||
fieldErrors.name = editForm.name.trim() ? "" : "请填写成员姓名";
|
||||
fieldErrors.dates = editForm.birthDate && editForm.deathDate && editForm.deathDate < editForm.birthDate ? "离世日期不能早于出生日期" : "";
|
||||
fieldErrors.bindingMode = editForm.bindingMode === "SPECIFIED" && !editForm.appUserId
|
||||
? "当前未提供可选业务用户，不能指定认领"
|
||||
: "";
|
||||
fieldErrors.dates =
|
||||
editForm.birthDate &&
|
||||
editForm.deathDate &&
|
||||
editForm.deathDate < editForm.birthDate
|
||||
? "离世日期不能早于出生日期"
|
||||
: "";
|
||||
fieldErrors.bindingMode =
|
||||
editForm.bindingMode === "SPECIFIED" && !editForm.appUserId
|
||||
? "当前未提供可选业务用户，不能指定认领"
|
||||
: "";
|
||||
return !fieldErrors.name && !fieldErrors.dates && !fieldErrors.bindingMode;
|
||||
};
|
||||
const saveMember = async () => {
|
||||
if (isSubmitting.value || isAvatarUploading.value || !validateEditForm()) return;
|
||||
if (isSubmitting.value || isAvatarUploading.value || !validateEditForm())
|
||||
return;
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
await appApi.updatePerson(genealogyId.value, personId.value, {
|
||||
bindingMode: editForm.bindingMode,
|
||||
...(editForm.bindingMode === "SPECIFIED" ? { appUserId: editForm.appUserId } : {}),
|
||||
personNo: editForm.personNo,
|
||||
name: editForm.name,
|
||||
aliasName: editForm.aliasName,
|
||||
sex: editForm.sex,
|
||||
generation: editForm.generation ? Number(editForm.generation) : undefined,
|
||||
generationName: editForm.generationName,
|
||||
fatherId: editForm.fatherId,
|
||||
motherId: editForm.motherId,
|
||||
avatarOssId: editForm.avatarOssId,
|
||||
birthDate: editForm.birthDate,
|
||||
birthLunar: editForm.birthLunar,
|
||||
birthPlace: editForm.birthPlace,
|
||||
deathDate: editForm.deathDate,
|
||||
deathLunar: editForm.deathLunar,
|
||||
deathPlace: editForm.deathPlace,
|
||||
burialPlace: editForm.burialPlace,
|
||||
personStatus: editForm.personStatus,
|
||||
biography: editForm.summary,
|
||||
remark: editForm.remark,
|
||||
sortOrder: editForm.sortOrder,
|
||||
relationName: editForm.relationName,
|
||||
}, { requestController: editRequestController });
|
||||
await appApi.updatePerson(
|
||||
genealogyId.value,
|
||||
personId.value,
|
||||
{
|
||||
bindingMode: editForm.bindingMode,
|
||||
...(editForm.bindingMode === "SPECIFIED"
|
||||
? { appUserId: editForm.appUserId }
|
||||
: {}),
|
||||
personNo: editForm.personNo,
|
||||
name: editForm.name,
|
||||
aliasName: editForm.aliasName,
|
||||
sex: editForm.sex,
|
||||
generation: editForm.generation
|
||||
? Number(editForm.generation)
|
||||
: undefined,
|
||||
generationName: editForm.generationName,
|
||||
fatherId: editForm.fatherId,
|
||||
motherId: editForm.motherId,
|
||||
avatarOssId: editForm.avatarOssId,
|
||||
birthDate: editForm.birthDate,
|
||||
birthLunar: editForm.birthLunar,
|
||||
birthPlace: editForm.birthPlace,
|
||||
deathDate: editForm.deathDate,
|
||||
deathLunar: editForm.deathLunar,
|
||||
deathPlace: editForm.deathPlace,
|
||||
burialPlace: editForm.burialPlace,
|
||||
personStatus: editForm.personStatus,
|
||||
biography: editForm.summary,
|
||||
remark: editForm.remark,
|
||||
sortOrder: editForm.sortOrder,
|
||||
relationName: editForm.relationName,
|
||||
},
|
||||
{ requestController: editRequestController },
|
||||
);
|
||||
baseline.value = formSnapshot.value;
|
||||
await goBack();
|
||||
} catch (error) {
|
||||
@@ -442,9 +670,7 @@ const saveMember = async () => {
|
||||
}
|
||||
};
|
||||
const returnToMember = async () => {
|
||||
const confirmed = isDirty.value
|
||||
? await requestDiscardConfirmation()
|
||||
: true;
|
||||
const confirmed = isDirty.value ? await requestDiscardConfirmation() : true;
|
||||
if (!confirmed) return false;
|
||||
return goBack();
|
||||
};
|
||||
@@ -464,28 +690,154 @@ const handleResultAction = () => {
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.edit-member-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.edit-member-page__header { z-index: 3; }
|
||||
.edit-member-panel { @include adaptive.adaptive-tree-panel; z-index: 2; width: calc(100% - 32rpx); margin: 18rpx auto 28rpx; padding: 7.5% 8%; }
|
||||
.form-eyebrow { display: block; color: $brand-red; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.form-title { display: block; margin-top: 10rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 34rpx; font-weight: 700; line-height: 1.35; }
|
||||
.form-copy, .form-note { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.5; }
|
||||
.member-context, .form-field { @include adaptive.adaptive-tree-field; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 78rpx; align-items: center; gap: 20rpx; margin-top: 14rpx; padding: 12rpx 22rpx; }
|
||||
.member-context text:first-child, .form-field > text:first-child { color: $ink; font-size: 24rpx; font-weight: 700; }
|
||||
.member-context text:last-child, .form-field > text:last-child, .form-field input, .form-field textarea { min-width: 0; color: $ink; font-size: 24rpx; line-height: 1.45; text-align: right; }
|
||||
.form-field textarea { width: auto; min-height: 54rpx; text-align: left; }
|
||||
.form-field__hint, .upload-receipt { color: $ink-muted; font-size: 21rpx; line-height: 1.4; text-align: right; }
|
||||
.form-field--upload > view { display: grid; justify-items: end; gap: 6rpx; }
|
||||
.upload-button { min-height: 54rpx; margin: 0; padding: 0 16rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }
|
||||
.form-field--summary { align-items: start; }
|
||||
.form-placeholder { color: #a79884; }
|
||||
.field-error { display: block; margin: 5rpx 18rpx 0; color: $brand-red; font-size: 22rpx; line-height: 32rpx; }
|
||||
.form-note { text-align: center; }
|
||||
.form-action { display: grid; width: 100%; min-height: 76rpx; margin-top: 18rpx; }
|
||||
.form-action image, .form-action text { grid-area: 1 / 1; width: 100%; height: 100%; }
|
||||
.form-action text { z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
.edit-result { margin-top: 30%; text-align: center; }
|
||||
.edit-result .form-eyebrow, .edit-result .form-copy { text-align: center; }
|
||||
.edit-result .form-action { width: 420rpx; max-width: 100%; margin-right: auto; margin-left: auto; }
|
||||
@media (min-width: 400px) { .edit-member-panel { width: calc(100% - 48rpx); } }
|
||||
.edit-member-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.edit-member-page__header {
|
||||
z-index: 3;
|
||||
}
|
||||
.edit-member-panel {
|
||||
@include adaptive.adaptive-tree-panel;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 28rpx;
|
||||
padding: 7.5% 8%;
|
||||
}
|
||||
.form-eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.form-title {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.form-copy,
|
||||
.form-note {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.member-context,
|
||||
.form-field {
|
||||
@include adaptive.adaptive-tree-field;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
min-height: 78rpx;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 12rpx 22rpx;
|
||||
}
|
||||
.member-context text:first-child,
|
||||
.form-field > text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-context text:last-child,
|
||||
.form-field > text:last-child,
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
min-width: 0;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.45;
|
||||
text-align: right;
|
||||
}
|
||||
.form-field textarea {
|
||||
width: auto;
|
||||
min-height: 54rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.form-field__hint,
|
||||
.upload-receipt {
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.4;
|
||||
text-align: right;
|
||||
}
|
||||
.form-field--upload > view {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 6rpx;
|
||||
}
|
||||
.upload-button {
|
||||
min-height: 54rpx;
|
||||
margin: 0;
|
||||
padding: 0 16rpx;
|
||||
border: 1rpx solid rgba(159, 23, 15, 0.42);
|
||||
border-radius: 8rpx;
|
||||
background: transparent;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.form-field--summary {
|
||||
align-items: start;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
.form-placeholder {
|
||||
color: #a79884;
|
||||
}
|
||||
.field-error {
|
||||
display: block;
|
||||
margin: 5rpx 18rpx 0;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.form-note {
|
||||
text-align: center;
|
||||
}
|
||||
.form-action {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
.form-action image,
|
||||
.form-action text {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.form-action text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.edit-result {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.edit-result .form-eyebrow,
|
||||
.edit-result .form-copy {
|
||||
text-align: center;
|
||||
}
|
||||
.edit-result .form-action {
|
||||
width: 420rpx;
|
||||
max-width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.edit-member-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,35 +10,65 @@
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="rank-page__header"><PageHeader title="调整排行" custom-back @back="goBack" /></view>
|
||||
<view class="rank-page__header"
|
||||
><PageHeader title="调整排行" custom-back @back="goBack"
|
||||
/></view>
|
||||
<view class="rank-panel">
|
||||
<AppLoading v-if="rankState === 'loading'" text="正在读取成员资料" description="请稍候，正在确认待调整人物。" />
|
||||
<AppLoading
|
||||
v-if="rankState === 'loading'"
|
||||
text="正在读取成员资料"
|
||||
description="请稍候，正在确认待调整人物。"
|
||||
/>
|
||||
|
||||
<view v-else-if="rankState === 'form' && member" class="rank-form">
|
||||
<text class="form-eyebrow">同辈排行</text>
|
||||
<text class="form-title">调整{{ member.name }}的排行</text>
|
||||
<text class="form-copy">排行调整必须由服务端以同辈原子操作完成，避免逐人保存造成部分成功。</text>
|
||||
<text class="form-copy"
|
||||
>排行调整必须由服务端以同辈原子操作完成，避免逐人保存造成部分成功。</text
|
||||
>
|
||||
|
||||
<view class="member-context">
|
||||
<text>当前成员</text><text>第 {{ member.generation }} 世 · {{ member.branch }}</text>
|
||||
<text>当前成员</text
|
||||
><text>第 {{ member.generation }} 世 · {{ member.branch }}</text>
|
||||
</view>
|
||||
<view class="rank-notice">
|
||||
<text>当前服务状态</text>
|
||||
<text>尚未提供带版本、冲突处理和完整结果的同辈原子重排合同。</text>
|
||||
</view>
|
||||
<view class="form-action" @click="showRankUnavailable">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>查看服务状态</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="rank-result">
|
||||
<text class="form-eyebrow">{{ rankState === "unavailable" ? "服务暂未开放" : "成员入口无效" }}</text>
|
||||
<text class="form-title">{{ rankState === "unavailable" ? "暂不能提交排行调整" : "暂时无法读取成员资料" }}</text>
|
||||
<text class="form-copy">{{ rankState === "unavailable" ? "当前人物更新接口只有单人物 sortOrder 候选，不能保证同辈排行原子一致。本页不会逐人写入，也不会显示本地预览成功。" : errorMessage }}</text>
|
||||
<view class="form-action" @click="rankState === 'unavailable' ? (rankState = 'form') : goBack()">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<text>{{ rankState === "unavailable" ? "返回查看" : "返回世系树" }}</text>
|
||||
<text class="form-eyebrow">{{
|
||||
rankState === "unavailable" ? "服务暂未开放" : "成员入口无效"
|
||||
}}</text>
|
||||
<text class="form-title">{{
|
||||
rankState === "unavailable"
|
||||
? "暂不能提交排行调整"
|
||||
: "暂时无法读取成员资料"
|
||||
}}</text>
|
||||
<text class="form-copy">{{
|
||||
rankState === "unavailable"
|
||||
? "当前人物更新接口只有单人物 sortOrder 候选，不能保证同辈排行原子一致。本页不会逐人写入，也不会显示本地预览成功。"
|
||||
: errorMessage
|
||||
}}</text>
|
||||
<view
|
||||
class="form-action"
|
||||
@click="rankState === 'unavailable' ? (rankState = 'form') : goBack()"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{
|
||||
rankState === "unavailable" ? "返回查看" : "返回世系树"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -51,7 +81,11 @@ import { onBackPress, onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, handleBackPress } from "@/utils/navigation.js";
|
||||
|
||||
const rankState = ref("loading");
|
||||
@@ -76,7 +110,8 @@ const loadMember = async () => {
|
||||
} catch (error) {
|
||||
if (activeLoad !== loadSequence || isRequestCancelled(error)) return;
|
||||
member.value = null;
|
||||
errorMessage.value = error?.message || "当前成员资料暂不可用，请返回世系树后重试。";
|
||||
errorMessage.value =
|
||||
error?.message || "当前成员资料暂不可用，请返回世系树后重试。";
|
||||
rankState.value = "error";
|
||||
}
|
||||
};
|
||||
@@ -107,20 +142,107 @@ onBackPress((event) => handleBackPress(event, goBack));
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.rank-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||||
.rank-page__header { z-index: 3; }
|
||||
.rank-panel { @include adaptive.adaptive-tree-panel; z-index: 2; width: calc(100% - 32rpx); margin: 18rpx auto 28rpx; padding: 7.5% 8%; }
|
||||
.form-eyebrow { display: block; color: $brand-red; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.form-title { display: block; margin-top: 10rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 34rpx; font-weight: 700; line-height: 1.35; }
|
||||
.form-copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.5; }
|
||||
.member-context, .rank-notice { @include adaptive.adaptive-tree-field; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 78rpx; align-items: center; gap: 20rpx; margin-top: 16rpx; padding: 12rpx 22rpx; }
|
||||
.member-context text:first-child, .rank-notice text:first-child { color: $ink; font-size: 24rpx; font-weight: 700; }
|
||||
.member-context text:last-child, .rank-notice text:last-child { min-width: 0; color: $ink-muted; font-size: 23rpx; line-height: 1.45; text-align: right; }
|
||||
.form-action { display: grid; width: 100%; min-height: 76rpx; margin-top: 22rpx; }
|
||||
.form-action image, .form-action text { grid-area: 1 / 1; width: 100%; height: 100%; }
|
||||
.form-action text { z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
.rank-result { margin-top: 30%; text-align: center; }
|
||||
.rank-result .form-eyebrow, .rank-result .form-copy { text-align: center; }
|
||||
.rank-result .form-action { width: 420rpx; max-width: 100%; margin-right: auto; margin-left: auto; }
|
||||
@media (min-width: 400px) { .rank-panel { width: calc(100% - 48rpx); } }
|
||||
.rank-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.rank-page__header {
|
||||
z-index: 3;
|
||||
}
|
||||
.rank-panel {
|
||||
@include adaptive.adaptive-tree-panel;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 28rpx;
|
||||
padding: 7.5% 8%;
|
||||
}
|
||||
.form-eyebrow {
|
||||
display: block;
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.form-title {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.form-copy {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.member-context,
|
||||
.rank-notice {
|
||||
@include adaptive.adaptive-tree-field;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
min-height: 78rpx;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
padding: 12rpx 22rpx;
|
||||
}
|
||||
.member-context text:first-child,
|
||||
.rank-notice text:first-child {
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.member-context text:last-child,
|
||||
.rank-notice text:last-child {
|
||||
min-width: 0;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
text-align: right;
|
||||
}
|
||||
.form-action {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 76rpx;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.form-action image,
|
||||
.form-action text {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.form-action text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rank-result {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.rank-result .form-eyebrow,
|
||||
.rank-result .form-copy {
|
||||
text-align: center;
|
||||
}
|
||||
.rank-result .form-action {
|
||||
width: 420rpx;
|
||||
max-width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.rank-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -97,7 +97,11 @@ import AppButton from "@/components/AppButton.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack, openPage } from "@/utils/navigation.js";
|
||||
const genealogyId = ref("");
|
||||
const keyword = ref("");
|
||||
@@ -162,7 +166,11 @@ const retryDirectory = () => {
|
||||
};
|
||||
const openMember = (item) =>
|
||||
hasValidContext.value
|
||||
? openPage("T03", { genealogyId: genealogyId.value, personId: String(item.id) }, "T07")
|
||||
? openPage(
|
||||
"T03",
|
||||
{ genealogyId: genealogyId.value, personId: String(item.id) },
|
||||
"T07",
|
||||
)
|
||||
: Promise.resolve(false);
|
||||
onUnload(() => {
|
||||
loadSequence += 1;
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
}"
|
||||
>
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="member-status-page__header"><PageHeader :title="pageTitle" /></view>
|
||||
<view class="member-status-page__header"
|
||||
><PageHeader :title="pageTitle"
|
||||
/></view>
|
||||
|
||||
<view v-if="hasValidContext" class="member-status-context">
|
||||
<text>{{ genealogyName }}</text>
|
||||
@@ -36,8 +38,15 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="statusState !== 'loading'" class="status-action" @click="handleAction">
|
||||
<image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="scaleToFill" />
|
||||
<view
|
||||
v-if="statusState !== 'loading'"
|
||||
class="status-action"
|
||||
@click="handleAction"
|
||||
>
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>{{ activeStatus.action }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -49,7 +58,11 @@ import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
|
||||
import {
|
||||
appApi,
|
||||
createRequestController,
|
||||
isRequestCancelled,
|
||||
} from "@/utils/api.js";
|
||||
import { goBack } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
@@ -74,7 +87,11 @@ const states = {
|
||||
title: "暂无法展示状态说明",
|
||||
copy: "服务端返回了状态字段，但未提供可读名称或说明；本页不会向家人展示内部状态值。",
|
||||
guideTitle: "当前合同范围",
|
||||
guides: ["状态由服务端维护", "状态展示需要后端提供可读字典", "当前页不执行停用或任何状态写入"],
|
||||
guides: [
|
||||
"状态由服务端维护",
|
||||
"状态展示需要后端提供可读字典",
|
||||
"当前页不执行停用或任何状态写入",
|
||||
],
|
||||
action: "返回成员档案",
|
||||
},
|
||||
error: {
|
||||
@@ -82,13 +99,19 @@ const states = {
|
||||
title: "没有找到要查看的成员",
|
||||
copy: "请从成员档案或世系树重新选择成员。",
|
||||
guideTitle: "重新进入方式",
|
||||
guides: ["从世系树选择成员节点", "从成员目录打开成员档案", "确认当前家谱仍然有效"],
|
||||
guides: [
|
||||
"从世系树选择成员节点",
|
||||
"从成员目录打开成员档案",
|
||||
"确认当前家谱仍然有效",
|
||||
],
|
||||
action: "返回上一页",
|
||||
},
|
||||
};
|
||||
const activeStatus = computed(() => states[statusState.value] || states.error);
|
||||
const pageTitle = computed(() => "成员状态");
|
||||
const hasValidContext = computed(() => Boolean(genealogyId.value && personId.value));
|
||||
const hasValidContext = computed(() =>
|
||||
Boolean(genealogyId.value && personId.value),
|
||||
);
|
||||
const memberIdentityCopy = computed(() => {
|
||||
if (!member.value) return "";
|
||||
return `${member.value.name} · 第 ${member.value.generation} 世`;
|
||||
@@ -133,21 +156,111 @@ const handleAction = () => goBack();
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.member-status-page { display: flex; min-height: 100vh; flex-direction: column; padding-bottom: 34rpx; box-sizing: border-box; background: $paper; }
|
||||
.member-status-page__header, .member-status-context, .status-card, .status-guidance, .status-action { z-index: 2; }
|
||||
.member-status-context { @include adaptive.adaptive-tree-field; width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 16rpx 24rpx; }
|
||||
.member-status-context text { display: block; color: $ink-muted; font-size: 23rpx; line-height: 1.45; }
|
||||
.member-status-context text:first-child { color: $ink; font-size: 26rpx; font-weight: 700; }
|
||||
.status-card { @include adaptive.adaptive-tree-panel; width: calc(100% - 32rpx); min-height: 330rpx; margin: 18rpx auto 0; padding: 12% 10%; }
|
||||
.status-card__copy text { display: block; color: $ink-muted; font-size: 24rpx; line-height: 1.55; text-align: center; }
|
||||
.status-card__copy text:first-child { color: $brand-red; font-size: 22rpx; letter-spacing: 3rpx; }
|
||||
.status-card__copy text:nth-child(2) { margin-top: 12rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 32rpx; font-weight: 700; }
|
||||
.status-card__copy text:last-child { margin-top: 14rpx; font-size: 24rpx; }
|
||||
.status-guidance { @include adaptive.adaptive-genealogy-list-card; width: calc(100% - 48rpx); margin: 16rpx auto 0; padding: 24rpx 28rpx; }
|
||||
.status-guidance text { display: block; color: $ink-muted; font-size: 24rpx; line-height: 1.6; }
|
||||
.status-guidance text:first-child { margin-bottom: 8rpx; color: $ink; font-size: 26rpx; font-weight: 700; }
|
||||
.status-action { display: grid; width: calc(100% - 72rpx); min-height: 76rpx; margin: 22rpx auto 0; }
|
||||
.status-action image, .status-action text { grid-area: 1 / 1; width: 100%; height: 100%; }
|
||||
.status-action text { z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff9ed; font-size: 24rpx; font-weight: 700; }
|
||||
@media (min-width: 400px) { .member-status-context, .status-card { width: calc(100% - 48rpx); } }
|
||||
.member-status-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
padding-bottom: 34rpx;
|
||||
box-sizing: border-box;
|
||||
background: $paper;
|
||||
}
|
||||
.member-status-page__header,
|
||||
.member-status-context,
|
||||
.status-card,
|
||||
.status-guidance,
|
||||
.status-action {
|
||||
z-index: 2;
|
||||
}
|
||||
.member-status-context {
|
||||
@include adaptive.adaptive-tree-field;
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 18rpx auto 0;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
.member-status-context text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.member-status-context text:first-child {
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-card {
|
||||
@include adaptive.adaptive-tree-panel;
|
||||
width: calc(100% - 32rpx);
|
||||
min-height: 330rpx;
|
||||
margin: 18rpx auto 0;
|
||||
padding: 12% 10%;
|
||||
}
|
||||
.status-card__copy text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
}
|
||||
.status-card__copy text:first-child {
|
||||
color: $brand-red;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.status-card__copy text:nth-child(2) {
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-card__copy text:last-child {
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.status-guidance {
|
||||
@include adaptive.adaptive-genealogy-list-card;
|
||||
width: calc(100% - 48rpx);
|
||||
margin: 16rpx auto 0;
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
.status-guidance text {
|
||||
display: block;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.status-guidance text:first-child {
|
||||
margin-bottom: 8rpx;
|
||||
color: $ink;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.status-action {
|
||||
display: grid;
|
||||
width: calc(100% - 72rpx);
|
||||
min-height: 76rpx;
|
||||
margin: 22rpx auto 0;
|
||||
}
|
||||
.status-action image,
|
||||
.status-action text {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.status-action text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9ed;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.member-status-context,
|
||||
.status-card {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user