cfc/cfc-frontend/pages/health/nutrition-profile.vue

<template>
  <view class="nutrition-profile">
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">营养档案</text>
      <view class="nav-placeholder"></view>
    </view>

    <view class="profile-header" v-if="childName">
      <view class="child-info">
        <text class="child-name">{{ childName }}</text>
        <text class="child-age" v-if="childAge">{{ childAge }}岁</text>
      </view>
    </view>

    <view class="score-section" v-if="scores">
      <view class="main-score-ring">
        <view class="score-ring-outer">
          <view class="score-ring-inner">
            <text class="score-value">{{ scores.overall || '--' }}</text>
            <text class="score-label">综合评分</text>
          </view>
        </view>
      </view>
      <view class="score-items">
        <view class="score-item">
          <text class="score-num">{{ scores.gutHealth || '--' }}</text>
          <text class="score-name">肠道健康</text>
        </view>
        <view class="score-item">
          <text class="score-num">{{ scores.nutrition || '--' }}</text>
          <text class="score-name">营养状况</text>
        </view>
        <view class="score-item">
          <text class="score-num">{{ scores.chronicDisease || '--' }}</text>
          <text class="score-name">慢病控制</text>
        </view>
        <view class="score-item">
          <text class="score-num">{{ scores.gutBalance || '--' }}</text>
          <text class="score-name">菌群平衡</text>
        </view>
      </view>
    </view>

    <view class="empty-state" v-if="!scores && !loading">
      <text class="empty-icon">📋</text>
      <text class="empty-title">暂无健康报告</text>
      <text class="empty-desc">完成首次健康检测后，这里将展示您的营养档案</text>
      <view class="empty-btn" @click="goToAssessment">
        <text class="empty-btn-text">预约健康检测</text>
      </view>
    </view>

    <view class="section" v-if="abnormalIndicators && abnormalIndicators.length > 0">
      <view class="section-title-wrap">
        <text class="section-title">⚠️ 需关注指标</text>
        <text class="section-count">{{ abnormalIndicators.length }}项</text>
      </view>
      <view class="indicator-list">
        <view class="indicator-item" v-for="item in abnormalIndicators" :key="item.id">
          <view class="indicator-left">
            <text class="indicator-emoji">{{ getStatusEmoji(item.status) }}</text>
            <view class="indicator-info">
              <text class="indicator-name">{{ item.indicatorName }}</text>
              <text class="indicator-value">{{ item.indicatorValue }}{{ item.unit }} · {{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="section-more" @click="goToIndicators">
        <text class="section-more-text">查看全部指标 →</text>
      </view>
    </view>

    <view class="section" v-if="scoreTrend && scoreTrend.length > 1">
      <view class="section-title-wrap">
        <text class="section-title">📊 变化趋势</text>
      </view>
      <view class="trend-chart">
        <canvas canvas-id="trendCanvas" id="trendCanvas" class="trend-canvas" @touchstart.prevent></canvas>
      </view>
      <view class="trend-legend">
        <view class="legend-item">
          <view class="legend-color" style="background:#F97316"></view>
          <text class="legend-text">综合评分</text>
        </view>
        <view class="legend-item">
          <view class="legend-color" style="background:#10B981"></view>
          <text class="legend-text">肠道健康</text>
        </view>
      </view>
    </view>

    <view class="section" v-if="deficiencyRecords && deficiencyRecords.length > 0">
      <view class="section-title-wrap">
        <text class="section-title">🔬 营养缺乏分析</text>
        <text class="section-count">{{ deficiencyRecords.length }}项</text>
      </view>
      <view class="deficiency-list">
        <view class="deficiency-item" v-for="record in deficiencyRecords" :key="record.nutrient">
          <view class="deficiency-info">
            <text class="deficiency-name">{{ record.nutrient }}</text>
            <text class="deficiency-level">{{ getDeficiencyLabel(record) }}</text>
          </view>
          <view class="deficiency-bar">
            <view class="deficiency-fill" :style="{ width: (record.severity * 100) + '%', background: getSeverityColor(record.severity) }"></view>
          </view>
          <view class="deficiency-foods" v-if="record.foodSuggestions">
            <text>推荐食物：{{ record.foodSuggestions }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="section" v-if="latestReports && latestReports.length > 0">
      <view class="section-title-wrap">
        <text class="section-title">📋 历史报告</text>
      </view>
      <view class="report-list">
        <view class="report-item" v-for="r in latestReports" :key="r.id" @click="goToReport(r.id)">
          <view class="report-item-left">
            <text class="report-item-type">{{ getReportTypeName(r.reportType) }}</text>
            <text class="report-item-date">{{ formatDate(r.reportDate) }}</text>
          </view>
          <view class="report-item-score">
            <text class="report-score-val">{{ r.overallScore || '--' }}</text>
            <text class="report-score-label">分</text>
          </view>
        </view>
      </view>
    </view>

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

    <view class="fab" @click="goToAIRecommend" v-if="scores">
      <text class="fab-icon">🥗</text>
      <text class="fab-text">获取营养方案</text>
    </view>
  </view>
</template>

<script>
import { getChildNutritionProfile, getDeficiencyAnalysis } from '@/utils/api.js'
import { parseDate } from '@/utils/format.js'

export default {
  data() {
    return {
      memberId: null,
      childName: '',
      childAge: '',
      childGender: '',
      scores: null,
      abnormalIndicators: [],
      scoreTrend: [],
      deficiencyRecords: [],
      latestReports: [],
      loading: false
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    if (!this.memberId) {
      var savedChildId = uni.getStorageSync('currentChildId')
      if (savedChildId) this.memberId = parseInt(savedChildId)
    }
    if (this.memberId) {
      this.loadProfile()
    }
  },
  onReady: function() {
    if (this.scoreTrend && this.scoreTrend.length > 1) {
      this.drawTrendChart()
    }
  },
  methods: {
    loadProfile: function() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...' })
      getChildNutritionProfile(self.memberId).then(function(res) {
        uni.hideLoading()
        self.loading = false
        if (res.code === 200 && res.data) {
          var d = res.data
          self.childName = d.childName || ''
          self.childAge = d.childAge || ''
          self.childGender = d.childGender || ''
          self.scores = d.scores
          self.abnormalIndicators = d.abnormalIndicators || []
          self.scoreTrend = d.scoreTrend || []
          self.latestReports = d.latestReports || []
          if (d.nutritionProfile) {
            self.nutritionProfile = d.nutritionProfile
          }
        }
      }).catch(function(e) {
        uni.hideLoading()
        self.loading = false
        console.log('加载营养档案失败', e)
      })

      getDeficiencyAnalysis(self.memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.deficiencyRecords = res.data
        }
      }).catch(function(e) {
        console.log('加载缺乏分析失败', e)
      })
    },
    drawTrendChart: function() {
      var ctx = uni.createCanvasContext('trendCanvas', this)
      var trend = this.scoreTrend
      if (!trend || trend.length < 2) return
      var cw = 690
      var ch = 300
      var padding = 40
      var xStep = (cw - padding * 2) / (trend.length - 1)
      var yMin = 0
      var yMax = 100

      ctx.setStrokeStyle('#F0F0F0')
      ctx.setLineWidth(1)
      for (var i = 0; i <= 4; i++) {
        var y = padding + (ch - padding * 2) * (i / 4)
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(cw - padding, y)
        ctx.stroke()
      }

      var drawLine = function(key, color) {
        ctx.setStrokeStyle(color)
        ctx.setLineWidth(3)
        ctx.beginPath()
        for (var j = 0; j < trend.length; j++) {
          var val = trend[j][key] || 0
          var x = padding + j * xStep
          var y = padding + (ch - padding * 2) * (1 - (val - yMin) / (yMax - yMin))
          if (j === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        }
        ctx.stroke()
        ctx.draw(true)
      }

      drawLine('overall', '#F97316')
      drawLine('gutHealth', '#10B981')
    },
    getStatusEmoji: function(status) {
      if (status === '偏低') return '🔴'
      if (status === '偏高') return '🔴'
      if (status === '注意') return '🟡'
      return '🟢'
    },
    getDeficiencyLabel: function(record) {
      if (record.deficiencyType === 'deficiency') {
        if (record.severity >= 0.7) return '严重缺乏'
        if (record.severity >= 0.3) return '缺乏'
        return '轻度不足'
      }
      if (record.deficiencyType === 'excess') return '偏高'
      if (record.deficiencyType === 'borderline') return '边界值'
      return '未分类'
    },
    getSeverityColor: function(severity) {
      if (severity >= 0.7) return '#EF4444'
      if (severity >= 0.3) return '#F59E0B'
      return '#10B981'
    },
    getReportTypeName: function(type) {
      if (type === 'gut_flora') return '肠道检测'
      if (type === 'physical_exam') return '体检报告'
      if (type === 'blood') return '血液检测'
      return type || '健康报告'
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
      var day = ('' + d.getDate()).padStart(2, '0')
      return m + '-' + day
    },
    goBack: function() {
      uni.navigateBack()
    },
    goToReport: function(id) {
      uni.navigateTo({ url: '/pages/body/health-report?reportId=' + id + '&memberId=' + this.memberId })
    },
    goToIndicators: function() {
      uni.navigateTo({ url: '/pages/body/health-report?memberId=' + this.memberId })
    },
    goToAssessment: function() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },
    goToAIRecommend: function() {
      uni.navigateTo({ url: '/pages/meal/recommend?memberId=' + this.memberId })
    }
  }
}
</script>

<style scoped>
.nutrition-profile {
  min-height: 100vh;
  background: #FFF7ED;
  padding-bottom: 40rpx;
}

.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: #F97316;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.nav-placeholder {
  width: 80rpx;
}

