完成50%

pages/tree/t07-member-directory.vue

@@ -11,7 +11,7 @@
   >
     <ModulePageBackground module="tree" />
     <view class="directory-page__header"><PageHeader title="成员目录" /></view>
-    <view class="directory-context">
+    <view v-if="hasValidContext" class="directory-context">
       <text class="directory-context__name">汤氏家谱</text>
       <text class="directory-context__meta"
         >主支 · {{ members.length }} 位成员</text
@@ -24,7 +24,7 @@
       <input
         v-model="keyword"
         aria-label="成员搜索关键词"
-        placeholder="按姓名、字辈或支系查找"
+        placeholder="按姓名、身份或世代查找"
         placeholder-class="directory-placeholder"
         @confirm="searchMembers"
       />
@@ -56,11 +56,8 @@
         >
           <view class="directory-card__copy">
             <text class="directory-card__name">{{ item.name }}</text>
-            <text class="directory-card__meta"
-              >第 {{ item.generation }} 世 · {{ item.generationName }} ·
-              {{ item.branch }}</text
-            >
-            <text class="directory-card__status">{{ item.note }}</text>
+            <text class="directory-card__meta">{{ memberMeta(item) }}</text>
+            <text class="directory-card__status">{{ memberStatus(item) }}</text>
           </view>
         </view>
       </template>
@@ -71,7 +68,7 @@
           }}</text
           ><text>{{
             directoryState === "empty"
-              ? "换一个姓名、字辈或支系关键词再试。"
+              ? "换一个姓名、身份或世代关键词再试。"
               : "请从当前家谱重新进入，成员资料不会受到影响。"
           }}</text></view
         >
@@ -80,7 +77,7 @@
         v-if="directoryState === 'error'"
         block
         type="secondary"
-        label="重新查看"
+        :label="hasValidContext ? '重新查看' : '返回上一页'"
         @click="retryDirectory"
       />
     </view>
@@ -93,63 +90,56 @@ import AppButton from "@/components/AppButton.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import { listTreeMemberPresentationFixtures } from "@/data/mock.js";
+import { goBack, openPage } from "@/utils/navigation.js";
 const genealogyId = ref("");
 const keyword = ref("");
 const directoryState = ref("loading");
-const members = [
-  {
-    id: 101,
-    name: "汤文远",
-    generation: 12,
-    generationName: "文字辈",
-    branch: "主支",
-    note: "始祖 · 档案完整",
-  },
-  {
-    id: 102,
-    name: "汤正国",
-    generation: 13,
-    generationName: "正字辈",
-    branch: "长房",
-    note: "家谱管理员",
-  },
-  {
-    id: 103,
-    name: "汤正华",
-    generation: 13,
-    generationName: "正字辈",
-    branch: "二房",
-    note: "资料待补充",
-  },
-];
+const hasValidContext = computed(() => Boolean(genealogyId.value));
+const members = computed(() => listTreeMemberPresentationFixtures(genealogyId.value));
+const isRestrictedMember = (member) =>
+  ["privacy", "forbidden"].includes(member.status);
+const memberMeta = (member) =>
+  isRestrictedMember(member)
+    ? `第 ${member.generation} 世 · ${member.relation}`
+    : `第 ${member.generation} 世 · ${member.generationName} · ${member.branch}`;
+const memberStatus = (member) =>
+  isRestrictedMember(member)
+    ? member.status === "forbidden"
+      ? "访问受限"
+      : "隐私资料"
+    : member.note;
 const filteredMembers = computed(() => {
   const value = keyword.value.trim();
-  if (!value) return members;
-  return members.filter((item) =>
-    `${item.name}${item.generationName}${item.branch}`.includes(value),
+  if (!value) return members.value;
+  return members.value.filter((item) =>
+    `${item.name}${item.relation}${item.generation}${item.generationName || ""}${item.branch || ""}`.includes(value),
   );
 });
 onLoad((query) => {
-  genealogyId.value = query.genealogyId || "";
+  genealogyId.value = String(query.genealogyId || "");
   directoryState.value =
-    query.state === "loading"
+    !hasValidContext.value ? "error" : query.state === "loading"
       ? "loading"
       : query.state === "empty"
         ? "empty"
         : query.state === "error"
           ? "error"
-          : "list";
+          : members.value.length
+            ? "list"
+            : "empty";
 });
 const searchMembers = () => {
   directoryState.value = filteredMembers.value.length ? "list" : "empty";
 };
 const retryDirectory = () => {
+  if (!hasValidContext.value) return goBack();
   directoryState.value = "list";
 };
 const openMember = (item) =>
-  uni.navigateTo({
-    url: `/pages/tree/t03-member-profile?genealogyId=${genealogyId.value}&personId=${item.id}`,
-  });
+  hasValidContext.value
+    ? openPage("T03", { genealogyId: genealogyId.value, personId: String(item.id) }, "T07")
+    : Promise.resolve(false);
 </script>
 <style scoped lang="scss">
 @use "../../styles/adaptive-frame-profiles.scss" as adaptive;