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

<template>
  <view class="event-score-page">
    <!-- 项目分类 -->
    <view class="category-tabs">
      <view
        class="category-tab"
        v-for="(category, index) in categories"
        :key="index"
        :class="{ active: currentCategory === index }"
        @click="currentCategory = index"
      >
        {{ category.name }}
      </view>
    </view>

    <!-- 成绩列表 -->
    <view class="score-list">
      <view class="score-item" v-for="(item, index) in currentScores" :key="index">
        <view class="rank-badge" :class="'rank-' + item.rank">
          <text class="rank-number">{{ item.rank }}</text>
        </view>
        <view class="player-info">
          <view class="player-name">{{ item.name }}</view>
          <view class="player-team">{{ item.team }}</view>
        </view>
        <view class="score-info">
          <view class="score-value">{{ item.score }}</view>
          <view class="score-label">分</view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="currentScores.length === 0">
      <text class="empty-text">暂无成绩数据</text>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      eventId: '',
      currentCategory: 0,
      categories: [],
      scores: {}
    };
  },
  computed: {
    currentScores() {
      return this.scores[this.currentCategory] || [];
    }
  },
  onLoad(options) {
    if (options.eventId) {
      this.eventId = options.eventId
      this.loadCategories(options.eventId)
    }
  },
  watch: {
    currentCategory(newVal) {
      if (this.categories[newVal] && this.categories[newVal].id) {
        this.loadScoresByCategory(this.eventId, this.categories[newVal].id)
      }
    }
  },
  methods: {
    /**
     * 加载项目分类
     */
    async loadCategories(eventId) {
      try {
        const res = await competitionAPI.getProjectList({ competitionId: eventId })

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

        // 提取项目分类
        this.categories = list.map(item => ({
          id: item.id,
          name: item.name || item.projectName
        }))

        // 加载第一个分类的成绩
        if (this.categories.length > 0) {
          this.loadScoresByCategory(eventId, this.categories[0].id)
        }
      } catch (err) {
        console.error('加载项目分类失败:', err)
      }
    },

    /**
     * 加载指定分类的成绩
     */
    async loadScoresByCategory(eventId, projectId) {
      try {
        const res = await resultAPI.getResultList(eventId, { projectId })

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

        const categoryIndex = this.currentCategory
        this.scores[categoryIndex] = list.map((item, index) => ({
          rank: item.rank || item.ranking || (index + 1),
          name: item.athleteName || item.name,
          team: item.teamName || item.team,
          score: item.score || item.finalScore || '0.00'
        }))

        // 触发视图更新
        this.$forceUpdate()
      } catch (err) {
        console.error('加载成绩失败:', err)
      }
    }
  }
};
</script>

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

.category-tabs {
  background-color: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  gap: 15rpx;
  overflow-x: auto;
  margin-bottom: 20rpx;
}

.category-tab {
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  color: #666666;
  background-color: #f5f5f5;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tab.active {
  background-color: #C93639;
  color: #fff;
}

.score-list {
  padding: 0 30rpx 20rpx;
}

.score-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 25rpx;
}

.rank-badge {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.rank-badge.rank-2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
}

.rank-badge.rank-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
  background-color: #E0E0E0;
}

.rank-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.player-info {
  flex: 1;
}

.player-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.player-team {
  font-size: 24rpx;
  color: #666666;
}

.score-info {
  display: flex;
  align-items: baseline;
  gap: 5rpx;
  flex-shrink: 0;
}

.score-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #C93639;
}

.score-label {
  font-size: 24rpx;
  color: #999999;
}

.empty-state {
  padding: 200rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>