FE-lab-xcx/pages_safetyEducationExamination/views/exam/scoreDetail.vue

<!-- 答题详情 -->
<template>
	<view class="safetyEducationExamination-scoreDetail">
		<scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
			<!-- 考试概览 -->
			<view class="card overview-card">
				<view class="row-between mb8">
					<text class="tag tag-blue text-xs">{{ detail.examTypeName }}</text>
					<text :class="detail.isPass ? 'score-result-pass' : 'score-result-fail'">
						{{ detail.isPass ? '通过' : '未通过' }}
					</text>
				</view>
				<view class="exam-name">{{ detail.examName }}</view>
				<view class="overview-grid">
					<view><text class="text-gray">考试时间：</text>{{ detail.examTime }}</view>
					<view><text class="text-gray">用时：</text>{{ detail.usedTime }}</view>
					<view><text class="text-gray">满分/及格：</text>{{ detail.totalScore }} / {{ detail.passScore }}</view>
					<view><text class="text-gray">考次：</text>{{ detail.attemptCount }} / {{ detail.attemptLimit === 0 ? '不限' : detail.attemptLimit }}</view>
					<view>
						<text class="text-gray">最高成绩：</text>
						<text class="text-blue fw500">{{ detail.bestScore }} 分</text>
					</view>
					<view>
						<text class="text-gray">考试结果：</text>
						<text class="fw500" :class="detail.isPass ? 'text-green' : 'text-red'">
							{{ detail.isPass ? '通过' : '未通过' }}
						</text>
					</view>
				</view>
				<!-- 答题统计 -->
				<view class="stat-box">
					<view class="text-sm fw500 mb8">答题统计</view>
					<view class="stat-grid">
						<view class="stat-item">
							<view class="stat-num text-blue">{{ detail.totalQuestionNum || 0 }}</view>
							<view class="text-xs text-gray">总题数</view>
						</view>
						<view class="stat-item">
							<view class="stat-num text-green">{{ detail.correctCount || 0 }}</view>
							<view class="text-xs text-gray">正确</view>
						</view>
						<view class="stat-item">
							<view class="stat-num text-red">{{ detail.wrongCount || 0 }}</view>
							<view class="text-xs text-gray">错误</view>
						</view>
						<view class="stat-item">
							<view class="stat-num text-blue">{{ detail.accuracy }}</view>
							<view class="text-xs text-gray">正确率</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 答题详情 -->
			<view class="detail-panel">
				<view class="detail-title">
					答题详情
					<text class="text-gray detail-title-sub">（共{{ detail.totalQuestionNum || 0 }}题）</text>
				</view>

				<view v-for="(item, index) in answerList" :key="index" class="question-card">
					<view class="row-between mb8">
						<view class="q-head">
							<text class="q-type-badge">{{ questionTypeName(item.questionType) }}</text>
							<text class="text-xs text-gray q-no">第 {{ questionNo(index) }} 题</text>
							<text class="diff-badge" :class="difficultyClass(item.difficulty)">{{ difficultyName(item.difficulty) }}</text>
						</view>
						<text class="tag text-xs" :class="isCorrect(item) ? 'tag-green' : 'tag-orange'">
							{{ isCorrect(item) ? '答对' : '答错' }}
						</text>
					</view>
					<view class="q-content">{{ item.questionContent }}</view>
					<view class="answer-box" :class="isCorrect(item) ? 'answer-box-correct' : 'answer-box-wrong'">
						<view class="mb4">
							<text class="text-xs text-gray">我的答案：</text>
							<text class="text-xs fw500" :class="isCorrect(item) ? 'text-green' : 'text-red'">
								{{ item.userAnswer }}{{ answerSuffix(item) }}
							</text>
						</view>
						<view>
							<text class="text-xs text-gray">正确答案：</text>
							<text class="text-xs text-green fw500">{{ item.correctAnswer }}</text>
						</view>
					</view>
					<view v-if="item.analysis" class="analysis-box">解析：{{ item.analysis }}</view>
				</view>

				<view v-if="!answerList[0] && !listLoading" class="empty-tip">暂无答题记录</view>
				<view v-if="listLoading" class="loading-tip">加载中...</view>
				<view v-if="noMore && answerList[0]" class="loading-tip">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 题型映射：1-单选题，2-多选题，3-判断题
	const QUESTION_TYPE_MAP = {
		1: '单选题',
		2: '多选题',
		3: '判断题',
	};

	// 难度映射：1-简单，2-一般，3-较难，4-极难
	const DIFFICULTY_MAP = {
		1: { name: '简单', cls: 'diff-easy' },
		2: { name: '一般', cls: 'diff-normal' },
		3: { name: '较难', cls: 'diff-hard' },
		4: { name: '极难', cls: 'diff-extreme' },
	};

	export default {
		data() {
			return {
				attemptId: '',
				examId: '',
				// 上部分：考试概况
				detail: {
					examTypeName: '',
					examName: '',
					isPass: false,
					examTime: '',
					usedTime: '',
					totalScore: 0,
					passScore: 0,
					attemptCount: 0,
					attemptLimit: 0,
					bestScore: 0,
					totalQuestionNum: 0,
					correctCount: 0,
					wrongCount: 0,
					accuracy: '-',
				},
				// 下部分：答题详情列表
				answerList: [],
				listLoading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				noMore: false,
			}
		},
		onLoad(options) {
			this.attemptId = options.attemptId || '';
			this.examId = options.examId || '';
			if (!this.attemptId) {
				uni.showToast({ title: '考试信息无效', icon: 'none' });
				setTimeout(() => uni.navigateBack(), 1500);
				return;
			}
			this.loadExamDetail();
			this.loadAnswerList();
		},
		methods: {
			questionTypeName(type) {
				return QUESTION_TYPE_MAP[type] || '';
			},
			difficultyName(difficulty) {
				const d = DIFFICULTY_MAP[difficulty];
				return d ? d.name : '';
			},
			difficultyClass(difficulty) {
				const d = DIFFICULTY_MAP[difficulty];
				return d ? d.cls : '';
			},
			isCorrect(item) {
				return item.isCorrect === 1 || item.isCorrect === true;
			},
			answerSuffix(item) {
				if (item.answerStatusText) return `（${item.answerStatusText}）`;
				if (item.isPartial) return '（部分正确）';
				return this.isCorrect(item) ? '（正确）' : '（错误）';
			},
			questionNo(index) {
				const item = this.answerList[index];
				if (item && item.questionNo) return item.questionNo;
				if (item && item.sortNo) return item.sortNo;
				return index + 1;
			},
			// 上部分：考试概况（独立详情接口）
			async loadExamDetail() {
				try {
					// TODO 后台接口未提供，先占位；接口就绪后放开以下代码
					// const { data } = await examElExamAttemptAnswerDetail({ attemptId: this.attemptId });
					// if (data.code === 200 && data.data) {
					//     const d = data.data;
					//     this.detail = {
					//         examTypeName: d.examTypeName || '',
					//         examName: d.examName || '',
					//         isPass: d.examStatus === 1,
					//         examTime: parseTime(d.startTime, '{y}-{m}-{d}'),
					//         usedTime: d.myDuration || '-',
					//         totalScore: d.totalScore || 0,
					//         passScore: d.passScore || 0,
					//         attemptCount: d.attemptCount || 0,
					//         attemptLimit: d.attemptLimit || 0,
					//         bestScore: d.bestScore || 0,
					//         totalQuestionNum: d.totalQuestionNum || 0,
					//         correctCount: d.correctCount || 0,
					//         wrongCount: d.wrongCount || 0,
					//         accuracy: d.accuracy || '-',
					//     };
					// }
				} catch (e) {
					console.error('获取考试详情失败', e);
				}
			},
			resetList() {
				this.page = 1;
				this.noMore = false;
				this.$set(this, 'answerList', []);
				this.loadAnswerList();
			},
			// 下部分：答题详情列表（分页滚动加载）
			async loadAnswerList() {
				if (this.listLoading || this.noMore) return;
				this.listLoading = true;
				try {
					// TODO 后台接口未提供，先占位；接口就绪后放开以下代码
					// const { data } = await examElExamAttemptAnswerAttemptAnswer({
					//     page: this.page,
					//     pageSize: this.pageSize,
					//     attemptId: this.attemptId,
					// });
					// if (data.code === 200) {
					//     const records = data.data.records || [];
					//     const newList = this.page === 1 ? records : [...this.answerList, ...records];
					//     this.$set(this, 'answerList', newList);
					//     this.total = data.data.total;
					//     if (newList.length >= this.total) {
					//         this.noMore = true;
					//     } else {
					//         this.page++;
					//     }
					// }
				} catch (e) {
					console.error('获取答题详情失败', e);
				} finally {
					this.listLoading = false;
				}
			},
			onScrollToLower() {
				this.loadAnswerList();
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-scoreDetail
		height 100%
		display flex
		flex-direction column
		overflow hidden
		background-color #f0f4fb

	.scroll-content
		flex 1
		overflow hidden

	.card
		background #fff
		border 1rpx solid #dde3ed
		border-radius 24rpx
		padding 32rpx
		margin 24rpx 24rpx 24rpx
		box-shadow 0 4rpx 24rpx rgba(24,87,212,0.08)

	.exam-name
		font-size 32rpx
		font-weight 700
		color #1a2233
		margin-bottom 20rpx

	.overview-grid
		display grid
		grid-template-columns 1fr 1fr
		gap 12rpx
		font-size 26rpx
		color #1a2233
		margin-bottom 28rpx

	// 答题统计
	.stat-box
		background #f4f6fa
		border-radius 16rpx
		padding 24rpx
		margin-bottom 28rpx

	.stat-grid
		display grid
		grid-template-columns 1fr 1fr 1fr 1fr
		gap 16rpx
		text-align center

	.stat-num
		font-size 40rpx
		font-weight 700

	// 答题详情区
	.detail-panel
		padding 0 24rpx 24rpx

	.detail-title
		font-size 24rpx
		font-weight 500
		padding 28rpx 0 20rpx

	.detail-title-sub
		font-weight 400

	// 题目卡片
	.question-card
		background #fff
		border 1rpx solid #dde3ed
		border-radius 20rpx
		padding 28rpx
		margin-bottom 20rpx

	.row-between
		display flex
		align-items center
		justify-content space-between

	.q-head
		display flex
		align-items center

	.q-type-badge
		background #1857d4
		color #fff
		font-size 24rpx
		padding 4rpx 16rpx
		border-radius 8rpx

	.q-no
		margin-left 12rpx

	.diff-badge
		margin-left 12rpx
		font-size 20rpx
		padding 2rpx 12rpx
		border-radius 8rpx
		border 1rpx solid transparent

	.diff-easy
		background #f6ffed
		color #52c41a
		border-color #b7eb8f

	.diff-normal
		background #e6f4ff
		color #1677ff
		border-color #91caff

	.diff-hard
		background #fff7e6
		color #fa8c16
		border-color #ffd591

	.diff-extreme
		background #f9f0ff
		color #722ed1
		border-color #d3adf7

	.q-content
		font-size 24rpx
		line-height 1.7
		margin-bottom 20rpx

	// 答案区
	.answer-box
		border-radius 16rpx
		padding 20rpx
		margin-bottom 20rpx

	.answer-box-correct
		background #f6ffed
		border 1rpx solid #b7eb8f

	.answer-box-wrong
		background #f4f6fa

	// 解析区
	.analysis-box
		background #f6ffed
		border-radius 16rpx
		padding 20rpx
		font-size 26rpx
		color #4a5568
		line-height 1.7

	// 标签
	.tag
		display inline-flex
		align-items center
		padding 4rpx 16rpx
		border-radius 40rpx
		font-weight 500

	.tag-blue
		background #eef3fd
		color #1857d4

	.tag-green
		background #edfaf6
		color #0d8f6f

	.tag-orange
		background #fef6ec
		color #e67e22

	.score-result-pass
		color #10a37f
		font-weight 600

	.score-result-fail
		color #e53e3e
		font-weight 600

	.text-xs
		font-size 22rpx

	.text-sm
		font-size 24rpx

	.text-gray
		color #8896a7

	.text-blue
		color #1857d4

	.text-green
		color #10a37f

	.text-red
		color #e53e3e

	.fw500
		font-weight 500

	.mb4
		margin-bottom 8rpx

	.mb8
		margin-bottom 16rpx

	// 提示
	.empty-tip
		text-align center
		line-height 80rpx
		color #aaa
		font-size 24rpx

	.loading-tip
		text-align center
		line-height 60rpx
		color #aaa
		font-size 22rpx
</style>