Files
martial-admin-mini/pages/score-list-multi/score-list-multi.vue
DevOps a3680f7d3e refactor: 裁判角色名称修改 - 裁判长→主裁判, 普通裁判→裁判员
- 修改pages目录下的Vue组件注释
- 修改api目录下的接口注释
- 修改mock目录下的模拟数据注释
- 修改utils/dataAdapter.js中的注释

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-27 11:37:50 +08:00

570 lines
13 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="container">
<!-- 自定义导航栏 -->
<view class="nav-bar">
<view class="nav-title">评分系统</view>
<view class="nav-right">
<view class="icon-menu">···</view>
<view class="icon-close"></view>
</view>
</view>
<!-- 比赛信息 -->
<view class="match-info">
<view class="match-title">{{ matchInfo.name }}</view>
<view class="match-time">比赛时间{{ matchInfo.time }}</view>
</view>
<!-- 场地和项目选择 -->
<view class="venue-section">
<!-- 场地切换 - 横向滚动 -->
<scroll-view class="venue-scroll" scroll-x="true" show-scrollbar="false">
<view class="venue-tabs">
<view
v-for="venue in venues"
:key="venue.venueId"
:class="['venue-tab', currentVenue === venue.venueId ? 'active' : '']"
@click="switchVenue(venue.venueId)"
>
{{ venue.venueName }}
</view>
</view>
</scroll-view>
<view class="venue-tip">
<!-- <text class="tip-bold">主裁判可看见所有场地和项目</text> -->
<!-- <text class="tip-normal">场地和项目可动态全部可以点击切换</text> -->
</view>
<!-- 项目选择 - 横向滚动 -->
<scroll-view class="project-scroll" scroll-x="true" show-scrollbar="false">
<view class="project-list">
<view
v-for="(project, index) in projects"
:key="project.projectId"
:class="['project-btn', currentProject === project.projectId ? 'active' : '']"
@click="switchProject(project.projectId)"
>
{{ project.projectName }}
</view>
</view>
</scroll-view>
</view>
<!-- 已评分统计 -->
<view class="score-stats">
<text class="stats-text">已评分</text>
<text class="stats-number">{{ scoredCount }}/{{ totalCount }}</text>
</view>
<!-- 选手列表 -->
<view class="player-list">
<!-- 遍历选手列表 -->
<view
class="player-card"
v-for="player in players"
:key="player.athleteId"
>
<view class="player-header">
<view class="player-name">{{ player.name }}</view>
<!-- 动作区域始终显示 -->
<view class="action-area">
<!-- 已评分显示总分和修改按钮 -->
<template v-if="player.scoringComplete && player.totalScore > 0">
<text class="total-score">总分{{ player.totalScore }}</text>
<view class="chief-actions">
<button class="modify-btn" @click="goToModify(player)">修改</button>
</view>
</template>
<!-- 未评分显示评分中提示 -->
<template v-else>
<text class="scoring-status">评分中...</text>
</template>
</view>
</view>
<view class="player-info">
<view class="info-item">身份证{{ player.idCard }}</view>
<view class="info-item">队伍{{ player.team }}</view>
<view class="info-item">编号{{ player.number }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import dataAdapter from '@/utils/dataAdapter.js'
import config from '@/config/env.config.js'
export default {
data() {
return {
matchInfo: {
id: '',
name: '',
time: ''
},
competitionId: '',
currentVenue: '',
currentProject: '',
venues: [],
projects: [],
players: [],
scoredCount: 0,
totalCount: 0
}
},
async onLoad() {
// 获取全局数据
const app = getApp()
const globalData = app.globalData || {}
// 加载比赛信息
this.matchInfo = {
id: globalData.matchId,
name: globalData.matchName || '比赛名称',
time: globalData.matchTime || '比赛时间'
}
// 注意:主裁判没有固定场地和项目,需要查看所有
this.competitionId = globalData.matchId
// 调试信息
if (config.debug) {
console.log('主裁判列表页加载:', {
userRole: globalData.userRole,
competitionId: this.competitionId
})
}
// 加载场地和项目列表
await this.loadVenuesAndProjects()
},
methods: {
async loadVenuesAndProjects() {
try {
uni.showLoading({
title: '加载中...',
mask: true
})
// 🔥 关键改动:使用 dataAdapter 获取场地列表
// Mock模式调用 mock/athlete.js 的 getVenues 函数
// API模式调用 api/athlete.js 的 getVenues 函数GET /martial/venue/list
const venuesRes = await dataAdapter.getData('getVenues', {
competitionId: this.competitionId
})
// 🔥 关键改动:使用 dataAdapter 获取项目列表
// Mock模式调用 mock/athlete.js 的 getProjects 函数
// API模式调用 api/athlete.js 的 getProjects 函数GET /martial/project/list
const projectsRes = await dataAdapter.getData('getProjects', {
competitionId: this.competitionId
})
this.venues = venuesRes.data || []
this.projects = projectsRes.data || []
// 默认选中第一个场地和项目
if (this.venues.length > 0) {
this.currentVenue = this.venues[0].venueId
}
if (this.projects.length > 0) {
this.currentProject = this.projects[0].projectId
}
uni.hideLoading()
// 调试信息
if (config.debug) {
console.log('场地和项目加载成功:', {
venues: this.venues.length,
projects: this.projects.length,
currentVenue: this.currentVenue,
currentProject: this.currentProject
})
}
// 加载选手列表
if (this.currentVenue && this.currentProject) {
await this.loadPlayers()
}
} catch (error) {
uni.hideLoading()
console.error('加载场地和项目失败:', error)
uni.showToast({
title: error.message || '加载失败',
icon: 'none'
})
}
},
async loadPlayers() {
try {
uni.showLoading({
title: '加载中...',
mask: true
})
// 🔥 关键改动:使用 dataAdapter 获取选手列表(主裁判视图)
// Mock模式调用 mock/athlete.js 的 getAthletesForAdmin 函数
// API模式调用 api/athlete.js 的 getAthletesForAdmin 函数GET /api/mini/athletes/admin
const response = await dataAdapter.getData('getAthletesForAdmin', {
competitionId: this.competitionId,
venueId: this.currentVenue,
projectId: this.currentProject
})
uni.hideLoading()
// 保存选手列表
this.players = (response.data.records || response.data) || []
// 计算评分统计(主裁判视图:统计有总分的选手)
this.totalCount = this.players.length
this.scoredCount = this.players.filter(p => p.scoringComplete).length
// 调试信息
if (config.debug) {
console.log('选手列表加载成功:', {
venueId: this.currentVenue,
projectId: this.currentProject,
total: this.totalCount,
scored: this.scoredCount,
players: this.players
})
}
} catch (error) {
uni.hideLoading()
console.error('加载选手列表失败:', error)
uni.showToast({
title: error.message || '加载失败',
icon: 'none'
})
}
},
async switchVenue(venueId) {
if (this.currentVenue === venueId) return
this.currentVenue = venueId
// 调试信息
if (config.debug) {
console.log('切换场地:', venueId)
}
// 重新加载选手列表
await this.loadPlayers()
},
async switchProject(projectId) {
if (this.currentProject === projectId) return
this.currentProject = projectId
// 调试信息
if (config.debug) {
console.log('切换项目:', projectId)
}
// 重新加载选手列表
await this.loadPlayers()
},
goToModify(player) {
// 保存当前选手信息到全局数据
const app = getApp()
app.globalData.currentAthlete = player
uni.navigateTo({
url: '/pages/modify-score/modify-score'
})
}
}
}
</script>
<style scoped>
.container {
min-height: 100vh;
background-color: #F5F5F5;
padding-bottom: 40rpx;
}
/* 导航栏 */
.nav-bar {
height: 90rpx;
background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 30rpx;
}
.nav-title {
font-size: 36rpx;
font-weight: 600;
color: #FFFFFF;
letter-spacing: 2rpx;
}
.nav-right {
position: absolute;
right: 30rpx;
display: flex;
align-items: center;
gap: 30rpx;
}
.icon-menu,
.icon-close {
width: 60rpx;
height: 60rpx;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
font-weight: bold;
}
/* 比赛信息 */
.match-info {
padding: 30rpx;
background-color: #F5F5F5;
}
.match-title {
font-size: 32rpx;
font-weight: 600;
color: #333333;
line-height: 1.6;
margin-bottom: 10rpx;
}
.tip-text {
font-size: 24rpx;
color: #FF4D6A;
margin-bottom: 10rpx;
}
.match-time {
font-size: 28rpx;
color: #666666;
}
/* 场地和项目区域 */
.venue-section {
background-color: #FFFFFF;
margin: 20rpx 30rpx;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
/* 场地滚动容器 */
.venue-scroll {
width: 100%;
white-space: nowrap;
margin-bottom: 20rpx;
}
.venue-tabs {
display: inline-flex;
gap: 30rpx;
padding-bottom: 20rpx;
border-bottom: 4rpx solid #E0E0E0;
position: relative;
}
.venue-tab {
font-size: 32rpx;
font-weight: 500;
color: #666666;
padding: 0 20rpx;
position: relative;
white-space: nowrap;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.venue-tab.active {
font-weight: 600;
color: #333333;
}
.venue-tab.active::after {
content: '';
position: absolute;
bottom: -24rpx;
left: 0;
right: 0;
height: 4rpx;
background-color: #1B7C5E;
}
.venue-tip {
font-size: 24rpx;
line-height: 1.6;
margin-bottom: 20rpx;
}
.tip-bold {
color: #FF4D6A;
font-weight: 500;
}
.tip-normal {
color: #FF4D6A;
}
/* 项目滚动容器 */
.project-scroll {
width: 100%;
white-space: nowrap;
}
.project-list {
display: inline-flex;
gap: 20rpx;
}
.project-btn {
padding: 20rpx 30rpx;
background-color: #FFFFFF;
border: 2rpx solid #CCCCCC;
border-radius: 8rpx;
font-size: 26rpx;
color: #666666;
white-space: nowrap;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.project-btn.active {
background-color: #1B7C5E;
color: #FFFFFF;
border-color: #1B7C5E;
font-weight: 500;
}
/* 评分统计 */
.score-stats {
padding: 20rpx 30rpx;
font-size: 28rpx;
color: #333333;
}
.stats-text {
color: #666666;
}
.stats-number {
color: #1B7C5E;
font-weight: 600;
}
/* 选手列表 */
.player-list {
padding: 0 30rpx;
}
.player-card {
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
.player-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20rpx;
}
.player-name {
font-size: 32rpx;
font-weight: 600;
color: #333333;
}
.action-area {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10rpx;
}
.total-score {
font-size: 26rpx;
color: #333333;
font-weight: 600;
}
.scoring-status {
font-size: 26rpx;
color: #FF9800;
font-weight: 500;
padding: 8rpx 20rpx;
background-color: #FFF3E0;
border-radius: 8rpx;
}
.chief-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10rpx;
}
.chief-hint {
font-size: 22rpx;
color: #FF4D6A;
text-align: right;
line-height: 1.5;
max-width: 400rpx;
}
.modify-btn {
padding: 12rpx 40rpx;
background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
border-radius: 8rpx;
font-size: 28rpx;
color: #FFFFFF;
font-weight: 500;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.modify-btn:active {
opacity: 0.9;
}
.player-info {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.info-item {
font-size: 26rpx;
color: #666666;
line-height: 1.5;
}
</style>