qa-prevention-xgf-app/pages/train_management/course_exam.vue

<template>
	<view class="content">
		<view class="top">
			<view class="time">
				<text style="margin-right: 14rpx" class="iconfont">&#xed63;</text>
				<text>倒计时：</text>
				<u-count-down :time="info.ANSWERSHEETTIME * 60 * 1000" format="mm 分 ss 秒" auto-start millisecond @finish="fnCountDownFinish" />
			</view>
		</view>

		<view class="topic">
			<view class="title">
				<text>
					<text class="tag_title">
						{{ handleCalcQuestType(options[current].QUESTIONTYPE) }}
					</text>
					{{ current + 1 }}.{{ options[current].QUESTIONDRY }}
				</text>
			</view>
			<view v-show="options[current].QUESTIONTYPE === '1'" class="options">
				<view class="item" :class="{ 'active': options[current].checked === 'A' }" @click="fnChooseTopic('radio', 'A')">
					<text class="option">A</text>
					<text class="text">{{ options[current].OPTIONA }}</text>
				</view>
				<view class="item" :class="{ 'active': options[current].checked === 'B' }" @click="fnChooseTopic('radio', 'B')">
					<text class="option">B</text>
					<text class="text">{{ options[current].OPTIONB }}</text>
				</view>
				<view class="item" :class="{ 'active': options[current].checked === 'C' }" @click="fnChooseTopic('radio', 'C')">
					<text class="option">C</text>
					<text class="text">{{ options[current].OPTIONC }}</text>
				</view>
				<view class="item" :class="{ 'active': options[current].checked === 'D' }" @click="fnChooseTopic('radio', 'D')">
					<text class="option">D</text>
					<text class="text">{{ options[current].OPTIOND }}</text>
				</view>
			</view>
			<view v-show="options[current].QUESTIONTYPE === '2'" class="options">
				<view
					class="item"
					:class="{
						'active': options[current].checked && options[current].checked.indexOf('A') !== -1
					}"
					@click="fnChooseTopic('multiple', 'A')"
				>
					<text class="option">A</text>
					<text class="text">{{ options[current].OPTIONA }}</text>
				</view>
				<view
					class="item"
					:class="{
						'active': options[current].checked && options[current].checked.indexOf('B') !== -1
					}"
					@click="fnChooseTopic('multiple', 'B')"
				>
					<text class="option">B</text>
					<text class="text">{{ options[current].OPTIONB }}</text>
				</view>
				<view
					class="item"
					:class="{
						'active': options[current].checked && options[current].checked.indexOf('C') !== -1
					}"
					@click="fnChooseTopic('multiple', 'C')"
				>
					<text class="option">C</text>
					<text class="text">{{ options[current].OPTIONC }}</text>
				</view>
				<view
					class="item"
					:class="{
						'active': options[current].checked && options[current].checked.indexOf('D') !== -1
					}"
					@click="fnChooseTopic('multiple', 'D')"
				>
					<text class="option">D</text>
					<text class="text">{{ options[current].OPTIOND }}</text>
				</view>
			</view>
			<view v-show="options[current].QUESTIONTYPE === '3'" class="options">
				<view class="item" :class="{ 'active': options[current].checked === 'A' }" @click="fnChooseTopic('judge', 'A')">
					<text class="option">{{ options[current].OPTIONA }}</text>
					<text class="text"></text>
				</view>
				<view class="item" :class="{ 'active': options[current].checked === 'B' }" @click="fnChooseTopic('judge', 'B')">
					<text class="option">{{ options[current].OPTIONB }}</text>
					<text class="text"></text>
				</view>
			</view>
			<view v-show="options[current].QUESTIONTYPE === '4'" class="options">
				<view class="item">
					<u-textarea v-model="options[current].checked" auto-height count />
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button v-show="current !== 0" :style="{ width: '45%' }" text="上一题" @click="fnPreviousQuestion" />
			<u-button v-show="current !== options.length - 1" type="primary" :style="{ width: current === 0 ? '100%' : '45%' }" text="下一题" @click="fnNextQuestion" />
			<u-button v-show="current === options.length - 1" type="primary" :style="{ width: '45%' }" text="交卷" @click="fnHandInThePaper" />
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {
	getExamExercises,
	// getStrengthenExam,
	setTestPaperSubmission,
} from '@/api';

