jpcj-xcx/pages/question/mockExam.vue

<template>
	<view class="content"  :class="{night:nightFlag}">
		<view class="top-box">
			<view class="icon"></view>
			<selectSwitch class='btn' @change="changeSwitch" :defaultSwitch='kemu==1'  :switchList="['科一题目','科四题目']" checked_bj_color='#E31818' />
			<van-icon class='set' name="/static/imgs/sz.png" size='20' @click='show=true' />
		</view>
		<van-popup :show="show" @close="show=false" position="bottom">
			<van-cell title="选完跳转下一题 " clickable :data-index="index" @click="answerjump=!answerjump">
				<van-switch slot="right-icon" :checked="answerjump" size="24px" active-color="#16CC16" />
			</van-cell>
			<van-cell title="夜间模式" clickable :data-index="index" @click="nightFlag=!nightFlag">
				<van-switch slot="right-icon" :checked="nightFlag" size="24px" active-color="#16CC16" />
			</van-cell>
		</van-popup>

		<van-skeleton class='skeleton' avatar row="6" :row-width="['100%','40%','70%','70%','70%','70%']" avatar-shape='square'
		 :loading="loading">
			<swiper class="swiper-box" :current="swiperIndex" @change="swiperChange" circular>
				<swiper-item v-for="(itembox,indexbox) in questionList" :key='indexbox'>
					<view class="swiper-item">
						<view class="topic-box">
							<view class="topic-right">
								<view class="topic-top">
									<view class="topic-left">
										<text class="topic-type">{{questionType(itembox.type)}}</text>
										<van-icon name="star-o" size='20' />
									</view>
									<!-- <rich-text class="topic-tit" :nodes="itembox.id+'、'+itembox.question"></rich-text> -->
									<view class="topic-tit" v-html="(indexbox+1)+'、'+itembox.question"></view>
								</view>
								<video v-if="itembox.videoUrl" class="topic-img" :muted='true' :loop='true' :autoplay='true' :controls='false'
								 :src="encodeURI(itembox.mediaUrl)"></video>
								<image v-if="itembox.sinaimg" class="topic-img" :src="itembox.mediaUrl" mode="aspectFit"></image>
								<view class="topic-opt" v-if='itembox.type==2'>
									<van-radio-group :value="userAnswer[itembox.id]">
										<van-cell-group>
											<van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag))}' v-for="(item,index) in choiceList"
											 :key="index" :title="itembox[item]" v-show='itembox[item]' clickable :data-index="index+1" @click="singleToggle($event,itembox)">
												<van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag))" slot="icon" name="/static/imgs/true.png"
												 size='20' />
												<van-radio slot="right-icon" :ref="`checkboxes${itembox.id}`" checked-color="#1464cc" :name="index+1" />
											</van-cell>
										</van-cell-group>
									</van-radio-group>
									<!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button> -->
								</view>
								<view class="topic-opt" v-if='itembox.type==1'>
									<van-radio-group :value="userAnswer[itembox.id]">
										<van-cell-group>
											<van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag))}' v-for="(item,index) in 2"
											 :key="index" :title="index?'错误':'正确'" clickable :data-index="index+1" @click="singleToggle($event,itembox)">
												<van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag))" slot="icon" name="/static/imgs/true.png"
												 size='20' />
												<van-radio slot="right-icon" :ref="`checkboxes${itembox.id}`" checked-color="#1464cc" :name="index+1" />
											</van-cell>
										</van-cell-group>
									</van-radio-group>
									<!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button> -->
								</view>
								<view class="topic-opt" v-else-if='itembox.type==3'>
									<van-checkbox-group :value="userAnswer[itembox.id]" @change="onChange($event,itembox)">
										<van-cell-group>
											<van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag))}' v-for="(item,index) in choiceList"
											 :key="index" :title="itembox[item]" v-show='itembox[item]' clickable @click='toggle($event,itembox)'
											 :data-index="index">
												<van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag))" slot="icon" name="/static/imgs/true.png"
												 size='20' />
												<van-checkbox shape="square" catch:tap="noop" slot="right-icon" :ref="`checkboxes${itembox.id}`"
												 checked-color="#1464cc" :name="index+1" />
											</van-cell>
										</van-cell-group>
									</van-checkbox-group>
									<!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag)">提交答案</button> -->
								</view>
							</view>
						</view>
						<view v-show="answerflag">
							<view class="flag">
								<text v-if="itembox.type==2" class="result">正确答案: {{itembox[choiceList[itembox.answerTrue-1]]}}</text>
								<text v-else-if="itembox.type==1" class="result">正确答案: {{itembox.answerTrue==1?'正确':'错误'}}</text>
								<text v-else-if="itembox.type==3" class="result">正确答案: {{itembox.answerTrue.split('').map((key)=>{
									return itembox[choiceList[key-1]]
								})}}</text>
							</view>
							<view class="parsing">
								<view class="item-titBox">
									<text class="item-tit">题目解析</text>
								</view>
								<view class="parsing-text">
									<text class="item-tit">{{itembox.explain1 ? itembox.explain1 : "无"}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="carryOut" v-if="!answerflag">
				<van-count-down id='count' :auto-start='false' :time="remainingTime * 60 * 1000" />
				<button @click="statistics" class="carryOut-btn" type="default">我要交卷</button>
			</view>
			<van-dialog id="van-dialog" />
		</van-skeleton>


	</view>
</template>

<script>
	import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
	import Dialog from '@/wxcomponents/vant/dialog/dialog';
	import {
		questionListRandom
	} from "@/api/answer.js"
	export default {
		components: {
			selectSwitch
		},
		data() {
			return {
				loading: true,
				answerflag: false,
				answerjump: true,
				nightFlag: false,
				kemu: uni.getStorageSync('kemu') || 1,
				completeAnswer: {},
				show: false,
				checked: true,
				radio: null,
				result: [],
				userAnswer: {},
				questionList: {},
				choiceList: ['an1', 'an2', 'an3', 'an4', 'an5', 'an6', 'an7'],
				swiperIndex: 0,
				shakeIndex: 0,
				pageNum: 1,
				shake: 0,
				trueNum: 0,
				errorBox: [],
				remainingTime: 60,
				startDate:new Date().getTime(),
			}
		},
		watch: {
			kemu(val) {
				uni.setStorageSync('kemu', val)
				this.pageNum = 1
				this.listInit()
			}
		},
		mounted() {
			this.listInit()
		},
		methods: {
			async listInit() {
				this.loading=true
				await questionListRandom({
					num: 5,
					kemu: this.kemu
				}).then((res) => {
					this.questionList = res.rows
					this.$nextTick(() => {
						this.loading = false
						this.selectComponent('#count').start()
					})
				})
				await questionListRandom({
					num: 95,
					kemu: this.kemu
				}).then((res) => {
					this.questionList = this.questionList.concat(res.rows)
				})
			},
			questionType(index) {
				switch (index) {
					case 1:
						return '判断';
					case 2:
						return '单选';
					case 3:
						return '多选';
				}
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			onChange(event, itembox) {
				if (this.completeAnswer[itembox.id] || this.answerflag) {
					return
				}
				this.$set(this.userAnswer, itembox.id, event.detail)
			},
			singleToggle(event, itembox) {
				if (this.completeAnswer[itembox.id] || this.answerflag) {
					return
				}
				const {
					index
				} = event.currentTarget.dataset;
				this.$set(this.userAnswer, itembox.id, index)
				if (this.answerjump) {
					let index = this.swiperIndex
					this.swiperIndex = ++index % 100
				}
			},
			toggle(event, itembox) {
				const {
					index
				} = event.currentTarget.dataset;
				const checkbox = this.$refs[`checkboxes${itembox.id}`][index];
				checkbox.toggle();
			},
			noop() {},
			submit(itembox, index) {
				this.$set(this.completeAnswer, itembox.id, true)
				let flag = (this.userAnswer[itembox.id] + '').split(',').sort().join('') == itembox.answerTrue.split('').sort().join(
					'')
				if (flag) {
					this.trueNum += 1
				} else {
					this.errorBox.push(index + 1)
				}
			},
			statistics() {
				this.questionList.map((itembox, index) => {
					this.submit(itembox, index)
				})
				this.selectComponent('#count').pause()
				Dialog.alert({
					title: '模拟考试结果',
					message: `考试结果: ${this.trueNum}分\n答题用时: ${this.calcTime()}\n答错题目: \n${this.errorBox}`,
					messageAlign: 'left',
					confirmButtonText: '查看答案及解析'
				}).then(() => {
					this.answerflag = true
				});
			},
			calcTime(){
				let time=new Date().getTime()-this.startDate
				return new Date(time).toJSON().slice(11,-5)
			},
			changeSwitch(e) {
				if (e) {
					this.kemu = 1
				} else {
					this.kemu = 4
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carryOut {
		position: fixed;
		bottom: 120rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.carryOut-btn {
			height: 80rpx;
			background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}
	}

	/deep/ .answer .van-cell {
		background-color: #16CC16 !important;
		color: #ffffff;
	}

	/deep/ .van-cell {
		// background-color: #16CC16 !important;
		margin: 10rpx;
		border-radius: 20rpx;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.skeleton {
		// margin: 0rpx 20rpx;
	}

	.swiper-box {
		height: calc(100vh - 120rpx);
		margin: 0rpx 20rpx;

		swiper-item {
			overflow: auto;
		}
	}

	.top-box {
		height: 60rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icon {
			width: 60rpx;
		}

		.btn {}

		.set {
			color: red;
		}
	}

	.topic-box {
		// padding: 20rpx;
		display: flex;
		justify-content: center;

		// border: 2px solid red;
		.topic-top {
			display: flex;
			// border: 2px solid red;
			padding: 10rpx;

			.topic-left {
				display: flex;
				flex-direction: column;

				.topic-type {
					background: #E31818;
					border-radius: 10rpx;
					// border: 2px solid red;
					color: #FFFFFF;
					width: 66rpx;
					height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15px 15px 0px 15px;
					padding: 10rpx;
					margin-bottom: 18rpx;
				}
			}

			.topic-tit {
				padding: 10rpx;
			}

		}

		.topic-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 10rpx;

			.topic-img {
				padding: 10rpx;
				margin: auto;
				width: 500rpx;
				height: 250rpx;
				// border: 2px solid red;
			}

			.topic-opt {
				// border: 2px solid red;
				padding: 30rpx 5rpx;

				.submit {
					margin: auto;
					margin-top: 150rpx;

					height: 80rpx;
					background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
					border-radius: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
				}
			}
		}

	}

	.flag {
		// border: 2px solid red;
		padding: 30rpx 5rpx;
		display: flex;
		justify-content: center;

		.result {
			display: inline-block;
			background-color: #16CC16;
			// border: 2px solid red;
			width: 690rpx;
			// height: 70rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			color: #ffffff;
		}
	}

	.item-titBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #e8e8e8;

		.item-tit {
			border-left: 8rpx solid #E31818;
			font-size: 30rpx;
			// line-height: 38rpx;
			padding: 0 11rpx;
		}


	}

	.parsing-text {
		padding: 30rpx;
		// border: 2px solid red;

	}
</style>