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

<template>
  <CustomNav title="健康数据" leftType="none" />
  <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">{{ height !== null ? height + 'cm' : '--' }}</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">{{ weight !== null ? weight + 'kg' : '--' }}</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">{{ bmi !== null ? (Number.isFinite(Number(bmi)) ? Number(bmi).toFixed(1) : bmi) : '--' }}</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">{{ systolic !== null && diastolic !== null ? systolic + '/' + diastolic : '--' }}</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">{{ bloodGlucose !== null ? (bloodGlucoseType ? bloodGlucoseType + ' ' + bloodGlucose : String(bloodGlucose)) : '--' }}</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">{{ heartRate !== null ? heartRate + ' bpm' : '--' }}</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
      </view>
    </view>

    <view class="reminder-card">
      <view class="reminder-button" @click="openReminder">
        <image src="/static/icons/remixicon/alarm-line.svg" class="reminder-icon" mode="widthFix" />
        <text class="reminder-text">健康提醒</text>
        <uni-icons class="reminder-arrow" type="arrowright" size="20" color="#c0c0c0" />
      </view>
    </view>
  </view>
  <TabBar />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getLatestOverview } from '@/api/patientData'

import CustomNav from '@/components/custom-nav.vue'
import TabBar from '@/components/tab-bar.vue'

const title = ref('健康数据')

const height = ref<number | null>(null)
const weight = ref<number | null>(null)
const bmi = ref<number | null>(null)
const systolic = ref<number | null>(null)
const diastolic = ref<number | null>(null)
const bloodGlucose = ref<number | null>(null)
const bloodGlucoseType = ref<string | null>(null)
const heartRate = ref<number | null>(null)

async function loadOverview() {
  try {
    console.log('[patient-data] loadOverview start')
    const res: any = await getLatestOverview()
    // `request()` 返回的 res 包含 data 字段，data 字段里才是后端返回的 { code, message, data }
    // 为了兼容其他实现，支持两类响应结构：
    // 1) res.data === { code, message, data }
    // 2) res === { code, message, data }
    let payload: any = null
    if (res && res.data && res.data.code === 200 && res.data.data) {
      payload = res.data.data
    } else if (res && res.code === 200 && res.data) {
      payload = res.data
    }
    if (payload) {
      const data = payload
      console.log('[patient-data] response data:', data)
      height.value = data.height ?? null
      weight.value = data.weight ?? null
      bmi.value = data.bmi ?? null
      systolic.value = data.systolicPressure ?? null
      diastolic.value = data.diastolicPressure ?? null
      bloodGlucose.value = data.bloodGlucose ?? null
      bloodGlucoseType.value = data.bloodGlucoseType ?? null
      heartRate.value = data.heartRate ?? null
      console.log('[patient-data] height,weight,bmi:', height.value, weight.value, bmi.value)
    }
  } catch (e) {
    console.error('[patient-data] loadOverview error', e)
  }
}

onShow(() => {
  loadOverview()
})

const openDetail = (type: string, metric?: string) => {
  const url = metric ? `details/${type}?metric=${metric}` : `details/${type}`
  uni.navigateTo({ url })
}

const openReminder = () => {
  uni.navigateTo({ url: 'reminder' })
}
</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>