export default {
	data() {
		return {
			// STAGEEXAMPAPERINPUT_ID: '',
			// STAGEEXAMPAPER_ID: '',
			// CLASS_ID: '',
			// POST_ID: '',
			// STUDENT_ID: '',
			// NUMBEROFEXAMS: '',
			routeQuery: {},
			entrySite: '',
			info: {},
			options: [{}],
			current: 0,
			questionTypeMap: {
				1: '单选',
				2: '多选',
				3: '判断',
				4: '填空'
			}
		}
	},
	onLoad(query) {
		this.routeQuery = query
		// this.STAGEEXAMPAPER_ID = query.STAGEEXAMPAPER_ID;
		// this.entrySite = query.entrySite;
		this.fnGetData()
	},
	onBackPress(event) {
		if (event.from === 'backbutton') {
			uni.$u.toast('考试过程中不允许退出')
			return true
		}
		return false
	},
	computed: {
		userInfo() {
			return this.$store.getters.getUserInfo
		}
	},
	methods: {
		async fnGetData() {
			const { stageexampaperinputId, classId, postId, studentId, numberofexams } = this.routeQuery
			const resData = await getExamExercises({
				STAGEEXAMPAPERINPUT_ID: stageexampaperinputId,
				// STAGEEXAMPAPER_ID: this.STAGEEXAMPAPER_ID,
				CLASS_ID: classId,
				POST_ID: postId,
				STUDENT_ID: studentId,
				NUMBEROFEXAMS: numberofexams
			})
			// if (this.entrySite === "strengththen") {
			//   resData = await getStrengthenExam({
			//     STRENGTHEN_STAGEEXAMPAPER_INPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
			//     CLASS_ID: this.CLASS_ID,
			//     POST_ID: this.POST_ID,
			//     STUDENT_ID: this.STUDENT_ID,
			//     NUMBEROFEXAMS: this.NUMBEROFEXAMS,
			//   });
			// } else {
			//   resData = await getExamExercises({
			//     STAGEEXAMPAPERINPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
			//     STAGEEXAMPAPER_ID: this.STAGEEXAMPAPER_ID,
			//     CLASS_ID: this.CLASS_ID,
			//     POST_ID: this.POST_ID,
			//     STUDENT_ID: this.STUDENT_ID,
			//     NUMBEROFEXAMS: this.NUMBEROFEXAMS,
			//   });
			// }

			// this.info = resData.pd;
			this.info = { ...this.info, ANSWERSHEETTIME: 30 }
			this.options = [
				{
					QUESTIONDRY: '题干题干题干题干题干1 ( ) .',
					QUESTIONTYPE: '1',
					OPTIONA: '这是选项A',
					OPTIONB: '这是选项B',
					OPTIONC: '这是选项C',
					OPTIOND: '这是选项D'
				},
				{
					QUESTIONDRY: '题干题干题干题干题干2 ()',
					QUESTIONTYPE: '2',
					OPTIONA: '这是选项A',
					OPTIONB: '这是选项B',
					OPTIONC: '这是选项C',
					OPTIOND: '这是选项D'
				},
				{
					QUESTIONDRY: '未带安全头盔可正常进入堆场进行工业,以上说法是否正确?',
					QUESTIONTYPE: '3',
					OPTIONA: '对',
					OPTIONB: '错'
				},
				{
					QUESTIONDRY: '当进入施工现场后, 应立刻对_____设施做全面检查?',
					QUESTIONTYPE: '4',
					OPTIONA: '对',
					OPTIONB: '错'
				}
			]
			// if (resData.NUMBEROFEXAMS > 0) {
			//   uni.showModal({
			//     title: "温馨提示",
			//     content: `您还可以考试${resData.NUMBEROFEXAMS}次！`,
			//     showCancel: false,
			//   });
			// } else if (resData.NUMBEROFEXAMS === "-9999") {
			//   uni.showModal({
			//     title: "温馨提示",
			//     content: `加强学习考试开始，限时60分钟，请注意答题时间！`,
			//     showCancel: false,
			//   });
			// } else {
			//   uni.showModal({
			//     title: "温馨提示",
			//     content: `您无考试次数！`,
			//     showCancel: false,
			//     success: (res) => {
			//       if (res.confirm) {
			//         uni.navigateBack();
			//       }
			//     },
			//   });
			// }
		},
		fnChooseTopic(type, checked) {
			if (!this.options[this.current].checked) {
				this.$set(this.options[this.current], 'checked', '')
			}
			if (type === 'judge' || type === 'radio') {
				if (this.options[this.current].checked === checked) {
					this.options[this.current].checked = ''
				} else {
					this.options[this.current].checked = checked
				}
			}
			if (type === 'multiple') {
				if (this.options[this.current].checked) {
					const checkedArr = this.options[this.current].checked.split(',')
					if (checkedArr.indexOf(checked) !== -1) {
						checkedArr.splice(checkedArr.indexOf(checked), 1)
						this.options[this.current].checked = checkedArr.join(',')
					} else {
						checkedArr.push(checked)
						checkedArr.sort()
						this.options[this.current].checked = checkedArr.join(',')
					}
				} else {
					this.options[this.current].checked = checked
				}
			}
		},
		handleCalcQuestType(type) {
			return `(${this.questionTypeMap[type]})`
		},
		fnIsFinish() {
			if (!this.options[this.current].checked) {
				uni.showModal({
					title: '温馨提示',
					content: '请对本题进行作答。',
					showCancel: false
				})
				return false
			}
			return true
		},
		/**
		 * 下一题按钮点击事件
		 */
		fnNextQuestion() {
			if (!this.fnIsFinish()) return
			this.current++
		},
		/**
		 * 上一题按钮点击事件
		 */
		fnPreviousQuestion() {
			this.current--
		},
		/**
		 * 交卷按钮点击事件
		 */
		fnHandInThePaper() {
			if (!this.fnIsFinish()) return
			uni.showModal({
				title: '温馨提示',
				content: `题目已全部做完，确认交卷吗？`,
				success: (res) => {
					if (res.confirm) {
						this.fnSubmit()
					}
				}
			})
		},
		fnCountDownFinish() {
			uni.$u.toast('考试时间已结束')
			for (let i = 0; i < this.options.length; i++) {
				if (!this.options[i].checked) {
					this.options[i].checked = ''
				}
			}
			this.fnSubmit()
		},
		async fnSubmit() {
			// uni.navigateBack({ delta: 2 })
			for (let i = 0; i < this.options.length; i++) {
			  if (this.options[i].QUESTIONTYPE === "2") {
			    this.options[i].checked = this.options[i].checked.replace(/,/g, "");
			  }
			}
			const resData = await setTestPaperSubmission({
			  USERNAME: this.userInfo.NAME,
			  entrySite: this.entrySite,
			  STAGEEXAMPAPERINPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
			  CLASS_ID: this.CLASS_ID,
			  STUDENT_ID: this.STUDENT_ID,
			  NUMBEROFEXAMS: this.NUMBEROFEXAMS,
			  PASSSCORE: this.info.PASSSCORE,
			  EXAMSCORE: this.info.EXAMSCORE,
			  EXAMTIMEBEGIN: this.info.EXAMTIMEBEGIN,
			  options: JSON.stringify(this.options),
			});
			if (resData.examResult === "0") {
			  uni.showModal({
			    title: "温馨提示",
			    content: `您的成绩为${resData.examScore}分，很遗憾您没有通过本次考试，请再接再厉！`,
			    showCancel: false,
			    success: (res) => {
			      if (res.confirm) {
			        if (this.entrySite === "video_study")
			          uni.navigateBack({ delta: 3 });
			        else uni.navigateBack();
			      }
			    },
			  });
			} else {
			  uni.showModal({
			    title: "温馨提示",
			    content: `您的成绩为${resData.examScore}分，恭喜您通过本次考试，请继续保持！`,
			    showCancel: false,
			    success: (res) => {
			      if (res.confirm) {
			        if (this.entrySite === "video_study")
			          uni.navigateBack({ delta: 3 });
			        else if (this.entrySite === "strengththen")
			          uni.navigateBack({ delta: 2 });
			        else uni.navigateBack();
			      }
			    },
			  });
			}
		}
	}
}
</script>

