shunfengche-sfd/my/safety/exam.vue

<template>
	<!-- 列表 -->
	  <view class="safety-exam">
		<!-- for此部分 -->
		<examinationItem ref="examinationItem" :questionObj="paperQuestionList[currentIndex]" :itemIndex="currentIndex" @selected="handleSelected">
		</examinationItem>
		<u-card v-if="currentUserAnswer" padding="32" full :showHead="false">
			<view slot="body">
				<view v-if="currentUserAnswer.isCorrect" style="display: flex;align-items: center;margin-bottom: 24rpx;">
					<image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 28rpx;height: 28rpx;"></image>
					<view style="margin-left: 16rpx;color: #333333;line-height: 40rpx;font-size: 28rpx;">回答正确!</view>
				</view>
				<view v-else style="display: flex;align-items: center;margin-bottom: 24rpx;">
					<image v-if="globalImages" :src="globalImages + 'imgs/cha.png'" style="width: 28rpx;height: 28rpx;"></image>
					<view style="margin-left: 16rpx;color: #333333;line-height: 40rpx;font-size: 28rpx;">回答错误!</view>
				</view>
				<view style="display: flex;align-items: center;margin-bottom: 24rpx;" @click="showAnalysis(currentUserAnswer.analysis)">
					<image v-if="globalImages" :src="globalImages + 'imgs/jiexi.png'" style="width: 28rpx;height: 28rpx;"></image>
					<view style="margin-left: 16rpx;color: #333333;line-height: 40rpx;font-size: 28rpx;">查看解析</view>
				</view>
				<!-- <view>
					<view>解析</view>
					<view>
						<text>答案: {{ currentUserAnswer.correctValue }}</text>
						<text style="margin-left: 40rpx;">您选择: </text>
						<text style="color: ;">{{ currentUserAnswer.code }}</text>
					</view>
					<view>题目解析</view>
					<view>{{ currentUserAnswer.analysis }}</view>
				</view> -->
			</view>
		</u-card>
		<view class="placeholder"></view>
		<view class="tabbar_bottom">
			<view style="height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 32rpx;">
				<view style="color: #333333;font-size: 28rpx;">已完成 {{ answerCount }}/{{ paperQuestionList.length }}</view>
				<view style="display: flex;align-items: center;">
					<u-button v-if="currentIndex > 0" type="primary" @click="prev" size="medium">上一题</u-button>
					<view>
						<u-button
							v-if="currentIndex < paperQuestionList.length - 1 && currentIndex !== paperQuestionList.length - 1"
							type="primary"
							size="medium"
							style="margin-left: 32rpx;"
							@click="next"
						>
							下一题
						</u-button>
						<u-button v-else type="primary" size="medium" style="margin-left: 32rpx;" @click="navgo('/my/safety/examcomplete')">提交</u-button>
					</view>
				</view>
			</view>
		</view>
	  </view>
</template>

