cfc/cfc-frontend/pages/rewards/badge.vue

<template>
  <view class="badge-container">
    <!-- 统计概览 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-num">{{ stats.total || 0 }}</text>
        <text class="stat-label">获得勋章</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ stats.active || 0 }}</text>
        <text class="stat-label">有效</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ totalBadges || 0 }}</text>
        <text class="stat-label">总勋章</text>
      </view>
    </view>

    <!-- 分类筛选 -->
    <view class="filter-bar">
      <view
        v-for="cat in categories"
        :key="cat.code"
        :class="['filter-chip', currentCategory === cat.code ? 'active' : '']"
        @click="onCategoryChange(cat.code)"
      >
        {{ cat.label }}
      </view>
    </view>

    <!-- 勋章网格 -->
    <view class="badge-grid">
      <view
        v-for="item in badgeList"
        :key="item._key"
        class="badge-item"
        @click="showBadgeDetail(item)"
      >
        <view :class="['badge-icon', item._earned ? 'earned' : 'locked']">
          <image v-if="item._icon" :src="item._icon" mode="aspectFit" />
          <text v-else class="icon-placeholder">{{ getBadgeSymbol(item._badge) }}</text>
        </view>
        <text class="badge-name">{{ item._name }}</text>
        <text v-if="item._earned" class="badge-status">已获得</text>
      </view>
    </view>

    <view v-if="badgeList.length === 0" class="empty-state">
      <text class="empty-text">暂无可用的勋章</text>
    </view>

    <!-- 详情弹窗 -->
    <view class="modal-mask" v-if="showDetail" @click="showDetail = false">
      <view class="modal" @click.stop>
        <view class="modal-badge-icon">
          <image v-if="detailIcon" :src="detailIcon" mode="aspectFit" />
          <text v-else class="big-icon">{{ getBadgeSymbol(detailBadge) }}</text>
        </view>
        <text class="modal-badge-name">{{ detailBadge && detailBadge.name }}</text>
        <text class="modal-badge-desc">{{ (detailBadge && detailBadge.description) || '暂无描述' }}</text>
        <view class="modal-meta">
          <text class="meta-tag">{{ detailLevel }}</text>
          <text class="meta-tag">{{ detailRarity }}</text>
          <text class="meta-tag">{{ detailCategory }}</text>
        </view>
        <view class="modal-earned" v-if="detailEarned">
          <text>获得时间：{{ detailEarnedDate }}</text>
        </view>
        <view class="modal-btns">
          <button v-if="detailEarned" :class="['btn-fav', detailIsFav ? 'active' : '']" @click="onToggleFavorite">
            {{ detailIsFav ? '已收藏' : '收藏' }}
          </button>
          <button class="btn-close" @click="showDetail = false">关闭</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getActiveBadges, getChildBadges, getChildBadgeStats, toggleBadgeFavorite } from '../../utils/api.js'

