exam/exam-06173-uni/pages/exam/exam.vue

<template>
	<view>
		
		<view class="content1">
			<view class="hand-bar">

				<view class="timer-col">
					<uni-countdown v-if="timerFlag" :show-day="false" :hour="countHour" :minute="countMin"
						:second="countSec" @timeup="doHandler()"></uni-countdown>
				</view>

				<view class="hand-col">
					<button type="warn" @click="handHandExam(0)">交卷</button>
				</view>
			</view>

			<view v-if="paperData.actionOn && paperData.actionInterval>0" style="margin-top: -15px;">
				<action-checker :action-on="paperData.actionOn" :action-interval="paperData.actionInterval"
					:trigger="actionTrigger" @break="doHandler(3)" />
			</view>

			<!-- 导入组件 -->
			<view style="margin-bottom: 80px;">
				<exam-qu-item v-model="quData" @rest="handleRest" />
			</view>

		</view>




		<view class="bottom-bar">
			<uni-row :gutter="20">
				<uni-col :span="8">
					<button @click="handleNext(-1)" :disabled="!showPrevious">上题</button>
				</uni-col>
				<uni-col :span="8">
					<button @click="handleNext(1)" :disabled="!showNext">下题</button>
				</uni-col>
				<uni-col :span="8">
					<button type="primary" @click="showCard()">答题卡</button>
				</uni-col>
			</uni-row>
		</view>


		<uni-drawer ref="cardDrawer">

			<scroll-view scroll-y="true" class="scroll-y">

				<view>

					<view>
						<view class="card-title">答题卡</view>

						<view class="card-context">
							<view class="card-num card-com">未作答</view>
							<view class="card-num card-com right">已作答</view>
						</view>



						<view v-for="type in paperData.groupList">

							<view class="card-title">{{ type.quType_dictText }}</view>


							<view class="card-context">
								<view v-for="item in type.quList"
									:class="{'card-num ': true, 'current': item.quId === cardItem.quId, 'answered': item.answered}"
									@click="fetchQuData(item)">
									{{ item.sort}}
								</view>
							</view>

						</view>

					</view>

				</view>

			</scroll-view>


		</uni-drawer>


		<!-- 页面离开检测 -->
		<leave-checker v-if="paperData.leaveOn && paperData.leaveCount>0" :pageShow="pageShow"
			:leave-on="paperData.leaveOn" :leave-check="paperData.leaveCheck" :leave-count="paperData.leaveCount"
			:paper-id="paperData.id" @break="doHandler(2)" />


	</view>


</template>

