questionbankvue3/pages/exercises/exam/exam.vue

<template>
	<view class="content" id="brushQuestions">
		<view class="row row1">
			<view class="userInfoBox">
				<view class="examNo">
					<view class="h3">洛阳学车</view>
					<view class="card">第0{{ randomNumber }}号台</view>
					<view class="back" @click="goBack">
						<u-icon name="arrow-left"  size="16"></u-icon>
					</view>
				</view>
				<view class="user">
					<view class="card">
						<view class="h3">考生信息</view>
						<view class="avatar">
							<image src="@/static/images/avatarbg.png" mode=""></image>
						</view>
						<view class="txt">用户：{{ phone }}</view>
						<!-- <view class="txt">性别：男</view> -->
						<view class="txt">类型：{{ usecarStore.carInfo.carTypeName}}</view>
						<view class="txt">科目：科目{{  usecarStore.carInfo.stepType==1?'一': '四'}}</view>
					</view>
				</view>
			</view>
			<view class="examConBox">
				<view class="leftBox">
					<view class="h3">考试题目</view>
					<view class="questionTxt">
						<view class="txt">{{currentIndex+1}}.{{ questionBank.title }}</view>
						<view class="txt" v-for="(item,index) in questionBank.optionArr">
							<view class="text"><text >{{item.key}}</text> {{item.text}}</view>
						</view>
					</view>
					<view class="answer flex-b">
						<view class="lab">您的答案：{{ curOption.answer }}</view>
						<view class="rightSelect flex">
							<view class="lab">选项：</view>
							<view class="optio flex" v-for="(item,index) in questionBank.optionArr" >
								<view class="optionItem" :class="{ active: curOption.answer.includes(item.key)}" @click="chooseOption(item)">{{item.key}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rightBox">
					<!-- 右边盒子 -->
					<table style="width: 100%;height: 100%;">
					  <tr>
					    <th class="blueItem br">题目</th>
					    <th v-for="(item,index) in 10" class="blueItem br">{{index+1}}列</th>
					  </tr>
					  <tr v-for="(item,index) in 10">
					    <td class="blueItem bb">{{index+1}}行</td>
					    <td v-for="(item2,index2) in 10" class="ansItem">{{ item2 }}</td>
					  </tr>
					</table>
				</view>
			</view>
		</view>
		
		<view class="row row2">
			<view class="timeBox">
				<view class="h3">考试时间</view>
				<view class="time">15：10</view>
			</view>
			<view class="leftTpsBox">
				<view class="card">
					<view class="h3">操作提示</view>
					<view class="txt">本题为单选题，请在备选答案中选择一个你认为正确的答案！</view>
				</view>
			</view>
			<view class="rightBtnBox">
				<view class="btn hui">上一题</view>
				<view class="btn hui">下一题</view>
				<view class="btn" @click="$goPage('/pages/exercises/examResults/examResults')">交卷</view>
			</view>
		</view>
		
		<view class="picBox">
			<view class="h3">考题图片</view>
			<view class="imgBox">
				<image :src="questionBank.img" v-if="questionBank.img"  @click="previewImg" mode="aspectFit"></image>
			</view>
			<u-popup :show="show" mode="center" :closeable="true" @close="show=false" bgColor="transparent">
				<view class="imgView">
					<!-- <view class="closeIcon" @click="show=false">
						<u-icon name="close-circle" color="#fff" size="28"></u-icon>
					</view> -->
					<view class="img">
						<image :src="questionBank.img" mode="aspectFit"></image>
					</view>
				</view>
			</u-popup>
		</view>
		

	</view>
	
</template>
<script setup>
	import { detectOrient } from '@/utils/utils.js'
	import { startExamDo, startExam } from '@/config/api.js'
	import { ref, onMounted, nextTick } from 'vue'
	
	import {
		onLoad,
	} from "@dcloudio/uni-app"
	
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	let randomNumber = ''
	onLoad((options)=>{
		randomNumber = options.randomNumber
	})
	
	let phone = uni.getStorageSync('loginInfo')?.phone
	const currentNav = ref('1')
	const show = ref(false)
	onMounted(()=>{
		detectOrient('#brushQuestions')
	})
	
	function previewImg() {
		show.value = true
	}
	function goBack() {
		console.log('返回吧')
		uni.navigateBack()
	}
	// 请求数据
	const questionBank = ref({})
	const questionBankList = ref([])
	let examInfo = ref([])
	let currentIndex = ref(0)
	async function startQuestionFn() {
		try{
			uni.showLoading({
				title: '正在加载...'
			})
			let obj = {
				carType: usecarStore.carInfo.carType,
				stepType: usecarStore.carInfo.stepType,
				examType: 2,
			}
			const {data: res} = await startExam(obj)
			uni.hideLoading()
			questionBank.value = res.questionBank[0]
			questionBankList.value = res.questionBank
			initOptionArr()
			examInfo.value = res
		}catch(e){
			uni.hideLoading()
		}
	}
	startQuestionFn()
	
	
	function initOptionArr() {
		questionBank.value.optionArr = []
		let abcd = [
			'a',
			'b',
			'c',
			'd',
			'e',
			'f'
		]
		abcd.forEach((k,i)=>{
			let option = 'option'+k
			if(questionBank.value[option]) {
				let obj = {
					key: k.toLocaleUpperCase(),
					text: questionBank.value[option],
					index: i+1
				}
				questionBank.value.optionArr.push(obj)
			}
		})
		
		// 如果是判断题
		if(questionBank.value.types==3) {
			questionBank.value.optionArr[0].key1 = 'true'
			questionBank.value.optionArr[1].key1 = 'false'
		}
		console.log(questionBank.value.optionArr)
	}
	// 选择答案
	const curOption = ref({})
	async function chooseOption(item) {
		console.log(item)
		if(questionBank.value.types != 2) {
			item.answer = item.key
			curOption.value = item
			
		}else if(questionBank.value.types == 2){
			if(!curOption.value.ans) curOption.value.ans = ''
			if(curOption.value.ans.includes(item.key)) {
				curOption.value.ans = curOption.value.ans.replace(item.key, '')
				return
			}
			curOption.value.ans = curOption.value.ans + item.key
			// console.log(curOption.value.ans)
		}
	}
	// 交卷
	async function submitBtnFn() {
		let wrongArr = questionBankList.value.filter(item=>item.yes!=1)
		let worngId = wrongArr.map(item=>item.id).join(',')
		let obj = {
			 "answer": null,
			  "carType": usecarStore.carInfo.carType,
			  "examId": examInfo.value.id,
			  "examType": 1,
			  "grade": questionBankList.value.length - wrongArr.length,
			  "isEnd": 1,
			  "pass": 1,
			  "sort": examInfo.value.sort,
			  "stepType": usecarStore.carInfo.stepType,
			  "userId": examInfo.value.userId,
			  "wrongQuestionIds": worngId
		}
		const res = await startExamDo(obj)
		console.log(res)
		uni.$u.toast('已交卷')
		setTimeout(()=>{
			uni.navigateBack()
		},1500)
	}
	
</script>

<style lang="scss" scoped>
	uni-page-body {
		width: 100%;
		height: 100%;
	}

	html {
		width: 100vh;
		height: 100vw;
		-webkit-transform: rotate(90deg);
		-webkit-transform-origin: 50vw 50vw;
		transform: rotate(90deg);
		transform-origin: 50vw 50vw;

	}

	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.imgView {
		position: relative;
		background: none;
		// max-width: 80%;
		// padding: 50px;
		.closeIcon {
			position: absolute;
			color: #fff;
			top: 40rpx;
			left: 40rpx;
			z-index: 99;
			background-color: #333;
			border-radius: 50%;
		}
		.img {
			// width: calc(100vh - 200rpx);
			// height: calc(100vw - 100rpx);
			width: 750rpx;
			height: 750rpx;
		}
	}
	.content {
		padding: 30rpx 30rpx 0rpx 30rpx;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F7FBFE;
		font-size: 20rpx;
		
		// display: flex;
		.h3 {
			position: absolute;
			top: -16rpx;
			left: 0;
			width: 100%;
			text-align: center;
			color: $themC;
		}
		  .row {
			  width: 100%;
			  display: flex;
		    .userInfoBox {
				width: 140rpx;
				// height: 408rpx;
				// background-color: pink;
				display: flex;
				flex-direction: column;
				.examNo {
					width: 100%;
					height: 60rpx;
					background: #FFFFFF;
					border: 1px solid #F0F0F0;
					position: relative;
				  
				
				  .card {
					line-height: 70rpx;
					text-align: center;
					padding-left: 20rpx;
				  }
				
				  .back {
					  position: absolute;
					  left: -20rpx;
					  top: 50%;
					  transform: translateY(-50%);
					  width: 40rpx;
					  height: 40rpx;
					  background: #fff;
					  border-radius: 50%;
					  display: flex;
					  align-items: center;
					  justify-content: center;
				    u-icon {
						
				    }
				  }
				}
				
				.user {
					// position: relative;
					flex: 1;
					height: 0;
					padding: 10rpx 0 0 0rpx;
				  .h3 {
					
				  }
				
				  .card {
					padding-left: 15rpx;
					position: relative;
					background: #FFFFFF;
					border: 1px solid #F0F0F0;
					height: 100%;
				    .avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-top: 36rpx;
						margin-bottom: 20rpx;
				      img {
				
				      }
				    }
				
				    .txt {
						margin: 10px 0;
						font-size: 18rpx;
				    }
				  }
				}
				
		    }
		
		    .examConBox {
				width: 0;
				flex: 1;
				display: flex;
				// height: 408rpx;
				padding-left: 20rpx;
		      .leftBox {
				flex: 2;
				background-color: #fff;
				position: relative;
				display: flex;
				flex-direction: column;
				.h3 {
					left: 40rpx;
					text-align: left;
				}
				
				.questionTxt {
					padding: 30rpx;
					flex: 1;
					line-height: 2em;
				  .txt {
				
				  }
				}
				
				.answer.flex-b {
					height: 60rpx;
					border-top: 1px solid #F0F0F0;
					padding-left: 20rpx;
				  .lab {
					
				  }
				
				  .rightSelect {
					  
				    .lab {
				
				    }
				
				    .optio {
						padding-left: 20rpx;
				      .optionItem {
						width: 38rpx;
						height: 38rpx;
						border: 1px solid #F0F0F0;
						font-size: 18rpx;
						color: #333;
						text-align: center;
						line-height: 38rpx;
						margin-right: 20rpx;
						&.active {
							color: #fff;
							background-color: $themC;
						}
				      }
				    }
				  }
				}
				
		      }
		
		      .rightBox {
				flex: 1;
				background-color: #fff;
				
				table {
				  display: table;
				  border-collapse: collapse;
				  border-spacing: 0px;
				   table-layout: fixed;
				  td, th {
					  width: 9.09%;
					  // text-overflow: ellipsis;
					  overflow: hidden;
					  white-space: nowrap;
				  }
				  // border-color: gray;
				}
				
				.ansItem {
					font-size: 24rpx;
					text-align: center;
					border-bottom: 1px solid #E1DFDF;
					border-right: 1px solid #E1DFDF;
					color: green;
					&.green {
						color: green;
					}
					&.red {
						color: red;
					}
				}
				.blueItem {
					background-color: $themC;
					color: #fff;
					text-align: center;
					font-size: 24rpx;
					&.br {
						border-right: 1px solid #fff;
						&:last-child {
							border: none;
						}
					}
					&.bb {
						border-top: 1px solid #fff;
						// &:last-child {
						// 	border: none;
						// }
					}
				}
		      }
		    }
			&.row1 {
				flex: 4;
			}
			&.row2 {
				height: 100rpx;
				padding: 20rpx 0;
				.timeBox {
					width: 140rpx;
					height: 100%;
					background-color: #fff;
					border: 1px solid #F0F0F0;
					position: relative;
					.h3 {
						font-weight: 400;
					}
					.time {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						line-height: 60rpx;
						text-align: center;
					}
					
				}
				
				.leftTpsBox {
					padding-left: 20rpx;
					flex: 2;
					position: relative;
					.card {
						background-color: #fff;
						height: 100%;
					}
					.h3 {
						text-align: left;
						left: 40rpx;
					}
					.txt {
						padding: 14rpx 20rpx 0 20rpx;
					}
				}
				
				.rightBtnBox {
					flex: 1;
					padding-left: 20rpx;
					display: flex;
					// justify-content: space-between;
					justify-content: flex-end;
					.btn {
						width: 123rpx;
						// padding: 0 24rpx;
						margin-left: 20rpx;
						text-align: center;
						font-size: 24rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #F4F4F4;
						border: 1px solid #E1DFDF;
						line-height: 60rpx;
						background: #F4F4F4;
					}
				}
			}
			
			
		  }
		
		  .picBox {
			width: 100%;
			flex: 2;
			background-color: #fff;
			border: 1px solid #F0F0F0;
			padding: 20rpx;
			position: relative;
			.h3 {
				text-align: left;
				left: 40rpx;
			}
			.imgBox {
				width: 650px;
				// max-height: 163rpx;
				// background-color: skyblue;
				height: 100%;
				overflow: hidden;
				margin: 0 auto;
			}
		  }
	}
	
	
</style>