exam_student/pages/examPage/examInfo.vue

<template>
	<view class="container">
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
	<view style="width: 80vh;margin: auto;padding-bottom: 25px;">
		<view style="text-align: center;margin: auto; padding-top: 80px;" v-if="exams.length!==1&&!enter">
			<h3 style="display: inline-block">{{ '考生号:' + user.username }}</h3>
			<h3 v-if="user.grade!==undefined&&user.grade!==null" style="display: inline-block;margin-left: 50px">
				{{ "年级:" + user.grade }}
			</h3>
			<h3 v-if="user.sex!==undefined&&user.sex!==null" style="display: inline-block;margin-left: 50px">
				{{ "性别:" + (user.sex === 1 ? "男" : "女") }}
			</h3>
			<h3 style="display: inline-block;margin-left: 50px">{{ "姓名:" + user.realname }}</h3>
		</view>
		<uni-section>
			<uni-card class="box-card" v-if="exams.length===0&&!enter">
				<uni-row>
					<uni-col :span="4">
					</uni-col>
					<uni-col :span="16">
						<h1>当前并无考试，请退出</h1>
						<br>
					</uni-col>
				</uni-row>
			</uni-card>

			<view v-if="!enter" v-for="o in exams" :key="o">
				<uni-card style="background-color:#f0fff3; " class="box-card" v-if="o.state==0&&exams.length>1">
					<uni-row class="allceter">
						<uni-col :span="12" style="font-size: 20px;">
							{{ '考试名称:  '}}<strong>{{o.title }}</strong>
						</uni-col>
						<uni-col :span="6">
							<uni-tag :text="o. state_dictText" type="success" />
						</uni-col>
						<uni-col :span="6">
							<button v-if="o.tryCount<o.limitCount" type="primary" @click="enterExam(o.id)">进入考试</button>
						</uni-col>
					</uni-row>
				</uni-card>
				<uni-card style="background-color:#6a0001;" class="box-card" v-if="o.state==1&&exams.length>1">
					<uni-row class="allceter">
						<uni-col :span="12" style="font-size: 20px;">
							{{ '考试名称:  '}}<strong>{{o.title }}</strong>
						</uni-col>
						<uni-col :span="6">
							<uni-tag text="不可用" type="warning" />
						</uni-col>
						<uni-col :span="6">
							<!-- <button type="primary" @click="enterExam(o.id)">进入考试</button> -->
						</uni-col>
					</uni-row>
				</uni-card>
				<uni-card style="background-color:#e6f7ff;" class="box-card" v-if="o.state==2&&exams.length>1">
					<uni-row class="allceter">
						<uni-col :span="12" style="font-size: 20px;">
							{{ '考试名称:  '}}<strong>{{o.title }}</strong>
						</uni-col>
						<uni-col :span="4">
							<uni-tag text="未开始" type="primary" />
						</uni-col>
						<uni-col :span="6">
							<!-- <button type="primary" @click="enterExam(o.id)">进入考试</button> -->
						</uni-col>
					</uni-row>
				</uni-card>
				<uni-card style="background-color:#e3e3e3;" class="box-card" v-if="o.state==3&&exams.length>1">
					<uni-row class="allceter">
						<uni-col :span="12" style="font-size: 20px;">
							{{ '考试名称:  '}}<strong>{{o.title }}</strong>
						</uni-col>
						<uni-col :span="6">
							<uni-tag text="已结束" type="default" />
						</uni-col>
						<uni-col :span="6">
							<!-- <button type="primary" @click="enterExam(o.id)">进入考试</button> -->
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
		</uni-section>
		<uni-section v-if="exams.length===1||enter">
			<uni-card :is-shadow="false">
				<!-- <view style="padding-top: 30px;text-align: center;">
					<h1>考试须知</h1>
				</view> -->
				<view  style="width: 100%;text-align: center;margin-bottom: 20px;padding-top:30px ;padding-bottom: 15px;">
					<h1>{{ exam.title }}</h1>
				</view>
				<l-divider color="#adadad">
					<strong>
						<h2>考生信息</h2>
					</strong>
				</l-divider>
				<view class="text" style="width: 100%;text-align: center;padding: 15px;">
					<view>
						<view class="userInfo">
							<view>当前考试:<strong>{{ exam.title }}</strong></view>
						</view>
						<view class="userInfo">
							<view>考生号:<strong>{{ user.username }}</strong></view>
						</view>
						<view class="userInfo" v-if="user.grade!==undefined&&user.grade!==null">
							<view>年 级:<strong>{{ user.grade }}</strong></view>
						</view>
						<view class="userInfo" v-if="user.sex!==undefined&&user.sex!==null">
							<view>性 别:<strong>{{ (user.sex === 1 ? "男" : "女") }}</strong></view>
						</view>
						<view class="userInfo">
							<view>姓 名:<strong>{{ user.realname }}</strong></view>
						</view>
					</view>
				</view>
				<l-divider color="#adadad">
					<strong>
						<h2>考试须知</h2>
					</strong>
				</l-divider>
				<view class="text">

					<view style="width: 70vh; margin: auto;font-size: 16px;">
						<rich-text :nodes="exam.message"></rich-text>
					</view>
				</view>
				<button type="primary" style="margin-top: 50px" @click="examStart(exam.id)">开始考试</button>
				<button v-if="exams.length>1&&enter" style="margin-top: 30px;" @click="enter=!enter">返回
				</button>
			</uni-card >
		</uni-section>
	</view>
	<view style="width: 80vh;margin: auto;padding-bottom: 30px;">
		<view style="text-align: center;width: 300px;margin: auto;">
			<button type="primary" @click="infoExit()" v-if="exams.length>1&&!enter">退出
			</button>
		</view>
	</view>
