60%

pages/profile/m06-help-center.vue

@@ -4,9 +4,9 @@
     <ModulePageBackground module="profile" />
     <view class="page-layer"><PageHeader title="帮助中心" /></view>
     <view class="page-content page-layer">
-      <text class="help-source-note">当前展示的是本地使用说明，不代表已读取服务端帮助文章；需要最新支持请提交意见反馈。</text>
+      <text class="help-source-note">{{ sourceNote }}</text>
       <view class="search-box"><input v-model.trim="keyword" aria-label="搜索帮助" placeholder="搜索问题关键词" /><text>{{ filteredQuestions.length }} 条</text></view>
-      <scroll-view scroll-x class="category-scroll" :show-scrollbar="false"><view class="category-row"><view v-for="category in helpCategories" :key="category" class="category-chip" :class="{ active: activeCategory === category }" role="button" @click="activeCategory = category">{{ category }}</view></view></scroll-view>
+      <scroll-view scroll-x class="category-scroll" :show-scrollbar="false"><view class="category-row"><view v-for="category in helpCategories" :key="category.value" class="category-chip" :class="{ active: activeCategory === category.value }" role="button" @click="activeCategory = category.value">{{ category.label }}</view></view></scroll-view>
       <view v-if="filteredQuestions.length" class="question-list">
         <view v-for="item in filteredQuestions" :key="item.id" class="question-card">
           <view class="question-heading" role="button" :aria-label="item.question" @click="toggleQuestion(item.id)"><text>{{ item.question }}</text><text>{{ expandedIds.includes(item.id) ? "收起" : "查看" }}</text></view>
@@ -21,28 +21,53 @@
 
 <script setup>
 import { computed, ref } from "vue";
+import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
 import { openPage } from "@/utils/navigation.js";
 
-const helpCategories = ["全部", "家谱", "成员", "隐私", "账号"];
-const activeCategory = ref("全部");
+const questions = ref([]);
+const helpState = ref("loading");
+const controller = createRequestController();
+let active = true;
+const categoryLabels = Object.freeze({ common: "常见问题", member: "成员管理", lineage: "世系关系" });
+const helpCategories = computed(() => [
+  { value: "", label: "全部" },
+  ...[...new Set(questions.value.map((item) => item.category).filter(Boolean))].map((value) => ({ value, label: categoryLabels[value.toLowerCase()] || value })),
+]);
+const activeCategory = ref("");
 const keyword = ref("");
 const expandedIds = ref([]);
-const questions = [
-  { id: 1, category: "家谱", question: "如何创建一部新家谱？", answer: "进入“我的家谱”，选择新建家谱，按步骤填写姓氏、堂号和地区等基础资料。" },
-  { id: 2, category: "成员", question: "如何邀请家人共同完善家谱？", answer: "家人可搜索家谱后提交加入申请，由管理员核实关系；邀请码尚未接入，未来校验成功后将直接加入，不产生审核记录。" },
-  { id: 3, category: "隐私", question: "哪些个人资料会展示给其他成员？", answer: "资料按家谱角色与权限展示；敏感联系方式默认脱敏，后续可在家谱设置中管理权限。" },
-  { id: 4, category: "账号", question: "忘记密码后怎样恢复账号？", answer: "在登录页选择“忘记密码”，通过绑定手机号验证后设置新密码。" },
-  { id: 5, category: "家谱", question: "家谱资料填写错了怎么办？", answer: "有编辑权限的成员可以进入对应资料页修改；关键世系关系建议核对后再保存。" },
-];
+const sourceNote = computed(() => ({ loading: "正在读取帮助文章…", error: "帮助文章暂时无法读取，请稍后重试。", empty: "暂未收到可展示的帮助文章。", ready: "帮助内容来自服务端，可按分类或关键词查找。" })[helpState.value]);
 const filteredQuestions = computed(() => {
   const query = keyword.value.toLowerCase();
-  return questions.filter((item) => (activeCategory.value === "全部" || item.category === activeCategory.value) && (!query || `${item.question}${item.answer}`.toLowerCase().includes(query)));
+  return questions.value.filter((item) => (!activeCategory.value || item.category === activeCategory.value) && (!query || `${item.question}${item.answer}`.toLowerCase().includes(query)));
 });
 const toggleQuestion = (id) => { expandedIds.value = expandedIds.value.includes(id) ? expandedIds.value.filter((item) => item !== id) : [...expandedIds.value, id]; };
 const contactSupport = () => openPage("M07", {}, "M06");
+const loadHelpArticles = async () => {
+  controller.abort();
+  helpState.value = "loading";
+  try {
+    const rows = await appApi.getHelpArticles({ requestController: controller });
+    if (!active) return;
+    questions.value = rows.map((item) => ({
+      id: String(item.helpId),
+      category: String(item.helpCategory || "其他"),
+      question: String(item.helpTitle || "未命名帮助文章"),
+      answer: String(item.helpContent || "暂无正文")
+    }));
+    helpState.value = questions.value.length ? "ready" : "empty";
+  } catch (error) {
+    if (!active || isRequestCancelled(error)) return;
+    helpState.value = "error";
+  }
+};
+onLoad(loadHelpArticles);
+onShow(() => { if (helpState.value !== "loading") loadHelpArticles(); });
+onUnload(() => { active = false; controller.abort(); });
 </script>
 
 <style scoped lang="scss">