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

[AI Generated]: feat(Views): 新增测量报告页面

Browse Source
This commit is contained in:
17792275749
2026-05-13 09:55:15 +08:00
parent 780a1e3202
commit d1331437fa
6 changed files with 570 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/home/home.ts
+1 -1
View File
@@ -46,7 +46,7 @@ Page({
status: 'idle' as LoadStatus,
// 是否有称重数据
hasData: false,
hasData: true,
// 设备信息
device: {
miniprogram/pages/measurementReport/measurementReport.json
+4
View File
@@ -0,0 +1,4 @@
{
"navigationBarTitleText": "测量报告",
"usingComponents": {}
}
miniprogram/pages/measurementReport/measurementReport.less
+369
View File
@@ -0,0 +1,369 @@
.scrollViewContent {
width: 100%;
padding: 24rpx 30rpx;
box-sizing: border-box;
/* ===== 测量信息卡片 ===== */
.info-card {
width: 100%;
padding: 40rpx 30rpx;
margin-bottom: 24rpx;
border-radius: 24rpx;
box-sizing: border-box;
background-color: #FFFFFF;
.info-header {
display: flex;
align-items: center;
.info-avatar {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
margin-right: 24rpx;
background-color: #C6E6FF;
border: 3rpx solid #50A6FF;
}
.info-meta {
flex: 1;
.info-time {
color: #77849E;
font-size: 26rpx;
line-height: 34rpx;
margin-bottom: 16rpx;
}
.info-name {
color: #333333;
font-size: 32rpx;
font-weight: 700;
line-height: 32rpx;
}
}
}
}
/* ===== 体重卡片 ===== */
.weight-card {
width: 100%;
margin-bottom: 24rpx;
padding: 2rpx 2rpx 50rpx;
border-radius: 24rpx;
box-sizing: border-box;
background-color: #FFFFFF;
/* 卡头 */
.card-header {
width: 100%;
height: 88rpx;
padding-left: 30rpx;
padding-right: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(211, 233, 255, 0.6) 0%, rgba(252, 251, 253, 0.6) 100%);
.card-header-left {
display: flex;
align-items: center;
.card-title-bar {
width: 6rpx;
height: 24rpx;
border-radius: 3rpx;
background-color: #1385FA;
margin-right: 14rpx;
}
.card-title {
color: #252535;
font-size: 30rpx;
font-weight: 700;
line-height: 30rpx;
}
}
}
.card-content {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
/* 体重主数据行 */
.weight-row {
display: flex;
align-items: flex-end;
margin-bottom: 30rpx;
.weight-main {
flex: 1;
display: flex;
flex-direction: column;
.weight-num-wrap {
height: 96rpx;
display: flex;
margin-bottom: 20rpx;
align-items: baseline;
.weight-int {
color: #252535;
height: 96rpx;
font-size: 96rpx;
font-weight: bold;
line-height: 96rpx;
}
.weight-dec {
color: #252535;
font-size: 56rpx;
font-weight: bold;
line-height: 56rpx;
margin-right: 6rpx;
}
.weight-unit {
color: #808080;
font-size: 28rpx;
font-weight: bold;
line-height: 28rpx;
}
}
.weight-date {
color: #B6B6B6;
height: 24rpx;
font-size: 24rpx;
line-height: 24rpx;
}
}
/* 右侧变化量 */
.weight-diff {
width: 250rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
.diff-num-wrap {
display: flex;
align-items: flex-end;
margin-bottom: 14rpx;
.diff-num {
height: 48rpx;
font-size: 48rpx;
font-weight: bold;
line-height: 48rpx;
margin-right: 6rpx;
}
.diff-unit {
position: relative;
color: #808080;
height: 28rpx;
font-weight: bold;
font-size: 28rpx;
line-height: 28rpx;
.diff-arrow {
position: absolute;
left: 0;
bottom: 42rpx;
}
}
/* 向下箭头(减轻) */
.arrow-down {
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-top: 16rpx solid #2AC79F;
}
/* 向上箭头(增重) */
.arrow-up {
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-bottom: 16rpx solid #FF4D4F;
}
.diff-down {
color: #2AC79F;
}
.diff-up {
color: #FF4D4F;
}
}
.diff-label {
color: #B6B6B6;
font-size: 24rpx;
line-height: 28rpx;
margin-top: 8rpx;
}
}
}
/* 分割线 */
.card-divider {
width: 100%;
height: 2rpx;
background-color: #EAECF1;
margin-bottom: 35rpx;
}
/* 身高 / BMI / 标准体重 指标行 */
.metrics-row {
display: flex;
padding: 0 10rpx;
justify-content: space-between;
.metric-col {
display: flex;
flex-direction: column;
.metric-label {
color: #808080;
height: 30rpx;
display: flex;
font-size: 26rpx;
line-height: 30rpx;
margin-bottom: 20rpx;
.metric-label-text {
color: #808080;
height: 30rpx;
font-size: 26rpx;
line-height: 30rpx;
margin-right: 6rpx;
}
.metric-label-value {
color: #FFFFFF;
height: 30rpx;
padding: 0 6rpx;
font-size: 18rpx;
line-height: 30rpx;
background-color: #2AC79F;
border-radius: 8rpx;
}
}
.metric-value-row {
display: flex;
align-items: baseline;
.metric-value {
color: #252535;
height: 44rpx;
font-size: 44rpx;
font-weight: 700;
line-height: 44rpx;
margin-right: 6rpx;
}
.metric-unit {
color: #252535;
height: 26rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 26rpx;
}
}
}
}
}
}
/* ===== 详细数据卡 ===== */
.detail-card {
width: 100%;
margin-bottom: 24rpx;
padding: 2rpx 2rpx 30rpx;
border-radius: 24rpx;
box-sizing: border-box;
background-color: #FFFFFF;
/* 卡头 */
.card-header {
width: 100%;
height: 88rpx;
padding-left: 30rpx;
padding-right: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.card-header-left {
display: flex;
align-items: center;
.card-title-bar {
width: 6rpx;
height: 24rpx;
border-radius: 3rpx;
background-color: #1385FA;
margin-right: 14rpx;
}
.card-title {
color: #252535;
font-size: 30rpx;
font-weight: 700;
line-height: 30rpx;
}
}
}
/* 详细数据:三格 */
.detail-grid {
display: flex;
padding: 0 30rpx;
justify-content: space-between;
.detail-item {
width: 194rpx;
padding: 24rpx;
box-sizing: border-box;
border-radius: 16rpx;
background-color: #F3F4F6;
display: flex;
flex-direction: column;
.detail-label {
color: #808080;
font-size: 24rpx;
line-height: 24rpx;
margin-bottom: 30rpx;
}
.detail-value-row {
display: flex;
align-items: baseline;
.detail-value {
color: #252535;
height: 44rpx;
font-size: 44rpx;
font-weight: 500;
line-height: 44rpx;
margin-right: 2rpx;
}
.detail-unit {
color: #252535;
height: 26rpx;
font-size: 26rpx;
font-weight: 500;
line-height: 26rpx;
}
}
}
}
}
}
miniprogram/pages/measurementReport/measurementReport.ts
+76
View File
@@ -0,0 +1,76 @@
/** 测量报告数据 */
interface ReportData {
/** 测量时间 */
measureTime: string
/** 用户姓名 */
userName: string
/** 体重整数部分 */
weight: number
/** 体重小数部分,如 ".20" */
weightDecimal: string
/** 测量时间显示,如 "05-06 09:30" */
weightDate: string
/** 与上次相比差值(负=减轻,正=增重) */
diff: number
/** 身高(cm) */
height: number
/** BMI 值 */
bmi: number
/** BMI 评级标签,如 "标准" */
bmiLabel: string
/** 标准体重(kg) */
stdWeight: number
/** 体脂率(%) */
bodyFat: number
/** 体脂肪(kg) */
bodyFatMass: number
/** 基础代谢(kcal) */
bmr: number
}
/**
* 测量报告页
* 展示单次测量的详细数据报告
*/
Page({
data: {
// 报告数据
report: {
measureTime: '2026-05-06 09:30',
userName: '陈万宁',
weight: 68,
weightDecimal: '.20',
weightDate: '05-06 09:30',
diff: -2.6,
height: 176,
bmi: 22.4,
bmiLabel: '标准',
stdWeight: 67.2,
bodyFat: 22.3,
bodyFatMass: 52.1,
bmr: 1652
} as ReportData
},
onLoad(options) {
// TODO: 根据 options.id 获取报告详情
},
onReady() {},
onShow() {},
onHide() {},
onUnload() {},
/**
* 分享报告
*/
onShareAppMessage(): WechatMiniprogram.Page.ICustomShareContent {
return {
title: `${this.data.report.userName}的测量报告`,
path: '/pages/measurementReport/measurementReport'
}
}
})
miniprogram/pages/measurementReport/measurementReport.wxml
+119
View File
@@ -0,0 +1,119 @@
<scroll-view class="scrollView" scroll-y>
<view class="scrollViewContent">
<!-- 测量信息卡片 -->
<view class="info-card">
<view class="info-header">
<view class="info-avatar"></view>
<view class="info-meta">
<view class="info-time">{{ report.measureTime }}</view>
<view class="info-name">{{ report.userName }}</view>
</view>
</view>
</view>
<!-- 体重卡片 -->
<view class="weight-card">
<!-- 卡头 -->
<view class="card-header">
<view class="card-header-left">
<view class="card-title-bar"></view>
<view class="card-title">体重</view>
</view>
</view>
<view class="card-content">
<!-- 体重主数据行 -->
<view class="weight-row">
<view class="weight-main">
<view class="weight-num-wrap">
<text class="weight-int">{{ report.weight }}</text>
<text class="weight-dec">{{ report.weightDecimal }}</text>
<text class="weight-unit">kg</text>
</view>
<view class="weight-date">{{ report.weightDate }}</view>
</view>
<view class="weight-diff">
<view class="diff-num-wrap">
<view class="diff-num {{ report.diff < 0 ? 'diff-down' : 'diff-up' }}">{{ report.diff < 0 ? -report.diff : report.diff }}</view>
<view class="diff-unit">
kg
<text class="diff-arrow {{ report.diff < 0 ? 'arrow-down' : 'arrow-up' }}"></text>
</view>
</view>
<view class="diff-label">{{ report.diff < 0 ? '体重较上次减轻' : '体重较上次增加' }}</view>
</view>
</view>
<!-- 分割线 -->
<view class="card-divider"></view>
<!-- 身高 / BMI / 标准体重 指标行 -->
<view class="metrics-row">
<view class="metric-col">
<view class="metric-label">
<view class="metric-label-text">身高</view>
</view>
<view class="metric-value-row">
<text class="metric-value">{{ report.height }}</text>
<text class="metric-unit">cm</text>
</view>
</view>
<view class="metric-col">
<view class="metric-label">
<view class="metric-label-text">BMI</view>
<view class="metric-label-value">{{ report.bmiLabel }}</view>
</view>
<view class="metric-value-row">
<text class="metric-value">{{ report.bmi }}</text>
</view>
</view>
<view class="metric-col">
<view class="metric-label">
<view class="metric-label-text">标准体重</view>
</view>
<view class="metric-value-row">
<text class="metric-value">{{ report.stdWeight }}</text>
<text class="metric-unit">kg</text>
</view>
</view>
</view>
</view>
</view>
<!-- 详细数据卡 -->
<view class="detail-card">
<!-- 卡头 -->
<view class="card-header">
<view class="card-header-left">
<view class="card-title-bar"></view>
<view class="card-title">详细数据</view>
</view>
</view>
<!-- 三格数据 -->
<view class="detail-grid">
<view class="detail-item">
<view class="detail-label">体脂率</view>
<view class="detail-value-row">
<text class="detail-value">{{ report.bodyFat }}</text>
<text class="detail-unit">%</text>
</view>
</view>
<view class="detail-item">
<view class="detail-label">体脂肪</view>
<view class="detail-value-row">
<text class="detail-value">{{ report.bodyFatMass }}</text>
<text class="detail-unit">kg</text>
</view>
</view>
<view class="detail-item">
<view class="detail-label">基础代谢</view>
<view class="detail-value-row">
<text class="detail-value">{{ report.bmr }}</text>
<text class="detail-unit">kcal</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>