ChronicDisease_UniApp/src/pages/public/health/index.vue

<template>
  <CustomNav title="健康数据" leftType="back" />
  <view class="content">
    <view class="menu-card">
      <view class="menu-list">
        <view class="menu-item" @click="openDetail('physical','height')">
          <image src="/static/icons/remixicon/height.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">身高</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('physical','weight')">
          <image src="/static/icons/remixicon/weight.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">体重</text>
          <text class="menu-value">80.0 公斤</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('physical','bmi')">
          <image src="/static/icons/remixicon/bmi.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">BMI</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('blood-pressure')"><image src="/static/icons/remixicon/scan-line.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">血压</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('blood-glucose')"><image src="/static/icons/remixicon/contrast-drop-2-line.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">血糖</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('heart-rate')">
          <image src="/static/icons/remixicon/heart-pulse.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">心率</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
      </view>
    </view>
  </view>
  <!-- 删除了TabBar组件，因为这是一个公共页面，供医生或家属像病人一样快速查看患者的健康数据 -->
  <!-- TabBar is removed because this is a public page for doctors or family members to quickly view patient health data like patients do -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import CustomNav from '@/components/custom-nav.vue'
// 删除了TabBar导入，因为这是一个公共页面，供医生或家属像病人一样快速查看患者的健康数据
// Removed TabBar import because this is a public page for doctors or family members to quickly view patient health data like patients do

const title = ref('健康数据')
const patientId = ref<string | null>(null)
const bindingType = ref<string | null>(null)

// 页面加载时检查是否传入了患者ID和绑定类型
onLoad((options) => {
  console.log('传入的参数:', options)
  if (options && options.patientId && options.bindingType) {
    patientId.value = options.patientId
    bindingType.value = options.bindingType
    console.log('患者ID:', patientId.value)
    console.log('绑定类型:', bindingType.value)
  } else {
    // 如果没有传入patientId或bindingType，则弹窗提示并返回上一页
    uni.showToast({
      title: '未携带必要参数',
      icon: 'none',
      duration: 2000
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 2000)
  }
})

const openDetail = (type: string, metric?: string) => {
  // 检查是否有患者ID和绑定类型
  if (!patientId.value || !bindingType.value) {
    uni.showToast({
      title: '未携带必要参数',
      icon: 'none'
    })
    return
  }
  
  const url = metric 
    ? `details/${type}?metric=${metric}&patientId=${patientId.value}&bindingType=${bindingType.value}` 
    : `details/${type}?patientId=${patientId.value}&bindingType=${bindingType.value}`
  uni.navigateTo({ url })
}

const openReminder = () => {
  // 检查是否有患者ID和绑定类型
  if (!patientId.value || !bindingType.value) {
    uni.showToast({
      title: '未携带必要参数',
      icon: 'none'
    })
    return
  }
  
  uni.navigateTo({ url: `reminder?patientId=${patientId.value}&bindingType=${bindingType.value}` })
}
</script>

<style scoped>
.content {
  padding-top: calc(var(--status-bar-height) + 44px);
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.menu-card {
  padding: 50rpx 0rpx;
}

.menu-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.menu-item:last-child {
  border-bottom: none
}

.menu-text {
  font-size: 32rpx;
  color: #000000;
  flex: 1;
  /* 字符间距，调整数值以获得所需视觉效果 */
  letter-spacing: 1rpx;
}

.menu-value {
  font-size: 28rpx;
  color: #5a5a5a;
  margin-right: 10rpx
}

.menu-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44rpx;
  height: 44rpx;
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
  display: inline-block;
}

.reminder-card {
  margin-top: 20rpx;
  padding: 50rpx 0rpx;
}

.reminder-button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  border-radius: 12rpx;
}

.reminder-text {
  font-size: 32rpx;
  color: #000000;
  flex: 1;
  letter-spacing: 1rpx;
}

.reminder-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44rpx;
  height: 44rpx;
}

.reminder-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
  display: inline-block;
}
</style>