feat(my): 新增个人信息、帮助中心、问题详情页面并接入导航

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-08-19 09:53:56 +08:00
co-authored by Claude Opus 4.7
parent cd11d711d5
commit 3a67b26ed6
15 changed files with 404 additions and 3 deletions
+4 -1
View File
@@ -7,7 +7,10 @@
"pages/connectedWifi/connectedWifi",
"pages/home/home",
"pages/equipment/equipment",
"pages/my/my"
"pages/my/my",
"pages/personalInformation/personalInformation",
"pages/helpCenter/helpCenter",
"pages/questionDetails/questionDetails"
],
"usingComponents": {
"empty-data": "/components/emptyData/emptyData"
@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "帮助中心",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF"
}
@@ -0,0 +1,92 @@
.helpCenter {
width: 100%;
min-height: 100%;
padding: 24rpx 32rpx;
box-sizing: border-box;
background-color: #F5F7FB;
.search {
display: flex;
flex-direction: column;
margin-bottom: 48rpx;
.search-title {
color: #394356;
height: 40rpx;
font-size: 40rpx;
font-weight: bolder;
line-height: 40rpx;
}
.search-sub {
color: #394356;
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
margin-top: 24rpx;
}
}
.tabs {
display: flex;
gap: 20rpx;
margin-bottom: 24rpx;
.tab {
flex: 1;
height: 56rpx;
line-height: 56rpx;
text-align: center;
border-radius: 48rpx;
font-size: 24rpx;
background-color: #FFFFFF;
color: #77849E;
}
.tab--active {
background-color: #1385FA;
color: #FFFFFF;
}
}
.list {
.question {
width: 100%;
height: 112rpx;
display: flex;
align-items: center;
background-color: #FFFFFF;
border-radius: 24rpx;
padding: 0 32rpx;
box-sizing: border-box;
margin-bottom: 24rpx;
.dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #1385FA;
margin-right: 12rpx;
flex-shrink: 0;
}
.question-title {
flex: 1;
color: #394356;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
}
.arrow {
width: 20rpx;
height: 18rpx;
flex-shrink: 0;
&::after {
right: 4rpx;
}
}
}
}
}
@@ -0,0 +1,32 @@
// pages/helpCenter/helpCenter.ts
Page({
data: {
tabs: [
{ name: '全部', active: true },
{ name: '连接配对', active: false },
{ name: '使用测量', active: false },
{ name: '数据管理', active: false }
],
questions: [
{ id: 1, title: '如何连接蓝牙设备?' },
{ id: 2, title: '设备无法连接WiFi怎么办?' },
{ id: 3, title: '如何添加和管理成员?' },
{ id: 4, title: '测量数据不准确如何校准?' },
{ id: 5, title: '数据补传功能如何使用?' },
{ id: 6, title: '设备电量消耗过快?' }
]
},
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 })
},
onTapQuestion(e: WechatMiniprogram.TouchEvent) {
const title = e.currentTarget.dataset.title as string
wx.navigateTo({
url: '/pages/questionDetails/questionDetails?title=' + encodeURIComponent(title)
})
}
})
@@ -0,0 +1,22 @@
<view class="helpCenter">
<view class="search">
<view class="search-title">您遇到了什么问题?</view>
<view class="search-sub">根据下方分类快速排查设备状态...</view>
</view>
<view class="tabs">
<block wx:for="{{ tabs }}" wx:key="name">
<view class="tab {{ item.active ? 'tab--active' : '' }}" bind:tap="onTapTab" data-index="{{ index }}">{{ item.name }}</view>
</block>
</view>
<view class="list">
<block wx:for="{{ questions }}" wx:key="id">
<view class="question" bind:tap="onTapQuestion" data-title="{{ item.title }}">
<view class="dot"></view>
<view class="question-title">{{ item.title }}</view>
<view class="arrow"></view>
</view>
</block>
</view>
</view>
+8
View File
@@ -15,6 +15,14 @@ Page({
},
onTapPersonalInfo() {
wx.navigateTo({ url: '/pages/personalInformation/personalInformation' })
},
onTapHelpCenter() {
wx.navigateTo({ url: '/pages/helpCenter/helpCenter' })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
+2 -2
View File
@@ -19,14 +19,14 @@
<view class="page-container">
<view class="list">
<view class="list-item">
<view class="list-item" bind:tap="onTapPersonalInfo">
<view>
<image src="/images/my/individual.png" mode="aspectFit" />
</view>
<view>个人信息</view>
<view class="arrow"></view>
</view>
<view class="list-item">
<view class="list-item" bind:tap="onTapHelpCenter">
<view>
<image src="/images/my/help.png" mode="aspectFit" />
</view>
@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "个人信息",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF"
}
@@ -0,0 +1,74 @@
.personalInformation {
width: 100%;
height: 100%;
padding: 24rpx 32rpx;
box-sizing: border-box;
background-color: #F5F7FB;
.card {
width: 100%;
background-color: #FFFFFF;
border-radius: 24rpx;
padding: 0 32rpx;
box-sizing: border-box;
.row {
width: 100%;
height: 114rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #EAECF1;
&:last-of-type {
border-bottom: none;
}
.label {
color: #394356;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
}
.value {
color: #394356;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
display: flex;
align-items: center;
}
}
.row-avatar {
height: 112rpx;
.value {
height: 88rpx;
}
.avatar {
width: 88rpx;
height: 88rpx;
border-radius: 16rpx;
background-color: #1385FA;
color: #FFFFFF;
font-size: 40rpx;
line-height: 88rpx;
text-align: center;
}
.arrow {
width: 20rpx;
height: 18rpx;
margin-left: 20rpx;
flex-shrink: 0;
&::after {
right: 4rpx;
}
}
}
}
}
@@ -0,0 +1,15 @@
// pages/personalInformation/personalInformation.ts
Page({
data: {
userInfo: {
name: '狗蛋',
idCard: '4301**********1234',
gender: '男',
age: '45岁',
company: '健康科技公司',
department: '技术部-研发组',
height: '175cm',
weight: '72kg'
}
}
})
@@ -0,0 +1,51 @@
<view class="personalInformation">
<view class="card">
<view class="row row-avatar">
<view class="label">头像</view>
<view class="value">
<view class="avatar">狗</view>
<view class="arrow"></view>
</view>
</view>
<view class="row">
<view class="label">名字</view>
<view class="value">{{ userInfo.name }}</view>
</view>
<view class="row">
<view class="label">身份证</view>
<view class="value">{{ userInfo.idCard }}</view>
</view>
<view class="row">
<view class="label">性别</view>
<view class="value">{{ userInfo.gender }}</view>
</view>
<view class="row">
<view class="label">年龄</view>
<view class="value">{{ userInfo.age }}</view>
</view>
<view class="row">
<view class="label">单位</view>
<view class="value">{{ userInfo.company }}</view>
</view>
<view class="row">
<view class="label">部门</view>
<view class="value">{{ userInfo.department }}</view>
</view>
<view class="row">
<view class="label">身高</view>
<view class="value">{{ userInfo.height }}</view>
</view>
<view class="row">
<view class="label">体重</view>
<view class="value">{{ userInfo.weight }}</view>
</view>
</view>
</view>
@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "问题详情",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF"
}
@@ -0,0 +1,55 @@
.questionDetails {
width: 100%;
min-height: 100%;
padding: 24rpx 32rpx;
box-sizing: border-box;
background-color: #F5F7FB;
.card {
width: 100%;
background-color: #FFFFFF;
border-radius: 24rpx;
padding: 0 40rpx;
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;
}
}
}
}
@@ -0,0 +1,19 @@
// pages/questionDetails/questionDetails.ts
Page({
data: {
title: '如何连接蓝牙设备',
steps: [
'进入"设备"页面,点击设备的"成员管理"按钮;',
'点击"添加新成员"进入添加页面;',
'选择用户类型(员工/家庭成员);',
'填写成员信息后保存;',
'在设备连接状态下,点击"同步成员至设备"将用户信息同步到设备。'
]
},
onLoad(options: { title?: string }) {
if (options.title) {
this.setData({ title: options.title })
}
}
})
@@ -0,0 +1,12 @@
<view class="questionDetails">
<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>
</view>
</view>