فهرست منبع

feat(health): 添加健康数据详情页面路由及菜单项

- 在 pages.json 中新增身高、体重、BMI、血压、血糖和心率六个页面路径配置
- 更新 health.vue 页面结构,替换原有标题组件为自定义导航栏
- 新增六个健康指标的菜单项,支持点击跳转到对应详情页
- 实现 openDetail 方法用于页面间导航跳转
- 调整页面样式布局,增加卡片式菜单设计和视觉优化
- 设置页面背景色和最小高度以适配不同屏幕尺寸
- 移除旧版 PageTitle 组件及相关样式代码
mcbaiyun 2 ماه پیش
والد
کامیت
4945fa7d33

+ 24 - 0
src/pages.json

@@ -18,6 +18,30 @@
 				"navigationBarTitleText": "健康数据"
 			}
 		},
+		{
+			"path": "pages/health/height",
+			"style": { "navigationBarTitleText": "身高" }
+		},
+		{
+			"path": "pages/health/weight",
+			"style": { "navigationBarTitleText": "体重" }
+		},
+		{
+			"path": "pages/health/bmi",
+			"style": { "navigationBarTitleText": "BMI" }
+		},
+		{
+			"path": "pages/health/blood-pressure",
+			"style": { "navigationBarTitleText": "血压" }
+		},
+		{
+			"path": "pages/health/blood-glucose",
+			"style": { "navigationBarTitleText": "血糖" }
+		},
+		{
+			"path": "pages/health/heart-rate",
+			"style": { "navigationBarTitleText": "心率" }
+		},
 		{
 			"path": "pages/profile/profile",
 			"style": {

+ 18 - 0
src/pages/health/blood-glucose.vue

@@ -0,0 +1,18 @@
+<template>
+  <CustomNav title="血糖" leftType="back" />
+  <view class="content">
+    <view class="placeholder">支持空腹/随机血糖记录与历史查看</view>
+  </view>
+  <TabBar />
+</template>
+
+<script setup lang="ts">
+import CustomNav from '@/components/CustomNav.vue'
+
+import TabBar from '@/components/TabBar.vue'
+</script>
+
+<style>
+.placeholder { padding: 40rpx; color: #666 }
+.content { padding-top: calc(var(--status-bar-height) + 44px) }
+</style>

+ 18 - 0
src/pages/health/blood-pressure.vue

@@ -0,0 +1,18 @@
+<template>
+  <CustomNav title="血压" leftType="back" />
+  <view class="content">
+    <view class="placeholder">记录收缩压/舒张压并展示历史曲线</view>
+  </view>
+  <TabBar />
+</template>
+
+<script setup lang="ts">
+import CustomNav from '@/components/CustomNav.vue'
+
+import TabBar from '@/components/TabBar.vue'
+</script>
+
+<style>
+.placeholder { padding: 40rpx; color: #666 }
+.content { padding-top: calc(var(--status-bar-height) + 44px) }
+</style>

+ 18 - 0
src/pages/health/bmi.vue

@@ -0,0 +1,18 @@
+<template>
+  <CustomNav title="BMI" leftType="back" />
+  <view class="content">
+    <view class="placeholder">自动根据身高体重计算并展示 BMI 历史</view>
+  </view>
+  <TabBar />
+</template>
+
+<script setup lang="ts">
+import CustomNav from '@/components/CustomNav.vue'
+
+import TabBar from '@/components/TabBar.vue'
+</script>
+
+<style>
+.placeholder { padding: 40rpx; color: #666 }
+.content { padding-top: calc(var(--status-bar-height) + 44px) }
+</style>

+ 59 - 7
src/pages/health/health.vue

@@ -1,28 +1,57 @@
 <template>
   <CustomNav title="健康数据" leftType="none" />
   <view class="content">
-    <PageTitle :title="title" />
+    <view class="menu-card">
+      <view class="menu-list">
+        <view class="menu-item" @click="openDetail('height')">
+          <text class="menu-text">身高</text>
+          <text class="menu-arrow">›</text>
+        </view>
+        <view class="menu-item" @click="openDetail('weight')">
+          <text class="menu-text">体重</text>
+          <text class="menu-arrow">›</text>
+        </view>
+        <view class="menu-item" @click="openDetail('bmi')">
+          <text class="menu-text">BMI</text>
+          <text class="menu-arrow">›</text>
+        </view>
+        <view class="menu-item" @click="openDetail('blood-pressure')">
+          <text class="menu-text">血压</text>
+          <text class="menu-arrow">›</text>
+        </view>
+        <view class="menu-item" @click="openDetail('blood-glucose')">
+          <text class="menu-text">血糖</text>
+          <text class="menu-arrow">›</text>
+        </view>
+        <view class="menu-item" @click="openDetail('heart-rate')">
+          <text class="menu-text">心率</text>
+          <text class="menu-arrow">›</text>
+        </view>
+      </view>
+    </view>
   </view>
   <TabBar />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import PageTitle from '@/components/PageTitle.vue'
+
 import CustomNav from '@/components/CustomNav.vue'
 import TabBar from '@/components/TabBar.vue'
 
 const title = ref('健康数据')
+
+const openDetail = (type: string) => {
+  uni.navigateTo({ url: `/pages/health/${type}` })
+}
 </script>
 
 <style>
 .content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   padding-top: calc(var(--status-bar-height) + 44px);
-  height: calc(100vh - var(--status-bar-height) - 44px);
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  box-sizing: border-box;
 }
 
 .text-area {
@@ -34,4 +63,27 @@ const title = ref('健康数据')
   font-size: 36rpx;
   color: #8f8f94;
 }
+
+.menu-card {
+  padding: 30rpx 20rpx;
+}
+
+.menu-list {
+  background-color: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+
+.menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx 40rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.menu-item:last-child { border-bottom: none }
+
+.menu-text { font-size: 32rpx; color: #333 }
+.menu-arrow { font-size: 28rpx; color: #ccc }
 </style>

+ 18 - 0
src/pages/health/heart-rate.vue

@@ -0,0 +1,18 @@
+<template>
+  <CustomNav title="心率" leftType="back" />
+  <view class="content">
+    <view class="placeholder">心率(脉搏)记录与历史展示</view>
+  </view>
+  <TabBar />
+</template>
+
+<script setup lang="ts">
+import CustomNav from '@/components/CustomNav.vue'
+
+import TabBar from '@/components/TabBar.vue'
+</script>
+
+<style>
+.placeholder { padding: 40rpx; color: #666 }
+.content { padding-top: calc(var(--status-bar-height) + 44px) }
+</style>

+ 18 - 0
src/pages/health/height.vue

@@ -0,0 +1,18 @@
+<template>
+  <CustomNav title="身高" leftType="back" />
+  <view class="content">
+    <view class="placeholder">这里会显示身高历史和录入界面</view>
+  </view>
+  <TabBar />
+</template>
+
+<script setup lang="ts">
+import CustomNav from '@/components/CustomNav.vue'
+
+import TabBar from '@/components/TabBar.vue'
+</script>
+
+<style>
+.placeholder { padding: 40rpx; color: #666 }
+.content { padding-top: calc(var(--status-bar-height) + 44px) }
+</style>

+ 18 - 0
src/pages/health/weight.vue

@@ -0,0 +1,18 @@
+<template>
+  <CustomNav title="体重" leftType="back" />
+  <view class="content">
+    <view class="placeholder">这里会显示体重历史和录入界面</view>
+  </view>
+  <TabBar />
+</template>
+
+<script setup lang="ts">
+import CustomNav from '@/components/CustomNav.vue'
+
+import TabBar from '@/components/TabBar.vue'
+</script>
+
+<style>
+.placeholder { padding: 40rpx; color: #666 }
+.content { padding-top: calc(var(--status-bar-height) + 44px) }
+</style>