first

user-app/src/pages/help/detail.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { appApi, type HelpArticleDetailData } from "../../api/app";
+import { helpArticleDetailFallback } from "../../mocks/app";
+import { resolveErrorMessage } from "../../utils/feedback";
+
+const detail = ref<HelpArticleDetailData>(helpArticleDetailFallback);
+const articleId = ref(0);
+const loading = ref(false);
+const pageReady = ref(false);
+const loadError = ref("");
+
+function openArticle(id: number) {
+  uni.redirectTo({ url: `/pages/help/detail?id=${id}` });
+}
+
+function contactSupport() {
+  uni.navigateTo({ url: "/pages/support/index" });
+}
+
+onLoad(async (options) => {
+  articleId.value = Number(options?.id || 0);
+  if (!articleId.value) {
+    loadError.value = "缺少文章编号，无法查看内容。";
+    return;
+  }
+
+  loading.value = true;
+  try {
+    detail.value = await appApi.getHelpArticleDetail(articleId.value);
+    pageReady.value = true;
+  } catch (error) {
+    console.warn("help article fallback", error);
+    loadError.value = resolveErrorMessage(error, "帮助文章加载失败，请稍后重试。");
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <view class="app-page app-page--tight">
+    <view v-if="!pageReady && loading" class="section notice-card">
+      <view class="notice-card__title">正在加载文章</view>
+      <view class="notice-card__desc">请稍候，我们正在同步文章正文与相关问题。</view>
+    </view>
+
+    <view v-else-if="!pageReady && loadError" class="section notice-card">
+      <view class="notice-card__title">帮助文章加载失败</view>
+      <view class="notice-card__desc">{{ loadError }}</view>
+    </view>
+
+    <template v-else>
+    <view class="section-card section-card--soft">
+      <view style="display: flex; align-items: center; gap: 12rpx; flex-wrap: wrap">
+        <text class="tag tag--accent">{{ detail.article.category_text }}</text>
+        <text v-if="detail.article.is_recommended" class="tag tag--warning">推荐阅读</text>
+        <text class="certificate-meta-chip">{{ detail.article.updated_at }}</text>
+      </view>
+      <view class="page-title" style="margin-top: 20rpx; font-size: var(--font-size-2xl); color: var(--color-heading);">
+        {{ detail.article.title }}
+      </view>
+      <view class="section__desc">{{ detail.article.summary }}</view>
+      <view class="chip-list">
+        <view v-for="item in detail.article.keywords" :key="item" class="choice-chip">
+          {{ item }}
+        </view>
+      </view>
+    </view>
+
+    <view class="section section-card section-card--soft">
+      <view class="section__title">详细说明</view>
+      <view
+        v-for="(item, index) in detail.article.content_blocks"
+        :key="`${detail.article.id}-${index}`"
+        class="report-meta__row report-meta__row--stacked"
+      >
+        <text class="report-meta__label">{{ index + 1 }}.</text>
+        <text class="report-meta__value">{{ item }}</text>
+      </view>
+    </view>
+
+    <view v-if="detail.related_articles.length" class="section">
+      <view class="section__heading">
+        <view>
+          <view class="section__title">相关问题</view>
+          <view class="section__desc">如果这个问题还没完全解决，可以继续看这些相关文章。</view>
+        </view>
+      </view>
+
+      <view
+        v-for="item in detail.related_articles"
+        :key="item.id"
+        class="section message-card"
+        @click="openArticle(item.id)"
+      >
+        <view class="message-card__top">
+          <view style="flex: 1">
+            <view style="display: flex; align-items: center; gap: 12rpx; flex-wrap: wrap">
+              <text class="message-card__title">{{ item.title }}</text>
+              <text class="tag tag--neutral">{{ item.category_text }}</text>
+            </view>
+          </view>
+          <text class="message-card__time">{{ item.updated_at }}</text>
+        </view>
+        <view class="message-card__content">{{ item.summary }}</view>
+      </view>
+    </view>
+
+    <view class="section section-note">
+      <view class="support-banner__title">还有疑问？</view>
+      <view class="support-banner__desc">如果帮助文章仍不能解决您的问题，可以直接联系客服发起工单，我们会尽快跟进。</view>
+      <view style="margin-top: 16rpx">
+        <text class="btn btn--ghost" @click="contactSupport">去客服支持</text>
+      </view>
+    </view>
+    </template>
+  </view>
+</template>