feat(helpCenter): 帮助中心列表接入内容接口、问题详情页富文本渲染
This commit is contained in:
17792275749
@@ -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;
|
||||
gap: 20rpx;
|
||||
flex-shrink: 0;
|
||||
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;
|
||||
|
||||
@@ -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: '连接配对', active: false },
|
||||
{ name: '使用测量', active: false },
|
||||
{ name: '数据管理', active: false }
|
||||
{ name: '全部', categoryId: '', active: true },
|
||||
{ name: '操作说明', categoryId: '1', active: false },
|
||||
{ name: '常见问题', categoryId: '2', active: false },
|
||||
{ name: '新手指引', categoryId: '3', active: false },
|
||||
{ name: '系统版本', categoryId: '4', active: false },
|
||||
{ name: '其他', categoryId: '5', active: false },
|
||||
],
|
||||
questions: [
|
||||
{ id: 1, title: '如何连接蓝牙设备？' },
|
||||
{ id: 2, title: '设备无法连接WiFi怎么办?' },
|
||||
{ id: 3, title: '如何添加和管理成员?' },
|
||||
{ id: 4, title: '测量数据不准确如何校准?' },
|
||||
{ id: 5, title: '数据补传功能如何使用?' },
|
||||
{ id: 6, title: '设备电量消耗过快?' }
|
||||
]
|
||||
questions: [] as QuestionItem[],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadQuestions('')
|
||||
},
|
||||
|
||||
/** 拉取内容列表（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)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,18 +5,22 @@
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<scroll-view class="scrollView" scroll-x>
|
||||
<block wx:for="{{ tabs }}" wx:key="name">
|
||||
<view class="tab {{ item.active ? 'tab--active' : '' }}" bind:tap="onTapTab" data-index="{{ index }}">{{ item.name }}</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<scroll-view class="scrollView" scroll-y>
|
||||
<block wx:for="{{ questions }}" wx:key="id">
|
||||
<view class="question" bind:tap="onTapQuestion" data-title="{{ item.title }}">
|
||||
<view class="question" bind:tap="onTapQuestion" data-id="{{ item.id }}" data-title="{{ item.title }}">
|
||||
<view class="dot"></view>
|
||||
<view class="question-title">{{ item.title }}</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,55 +1,19 @@
|
||||
.questionDetails {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 24rpx 32rpx;
|
||||
height: 100%;
|
||||
|
||||
.scrollViewContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #F5F7FB;
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 40rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
color: #1385FA;
|
||||
height: 36rpx;
|
||||
font-size: 36rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 40rpx 0;
|
||||
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;
|
||||
}
|
||||
border-radius: 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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: '如何连接蓝牙设备',
|
||||
steps: [
|
||||
'进入"设备"页面，点击设备的"成员管理"按钮；',
|
||||
'点击"添加新成员"进入添加页面；',
|
||||
'选择用户类型（员工/家庭成员）；',
|
||||
'填写成员信息后保存；',
|
||||
'在设备连接状态下，点击"同步成员至设备"将用户信息同步到设备。'
|
||||
]
|
||||
content: '',
|
||||
},
|
||||
|
||||
onLoad(options: { title?: string }) {
|
||||
if (options.title) {
|
||||
this.setData({ title: options.title })
|
||||
}
|
||||
onLoad(options: { id?: string }) {
|
||||
if (options.id) {
|
||||
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
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
<view class="questionDetails">
|
||||
<scroll-view scroll-y class="scrollView">
|
||||
<view class="scrollViewContent">
|
||||
<view class="card">
|
||||
<view class="title">{{ title }}</view>
|
||||
|
||||
<block wx:for="{{ steps }}" wx:key="index">
|
||||
<view class="step">
|
||||
<view class="badge">{{ index + 1 }}</view>
|
||||
<view class="step-text">{{ item }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<rich-text nodes="{{ content }}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user