cfc/cfc-frontend/pages/profile/components/ProfileBadges.vue

<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">🏅 成就徽章</text>
      <text class="section-more" @click="goAllBadges">全部 ›</text>
    </view>
    <view class="badge-grid">
      <view class="badge-item" v-for="badge in badges" :key="badge.id">
        <view :class="['badge-icon-wrap', badge.unlocked ? 'unlocked' : 'locked']">
          <text class="badge-icon">{{ badge.icon }}</text>
        </view>
        <text class="badge-name">{{ badge.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserBadges } from '../../../utils/api.js'

export default {
  name: 'ProfileBadges',
  data() {
    return {
      badgesLoaded: false,
      badges: [
        { id: 1, icon: '🏆', name: '连续7天', unlocked: false },
        { id: 2, icon: '⭐', name: '积分达人', unlocked: false },
        { id: 3, icon: '🔥', name: '执行之星', unlocked: false },
        { id: 4, icon: '🌟', name: '学习先锋', unlocked: false }
      ]
    }
  },
  onShow() {
    if (!uni.getStorageSync('token')) return
    this.loadBadges()
  },
  methods: {
    getDefaultBadges() {
      return [
        { id: 1, icon: '\u{1F3C6}', name: '连续7天', unlocked: false },
        { id: 2, icon: '\u{2B50}', name: '积分达人', unlocked: false },
        { id: 3, icon: '\u{1F525}', name: '执行之星', unlocked: false },
        { id: 4, icon: '\u{1F31F}', name: '学习先锋', unlocked: false },
        { id: 5, icon: '\u{1F4AA}', name: '体能达人', unlocked: false },
        { id: 6, icon: '\u{1F9E0}', name: '心智成长', unlocked: false },
        { id: 7, icon: '👨‍👩‍👧‍👦', name: '家庭之星', unlocked: false },
        { id: 8, icon: '\u{1F4DA}', name: '阅读达人', unlocked: false },
        { id: 9, icon: '\u{1F3AF}', name: '全能冠军', unlocked: false }
      ]
    },
    loadBadges() {
      let memberId = uni.getStorageSync('currentChildId') || null
      if (!memberId) {
        // Try to get first child id
        const children = uni.getStorageSync('childrenList')
        if (children && children.length > 0) {
          memberId = children[0].id
        }
      }

      const defaultBadges = this.getDefaultBadges()

      if (memberId) {
        getUserBadges(memberId).then((res) => {
          if (res.code === 200 && res.data && res.data.length > 0) {
            const list = res.data.map((item, i) => ({
              id: item.badge && item.badge.id || i + 1,
              icon: item.badge && item.badge.icon || '⭐',
              name: item.badge && item.badge.name || '未知勋章',
              unlocked: true
            }))
            while (list.length < 9) {
              const idx = list.length
              list.push({
                id: defaultBadges[idx].id,
                icon: defaultBadges[idx].icon,
                name: defaultBadges[idx].name,
                unlocked: false
              })
            }
            this.badges = list.slice(0, 9)
          } else {
            this.loadBadgesLocal(defaultBadges)
          }
        }).catch(() => {
          this.loadBadgesLocal(defaultBadges)
        })
      } else {
        this.loadBadgesLocal(defaultBadges)
      }
    },
    loadBadgesLocal(defaultBadges) {
      const streakDays = parseInt(uni.getStorageSync('streakDays') || 0)
      const totalPoints = parseInt(uni.getStorageSync('totalPoints') || 0)
      const completedTasks = parseInt(uni.getStorageSync('completedTasks') || 0)
      const badges = JSON.parse(JSON.stringify(defaultBadges))
      if (streakDays >= 7) badges[0].unlocked = true
      if (totalPoints >= 1000) badges[1].unlocked = true
      if (completedTasks >= 50) badges[2].unlocked = true
      if (totalPoints >= 500) badges[3].unlocked = true
      if (streakDays >= 30) badges[4].unlocked = true
      if (completedTasks >= 100) badges[8].unlocked = true
      this.badges = badges
      this.badgesLoaded = true
    },
    goAllBadges() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    }
  }
}
</script>

<style scoped>
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}

.badge-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.badge-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16rpx;
}
.badge-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  font-size: 40rpx;
}
.badge-icon-wrap.unlocked {
  background: linear-gradient(135deg, #fdfbfb, #ebedee);
  box-shadow: 0 4rpx 16rpx rgba(253,160,91,0.3);
}
.badge-icon-wrap.locked {
  background: #f0f0f0;
  opacity: 0.5;
}
.badge-name {
  font-size: 20rpx;
  color: #999;
  text-align: center;
}
</style>