GCLS_Page_Mobile/pages/answer_question/answer/index.vue

<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="nav-bar-box">
			<!-- 状态栏占位 -->
			<view class="status-bar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="nav-bar">
				<view class="nav-bar-left">
					<view class="left-bg" @click="onBack">
						<uni-icons type="back" size="16" color="#34343A" />
					</view>
				</view>
				<view class="nav-bar-right">
					<view class="nav-bar-number" @click="showQuestionTypeArea = !showQuestionTypeArea"
						:style="{ backgroundColor: showQuestionTypeArea ? '#E9E8EA' : ''}"
						v-if="showQuestionNumber||isAnswerReport">
						<SvgIcon icon-class="menu" :size="13" />
						<text>{{cur_number}} / {{total_number}}</text>
						<text class="type_name">{{cur_type_name}}</text>
						<view class="question-type-area" v-if="showQuestionTypeArea">
							<view :class="['question-type-name',cur_number==index+1?'active':'']"
								v-for="(item,index) in questionIndexList" :key="index" @click="switchQuestionIndex(index)">
								<text>
									{{index+1}}.{{item.type==='select'?item.additional_type==='single' ? '单选题' : '多选题':item.type_name}}
								</text>
							</view>
						</view>
					</view>
					<view class="nav-bar-countdown" v-if="!is_remarked&&!isAnswerReport&&share_record.answer_time_limit_minute>0">
						<SvgIcon icon-class="hourglass" :size="13" />
						<uni-countdown color="#175DFF" splitorColor="#175DFF" :showDay="false" :start="startCountdown"
							:minute="share_record.answer_time_limit_minute" @timeup="submitTopic(false)" />
					</view>
				</view>
			</view>
		</view>

		<!-- 题目 -->
		<view class="topic-area" id="topic-area" :style="`height: ${contentRealHeight}px`" @scroll="handlePageScroll">
			<view class="start-answer-box" v-if="questionType===''&&!is_remarked&&!isAnswerReport">
				<view class="start-answer-title">{{share_record.name}}</view>
				<text class="start-answer-content">{{share_record.memo}}</text>
				<hr />
				<text
					class="start-answer-tip">本练习共{{share_record.question_count?share_record.question_count:0}}题，限时{{share_record.answer_time_limit_minute?share_record.answer_time_limit_minute:0}}分钟。点击“开始答题”按钮进行作答，
					<text v-if="isExamMode">答题中途不可退出否则视为交卷。</text>作答完毕后请点击“提交”按钮。
				</text>
			</view>
			<!-- 选择题 -->
			<select-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='select'" ref="exercise"></select-question>
			<!-- 判断题 -->
			<judge-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='judge'" ref="exercise"></judge-question>
			<!-- 连线题 -->
			<matching-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='matching'" ref="exercise"></matching-question>
			<!-- 填空题 -->
			<fill-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='fill'" ref="exercise"></fill-question>
			<!-- 基础写作题 -->
			<write-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='write'" ref="exercise"></write-question>
			<!-- 对话 -->
			<dialogue-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='dialogue'" ref="exercise"></dialogue-question>
			<!-- 看图说话 -->
			<talk-picture-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='talk_picture'" ref="exercise"></talk-picture-question>
			<!-- 听说训练 -->
			<repeat-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='repeat'" ref="exercise"></repeat-question>
			<!-- 朗读 -->
			<read-aloud-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='read_aloud'" ref="exercise"></read-aloud-question>
			<!-- 听后辨调题 -->
			<choose-tone-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='choose_tone'" ref="exercise"></choose-tone-question>
			<!-- 阅读 -->
			<read-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='read'" ref="exercise"></read-question>
			<!-- 汉字书写题 -->
			<chinese-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='chinese'" ref="exercise"></chinese-question>
			<!-- 字词卡片-->
			<word-card-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='word_card'" ref="exercise"></word-card-question>
			<!-- 问答题 -->
			<essay-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='essay_question'" ref="exercise"></essay-question>
			<!-- 排序题 -->
			<sort-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='sort'" ref="exercise"></sort-question>
			<!-- 替换练习 -->
			<replace-answer-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='replace_answer'" ref="exercise"></replace-answer-question>
			<!-- 填表题-->
			<table-fill-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='table_fill'" ref="exercise"></table-fill-question>
			<!-- 看图写作 -->
			<write-picture-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='write_picture'" ref="exercise"></write-picture-question>
			<!-- 口语表达 -->
			<answer-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='answer_question'" ref="exercise"></answer-question>
			<!-- 听后选择题 -->
			<listen-select-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='listen_select'" ref="exercise"></listen-select-question>
			<!-- 听后判断题 -->
			<listen-judge-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='listen_judge'" ref="exercise"></listen-judge-question>
			<!-- 听后填空题 -->
			<listen-fill-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='listen_fill'" ref="exercise"></listen-fill-question>
			<!-- 字词听写-->
			<word-dictation-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='word_dictation'" ref="exercise"></word-dictation-question>
			<!-- 活动题-->
			<activity-question :questionData="questionData" @getUserAnswer="getQuestionInfo_AnswerRecord"
				v-if="questionType==='activity'" ref="exercise"></activity-question>
		</view>

		<!-- 查看教师批改 -->
		<view class="remark-area" v-if="isEnable(questionData.remark.is_remarked)">
			<uni-title type="h1" title="教师批改"></uni-title>
			<view class="remark-box">
				<text class="uni-text">{{questionData.remark.remark}}</text>
			</view>
			<view class="img-box">
				<image v-for="(file,i) in questionData.remark.file_list" :key="i" :src="file.file_url" mode="aspectFit">
				</image>
			</view>
			<view class="reviewer-area">
				<view class="head-img">
					<text class="head-img-box">
						<image :src="questionData.remark.remark_person_image_url" mode="aspectFit" />
					</text>
					<text class="reviewer-name">{{questionData.remark.remark_person_name}}</text>
				</view>
				<text class="date-box">{{questionData.remark.remark_time}}</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="foot-btn">
			<template v-if="cur_number === 0">
				<button class="next-btn start-answer-btn"
					@click="startAnswer(share_record_id,share_record.exercise_id)">开始答题</button>
			</template>
			<template v-if="cur_number > 1">
				<button class="pre-btn" v-if="isExerciseMode" @click="switchQuestionIndex(cur_number-2)">上一题</button>
				<button class="pre-btn" v-else @click="preTopic()">上一题</button>
			</template>
			<template v-if="cur_number > 0&&cur_number < total_number">
				<template v-if="isExerciseMode&&!isAnswerReport">
					<button class="next-btn" @click="nextTopic()"
						:style="{backgroundColor:isSwitchQuestionIndex[questionIndexList[cur_number-1].id]?'#306EFF':'#00C72C'}">
						{{isSwitchQuestionIndex[questionIndexList[cur_number-1].id]?'下一题':'提交'}}
					</button>
				</template>
				<template v-else>
					<button class="next-btn" @click="nextTopic()">下一题</button>
				</template>
			</template>
			<template v-if="total_number!=0&&cur_number === total_number&&!is_remarked&&!isAnswerReport">
				<template v-if="isExerciseMode">
					<button class="next-btn submit-btn" @click="submitTopic(true)"
						v-if="isSwitchQuestionIndex[questionIndexList[cur_number-1].id]">完成答题</button>
					<button class="next-btn submit-btn" @click="nextTopic()" v-else>提交</button>
				</template>
				<template v-else>
					<button class="next-btn submit-btn" @click="submitTopic(true)">完成答题</button>
				</template>
			</template>
		</view>

		<!-- <view class="message-box"
			v-if="false&&questionData.objective_user_answer&&isEnable(questionData.objective_user_answer.is_objective)&&isEnable(questionData.objective_user_answer.is_fill_answer)">
			<view class="checkmarkempty"
				v-if="questionData.objective_user_answer.answer_status===answer_status_list[1].value">
				<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
				<text>回答正确</text>
			</view>
			<view class="closeempty" v-if="questionData.objective_user_answer.answer_status===answer_status_list[2].value">
				<uni-icons type="closeempty" size="16" color="#ffffff"></uni-icons>
				<text>回答错误</text>
			</view>
		</view> -->
		<view class="scroll-tip" v-show="showScrollTip&&questionType!==''">
			<img src="static/arrow_down.png" />
		</view>
	</view>
