feat: migrate app routes and business modules
This commit is contained in:
@@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<view class="ritual-detail-page">
|
||||
<ModulePageBackground module="records" />
|
||||
<view class="page-header">
|
||||
<PageHeader
|
||||
title="礼仪详情"
|
||||
:action="ceremonyDetailState === 'ready' ? (giftFormVisible ? '收起' : '登记献礼') : ''"
|
||||
custom-back
|
||||
@back="requestBack"
|
||||
@action="toggleGiftForm"
|
||||
/>
|
||||
</view>
|
||||
<view class="page-content">
|
||||
<view v-if="!valid" class="state-card">
|
||||
<text>暂时无法打开礼仪活动</text>
|
||||
<text>未找到这项活动，请从活动列表重新进入。</text>
|
||||
<AppButton block label="返回上一页" @click="returnToList" />
|
||||
</view>
|
||||
<view v-else-if="ceremonyDetailState === 'loading'" class="state-card">
|
||||
<AppLoading text="正在加载礼仪详情" />
|
||||
</view>
|
||||
<view v-else-if="ceremonyDetailState === 'error'" class="state-card">
|
||||
<text>暂时无法加载礼仪详情</text>
|
||||
<text>请检查网络后重新加载。</text>
|
||||
<AppButton block type="secondary" label="重新加载" @click="loadDetail" />
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="detail-card">
|
||||
<text>{{ detail.title }}</text>
|
||||
<text>{{ detail.typeLabel }}{{ detail.time ? ` · ${detail.time}` : "" }}</text>
|
||||
<text v-if="detail.location || detail.locationAddress">地点：{{ detail.location || detail.locationAddress }}</text>
|
||||
<text v-if="detail.description">{{ detail.description }}</text>
|
||||
<text>已有 {{ detail.giftCount }} 笔献礼</text>
|
||||
<view v-if="detail.canEdit || detail.canDelete" class="detail-card__actions">
|
||||
<AppButton v-if="detail.canEdit" compact type="secondary" label="编辑活动" @click="openEditCeremony" />
|
||||
<AppButton v-if="detail.canDelete" compact type="secondary" label="删除活动" @click="requestDeleteCeremony" />
|
||||
</view>
|
||||
<text v-if="deleteError" class="delete-error">{{ deleteError }}</text>
|
||||
</view>
|
||||
<view class="gift-list-card">
|
||||
<view class="gift-list-card__heading">
|
||||
<view>
|
||||
<text>献礼记录</text>
|
||||
<text>仅展示可查看的姓名、金额、留言和时间。</text>
|
||||
</view>
|
||||
<AppButton
|
||||
compact
|
||||
type="secondary"
|
||||
:disabled="giftListState === 'loading'"
|
||||
:label="giftListState === 'loading' ? '加载中' : '查看清单'"
|
||||
@click="loadGiftRecords"
|
||||
/>
|
||||
</view>
|
||||
<AppLoading v-if="giftListState === 'loading'" text="正在加载献礼记录" />
|
||||
<view v-else-if="giftListState === 'ready'" class="gift-list-card__rows">
|
||||
<view v-for="item in giftRows" :key="item.id" class="gift-list-card__row">
|
||||
<view>
|
||||
<text>{{ item.giverName || item.giverNickName || '未署名献礼' }}</text>
|
||||
<text v-if="item.time">{{ item.time }}</text>
|
||||
<text v-if="item.message">{{ item.message }}</text>
|
||||
</view>
|
||||
<view class="gift-list-card__amount">
|
||||
<text>￥{{ item.amount }}</text>
|
||||
<AppButton
|
||||
v-if="item.canDelete"
|
||||
compact
|
||||
type="secondary"
|
||||
label="删除"
|
||||
@click="requestDeleteGift(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="giftListState === 'empty'" class="gift-list-card__empty">
|
||||
<text>暂时没有献礼记录。</text>
|
||||
</view>
|
||||
<view v-else-if="giftListState === 'error'" class="gift-list-card__error">
|
||||
<text>暂时无法加载献礼记录。</text>
|
||||
<AppButton compact type="secondary" label="重新查看" @click="loadGiftRecords" />
|
||||
</view>
|
||||
</view>
|
||||
<CeremonyInvitationManager
|
||||
ref="ceremonyInvitationManager"
|
||||
:genealogy-id="genealogyId"
|
||||
:ceremony-id="ceremonyId"
|
||||
@transient-change="invitationTransientOpen = $event"
|
||||
@busy-change="invitationBusy = $event"
|
||||
/>
|
||||
<view v-if="giftFormVisible" class="gift-form-card">
|
||||
<text class="gift-form-card__title">登记献礼</text>
|
||||
<text class="gift-form-card__note">金额为必填项；赠礼人和留言可按实际情况填写。</text>
|
||||
<view class="gift-field">
|
||||
<text>赠礼人</text>
|
||||
<input
|
||||
v-model.trim="giftForm.giverName"
|
||||
aria-label="赠礼人（选填）"
|
||||
:disabled="giftSubmitting"
|
||||
placeholder="请输入赠礼人姓名（选填）"
|
||||
placeholder-class="gift-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="gift-field">
|
||||
<text><text class="required-mark">*</text>金额</text>
|
||||
<input
|
||||
v-model.trim="giftForm.giftAmount"
|
||||
type="digit"
|
||||
aria-label="献礼金额"
|
||||
:aria-invalid="Boolean(giftError)"
|
||||
:disabled="giftSubmitting"
|
||||
placeholder="请输入献礼金额"
|
||||
placeholder-class="gift-placeholder"
|
||||
@input="giftError = ''"
|
||||
/>
|
||||
</view>
|
||||
<view class="gift-message-field">
|
||||
<text>留言</text>
|
||||
<textarea
|
||||
v-model.trim="giftForm.giftMessage"
|
||||
auto-height
|
||||
aria-label="献礼留言（选填）"
|
||||
:disabled="giftSubmitting"
|
||||
placeholder="写下对家族的祝福或缅怀（选填）"
|
||||
placeholder-class="gift-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<text v-if="giftError" class="gift-error">{{ giftError }}</text>
|
||||
<view class="gift-form-card__actions">
|
||||
<AppButton type="secondary" label="取消" :disabled="giftSubmitting" @click="closeGiftForm" />
|
||||
<AppButton :label="giftSubmitting ? '正在登记' : '确认登记献礼'" :disabled="giftSubmitting" @click="requestGiftSubmit" />
|
||||
</view>
|
||||
</view>
|
||||
<text
|
||||
v-if="giftResult"
|
||||
class="gift-result"
|
||||
:class="`gift-result--${giftResultTone}`"
|
||||
:role="giftResultTone === 'error' ? 'alert' : 'status'"
|
||||
>{{ giftResult }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<AppDialog
|
||||
:visible="giftConfirmVisible"
|
||||
eyebrow="献礼确认"
|
||||
title="确认登记本次献礼？"
|
||||
message="提交后会保存到当前礼仪活动。"
|
||||
:confirm-text="giftSubmitting ? '正在登记' : '确认登记'"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmGiftSubmit"
|
||||
@cancel="giftConfirmVisible = false"
|
||||
/>
|
||||
<AppDialog
|
||||
:visible="giftDiscardVisible"
|
||||
eyebrow="放弃确认"
|
||||
title="放弃本次献礼？"
|
||||
message="当前填写内容尚未提交，关闭后将被清除。"
|
||||
confirm-text="确认放弃"
|
||||
cancel-text="继续填写"
|
||||
show-cancel
|
||||
:close-on-mask="false"
|
||||
@confirm="confirmGiftDiscard"
|
||||
@cancel="cancelGiftDiscard"
|
||||
/>
|
||||
<AppDialog
|
||||
:visible="ceremonyDeleteConfirmVisible"
|
||||
:close-on-mask="false"
|
||||
eyebrow="删除确认"
|
||||
title="删除这项礼仪活动？"
|
||||
message="活动和相关内容会一并删除，删除后无法恢复。"
|
||||
confirm-text="确认删除"
|
||||
cancel-text="保留活动"
|
||||
show-cancel
|
||||
@confirm="deleteCeremony"
|
||||
@cancel="closeCeremonyDeleteConfirmation"
|
||||
/>
|
||||
<AppDialog
|
||||
:visible="giftDeleteConfirmVisible"
|
||||
:close-on-mask="false"
|
||||
eyebrow="删除确认"
|
||||
title="删除这笔献礼记录？"
|
||||
message="删除后无法恢复，请确认当前记录不再需要。"
|
||||
confirm-text="确认删除"
|
||||
cancel-text="保留记录"
|
||||
show-cancel
|
||||
@confirm="deleteGift"
|
||||
@cancel="closeGiftDeleteConfirmation"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { onBackPress, onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
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 CeremonyInvitationManager from "@/components/records/CeremonyInvitationManager.vue";
|
||||
import {
|
||||
createRequestController,
|
||||
isRequestCancelled
|
||||
} from "@/services/api/request-controller.js";
|
||||
import { ceremonyApi } from "@/services/api/ceremony-service.js";
|
||||
import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
|
||||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||||
import { createNonIdempotentWriteGuard } from "@/utils/non-idempotent-write-guard.js";
|
||||
import {
|
||||
goBack,
|
||||
handleBackPress,
|
||||
openPage,
|
||||
returnTo,
|
||||
} from "@/utils/navigation/gateway.js";
|
||||
|
||||
const genealogyId = ref("");
|
||||
const ceremonyId = ref("");
|
||||
const ceremonyDetailState = ref("loading");
|
||||
const detail = ref({
|
||||
title: "",
|
||||
type: "",
|
||||
time: "",
|
||||
location: "",
|
||||
locationAddress: "",
|
||||
description: "",
|
||||
giftCount: 0,
|
||||
});
|
||||
// 详情与献礼可以同时刷新，独立控制器可避免一个区域取消另一区域的读取。
|
||||
const ceremonyDetailRequestController = createRequestController();
|
||||
const giftSubmissionRequestController = createRequestController();
|
||||
const ceremonyGiftCreateGuard = createNonIdempotentWriteGuard();
|
||||
const giftListRequestController = createRequestController();
|
||||
const giftFormVisible = ref(false);
|
||||
const giftConfirmVisible = ref(false);
|
||||
const giftDiscardVisible = ref(false);
|
||||
const giftSubmitting = ref(false);
|
||||
const giftError = ref("");
|
||||
const giftResult = ref("");
|
||||
const giftResultTone = ref("");
|
||||
const giftForm = reactive({
|
||||
giverName: "",
|
||||
giftAmount: "",
|
||||
giftMessage: "",
|
||||
});
|
||||
const giftBaseline = ref("");
|
||||
const giftRows = ref([]);
|
||||
const giftListState = ref("idle");
|
||||
const ceremonyInvitationManager = ref(null);
|
||||
const invitationTransientOpen = ref(false);
|
||||
const invitationBusy = ref(false);
|
||||
const ceremonyDeleteConfirmVisible = ref(false);
|
||||
const giftDeleteConfirmVisible = ref(false);
|
||||
const giftDeleteTarget = ref(null);
|
||||
const deleting = ref(false);
|
||||
const deleteError = ref("");
|
||||
const ceremonyContentDeletionRequestController = createRequestController();
|
||||
let pageActive = true;
|
||||
|
||||
const valid = computed(
|
||||
() =>
|
||||
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(ceremonyId.value),
|
||||
);
|
||||
const giftSnapshot = computed(() => JSON.stringify(giftForm));
|
||||
const giftDirty = computed(
|
||||
() => giftFormVisible.value && giftSnapshot.value !== giftBaseline.value,
|
||||
);
|
||||
const isPageWriteBusy = computed(
|
||||
() => giftSubmitting.value || invitationBusy.value || deleting.value,
|
||||
);
|
||||
const resetGiftForm = () => {
|
||||
Object.assign(giftForm, { giverName: "", giftAmount: "", giftMessage: "" });
|
||||
giftBaseline.value = JSON.stringify(giftForm);
|
||||
giftError.value = "";
|
||||
};
|
||||
const giftDiscard = createDiscardConfirmation((visible) => {
|
||||
giftDiscardVisible.value = visible;
|
||||
});
|
||||
const requestGiftDiscard = giftDiscard.request;
|
||||
const confirmGiftDiscard = giftDiscard.confirm;
|
||||
const cancelGiftDiscard = giftDiscard.cancel;
|
||||
|
||||
const loadDetail = async ({ preserveCurrent = false } = {}) => {
|
||||
if (!valid.value) return false;
|
||||
ceremonyDetailRequestController.abort();
|
||||
if (!preserveCurrent) ceremonyDetailState.value = "loading";
|
||||
try {
|
||||
const ceremonyDetail = await ceremonyApi.getCeremonyDetail(
|
||||
genealogyId.value,
|
||||
ceremonyId.value,
|
||||
{ requestController: ceremonyDetailRequestController },
|
||||
);
|
||||
if (!pageActive) return false;
|
||||
detail.value = ceremonyDetail;
|
||||
ceremonyDetailState.value = "ready";
|
||||
return true;
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return false;
|
||||
if (!preserveCurrent) ceremonyDetailState.value = "error";
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadGiftRecords = async () => {
|
||||
if (!valid.value || giftListState.value === "loading") return;
|
||||
giftListRequestController.abort();
|
||||
giftListState.value = "loading";
|
||||
try {
|
||||
const rows = await ceremonyApi.getCeremonyGifts(
|
||||
genealogyId.value,
|
||||
ceremonyId.value,
|
||||
{ requestController: giftListRequestController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
giftRows.value = rows;
|
||||
giftListState.value = rows.length ? "ready" : "empty";
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return;
|
||||
giftListState.value = "error";
|
||||
}
|
||||
};
|
||||
|
||||
const openGiftForm = () => {
|
||||
resetGiftForm();
|
||||
giftResult.value = "";
|
||||
giftResultTone.value = "";
|
||||
giftFormVisible.value = true;
|
||||
};
|
||||
const closeGiftForm = async () => {
|
||||
if (giftSubmitting.value) return false;
|
||||
if (giftDirty.value && !(await requestGiftDiscard())) return false;
|
||||
giftConfirmVisible.value = false;
|
||||
giftFormVisible.value = false;
|
||||
resetGiftForm();
|
||||
return true;
|
||||
};
|
||||
const toggleGiftForm = async () => {
|
||||
if (giftFormVisible.value) return closeGiftForm();
|
||||
openGiftForm();
|
||||
return true;
|
||||
};
|
||||
const requestGiftSubmit = () => {
|
||||
giftError.value = giftForm.giftAmount.trim() ? "" : "请填写献礼金额";
|
||||
if (!giftError.value && !giftSubmitting.value) giftConfirmVisible.value = true;
|
||||
};
|
||||
const confirmGiftSubmit = async () => {
|
||||
if (giftSubmitting.value || !giftForm.giftAmount.trim()) return;
|
||||
const payload = {
|
||||
giverName: giftForm.giverName,
|
||||
giftAmount: giftForm.giftAmount,
|
||||
giftMessage: giftForm.giftMessage,
|
||||
};
|
||||
const createAttempt = ceremonyGiftCreateGuard.begin(payload);
|
||||
if (createAttempt === null) {
|
||||
giftConfirmVisible.value = false;
|
||||
giftError.value =
|
||||
"上次登记结果暂时无法确认，请先查看献礼记录，避免重复登记。";
|
||||
return;
|
||||
}
|
||||
|
||||
giftSubmitting.value = true;
|
||||
giftError.value = "";
|
||||
giftResult.value = "";
|
||||
try {
|
||||
await ceremonyApi.createCeremonyGift(
|
||||
genealogyId.value,
|
||||
ceremonyId.value,
|
||||
payload,
|
||||
{ requestController: giftSubmissionRequestController },
|
||||
);
|
||||
if (!pageActive) return;
|
||||
giftConfirmVisible.value = false;
|
||||
giftFormVisible.value = false;
|
||||
resetGiftForm();
|
||||
giftResultTone.value = "success";
|
||||
giftResult.value = "献礼已登记。";
|
||||
const refreshed = await loadDetail({ preserveCurrent: true });
|
||||
if (giftListState.value !== "idle") await loadGiftRecords();
|
||||
if (pageActive && !refreshed) {
|
||||
giftResult.value = "献礼已登记，但礼仪详情暂未刷新。";
|
||||
}
|
||||
} catch (error) {
|
||||
if (!pageActive) return;
|
||||
if (ceremonyGiftCreateGuard.recordFailure(createAttempt, error)) {
|
||||
giftError.value =
|
||||
"登记结果暂时无法确认，请先查看献礼记录，避免重复登记。";
|
||||
giftConfirmVisible.value = false;
|
||||
return;
|
||||
}
|
||||
if (isRequestCancelled(error)) return;
|
||||
giftError.value = getRequestErrorMessage(error, "献礼登记失败，请稍后重试。");
|
||||
giftConfirmVisible.value = false;
|
||||
} finally {
|
||||
if (pageActive) giftSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const requestDeleteCeremony = () => {
|
||||
if (!detail.value?.canDelete || deleting.value) return;
|
||||
deleteError.value = "";
|
||||
ceremonyDeleteConfirmVisible.value = true;
|
||||
};
|
||||
const openEditCeremony = async () => {
|
||||
if (!detail.value?.canEdit || !valid.value) return;
|
||||
if (!(await closeGiftForm())) return;
|
||||
return openPage(
|
||||
"R07",
|
||||
{ genealogyId: genealogyId.value, ceremonyId: ceremonyId.value, mode: "edit" },
|
||||
"R06",
|
||||
);
|
||||
};
|
||||
const closeCeremonyDeleteConfirmation = () => {
|
||||
if (!deleting.value) ceremonyDeleteConfirmVisible.value = false;
|
||||
};
|
||||
const deleteCeremony = async () => {
|
||||
if (!detail.value?.canDelete || deleting.value) return;
|
||||
deleting.value = true;
|
||||
deleteError.value = "";
|
||||
let deletionCommitted = false;
|
||||
try {
|
||||
await ceremonyApi.deleteCeremony(genealogyId.value, ceremonyId.value, {
|
||||
requestController: ceremonyContentDeletionRequestController,
|
||||
});
|
||||
deletionCommitted = true;
|
||||
if (!pageActive) return;
|
||||
ceremonyDeleteConfirmVisible.value = false;
|
||||
detail.value = { ...detail.value, canDelete: false, canEdit: false };
|
||||
giftConfirmVisible.value = false;
|
||||
giftFormVisible.value = false;
|
||||
resetGiftForm();
|
||||
const returned = await returnToList();
|
||||
if (pageActive && returned === false) {
|
||||
deleteError.value = "礼仪活动已删除，但暂时无法返回活动列表。";
|
||||
}
|
||||
} catch (error) {
|
||||
if (!pageActive) return;
|
||||
if (deletionCommitted) {
|
||||
ceremonyDeleteConfirmVisible.value = false;
|
||||
detail.value = { ...detail.value, canDelete: false, canEdit: false };
|
||||
deleteError.value = "礼仪活动已删除，但暂时无法返回活动列表。";
|
||||
return;
|
||||
}
|
||||
if (isRequestCancelled(error)) return;
|
||||
deleteError.value = getRequestErrorMessage(error, "礼仪活动删除失败，请稍后重试。");
|
||||
ceremonyDeleteConfirmVisible.value = false;
|
||||
} finally {
|
||||
if (pageActive) deleting.value = false;
|
||||
}
|
||||
};
|
||||
const requestDeleteGift = (gift) => {
|
||||
if (!gift?.canDelete || deleting.value) return;
|
||||
deleteError.value = "";
|
||||
giftDeleteTarget.value = gift;
|
||||
giftDeleteConfirmVisible.value = true;
|
||||
};
|
||||
const closeGiftDeleteConfirmation = () => {
|
||||
if (deleting.value) return;
|
||||
giftDeleteConfirmVisible.value = false;
|
||||
giftDeleteTarget.value = null;
|
||||
};
|
||||
const deleteGift = async () => {
|
||||
const gift = giftDeleteTarget.value;
|
||||
if (!gift?.canDelete || deleting.value) return;
|
||||
deleting.value = true;
|
||||
deleteError.value = "";
|
||||
try {
|
||||
await ceremonyApi.deleteCeremonyGift(genealogyId.value, ceremonyId.value, gift.id, {
|
||||
requestController: ceremonyContentDeletionRequestController,
|
||||
});
|
||||
if (!pageActive) return;
|
||||
giftDeleteConfirmVisible.value = false;
|
||||
giftDeleteTarget.value = null;
|
||||
await loadDetail({ preserveCurrent: true });
|
||||
await loadGiftRecords();
|
||||
} catch (error) {
|
||||
if (!pageActive || isRequestCancelled(error)) return;
|
||||
deleteError.value = getRequestErrorMessage(error, "献礼记录删除失败，请稍后重试。");
|
||||
giftDeleteConfirmVisible.value = false;
|
||||
} finally {
|
||||
if (pageActive) deleting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeActiveTransient = () => {
|
||||
if (giftConfirmVisible.value) {
|
||||
giftConfirmVisible.value = false;
|
||||
return true;
|
||||
}
|
||||
if (giftDiscardVisible.value) {
|
||||
cancelGiftDiscard();
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
invitationTransientOpen.value &&
|
||||
ceremonyInvitationManager.value?.closeTransient()
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (ceremonyDeleteConfirmVisible.value) {
|
||||
closeCeremonyDeleteConfirmation();
|
||||
return true;
|
||||
}
|
||||
if (giftDeleteConfirmVisible.value) {
|
||||
closeGiftDeleteConfirmation();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const returnToList = async () => {
|
||||
if (!(await closeGiftForm())) return false;
|
||||
return /^[1-9]\d*$/.test(genealogyId.value)
|
||||
? returnTo("R05", { genealogyId: genealogyId.value })
|
||||
: goBack();
|
||||
};
|
||||
const requestBack = async () => {
|
||||
if (isPageWriteBusy.value) return true;
|
||||
if (closeActiveTransient()) return true;
|
||||
return returnToList();
|
||||
};
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = String(query?.genealogyId || "");
|
||||
ceremonyId.value = String(query?.ceremonyId || "");
|
||||
if (valid.value) loadDetail();
|
||||
else ceremonyDetailState.value = "invalid";
|
||||
});
|
||||
onBackPress((event) => handleBackPress(event, requestBack));
|
||||
onUnload(() => {
|
||||
pageActive = false;
|
||||
ceremonyDetailRequestController.abort();
|
||||
giftSubmissionRequestController.abort();
|
||||
giftListRequestController.abort();
|
||||
ceremonyContentDeletionRequestController.abort();
|
||||
giftDiscard.dispose();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../styles/adaptive-frame-profiles.scss";
|
||||
.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,
|
||||
.gift-list-card,
|
||||
.gift-form-card,
|
||||
.gift-result {
|
||||
@include adaptive-records-content;
|
||||
}
|
||||
.gift-form-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 34rpx 32rpx;
|
||||
}
|
||||
.gift-form-card__title,
|
||||
.gift-form-card__note,
|
||||
.gift-field > text,
|
||||
.gift-message-field > text,
|
||||
.gift-error,
|
||||
.gift-result {
|
||||
display: block;
|
||||
}
|
||||
.gift-form-card__title {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: clamp(18px, 32rpx, 23px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.gift-form-card__note {
|
||||
margin-top: 10rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(13px, 21rpx, 16px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.gift-field {
|
||||
display: grid;
|
||||
grid-template-columns: 148rpx minmax(0, 1fr);
|
||||
min-height: 90rpx;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
margin-top: 18rpx;
|
||||
border-bottom: 1rpx solid rgba(181, 137, 63, 0.38);
|
||||
}
|
||||
.gift-field > text,
|
||||
.gift-message-field > text {
|
||||
color: $ink;
|
||||
font-size: clamp(14px, 23rpx, 17px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.required-mark {
|
||||
color: $brand-red;
|
||||
}
|
||||
.gift-field input,
|
||||
.gift-message-field textarea {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
color: $ink;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
.gift-field input {
|
||||
width: auto;
|
||||
min-height: 70rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.gift-message-field {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
.gift-message-field textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 154rpx;
|
||||
margin-top: 12rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
border: 1rpx solid rgba(181, 137, 63, 0.42);
|
||||
border-radius: 12rpx;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.gift-placeholder {
|
||||
color: $ink-muted;
|
||||
}
|
||||
.gift-error {
|
||||
margin-top: 14rpx;
|
||||
color: #b42318;
|
||||
font-size: clamp(13px, 20rpx, 16px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.gift-form-card__actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16rpx;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
.gift-result {
|
||||
margin-top: 18rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
color: #245f39;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.gift-result--success {
|
||||
border-color: rgba(41, 112, 66, 0.34);
|
||||
background: rgba(234, 246, 237, 0.88);
|
||||
}
|
||||
@media (max-width: 340px) {
|
||||
.gift-form-card {
|
||||
padding: 28rpx 24rpx;
|
||||
}
|
||||
.gift-field {
|
||||
grid-template-columns: 126rpx minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user