.profile-header {
  padding: 40rpx 30rpx 20rpx;
}
.child-info {
  display: flex;
  flex-direction: column;
}
.child-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #1F2937;
}
.child-age {
  font-size: 26rpx;
  color: #6B7280;
  margin-top: 8rpx;
}

.score-section {
  margin: 0 20rpx;
  background: white;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}
.main-score-ring {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}
.score-ring-outer {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100rpx;
  border: 12rpx solid #F97316;
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-value {
  font-size: 56rpx;
  font-weight: bold;
  color: #F97316;
}
.score-label {
  font-size: 24rpx;
  color: #9CA3AF;
}
.score-items {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.score-num {
  font-size: 32rpx;
  font-weight: bold;
  color: #374151;
}
.score-name {
  font-size: 22rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 30rpx;
}
.empty-icon {
  font-size: 80rpx;
}
.empty-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #374151;
  margin-top: 20rpx;
}
.empty-desc {
  font-size: 28rpx;
  color: #9CA3AF;
  text-align: center;
  margin: 16rpx 0 30rpx;
}
.empty-btn {
  background: #F97316;
  border-radius: 40rpx;
  padding: 20rpx 60rpx;
}
.empty-btn-text {
  color: white;
  font-size: 28rpx;
}

.section {
  background: white;
  border-radius: 24rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}
.section-title-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #374151;
}
.section-count {
  font-size: 24rpx;
  color: #9CA3AF;
}
.indicator-list {
  display: flex;
  flex-direction: column;
}
.indicator-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #F3F4F6;
}
.indicator-item:last-child {
  border-bottom: none;
}
.indicator-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.indicator-emoji {
  font-size: 28rpx;
  margin-right: 16rpx;
}
.indicator-info {
  display: flex;
  flex-direction: column;
}
.indicator-name {
  font-size: 28rpx;
  color: #374151;
  font-weight: 500;
}
.indicator-value {
  font-size: 24rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
}
.section-more {
  text-align: center;
  padding-top: 20rpx;
}
.section-more-text {
  color: #F97316;
  font-size: 26rpx;
}