</template>

<script setup>
	import {
		GetShareRecordInfo,
		GetExerciseQuestionIndexList,
		GetQuestionInfo,
		StartAnswer,
		GetQuestionInfo_AnswerRecord,
		FillQuestionAnswer,
		SubmitAnswer,
		EndAnswer,
	} from '@/api/exercise.js';
	import {
		optionTypeList,
		scoreTypeList,
		stemTypeList,
		selectTypeList,
		questionNumberTypeList,
		questionData,
		answer_mode_list,
		questionInfoData,
		isEnable,
		answer_status_list,
		isSwitchQuestionIndex,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				isEnable,
				answer_mode_list,
				answer_status_list,
				questionType: '',
				share_record_id: '',
				share_record: {},
				answer_record_id: '',
				cur_number: 0,
				total_number: 0,
				showQuestionNumber: false, //是否显示题目索引块
				cur_type_name: '', //当前题型名称
				showQuestionTypeArea: false, //快捷切换题目
				startCountdown: false,
				//题目索引列表
				questionIndexList: [{
					id: '',
					type: '',
					type_name: '',
					additional_type: '',
				}],
				questionData: questionData,
				isScanCode: false, //是否扫码进入
				is_remarked: false, //整个练习是否批注完成
				isTask: false, //是否由任务进入（用于返回）
				isAnswerReport: false, //是否答题报告进入
				//isSwitchQuestionIndex: {}, //是否直接切换题目索引
				isSwitchQuestionIndex,
				answer_control,
				isQH: false, //答题控制切换题目开关
				showScrollTip: true, // 是否显示向下滑动提示
				questionClientHeight: 0,
				taskSelectedDate: '',

				contentRealHeight: 0, //答题内容区域高度
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];

			uni.getSystemInfo({
				success: (res) => {
					this.contentRealHeight = res.windowHeight - 160;
				}
			});
		},
		onLoad(options) {
			this.isTask = options.isTask;
			this.taskSelectedDate = options.date;
			//二维码或者链接进入
			this.isScanCode = options.isScanCode;
			this.share_record_id = options.share_record_id;
			this.questionData.share_record_id = options.share_record_id;
			this.getShareRecordInfo();
			if (options && options.exercise_id) {
				// 任务或者练习列表测试报告进入
				this.cur_number = Number(options.cur_number);
				this.answer_record_id = options.answer_record_id;
				this.is_remarked = isEnable(options.is_remarked);
				this.isAnswerReport = true;
				this.getExerciseQuestionIndexList(options.exercise_id, options.question_id);
				this.$refs.exercise?.initAnswerControl();
			}
			var storageKey = this.answer_record_id + '_' + this.share_record_id;
			//清空本地缓存
			uni.removeStorage({
				key: storageKey
			});
		},
		computed: {
			// 是否练习模式
			isExerciseMode() {
				return this.share_record.answer_mode === this.answer_mode_list[0].value;
			},
			// 是否考试模式
			isExamMode() {
				return this.share_record.answer_mode === this.answer_mode_list[1].value;
			},
		},
		mounted() {
			uni.$on('receiveClientHeight', this.receiveClientHeight);
		},
		onUnload() {
			uni.$off('receiveClientHeight', this.receiveClientHeight);
		},
		methods: {
			//获取题目高度
			receiveClientHeight(questionClientHeight) {
				this.questionClientHeight = questionClientHeight;
			},
			//得到分享记录信息
			getShareRecordInfo() {
				GetShareRecordInfo({
					'share_record_id': this.share_record_id
				}).then((res) => {
					if (res.status) {
						// console.log('得到分享记录', res);
						this.share_record = res.share_record;
						this.total_number = res.share_record.question_count;
						// 扫码或输入链接，得到分享记录信息时，发现存在答题记录。如果是考试模式。
						// 跳转到答题报告显示。如果是练习模式，可以进行继续作答。
						if (isEnable(res.user_answer_record_info.is_exist_answer_record)) {
							//扫码进入且考试模式
							if (this.isScanCode && this.isExamMode) {
								uni.reLaunch({
									url: '/pages/common/AnswerReport?answer_record_id=' + res.user_answer_record_info
										.answer_record_id
								})
							}
						}
					}
				})
			},
			//开始答题
			startAnswer(share_record_id, exercise_id) {
				StartAnswer({
					'share_record_id': share_record_id,
					'exercise_id': exercise_id
				}).then((res) => {
					if (res.status) {
						this.answer_record_id = res.answer_record_id;
						this.showQuestionNumber = true;
						this.cur_number = 1;
						this.isSwitchQuestionIndex = {};
						this.getExerciseQuestionIndexList(this.share_record.exercise_id, '');
					}
				})
			},
			//获取题目索引
			getExerciseQuestionIndexList(exercise_id, question_id) {
				GetExerciseQuestionIndexList({
					'exercise_id': exercise_id
				}).then((res) => {
					if (res.status) {
						this.questionIndexList = res.index_list;
						this.startCountdown = true;
						this.total_number = res.index_list.length;
						this.getQuestionInfo({
							"question_id": question_id ? question_id : this.questionIndexList[0].id
						});
					}
				})
			},
			//获取题目详情
			async getQuestionInfo(data) {
				GetQuestionInfo(data).then((res) => {
					if (res.status && res.question && res.question.content) {
						var _questionData = JSON.parse(res.question.content);
						var cur_question = this.questionIndexList[this.cur_number - 1];
						this.cur_type_name = cur_question.type == 'select' ? cur_question.additional_type === 'single' ?
							'单选题' : '多选题' : cur_question.type_name; //当前题型名称
						if (Array.isArray(_questionData.option_list)) {
							_questionData.option_list.forEach(p => {
								p.answer = '',
									p.checked = false
							})
						}
						_questionData.file_list = res.file_list;
						_questionData.question_id = data.question_id;
						if (_questionData.file_list && _questionData.file_list.length > 0) {
							this.questionData.audio.src = _questionData.file_list[0].file_url;
							var that = this;
							this.questionData.audio.addEventListener('ended', function() {
								that.questionData.playing = false;
							})
						}
						this.questionData.user_answer = {};
						this.questionData.user_answer[data.question_id] = {
							is_fill_answer: false, // 用户是否填写答案,
							content: '', // 答案内容（JSON 格式文本）,
							answer_list: [],
							isEdit: false,
						};
						//写作题，问答题，活动题答案格式
						var needUploadFilesQuestionTypeList = ['write', 'essay_question', 'activity'];
						if (needUploadFilesQuestionTypeList.includes(_questionData.type)) {
							this.questionData.user_answer[data.question_id].answer_list.push({
								text: '', // 用户文章
								audio_file_id: '', // 录音id
								accessory_file_id_list: [], // 上传文件列表
							});
						}
						//朗读题或简答答案格式'short_answer'
						var needSoundRecordQuestionTypeList = ['read_aloud'];
						if (needSoundRecordQuestionTypeList.includes(_questionData.type)) {
							this.questionData.user_answer[data.question_id].answer_list.push({
								text: '', // 用户文章
								voice_file_id: '', // 录音id
							});
						}
						//口语表达答案格式
						if (_questionData.type === 'answer_question') {
							this.questionData.user_answer[data.question_id].answer_list.push({
								audio_file_id: '', // 录音id
							});
						}
						//替换练习答案格式
						if (_questionData.type === 'replace_answer') {
							this.questionData.user_answer[data.question_id].answer_list.push({
								mark_list: [],
								audio_file_id: '', // 录音id
							});
						}
						//this.questionData, _questionData合并为新对象{}，属性值重复的后者覆盖前者
						this.questionData = Object.assign({}, this.questionData, _questionData);
						this.questionData.answer_record_id = this.answer_record_id;
						this.questionData.isLoaded = false;
						this.questionType = this.questionData.type;
						this.questionData.isReadQuestionWatch = false;
						// console.log("index题目：", this.questionData);
					}
				})
			},

			//获取用户答案
			getQuestionInfo_AnswerRecord(question_id, callback) {
				GetQuestionInfo_AnswerRecord({
					answer_record_id: this.answer_record_id,
					question_id: question_id
				}).then((res) => {
					if (!res.status) return;
					this.questionData.remark = res.remark;
					this.questionData.objective_user_answer = res.user_answer;
					//从答题报告中进入答题控制需要判断
					if (this.isAnswerReport) {
						this.answerControl(res.user_answer, question_id);
						//如果是阅读题需提前获取阅读题附加题的答题控制
						if (res.question.type == 'read') {
							var obj = JSON.parse(res.question.content);
							if (!obj) return;
							obj.question_list?.map(item => {
								if (!item) return;
								this.answerControl(res.user_answer, item.id);
							});
						}
					}
					// console.log('批注', this.questionData.remark);
					let lst = [];
					if (res.user_answer.content) {
						var obj = JSON.parse(res.user_answer.content);
						if (obj)
							lst = obj.answer_list;
					}
					//写作题或者问答题答案格式
					var needUploadFilesQuestionTypeList = ['write', 'essay_question', 'activity'];
					if (needUploadFilesQuestionTypeList.includes(this.questionData.type) && lst.length ===
						0) {
						lst.push({
							text: '', // 用户文章
							audio_file_id: '', // 录音id
							accessory_file_id_list: [], // 上传文件列表
						});
					}
					//朗读题或简答答案格式'short_answer'
					var needSoundRecordQuestionTypeList = ['read_aloud'];
					if (needSoundRecordQuestionTypeList.includes(this.questionData.type) && lst
						.length === 0) {
						lst.push({
							text: '', // 用户文章
							voice_file_id: '', // 录音id
						});
					}
					//写作题或者问答题答案格式
					if ((this.questionData.type === 'answer_question') && lst.length === 0) {
						lst.push({
							audio_file_id: '', // 录音id
						});
					}
					//替换练习答案格式
					if (this.questionData.type === 'replace_answer' && lst.length === 0) {
						lst.push({
							mark_list: [],
							audio_file_id: '', // 录音id
						});
					}
					this.questionData.user_answer[question_id].answer_list = lst;
					this.questionData.user_answer[question_id].isEdit = false;
					// console.log('获取用户答案', this.questionData.user_answer);
					if (callback && typeof callback === 'function') {
						callback();
					};

					//获取元素高度，判断是否有滚动条
					this.$nextTick(() => {
						const element = document.getElementById('topic-area');
						let clientHeight = element.children[0].clientHeight + 34;
						if (this.questionClientHeight > 0) {
							clientHeight = this.questionClientHeight + clientHeight;
						}
						//此处的34是elementde的padding需计入
						if (clientHeight - element.clientHeight > 0) {
							this.showScrollTip = true;
						} else {
							this.showScrollTip = false;
						}
						this.questionClientHeight = 0;
					})

				})
			},

			//上一题
			preTopic() {
				this.$nextTick().then(() => {
					this.getOtherQuesion(-1);
				});
			},

			//下一题
			nextTopic() {
				this.$nextTick().then(() => {
					this.getOtherQuesion(1);
				});
			},
			async getOtherQuesion(otherIndex) {
				var cur_qid = this.questionIndexList[this.cur_number - 1].id;
				//不是答题卡进入；初次进入题目（不直接切换题目）
				var isChange = !this.isAnswerReport &&
					!this.isSwitchQuestionIndex[cur_qid];
				/**
				 * 是否即刻执行切换题目
				 */
				// var isImmediate = false;
				if (isChange) {
					var userAnswer = this.questionData.user_answer[this.questionData.question_id];
					if (!userAnswer) return;
					// if (userAnswer.isEdit) {
					if (true) {
						// 保存数据
						var answer_data = {
							"answer_record_id": this.answer_record_id,
							"question_id": this.questionData.question_id,
							"answer": {
								answer_list: userAnswer.answer_list
							},
						};
						var _ans = [];
						if (this.questionData.type == "read") {
							this.questionData.question_list.forEach(p => {
								var subAnswerList = this.questionData.user_answer[p.question_id];
								_ans.push({
									id: p.question_id,
									type: p.type,
									answer_list: subAnswerList ? subAnswerList.answer_list : []
								})
							})
							answer_data.answer.question_list = _ans;
						}

						if (!this.isAnswerReport) {
							await FillQuestionAnswer(answer_data).then((res) => {
								if (res.status) {
									if (isEnable(res.user_answer.is_fill_answer) && !this.isExamMode) {
										// 如果已经填写过答案，直接显示答案
										// console.log(res.user_answer.is_objective);
										// isImmediate = !isEnable(res.user_answer.is_objective);
										this.answerControl(res.user_answer, cur_qid);
										this.$set(this.isSwitchQuestionIndex, cur_qid, true);
									}
								}
							})
						}

					}
				} else {
					// console.log('已经判断答案跳过');
					this.switchQuestion(otherIndex);
					this.isQH = true;
				}
				//isQH是为了防止符合上面条件进行了题目切换，同时又符合下边的条件再次进行题目切换，（解决连跳两题的问题）
				var is_objective = !this.answer_control[cur_qid] ? true : this.answer_control[cur_qid].is_objective;
				//考试模式或者主观题（非客观题）直接切换题
				if (((this.isExamMode) && !this.isQH)) {
					// console.log('无需判断答案');
					this.switchQuestion(otherIndex);
				}
				setTimeout(() => {
					this.isQH = false
				}, 100)
			},
			switchQuestion(otherIndex) {
				if (otherIndex === 0) return;
				this.cur_number = this.cur_number + otherIndex;
				const data = {
					"question_id": this.questionIndexList[this.cur_number - 1].id,
					"answer_record_id": this.answer_record_id
				};
				this.getQuestionInfo(data);
			},
			switchQuestionIndex(index) {
				this.cur_number = index + 1;
				const data = {
					"question_id": this.questionIndexList[index].id,
					"answer_record_id": this.answer_record_id
				};
				this.getQuestionInfo(data);
			},
			async submitTopic(isSubmit) {
				await this.getOtherQuesion(0);
				var that = this;
				if (isSubmit) {
					uni.showModal({
						title: '提示',
						content: '是否提交答题？',
						success: function(res) {
							that.$refs.exercise?.initAnswerControl();
							if (res.confirm) {
								SubmitAnswer({
									answer_record_id: that.answer_record_id
								}).then((_res) => {
									if (_res.status) {
										uni.reLaunch({
											url: '/pages/common/AnswerReport?answer_record_id=' + that.answer_record_id +
												'&isTask=' + that.isTask + '&date=' + that.taskSelectedDate
										})
									}
								})
							}
						}
					});
				} else {
					//倒计时结束调用结束答题后直接到答题报告
					EndAnswer({
						answer_record_id: that.answer_record_id
					}).then((_res) => {
						that.$refs.exercise?.initAnswerControl();
						if (_res.status) {
							uni.reLaunch({
								url: '/pages/common/AnswerReport?answer_record_id=' + that.answer_record_id +
									'&isTask=' + that.isTask + '&date=' + that.taskSelectedDate
							})
						}
					})
				}
			},
			onBack() {
				let routes = getCurrentPages();
				//获取当前页路径
				let curPage = routes[routes.length - 1].route;
				//扫码进入答题直接返回到练习
				if (curPage.indexOf('answer_question') != -1 && this.isScanCode) {
					uni.reLaunch({
						url: '/pages/tabbar/exercise/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
				this.$refs.exercise?.initAnswerControl();
			},

			//答题控制
			answerControl(user_answer, question_id) {
				this.$nextTick().then(() => {
					/**
					 * 是否判断对错
					 * 1. 答题模式为练习模式:1【练习模式】，2【考试模式】
					 * 2. 答题模式为考试模式，且已经批改过
					 * 3. 从答题报告跳转到题目
					 */
					let isJudgeAnswer =
						this.isExerciseMode ||
						(this.isExamMode && this.is_remarked) ||
						this.isAnswerReport;
					/**
					 * 是否显示正确答案
					 * 1. 答题模式为练习模式，且正确答案显示模式为答题后显示
					 * correct_answer_show_mode: 1、答题后显示2、提交后显示'
					 * 3. 从答题报告跳转到题目
					 */
					let isViewRightAnswer =
						(this.isExerciseMode && this.share_record.correct_answer_show_mode === 1) ||
						this.isAnswerReport;
					/**
					 * 是否禁用答题
					 * 1. 答题模式为练习模式，且正确答案显示模式为答题后显示
					 * 2. 教师已经批改过
					 * 3. 从答题报告跳转到题目
					 */
					let isReadOnly =
						(this.isExerciseMode && this.share_record.correct_answer_show_mode === 1) ||
						this.is_remarked ||
						this.isAnswerReport;

					this.$refs.exercise?.showAnswer(
						isJudgeAnswer,
						isViewRightAnswer,
						isReadOnly,
						question_id,
						user_answer.content.length > 0 ? JSON.parse(user_answer.content) : null,
						isEnable(user_answer.is_objective)
					);

					this.questionData.isReadQuestionWatch = true;
				});
			},
			//滚动事件
			handlePageScroll() {
				if (this.questionType === '') return;
				const element = document.getElementById('topic-area');
				const scrollTop = element.scrollTop;
				//此处的34是elementde的padding需计入
				if ((element.children[0].clientHeight + 34) - element.clientHeight > 0) {
					this.showScrollTip = true;
					if (scrollTop > 0)
						this.showScrollTip = false;
				} else {
					this.showScrollTip = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import url("../../../static/style/exercise.scss");
	.nav-bar-box {
		.nav-bar {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			height: 92rpx;

			.nav-bar-left {
				flex: 1;
				padding: 0 16rpx;

				.left-bg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 80rpx;
					background-color: $uni-bg-color-grey;
				}
			}

			.nav-bar-right {
				flex: 2;
				padding: 0 16rpx;
				display: flex;
				justify-content: right;
				column-gap: 24rpx;

				.nav-bar-number,
				.nav-bar-countdown {
					padding: 12rpx 32rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						white-space: nowrap;
					}
				}

				.nav-bar-number {
					background-color: $uni-bg-color-grey;
					color: #34343A;
					column-gap: 8rpx;
				}

				.nav-bar-countdown {
					background-color: #E7EEFF;
					color: #175DFF;
					flex-direction: row;

					svg {
						margin-top: -1px;
					}
				}

				.question-type-area {
					position: absolute;
					top: 96rpx;
					padding: 10rpx;
					background-color: #ffffff;
					width: 250rpx;
					height: 400rpx;
					border-radius: 8px;
					box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
					overflow-y: auto;
					z-index: 99;

					.question-type-name {
						padding: 16rpx;

						&.active {
							background-color: #F4F8FF;
							color: $uni-color-main;
						}
					}
				}
			}
		}
	}

	.topic-area {
		display: flex;
		flex-direction: column;
		width: 88%;
		margin: 16rpx auto 32rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		overflow: scroll;
		box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.2);

		.start-answer-box {
			height: 80%;
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;
			align-items: center;
			justify-content: center;
			text-align: center;

			.start-answer-title {
				font-size: 32px;
				font-weight: 500;
				color: #306EFF;
			}

			.start-answer-content {
				font-size: 36rpx;
				line-height: 64rpx;
				font-weight: 400;
			}

			.start-answer-tip {
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 500;
				color: #306EFF;
			}

			hr {
				width: 100%;
				border: none;
				border-top: 1px solid #efefef;
			}
		}

	}

	.remark-area {
		display: flex;
		flex-direction: column;
		height: auto;
		width: 88%;
		margin: -12rpx auto 32rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		overflow: scroll;
		box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.2);

		.img-box {
			margin: 32rpx 0;
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			row-gap: 16rpx;
			column-gap: 16rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				background-color: #D9D9D9;
			}
		}

		.reviewer-area {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.head-img {
				width: 50%;
				display: flex;
				align-items: center;
				column-gap: 16rpx;

				.head-img-box {
					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						background-color: #ECB8B8;
					}
				}

				.reviewer-name {
					font-size: 32rpx;
				}
			}

			.date-box {
				font-size: 24rpx;
				opacity: 0.4;
			}

		}
	}

	.foot-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 94%;
		margin: 0 auto;

		.pre-btn,
		.next-btn {
			border-radius: 220rpx;
			font-size: 28rpx;
			font-weight: 400;
			padding: 8rpx 124rpx;
			border: none;

			color: #fff;
			background-color: #306EFF;
		}

		.submit-btn {
			background-color: #00C72C;
		}

		.start-answer-btn {
			width: 100%;
		}

		// .pre-btn {
		// 	background-color: #E9E8EA;
		// 	color: #34343A;
		// }

		// .next-btn {
		// 	background-color: #306EFF;
		// 	color: #fff;
		// }
	}

	.message-box {
		position: absolute;
		bottom: 160rpx;
		margin: 0 auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		uni-view {
			padding: 20rpx 36rpx;
			border-radius: 80rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			display: flex;
			align-items: center;
			column-gap: 8rpx;
		}

		.checkmarkempty {
			background-color: #3ACB85;
		}

		.closeempty {
			background-color: #E65656;
		}
	}

	.scroll-tip {
		position: fixed;
		bottom: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 8rpx 16rpx;
		background-color: #E7E7E7;
		color: #626262;
		border-radius: 8rpx;
		font-size: 26rpx;

		img {
			width: 40rpx;
		}
	}
</style>