完成40%

pages/genealogy/g05-genealogy-overview.vue

@@ -31,16 +31,19 @@
             >
             <text class="overview-hero__title">{{ genealogy.name }}</text>
             <text class="overview-hero__motto">{{
-              genealogy.motto || "敦亲睦族，敬祖传家。"
+              genealogy.intro || "简介待补充"
             }}</text>
             <view class="overview-hero__stats">
               <text>共 {{ genealogy.memberCount || 0 }} 人</text>
-              <text>已激活 {{ genealogy.activeCount || 0 }} 人</text>
+              <text v-if="genealogy.personCount !== null"
+                >世系 {{ genealogy.personCount }} 人</text
+              >
               <text>{{ getGenealogyAccessPresetLabel(genealogy.accessPreset) }}</text>
             </view>
             <view class="overview-hero__stats">
-              <text>始祖 {{ genealogy.ancestorName }}</text>
-              <text>更新于 {{ genealogy.updatedAt }}</text>
+              <text v-if="genealogy.joinTime"
+                >加入于 {{ formatGenealogyTime(genealogy.joinTime) }}</text
+              >
             </view>
           </view>
 
@@ -194,11 +197,15 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import { onBackPress, onLoad } from "@dcloudio/uni-app";
+import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
 import AppLoading from "@/components/AppLoading.vue";
 import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-import { findGenealogyFixture, getGenealogyFixtureAccess } from "@/data/mock.js";
+import {
+  appApi,
+  createRequestController,
+  isRequestCancelled,
+} from "@/utils/api.js";
 import { getGenealogyAccessPresetLabel } from "@/utils/genealogy-contracts.js";
 import {
   goBack,
@@ -216,6 +223,10 @@ const viewMode = ref("member");
 const accessRole = ref("guest");
 const publicRelation = ref("unknown");
 const publicCanApply = ref(false);
+const overviewRequestController = createRequestController();
+let loadGeneration = 0;
+let pageActive = true;
+let skipNextShowRefresh = true;
 const publicActionLabel = computed(() => {
   if (publicRelation.value === "pending") return "查看申请进度";
   if (!publicCanApply.value) return "";
@@ -249,7 +260,12 @@ const stateCopy = computed(
     "",
 );
 
-const loadGenealogy = (query = {}) => {
+const formatGenealogyTime = (value) =>
+  typeof value === "string" && value.length >= 10 ? value.slice(0, 10) : value;
+
+const loadGenealogy = async (query = {}) => {
+  const generation = ++loadGeneration;
+  overviewRequestController.abort();
   overviewState.value = "loading";
   loadError.value = "";
   genealogy.value = null;
@@ -273,28 +289,47 @@ const loadGenealogy = (query = {}) => {
   }
   if (query.state === "loading") return;
 
-  const fixture = findGenealogyFixture(genealogyId.value);
-  if (!fixture) {
-    overviewState.value = "no-permission";
-    return;
+  try {
+    const result = await appApi.getOverview(genealogyId.value, {
+      requestController: overviewRequestController,
+    });
+    if (!pageActive || generation !== loadGeneration) return;
+    genealogy.value = result;
+    viewMode.value = "member";
+    accessRole.value = result.accessRole;
+    overviewState.value = "ready";
+  } catch (error) {
+    if (
+      !pageActive ||
+      generation !== loadGeneration ||
+      isRequestCancelled(error)
+    ) {
+      return;
+    }
+    if ([401, 403, 404].includes(error?.httpStatus)) {
+      overviewState.value = "no-permission";
+      return;
+    }
+    loadError.value = error?.message || "家谱概览读取失败，请稍后重试。";
+    overviewState.value = "error";
   }
-
-  const access = getGenealogyFixtureAccess(genealogyId.value);
-  if (!access.canView) {
-    overviewState.value = "no-permission";
-    return;
-  }
-  genealogy.value = { ...fixture };
-  viewMode.value = access.viewMode;
-  accessRole.value = access.accessRole;
-  publicRelation.value = access.relation;
-  publicCanApply.value = access.canApply;
-  overviewState.value = "ready";
 };
 
 const requestBack = () => goBack();
 onBackPress((event) => handleBackPress(event, requestBack));
 onLoad(loadGenealogy);
+onShow(() => {
+  if (skipNextShowRefresh) {
+    skipNextShowRefresh = false;
+    return;
+  }
+  if (genealogyId.value) loadGenealogy({ genealogyId: genealogyId.value });
+});
+onUnload(() => {
+  pageActive = false;
+  loadGeneration += 1;
+  overviewRequestController.abort();
+});
 const reloadOverview = () => loadGenealogy({ genealogyId: genealogyId.value });
 const toGenealogies = () => returnTo("G01", {});
 const toTree = () =>