<script>
	import ExaminationItem from './modules/ExaminationItem'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	
	export default {
		components: { ExaminationItem },
		data() {
			return {
				globalImages: null,
				// 题目列表
				paperQuestionList: [
					{
						id: 1,
						questionType: 1,
						questionContent: '在雨天行驶时，以下哪种做法是正确的？',
						analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
						questionOptionList: [
							{ id: 1, optionCode: 'A', optionContent: '降低车速，保持安全距离 ' },
							{ id: 2, optionCode: 'B', optionContent: '加速通过积水路段 ' },
							{ id: 3, optionCode: 'C', optionContent: '紧急制动避免打滑  ' },
							{ id: 4, optionCode: 'D', optionContent: '关闭雨刷器节省电力  ' }
						],
					},
					{
						id: 2,
						questionType: 1,
						questionContent: '某日13时10分，罗某驾驶一辆中型客车从高速公路0公里处出发，下午14时10分行至该高速公路125公里加200米处时，发生追尾碰撞，机动车驶出西南侧路外边坡，造成11人死亡、2人受伤。罗某的主要违法行为是什么？',
						analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
						questionOptionList: [
							{ id: 1, optionCode: 'A', optionContent: '超速行驶' },
							{ id: 2, optionCode: 'B', optionContent: '不按交通标线行驶' },
							{ id: 3, optionCode: 'C', optionContent: '客车超员' },
							{ id: 4, optionCode: 'D', optionContent: '疲劳驾驶' }
						],
					},
					{
						id: 3,
						questionType: 1,
						questionContent: '在山区道路超车时，应怎样超越？',
						analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
						questionOptionList: [
							{ id: 1, optionCode: 'A', optionContent: '选择较缓的下坡路' },
							{ id: 2, optionCode: 'B', optionContent: '选择较长的下坡路' },
							{ id: 3, optionCode: 'C', optionContent: '选择宽阔的缓上坡' },
							{ id: 4, optionCode: 'D', optionContent: '选择较长的下坡路' }
						],
					},
					// {
					// 	id: 4,
					// 	questionType: 1,
					// 	questionContent: '驾驶汽车在进出隧道时应注意什么？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '开启远光灯' },
					// 		{ id: 2, optionCode: 'B', optionContent: '适当提高车速' },
					// 		{ id: 3, optionCode: 'C', optionContent: '关闭近光灯' },
					// 		{ id: 4, optionCode: 'D', optionContent: '提前降低车速' }
					// 	],
					// },
					// {
					// 	id: 5,
					// 	questionType: 1,
					// 	questionContent: '夜间驾驶机动车，应在哪种情况下使用远光灯？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '没有路灯或照明差的道路上' },
					// 		{ id: 2, optionCode: 'B', optionContent: '车速低于30km/h时' },
					// 		{ id: 3, optionCode: 'C', optionContent: '会车时' },
					// 		{ id: 4, optionCode: 'D', optionContent: '跟车行驶时' }
					// 	],
					// },
					// {
					// 	id: 6,
					// 	questionType: 1,
					// 	questionContent: '行车中发现左侧轮胎漏气时怎样处置？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '慢慢制动减速' },
					// 		{ id: 2, optionCode: 'B', optionContent: '迅速制动减速' },
					// 		{ id: 3, optionCode: 'C', optionContent: '迅速向右转向' },
					// 		{ id: 4, optionCode: 'D', optionContent: '采取紧急制动' }
					// 	],
					// },
					// {
					// 	id: 7,
					// 	questionType: 1,
					// 	questionContent: '大风天气行车，当感到转向盘突然“被夺”时，下列做法正确的是什么？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '顺风向转动转向盘' },
					// 		{ id: 2, optionCode: 'B', optionContent: '逆风向转动转向盘' },
					// 		{ id: 3, optionCode: 'C', optionContent: '采取紧急制动' },
					// 		{ id: 4, optionCode: 'D', optionContent: '双手稳握转向盘' }
					// 	],
					// },
					// {
					// 	id: 8,
					// 	questionType: 1,
					// 	questionContent: '行车中超越右侧停放的车辆时，为预防其突然起步或开启车门，应怎样做？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '预留出横向安全距离，减速行驶' },
					// 		{ id: 2, optionCode: 'B', optionContent: '保持正常速度行驶' },
					// 		{ id: 3, optionCode: 'C', optionContent: '长鸣喇叭' },
					// 		{ id: 4, optionCode: 'D', optionContent: '加速通过' }
					// 	],
					// },
					// {
					// 	id: 9,
					// 	questionType: 1,
					// 	questionContent: '驾驶人行车中看到注意儿童标志的时候，应怎样做？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '加速行驶' },
					// 		{ id: 2, optionCode: 'B', optionContent: '绕道行驶' },
					// 		{ id: 3, optionCode: 'C', optionContent: '谨慎选择行车速度' },
					// 		{ id: 4, optionCode: 'D', optionContent: '保持正常车速行驶' }
					// 	],
					// },
					// {
					// 	id: 10,
					// 	questionType: 1,
					// 	questionContent: '抢救昏迷失去知觉的伤员需注意什么？',
					// 	analysis: 'analysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysisanalysis',
					// 	questionOptionList: [
					// 		{ id: 1, optionCode: 'A', optionContent: '马上实施心肺复苏' },
					// 		{ id: 2, optionCode: 'B', optionContent: '使劲掐伤员的人中' },
					// 		{ id: 3, optionCode: 'C', optionContent: '连续拍打伤员面部' },
					// 		{ id: 4, optionCode: 'D', optionContent: '抢救前先检查呼吸' }
					// 	],
					// }
				],
				//请求接口获取答案
				answers: {
					1: {
						code: 'A'
					},
					2: {
						code: 'A'
					},
					3: {
						code: 'A'
					},
					4: {
						code: 'A'
					},
					5: {
						code: 'A'
					},
					6: {
						code: 'A'
					},
					7: {
						code: 'A'
					},
					8: {
						code: 'A'
					},
					9: {
						code: 'A'
					},
					10: {
						code: 'A'
					},
				},
				// 题目索引
				currentIndex: 0,
				// key = 题目Id,   value = 回答结果数据
				userAnswers: {},
				// 回答题目数量
				answerCount: 0,
				// 当前题目, 用户的答案
				currentUserAnswer: null,
				arr: [],
				token: '',
			};
		},
		onLoad(e) {
			waitForGlobalImages().then((path) => {
				this.globalImages = path
			})
		},
		onShow() {
			this.token = this.$queue.getData('token')
		},
		methods: {
			next() {
				if(this.currentIndex < this.paperQuestionList.length - 1) {
					this.currentIndex = this.currentIndex + 1
					const questionId = this.paperQuestionList[this.currentIndex].id
					const answerResult = this.userAnswers[questionId]
					// console.log(questionId, answerResult, this.userAnswers)
					if(answerResult) {
						this.$refs.examinationItem.selectCode = answerResult.code
						this.currentUserAnswer = answerResult
					} else {
						this.$refs.examinationItem.selectCode = null
						this.currentUserAnswer = null
					}
					// console.log('下一题', this.currentUserAnswer)
				}
			},
			prev() {
				if(this.currentIndex > 0) {
					this.currentIndex = this.currentIndex - 1
					const questionId = this.paperQuestionList[this.currentIndex].id
					const answerResult = this.userAnswers[questionId]
					// console.log(questionId, answerResult, this.userAnswers)
					if(answerResult) {
						this.$refs.examinationItem.selectCode = answerResult.code
						this.currentUserAnswer = answerResult
					} else {
						this.$refs.examinationItem.selectCode = null
						this.currentUserAnswer = null
					}
					// console.log('上一题', this.currentUserAnswer)
				}
			},
			/**
			 * 处理选择选项事件
			 * @param {Object} originalCode 原来选择的答案
			 * @param {Object} code 现在选择的答案
			 * @param {Object} questionId 题目Id
			 * @param {Object} questionIndex 索引
			 */
			handleSelected(originalCode, code, questionId, questionIndex) {
				const answerResult = this.userAnswers[questionId]
				if(answerResult) {
					this.$refs.examinationItem.selectCode = originalCode
					return
				} else {
					// 查询答案判断是否正确
					const correctValue = this.answers[questionId].code
					const answer = {
						code,
						correctValue,
						isCorrect: correctValue === code,
						analysis: this.paperQuestionList[questionIndex].analysis
					}
					this.userAnswers[questionId] = answer
					this.currentUserAnswer = answer
				}
				const ids = Object.keys(this.userAnswers)
				this.answerCount = ids && ids.length || 0
				// console.log('eeeeee', code, questionId, questionIndex, this.$refs.examinationItem.testValue)
			},
			showAnalysis(analysis) {
				uni.showModal({
					title: '题目解析',
					content: analysis,
					confirmText: '确定',
					cancelText: '取消',
				})
			},
			navgo(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let that = this
				if (that.token) {
					// 请求接口获取成绩, 超过了多少考生, 是否合格
					const params = {
						score: 80,
						exceeding: 70,
						qualified: true,
					}
					uni.navigateTo({
						url: e + '?score=' + params.score + '&exceeding=' + params.exceeding + '&qualified=' + params.qualified
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.safety-exam {
		width: 100%;
		position: relative;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
	}
	
	.placeholder {
		height: 108rpx;
		padding-bottom: 16rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	.tabbar_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
		padding-bottom: 16rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		border-top: 1rpx solid #E4E7ED;
		z-index: 101;
	}
</style>