cfc/cfc-frontend/components/member-detail-sections/body-section.vue

<template>
  <view class="body-section">
    <!-- 最新健康报告 -->
    <view class="section-card" v-if="healthReport">
      <view class="section-header">
        <text class="section-title">📋 最新健康报告</text>
      </view>
      <view class="report-card" @click="goReportDetail">
        <text class="report-score">{{ healthReport.overallScore || '--' }}</text>
        <text class="report-label">综合健康分</text>
      </view>
      <view class="report-meta">
        <text class="report-date">报告日期：{{ formatDate(healthReport.reportDate) }}</text>
      </view>
    </view>
    <view class="section-card" v-else-if="!loading && memberId">
      <view class="empty-state">
        <text class="empty-text">暂无健康报告</text>
        <text class="empty-sub">规划师录入后将自动显示</text>
      </view>
    </view>

    <!-- 七维健康图 -->
    <view class="section-card" v-if="dimensionOverview && dimensionOverview.dimensions">
      <view class="section-header">
        <text class="section-title">📊 七维健康图</text>
      </view>
      <RadarChart
        :dimensions="dimensionOverview.dimensions.map(function(d) { return { label: d.label, key: d.dimension } })"
        :scores="dimensionOverview.dimensions.map(function(d) { return d.score })"
        fillColor="#FF8C42"
        gridColor="#FED7AA"
        labelColor="#9A3412"
        :width="580"
        :height="400" />
    </view>

    <!-- 最近打卡 -->
    <view class="section-card" v-if="checkinList.length > 0">
      <view class="section-header">
        <text class="section-title">🏃 最近打卡</text>
      </view>
      <view class="checkin-item" v-for="item in checkinList" :key="item.id">
        <text class="checkin-type">{{ item.typeName || item.type }}</text>
        <text class="checkin-time">{{ formatDate(item.createTime) }}</text>
      </view>
    </view>

    <!-- 非孩子成员提示 -->
    <view class="section-card" v-if="!memberId && !loading">
      <view class="empty-state">
        <text class="empty-text">该成员暂无健康数据</text>
      </view>
    </view>

    <!-- 加载中 -->
    <view class="loading" v-if="loading">加载中...</view>
  </view>
</template>

<script>
import RadarChart from '../RadarChart.vue'
import { getHealthAnalysis, getDimensionOverview, getCheckinList } from '../../utils/api.js'

export default {
  components: { RadarChart },
  props: {
    memberId: { type: [Number, String], default: null },
    memberType: { type: String, default: '' },
    memberInfo: { type: Object, default: null },
    sandboxData: { type: Object, default: null },
    energyMap: { type: Object, default: null }
  },
  data: function() {
    return {
      loading: true,
      healthReport: null,
      dimensionOverview: null,
      checkinList: []
    }
  },
  mounted: function() {
    if (this.memberId) {
      this.loadData()
    } else {
      this.loading = false
    }
  },
  methods: {
    loadData: function() {
      var self = this
      getHealthAnalysis(this.memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.healthReport = res.data
        }
      }).catch(function(e) { console.log('加载健康分析失败', e) })

      getDimensionOverview({ memberId: this.memberId }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.dimensionOverview = res.data
        }
      }).catch(function(e) { console.log('加载维度概览失败', e) })

      getCheckinList({ memberId: this.memberId, page: 1, size: 3 }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.checkinList = Array.isArray(res.data) ? res.data : (res.data.records || [])
        }
      }).catch(function(e) { console.log('加载打卡记录失败', e) })

      this.loading = false
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate()
    },
    goReportDetail: function() {
      uni.navigateTo({ url: '/pages/body-detail/health-report?memberId=' + this.memberId })
    }
  }
}
</script>

<style scoped>
.body-section {}
.section-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.section-header {
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.report-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}
.report-score {
  font-size: 72rpx;
  font-weight: bold;
  color: #FF8C42;
}
.report-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
.report-meta {
  padding-top: 12rpx;
  border-top: 1rpx solid #f0f0f0;
}
.report-date {
  font-size: 24rpx;
  color: #999;
}
.checkin-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.checkin-type {
  font-size: 28rpx;
  color: #333;
}
.checkin-time {
  font-size: 24rpx;
  color: #999;
}
.empty-state {
  padding: 30rpx 0;
  text-align: center;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.empty-sub {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 8rpx;
}
.loading {
  text-align: center;
  padding: 40rpx;
  color: #999;
}
</style>