feat(helpCenter): 帮助中心列表接入内容接口、问题详情页富文本渲染

miniprogram/pages/helpCenter/helpCenter.less

@@ -1,11 +1,14 @@
 .helpCenter {
     width: 100%;
-    min-height: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
     padding: 24rpx 32rpx;
     box-sizing: border-box;
     background-color: #F5F7FB;
 
     .search {
+        flex-shrink: 0;
         display: flex;
         flex-direction: column;
         margin-bottom: 48rpx;
@@ -28,12 +31,14 @@
     }
 
     .tabs {
-        display: flex;
+        flex-shrink: 0;
-        gap: 20rpx;
+        width: 100%;
+        white-space: nowrap;
         margin-bottom: 24rpx;
 
         .tab {
-            flex: 1;
+            display: inline-block;
+            padding: 0 30rpx;
             height: 56rpx;
             line-height: 56rpx;
             text-align: center;
@@ -41,6 +46,7 @@
             font-size: 24rpx;
             background-color: #FFFFFF;
             color: #77849E;
+            margin-right: 20rpx;
         }
 
         .tab--active {
@@ -50,6 +56,9 @@
     }
 
     .list {
+        flex: 1;
+        min-height: 0;
+
         .question {
             width: 100%;
             height: 112rpx;

miniprogram/pages/helpCenter/helpCenter.ts

@@ -1,32 +1,64 @@
-// pages/helpCenter/helpCenter.ts
+import { get } from '../../utils/request/index'
+
+/** 展示用问题项 */
+interface QuestionItem {
+    id: string
+    title: string
+}
+
+/** 内容列表项 */
+interface ContentRecord {
+    id: string
+    title: string
+}
+
 Page({
     data: {
         tabs: [
-            { name: '全部', active: true },
+            { name: '全部', categoryId: '', active: true },
-            { name: '连接配对', active: false },
+            { name: '操作说明', categoryId: '1', active: false },
-            { name: '使用测量', active: false },
+            { name: '常见问题', categoryId: '2', active: false },
-            { name: '数据管理', active: false }
+            { name: '新手指引', categoryId: '3', active: false },
+            { name: '系统版本', categoryId: '4', active: false },
+            { name: '其他', categoryId: '5', active: false },
         ],
-        questions: [
+        questions: [] as QuestionItem[],
-            { id: 1, title: '如何连接蓝牙设备？' },
+    },
-            { id: 2, title: '设备无法连接WiFi怎么办?' },
+
-            { id: 3, title: '如何添加和管理成员?' },
+    onLoad() {
-            { id: 4, title: '测量数据不准确如何校准?' },
+        this.loadQuestions('')
-            { id: 5, title: '数据补传功能如何使用?' },
+    },
-            { id: 6, title: '设备电量消耗过快?' }
+
-        ]
+    /** 拉取内容列表（categoryId 为空查全部） */
+    async loadQuestions(categoryId: string) {
+        try {
+            const res = await get<{ records: ContentRecord[] }>(
+                'weighingScale/v6/content/list',
+                categoryId ? { categoryId } : undefined,
+            )
+            this.setData({
+                questions: res.result.records.map(item => ({
+                    id: item.id,
+                    title: item.title,
+                })),
+            })
+        } catch {
+            // 请求失败已由 request 层统一 toast
+        }
     },
 
     onTapTab(e: WechatMiniprogram.TouchEvent) {
         const index = e.currentTarget.dataset.index as number
         const tabs = this.data.tabs.map((t, i) => ({ ...t, active: i === index }))
         this.setData({ tabs })
+        this.loadQuestions(tabs[index].categoryId)
     },
 
     onTapQuestion(e: WechatMiniprogram.TouchEvent) {
+        const id = e.currentTarget.dataset.id as string
         const title = e.currentTarget.dataset.title as string
         wx.navigateTo({
-            url: '/pages/questionDetails/questionDetails?title=' + encodeURIComponent(title)
+            url: '/pages/questionDetails/questionDetails?id=' + id + '&title=' + encodeURIComponent(title)
         })
     }
 })

miniprogram/pages/helpCenter/helpCenter.wxml

@@ -5,18 +5,22 @@
     </view>
 
     <view class="tabs">
-        <block wx:for="{{ tabs }}" wx:key="name">
+        <scroll-view class="scrollView" scroll-x>
-            <view class="tab {{ item.active ? 'tab--active' : '' }}" bind:tap="onTapTab" data-index="{{ index }}">{{ item.name }}</view>
+            <block wx:for="{{ tabs }}" wx:key="name">
-        </block>
+                <view class="tab {{ item.active ? 'tab--active' : '' }}" bind:tap="onTapTab" data-index="{{ index }}">{{ item.name }}</view>
+            </block>
+        </scroll-view>
     </view>
 
     <view class="list">
-        <block wx:for="{{ questions }}" wx:key="id">
+        <scroll-view class="scrollView" scroll-y>
-            <view class="question" bind:tap="onTapQuestion" data-title="{{ item.title }}">
+            <block wx:for="{{ questions }}" wx:key="id">
-                <view class="dot"></view>
+                <view class="question" bind:tap="onTapQuestion" data-id="{{ item.id }}" data-title="{{ item.title }}">
-                <view class="question-title">{{ item.title }}</view>
+                    <view class="dot"></view>
-                <view class="arrow"></view>
+                    <view class="question-title">{{ item.title }}</view>
-            </view>
+                    <view class="arrow"></view>
-        </block>
+                </view>
+            </block>
+        </scroll-view>
     </view>
 </view>

miniprogram/pages/questionDetails/questionDetails.less

@@ -1,55 +1,19 @@
 .questionDetails {
     width: 100%;
-    min-height: 100%;
+    height: 100%;
-    padding: 24rpx 32rpx;
-    box-sizing: border-box;
-    background-color: #F5F7FB;
 
-    .card {
+    .scrollViewContent {
         width: 100%;
-        background-color: #FFFFFF;
+        height: 100%;
-        border-radius: 24rpx;
+        padding: 24rpx 30rpx;
-        padding: 0 40rpx;
         box-sizing: border-box;
 
-        .title {
+        .card {
-            color: #1385FA;
+            width: 100%;
-            height: 36rpx;
+            padding: 30rpx;
-            font-size: 36rpx;
+            box-sizing: border-box;
-            line-height: 36rpx;
+            border-radius: 24rpx;
-            padding: 40rpx 0;
+            background-color: #FFFFFF;
-            border-bottom: 2rpx solid #EAECF1;
-        }
-
-        .step {
-            display: flex;
-            align-items: flex-start;
-            padding: 32rpx 0;
-            border-bottom: 2rpx solid #EAECF1;
-
-            &:last-of-type {
-                border-bottom: none;
-            }
-
-            .badge {
-                width: 36rpx;
-                height: 36rpx;
-                border-radius: 50%;
-                background-color: #1385FA;
-                color: #FFFFFF;
-                font-size: 24rpx;
-                line-height: 36rpx;
-                text-align: center;
-                flex-shrink: 0;
-                margin-right: 20rpx;
-            }
-
-            .step-text {
-                flex: 1;
-                color: #252535;
-                font-size: 26rpx;
-                line-height: 26rpx;
-            }
         }
     }
 }

miniprogram/pages/questionDetails/questionDetails.ts

@@ -1,19 +1,34 @@
-// pages/questionDetails/questionDetails.ts
+import { get } from '../../utils/request/index'
+
+/** 内容详情 */
+interface ContentDetail {
+    id: string
+    title: string
+    content: string
+}
+
 Page({
     data: {
-        title: '如何连接蓝牙设备',
+        content: '',
-        steps: [
-            '进入"设备"页面，点击设备的"成员管理"按钮；',
-            '点击"添加新成员"进入添加页面；',
-            '选择用户类型（员工/家庭成员）；',
-            '填写成员信息后保存；',
-            '在设备连接状态下，点击"同步成员至设备"将用户信息同步到设备。'
-        ]
     },
 
-    onLoad(options: { title?: string }) {
+    onLoad(options: { id?: string }) {
-        if (options.title) {
+        if (options.id) {
-            this.setData({ title: options.title })
+            this.loadDetail(options.id)
         }
-    }
+    },
+
+    async loadDetail(id: string) {
+        try {
+            const res = await get<ContentDetail>('weighingScale/v6/content/detail', { id })
+            wx.setNavigationBarTitle({
+                title: res.result.title
+            })
+            this.setData({
+                content: res.result.content,
+            })
+        } catch {
+            // 请求失败已由 request 层统一 toast
+        }
+    },
 })

miniprogram/pages/questionDetails/questionDetails.wxml

@@ -1,12 +1,9 @@
 <view class="questionDetails">
-    <view class="card">
+    <scroll-view scroll-y class="scrollView">
-        <view class="title">{{ title }}</view>
+        <view class="scrollViewContent">
-
+            <view class="card">
-        <block wx:for="{{ steps }}" wx:key="index">
+                <rich-text nodes="{{ content }}"></rich-text>
-            <view class="step">
-                <view class="badge">{{ index + 1 }}</view>
-                <view class="step-text">{{ item }}</view>
             </view>
-        </block>
+        </view>
-    </view>
+    </scroll-view>
 </view>