hms/apps/miniprogram-uniapp/src/pages-sub/pkg-health/trend/index.vue

<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]">
    <view class="page-content">
      <text class="page-title">健康趋势</text>

      <!-- 指标切换 -->
      <view class="tab-group">
        <view v-for="tab in tabs" :key="tab.key"
          :class="['tab-item', { active: activeTab === tab.key }]"
          @tap="switchTab(tab.key)"
        >
          {{ tab.name }}
        </view>
      </view>

      <!-- 趋势图（纯 CSS 柱状图） -->
      <view class="chart-card card">
        <Loading v-if="loading" text="加载中..." />
        <EmptyState v-else-if="trendData.length === 0" icon="📊" title="暂无趋势数据" />
        <view v-else class="bar-chart">
          <view v-for="(item, idx) in trendData" :key="idx" class="bar-group">
            <view class="bar" :style="{ height: getBarHeight(item.value) + '%' }" />
            <text class="bar-label">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 数据列表 -->
      <view v-if="trendData.length > 0" class="data-list card">
        <view v-for="(item, idx) in trendData" :key="idx" class="data-row">
          <text class="data-date">{{ item.label }}</text>
          <text class="data-value">{{ item.value }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTrend } from '@/services/health'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()
const tabs = [
  { key: 'heart_rate', name: '心率' },
  { key: 'blood_pressure', name: '血压' },
  { key: 'blood_sugar', name: '血糖' },
  { key: 'weight', name: '体重' },
]

const activeTab = ref('heart_rate')
const loading = ref(false)
const trendData = ref<{ label: string; value: number }[]>([])

function switchTab(key: string) {
  activeTab.value = key
  fetchTrend()
}

function getBarHeight(value: number): number {
  const max = Math.max(...trendData.value.map(d => d.value), 1)
  return (value / max) * 80
}

async function fetchTrend() {
  loading.value = true
  try {
    const res = await getTrend(activeTab.value, '7d')
    trendData.value = (res?.data_points || []).map((item) => ({
      label: item.date || '',
      value: Number(item.value) || 0,
    }))
  } catch {
    trendData.value = []
  }
  loading.value = false
}

onLoad(() => { fetchTrend() })
onMounted(fetchTrend)
</script>

<style lang="scss" scoped>
.page-scroll { height: 100vh; background: $bg; }
.page-content { padding: 28px 24px 120px; }
.page-title { @include section-title; }
.card { @include card; }

.tab-group {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
}

.tab-item {
  padding: 12px 24px;
  min-height: $touch-min;
  display: flex;
  align-items: center;
  border-radius: $r-pill;
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  background: $card;
  white-space: nowrap;
  box-shadow: $shadow-sm;

  &.active {
    background: $pri;
    color: $white;
  }
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 240px;
  padding: 20px 0;
}

.bar-group {
  @include flex-center;
  flex-direction: column;
  flex: 1;
}

.bar {
  width: 32px;
  background: $pri;
  border-radius: 8px 8px 0 0;
  min-height: 4px;
}

.bar-label {
  font-size: var(--tk-font-micro);
  color: $tx3;
  margin-top: 8px;
}

.data-list { margin-top: 16px; }

.data-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid $bd-l;

  &:last-child { border-bottom: none; }
}

.data-date {
  font-size: var(--tk-font-body-sm);
  color: $tx2;
}

.data-value {
  font-size: var(--tk-font-num);
  font-weight: bold;
  color: $pri;
  @include serif-number;
}
</style>