export default {
  data() {
    return {
      badges: [],
      childBadges: [],
      badgeList: [],
      earnedMap: {},
      stats: {},
      totalBadges: 0,
      currentCategory: '',
      categories: [
        { code: '', label: '全部' },
        { code: '学习', label: '学习' },
        { code: '运动', label: '运动' },
        { code: '家务', label: '家务' },
        { code: '阅读', label: '阅读' },
        { code: '打卡', label: '打卡' },
        { code: '综合', label: '综合' }
      ],
      levelMap: { 'bronze': '铜牌', 'silver': '银牌', 'gold': '金牌', 'diamond': '钻石' },
      rarityMap: { 'common': '普通', 'rare': '稀有', 'epic': '史诗', 'legendary': '传说' },
      categoryMap: { '学习': '📚', '运动': '⚽', '家务': '🧹', '阅读': '📖', '打卡': '✅', '综合': '⭐' },
      showDetail: false,
      detailBadge: null,
      detailEarned: false,
      detailIsFav: false,
      detailEarnedDate: ''
    }
  },
  computed: {
    detailIcon() {
      return this.detailBadge ? this.detailBadge.icon : ''
    },
    detailLevel() {
      if (!this.detailBadge) return ''
      return this.levelMap[this.detailBadge.level] || this.detailBadge.level || ''
    },
    detailRarity() {
      if (!this.detailBadge) return ''
      return this.rarityMap[this.detailBadge.rarity] || this.detailBadge.rarity || ''
    },
    detailCategory() {
      if (!this.detailBadge) return ''
      return this.categoryMap[this.detailBadge.category] || this.detailBadge.category || ''
    }
  },
  onShow() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const [badgesRes, childBadgesRes, statsRes] = await Promise.all([
          getActiveBadges(),
          getChildBadges(this.getChildId()),
          getChildBadgeStats(this.getChildId())
        ])
        this.badges = badgesRes.data || []
        this.childBadges = childBadgesRes.data || []
        this.stats = statsRes.data || {}
        this.totalBadges = this.badges.length
        this.buildEarnedMap()
        this.applyFilter()
      } catch (e) {
        console.error('加载勋章数据失败', e)
      }
    },
    getChildId() {
      return uni.getStorageSync('currentChildId') || ''
    },
    buildEarnedMap() {
      const map = {}
      for (const item of this.childBadges) {
        const badge = item.badge || {}
        const badgeId = badge.id || item.badgeId
        if (badgeId) map[badgeId] = true
      }
      this.earnedMap = map
    },
    onCategoryChange(code) {
      if (this.currentCategory === code) return
      this.currentCategory = code
      this.applyFilter()
    },
    applyFilter() {
      let filtered = this.badges.slice()
      if (this.currentCategory) {
        filtered = filtered.filter(function(b) { return b.category === this.currentCategory }.bind(this))
      }
      this.badgeList = filtered.map(function(b) {
        const badgeId = b.id
        const earned = this.earnedMap[badgeId] || false
        return {
          _key: badgeId,
          _badge: b,
          _name: b.name || '',
          _icon: b.icon || '',
          _earned: earned,
          _badgeId: badgeId
        }
      }.bind(this))
    },
    showBadgeDetail(item) {
      const badge = item._badge || item
      this.detailBadge = badge
      const found = this.childBadges.find(function(cb) {
        const cbBadge = cb.badge || {}
        return (cbBadge.id || cb.badgeId) === badge.id
      })
      this.detailEarned = !!found
      this.detailIsFav = found ? (found.isFavorite || (found.childBadge && found.childBadge.isFavorite)) : false
      this.detailEarnedDate = found ? this.formatDate(found.earnedAt || (found.childBadge && found.childBadge.earnedAt)) : ''
      this.showDetail = true
    },
    async onToggleFavorite() {
      const childId = this.getChildId()
      const badgeId = this.detailBadge.id
      try {
        await toggleBadgeFavorite(childId, badgeId)
        uni.showToast({ title: this.detailIsFav ? '已取消收藏' : '已收藏', icon: 'success' })
        await this.loadData()
        this.showDetail = false
      } catch (e) {
        console.error('操作失败', e)
      }
    },
    getBadgeSymbol(badge) {
      if (!badge) return '🏅'
      const symbols = {
        '学习': '📚', '运动': '⚽', '家务': '🧹', '阅读': '📖', '打卡': '✅', '综合': '⭐'
      }
      return symbols[badge.category] || '🏅'
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    }
  }
}
</script>

<style scoped>
.badge-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}
.stats-card {
  display: flex;
  background: linear-gradient(135deg, #F97316, #fb923c);
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  justify-content: space-around;
}
.stat-item {
  text-align: center;
}
.stat-num {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
}
.stat-label {
  display: block;
  font-size: 22rpx;
  color: rgba(255,255,255,0.85);
  margin-top: 6rpx;
}
.filter-bar {
  display: flex;
  padding: 16rpx 20rpx;
  gap: 12rpx;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background: #fff;
}
.filter-chip.active {
  color: #fff;
  background: #F97316;
}
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 20rpx;
  gap: 16rpx;
}
.badge-item {
  width: calc(25% - 12rpx);
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 10rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.badge-icon {
  width: 80rpx;
  height: 80rpx;
  margin: 0 auto 10rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
}
.badge-icon.earned {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.badge-icon.locked {
  background: #f0f0f0;
  filter: grayscale(1);
  opacity: 0.5;
}
.badge-icon image {
  width: 60rpx;
  height: 60rpx;
}
.badge-name {
  display: block;
  font-size: 22rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-status {
  display: block;
  font-size: 18rpx;
  color: #F97316;
  margin-top: 4rpx;
}
.empty-state {
  text-align: center;
  padding: 120rpx 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 75%;
  text-align: center;
}
.modal-badge-icon {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 20rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
}
.big-icon {
  font-size: 72rpx;
}
.modal-badge-name {
  display: block;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}
.modal-badge-desc {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.modal-meta {
  display: flex;
  justify-content: center;
  gap: 12rpx;
  margin-bottom: 20rpx;
}
.meta-tag {
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  background: #f5f5f5;
  color: #666;
}
.modal-earned {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
}
.modal-btns {
  display: flex;
  gap: 20rpx;
}
.modal-btns button {
  flex: 1;
  font-size: 28rpx;
  padding: 16rpx;
  border-radius: 40rpx;
  border: none;
}
.btn-fav {
  background: #F97316;
  color: #fff;
}
.btn-fav.active {
  background: #ddd;
  color: #999;
}
.btn-close {
  background: #f5f5f5;
  color: #666;
}
</style>