guoyu/fronted_uniapp/pages/score/detail.vue

<template>
    <view class="score-detail-container">
        <view class="detail-header">
            <text class="header-title">成绩详情</text>
        </view>
        
        <!-- 成绩概览 -->
        <view class="score-overview" v-if="scoreData">
            <view class="main-score">
                <text class="score-value">{{ scoreData.obtainedScore || 0 }}</text>
                <text class="score-total">/ {{ scoreData.totalScore || 0 }}分</text>
            </view>
            <view class="score-percent">
                <text>得分率：{{ getScorePercent() }}%</text>
            </view>
        </view>
        
        <!-- 考试信息 -->
        <view class="info-card" v-if="scoreData">
            <view class="card-title">考试信息</view>
            <view class="info-item">
                <text class="info-label">考试名称</text>
                <text class="info-value">{{ scoreData.examName || '未知' }}</text>
            </view>
            <view class="info-item">
                <text class="info-label">提交时间</text>
                <text class="info-value">{{ formatTime(scoreData.submitTime) }}</text>
            </view>
            <view class="info-item" v-if="scoreData.duration">
                <text class="info-label">用时</text>
                <text class="info-value">{{ formatDuration(scoreData.duration) }}</text>
            </view>
        </view>
        
        <!-- 答题详情 -->
        <view class="answer-detail" v-if="answerDetails && answerDetails.length > 0">
            <view class="card-title">答题详情</view>
            <view 
                v-for="(detail, index) in answerDetails" 
                :key="detail.id || index"
                class="answer-item"
                :class="{ 'correct': detail.isCorrect === '1', 'wrong': detail.isCorrect === '0' }"
            >
                <view class="answer-header">
                    <text class="answer-number">第 {{ index + 1 }} 题</text>
                    <text class="answer-score" :class="detail.isCorrect === '1' ? 'score-correct' : 'score-wrong'">
                        {{ detail.score || 0 }}/{{ detail.questionScore || 0 }}分
                    </text>
                </view>
                
                <view class="question-content">
                    <text class="question-text">{{ detail.questionContent }}</text>
                </view>
                
                <view class="answer-comparison">
                    <view class="answer-row">
                        <text class="answer-label">我的答案：</text>
                        <text class="answer-value" :class="detail.isCorrect === '0' ? 'wrong-answer' : 'correct-answer-user'">
                            {{ detail.studentAnswer || '未作答' }}
                        </text>
                    </view>
                    <view class="answer-row">
                        <text class="answer-label">正确答案：</text>
                        <text class="answer-value correct-answer">
                            {{ detail.correctAnswer || '暂无' }}
                        </text>
                    </view>
                </view>
            </view>
        </view>
        
    </view>
</template>

<script>
import { getScoreDetail, getMyScores } from '@/api/study/score.js'

export default {
    data() {
        return {
            scoreId: null,
            examId: null,
            scoreData: null,
            answerDetails: [],
            loading: false
        }
    },
    onLoad(options) {
        if (options.id) {
            this.scoreId = options.id
        }
        if (options.examId) {
            this.examId = options.examId
        }
        
        if (this.scoreId) {
            this.loadScoreDetail()
        } else {
            uni.showToast({
                title: '缺少成绩ID',
                icon: 'none'
            })
            setTimeout(() => {
                uni.navigateBack()
            }, 1500)
        }
    },
    methods: {
        async loadScoreDetail() {
            this.loading = true
            try {
                const hasExamId = await this.ensureExamId()
                if (!hasExamId) {
                    throw new Error('缺少考试ID，无法加载详情')
                }
                // 如果后端需要 examId，也一起传递
                const response = await getScoreDetail(this.scoreId, this.examId)
                if (response.code === 200 && response.data) {
                    this.scoreData = response.data
                    this.answerDetails = response.data.answerDetails || []
                } else {
                    throw new Error(response.msg || '加载失败')
                }
            } catch (error) {
                console.error('加载成绩详情失败', error)
                uni.showToast({
                    title: error.message || '加载失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },

        async ensureExamId() {
            if (this.examId) {
                return true
            }
            try {
                const response = await getMyScores()
                if (response.code === 200 && response.data) {
                    const target = response.data.find(item => item.id == this.scoreId)
                    if (target && target.examId) {
                        this.examId = target.examId
                        return true
                    }
                }
            } catch (error) {
                console.error('获取考试ID失败', error)
            }
            return false
        },
        
        getScorePercent() {
            if (!this.scoreData || !this.scoreData.totalScore) return 0
            return Math.round((this.scoreData.obtainedScore || 0) / this.scoreData.totalScore * 100)
        },
        
        formatTime(timeStr) {
            if (!timeStr) return ''
            const date = new Date(timeStr)
            const year = date.getFullYear()
            const month = (date.getMonth() + 1).toString().padStart(2, '0')
            const day = date.getDate().toString().padStart(2, '0')
            const hour = date.getHours().toString().padStart(2, '0')
            const minute = date.getMinutes().toString().padStart(2, '0')
            return `${year}-${month}-${day} ${hour}:${minute}`
        },
        
        formatDuration(seconds) {
            if (!seconds) return '0分钟'
            const hours = Math.floor(seconds / 3600)
            const minutes = Math.floor((seconds % 3600) / 60)
            if (hours > 0) {
                return `${hours}小时${minutes}分钟`
            }
            return `${minutes}分钟`
        }
    }
}
</script>

<style lang="scss" scoped>
.score-detail-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.detail-header {
    text-align: center;
    margin-bottom: 30rpx;
    
    .header-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.score-overview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    margin-bottom: 30rpx;
    text-align: center;
    
    .main-score {
        margin-bottom: 20rpx;
        
        .score-value {
            font-size: 120rpx;
            font-weight: bold;
            color: #fff;
            line-height: 1;
        }
        
        .score-total {
            font-size: 48rpx;
            color: rgba(255, 255, 255, 0.8);
            margin-left: 10rpx;
        }
    }
    
    .score-percent {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
    }
}

.info-card, .answer-detail {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .card-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .info-label {
            font-size: 28rpx;
            color: #999;
        }
        
        .info-value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
        }
    }
}

.answer-item {
    padding: 30rpx;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    border: 2rpx solid #e0e0e0;
    
    &.correct {
        background: #e8f5e9;
        border-color: #4caf50;
    }
    
    &.wrong {
        background: #ffebee;
        border-color: #f44336;
    }
    
    .answer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .answer-number {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
        }
        
        .answer-score {
            font-size: 26rpx;
            font-weight: bold;
            padding: 4rpx 12rpx;
            border-radius: 8rpx;
            
            &.score-correct {
                background: #4caf50;
                color: #fff;
            }
            
            &.score-wrong {
                background: #f44336;
                color: #fff;
            }
        }
    }
    
    .question-content {
        margin-bottom: 20rpx;
        
        .question-text {
            font-size: 28rpx;
            line-height: 1.6;
            color: #333;
        }
    }
    
    .answer-comparison {
        .answer-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12rpx;
            
            .answer-label {
                font-size: 26rpx;
                color: #666;
                width: 160rpx;
                flex-shrink: 0;
            }
            
            .answer-value {
                flex: 1;
                font-size: 26rpx;
                word-break: break-all;
                
                &.wrong-answer {
                    color: #f44336;
                    font-weight: bold;
                }
                
                &.correct-answer {
                    color: #4caf50;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>