cfc/cfc-frontend/components/HealthDimensionsSection.vue

<template>
  <view class="health-dimensions-section">
    <view class="section-header">
      <text class="section-title">七维健康全景</text>
      <text class="section-more" @click="goHealthDimensions">查看详情 ›</text>
    </view>

    <!-- 加载态 -->
    <view v-if="!healthData" class="loading-state">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 维度列表（无数据时显示7项默认值，分数为0） -->
    <view v-else class="dimension-grid">
      <view
        class="dimension-item"
        v-for="dim in displayDimensions"
        :key="dim.dimension || dim.key"
        @click="goDimensionDetail(dim)">
        <text class="dimension-icon">{{ getDimIcon(dim.dimension || dim.key) }}</text>
        <text class="dimension-name">{{ dim.label }}</text>
        <view class="dimension-score-bar">
          <view
            class="dimension-score-fill"
            :style="'width:' + Math.min(100, (dim.score || 0)) + '%'"></view>
        </view>
        <text class="dimension-score">{{ dim.score || 0 }}分</text>
      </view>
    </view>
  </view>
</template>

<script>
var DIM_ICONS = {
  growth: '\u{1F4AA}',
  sleep: '\u{1F634}',
  vision: '\u{1F441}',
  immunity: '\u{1F6E1}',
  nutrition: '\u{1F966}',
  gut: '\u{1F9A9}',
  exercise: '\u{1F3C3}',
  body: '\u{1F3C3}',
  mind: '\u{1F9E0}',
  wisdom: '\u{1F4D6}',
  action: '\u{1F331}',
  wealth: '\u{1F4B0}',
  social: '\u{1F91D}',
  family: '\u{1F46A}'
}

var DEFAULT_DIMENSIONS = [
  { dimension: 'growth', label: '成长发育', score: 0 },
  { dimension: 'sleep', label: '睡眠', score: 0 },
  { dimension: 'vision', label: '视力', score: 0 },
  { dimension: 'immunity', label: '免疫力', score: 0 },
  { dimension: 'nutrition', label: '营养', score: 0 },
  { dimension: 'gut', label: '肠道', score: 0 },
  { dimension: 'exercise', label: '运动', score: 0 }
]

export default {
  props: {
    healthData: { type: Object, default: null },
    activeChildId: { type: [Number, String], default: null }
  },
  computed: {
    displayDimensions: function() {
      if (this.healthData && this.healthData.dimensions && this.healthData.dimensions.length > 0) {
        return this.healthData.dimensions
      }
      return DEFAULT_DIMENSIONS
    }
  },
  methods: {
    getDimIcon: function(key) {
      return DIM_ICONS[key] || '\u{2B50}'
    },
    goHealthDimensions: function() {
      if (!this.activeChildId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      uni.navigateTo({ url: '/pages/body-detail/health-dimensions?childId=' + this.activeChildId })
    },
    goDimensionDetail: function(dim) {
      var key = dim.dimension || dim.key
      if (!key) return
      uni.navigateTo({ url: '/pages/body-detail/dimension-detail?dimension=' + key + '&childId=' + this.activeChildId })
    }
  }
}
</script>

<style scoped>
.health-dimensions-section {
  margin: 20rpx 20rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 24rpx 24rpx 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #FF8C42;
}
.loading-state, .empty-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}
.loading-text, .empty-tip {
  font-size: 24rpx;
  color: #999;
}
.dimension-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.dimension-item {
  width: calc(33.33% - 14rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
}
.dimension-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}
.dimension-name {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 10rpx;
}
.dimension-score-bar {
  width: 100%;
  height: 8rpx;
  background: #F5F5F5;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 6rpx;
}
.dimension-score-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF8C42, #FFB088);
  border-radius: 4rpx;
  transition: width 0.3s;
}
.dimension-score {
  font-size: 22rpx;
  color: #FF8C42;
  font-weight: 500;
}
</style>