cfc/cfc-frontend/components/HealthBadge.vue

<template>
  <view class="health-badge" v-if="levelInfo">
    <view class="badge-icon-wrap" :class="'badge-lv-' + (levelInfo.levelNum || 1)">
      <text class="badge-icon">{{ levelInfo.badgeIcon || '🌱' }}</text>
    </view>
    <view class="badge-info">
      <text class="badge-title">{{ levelInfo.title || '健康探索者' }}</text>
      <view class="badge-level-row">
        <text class="badge-level">L{{ levelInfo.levelNum || 1 }}</text>
        <text class="badge-score">{{ score }} 分</text>
      </view>
      <view class="badge-progress-bar" v-if="progress < 100">
        <view class="badge-progress-fill" :style="{ width: progress + '%' }"></view>
      </view>
      <text class="badge-next" v-if="nextLevel && progress < 100">
        再{{ nextLevel.minScore - score }}分升级「{{ nextLevel.title }}」
      </text>
      <text class="badge-next" v-else-if="progress >= 100">
        已达最高等级！
      </text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    levelInfo: { type: Object, default: null },
    score: { type: Number, default: 0 },
    progress: { type: Number, default: 0 },
    nextLevel: { type: Object, default: null },
    streakDays: { type: Number, default: 0 }
  }
}
</script>

<style scoped>
.health-badge {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border-radius: 20rpx;
  margin: 0 20rpx 16rpx 20rpx;
}
.badge-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-lv-1 { background: #D1FAE5; }
.badge-lv-2 { background: #A7F3D0; }
.badge-lv-3 { background: #FEF3C7; }
.badge-lv-4 { background: #FED7AA; }
.badge-lv-5 { background: #FECDD3; }
.badge-icon { font-size: 40rpx; }
.badge-info { flex: 1; min-width: 0; }
.badge-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #065F46;
}
.badge-level-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 4rpx;
}
.badge-level {
  font-size: 22rpx;
  color: #047857;
  font-weight: 600;
}
.badge-score {
  font-size: 22rpx;
  color: #6B7280;
}
.badge-progress-bar {
  height: 8rpx;
  background: #D1FAE5;
  border-radius: 999rpx;
  overflow: hidden;
  margin-top: 8rpx;
}
.badge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #34D399);
  border-radius: 999rpx;
  transition: width 0.5s ease;
}
.badge-next {
  font-size: 20rpx;
  color: #6B7280;
  margin-top: 4rpx;
  display: block;
}
</style>