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

<!-- 历史错题 -->
<template>
	<view class="safetyEducationExamination-incorrectQuestions">
		<!-- 顶部知识点标签 -->
		<!-- <scroll-view scroll-x class="tag-scroll">
			<view class="tag-scroll-inner">
				<text
					v-for="(tag, index) in typeTags"
					:key="index"
					class="filter-tag"
					:class="{ 'filter-tag-active': activeTagIndex === index }"
					@click="onTagChange(index)"
				>{{ tag.label }}</text>
			</view>
		</scroll-view> -->

		<!-- 错题列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
			<view class="panel">
				<view v-for="(item, index) in questionList" :key="index" class="question-card">
					<view class="row-between mb8">
						<view class="q-head">
							<text class="q-type-badge">{{ questionTypeName(item.questionType) }}</text>
							<text v-if="examName" class="text-xs text-gray q-exam-name">{{ examName }}</text>
						</view>
						<text class="tag text-xs" :class="item.errorCount >= 3 ? 'tag-red' : 'tag-orange'">答错{{ item.errorCount || 0 }}次</text>
					</view>
					<view class="q-content">
						<!-- <text class="text-sm">{{ item.questionContent }}</text> -->
						<rich-text class="text-sm" :nodes="item.questionContent || ''"></rich-text>
					</view>
					<view v-if="item.userAnswer || item.correctAnswer" class="answer-box">
						<view v-if="item.userAnswer" class="mb4">
							<text class="text-xs text-gray">我的答案：</text>
							<text class="text-xs text-red fw500">{{ item.userAnswer }}</text>
						</view>
						<view v-if="item.correctAnswer">
							<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">
						<text>解析：{{ item.analysis }}</text>
					</view>
				</view>
				<view v-if="!questionList[0] && !loading" class="empty-tip">暂无错题记录</view>
				<view v-if="loading" class="loading-tip">加载中...</view>
				<view v-if="noMore && questionList[0]" class="loading-tip">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		examElKnowledgePointTreeList,
		examElExamAttemptAnswerAttemptAnswer,
	} from '@/pages_safetyEducationExamination/api/index.js'

	// 题型映射
	const QUESTION_TYPE_MAP = {
		1: '单选题',
		2: '多选题',
		3: '判断题',
	};

	export default {
		data() {
			return {
				attemptId: '',
				examName: '',
				typeTags: [{ label: '全部', value: null }],
				activeTagIndex: 0,
				questionList: [],
				loading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				noMore: false,
			}
		},
		onLoad(options) {
			this.attemptId = options.attemptId || '';
			this.examName = options.examName ? decodeURIComponent(options.examName) : '';
			if (!this.attemptId) {
				uni.showToast({ title: '考试信息无效', icon: 'none' });
				setTimeout(() => uni.navigateBack(), 1500);
				return;
			}
			// this.loadTypeTags();
			this.loadQuestionList();
		},
		methods: {
			questionTypeName(type) {
				return QUESTION_TYPE_MAP[type] || '';
			},
			// 知识点标签
			async loadTypeTags() {
				try {
					const { data } = await examElKnowledgePointTreeList({ dataScope: 1 });
					if (data.code === 200 && data.data) {
						const tags = (data.data || []).map(item => ({
							label: item.knowledgePointName,
							value: item.id,
						}));
						this.$set(this, 'typeTags', [{ label: '全部', value: null }, ...tags]);
					}
				} catch (e) {
					console.error('获取知识点类型失败', e);
				}
			},
			onTagChange(index) {
				if (this.activeTagIndex === index) return;
				this.activeTagIndex = index;
				this.resetList();
			},
			resetList() {
				this.page = 1;
				this.noMore = false;
				this.$set(this, 'questionList', []);
				this.loadQuestionList();
			},
			// 错题列表（分页）
			async loadQuestionList() {
				if (this.loading || this.noMore) return;
				this.loading = true;
				try {
					// const tag = this.typeTags[this.activeTagIndex];
					const { data } = await examElExamAttemptAnswerAttemptAnswer({
						page: this.page,
						pageSize: this.pageSize,
						attemptId: this.attemptId,
						// knowledgePointId: tag ? tag.value : undefined,
					});
					if (data.code === 200) {
						const records = data.data.records || [];
						const newList = this.page === 1 ? records : [...this.questionList, ...records];
						this.$set(this, 'questionList', newList);
						this.total = data.data.total;
						if (newList.length >= this.total) {
							this.noMore = true;
						} else {
							this.page++;
						}
					}
				} catch (e) {
					console.error('获取错题列表失败', e);
				} finally {
					this.loading = false;
				}
			},
			onScrollToLower() {
				this.loadQuestionList();
			},
		},
	}
</script>

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

	// 知识点标签横滚
	.tag-scroll
		background #fff
		white-space nowrap
		padding 20rpx 24rpx 16rpx
		flex-shrink 0

	.tag-scroll-inner
		display inline-flex
		gap 16rpx

	.filter-tag
		display inline-block
		font-size 22rpx
		padding 10rpx 24rpx
		border-radius 40rpx
		background #f4f6fa
		color #8896a7
		white-space nowrap

	.filter-tag-active
		background #1857d4
		color #fff
		box-shadow 0 4rpx 16rpx rgba(24,87,212,0.3)

	// 滚动区
	.scroll-content
		flex 1
		overflow hidden

	.panel
		padding 16rpx 24rpx 32rpx

	// 错题卡片
	.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-exam-name
		margin-left 16rpx

	.q-content
		line-height 1.7
		margin-bottom 20rpx

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

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

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

	.tag-orange
		background #fef6ec
		color #e67e22

	.tag-red
		background #fff5f5
		color #e53e3e

	.text-xs
		font-size 22rpx

	.text-sm
		font-size 24rpx

	.text-gray
		color #8896a7

	.text-green
		color #0d8f6f

	.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>