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/app.json
+4 -3
View File
@@ -1,18 +1,19 @@
{
"pages": [
"pages/userManagement/userManagement",
"pages/home/home",
"pages/login/login",
"pages/supplementPersonal/supplementPersonal",
"pages/connectedDevice/connectedDevice",
"pages/connectedWifi/connectedWifi",
"pages/home/home",
"pages/equipment/equipment",
"pages/userManagement/userManagement",
"pages/addUser/addUser",
"pages/data/data",
"pages/my/my",
"pages/personalInformation/personalInformation",
"pages/helpCenter/helpCenter",
"pages/questionDetails/questionDetails"
"pages/questionDetails/questionDetails",
"pages/detailedReport/detailedReport"
],
"usingComponents": {
"empty-data": "/components/emptyData/emptyData"
miniprogram/components/navBar/navBar.json
+5
View File
@@ -0,0 +1,5 @@
{
"component": true,
"usingComponents": {},
"multipleSlots": true
}
miniprogram/components/navBar/navBar.less
+60
View File
@@ -0,0 +1,60 @@
.nav-spacer {
width: 100%;
}
.nav-wrap {
width: 100%;
}
.nav-content {
width: 100%;
display: flex;
align-items: center;
position: relative;
box-sizing: border-box;
}
.nav-left {
height: 100%;
flex-shrink: 0;
z-index: 1;
display: flex;
align-items: center;
}
.back-btn {
width: 60rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.back-arrow {
width: 18rpx;
height: 18rpx;
border-left: 4rpx solid #252535;
border-bottom: 4rpx solid #252535;
transform: rotate(45deg);
}
.nav-center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
pointer-events: none;
}
.nav-title {
color: #252535;
font-size: 16px;
font-weight: bold;
line-height: 1;
pointer-events: auto;
}
miniprogram/components/navBar/navBar.ts
+61
View File
@@ -0,0 +1,61 @@
import { getNavBarLayout } from '../../utils/navBar/index';
Component({
options: {
multipleSlots: true,
},
properties: {
title: { type: String, value: '' },
back: { type: String, value: 'auto' },
fixed: { type: Boolean, value: false },
zIndex: { type: Number, value: 100 },
bgColor: { type: String, value: 'transparent' },
color: { type: String, value: '#252535' },
arrowColor: { type: String, value: '#252535' },
},
data: {
statusBarHeight: 0,
navBarHeight: 44,
totalNavHeight: 0,
navPaddingRight: 0,
_showBack: false,
_spacerHeight: 'auto',
_navStyle: '',
},
lifetimes: {
attached() {
const layout = getApp<IAppOption>().globalData.navBarLayout || getNavBarLayout();
this._applyLayout(layout);
},
},
observers: {
'fixed, back, zIndex'(_fixed: boolean, _back: string, _zIndex: number) {
const layout = getApp<IAppOption>().globalData.navBarLayout || getNavBarLayout();
this._applyLayout(layout);
},
},
methods: {
_applyLayout(layout: ReturnType<typeof getNavBarLayout>) {
const { fixed, back, zIndex } = this.properties;
const _showBack = back === 'show' || (back === 'auto' && getCurrentPages().length > 1);
this.setData({
...layout,
_showBack,
_spacerHeight: fixed ? layout.totalNavHeight + 'px' : 'auto',
_navStyle: fixed
? `position: fixed; top: 0; left: 0; right: 0; z-index: ${zIndex};`
: '',
});
},
onBack() {
wx.navigateBack({ delta: 1 });
},
},
});
miniprogram/components/navBar/navBar.wxml
+18
View File
@@ -0,0 +1,18 @@
<view class="nav-spacer" style="height: {{_spacerHeight}}; {{_navStyle}}">
<view class="nav-wrap" style="background-color: {{bgColor}};">
<view style="height: {{statusBarHeight}}px;"></view>
<view class="nav-content" style="height: {{navBarHeight}}px; padding-right: {{navPaddingRight}}px;">
<view class="nav-left">
<block wx:if="{{_showBack}}">
<view class="back-btn" bind:tap="onBack">
<view class="back-arrow" style="border-left-color: {{arrowColor}}; border-bottom-color: {{arrowColor}};"></view>
</view>
</block>
<slot name="left" />
</view>
<view class="nav-center">
<text class="nav-title" style="color: {{color}};">{{title}}</text>
</view>
</view>
</view>
</view>
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">
miniprogram/utils/navBar/index.ts
+53
View File
@@ -0,0 +1,53 @@
/**
* 获取自定义导航栏布局参数，应用启动时调用一次存入 globalData，
* 各页面直接从 getApp().globalData.navBarLayout 取值即可。
*
* 布局示意：
* ┌──────────────────────────────────┐
* │ 状态栏 (statusBar) │ ← statusBarHeight
* ├──────────────────────────────────┤ ← navContentTop
* │ ┌─┐ ┌─────────┐ ┌──────┐ │
* │ │←│ │ 标题 │ │ 胶囊 │ │ ← navBarHeight
* │ └─┘ └─────────┘ └──────┘ │
* └──────────────────────────────────┘
* |← capsuleLeft →| |← capRight →|
* |← windowWidth →|
*
* 返回键放置示例（非 tabBar 页面）：
* 判断显示：getCurrentPages().length > 1
* WXML:
* <view class="back-btn"
* style="top: {{navContentTop}}px; height: {{navBarHeight}}px;
* line-height: {{navBarHeight}}px;"
* bind:tap="onBack">← 返回</view>
*/
export const getNavBarLayout = () => {
const sys = wx.getWindowInfo();
const capsule = wx.getMenuButtonBoundingClientRect();
const statusBarHeight = sys.statusBarHeight || 0;
const navBarHeight = capsule.height + (capsule.top - statusBarHeight) * 2;
return {
/** 状态栏高度 */
statusBarHeight,
/** 导航栏内容区高度（不含状态栏） */
navBarHeight,
/** 状态栏 + 导航栏总高度，页面顶部占位直接设这个即可 */
totalNavHeight: statusBarHeight + navBarHeight,
/** 导航栏内容区起始 Y 坐标（状态栏底部），放置返回键、标题等元素以此为 top */
navContentTop: statusBarHeight,
/** 屏幕宽度 */
windowWidth: sys.windowWidth,
/** 胶囊按钮宽度 */
capsuleWidth: capsule.width,
/** 胶囊按钮高度 */
capsuleHeight: capsule.height,
/** 胶囊按钮距屏幕顶部距离，垂直对齐自定义元素时以此为基准 */
capsuleTop: capsule.top,
/** 胶囊按钮距屏幕左侧距离 */
capsuleLeft: capsule.left,
/** 胶囊按钮距屏幕右侧距离 */
capsuleRight: sys.windowWidth - capsule.right,
/** 导航栏右侧安全内边距，避免内容被胶囊遮挡 */
navPaddingRight: sys.windowWidth - capsule.left,
};
};