cfc/cfc-frontend/components/WealthSubScores.vue

<template>
  <view class="wealth-sub-scores">
    <view class="section-header">
      <text class="title">{{ isParent ? '💧 财富维度构成' : '💧 富能量构成' }}</text>
    </view>

    <view class="sub-grid">
      <view class="drop-wrap" v-for="item in subItems" :key="item.key">
        <view class="drop">
          <view class="drop-fill" :style="{ height: item.score + '%' }"></view>
          <text class="drop-score">{{ item.score }}</text>
        </view>
        <text class="drop-label">{{ item.label }}</text>
        <text class="drop-weight">权重 {{ item.weight }}%</text>
      </view>
    </view>

    <view class="drop-tip" v-if="tipText">
      <text class="drop-tip-text">{{ tipText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WealthSubScores',
  props: {
    role: {
      type: String,
      default: 'parent'
    },
    skill: {
      type: Number,
      default: 0
    },
    altruism: {
      type: Number,
      default: 0
    },
    income: {
      type: Number,
      default: 0
    },
    fx: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isParent() {
      return this.role === 'parent'
    },
    subItems() {
      if (this.isParent) {
        return [
          { key: 'skill', label: '个人能力', score: this.skill, weight: 25 },
          { key: 'altruism', label: '利他贡献', score: this.altruism, weight: 30 },
          { key: 'income', label: 'CF值积累', score: this.income, weight: 35 },
          { key: 'fx', label: '财务素养', score: this.fx, weight: 10 }
        ]
      }
      return [
        { key: 'skill', label: '学业能力', score: this.skill, weight: 25 },
        { key: 'altruism', label: '利他贡献', score: this.altruism, weight: 30 },
        { key: 'income', label: '积分积累', score: this.income, weight: 35 },
        { key: 'fx', label: '财务素养', score: this.fx, weight: 10 }
      ]
    },
    tipText() {
      var items = this.subItems
      var filtered = items.filter(function(item) {
        return item.score > 0
      })
      if (filtered.length < 2) return ''
      var best = filtered.reduce(function(a, b) {
        return a.score >= b.score ? a : b
      })
      var worst = filtered.reduce(function(a, b) {
        return a.score <= b.score ? a : b
      })
      if (best.key === worst.key) return '均衡发展，继续保持！'
      return best.label + '表现优秀，建议提升' + worst.label
    }
  }
}
</script>

<style scoped>
.wealth-sub-scores {
  margin: 20rpx 30rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.section-header {
  margin-bottom: 20rpx;
}
.title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.sub-grid {
  display: flex;
  justify-content: space-between;
}
.drop-wrap {
  flex: 1;
  margin: 0 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drop-wrap:first-child {
  margin-left: 0;
}
.drop-wrap:last-child {
  margin-right: 0;
}
.drop {
  position: relative;
  width: 120rpx;
  height: 150rpx;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #FEF3C7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
  transition: height 0.8s ease;
}
.drop-score {
  position: relative;
  z-index: 1;
  font-size: 40rpx;
  font-weight: bold;
  color: #92400E;
}
.drop-label {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}
.drop-weight {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}
.drop-tip {
  margin-top: 20rpx;
  padding: 16rpx 20rpx;
  background: #FFF7ED;
  border-radius: 12rpx;
}
.drop-tip-text {
  font-size: 24rpx;
  color: #92400E;
}
</style>