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

<!-- 在线考试答题页 -->
<template>
	<view class="exam-screen">
		<!-- 顶部栏 -->
		<view class="topbar">
			<view class="topbar-left" @click="requestSubmit(false)">‹ 交卷</view>
			<view class="topbar-title">{{ examInfo.examName || '考试中' }}</view>
			<view class="topbar-right" @click="toggleQuestionNav">题号</view>
		</view>

		<!-- 剩余时间条 -->
		<view class="time-bar">
			<view class="time-bar-left">
				<text class="time-label">剩余时间</text>
				<text class="time-value">{{ formattedTime }}</text>
			</view>
			<text class="time-tip">请合理安排答题时间</text>
		</view>

		<!-- 答题统计 -->
		<view class="stat-row">
			<view class="stat-item">
				<text class="stat-num stat-answered">{{ answeredCount }}</text>
				<text class="stat-label">已答</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{ unansweredCount }}</text>
				<text class="stat-label">未答</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{ totalCount }}</text>
				<text class="stat-label">总题</text>
			</view>
		</view>

		<!-- 题号导航面板 -->
		<view v-if="showQuestionNav" class="q-nav-panel">
			<view class="q-nav-scroll-wrapper">
				<view class="q-nav-header">
					<text class="q-nav-title">题目列表</text>
					<text class="q-nav-close" @click="toggleQuestionNav">✕</text>
				</view>
				<scroll-view scroll-y class="q-nav-scroll">
					<view v-for="(group, gi) in questionTypeGroups" :key="gi" class="q-group">
						<view class="q-group-title">{{ group.questionTypeName }}（{{ group.questionCount }}题 {{ group.totalScore }}分）</view>
						<view class="q-num-row">
							<view
								v-for="(q, qi) in group.questions"
								:key="qi"
								class="q-num"
								:class="gi === groupIndex && qi === questionIndex ? 'current' : (q.answered === 1 ? 'answered' : '')"
								@click="selectQuestion(gi, qi)"
							>{{ q.questionNo }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 题目内容 -->
		<scroll-view scroll-y class="q-scroll-content">
			<view v-if="currentQuestion.snapshotQuestionId" class="q-card">
				<view class="q-header">
					<view class="q-header-left">
						<text class="q-type-badge">{{ currentQuestion.questionTypeName }}</text>
						<text class="q-num-text">第 {{ currentQuestion.questionNo }} 题</text>
						<text class="q-score-text">（{{ currentQuestion.questionScore }}分）</text>
					</view>
					<text v-if="currentQuestion.difficulty" class="q-difficulty">{{ getDifficultyText(currentQuestion.difficulty) }}</text>
				</view>
				<view class="q-content">
					<rich-text :nodes="currentQuestion.questionContent || ''"></rich-text>
				</view>
				<view class="q-options">
					<view
						v-for="(opt, oi) in (currentQuestion.options || [])"
						:key="oi"
						class="q-option"
						:class="{ selected: isSelected(opt.optionLabel) }"
						@click="selectAnswer(oi)"
					>
						<view class="q-option-label">{{ opt.optionLabel }}</view>
						<view class="q-option-content">
							<rich-text :nodes="opt.optionContent || opt.optionLabel"></rich-text>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="pageLoading" class="empty-tip">加载中...</view>
			<view v-else class="empty-tip">暂无题目</view>
			<view class="scroll-bottom-space"></view>
		</scroll-view>

		<!-- 上一题/下一题 -->
		<view class="q-nav">
			<view class="q-nav-btn" :class="{ disabled: isFirstQuestion }" @click="prevQuestion">上一题</view>
			<view class="q-nav-btn q-nav-btn-next" :class="{ disabled: isLastQuestion }" @click="nextQuestion">下一题</view>
		</view>

		<!-- 底部提交 -->
		<view class="exam-bottom">
			<view class="btn-primary" @click="requestSubmit(false)">提交试卷</view>
		</view>

		<!-- 交卷结果遮罩 -->
		<view v-if="showResult" class="result-shade">
			<view class="result-card">
				<view class="result-title">{{ resultData.title }}</view>
				<view class="result-score">{{ resultData.score }} 分</view>
				<view class="result-desc">{{ resultData.desc }}</view>
				<view class="result-btns">
					<view v-if="resultData.canRetake" class="result-btn result-btn-outline" @click="retakeExam">重新考试</view>
					<view class="result-btn result-btn-primary" @click="closeResult">{{ resultData.canRetake ? '返回' : '确认' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		examElExamAttemptReviewSidebar,
		examElExamAttemptReviewQuestion,
		examUserExamGetExamSurplusTime,
		examUserExamAnswerSave,
		examUserExamSubmit,
		examUserExamStart,
	} from '@/pages_safetyEducationExamination/api/index.js'

	export default {
		data() {
			return {
				examId: '',
				attemptId: '',
				examKind: '',
				examInfo: {},
				questionTypeGroups: [],
				currentQuestion: {},
				groupIndex: 0,
				questionIndex: 0,
				remainingSeconds: 0,
				timer: null,
				hasWarnedTime: false,
				showQuestionNav: false,
				pageLoading: false,
				isSaving: false,
				isSubmitting: false,
				hasSubmitted: false,
				showResult: false,
				resultData: {},
			}
		},
		computed: {
			isFirstQuestion() {
				return this.groupIndex === 0 && this.questionIndex === 0;
			},
			isLastQuestion() {
				const lastGi = this.questionTypeGroups.length - 1;
				if (lastGi < 0) return true;
				const lastGroup = this.questionTypeGroups[lastGi];
				return this.groupIndex === lastGi && this.questionIndex === (lastGroup.questions.length - 1);
			},
			totalCount() {
				return this.questionTypeGroups.reduce((s, g) => s + (g.questions ? g.questions.length : 0), 0);
			},
			answeredCount() {
				return this.questionTypeGroups.reduce((s, g) => {
					return s + (g.questions || []).filter(q => q.answered === 1).length;
				}, 0);
			},
			unansweredCount() {
				return this.totalCount - this.answeredCount;
			},
			formattedTime() {
				const s = Math.max(0, Math.floor(this.remainingSeconds));
				const m = Math.floor(s / 60);
				const sec = s % 60;
				return m + '分' + (sec < 10 ? '0' : '') + sec + '秒';
			},
		},
		onLoad(options) {
			this.examId = options.examId || '';
			this.attemptId = options.attemptId || '';
			this.examKind = options.examKind || '';
			if (!this.attemptId) {
				uni.showToast({ title: '考试信息无效', icon: 'none' });
				setTimeout(() => uni.navigateBack(), 1500);
				return;
			}
			this.pageLoading = true;
			this.loadSidebar();
		},
		onShow() {
			if (this.hasSubmitted || !this.attemptId) return;
			if (this.questionTypeGroups.length > 0) {
				this.syncRemainingTime();
			}
		},
		onHide() {
			this.clearTimer();
			if (!this.hasSubmitted) this.saveCurrentAnswer();
		},
		onUnload() {
			this.clearTimer();
			if (!this.hasSubmitted) this.saveCurrentAnswer();
		},
		methods: {
			async loadSidebar() {
				try {
					const { data } = await examElExamAttemptReviewSidebar({
						attemptId: this.attemptId,
						examKind: this.examKind,
					});
					if (data.code === 200 && data.data) {
						this.examInfo = {
							examTypeName: data.data.examTypeName || '',
							examName: data.data.examName || '',
							questionCount: data.data.questionCount || 0,
							totalScore: data.data.totalScore || 0,
							passScore: data.data.passScore || 0,
						};
						this.$set(this, 'questionTypeGroups', data.data.questionTypeGroups || []);
						this.groupIndex = 0;
						this.questionIndex = 0;
						const firstGroup = this.questionTypeGroups[0];
						if (firstGroup && firstGroup.questions && firstGroup.questions.length > 0) {
							await this.loadQuestion(firstGroup.questions[0].snapshotQuestionId);
							this.syncRemainingTime();
						}
					} else {
						uni.showToast({ title: data.message || '加载失败', icon: 'none' });
					}
				} catch (e) {
					console.error('加载题号导航失败', e);
				} finally {
					this.pageLoading = false;
				}
			},
			async loadQuestion(snapshotQuestionId) {
				try {
					const { data } = await examElExamAttemptReviewQuestion({
						attemptId: this.attemptId,
						snapshotQuestionId: snapshotQuestionId,
						examScene: 1,
					});
					if (data.code === 200 && data.data) {
						this.$set(this, 'currentQuestion', data.data);
					}
				} catch (e) {
					console.error('加载题目失败', e);
				}
			},
			async syncRemainingTime() {
				try {
					const { data } = await examUserExamGetExamSurplusTime({ attemptId: this.attemptId });
					if (data.code === 200) {
						this.remainingSeconds = Number(data.data) || 0;
						this.clearTimer();
						this.startTimer();
					}
				} catch (e) {
					console.error('获取剩余时间失败', e);
				}
			},
			startTimer() {
				if (this.timer) return;
				this.timer = setInterval(() => {
					if (this.remainingSeconds <= 0) {
						this.clearTimer();
						this.autoSubmit();
						return;
					}
					this.remainingSeconds--;
					if (this.remainingSeconds === 60 && !this.hasWarnedTime) {
						this.hasWarnedTime = true;
						uni.showToast({ title: '请注意剩余时间', icon: 'none', duration: 2000 });
					}
				}, 1000);
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			selectAnswer(optIndex) {
				const opt = (this.currentQuestion.options || [])[optIndex];
				if (!opt || !this.currentQuestion.snapshotQuestionId) return;
				let tags = Array.isArray(this.currentQuestion.answerTags) ? [...this.currentQuestion.answerTags] : [];
				if (this.currentQuestion.questionType === 2) {
					const idx = tags.indexOf(opt.optionLabel);
					if (idx === -1) {
						tags.push(opt.optionLabel);
					} else {
						tags.splice(idx, 1);
					}
				} else {
					tags = [opt.optionLabel];
				}
				this.$set(this.currentQuestion, 'answerTags', tags);
			},
			isSelected(label) {
				const tags = this.currentQuestion.answerTags;
				return Array.isArray(tags) && tags.indexOf(label) !== -1;
			},
			saveCurrentAnswer() {
				const q = this.currentQuestion;
				if (!q || !q.snapshotQuestionId) return Promise.resolve();
				const tags = Array.isArray(q.answerTags) ? q.answerTags.filter(Boolean) : [];
				if (tags.length === 0) return Promise.resolve();
				return examUserExamAnswerSave({
					attemptId: this.attemptId,
					snapshotQuestionId: q.snapshotQuestionId,
					userAnswer: tags.join(','),
				}).then(res => {
					if (res.data && res.data.code === 200) {
						const groups = this.questionTypeGroups;
						if (groups[this.groupIndex] && groups[this.groupIndex].questions[this.questionIndex]) {
							this.$set(groups[this.groupIndex].questions[this.questionIndex], 'answered', 1);
						}
					}
				}).catch(e => {
					console.error('保存答案失败', e);
				});
			},
			async changeQuestion(targetGi, targetQi) {
				if (this.isSaving) return;
				if (targetGi === this.groupIndex && targetQi === this.questionIndex) return;
				const group = this.questionTypeGroups[targetGi];
				if (!group || !group.questions || !group.questions[targetQi]) return;
				this.isSaving = true;
				await this.saveCurrentAnswer();
				this.isSaving = false;
				this.groupIndex = targetGi;
				this.questionIndex = targetQi;
				await this.loadQuestion(group.questions[targetQi].snapshotQuestionId);
			},
			selectQuestion(gi, qi) {
				this.changeQuestion(gi, qi);
				this.showQuestionNav = false;
			},
			prevQuestion() {
				if (this.isFirstQuestion || this.isSaving) return;
				if (this.questionIndex > 0) {
					this.changeQuestion(this.groupIndex, this.questionIndex - 1);
				} else {
					const prevGi = this.groupIndex - 1;
					const prevGroup = this.questionTypeGroups[prevGi];
					if (prevGroup) {
						this.changeQuestion(prevGi, prevGroup.questions.length - 1);
					}
				}
			},
			nextQuestion() {
				if (this.isLastQuestion || this.isSaving) return;
				const currentGroup = this.questionTypeGroups[this.groupIndex];
				if (this.questionIndex < currentGroup.questions.length - 1) {
					this.changeQuestion(this.groupIndex, this.questionIndex + 1);
				} else {
					this.changeQuestion(this.groupIndex + 1, 0);
				}
			},
			toggleQuestionNav() {
				this.showQuestionNav = !this.showQuestionNav;
			},
			getNumClass(gi, qi, q) {
				if (gi === this.groupIndex && qi === this.questionIndex) return 'current';
				if (q.answered === 1) return 'answered';
				return '';
			},
			getDifficultyText(d) {
				return { 1: '简单', 2: '一般', 3: '较难', 4: '很难' }[d] || '';
			},
			async requestSubmit(isAuto) {
				if (this.isSubmitting || this.hasSubmitted) return;
				this.isSubmitting = true;
				await this.saveCurrentAnswer();
				const unanswered = this.unansweredCount;
				if (isAuto) {
					await this.doSubmit();
					this.isSubmitting = false;
					return;
				}
				const content = unanswered > 0 ? `还有${unanswered}题未答，确认要交卷吗？` : '确认要交卷吗？';
				uni.showModal({
					title: '提示',
					content: content,
					success: async (res) => {
						if (res.confirm) {
							await this.doSubmit();
						}
						this.isSubmitting = false;
					},
					fail: () => { this.isSubmitting = false; }
				});
			},
			async autoSubmit() {
				if (this.isSubmitting || this.hasSubmitted) return;
				this.isSubmitting = true;
				await this.saveCurrentAnswer();
				uni.showToast({ title: '考试时间结束，正在提交…', icon: 'none' });
				await this.doSubmit();
				this.isSubmitting = false;
			},
			async doSubmit() {
				try {
					const { data } = await examUserExamSubmit({ attemptId: this.attemptId });
					if (data.code === 200 && data.data) {
						this.hasSubmitted = true;
						this.clearTimer();
						this.buildResult(data.data);
						this.showResult = true;
					} else {
						uni.showToast({ title: data.message || '交卷失败', icon: 'none' });
					}
				} catch (e) {
					console.error('交卷失败', e);
					uni.showToast({ title: '交卷失败', icon: 'none' });
				}
			},
			buildResult(resp) {
				const score = resp.totalScore || 0;
				const pass = score >= (this.examInfo.passScore || 0);
				if (pass) {
					this.resultData = {
						title: '考试通过',
						score: score,
						desc: resp.needPrompt === 1 ? '恭喜！本次成绩为最佳记录' : '考试已通过',
						canRetake: false,
					};
				} else if (resp.canContinueExam === 1) {
					this.resultData = {
						title: '考试未通过',
						score: score,
						desc: `未达及格线 ${this.examInfo.passScore} 分，可重新考试`,
						canRetake: true,
					};
				} else {
					this.resultData = {
						title: '考试未通过',
						score: score,
						desc: '未达及格线，暂无剩余考试机会',
						canRetake: false,
					};
				}
			},
			async retakeExam() {
				try {
					const { data } = await examUserExamStart({ examId: this.examId, examScene: 1 });
					if (data.code === 200 && data.data && data.data.attemptId) {
						this.attemptId = data.data.attemptId;
						this.showResult = false;
						this.hasSubmitted = false;
						this.isSubmitting = false;
						this.hasWarnedTime = false;
						this.$set(this, 'questionTypeGroups', []);
						this.$set(this, 'currentQuestion', {});
						this.groupIndex = 0;
						this.questionIndex = 0;
						this.remainingSeconds = 0;
						this.pageLoading = true;
						this.loadSidebar();
					} else {
						uni.showToast({ title: data.message || '重新考试失败', icon: 'none' });
					}
				} catch (e) {
					console.error('重新考试失败', e);
					uni.showToast({ title: '重新考试失败', icon: 'none' });
				}
			},
			closeResult() {
				this.showResult = false;
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.exam-screen
		height 100%
		display flex
		flex-direction column
		background #f5f7fa
		position relative

	.topbar
		display flex
		align-items center
		justify-content space-between
		height 88rpx
		padding 0 28rpx
		background #fff
		border-bottom 1rpx solid #e8edf3
		flex-shrink 0

	.topbar-left
		font-size 28rpx
		color #1677ff
		min-width 80rpx

	.topbar-title
		font-size 28rpx
		font-weight 600
		color #222
		flex 1
		text-align center

	.topbar-right
		font-size 28rpx
		color #1677ff
		min-width 80rpx
		text-align right

	.time-bar
		display flex
		align-items center
		justify-content space-between
		padding 20rpx 28rpx
		background linear-gradient(90deg, #1677ff 0%, #0958d9 100%)
		flex-shrink 0

	.time-bar-left
		display flex
		align-items baseline

	.time-label
		font-size 24rpx
		color rgba(255,255,255,0.85)
		margin-right 16rpx

	.time-value
		font-size 44rpx
		font-weight 700
		color #fff

	.time-tip
		font-size 22rpx
		color rgba(255,255,255,0.75)

	.stat-row
		display flex
		align-items center
		background #fff
		padding 20rpx 0
		flex-shrink 0
		border-bottom 1rpx solid #e8edf3

	.stat-item
		flex 1
		display flex
		flex-direction column
		align-items center

	.stat-divider
		width 1rpx
		height 40rpx
		background #eee

	.stat-num
		font-size 36rpx
		font-weight 700
		color #333
		line-height 1

	.stat-answered
		color #1677ff

	.stat-label
		font-size 22rpx
		color #999
		margin-top 6rpx

	.q-nav-panel
		position absolute
		top 0
		left 0
		right 0
		bottom 0
		background rgba(0,0,0,0.45)
		z-index 100
		display flex
		flex-direction column
		justify-content flex-end

	.q-nav-scroll-wrapper
		background #fff
		border-radius 32rpx 32rpx 0 0
		max-height 70vh
		display flex
		flex-direction column

	.q-nav-header
		display flex
		align-items center
		justify-content space-between
		padding 28rpx 28rpx 16rpx
		flex-shrink 0

	.q-nav-title
		font-size 30rpx
		font-weight 600
		color #222

	.q-nav-close
		font-size 32rpx
		color #999
		padding 10rpx

	.q-nav-scroll
		flex 1
		overflow hidden
		padding-bottom 40rpx

	.q-group
		padding 0 28rpx 16rpx

	.q-group-title
		font-size 24rpx
		color #666
		line-height 60rpx

	.q-num-row
		display flex
		flex-wrap wrap

	.q-num
		width 72rpx
		height 72rpx
		line-height 72rpx
		text-align center
		font-size 24rpx
		border-radius 12rpx
		margin 8rpx
		background #f4f6fa
		color #333
		border 1rpx solid transparent

	.q-num.answered
		background #e6f4ff
		color #1677ff
		border-color #91caff

	.q-num.current
		background #1677ff
		color #fff

	.q-scroll-content
		flex 1
		overflow hidden

	.q-card
		margin 24rpx
		padding 28rpx
		background #fff
		border-radius 20rpx
		border 1rpx solid #dde3ed

	.q-header
		display flex
		align-items center
		justify-content space-between
		margin-bottom 20rpx

	.q-header-left
		display flex
		align-items center

	.q-type-badge
		font-size 20rpx
		padding 4rpx 14rpx
		background #e6f4ff
		color #1677ff
		border 1rpx solid #91caff
		border-radius 8rpx
		margin-right 12rpx

	.q-num-text
		font-size 26rpx
		color #333

	.q-score-text
		font-size 22rpx
		color #999

	.q-difficulty
		font-size 22rpx
		color #fa8c16
		background #fff7e6
		padding 4rpx 12rpx
		border-radius 8rpx

	.q-content
		font-size 28rpx
		line-height 1.8
		color #222
		margin-bottom 24rpx

	.q-options
		display flex
		flex-direction column

	.q-option
		display flex
		align-items center
		padding 22rpx 20rpx
		margin-bottom 16rpx
		border 2rpx solid #dde3ed
		border-radius 16rpx
		background #fff

	.q-option.selected
		border-color #1677ff
		background #e6f4ff

	.q-option-label
		width 48rpx
		height 48rpx
		line-height 48rpx
		text-align center
		border-radius 50%
		background #f4f6fa
		color #333
		font-size 24rpx
		font-weight 600
		margin-right 20rpx
		flex-shrink 0

	.q-option.selected .q-option-label
		background #1677ff
		color #fff

	.q-option-content
		flex 1
		font-size 26rpx
		color #333
		line-height 1.6

	.scroll-bottom-space
		height 200rpx

	.q-nav
		display flex
		background #fff
		border-top 1rpx solid #e8edf3
		flex-shrink 0

	.q-nav-btn
		flex 1
		height 88rpx
		line-height 88rpx
		text-align center
		font-size 28rpx
		color #1677ff

	.q-nav-btn.q-nav-btn-next
		border-left 1rpx solid #e8edf3

	.q-nav-btn.disabled
		color #ccc

	.exam-bottom
		padding 20rpx 24rpx
		padding-bottom calc(20rpx + env(safe-area-inset-bottom))
		background #fff
		border-top 1rpx solid #e8edf3
		flex-shrink 0

	.btn-primary
		background #1677ff
		color #fff
		border-radius 16rpx
		font-size 30rpx
		font-weight 600
		height 88rpx
		line-height 88rpx
		text-align center

	.result-shade
		position fixed
		top 0
		left 0
		right 0
		bottom 0
		background rgba(0,0,0,0.55)
		z-index 200
		display flex
		align-items center
		justify-content center

	.result-card
		width 580rpx
		background #fff
		border-radius 24rpx
		padding 48rpx 40rpx 36rpx
		display flex
		flex-direction column
		align-items center

	.result-title
		font-size 32rpx
		font-weight 700
		color #222
		margin-bottom 20rpx

	.result-score
		font-size 72rpx
		font-weight 700
		color #1677ff
		line-height 1
		margin-bottom 16rpx

	.result-desc
		font-size 26rpx
		color #666
		text-align center
		margin-bottom 36rpx
		line-height 1.6

	.result-btns
		display flex
		width 100%

	.result-btn
		flex 1
		height 80rpx
		line-height 80rpx
		text-align center
		border-radius 14rpx
		font-size 28rpx

	.result-btn-outline
		border 1rpx solid #1677ff
		color #1677ff
		margin-right 20rpx

	.result-btn-primary
		background #1677ff
		color #fff

	.empty-tip
		text-align center
		padding 80rpx 0
		color #aaa
		font-size 26rpx
</style>