appWareHouse/pages/exam/index.vue

<template>
	<div class="container">
		<!-- 二级页面 （有返回按钮） -->
		<mHeader :title="title" class="m-header" :isBackShow="true"></mHeader>
		<div class="exam-warp">
			<div class="exam-name">{{ examInfo.examName }}</div>
			<div class="exam-legend">
				<div class="full">
					<span>{{ examInfo.totalScore }}</span>
					<span>满分</span>
				</div>
				<div class="success">
					<span>{{ examInfo.passScore }}</span>
					<span>合格</span>
				</div>
				<div class="page-number">
					<span>{{ examInfo.examQuestionLibEntityList.length }}</span>
					<span>题目总数</span>
				</div>
			</div>
			<div class="ask-exam-progress-warp">
				<div class="ask-exam-text">答题比例{{ percent }}%</div>
				<div class="progress-warp">
					<progress
						class="progress"
						:percent="percent" 
						activeColor="#008CD6"
						backgroundColor="#EFF2F5"
						stroke-width="4" 
						active="true"
						active-mode="forwards"
						border-radius="6"/>
					<span>{{ examInfo.examQuestionLibEntityList.length }}题</span>
				</div>
			</div>
			
			<!-- 单选题 -->
			<radioPage
				v-if="showPage.type === 1"
				:page="showPage"
				@answersRadio="answersRadio">
			</radioPage>
			<!-- 多选题 -->
			<checkPage
				v-else-if="showPage.type === 2"
				:page="showPage"
				@answersCheck="answersCheck">
			</checkPage>
			<!-- 判断题 -->
			<flagPage
				v-else-if="showPage.type === 3"
				:page="showPage"
				@answersFlag="answersFlag">
			</flagPage>
			
			<div class="footer">
				<div class="tool-btn-warp flex-between">
					<button 
						:class="{ 'disable' : nowPageNubmer <= 1 }"
						@click="prevPage">上一题</button>
					<button 
						:class="{ 'disable' : nowPageNubmer >= examInfo.examQuestionLibEntityList.length }"
						@click="nextPage">下一题</button>
				</div>
				<button 
					class="submit-warp flex-center"
					@click="submit">提交</button>
			</div>
		</div>
		
		<!-- 通过 -->
		<passExamModal 
			v-if="examStatus === 'pass'"
			@close="closeModal"
			:rate="rate"
			:planId="planId">
		</passExamModal>
		<!-- 未通过 -->
		<noPassExamModal 
			v-else-if="examStatus === 'noPass'"
			@close="closeModal"
			@reExam="reExam"
			:rate="rate">
		</noPassExamModal>
	</div>
</template>

