cfc/cfc-frontend/components/FamilyEnergyBar.vue

<template>
  <view class="family-energy-bar">
    <view class="bar-header">
      <text class="bar-icon">{{ dimensionIcon }}</text>
      <text class="bar-title">{{ dimensionName }}能量</text>
      <text class="bar-total-score">{{ familyScore }}</text>
    </view>
    <view class="bar-list">
      <view class="bar-row bar-row-family">
        <text class="bar-label">全家</text>
        <view class="bar-track">
          <view class="bar-fill" :style="{ width: familyScore + '%', background: dimensionColor }"></view>
        </view>
        <text class="bar-value">{{ familyScore }}</text>
      </view>
      <view
        class="bar-row bar-row-member"
        v-for="member in members"
        :key="member.memberId"
        @click="onMemberClick(member)"
      >
        <text class="bar-label">{{ member.name }}</text>
        <view class="bar-track">
          <view class="bar-fill" :style="{ width: getMemberScore(member) + '%', background: memberColor(member) }"></view>
        </view>
        <text class="bar-value">{{ getMemberScore(member) }}</text>
        <text class="bar-arrow">›</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dimensionCode: { type: String, required: true },
    sandboxData: { type: Object, default: null },
    dualDimension: { type: String, default: '' }
  },
  computed: {
    dimensionConfig: function() {
      var maps = {
        body:     { name: '身体', icon: '\u{1F3C3}', color: '#10B981' },
        mind:     { name: '心',   icon: '\u2764',    color: '#8B5CF6' },
        wisdom:   { name: '智',   icon: '\u{1F9E0}', color: '#3B82F6' },
        action:   { name: '行动', icon: '\u{1F3CB}', color: '#F97316' },
        wealth:   { name: '富',   icon: '\u{1F4B0}', color: '#F59E0B' }
      }
      return maps[this.dimensionCode] || { name: '', icon: '', color: '#999' }
    },
    dimensionIcon: function() { return this.dimensionConfig.icon },
    dimensionName: function() { return this.dimensionConfig.name },
    dimensionColor: function() { return this.dimensionConfig.color },
    familyScore: function() {
      if (!this.sandboxData) return 0
      return this.sandboxData[this.dimensionCode + 'Score'] || 0
    },
    members: function() {
      return this.sandboxData && this.sandboxData.members ? this.sandboxData.members : []
    }
  },
  methods: {
    getMemberScore: function(member) {
      return member[this.dimensionCode + 'Score'] || 0
    },
    memberColor: function(member) {
      var score = this.getMemberScore(member)
      if (score >= 80) return '#10B981'
      if (score >= 60) return '#3B82F6'
      if (score >= 40) return '#F97316'
      return '#EF4444'
    },
    onMemberClick: function(member) {
      var detailPages = {
        body:   '/pages/body/member-body-detail',
        mind:   '/pages/mind/member-mind-detail',
        wisdom: '/pages/mind/member-mind-detail',
        action: '/pages/action/member-action-detail'
      }
      var page = detailPages[this.dimensionCode]
      if (page) {
        uni.navigateTo({
          url: page + '?childId=' + member.memberId + '&memberName=' + encodeURIComponent(member.name) + '&dimensionCode=' + this.dimensionCode
        })
      }
    }
  }
}
</script>

<style scoped>
.family-energy-bar {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.bar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.bar-icon { font-size: 32rpx; margin-right: 8rpx; }
.bar-title { font-size: 28rpx; font-weight: bold; color: #333; flex: 1; }
.bar-total-score { font-size: 40rpx; font-weight: bold; color: #F97316; }
.bar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
  padding: 8rpx 0;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-row-member:active { opacity: 0.6; }
.bar-label {
  font-size: 24rpx;
  color: #666;
  width: 80rpx;
  flex-shrink: 0;
}
.bar-track {
  flex: 1;
  height: 24rpx;
  background: #f0f0f0;
  border-radius: 12rpx;
  overflow: hidden;
  margin: 0 12rpx;
}
.bar-fill {
  height: 100%;
  border-radius: 12rpx;
  transition: width 0.5s ease;
}
.bar-value {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  width: 60rpx;
  text-align: right;
  flex-shrink: 0;
}
.bar-arrow {
  font-size: 28rpx;
  color: #ccc;
  margin-left: 8rpx;
}
.bar-row-family .bar-fill {
  background: linear-gradient(90deg, #F97316, #FB923C);
}
</style>