完成50%

pages/records/r06-ritual-detail.vue

@@ -1,129 +1,158 @@
-<!-- 页面编号：R-06；用途：礼仪详情、参与者与受控状态。 -->
+<!-- 页面编号：R-06；用途：当前家谱礼仪详情、受邀信息与受控状态。 -->
 <template>
   <view class="ritual-detail-page" :class="stateClasses">
     <ModulePageBackground module="records" />
     <view class="page-header">
       <PageHeader
         title="礼仪详情"
-        :action="ritualState === 'ready' ? '编辑' : ''"
-        @action="editRitual"
+        :action="ceremonyState === 'ready' ? '制作预览' : ''"
+        custom-back
+        @back="requestBack"
+        @action="editCeremony"
       />
     </view>
-    <view v-if="ritualState === 'loading'" class="page-loading">
+    <view v-if="ceremonyState === 'loading'" class="page-loading">
       <AppLoading
         text="正在读取礼仪详情"
-        description="请稍候，正在整理活动与参与信息。"
+        description="请稍候，正在核对活动身份与受邀信息。"
       />
     </view>
     <view v-else class="page-content">
-      <template v-if="ritualState === 'ready'">
+      <template v-if="ceremonyState === 'ready' && ceremonyDetail">
         <view class="detail-card">
-          <text>{{ ritualDetail.status }}</text>
-          <text>{{ ritualDetail.name }}</text>
-          <text>{{ ritualDetail.date }} · {{ ritualDetail.place }}</text>
-          <text>{{ ritualDetail.description }}</text>
+          <text>{{ ceremonyDetail.ceremonyType }}</text>
+          <text>{{ ceremonyDetail.ceremonyTitle }}</text>
+          <text>
+            {{ ceremonyDetail.ceremonyTime }} ·
+            {{ ceremonyDetail.location || "地点待定" }}
+          </text>
+          <text>{{ ceremonyDetail.ceremonyDesc || "暂无活动说明" }}</text>
         </view>
         <view class="participant-card">
           <view>
-            <text>参与家人</text>
-            <text>{{ participants.length }} 人</text>
+            <text>受邀家人</text>
+            <text>{{ invitees.length }} 人</text>
           </view>
-          <view v-for="person in participants" :key="person.id">
-            <text>{{ person.name }}</text>
-            <text>{{ person.role }}</text>
+          <view v-for="invitee in invitees" :key="invitee.inviteeUserId">
+            <text>{{ invitee.displayName }} · {{ invitee.relationName }}</text>
+            <text>{{ invitee.statusText }}</text>
           </view>
+          <view v-if="!invitees.length"><text>尚无受邀记录</text><text>—</text></view>
         </view>
-        <AppButton block label="编辑活动" @click="editRitual" />
+        <AppButton block label="制作编辑预览" @click="editCeremony" />
       </template>
       <view v-else class="state-card">
         <text>{{ stateCopy.title }}</text>
         <text>{{ stateCopy.copy }}</text>
         <AppButton
-          :type="ritualState === 'error' ? 'secondary' : 'primary'"
+          type="secondary"
           block
-          :label="ritualState === 'error' ? '重新查看' : '返回礼仪列表'"
-          @click="ritualState === 'error' ? restoreRitual() : backToRituals()"
+          :label="ceremonyState === 'error' ? '重新查看' : '返回礼仪列表'"
+          @click="ceremonyState === 'error' ? restoreCeremony() : returnToCeremonies()"
         />
       </view>
     </view>
   </view>
 </template>
 <script setup>
