jiapuapp/pages/records/r05-ritual-list.vue

<!-- 页面编号：R-05；用途：礼仪活动列表、状态与创建入口。 -->
<template>
  <view class="ritual-page" :class="stateClasses">
    <ModulePageBackground module="records" />
    <view class="page-header">
      <PageHeader title="礼仪活动" action="新建" @action="createRitual" />
    </view>
    <view v-if="ritualState === 'loading'" class="page-loading">
      <AppLoading
        text="正在整理礼仪活动"
        description="请稍候，正在读取时间与地点。"
      />
    </view>
    <view v-else class="page-content">
      <template v-if="ritualState === 'ready' && rituals.length">
        <view
          v-for="ritual in rituals"
          :key="ritual.id"
          class="record-card"
          @click="openRitual(ritual)"
        >
          <text>{{ ritual.status }}</text>
          <text>{{ ritual.name }}</text>
          <text>{{ ritual.date }} · {{ ritual.place }}</text>
          <text>查看活动详情</text>
        </view>
        <AppButton block label="新建礼仪" @click="createRitual" />
      </template>
      <view v-else class="state-card">
        <text>
          {{ ritualState === "error" ? "礼仪活动暂不可用" : "还没有礼仪活动" }}
        </text>
        <text>
          {{
            ritualState === "error"
              ? "请稍后重新查看，已有活动不会受到影响。"
              : "从一次祭祖、家宴或团拜开始安排。"
          }}
        </text>
        <AppButton
          :type="ritualState === 'error' ? 'secondary' : 'primary'"
          block
          :label="ritualState === 'error' ? '重新查看' : '新建礼仪'"
          @click="ritualState === 'error' ? restoreRituals() : createRitual()"
        />
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, ref } from "vue";
import { onLoad } 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";
const base = [
  {
    id: "501",
    name: "清明祭祖",
    status: "报名中",
    date: "2025 年 4 月 4 日",
    place: "汤氏宗祠",
  },
  {
    id: "502",
    name: "中秋家宴",
    status: "筹备中",
    date: "2025 年 9 月 17 日",
    place: "祖居院落",
  },
  {
    id: "503",
    name: "新春团拜",
    status: "已结束",
    date: "2025 年 1 月 29 日",
    place: "家族礼堂",
  },
];
const rituals = ref([...base]);
const ritualState = ref("loading");
const stateClasses = computed(() => ({
  "ritual-state--loading": ritualState.value === "loading",
  "ritual-state--empty": ritualState.value === "empty",
  "ritual-state--error": ritualState.value === "error",
}));
onLoad((q) => {
  const n = Math.max(1, Math.min(Number(q.count) || base.length, 50));
  rituals.value = Array.from({ length: n }, (_, i) => ({
    ...base[i % 3],
    id: String(501 + i),
    name: n > 3 ? `${base[i % 3].name}（${i + 1}）` : base[i].name,
  }));
  ritualState.value = ["loading", "empty", "error"].includes(q.state)
    ? q.state
    : "ready";
});
const openRitual = (r) =>
  uni.navigateTo({ url: `/pages/records/r06-ritual-detail?ritualId=${r.id}` });
const createRitual = () =>
  uni.navigateTo({ url: "/pages/records/r07-ritual-editor?mode=create" });
const restoreRituals = () => {
  ritualState.value = "ready";
};
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;

.ritual-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: $paper;
}
.page-header,
.page-loading,
.page-content {
  z-index: 1;
}
.page-loading {
  min-height: calc(100vh - 100rpx);
}
.page-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 18rpx 24rpx 72rpx;
}
.record-card,
.state-card {
  box-sizing: border-box;
  @include adaptive.adaptive-records-content;
}
.record-card {
  min-height: 190rpx;
  padding: 32rpx 46rpx;
}
.record-card > text,
.state-card > text {
  display: block;
}
.record-card > text:first-child {
  color: $brand-red;
  font-size: 21rpx;
}
.record-card > text:nth-child(2) {
  margin-top: 6rpx;
  color: $ink;
  font-size: 31rpx;
  font-weight: 700;
}
.record-card > text:nth-child(3) {
  margin-top: 9rpx;
  color: $ink-muted;
  font-size: 23rpx;
  line-height: 1.5;
}
.record-card > text:last-child {
  margin-top: 9rpx;
  color: $brand-red;
  font-size: 21rpx;
}
.state-card {
  min-height: 340rpx;
  padding: 78rpx 52rpx 50rpx;
  text-align: center;
}
.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>