security_study_h5/examination/examination.vue

<template>
	<view class="pages">
		<u-empty mode="search" v-if="!formData.paperId&&hasload==true" :text="emptyText" marginTop="20vh"></u-empty>
		<view class="info" v-if="!start">
			<view class="page-wrap">
				<view class="paper-name">{{info.paperName}}</view>
				<view class="info-item" v-if="info.paperAttention">
					<view class="til">注意事项</view>
					<view class="con">{{info.paperAttention}}</view>
				</view>
				<view class="info-item" v-if="info.remark">
					<view class="til">备注信息</view>
					<view class="con">{{info.remark}}</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="swiper-wrap">
				<swiper class="swiper" 
					:circular="false"
					:indicator-dots="false" 
					:autoplay="false" 
					:interval="5000"
					:current="current"
					@change="swiperChange"
					:duration="500">
					<swiper-item v-for="item in topicList" :key="item.id">
						<view class="swiper-item">
							<!-- 题目类型: 1-单选题 2-多选题 3-判断题 -->
							<view class="type-1" v-if="item.topicType==1||item.topicType==3">
								<text class="topic-type">{{item.topicType|filterTopicType}}</text>
								<view class="question">{{item.content}}</view>
								<view class="choice u-flex" :class="formData.answerList[current].answer == choice.split(':')[0] ? 'selected':''"
									@click="choiceAnswer(choice)"
									v-for="(choice,index) in item.choiceList" :key="index">
									<view class="sort">
										{{choice.split(":")[0]}}
									</view>
									<view class="answer">
										{{choice.split(":")[1]}}
									</view>
									<view class="status"></view>
								</view>
							</view>
							<view class="type-2" v-else-if="item.topicType==2">
								<text class="topic-type">{{item.topicType|filterTopicType}}</text>
								<view class="question">{{item.content}}</view>
								<view class="choice u-flex" :class="formData.answerList[current].answer.includes(choice.split(':')[0]) ? 'selected':''"
									@click="multipleChoice(choice)"
									v-for="(choice,index) in item.choiceList" :key="index">
									<view class="sort">
										{{choice.split(":")[0]}}
									</view>
									<view class="answer">
										{{choice.split(":")[1]}}
									</view>
									<view class="status"></view>
								</view>
							</view>
							<!-- <view class="type-3" v-else-if="item.topicType==3">
								
							</view> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view class="bottom-btn-static">
			<view class="bottom-btn-fixed">
				<view class="btn" v-if="!start&&formData.paperId" @click="startAnswering">开始答题</view>
				<view class="btns u-flex" v-else>
					<view class="btn" @click="preQuestion" v-if="current>0">上一题</view>
					<view class="btn yellow" @click="nextQuestion" v-if="current<topicList.length-1">下一题</view>
					<view class="btn yellow" v-else-if="current==topicList.length-1" @click="submit">提交试卷</view>
				</view>
			</view>
		</view>
		<u-modal 
			:show="submitShow" 
			:title="submitShowTitle" 
			@confirm="paperSubmit"
			@cancel="submitShow=false"
			:showCancelButton="true"
			:content='submitShowContent'>
			<view class="slot-content" style="text-align: center;">
				<img src="../static/img/icon-warning.png" alt="">
				<view class="" style="text-align: left;font-size: 28rpx;color: #999;margin-top: 20rpx;">
					{{submitShowContent}}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				start:false,
				info:{},
				topicList:[],
				current:0,
				formData:{
					paperId:'',
					timeUsed:'',
					startTime:'',
					endTime:'',
					answerList:[]
				},
				submitShow:false,
				submitShowTitle:'提示',
				submitShowContent:'确认提交?',
				hasload:false,
				emptyText:'没有可用的试卷，请联系管理员'
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.id = page.id;
			this.findPager();
		},
		computed: {
			totalAnswer() {
			  let that = this;
			  return this.formData.answerList.reduce((total, item) => {
					if(item.answer){
						total += 1;
					}
				return total;
			  }, 0);
			}
		},
		methods: {
			findPager(){
				this.$u.api.findPager({classifyId:this.id}).then(res=>{
					this.info = res.data;
					this.formData.paperId = res.data.id;
					this.findPagerTopic(this.formData.paperId);
					// console.log('findPager',res);
				}).catch(err=>{
					this.hasload = true;
					this.emptyText = err.msg
					console.log('findPager',err);
				})				
			},
			findPagerTopic(id){
				this.$u.api.findPagerTopic({paperId:id}).then(res=>{
					this.topicList = res.data.topicsList;
					for (let i=0;i<this.topicList.length;i++) {
						let data = {
							paperTopicId:this.topicList[i].id,
							topicLibId:this.topicList[i].topicLibId,
							answer:''
						}
						this.formData.answerList.push(data)
					}
					console.log('answerList',this.formData.answerList);
					// console.log('findPagerTopic',res);
				}).catch(err=>{
					console.log('findPagerTopic',err);
				})				
			},
			startAnswering(){
				this.start = true;
				const now = new Date();
				this.formData.startTime = uni.$u.timeFormat(now, 'yyyy-mm-dd hh:MM:ss');
				uni.setNavigationBarTitle({
				    title: `${this.current+1}/${this.topicList.length}`
				});
			},
			choiceAnswer(choice){
				// console.log('choiceAnswer',choice.split(":")[0]);
				this.formData.answerList[this.current].answer = choice.split(":")[0];
				// console.log('answerList',this.formData.answerList);
			},
			multipleChoice(choice){
				if (this.formData.answerList[this.current].answer.includes(choice.split(":")[0])) {
				  this.formData.answerList[this.current].answer =  this.formData.answerList[this.current].answer.replace(choice.split(":")[0], "");
				} else {
				  this.formData.answerList[this.current].answer = this.formData.answerList[this.current].answer.concat(choice.split(":")[0]).split("").sort().join("");
				}
				// console.log('answerList-',this.formData.answerList);
			},
			swiperChange(e){
				this.current = e.detail.current;
				uni.setNavigationBarTitle({
				    title: `${this.current+1}/${this.topicList.length}`
				});
			},
			nextQuestion(){
				this.current++
			},
			preQuestion(){
				this.current--
			},
			submit(){
				let that = this;
				if(this.totalAnswer<this.topicList.length){
					this.submitShowContent = `本套试卷共${this.topicList.length}题，您已完成${this.totalAnswer}题，还剩${this.topicList.length - this.totalAnswer}题，确认提交吗？`
				}else{
					this.submitShowContent = '确认提交?'
				}
				this.submitShow = true;
			},
			paperSubmit(){
				const now = new Date();
				this.formData.endTime = uni.$u.timeFormat(now, 'yyyy-mm-dd hh:MM:ss');
				let t1 = new Date(this.formData.startTime.replace(/-/g, '/')).getTime();
				let t2 = new Date(this.formData.endTime.replace(/-/g, '/')).getTime();
				this.formData.timeUsed = t2 - t1;
				
				// this.formData.timeUsed = new Date(this.formData.endTime).getTime() - new Date(this.formData.startTime).getTime();
				// console.log('formData',this.formData);
				// return
				
				this.$u.api.paperSubmit(this.formData).then(res=>{
					let queryParams = uni.$u.queryParams({result:JSON.stringify(res.data)});
					uni.reLaunch({url: '/examination/report'+queryParams});
					// console.log('paperSubmit',res.data);
				}).catch(err=>{
					console.log('paperSubmit',err);
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
.topic-type{
	background: rgba(0,154,239,0.2);
	border-radius: 8rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #009AEF;
	line-height: 36rpx;
	padding: 5rpx 14rpx;
}
.info{
	.paper-name{
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
		margin-bottom: 42rpx;
	}
	.info-item{
		margin-bottom: 24rpx;
		.til{
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
			margin-bottom: 12rpx;
		}
		.con{
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;
			line-height: 42rpx;
		}
	}
	
}
.bottom-btn-static{
	height: 98rpx;
	.bottom-btn-fixed{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		.btn{
			text-align: center;
			height: 98rpx;
			line-height: 98rpx;
			background-color: $uni-color-primary;
			color: #fff;
			&.yellow{
				background-color: $uni-color-warning;
			}
		}
		.btns{
			.btn{
				flex: 1;
			}
		}
	}
}
.swiper-wrap{
	.swiper{
		min-height: calc( 100vh - 44px - 98rpx) ;
		background-color: #F5F9FC;
		.swiper-item{
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 44rpx;
		}
		.question{
			font-size: 34rpx;
			font-weight: 600;
			line-height: 48rpx;
			margin-bottom: 40rpx;
			margin-top: 20rpx;
		}
		.choice{
			padding: 36rpx 40rpx;
			background-color: #fff;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			.sort{
				text-transform: uppercase;
				font-weight: 600;
			}
			.answer{
				padding-left: 18rpx;
				margin-left: 20rpx;
				border-left: 1px solid #ccc;
				flex: 1;
			}
			.status{
				width: 32rpx;
				height: 32rpx;
				background: #F5F9FC;
				border-radius: 50%;
			}
			&.selected{
				.status{
					background-color: #009AEF;
				}
			}
		}
	}
}
</style>