<template>
|
<div class="rating-container">
|
<div v-if="loading" class="loading">
|
<el-skeleton :rows="8" animated />
|
</div>
|
|
<div v-else-if="detail" class="rating-content">
|
<!-- 左侧面板：学员信息和参赛信息 -->
|
<div class="left-panel">
|
<!-- 学员信息卡片 -->
|
<PlayerInfoCard :player-info="detail.playerInfo" />
|
|
<!-- 参赛信息卡片 -->
|
<div class="submission-card">
|
<h3>参赛信息</h3>
|
<div class="info-item">
|
<label>比赛名称：</label>
|
<span>{{ detail.activityName }}</span>
|
</div>
|
<div class="info-item">
|
<label>项目简介：</label>
|
<p>{{ detail.description || '暂无简介' }}</p>
|
</div>
|
|
<!-- 提交资料 -->
|
<SubmissionFiles :files="detail.submissionFiles" />
|
</div>
|
</div>
|
|
<!-- 右侧面板：评分表单 -->
|
<div class="right-panel">
|
<RatingForm
|
v-if="detail.ratingForm"
|
:rating-form="detail.ratingForm"
|
:activity-player-id="detail.id"
|
@submit="handleRatingSubmit"
|
/>
|
<div v-else class="no-rating">
|
<el-empty description="该比赛未配置评分模板" />
|
</div>
|
</div>
|
</div>
|
|
<div v-else class="error">
|
<el-empty description="未找到报名信息" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { ElMessage, ElSkeleton, ElEmpty } from 'element-plus'
|
import { getActivityPlayerDetail, saveActivityPlayerRating } from '@/api/activityPlayer'
|
import PlayerInfoCard from '@/components/PlayerInfoCard.vue'
|
import SubmissionFiles from '@/components/SubmissionFiles.vue'
|
import RatingForm from '@/components/RatingForm.vue'
|
|
const route = useRoute()
|
const loading = ref(true)
|
const detail = ref(null)
|
|
const loadDetail = async () => {
|
try {
|
loading.value = true
|
const id = route.params.id
|
const response = await getActivityPlayerDetail(id)
|
detail.value = response.activityPlayerDetail
|
} catch (error) {
|
console.error('加载报名详情失败:', error)
|
ElMessage.error('加载报名详情失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
|
const handleRatingSubmit = async (ratingData) => {
|
try {
|
console.log('评分提交:', ratingData)
|
|
// 构造提交数据
|
const input = {
|
activityPlayerId: detail.value.id,
|
ratings: ratingData.ratings.map(item => ({
|
itemId: item.itemId,
|
score: item.score
|
})),
|
comment: ratingData.comment || ''
|
}
|
|
// 调用保存 API
|
const result = await saveActivityPlayerRating(input)
|
|
if (result.saveActivityPlayerRating) {
|
ElMessage.success('评分提交成功')
|
} else {
|
ElMessage.error('评分提交失败')
|
}
|
} catch (error) {
|
console.error('评分提交失败:', error)
|
ElMessage.error('评分提交失败: ' + error.message)
|
}
|
}
|
|
onMounted(() => {
|
loadDetail()
|
})
|
</script>
|
|
<style scoped>
|
.rating-container {
|
padding: 20px;
|
min-height: calc(100vh - 120px);
|
}
|
|
.loading {
|
padding: 20px;
|
}
|
|
.rating-content {
|
display: flex;
|
gap: 20px;
|
max-width: 1400px;
|
margin: 0 auto;
|
}
|
|
.left-panel {
|
flex: 1;
|
max-width: 600px;
|
}
|
|
.right-panel {
|
flex: 1;
|
max-width: 600px;
|
}
|
|
.submission-card {
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
margin-top: 20px;
|
}
|
|
.submission-card h3 {
|
margin: 0 0 16px 0;
|
color: #303133;
|
font-size: 18px;
|
font-weight: 600;
|
}
|
|
.info-item {
|
margin-bottom: 12px;
|
}
|
|
.info-item label {
|
font-weight: 600;
|
color: #606266;
|
margin-right: 8px;
|
}
|
|
.info-item p {
|
margin: 4px 0 0 0;
|
color: #303133;
|
line-height: 1.6;
|
}
|
|
.no-rating {
|
background: white;
|
border-radius: 8px;
|
padding: 40px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
text-align: center;
|
}
|
|
.error {
|
text-align: center;
|
padding: 40px;
|
}
|
|
@media (max-width: 1200px) {
|
.rating-content {
|
flex-direction: column;
|
}
|
|
.left-panel,
|
.right-panel {
|
max-width: none;
|
}
|
}
|
</style>
|
