60%
This commit is contained in:
rain
@@ -1,4 +1,146 @@
|
||||
<!-- 页面编号：G-08；用途：加入申请。公开家谱详情/权限投影不完整时保持关闭。 -->
|
||||
<template><view class="join-page"><GenealogyPageBackground /><view class="page-header"><PageHeader title="申请加入家谱" custom-back @back="backToSearch" /></view><view class="page-content"><view class="state-card"><text>加入申请待后端字段合同</text><text>申请提交 operation 不等于可安全发起申请：当前没有公开家谱详情、可申请权限或稳定家谱条目 ID 的消费投影。页面不再使用 fixture 家谱或本地申请成功提示。</text><AppButton block label="返回搜索家谱" @click="backToSearch" /></view></view></view></template>
|
||||
<script setup>import AppButton from "@/components/AppButton.vue";import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";import PageHeader from "@/components/PageHeader.vue";import {returnTo} from "@/utils/navigation.js";const backToSearch=()=>returnTo("G06");</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{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>
|
||||
<!-- 页面编号：G-08；用途：按 APP GenealogyJoinApplyBody 提交加入申请。 -->
|
||||
<template>
|
||||
<view class="join-page">
|
||||
<GenealogyPageBackground />
|
||||
<view class="page-header"><PageHeader title="申请加入家谱" custom-back @back="requestBack" /></view>
|
||||
<view class="page-content">
|
||||
<view v-if="!hasValidContext" class="state-card">
|
||||
<text>申请入口无效</text>
|
||||
<text>没有取得可申请的家谱标识。</text>
|
||||
<AppButton block label="返回搜索家谱" @click="backToSearch" />
|
||||
</view>
|
||||
<view v-else-if="state === 'success'" class="state-card">
|
||||
<text>申请已提交</text>
|
||||
<text>服务端已确认本次加入申请，可返回继续查看公开家谱。</text>
|
||||
<AppButton block label="返回搜索家谱" @click="backToSearch" />
|
||||
</view>
|
||||
<view v-else class="join-form">
|
||||
<view class="form-heading">
|
||||
<text>申请加入</text>
|
||||
<text>{{ genealogyName || '当前家谱' }}</text>
|
||||
</view>
|
||||
<view v-for="field in fields" :key="field.key" class="form-field">
|
||||
<text>{{ field.label }}</text>
|
||||
<textarea
|
||||
v-if="field.multiline"
|
||||
v-model.trim="form[field.key]"
|
||||
auto-height
|
||||
:maxlength="field.maxlength"
|
||||
:placeholder="field.placeholder"
|
||||
:disabled="state === 'submitting'"
|
||||
@input="error = ''"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
v-model.trim="form[field.key]"
|
||||
:type="field.inputType || 'text'"
|
||||
:maxlength="field.maxlength"
|
||||
:placeholder="field.placeholder"
|
||||
:disabled="state === 'submitting'"
|
||||
@input="error = ''"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="error" class="form-error">{{ error }}</text>
|
||||
<AppButton block :disabled="state === 'submitting'" :label="state === 'submitting' ? '正在提交' : '提交申请'" @click="submit" />
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog
|
||||
:visible="discardVisible"
|
||||
:close-on-mask="false"
|
||||
eyebrow="放弃确认"
|
||||
title="放弃当前申请？"
|
||||
message="当前填写内容尚未提交，离开后会清除。"
|
||||
confirm-text="确认放弃"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
@confirm="confirmDiscard"
|
||||
@cancel="cancelDiscard"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onUnmounted, reactive, ref } from "vue";
|
||||
import { onBackPress, onLoad } from "@dcloudio/uni-app";
|
||||
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 { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const genealogyName = ref("");
|
||||
const state = ref("form");
|
||||
const error = ref("");
|
||||
const discardVisible = ref(false);
|
||||
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: "如有邀请人可填写编号" },
|
||||
];
|
||||
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 confirmDiscard = confirmation.confirm;
|
||||
const cancelDiscard = confirmation.cancel;
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
genealogyName.value = String(query?.genealogyName || "");
|
||||
});
|
||||
|
||||
const backToSearch = () => returnTo("G06");
|
||||
const submit = async () => {
|
||||
if (state.value === "submitting" || !hasValidContext.value) return;
|
||||
state.value = "submitting";
|
||||
error.value = "";
|
||||
try {
|
||||
await appApi.applyToJoin(genealogyId.value, { ...form }, { requestController: controller });
|
||||
state.value = "success";
|
||||
} catch (cause) {
|
||||
if (!isRequestCancelled(cause)) {
|
||||
state.value = "form";
|
||||
error.value = cause?.message || "申请提交失败，请稍后重试。";
|
||||
}
|
||||
}
|
||||
};
|
||||
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(); });
|
||||
</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; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user