fix bugs
This commit is contained in:
245
src/pages/event-medals/event-medals.vue
Normal file
245
src/pages/event-medals/event-medals.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user