<script>
	import mHeader from '../components/mHeader/index'
	import radioPage from './radioPage.vue'
	import checkPage from './checkPage.vue'
	import flagPage from './flagPage.vue'
	import passExamModal from './passExamModal.vue'
	import noPassExamModal from './noPassExamModal.vue'
	
	import Api from '../../api/api.js'
	
	import { mapState } from 'vuex'
	
	export default {
		data () {
			return {
				title: '考试',
				examInfo: {},
				percent: 0,
				showPage: {},
				nowPageNubmer: 1,
				examStatus: '',
				planId: '',
				planPeopleId: '',
				rate: ''
			}
		},
		components: {
			mHeader,
			radioPage,
			checkPage,
			flagPage,
			passExamModal,
			noPassExamModal
		},
		onLoad(options) {
			this.planId = options.planId
			this.planPeopleId = options.planPeopleId
			this._getExamInfo(this.planId)
		},
		computed: mapState({
		    askExamNum: 'askExamNum',
		}),
		watch: {
			askExamNum (newVal) {
				if (newVal === 10) {
					uni.showModal({
						title: '提示',
						content: '您已答题完毕，是否交卷',
						confirmText: '立即交卷',
						cancelText: '暂不交卷',
						success: (res) => {
							if (res.confirm) {
								this.submit()
							}
						},
						
					})
				}
			}
		},
		methods: {
			// 重新考试
			reExam () {
				this.examInfo.examQuestionLibEntityList.forEach(item => {
					item.answers = null
				})
				this.nowPageNubmer = 1
				this.$store.commit('SET_ASK_EXAM_NUM', 0)
				this.showPageFn()
				this.percentFn()
			},
			// 获取考试信息
			_getExamInfo (planId) {
				const params = {
					planId
				}
				Api.exam.getExamInfo(params).then(res => {
					this.examInfo = res.data
					this.$nextTick(() => {
						this.percentFn()
						this.showPageFn()
					})
				})
			},
			// 答题进度
			percentFn () {
				this.percent =  ( ( this.askExamNum / this.examInfo.examQuestionLibEntityList.length ) * 100).toFixed(0) || 0
			},
			// 保存答案
			answersSave (val) {
				const exam = this.examInfo.examQuestionLibEntityList
				let obj = {},
					askExamNum = 0
				obj = exam.filter((item, index) => index === this.nowPageNubmer - 1)[0]
				obj.answers = val
				this.examInfo.examQuestionLibEntityList[this.nowPageNubmer - 1] = obj
				
				askExamNum = exam.filter((item, index) => item.answers && item.answers.length ).length
				this.$store.commit('SET_ASK_EXAM_NUM', askExamNum)
				this.percentFn()
			},
			// 保存答案（单选）
			answersRadio (val) {
				this.answersSave(val)
			},
			// 保存答案（判断）
			answersFlag (val) {
				this.answersSave(val)
			},
			// 保存答案（多选）
			answersCheck (val) {
				this.answersSave(val)
			},
			// 选择显示题目
			showPageFn () {
				let obj = {}
				obj = this.examInfo.examQuestionLibEntityList.filter((item, index) => index === this.nowPageNubmer - 1)[0]
			
				if (typeof obj.options === 'string') {
					obj.options = JSON.parse(obj.options)
				}

				// 添加选择图片
				const type = obj.type
				if (type === 2) {
					obj.choiceImg = '../../static/images/study/square-chioce.png'
					obj.choiceImgActive = '../../static/images/study/square-chioce-active.png'
				} else {
					obj.choiceImg = '../../static/images/study/circular-choice.png'
					obj.choiceImgActive = '../../static/images/study/circular-choice-active.png'
				}
				
				this.showPage = obj
			},
			// 上一题
			prevPage () {
				if (this.nowPageNubmer <= 1) return
				this.nowPageNubmer--
				this.showPageFn()
			},
			// 下一题
			nextPage () {
				if (this.nowPageNubmer >= this.examInfo.examQuestionLibEntityList.length) return
				this.nowPageNubmer++
				this.showPageFn()
			},
			// 提交
			submit () {
				let examInfo = JSON.parse(JSON.stringify(this.examInfo))
				examInfo.examQuestionLibEntityList.forEach(item => {
					item.options = JSON.stringify(item.options)
					delete(item.choiceImg)
					delete(item.choiceImgActive)
					
					if (item.type === 2) {
						if (item.answers) {
							item.answers = JSON.stringify(item.answers)
						}
					}
				})
				
				const params = {
					planId: this.planId,
					planPeopleId: this.planPeopleId,
					...examInfo
				}
				
				Api.exam.commitPage(params).then(res => {
					const result = res.data.isPass
					this.rate = res.data.rate
					if (!result) {
						this.examStatus = 'pass'
					} else {
						this.examStatus = 'noPass'
					}
				})
			},
			// 关闭弹出层
			closeModal (val) {
				this.examStatus = val
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.m-header {
			background-color: #fff;
		}
		.exam-warp {
			min-height: 100vh;
			padding: calc(100rpx + 30rpx + var(--status-bar-height)) 32rpx 236rpx;
			box-sizing: border-box;
			.exam-name {
				font-size: 32rpx;
				font-weight: 500;
				color: $uni-text-color;
				margin-bottom: 20rpx;
			}
			.exam-legend {
				width: 100%;
				height: 220rpx;
				padding: 54rpx 32rpx 0;
				box-sizing: border-box;
				display: flex;
				background: #fff url(../../static/images/study/exam-legend-bg.png) no-repeat center/cover;
				box-shadow: 0 12rpx 24rpx 2rpx rgba(230,230,230,1);
				border-radius: 40rpx;
				> div {
					border-right: 2rpx solid $uni-bg-color-grey;
					display: flex;
					align-items: center;
					height: 70rpx;
					box-sizing: border-box;
					color: $uni-text-color;
					span {
						font-weight: 500;
						&:first-of-type {
							width: 70rpx;
							height: 70rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 10rpx;
							font-size: 32rpx;
						}
						&:last-of-type {
							margin-left: 16rpx;
							font-size: 28rpx;
						}
					}
				}
				.full {
					width: 196rpx;
					span {
						&:first-of-type {
							background-color: #D6F1F5;
							color: #34BACC;
						}
					}
				}
				.success {
					width: 198rpx;
					padding-left: 12rpx;
					span {
						&:first-of-type {
							background-color: #E1EFBE;
							color: #92AE47;
						}
					}
				}
				.page-number {
					width: 224rpx;
					padding-left: 24rpx;
					border-right: none;
					span {
						&:first-of-type {
							background-color: #FFEEE1;
							color: #E1843E;
						}
					}
				}
			}
			.ask-exam-progress-warp {
				margin: 32rpx 0 12rpx;
				.ask-exam-text {
					font-size: 22rpx;
					color: $uni-text-color-active;
				}
				.progress-warp {
					display: flex;
					.progress {
						flex: 1;
					}
					span {
						margin-left: 12rpx;
						font-size: 24rpx;
						color: $uni-text-color-active;
					}
				}
			}
			.footer {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				padding-bottom: 32rpx;
				background-color: #fff;
				box-sizing: border-box;
				.tool-btn-warp {
					margin-bottom: 28rpx;
					padding: 0 28rpx;
					button {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 280rpx;
						height: 88rpx;
						background: $uni-bg-color;
						border-radius: 45rpx;
						font-size: 32rpx;
						color: #fff;
						font-weight: 500;
						margin: 0;
						padding: 0;
					}
					.disable {
						background-color: $uni-bg-color-grey;
						color: $uni-text-color-grey;
					}
				}
				.submit-warp {
					width: calc(100% - 28rpx - 28rpx);
					height: 88rpx;
					background: $uni-bg-color;
					border-radius: 45rpx;
					font-size: 32rpx;
					color: #fff;
					font-weight: 500;
					margin: 0 auto;
					padding: 0;
					box-sizing: border-box;
				}
			}
		}
	}
</style>