.trend-canvas {
  width: 100%;
  height: 300rpx;
}
.trend-legend {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 16rpx;
}
.legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 30rpx;
}
.legend-item:first-child {
  margin-left: 0;
}
.legend-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 4rpx;
  margin-right: 8rpx;
}
.legend-text {
  font-size: 24rpx;
  color: #6B7280;
}

.deficiency-list {
  display: flex;
  flex-direction: column;
}
.deficiency-item {
  display: flex;
  flex-direction: column;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F3F4F6;
}
.deficiency-item:last-child {
  border-bottom: none;
}
.deficiency-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.deficiency-name {
  font-size: 28rpx;
  color: #374151;
  font-weight: 500;
}
.deficiency-level {
  font-size: 24rpx;
  color: #9CA3AF;
}
.deficiency-bar {
  height: 12rpx;
  background: #F3F4F6;
  border-radius: 6rpx;
  overflow: hidden;
}
.deficiency-fill {
  height: 100%;
  border-radius: 6rpx;
}
.deficiency-foods {
  font-size: 22rpx;
  color: #6B7280;
  margin-top: 8rpx;
}

.report-list {
  display: flex;
  flex-direction: column;
}
.report-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F3F4F6;
}
.report-item:last-child {
  border-bottom: none;
}
.report-item:active {
  opacity: 0.7;
}
.report-item-left {
  display: flex;
  flex-direction: column;
}
.report-item-type {
  font-size: 28rpx;
  color: #374151;
  font-weight: 500;
}
.report-item-date {
  font-size: 22rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
}
.report-item-score {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.report-score-val {
  font-size: 36rpx;
  font-weight: bold;
  color: #F97316;
}
.report-score-label {
  font-size: 20rpx;
  color: #9CA3AF;
  margin-left: 4rpx;
}

.fab {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.4);
  z-index: 200;
}
.fab-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}
.fab-text {
  font-size: 30rpx;
  font-weight: 600;
}

.bottom-spacer {
  height: 130rpx;
}
</style>