<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog style="width: 50vh;" ref="inputClose" title="考生信息" >
			<view >
				<view style="text-align: center;"><strong>姓名：</strong><strong>{{ user.realname }}</strong></view>
				<view></view>
				<view style="text-align: center;"><strong>考号：</strong><strong>{{ user.username }}</strong></view>
				<view></view>				
			</view>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script>
	import {
		exit,
		request,

		getExamCreateExam,
		getExamOnlineExam,
		getExamQueryById,
		getExamListExamIn
	} from '../../examJs/examRequest';
	import {
		toExamStart,
		redirectTo,
		toLogin,
	} from '../../examJs/examRoute.js'
	import screenfull from "screenfull";
	export default {
		name: 'examInfo',
		data() {
			return {
				isLoading: true,
				exams: [],
				enter: false,
				exam: {
					id: 1,
					message: ["点击开始考试后将自动进入考试，请遵守考场纪律诚信考试。", "考试试题，共3题。",
						"艺术类监测试卷分音乐和美术两个学科，其中音乐和美术各15分钟共计30分钟答卷时间，每一学科超时后将自动提交试卷。"
					],
					Paper: []
				},
				user: {
					grade: "五年级"
				},
				msgType: 'success',
				messageText: '这是一条成功提示',
			}
		},
		mounted() {
			if(window.screen.width<1024||window.screen.height<768){
				window.alert("当前设备屏幕分辨率过低！请更换设备")
				exit()
				return;
			}

			screenfull.request();
			redirectTo()
			this.user = JSON.parse(sessionStorage.getItem("user"))
			getExamOnlineExam({
				pageNo: 1,
				pageSize: 80
			}).then((data) => {
				this.exams = data.data.result.records
				if (this.exams.length === 1) {
					this.enterExam(0)
				}
this.$refs.inputDialog.open()
			}).catch(xhr => {
				console.log(xhr);
			});

		},

		methods: {
			// 进入考试
			enterExam(index) {
				getExamQueryById({
					id: index
				}).then(data => {
					console.log(data)
					this.exam = data.data.result
					console.log(this.exam);
					if (this.exams.length === 1) {
						this.enterExam(0)
					}
					this.enter = !this.enter

				}).catch(xhr => {
					console.log(xhr);

				});

			},
			messageToggle(type, message) {
				this.msgType = type
				this.messageText = message
				this.$refs.message.open()
			},
			// 退出
			infoExit() {
				screenfull.exit()
				exit()
			},
			// 开始考试
			examStart(examId) {

				getExamListExamIn({
					't': new Date().toString()
				}).then(dataList => {
					console.log(dataList);
					if (dataList.data.result === null) {
						getExamCreateExam({
							'examId': examId,
							't': new Date().toString()
						}).then(data => {
							console.log(data);
							sessionStorage.setItem("examId", data.data.result.id)
							toExamStart()
						})
					} else {
						this.messageToggle('warn',"你有正在进行中的考试，正在跳转......")
						sessionStorage.setItem("examId", dataList.data.result.id)
						setTimeout(()=>{
							toExamStart()
						},2000)
						
					}

				})


			}
		}
	}
</script>
<style scoped lang="scss">
	.text {
		padding-top: 15px;
		text-align: left;
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		margin: 20px auto auto;
		width: 100%;
		height: 70px;
	}

	.allceter {
		display: flex;
		align-items: center;
		height: 50px;
	}

	.userInfo {
		display: inline-block;
		width: 15vh;
		min-width: 150px;
	}
</style>