martial-mini/pages/event-medals/event-medals.vue

<template>
  <view class="event-medals-page">
    <!-- 顶部统计 -->
    <view class="top-stats">
      <view class="stat-item">
        <view class="stat-number">{{ totalTeams }}</view>
        <view class="stat-label">参赛队伍</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ totalMedals }}</view>
        <view class="stat-label">奖牌总数</view>
      </view>
    </view>

    <!-- 奖牌榜列表 -->
    <view class="medals-list">
      <view class="medals-header">
        <view class="header-rank">排名</view>
        <view class="header-team">代表队</view>
        <view class="header-medals">
          <text class="medal-icon gold">🥇</text>
          <text class="medal-icon silver">🥈</text>
          <text class="medal-icon bronze">🥉</text>
          <text class="medal-total">总计</text>
        </view>
      </view>

      <view class="medal-item" v-for="(item, index) in medalsList" :key="index">
        <view class="item-rank" :class="'rank-' + item.rank">{{ item.rank }}</view>
        <view class="item-team">
          <view class="team-name">{{ item.team }}</view>
        </view>
        <view class="item-medals">
          <text class="medal-count gold">{{ item.gold }}</text>
          <text class="medal-count silver">{{ item.silver }}</text>
          <text class="medal-count bronze">{{ item.bronze }}</text>
          <text class="medal-count total">{{ item.total }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import resultAPI from '@/api/result.js'

export default {
  data() {
    return {
      eventId: '',
      medalsList: []
    };
  },
  computed: {
    totalTeams() {
      return this.medalsList.length;
    },
    totalMedals() {
      return this.medalsList.reduce((sum, item) => sum + item.total, 0);
    }
  },
  onLoad(options) {
    if (options.eventId) {
      this.eventId = options.eventId
      this.loadMedalsList(options.eventId)
    }
  },
  methods: {
    /**
     * 加载奖牌榜
     */
    async loadMedalsList(eventId) {
      try {
        const res = await resultAPI.getMedalsList(eventId)

        let list = []
        if (res.records) {
          list = res.records
        } else if (Array.isArray(res)) {
          list = res
        }

        // 数据映射
        this.medalsList = list.map((item, index) => ({
          rank: item.rank || item.ranking || (index + 1),
          team: item.teamName || item.team,
          gold: item.goldMedals || item.gold || 0,
          silver: item.silverMedals || item.silver || 0,
          bronze: item.bronzeMedals || item.bronze || 0,
          total: item.totalMedals || item.total || 0
        }))
      } catch (err) {
        console.error('加载奖牌榜失败:', err)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.event-medals-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

.top-stats {
  background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.stat-item {
  text-align: center;
  color: #fff;
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.medals-list {
  margin: 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.medals-header {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #F8F8F8;
  font-size: 24rpx;
  font-weight: bold;
  color: #666666;
}

.header-rank {
  width: 80rpx;
  text-align: center;
}

.header-team {
  flex: 1;
}

.header-medals {
  display: flex;
  gap: 30rpx;
  align-items: center;
}

.medal-icon {
  font-size: 28rpx;
}

.medal-total {
  width: 60rpx;
  text-align: center;
}

.medal-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #F5F5F5;
}

.medal-item:last-child {
  border-bottom: none;
}

.item-rank {
  width: 80rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.item-rank.rank-1 {
  color: #FFD700;
}

.item-rank.rank-2 {
  color: #C0C0C0;
}

.item-rank.rank-3 {
  color: #CD7F32;
}

.item-rank:not(.rank-1):not(.rank-2):not(.rank-3) {
  color: #999999;
}

.item-team {
  flex: 1;
}

.team-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}

.item-medals {
  display: flex;
  gap: 30rpx;
  align-items: center;
}

.medal-count {
  width: 40rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
}

.medal-count.gold {
  color: #FFD700;
}

.medal-count.silver {
  color: #C0C0C0;
}

.medal-count.bronze {
  color: #CD7F32;
}

.medal-count.total {
  width: 60rpx;
  color: #C93639;
}
</style>