yuchunlei/bodyWeight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(navBar): 新增自定义导航栏组件，接入详细报告与我的页面

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
17792275749
2026-08-20 08:42:21 +08:00
co-authored by Claude Opus 4.7
parent 48ac39f0e0
commit f13edf31b7
16 changed files with 714 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/detailedReport/detailedReport.json
+6
View File
@@ -0,0 +1,6 @@
{
"usingComponents": {
"navBar": "/components/navBar/navBar"
},
"navigationStyle": "custom"
}
miniprogram/pages/detailedReport/detailedReport.less
+276
View File
@@ -0,0 +1,276 @@
.detailedReport {
width: 100%;
height: 100%;
//padding: 24rpx 32rpx;
//box-sizing: border-box;
//background-color: #F5F7FB;
.scrollViewContent {
width: 100%;
padding: 24rpx 32rpx;
box-sizing: border-box;
/* 顶部头部 */
.header {
width: 100%;
height: 360rpx;
border-radius: 24rpx;
background: linear-gradient(135deg, #C0E0FD 0%, #E2E9F9 100%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 40rpx;
box-sizing: border-box;
margin-bottom: 24rpx;
.header-slogan {
margin-bottom: 24rpx;
.slogan-title {
color: #1A3F68;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
}
.slogan-sub {
color: #446D99;
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
margin-top: 12rpx;
}
}
.header-date {
color: #FFFFFF;
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
}
.header-weight {
display: flex;
align-items: flex-end;
margin-top: 24rpx;
.weight-num {
color: #FFFFFF;
height: 120rpx;
font-size: 120rpx;
line-height: 120rpx;
}
.weight-unit {
color: #FFFFFF;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
margin: 0 0 24rpx 12rpx;
}
}
.header-info {
display: flex;
align-items: center;
margin-top: 16rpx;
.header-bmi {
color: #FFFFFF;
height: 22rpx;
font-size: 22rpx;
line-height: 22rpx;
margin-right: 24rpx;
}
.header-change {
color: #FFFFFF;
height: 22rpx;
font-size: 22rpx;
line-height: 22rpx;
}
}
}
/* 卡片 */
.card {
width: 100%;
padding: 32rpx;
border-radius: 24rpx;
background-color: #FFFFFF;
box-sizing: border-box;
margin-bottom: 24rpx;
.card-title {
display: flex;
align-items: center;
margin-bottom: 24rpx;
.title-bar {
width: 6rpx;
height: 20rpx;
border-radius: 4rpx;
background-color: #1385FA;
margin-right: 16rpx;
}
.title-text {
color: #252535;
height: 32rpx;
font-size: 32rpx;
line-height: 32rpx;
}
}
/* 基础指标 2x2 */
.basic-grid {
display: flex;
flex-wrap: wrap;
.basic-item {
width: 50%;
box-sizing: border-box;
padding: 24rpx 0;
.basic-label {
color: #808080;
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
margin-bottom: 16rpx;
}
.basic-value-row {
display: flex;
align-items: flex-end;
.basic-value {
color: #252535;
height: 48rpx;
font-size: 48rpx;
line-height: 48rpx;
}
.basic-unit {
color: #252535;
height: 26rpx;
font-size: 26rpx;
line-height: 26rpx;
margin: 0 0 6rpx 8rpx;
}
.basic-tag {
height: 30rpx;
padding: 0 10rpx;
font-size: 18rpx;
line-height: 30rpx;
border-radius: 8rpx;
color: #FFFFFF;
background-color: #2AC79F;
margin: 0 0 6rpx 12rpx;
}
}
}
}
/* BMI 刻度 */
.bmi-scale {
margin-top: 24rpx;
.scale-track {
display: flex;
height: 20rpx;
border-radius: 6rpx;
overflow: hidden;
.scale-block {
flex: 1;
}
.scale-block--low {
background-color: #1385FA;
}
.scale-block--normal {
background-color: #2AC79F;
}
.scale-block--over {
background-color: #FFA151;
}
.scale-block--obese {
background-color: #F24439;
}
}
.scale-row {
display: flex;
margin-top: 16rpx;
> view {
flex: 1;
text-align: center;
color: #77849E;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
}
}
.scale-row--range {
margin-top: 12rpx;
> view {
color: #B6B6B6;
height: 20rpx;
font-size: 20rpx;
line-height: 20rpx;
}
}
}
/* 指标行 */
.metric-row {
width: 100%;
display: flex;
align-items: center;
padding: 20rpx 0;
.metric-label {
flex: 1;
color: #77849E;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.metric-value {
color: #252535;
height: 28rpx;
font-size: 28rpx;
line-height: 28rpx;
margin-right: 24rpx;
}
.metric-status {
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
}
.metric-status--normal {
color: #2AC79F;
}
.metric-status--low {
color: #1385FA;
}
.metric-status--high {
color: #F24439;
}
}
}
}
}
miniprogram/pages/detailedReport/detailedReport.ts
+105
View File
@@ -0,0 +1,105 @@
// pages/detailedReport/detailedReport.ts
Page({
data: {
// 导航栏背景色，根据滚动位置动态变化
navBgColor: 'rgba(255,255,255,0)',
header: {
date: '2026-07-23 16:32',
weight: '68.80',
unit: 'kg',
bmi: 'BMI正常',
change: '较上次-0.3kg'
},
basic: [
{ label: '身高', value: '172', unit: 'cm', tag: '' },
{ label: 'BMI', value: '22.4', unit: '', tag: '标准' },
{ label: '身体得分', value: '73', unit: '分', tag: '一般' },
{ label: '体脂率', value: '22.1', unit: '%', tag: '' }
],
sections: [
{
title: '身体成分',
items: [
{ label: '水分率', value: '50%', status: '不足', statusClass: 'low' },
{ label: '水分量', value: '30.6kg', status: '标准', statusClass: 'normal' },
{ label: '蛋白质率', value: '10%', status: '超量', statusClass: 'high' },
{ label: '蛋白质量', value: '8.2kg', status: '标准', statusClass: 'normal' },
{ label: '脂肪量', value: '14.3kg', status: '标准', statusClass: 'normal' },
{ label: '肌肉量', value: '38.8kg', status: '标准', statusClass: 'normal' },
{ label: '肌肉率', value: '69.2%', status: '标准', statusClass: 'normal' },
{ label: '骨骼肌量', value: '22.5kg', status: '标准', statusClass: 'normal' },
{ label: '骨骼肌率', value: '40%', status: '标准', statusClass: 'normal' },
{ label: '骨量', value: '2.3kg', status: '标准', statusClass: 'normal' }
]
},
{
title: '脂肪分析',
items: [
{ label: '内脏脂肪', value: '6', status: '不足', statusClass: 'low' },
{ label: '皮下脂肪率', value: '22.5%', status: '标准', statusClass: 'normal' },
{ label: '皮下脂肪量', value: '12.6kg', status: '标准', statusClass: 'normal' }
]
},
{
title: '体态管理',
items: [
{ label: '理想体重', value: '62.1kg', status: '标准', statusClass: 'normal' },
{ label: '去脂体重', value: '41.7kg', status: '标准', statusClass: 'normal' },
{ label: '身体年龄', value: '20岁', status: '标准', statusClass: 'normal' },
{ label: '身体类型', value: '缺乏运动型', status: '标准', statusClass: 'normal' },
{ label: '推测腰臀比', value: '0.8%', status: '标准', statusClass: 'normal' }
]
},
{
title: '体重管控',
items: [
{ label: '控制体重', value: '3.9kg', status: '标准', statusClass: 'normal' },
{ label: '脂肪控制量', value: '-0.5kg', status: '标准', statusClass: 'normal' },
{ label: '肌肉控制量', value: '4.4kg', status: '标准', statusClass: 'normal' }
]
},
{
title: '细胞液分析',
items: [
{ label: '细胞内水量', value: '11.4kg', status: '标准', statusClass: 'normal' },
{ label: '细胞外水量', value: '19.1kg', status: '标准', statusClass: 'normal' },
{ label: '无机盐量', value: '2.9kg', status: '不足', statusClass: 'low' },
{ label: '身体细胞量', value: '27.4kg', status: '标准', statusClass: 'normal' },
{ label: '骨骼肌质量指数', value: '7.2kg/m²', status: '标准', statusClass: 'normal' }
]
}
],
limbSections: [
{
title: '躯干/四肢脂肪',
items: [
{ label: '左臂', value: '2.3kg丨80.9%' },
{ label: '右臂', value: '2.3kg丨80.9%' },
{ label: '左腿', value: '6.3kg丨100%' },
{ label: '右腿', value: '6.3kg丨100%' },
{ label: '躯干', value: '18.4kg丨97.8%' }
]
},
{
title: '躯干/四肢肌肉',
items: [
{ label: '左臂', value: '2.3kg丨80.9%' },
{ label: '右臂', value: '2.3kg丨80.9%' },
{ label: '左腿', value: '6.3kg丨100%' },
{ label: '右腿', value: '6.3kg丨100%' },
{ label: '躯干', value: '18.4kg丨97.8%' }
]
}
]
},
// 滚动时导航栏背景渐显
onScroll(e: WechatMiniprogram.ScrollViewScroll) {
const scrollTop = e.detail.scrollTop;
const opacity = Math.min(Math.max(scrollTop / 300, 0), 1);
this.setData({
navBgColor: `rgba(255,255,255,${opacity})`,
});
},
})
miniprogram/pages/detailedReport/detailedReport.wxml
+98
View File
@@ -0,0 +1,98 @@
<navBar title="详细报告" fixed="{{true}}" bgColor="{{navBgColor}}"/>
<view class="detailedReport">
<scroll-view class="scrollView" scroll-y bindscroll="onScroll">
<view class="scrollViewContent">
<!-- 顶部头部 -->
<view class="header">
<view class="header-slogan">
<view class="slogan-title">设备智联 · 掌握健康</view>
<view class="slogan-sub">留存测量记录，见证身形变化</view>
</view>
<view class="header-date">{{ header.date }}</view>
<view class="header-weight">
<view class="weight-num">{{ header.weight }}</view>
<view class="weight-unit">{{ header.unit }}</view>
</view>
<view class="header-info">
<view class="header-bmi">{{ header.bmi }}</view>
<view class="header-change">{{ header.change }}</view>
</view>
</view>
<!-- 基础指标 -->
<view class="card">
<view class="card-title">
<view class="title-bar"></view>
<view class="title-text">基础指标</view>
</view>
<view class="basic-grid">
<block wx:for="{{ basic }}" wx:key="label">
<view class="basic-item">
<view class="basic-label">{{ item.label }}</view>
<view class="basic-value-row">
<view class="basic-value">{{ item.value }}</view>
<view class="basic-unit">{{ item.unit }}</view>
<view class="basic-tag" wx:if="{{ item.tag }}">{{ item.tag }}</view>
</view>
</view>
</block>
</view>
<view class="bmi-scale">
<view class="scale-track">
<view class="scale-block scale-block--low"></view>
<view class="scale-block scale-block--normal"></view>
<view class="scale-block scale-block--over"></view>
<view class="scale-block scale-block--obese"></view>
</view>
<view class="scale-row">
<view>消瘦</view>
<view>正常</view>
<view>超重</view>
<view>肥胖</view>
</view>
<view class="scale-row scale-row--range">
<view>BMI&lt;18.5</view>
<view>18.5≤BMI&lt;24</view>
<view>24≤BMI&lt;28</view>
<view>BMI≥28</view>
</view>
</view>
</view>
<!-- 指标卡片 -->
<block wx:for="{{ sections }}" wx:key="title" wx:for-item="section">
<view class="card">
<view class="card-title">
<view class="title-bar"></view>
<view class="title-text">{{ section.title }}</view>
</view>
<block wx:for="{{ section.items }}" wx:key="label" wx:for-item="item">
<view class="metric-row">
<view class="metric-label">{{ item.label }}</view>
<view class="metric-value">{{ item.value }}</view>
<view class="metric-status metric-status--{{ item.statusClass }}">{{ item.status }}</view>
</view>
</block>
</view>
</block>
<!-- 躯干/四肢 -->
<block wx:for="{{ limbSections }}" wx:key="title" wx:for-item="section">
<view class="card">
<view class="card-title">
<view class="title-bar"></view>
<view class="title-text">{{ section.title }}</view>
</view>
<block wx:for="{{ section.items }}" wx:key="label" wx:for-item="item">
<view class="metric-row">
<view class="metric-label">{{ item.label }}</view>
<view class="metric-value">{{ item.value }}</view>
</view>
</block>
</view>
</block>
</view>
</scroll-view>
</view>
miniprogram/pages/home/home.less
+5 -1
View File
@@ -123,7 +123,11 @@
height: 32rpx;
font-size: 26rpx;
line-height: 32rpx;
padding-right: 50rpx;
padding-right: 20rpx;
&::after {
right: 0;
}
}
}
miniprogram/pages/home/home.ts
+5
View File
@@ -33,4 +33,9 @@ Page({
onTapSwitchDevice() {
wx.switchTab({ url: '/pages/equipment/equipment' })
},
/** 跳转详细报告页 */
onTapDetailedReport() {
wx.navigateTo({ url: '/pages/detailedReport/detailedReport' })
},
})
miniprogram/pages/home/home.wxml
+1 -1
View File
@@ -21,7 +21,7 @@
<view class="recentMeasurementsTitle">
<view></view>
<view>最近测量</view>
<view class="arrow">详细报告</view>
<view class="arrow" bind:tap="onTapDetailedReport">详细报告</view>
</view>
<view class="recentMeasurementsContent">
<view class="recentMeasurementsContentTop">
miniprogram/pages/my/my.json
+4 -2
View File
@@ -1,4 +1,6 @@
{
"usingComponents": {},
"navigationStyle": "custom"
"usingComponents": {
"navBar": "/components/navBar/navBar"
},
"navigationStyle": "custom"
}
miniprogram/pages/my/my.ts
+11 -1
View File
@@ -5,7 +5,8 @@ Page({
* 页面的初始数据
*/
data: {
// 导航栏背景色，根据滚动位置动态变化
navBgColor: 'rgba(255,255,255,0)',
},
/**
@@ -15,6 +16,15 @@ Page({
},
// 滚动时导航栏背景渐显
onScroll(e: WechatMiniprogram.ScrollViewScroll) {
const scrollTop = e.detail.scrollTop;
const opacity = Math.min(Math.max(scrollTop / 300, 0), 1);
this.setData({
navBgColor: `rgba(255,255,255,${opacity})`,
});
},
onTapPersonalInfo() {
wx.navigateTo({ url: '/pages/personalInformation/personalInformation' })
},
miniprogram/pages/my/my.wxml
+2
View File
@@ -1,3 +1,5 @@
<navBar title="我的" fixed="{{true}}" bgColor="{{navBgColor}}" />
<view class="my">
<view class="header">
<view class="bg">