274 lines
8.5 KiB
Vue
274 lines
8.5 KiB
Vue
<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-content">
|
|
<view v-if="!valid" class="state-card"
|
|
><text>暂时无法打开礼仪活动</text
|
|
><AppButton block label="返回上一页" @click="returnToFamily"
|
|
/></view>
|
|
<view v-else-if="ceremonyListState === 'loading'" class="state-card"
|
|
><AppLoading text="正在读取礼仪活动"
|
|
/></view>
|
|
<view v-else-if="ceremonyListState === 'error'" class="state-card"
|
|
><text>暂时无法读取礼仪活动</text
|
|
><AppButton
|
|
block
|
|
type="secondary"
|
|
label="重新加载"
|
|
@click="loadCeremonies"
|
|
/></view>
|
|
<view v-else-if="ceremonyListState === 'empty'" class="state-card"
|
|
><text>还没有礼仪活动</text
|
|
><AppButton block label="新建礼仪活动" @click="createCeremony"
|
|
/></view>
|
|
<view v-else class="ceremony-list"
|
|
><BatchManagementBar
|
|
v-if="deletableCeremonies.length"
|
|
resource-name="礼仪活动"
|
|
:active="ceremonyBatch.selectionMode.value"
|
|
:selected-count="ceremonyBatch.selectedCount.value"
|
|
:all-selected="ceremonyBatch.allSelected.value"
|
|
:busy="ceremonyBatch.deleting.value"
|
|
@start="ceremonyBatch.enterSelectionMode"
|
|
@finish="ceremonyBatch.exitSelectionMode"
|
|
@toggle-all="ceremonyBatch.toggleAll"
|
|
@delete="ceremonyBatch.requestDelete"
|
|
/>
|
|
<text v-if="ceremonyBatch.notice.value" class="batch-notice" role="status">{{ ceremonyBatch.notice.value }}</text>
|
|
<text v-if="ceremonyBatch.error.value" class="batch-error" role="alert">{{ ceremonyBatch.error.value }}</text>
|
|
<view
|
|
v-for="item in ceremonies"
|
|
:key="item.id"
|
|
class="ceremony-card"
|
|
@click="handleCeremonyClick(item)"
|
|
><BatchSelectionMark
|
|
v-if="ceremonyBatch.selectionMode.value && item.canDelete"
|
|
:selected="ceremonyBatch.isSelected(item)"
|
|
:label="`礼仪活动：${item.title}`"
|
|
@toggle="ceremonyBatch.toggleSelection(item)"
|
|
/>
|
|
<image
|
|
v-if="item.coverFile?.accessUrl"
|
|
class="ceremony-card__cover"
|
|
:src="item.coverFile.accessUrl"
|
|
mode="aspectFill"
|
|
aria-hidden="true"
|
|
/><view
|
|
><text>{{ item.title }}</text
|
|
><text>{{ item.typeLabel }}{{ item.time ? ` · ${item.time}` : "" }}</text
|
|
><text v-if="item.createTime">创建于 {{ formatMinuteTimestamp(item.createTime) }}</text
|
|
><text v-if="item.description" class="ceremony-card__description">{{ item.description }}</text></view
|
|
><text>{{ item.giftCount }} 笔献礼</text></view
|
|
></view
|
|
>
|
|
</view>
|
|
<AppDialog
|
|
:visible="ceremonyBatch.confirmationVisible.value"
|
|
:close-on-mask="false"
|
|
eyebrow="批量删除"
|
|
title="将选中的礼仪活动移入回收站？"
|
|
:message="ceremonyBatch.confirmationMessage.value"
|
|
:confirm-text="ceremonyBatch.deleting.value ? '正在删除' : '移入回收站'"
|
|
cancel-text="继续选择"
|
|
show-cancel
|
|
@confirm="ceremonyBatch.confirmDelete"
|
|
@cancel="ceremonyBatch.cancelDelete"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from "vue";
|
|
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
|
|
import AppButton from "@/components/AppButton.vue";
|
|
import AppDialog from "@/components/AppDialog.vue";
|
|
import AppLoading from "@/components/AppLoading.vue";
|
|
import BatchManagementBar from "@/components/BatchManagementBar.vue";
|
|
import BatchSelectionMark from "@/components/BatchSelectionMark.vue";
|
|
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
|
import PageHeader from "@/components/PageHeader.vue";
|
|
import {
|
|
createRequestController,
|
|
isRequestCancelled
|
|
} from "@/services/api/request-controller.js";
|
|
import { ceremonyApi } from "@/services/api/ceremony-service.js";
|
|
import { useBatchDeletion } from "@/composables/use-batch-deletion.js";
|
|
import { formatMinuteTimestamp } from "@/utils/display-time.js";
|
|
import { goBack, openPage, returnTo } from "@/utils/navigation/gateway.js";
|
|
|
|
const genealogyId = ref("");
|
|
const ceremonies = ref([]);
|
|
const ceremonyListState = ref("loading");
|
|
const ceremonyListRequestController = createRequestController();
|
|
const ceremonyDeleteRequestController = createRequestController();
|
|
let pageActive = true;
|
|
const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
|
|
const ceremonyBatch = useBatchDeletion({
|
|
items: ceremonies,
|
|
deleteOne: (ceremony) =>
|
|
ceremonyApi.deleteCeremony(genealogyId.value, ceremony.id, {
|
|
requestController: ceremonyDeleteRequestController,
|
|
}),
|
|
resourceName: "礼仪活动",
|
|
isActive: () => pageActive,
|
|
onEmpty: () => {
|
|
ceremonyListState.value = "empty";
|
|
},
|
|
});
|
|
const deletableCeremonies = ceremonyBatch.deletableItems;
|
|
const loadCeremonies = async () => {
|
|
if (!valid.value) return;
|
|
ceremonyListRequestController.abort();
|
|
ceremonyListState.value = "loading";
|
|
try {
|
|
const rows = await ceremonyApi.getCeremonies(genealogyId.value, {
|
|
requestController: ceremonyListRequestController,
|
|
});
|
|
if (!pageActive) return;
|
|
ceremonies.value = rows;
|
|
ceremonyBatch.exitSelectionMode();
|
|
ceremonyListState.value = ceremonies.value.length ? "ready" : "empty";
|
|
} catch (error) {
|
|
if (!pageActive || isRequestCancelled(error)) return;
|
|
ceremonyListState.value = "error";
|
|
}
|
|
};
|
|
const returnToFamily = () =>
|
|
valid.value ? returnTo("G05", { 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",
|
|
);
|
|
const handleCeremonyClick = (item) => {
|
|
if (ceremonyBatch.selectionMode.value && item?.canDelete) {
|
|
ceremonyBatch.toggleSelection(item);
|
|
return;
|
|
}
|
|
openCeremony(item);
|
|
};
|
|
onLoad((query) => {
|
|
genealogyId.value = String(query?.genealogyId || "");
|
|
if (valid.value) loadCeremonies();
|
|
});
|
|
onShow(() => {
|
|
if (valid.value && ceremonyListState.value !== "loading") loadCeremonies();
|
|
});
|
|
onUnload(() => {
|
|
pageActive = false;
|
|
ceremonyListRequestController.abort();
|
|
ceremonyDeleteRequestController.abort();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../styles/adaptive-frame-profiles.scss";
|
|
.ritual-list-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 calc(72rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.state-card,
|
|
.ceremony-card {
|
|
@include adaptive-records-content;
|
|
background-color: rgba($paper, 0.82);
|
|
}
|
|
.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: clamp(16px, 28rpx, 20px);
|
|
}
|
|
.state-card .app-button {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
}
|
|
.ceremony-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
.batch-notice,
|
|
.batch-error {
|
|
display: block;
|
|
font-size: clamp(13px, 21rpx, 16px);
|
|
line-height: 1.55;
|
|
}
|
|
.batch-notice { color: #426538; }
|
|
.batch-error { color: $brand-red; }
|
|
.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__cover {
|
|
width: 150rpx;
|
|
height: 118rpx;
|
|
flex: 0 0 auto;
|
|
border-radius: 10rpx;
|
|
background: rgba(128, 89, 49, 0.12);
|
|
}
|
|
.ceremony-card text {
|
|
display: block;
|
|
}
|
|
.ceremony-card > view text:first-child {
|
|
color: $ink;
|
|
font-family: STKaiti, KaiTi, serif;
|
|
font-size: clamp(17px, 30rpx, 22px);
|
|
font-weight: 700;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.ceremony-card > view text:not(:first-child) {
|
|
margin-top: 7rpx;
|
|
color: $ink-muted;
|
|
font-size: clamp(13px, 21rpx, 16px);
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.ceremony-card__description {
|
|
display: -webkit-box !important;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
.ceremony-card > text {
|
|
flex: 0 0 auto;
|
|
color: $brand-red;
|
|
font-size: clamp(13px, 21rpx, 16px);
|
|
}
|
|
</style>
|