-import { computed, reactive, ref } from "vue";
+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 records = [
-  {
-    id: "501",
-    name: "清明祭祖",
-    status: "报名中",
-    date: "2025 年 4 月 4 日",
-    place: "汤氏宗祠",
-    description: "缅怀先祖，整理祭扫礼序，并由长辈讲述家族往事。",
-  },
-  {
-    id: "502",
-    name: "中秋家宴",
-    status: "筹备中",
-    date: "2025 年 9 月 17 日",
-    place: "祖居院落",
-    description: "家人团聚，共叙近况并整理年度家族影像。",
-  },
-];
-const ritualDetail = reactive({ ...records[0] });
-const ritualId = ref("501");
-const ritualState = ref("loading");
-const participants = ref([
-  { id: 1, name: "汤文正", role: "主理人" },
-  { id: 2, name: "汤淑华", role: "家族长辈" },
-  { id: 3, name: "汤文清", role: "影像记录" },
-]);
+import {
+  findCeremonyFixture,
+  getGenealogyFixtureAccess,
+  listTreeMemberPresentationFixtures,
+} from "@/data/mock.js";
+import { goBack, openPage, returnTo } from "@/utils/navigation.js";
+
+const genealogyId = ref("");
+const ceremonyId = ref("");
+const ceremonyDetail = ref(null);
+const memberOptions = ref([]);
+const ceremonyState = ref("loading");
+const invitees = computed(() => {
+  const memberByAppUserId = new Map(
+    memberOptions.value.map((member) => [String(member.appUserId), member]),
+  );
+  return (ceremonyDetail.value?.invitees || []).map((invitation) => {
+    const member = memberByAppUserId.get(String(invitation.inviteeUserId));
+    return {
+      inviteeUserId: String(invitation.inviteeUserId),
+      displayName: member?.name || "受邀成员信息不可用",
+      relationName: member?.relation || "未完成同谱成员联接",
+      statusText: invitation.inviteStatus
+        ? "受邀状态字典待后端确认"
+        : "受邀状态未提供",
+    };
+  });
+});
 const stateClasses = computed(() => ({
-  "ritual-state--expired": ritualState.value === "expired",
-  "ritual-state--privacy": ritualState.value === "privacy",
-  "ritual-state--error": ritualState.value === "error",
+  "ceremony-state--expired": ceremonyState.value === "expired",
+  "ceremony-state--error": ceremonyState.value === "error",
 }));
 const stateCopy = computed(
   () =>
     ({
       expired: {
         title: "活动已失效",
-        copy: "这项礼仪活动已取消或结束归档，请返回列表查看其他活动。",
-      },
-      privacy: {
-        title: "活动信息未公开",
-        copy: "当前活动只向受邀家人展示，请返回礼仪列表。",
+        copy: "活动不存在或不属于当前家谱，页面不会回退到其他活动。",
       },
       error: {
         title: "礼仪详情暂不可用",
         copy: "请稍后重新查看，已有活动不会受到影响。",
       },
-    })[ritualState.value] || {},
+    })[ceremonyState.value] || {
+      title: "礼仪详情暂不可用",
+      copy: "缺少家谱或活动身份，请返回列表重新选择。",
+    },
 );
-onLoad((q) => {
-  ritualId.value = String(q.ritualId || "501");
-  const selected = records.find((x) => x.id === ritualId.value);
-  if (selected) Object.assign(ritualDetail, selected);
-  ritualState.value = ["loading", "expired", "privacy", "error"].includes(
-    q.state,
-  )
-    ? q.state
-    : selected
-      ? "ready"
-      : "expired";
+onLoad((query) => {
+  genealogyId.value = String(query.genealogyId || "");
+  ceremonyId.value = String(query.ceremonyId || "");
+  if (query.state === "loading") return;
+  const access = getGenealogyFixtureAccess(genealogyId.value);
+  if (!["owner", "member"].includes(access.accessRole) || !ceremonyId.value) {
+    ceremonyState.value = "expired";
+    return;
+  }
+  memberOptions.value = listTreeMemberPresentationFixtures(genealogyId.value);
+  ceremonyDetail.value = findCeremonyFixture(
+    genealogyId.value,
+    ceremonyId.value,
+  );
+  if (!ceremonyDetail.value) {
+    ceremonyState.value = "expired";
+    return;
+  }
+  ceremonyState.value = query.state === "error" ? "error" : "ready";
 });
-const editRitual = () =>
-  uni.navigateTo({
-    url: `/pages/records/r07-ritual-editor?mode=edit&ritualId=${ritualId.value}`,
-  });
-const restoreRitual = () => {
-  ritualState.value = "ready";
+const editCeremony = () =>
+  ceremonyState.value === "ready" && ceremonyDetail.value
+    ? openPage(
+        "R07",
+        {
+          genealogyId: genealogyId.value,
+          mode: "edit",
+          ceremonyId: ceremonyId.value,
+        },
+        "R06",
+      )
+    : Promise.resolve(false);
+const restoreCeremony = () => {
+  ceremonyDetail.value = findCeremonyFixture(
+    genealogyId.value,
+    ceremonyId.value,
+  );
+  ceremonyState.value = ceremonyDetail.value ? "ready" : "expired";
 };
-const backToRituals = () =>
-  uni.redirectTo({ url: "/pages/records/r05-ritual-list" });
+const requestBack = () => goBack();
+const returnToCeremonies = () =>
+  genealogyId.value
+    ? returnTo("R05", { genealogyId: genealogyId.value })
+    : goBack();
 </script>
 <style scoped lang="scss">
 @use "../../styles/adaptive-frame-profiles.scss" as adaptive;