cfc/cfc-frontend/components/BadgeGrid.vue

<template>
  <view class="badge-grid" v-if="badges.length > 0">
    <view class="badge-grid-inner">
      <view class="badge-cell" v-for="badge in badges" :key="badge.id"
        :class="{ 'badge-cell--locked': !badge.unlocked }">
        <view class="badge-icon-wrap" :class="{ 'badge-icon-wrap--locked': !badge.unlocked }">
          <text class="badge-icon">{{ badge.unlocked ? badge.icon : '🔒' }}</text>
        </view>
        <text class="badge-name">{{ badge.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    badges: { type: Array, default: function() { return [] } }
  }
}
</script>

<style scoped>
.badge-grid {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.badge-grid-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.badge-cell {
  width: calc(33.33% - 11rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rpx 0;
}
.badge-cell--locked { opacity: 0.5; }
.badge-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.badge-icon-wrap--locked { background: #E2E8F0; }
.badge-icon { font-size: 36rpx; }
.badge-name { font-size: 22rpx; color: #333; text-align: center; }
</style>