zhgdyunapp_vue3/pages/projectEnd/safetyEducation/test.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				考试
			</view>
		</headers>
		<view class="pageContent">
			<view class="tips">
				交卷之前离开当前页面会导致本次考试作废！
			</view>
			<view class="blockBox" v-for="(item,index) in courseDetail.questionList" :key="index">
				<view class="testTilte">
					{{index+1}}、{{item.questionName}}（{{item.questionScore}}分）
				</view>
				<checkbox-group class="optionsBox" @change="(e)=>{changeChecked(e,item.questionId,index)}" v-if="item.questionType==2">
					<label class="optionItem" v-for="(data,index2) in item.optionList" :key="index2">
						<checkbox class="checkbox" :value="data.optionId+''" /><text class="desc">{{indexList[index2]}}、{{data.optionName}}</text>
					</label>
				</checkbox-group>
				<radio-group class="optionsBox" @change="(e)=>{changeChecked(e,item.questionId,index)}" v-else>
					<label class="optionItem" v-for="(data,index2) in item.optionList" :key="index2">
						<radio class="checkbox" :value="data.optionId+''" :checked="data.optionId === item.optionId"/><text class="desc">{{indexList[index2]}}、{{data.optionName}}</text>
					</label>
				</radio-group>
			</view>
			<button type="primary" class="btn submitBtn big" @click="submitData()">交卷</button>
		</view>
		<dialogs ref="dialogs">
			<!-- <template v-slot:title>
				{{isAdd?'添加':'编辑'}}
			 </template> -->
			 <template v-slot:content>
				 <view class="formBox2">
				 	<form @submit="submitData">
				 		
						<view class="uni-form-item">
							<view class="uni-form-label">
								<text class="star">*</text>身份证号码
							</view>
							<view class="uni-form-input">
								<input class="uni-input" placeholder-class="cl" name="idCard" v-model="idCard" placeholder="请输入" />
							</view>
						</view>
				 		<button form-type="submit" type="primary" class="btn submitBtn">提交</button>
						
				 	</form>
				 </view>
			 </template>
			
		</dialogs>
		<view class="testResultBox" v-if="showResult">
			<image v-if="isQualified==1" src="/static/Pass.png" class="resultImg"></image>
			<image v-else src="/static/noPass.png" class="resultImg"></image>
			<view class="score">
				{{score}}分
			</view>
		</view>
	</view>
</template>

<script>
	import dialogs from "@/components/dialog/dialog.vue"
	export default {
		components:{dialogs},
		data() {
			return {
				indexList: [
					"A",
					"B",
					"C",
					"D",
					"E",
					"F",
					"G",
					"H",
					"I",
					"J",
					"K",
					"L",
					"N",
					"M",
					"O",
					"P",
					"Q",
					"R",
					"S",
					"T",
					"U",
					"V",
					"W",
					"X",
					"Y",
					"Z",
				],
				courseDetail:{
					eduAddr: "",
					eduClasshour: "",
					eduContent: "",
					eduCourseName: "",
					eduPhoto: "",
					eduTeacher: "",
					eduTime: "",
					eduType: "",
					eduVideo: "",
					passScore: "",
					projectSn: "",
					questionList: [],
					totalScore: "",
					videoType: 1,
				},
				eduId:'',
				selectList:[],
				idCard:'',
				workerId:'',
				score:0,
				showResult: false,
				isQualified:1 //1合格，2不合格
			}
		},
		onLoad(options) {
			this.eduId=options.eduId
			this.workerId=options.workerId
			this.getDetailData()
		},
		beforeDestroy() {
			// console.log('onUnload')
			// uni.showModal({
			// 	title:'提示',
			// 	content:'离开页面本次考试将作废，确认离开吗？',
			// 	success(res) {
			// 		if(res.confirm){
			// 			console.log('离开')
			// 		}else{
			// 			console.log('不离开')
			// 		}
			// 	}
			// })
		},
		onUnload() {
			
		},
		methods: {
			changeChecked(e,questionId,index){
				console.log(e,questionId)
				var arr = e.detail.value;
				//清除之前该问题选中的选项
				for (var i = 0; i < this.selectList.length; i++) {
					if(this.selectList[i].questionId==questionId){
						this.selectList.splice(i--,1)
					}
				}
				//加上新选中的选项
				if(Array.isArray(arr)){
					for (var i = 0; i < arr.length; i++) {
					this.selectList.push(
						{
							questionId:questionId,
							optionId:arr[i]
						}
					)
				}
				}else{
					this.selectList.push(
						{
							questionId:questionId,
							optionId:arr
						}
					)
					this.courseDetail.questionList[index].optionId=arr
				}
				
				console.log(this.selectList)
			},
			//获取课程详细数据
			getDetailData(){
				var that = this
				this.sendRequest({
					url: "xmgl/safeEducationQuestion/selectSafeEducationQuestionInfo",
					data: {eduId:this.eduId},
					method: "post",
					success(res) {
						that.courseDetail=res.result.safeEducation
					}
				})
			},
			inputIdCard(){
				this.$refs.dialogs.showFn()
			},
			submitData(){
				// if(this.idCard==''){
				// 	uni.showToast({
				// 		title:'请输入身份证号码！'
				// 	})
				// 	return
				// }
				var json = {
					eduId:this.eduId,
					workerId:this.workerId,
					// idCard:this.idCard,
					list:this.selectList
				}
				this.sendRequest({
					url: "xmgl/safeEducationQuestionAnswer/add",
					data: json,
					method: "post",
					success:(res)=> {
						uni.showToast({
							title:'考试成功！'
						})
						this.showResult=true
						this.isQualified=res.result.isQualified
						this.score=res.result.score
					}
				})
			}
		}
	}
</script>

<style scoped>
	.tips{
		font-size: 28rpx;
		color: red;
		margin: 20rpx 0;
		text-align: center;
	}
.blockBox {
	box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
	border-radius: 16rpx;
	margin: 30rpx;
	padding: 30rpx;
	position: relative;
}
.optionItem{
	/* padding-left: 40rpx; */
	margin-top: 20rpx;
	font-size: 28rpx;
	display: block;
}
.desc{
	margin-left: 10rpx;
}
.checkbox{
	transform:scale(0.8);
}
.submitBtn{
	/* margin: 30rpx 40rpx; */
	/* position: fixed;
	bottom: 40rpx;
	left: 40rpx; */
	width: calc(100% - 40px);
	margin: 40rpx;
}
.testResultBox{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99999;
}
.resultImg{
	width: 100%;
	height: 100%;
}
.score{
	position: fixed;
	left: 50%;
	top: 55%;
	font-size: 70px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 8px solid #fdcb05;
	color: #fdcb05;
	text-align: center;
	line-height: 200px;
	transform: translate(-50%,-50%);
}
</style>