Files
martial-admin-mini/pages/score-detail/score-detail.vue
宅房 dc9743e6db feat: 完成5个页面接入dataAdapter - Mock模式功能完成
改造页面列表:
- login.vue: 登录验证使用dataAdapter
- score-list.vue: 普通评委选手列表加载
- score-detail.vue: 评分提交和扣分项加载
- score-list-multi.vue: 裁判长多场地列表(含场地/项目切换)
- modify-score.vue: 裁判长修改评分

关键特性:
-  所有页面使用dataAdapter统一数据接口
-  UI模板和样式完全保持不变(零UI修改)
-  支持Mock/API模式一键切换
-  完整的错误处理和加载提示
-  调试模式下输出详细日志

Mock模式测试准备完成,可通过修改config/env.config.js中dataMode切换到API模式。

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-11 14:48:51 +08:00

582 lines
12 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-left" @click="goBack">
<text class="back-icon"></text>
</view>
<view class="nav-title">评分详情</view>
<view class="nav-right">
<view class="icon-menu">···</view>
<view class="icon-close"></view>
</view>
</view>
<!-- 选手信息 -->
<view class="player-info-section">
<view class="player-name">{{ player.name }}</view>
<view class="player-details">
<view class="detail-item">身份证{{ player.idCard }}</view>
<view class="detail-item">队伍{{ player.team }}</view>
<view class="detail-item">编号{{ player.number }}</view>
</view>
</view>
<!-- 评分提示 -->
<view class="score-tip">
点击分数填写或拖动滑块打分5-10
</view>
<!-- 分数调整 -->
<view class="score-control">
<view class="control-btn decrease" @click="decreaseScore">
<text class="btn-symbol"></text>
<!-- <text class="btn-value">-0.001</text> -->
</view>
<view class="score-display">
<text class="current-score">{{ currentScore.toFixed(3) }}</text>
</view>
<view class="control-btn increase" @click="increaseScore">
<text class="btn-symbol"></text>
<!-- <text class="btn-value">+0.001</text> -->
</view>
</view>
<!-- <view class="judge-tip">
裁判评分保留3位小数点超过上限或下限时按钮置灰
</view> -->
<!-- 扣分项 -->
<view class="deduction-section">
<view class="deduction-header">
<text class="deduction-label">扣分项</text>
<!-- <text class="deduction-hint">扣分项多选</text> -->
</view>
<view class="deduction-list">
<view
v-for="(item, index) in deductions"
:key="item.deductionId"
class="deduction-item"
@click="toggleDeduction(index)"
>
<view :class="['checkbox', item.checked ? 'checked' : '']">
<text v-if="item.checked" class="check-icon"></text>
</view>
<text class="deduction-text">{{ item.deductionName }}</text>
</view>
</view>
</view>
<!-- 备注 -->
<view class="note-section">
<view class="note-label">
<text>备注</text>
</view>
<view class="note-input-wrapper">
<textarea
class="note-input"
placeholder="请输入修改备注"
v-model="note"
maxlength="200"
/>
<!-- <text class="optional-text">可不填</text> -->
</view>
</view>
<!-- 提交按钮 -->
<button class="submit-btn" @click="handleSubmit">提交</button>
</view>
</template>
<script>
import dataAdapter from '@/utils/dataAdapter.js'
import config from '@/config/env.config.js'
export default {
data() {
return {
player: {
athleteId: '',
name: '',
idCard: '',
team: '',
number: ''
},
judgeId: '',
projectId: '',
currentScore: 8.000,
note: '',
minScore: 5.0,
maxScore: 10.0,
deductions: []
}
},
async onLoad() {
// 获取全局数据
const app = getApp()
const globalData = app.globalData || {}
// 加载当前选手信息(从 score-list 页面传递)
const currentAthlete = globalData.currentAthlete || {}
this.player = {
athleteId: currentAthlete.athleteId || '',
name: currentAthlete.name || '选手姓名',
idCard: currentAthlete.idCard || '',
team: currentAthlete.team || '',
number: currentAthlete.number || ''
}
// 如果选手已评分,加载其原有评分
if (currentAthlete.scored && currentAthlete.myScore) {
this.currentScore = currentAthlete.myScore
}
// 加载评委ID和项目ID
this.judgeId = globalData.judgeId
const projects = globalData.projects || []
const currentIndex = globalData.currentProjectIndex || 0
const currentProject = projects[currentIndex] || {}
this.projectId = currentProject.projectId
// 调试信息
if (config.debug) {
console.log('评分详情页加载:', {
athlete: this.player,
judgeId: this.judgeId,
projectId: this.projectId,
initialScore: this.currentScore
})
}
// 加载扣分项列表
await this.loadDeductions()
},
methods: {
async loadDeductions() {
try {
// 🔥 关键改动:使用 dataAdapter 获取扣分项列表
// Mock模式调用 mock/score.js 的 getDeductions 函数
// API模式调用 api/score.js 的 getDeductions 函数GET /martial/deductionItem/list
const response = await dataAdapter.getData('getDeductions', {
projectId: this.projectId
})
// 为每个扣分项添加 checked 状态
this.deductions = (response.data || []).map(item => ({
...item,
checked: false
}))
// 调试信息
if (config.debug) {
console.log('扣分项加载成功:', this.deductions)
}
} catch (error) {
console.error('加载扣分项失败:', error)
uni.showToast({
title: '加载扣分项失败',
icon: 'none'
})
}
},
goBack() {
uni.navigateBack()
},
decreaseScore() {
if (this.currentScore > this.minScore) {
this.currentScore = parseFloat((this.currentScore - 0.001).toFixed(3))
}
},
increaseScore() {
if (this.currentScore < this.maxScore) {
this.currentScore = parseFloat((this.currentScore + 0.001).toFixed(3))
}
},
toggleDeduction(index) {
this.deductions[index].checked = !this.deductions[index].checked
},
async handleSubmit() {
// 验证评分范围
if (this.currentScore < this.minScore || this.currentScore > this.maxScore) {
uni.showToast({
title: `评分必须在${this.minScore}-${this.maxScore}分之间`,
icon: 'none'
})
return
}
// 收集选中的扣分项
const selectedDeductions = this.deductions
.filter(item => item.checked)
.map(item => ({
deductionId: item.deductionId,
deductionName: item.deductionName,
deductionScore: item.deductionScore
}))
try {
uni.showLoading({
title: '提交中...',
mask: true
})
// 🔥 关键改动:使用 dataAdapter 提交评分
// Mock模式调用 mock/score.js 的 submitScore 函数
// API模式调用 api/score.js 的 submitScore 函数POST /martial/score/submit
const response = await dataAdapter.getData('submitScore', {
athleteId: this.player.athleteId,
judgeId: this.judgeId,
score: this.currentScore,
deductions: selectedDeductions,
note: this.note
})
uni.hideLoading()
// 调试信息
if (config.debug) {
console.log('评分提交成功:', {
athleteId: this.player.athleteId,
score: this.currentScore,
deductions: selectedDeductions,
response: response
})
}
// 显示成功提示
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 1500
})
// 返回上一页
setTimeout(() => {
uni.navigateBack()
}, 1500)
} catch (error) {
uni.hideLoading()
console.error('提交评分失败:', error)
uni.showToast({
title: error.message || '提交失败,请重试',
icon: 'none',
duration: 2000
})
}
}
}
}
</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-left {
position: absolute;
left: 30rpx;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.back-icon {
font-size: 60rpx;
color: #FFFFFF;
font-weight: 300;
line-height: 1;
}
.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;
}
/* 选手信息 */
.player-info-section {
margin: 30rpx;
}
.player-name {
font-size: 34rpx;
font-weight: 600;
color: #333333;
margin-bottom: 20rpx;
}
.player-details {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.detail-item {
font-size: 26rpx;
color: #CD8B6F;
line-height: 1.5;
}
/* 评分提示 */
.score-tip {
padding: 0 30rpx;
font-size: 26rpx;
color: #666666;
margin-bottom: 30rpx;
}
/* 分数控制 */
.score-control {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 60rpx;
margin-bottom: 20rpx;
}
.control-btn {
width: 140rpx;
height: 140rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F5F5F5;
border-radius: 12rpx;
}
.control-btn.decrease {
background-color: #FFE5E5;
}
.control-btn.increase {
background-color: #E5F5F0;
}
.btn-symbol {
font-size: 48rpx;
font-weight: 300;
}
.control-btn.decrease .btn-symbol {
color: #FF4D6A;
}
.control-btn.increase .btn-symbol {
color: #1B7C5E;
}
.btn-value {
font-size: 24rpx;
margin-top: 8rpx;
}
.control-btn.decrease .btn-value {
color: #FF4D6A;
}
.control-btn.increase .btn-value {
color: #1B7C5E;
}
.score-display {
display: flex;
flex-direction: column;
align-items: center;
}
.current-score {
font-size: 80rpx;
font-weight: 600;
color: #1B7C5E;
}
.judge-tip {
padding: 0 30rpx;
font-size: 24rpx;
color: #FF4D6A;
text-align: center;
line-height: 1.6;
margin-bottom: 30rpx;
}
/* 扣分项 */
.deduction-section {
margin: 30rpx;
}
.deduction-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.deduction-label {
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.deduction-hint {
font-size: 24rpx;
color: #FF4D6A;
}
.deduction-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
}
.deduction-item {
display: flex;
align-items: center;
padding: 20rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}
.checkbox {
width: 40rpx;
height: 40rpx;
border: 2rpx solid #CCCCCC;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
flex-shrink: 0;
background-color: #F5F5F5;
}
.checkbox.checked {
background-color: #1B7C5E;
border-color: #1B7C5E;
}
.check-icon {
color: #FFFFFF;
font-size: 28rpx;
font-weight: bold;
}
.deduction-text {
font-size: 26rpx;
color: #333333;
line-height: 1.4;
flex: 1;
}
/* 备注 */
.note-section {
margin: 30rpx;
}
.note-label {
font-size: 28rpx;
color: #333333;
margin-bottom: 20rpx;
}
.note-input-wrapper {
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
position: relative;
}
.note-input {
width: 100%;
min-height: 120rpx;
font-size: 28rpx;
color: #333333;
line-height: 1.6;
}
.note-input::placeholder {
color: #CCCCCC;
}
.optional-text {
position: absolute;
right: 30rpx;
bottom: 30rpx;
font-size: 24rpx;
color: #FF4D6A;
}
/* 提交按钮 */
.submit-btn {
margin: 30rpx;
height: 90rpx;
background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
border-radius: 16rpx;
font-size: 32rpx;
font-weight: 600;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 20rpx rgba(27, 124, 94, 0.3);
}
.submit-btn:active {
opacity: 0.9;
}
</style>