<style scoped lang="scss">
@import '/static/fonts/iconfont_timer.css';

.content {
	.top {
		padding: 17rpx;
		.time {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			color: #363636;
			font-size: 28rpx;

			::v-deep {
				.u-count-down__text {
					display: inline;
					color: #363636;
					font-size: 28rpx;
					line-height: normal;
				}
			}
		}
	}

	.topic {
		margin: 20rpx;
		padding: 20rpx 20rpx 150rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			font-weight: 600;

			.question-type {
				border-radius: 40rpx;
				padding: 4rpx 14rpx;
				border: 1rpx solid #3c9cff;
				font-size: 24rpx;
				color: #3c9cff;
			}

			.tag_title {
				font-size: 28rpx;
				background-color: #b3b3b3;
				color: #fff;
				border-radius: 8rpx;
				padding: 2rpx 10rpx;
				margin-right: 10rpx;
			}
		}

		.options {
			margin-top: 40rpx;

			.item {
				position: relative;
				margin-top: 40rpx;
				color: #696868;

				&.active {
					color: #3c9cff;

					.option {
						background-color: #3c9cff;
						color: #fff;
					}
				}

				.option {
					background-color: #eee;
					border-radius: 80rpx;
					width: 65rpx;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					font-size: 30rpx;
					display: inline-block;
				}

				.text {
					margin-left: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}

	.footer {
		display: flex;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		width: 100%;
		left: 0;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;

		button {
			border-radius: 10rpx;
		}
	}
}
</style>