<template>
|
<view class="health-records">
|
<!-- 健康数据卡片 -->
|
<view class="health-card">
|
<view class="data-grid">
|
<view class="data-item">
|
<text class="value">{{ healthData.height || '--' }}</text>
|
<text class="label">身高(cm)</text>
|
</view>
|
<view class="data-item">
|
<text class="value">{{ healthData.weight || '--' }}</text>
|
<text class="label">体重(kg)</text>
|
</view>
|
<view class="data-item">
|
<text class="value">{{ healthData.bmi || '--' }}</text>
|
<text class="label">BMI</text>
|
</view>
|
<view class="data-item">
|
<text class="value">{{ healthData.bloodType || '--' }}</text>
|
<text class="label">血型</text>
|
</view>
|
</view>
|
<button class="update-btn" @tap="showUpdateModal">更新数据</button>
|
</view>
|
|
<!-- 健康记录列表 -->
|
<view class="record-list">
|
<view class="section-title">健康记录</view>
|
<view
|
class="record-item"
|
v-for="(item, index) in healthRecords"
|
:key="index"
|
@tap="viewRecord(item)"
|
>
|
<view class="left">
|
<image :src="item.icon" mode="aspectFit" class="icon" />
|
<view class="info">
|
<text class="title">{{ item.title }}</text>
|
<text class="time">{{ item.time }}</text>
|
</view>
|
</view>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
|
<!-- 健康报告 -->
|
<view class="report-list">
|
<view class="section-title">健康报告</view>
|
<view
|
class="report-item"
|
v-for="(report, index) in healthReports"
|
:key="index"
|
@tap="viewReport(report)"
|
>
|
<view class="header">
|
<text class="name">{{ report.name }}</text>
|
<text class="date">{{ report.date }}</text>
|
</view>
|
<view class="content">
|
<text class="desc">{{ report.description }}</text>
|
<view class="tags">
|
<text
|
v-for="(tag, idx) in report.tags"
|
:key="idx"
|
>{{ tag }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 健康数据
|
const healthData = ref({
|
height: 175,
|
weight: 65,
|
bmi: '21.3',
|
bloodType: 'A'
|
})
|
|
// 健康记录
|
const healthRecords = ref([
|
{
|
icon: '/static/health/blood-pressure.png',
|
title: '血压记录',
|
time: '今天 09:30',
|
path: '/pages/health/blood-pressure'
|
},
|
{
|
icon: '/static/health/heart-rate.png',
|
title: '心率记录',
|
time: '今天 08:15',
|
path: '/pages/health/heart-rate'
|
},
|
{
|
icon: '/static/health/blood-sugar.png',
|
title: '血糖记录',
|
time: '昨天 20:30',
|
path: '/pages/health/blood-sugar'
|
}
|
])
|
|
// 健康报告
|
const healthReports = ref([
|
{
|
name: '年度体检报告',
|
date: '2024-03-20',
|
description: '本次体检结果总体良好，建议加强运动，注意作息规律。',
|
tags: ['正常', '建议复查'],
|
path: '/pages/health/report-detail'
|
},
|
{
|
name: '心电图检查报告',
|
date: '2024-03-15',
|
description: '心电图检查未见明显异常，窦性心律。',
|
tags: ['正常'],
|
path: '/pages/health/report-detail'
|
}
|
])
|
|
// 查看记录详情
|
const viewRecord = (record) => {
|
uni.navigateTo({
|
url: record.path
|
})
|
}
|
|
// 查看报告详情
|
const viewReport = (report) => {
|
uni.navigateTo({
|
url: `${report.path}?id=${report.id}`
|
})
|
}
|
|
// 显示更新数据弹窗
|
const showUpdateModal = () => {
|
uni.navigateTo({
|
url: '/pages/health/update-data'
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.health-records {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 30rpx;
|
|
.health-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 30rpx;
|
|
.data-grid {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20rpx;
|
margin-bottom: 30rpx;
|
|
.data-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.value {
|
font-size: 36rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
}
|
|
.label {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.update-btn {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 28rpx;
|
color: #fff;
|
background: $primary-gradient;
|
border-radius: $radius-lg;
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.record-list {
|
margin-bottom: 30rpx;
|
|
.record-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #fff;
|
padding: 30rpx;
|
border-radius: $radius-lg;
|
margin-bottom: 20rpx;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
.title {
|
font-size: 30rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.icon-arrow-right {
|
font-size: 32rpx;
|
color: $text-secondary;
|
}
|
|
&:active {
|
transform: scale(0.99);
|
}
|
}
|
}
|
|
.report-list {
|
.report-item {
|
background: #fff;
|
padding: 30rpx;
|
border-radius: $radius-lg;
|
margin-bottom: 20rpx;
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.date {
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.content {
|
.desc {
|
font-size: 28rpx;
|
color: $text-regular;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.tags {
|
display: flex;
|
gap: 12rpx;
|
|
text {
|
font-size: 24rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 16rpx;
|
border-radius: $radius-sm;
|
}
|
}
|
}
|
|
&:active {
|
transform: scale(0.99);
|
}
|
}
|
}
|
}
|
</style>
|
