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

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/genealogy/g08-join-application.vue
+168 -39
View File
@@ -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>