cfc/cfc-frontend/pages/body/growth-curve.vue

<template>
  <view class="growth-container">
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">生长曲线</text>
      <view class="nav-placeholder"></view>
    </view>

    <view class="section-card">
      <view class="section-title">当前数据</view>
      <view class="current-stats" v-if="latestRecord">
        <view class="stat-box">
          <text class="stat-val">{{ latestRecord.heightCm || '--' }}</text>
          <text class="stat-unit">cm</text>
          <text class="stat-label">身高</text>
        </view>
        <view class="stat-box">
          <text class="stat-val">{{ latestRecord.weightKg || '--' }}</text>
          <text class="stat-unit">kg</text>
          <text class="stat-label">体重</text>
        </view>
        <view class="stat-box">
          <text class="stat-val">{{ latestRecord.bmi || '--' }}</text>
          <text class="stat-unit">BMI</text>
          <text class="stat-label">指数</text>
        </view>
      </view>
      <view class="current-stats" v-else>
        <view class="stat-box"><text class="stat-val">--</text><text class="stat-label">暂无数据</text></view>
      </view>
    </view>

    <view class="section-card">
      <view class="section-title">身高趋势</view>
      <view class="chart-placeholder">
        <view class="chart-svg">
          <view class="chart-line" v-for="(pt, idx) in heightPoints" :key="idx"
            :style="{ left: pt.x + '%', bottom: pt.y + '%' }">
            <view class="chart-dot"></view>
          </view>
          <view class="chart-axis-y">
            <text class="axis-label" v-for="(l, i) in ['150cm','130cm','110cm','90cm']" :key="i"
              :style="{ bottom: (i * 25) + '%' }">{{ l }}</text>
          </view>
          <view class="chart-no-data" v-if="heightPoints.length < 2">
            <text>记录更多数据后将显示生长趋势曲线</text>
          </view>
        </view>
      </view>
    </view>

    <view class="section-card">
      <view class="section-title">体重趋势</view>
      <view class="chart-placeholder">
        <view class="chart-svg">
          <view class="chart-line" v-for="(pt, idx) in weightPoints" :key="idx"
            :style="{ left: pt.x + '%', bottom: pt.y + '%' }">
            <view class="chart-dot"></view>
          </view>
          <view class="chart-axis-y">
            <text class="axis-label" v-for="(l, i) in ['50kg','40kg','30kg','20kg']" :key="i"
              :style="{ bottom: (i * 25) + '%' }">{{ l }}</text>
          </view>
          <view class="chart-no-data" v-if="weightPoints.length < 2">
            <text>记录更多数据后将显示体重趋势曲线</text>
          </view>
        </view>
      </view>
    </view>

    <view class="section-card">
      <view class="section-title">生长记录列表</view>
      <view class="record-list">
        <view class="record-item" v-for="item in growthRecords" :key="item.id">
          <view class="record-date">{{ item.recordDate ? item.recordDate.substring(0,10) : '' }}</view>
          <view class="record-data">
            <text class="data-item" v-if="item.heightCm">{{ item.heightCm }}cm</text>
            <text class="data-item" v-if="item.weightKg">{{ item.weightKg }}kg</text>
            <text class="data-item" v-if="item.bmi">BMI {{ item.bmi }}</text>
          </view>
        </view>
        <view class="record-empty" v-if="growthRecords.length === 0"><text>暂无生长记录</text></view>
      </view>
    </view>

    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      childId: null,
      growthRecords: [],
      latestRecord: null
    }
  },
  computed: {
    heightPoints: function() {
      return this.calcPoints('heightCm')
    },
    weightPoints: function() {
      return this.calcPoints('weightKg')
    }
  },
  onLoad: function(options) {
    this.childId = options.childId ? parseInt(options.childId) : null
    if (this.childId) this.loadRecords()
  },
  methods: {
    calcPoints: function(field) {
      var records = this.growthRecords.slice().reverse()
      var values = records.map(function(r) { return parseFloat(r[field]) }).filter(function(v) { return v && v > 0 })
      if (values.length < 2) return []
      var min = Math.min.apply(null, values)
      var max = Math.max.apply(null, values)
      var range = max - min || 1
      var spacing = 80 / (values.length - 1)
      return values.map(function(v, i) {
        return { x: 10 + i * spacing, y: 10 + ((v - min) / range) * 70 }
      })
    },
    loadRecords: function() {
      var self = this
      healthRequest('/api/health/growth/list', { memberId: this.childId }).then(function(res) {
        if (res.data) {
          self.growthRecords = res.data
          if (res.data.length > 0) self.latestRecord = res.data[0]
        }
      }).catch(function() {
        // Use mock data for demo
        self.growthRecords = [
          { id: 1, recordDate: '2026-01-15', heightCm: 110.5, weightKg: 18.2, bmi: 14.9 },
          { id: 2, recordDate: '2026-02-15', heightCm: 111.2, weightKg: 18.5, bmi: 14.9 },
          { id: 3, recordDate: '2026-03-15', heightCm: 112.0, weightKg: 19.0, bmi: 15.1 }
        ]
        self.latestRecord = self.growthRecords[self.growthRecords.length - 1]
      })
    },
    goBack: function() { uni.navigateBack() }
  }
}

function healthRequest(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: config.API_BASE_URL + url,
      method: 'POST',
      data: data,
      header: { 'Content-Type': 'application/json', 'Authorization': token ? 'Bearer ' + token : '' },
      success: function(res) { if (res.data.code === 200) resolve(res.data); else reject(res.data) },
      fail: function(err) { reject(err) }
    })
  })
}
</script>

<style scoped>
.growth-container { min-height: 100vh; background: #f5f7fa; padding-bottom: 60rpx; }
.nav-bar { position: sticky; top: 0; background: #fff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06); z-index: 100; }
.nav-back { font-size: 32rpx; color: #5B9BD5; }
.nav-title { font-size: 32rpx; font-weight: bold; color: #333; }
.nav-placeholder { width: 80rpx; }
.section-card { margin: 20rpx 30rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.section-title { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; }
.current-stats { display: flex; flex-direction: row; justify-content: space-around; }
.stat-box { display: flex; flex-direction: column; align-items: center; }
.stat-val { font-size: 44rpx; font-weight: bold; color: #FF8C42; }
.stat-unit { font-size: 22rpx; color: #999; }
.stat-label { font-size: 24rpx; color: #666; margin-top: 4rpx; }
.chart-placeholder { background: #FFFBEB; border-radius: 16rpx; padding: 20rpx; min-height: 300rpx; position: relative; }
.chart-svg { width: 100%; height: 300rpx; position: relative; }
.chart-line { position: absolute; width: 20rpx; height: 20rpx; }
.chart-dot { width: 16rpx; height: 16rpx; background: #FF8C42; border-radius: 50%; }
.chart-axis-y { position: absolute; left: 0; top: 0; bottom: 30rpx; width: 80rpx; }
.axis-label { position: absolute; font-size: 18rpx; color: #999; }
.chart-no-data { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; color: #ccc; text-align: center; }
.record-list { display: flex; flex-direction: column; }
.record-item { display: flex; flex-direction: row; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.record-date { font-size: 24rpx; color: #999; width: 160rpx; flex-shrink: 0; }
.record-data { display: flex; flex-direction: row; flex-wrap: wrap; flex: 1; }
.data-item { font-size: 26rpx; color: #333; margin-right: 16rpx; }
.record-empty { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
.bottom-spacer { height: 60rpx; }
</style>