feat(my): 新增个人信息、帮助中心、问题详情页面并接入导航
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
cd11d711d5
commit
3a67b26ed6
@@ -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>
|
||||
@@ -15,6 +15,14 @@ Page({
|
||||
|
||||
},
|
||||
|
||||
onTapPersonalInfo() {
|
||||
wx.navigateTo({ url: '/pages/personalInformation/personalInformation' })
|
||||
},
|
||||
|
||||
onTapHelpCenter() {
|
||||
wx.navigateTo({ url: '/pages/helpCenter/helpCenter' })
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user