<script>
	import {
		paperDetail,
		paperQuDetail,
		handExam
	} from '@/api/exam.js'

	import ExamQuItem from "./components/ExamQuItem.vue"
	import ActionChecker from "./components/ActionChecker.vue"
	import LeaveChecker from "./components/LeaveChecker.vue"
	import CamVideo from '../video/video.vue'
	export default {
		components: {
			ExamQuItem,
			ActionChecker,
			LeaveChecker
		},
		data() {
			return {
				// 全屏/不全屏
				showPrevious: false,
				showNext: true,
				cardShow: false,
				// 试卷ID
				paperId: '',
				// 当前答题卡
				cardItem: {},
				allItem: [],
				// 当前题目内容
				quData: {
					answerList: []
				},
				// 试卷信息
				paperData: {
					leftSeconds: 99999,
					radioList: [],
					multiList: [],
					judgeList: [],
					saqList: []
				},
				// 单选选定值
				radioValue: '',
				// 简答题值
				saqValue: '',
				// 多选选定值
				multiValue: [],
				// 已答ID
				answeredIds: [],
				timerFlag: false,
				countHour: 0,
				countMin: 0,
				countSec: 0,
				// 动作检测
				actionTrigger: 0,
				// 页面显示
				pageShow: true
			}
		},
		onHide: function() {
			// 程序隐藏
			this.pageShow = false
		},
		onShow: function() {
			console.log('显示了...')
			this.pageShow = true
		},
		onLoad: function(option) {
			this.paperId = option.id;
			this.fetchData(this.paperId);
		},
		mounted() {
			// #ifdef H5
			var a = document.getElementsByClassName('uni-page-head-hd')[0]
			a.style.display = 'none'
			// #endif
		},
		methods: {



			textBlur(e) {
				this.saqValue = e;
			},

			showCard() {
				// 触发变化
				this.actionTrigger = new Date().getTime()
				this.$refs.cardDrawer.open()
			},

			closeCard() {
				// 触发变化
				this.actionTrigger = new Date().getTime()
				this.cardShow = false
			},

			// 倒计时
			countdown() {

				// 剩余秒数
				const leftSeconds = this.paperData.leftSeconds
				// 转换时分
				this.countHour = parseInt(leftSeconds / 60 / 60)
				this.countMin = parseInt(leftSeconds / 60 % 60)
				this.countSec = parseInt(leftSeconds % 60)
				// 开始计时
				this.timerFlag = true
			},


			// 填充已答标签
			handleRest(fill) {
				this.cardItem.answered = fill
				this.actionTrigger = new Date().getTime()
			},


			// 答题卡样式
			cardItemClass(answered, quId) {
				if (quId === this.cardItem.quId) {
					return 'warning'
				}

				if (answered) {
					return 'success'
				}

				if (!answered) {
					return 'info'
				}
			},

			/**
			 * 统计有多少题没答的
			 * @returns {number}
			 */
			countNotAnswered() {
				let notAnswered = 0

				// 判断全部未答
				this.paperData.groupList.forEach(function(item) {
					item.quList.forEach(function(qu) {
						if (!qu.answered) {
							notAnswered += 1
						}
					})
				})

				return notAnswered
			},


			// 上一题下一题
			handleNext(num) {

				let index = 0
				for (let i = 0; i < this.allItem.length; i++) {
					if (this.allItem[i].id === this.quData.id) {
						index = i
					}
				}
				index += num
				this.fetchQuData(this.allItem[index])


			},

			doHandler(flag) {
				// 打开
				uni.showLoading({
					title: '阅卷中...'
				});

				const params = {
					id: this.paperId,
					handFlag: flag
				}
				handExam(params).then(() => {

					uni.showToast({
						title: '交卷成功！',
						icon: 'none',
						duration: 2000
					});


					// 查看考试详情
					uni.redirectTo({
						url: '/pages/paper/detail?id=' + this.paperId
					});

					uni.hideLoading()

				})
			},

			// 交卷操作
			handHandExam() {
				const that = this


				const notAnswered = that.countNotAnswered()

				let msg = '确认要交卷吗？'

				if (notAnswered > 0) {
					msg = '您还有' + notAnswered + '题未作答，确认要交卷吗?'
				}

				uni.showModal({
					title: '提示',
					content: msg,
					success: function(res) {
						if (res.confirm) {
							that.doHandler(0)
						}
					}
				});
			},

			// 更新上下一题索引
			refreshIndex(item) {

				if (item.id === this.allItem[0].id) {
					this.showPrevious = false
				} else {
					this.showPrevious = true
				}

				// 最后一个索引
				const last = this.allItem.length - 1

				if (item.id === this.allItem[last].id) {
					this.showNext = false
				} else {
					this.showNext = true
				}
			},

			// 试卷详情
			fetchQuData(item) {
				// 打开
				uni.showLoading({
					title: '加载中...'
				});


				// 刷新索引
				this.refreshIndex(item)

				// 获得详情
				this.cardItem = item



				paperQuDetail(this.paperId, item.quId).then(data => {
					this.quData = data
					// 关闭详情
					uni.hideLoading()
					// 切换题目后滑动到顶部
					uni.pageScrollTo({
						duration: 500,
						scrollTop: 0
					})
				}).catch(err => {
					console.log(err)
					// 试题被删除
					if (err.code === 20010001) {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/exam/index'
							});
						}, 1500)
					}
				})

				// 触发变化
				this.actionTrigger = new Date().getTime()
			},

			// 试卷详情
			fetchData(id) {

				// 打开
				uni.showLoading({
					title: '加载中...'
				});


				paperDetail(id).then(data => {
					// 试卷内容
					this.paperData = data

					// 已经考完了，不允许
					if (this.paperData.state !== 0) {
						this.$router.push({
							name: 'ShowExam',
							params: {
								id: this.paperData.id
							}
						})
					}

					const that = this

					// 展开全部题目
					this.paperData.groupList.forEach(function(item) {
						item.quList.forEach(function(qu) {
							that.allItem.push(qu)
						})
					})




					if (!that.allItem || that.allItem.length == 0) {


						uni.showModal({
							title: '试卷内容出现问题，无法继续考试！',
							content: msg,
							success: function(res) {
								if (res.confirm) {

								}
							}
						});

						return
					}

					this.cardItem = that.allItem[0]

					// 当前选定
					this.fetchQuData(this.cardItem)

					// 倒计时
					this.countdown()
				})
			}
		}
	}
</script>

<style>
	.content1 {
		padding: 15px;
		padding-bottom: 60px;
	}
</style>