feat(helpCenter): 帮助中心列表接入内容接口、问题详情页富文本渲染
This commit is contained in:
@@ -1,11 +1,14 @@
|
|||||||
.helpCenter {
|
.helpCenter {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
padding: 24rpx 32rpx;
|
padding: 24rpx 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #F5F7FB;
|
background-color: #F5F7FB;
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 48rpx;
|
margin-bottom: 48rpx;
|
||||||
@@ -28,12 +31,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
display: flex;
|
flex-shrink: 0;
|
||||||
gap: 20rpx;
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
flex: 1;
|
display: inline-block;
|
||||||
|
padding: 0 30rpx;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
line-height: 56rpx;
|
line-height: 56rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -41,6 +46,7 @@
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
color: #77849E;
|
color: #77849E;
|
||||||
|
margin-right: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab--active {
|
.tab--active {
|
||||||
@@ -50,6 +56,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
.question {
|
.question {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 112rpx;
|
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({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
tabs: [
|
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) {
|
onTapTab(e: WechatMiniprogram.TouchEvent) {
|
||||||
const index = e.currentTarget.dataset.index as number
|
const index = e.currentTarget.dataset.index as number
|
||||||
const tabs = this.data.tabs.map((t, i) => ({ ...t, active: i === index }))
|
const tabs = this.data.tabs.map((t, i) => ({ ...t, active: i === index }))
|
||||||
this.setData({ tabs })
|
this.setData({ tabs })
|
||||||
|
this.loadQuestions(tabs[index].categoryId)
|
||||||
},
|
},
|
||||||
|
|
||||||
onTapQuestion(e: WechatMiniprogram.TouchEvent) {
|
onTapQuestion(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const id = e.currentTarget.dataset.id as string
|
||||||
const title = e.currentTarget.dataset.title as string
|
const title = e.currentTarget.dataset.title as string
|
||||||
wx.navigateTo({
|
wx.navigateTo({
|
||||||
url: '/pages/questionDetails/questionDetails?title=' + encodeURIComponent(title)
|
url: '/pages/questionDetails/questionDetails?id=' + id + '&title=' + encodeURIComponent(title)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,18 +5,22 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="tabs">
|
<view class="tabs">
|
||||||
|
<scroll-view class="scrollView" scroll-x>
|
||||||
<block wx:for="{{ tabs }}" wx:key="name">
|
<block wx:for="{{ tabs }}" wx:key="name">
|
||||||
<view class="tab {{ item.active ? 'tab--active' : '' }}" bind:tap="onTapTab" data-index="{{ index }}">{{ item.name }}</view>
|
<view class="tab {{ item.active ? 'tab--active' : '' }}" bind:tap="onTapTab" data-index="{{ index }}">{{ item.name }}</view>
|
||||||
</block>
|
</block>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="list">
|
<view class="list">
|
||||||
|
<scroll-view class="scrollView" scroll-y>
|
||||||
<block wx:for="{{ questions }}" wx:key="id">
|
<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="dot"></view>
|
||||||
<view class="question-title">{{ item.title }}</view>
|
<view class="question-title">{{ item.title }}</view>
|
||||||
<view class="arrow"></view>
|
<view class="arrow"></view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -1,55 +1,19 @@
|
|||||||
.questionDetails {
|
.questionDetails {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
height: 100%;
|
||||||
padding: 24rpx 32rpx;
|
|
||||||
|
.scrollViewContent {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #F5F7FB;
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #FFFFFF;
|
padding: 30rpx;
|
||||||
border-radius: 24rpx;
|
|
||||||
padding: 0 40rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
border-radius: 24rpx;
|
||||||
.title {
|
background-color: #FFFFFF;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,34 @@
|
|||||||
// pages/questionDetails/questionDetails.ts
|
import { get } from '../../utils/request/index'
|
||||||
|
|
||||||
|
/** 内容详情 */
|
||||||
|
interface ContentDetail {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
content: string
|
||||||
|
}
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
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
|
||||||
}
|
}
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
<view class="questionDetails">
|
<view class="questionDetails">
|
||||||
|
<scroll-view scroll-y class="scrollView">
|
||||||
|
<view class="scrollViewContent">
|
||||||
<view class="card">
|
<view class="card">
|
||||||
<view class="title">{{ title }}</view>
|
<rich-text nodes="{{ content }}"></rich-text>
|
||||||
|
|
||||||
<block wx:for="{{ steps }}" wx:key="index">
|
|
||||||
<view class="step">
|
|
||||||
<view class="badge">{{ index + 1 }}</view>
|
|
||||||
<view class="step-text">{{ item }}</view>
|
|
||||||
</view>
|
</view>
|
||||||
</block>
|
|
||||||
</view>
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user