jiupeiyun_kaoshi/pages/test/test.vue

<template>
	<view>
		<Headers></Headers>
		<view class="project">
			<view style="width: 1200px;margin: auto;">二手车评估师考试</view>
		</view>
		
		<view class="project-content ddflex">
			<!-- 考试区域 -->
			<view class="test-box">
				<view class="test-box-title">
					<text style="font-weight: bold;margin-right: 10px;">考试题目</text>
					<text>{{ cIndex + 1 }}</text><text style="color: #999999;">/{{questTotal}}</text>
				</view>
				
				<view class="test-question-box">
					<view class="test-question ddflex">
						<view>{{ cIndex + 1 }}</view>
						<view>【{{getQuestType()}}】</view>
						<view>
							<rich-text class="hh" :nodes="addTitleType(quest.title,quest.qtype)"></rich-text>
						</view>
					</view>
					<!-- 简答题 -->
					<view class="short" v-if="quest.qtype == 4 || quest.qtype == 5">
						<textarea
								v-model="quest.answerTxt"
								maxlength="-1"
								ref="inputText"
								placeholder="在此输入答案"
								placeholder-class="placeholder"
								class="text-ans"
								@click="intAnswer(qitem, idx)"
							></textarea>
					</view>
					<view class="test-question-answer" v-else-if="quest.qtype == 1 || quest.qtype == 2 || quest.qtype == 3">
						<view class="answer-item ddflex" v-for="(qitem, idx) in quest.questJson" :key="idx" @click="setAnswer(qitem, idx)">
							<!-- answer-checked -->
							<view :class="qitem.cssStr ? 'answer-checked' : 'answer-unchecked'"></view>
							<view class="answer-text ddflex">
								<view style="margin-right: 10px;">{{ qitem.num }} </view>
								<rich-text class="hh" :nodes="qitem.title"></rich-text>
							</view>
						</view>
					</view>
				</view>
				
				<view style="height: 82px;width: 100%;"> </view>
				<view class="test-btn-group ddflex">
					<view v-if="cIndex != 0" class="test-btn" @click="prev()">上一题</view>
					<view v-if="cIndex + 1 != questTotal" class="test-btn" @click="next()">下一题</view>
				</view>
			</view>
			<!-- 答题卡区域 -->
			<view class="test-info ddflex">
				<view class="test-people ddflex">
					<image></image>
					<view class="test-people-info ddflex">
						<view class="ddflex">
							<view class="test-people-label">考生姓名</view>
							<view class="fflex">李田</view>
						</view>
						<view class="ddflex">
							<view class="test-people-label">准考证号</view>
							<view class="fflex" style="word-break: break-all;">4512541244</view>
						</view>
						<view class="ddflex">
							<view class="test-people-label">考试科目</view>
							<view class="fflex">二手车评估师</view>
						</view>
					</view>
				</view>
				<view class="test-date">
					<view class="test-date-title">距考试结束还有</view>
					<view class="test-date-group ddflex">
						<view class="test-date-item">{{times.hour}}</view>
						<text class="test-date-symbol">:</text>
						<view class="test-date-item">{{times.minutes}}</view>
						<text class="test-date-symbol">:</text>
						<view class="test-date-item">{{times.seconds}}</view>
					</view>
				</view>
				<view class="test-answer fflex">
					<view class="test-answer-title">答题卡</view>
					<view class="test-answer-info ddflex">
						<view class="">共 {{quests.length}} 题</view>
						<view class="test-answer-info-symbol"></view>
						<view class="">总计 100 分</view>
					</view>
					<view class="test-answer-box ddflex">
						<view :class="'test-answer-item '+(cIndex == index?'test-answer-item-curActive':item.isSubmit?'test-answer-item-active':'')" v-for="item,index in quests"
							@click="toQuestTip(index)">
							{{index+1}}
						</view>
					</view>
					<view class="test-answer-number ddflex">
						<view class="ddflex">
							<view class="test-isanswer"></view>
							<view>已做 {{quests.filter(item=>{return item.isSubmit}).length}}</view>
						</view>
						<view class="ddflex">
							<view class="test-unanswer"></view>
							<view>未做 {{quests.filter(item=>{return !item.isSubmit}).length}}</view>
						</view>
					</view>
					
					<view style="height: 82px;"></view>
					<view class="submit-btn" @click="open">交  卷</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom" :is-mask-click='false'>
			<view class="popup-box" v-if="state==1">
				<view class="popup-top ddflex">
					<view>您正在结束作答</view>
					<image src="/static/images/close.png" @click="close()"></image>
				</view>
				<view class="popup-content">您已完成全部考题，是否确定交卷？</view>
				<view class="popup-bottom ddflex">
					<view class="popup-btn1" @click="close()">继续考试</view>
					<view class="popup-btn2" @click="submit">确定交卷</view>
				</view>
			</view>
			<view class="popup-box" v-if="state==2">
				<view class="popup-top ddflex">
					<view>考试结果</view>
					<image src="/static/images/close.png" @click="close()"></image>
				</view>
				<view class="popup-content" style="margin-top: 23px;">
					<view class="chufen-title">二手车评估师考试</view>
					<view class="chufen-number">
						84<text style="font-size: 18px;margin-left: 10px;">分</text>
						<view style="font-size: 16px;">考试不合格</view>
					</view>
				</view>
				<view class="popup-bottom ddflex" style="margin-top: 30px;margin-bottom: 60px;padding-left: 30px">
					<view>
						<view class="popup-bottom-label">总题数</view>
						<view class="popup-bottom-value">23</view>
					</view>
					<view class="line"></view>
					<view>
						<view class="popup-bottom-label">考试用时</view>
						<view class="popup-bottom-value">20:42:14</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<Foot></Foot>
	</view>
</template>

<script>
	const app = getApp();
	const req = require('../../utils/request.js');
	const utils = require('../../utils/util.js');
	export default {
		data() {
			return {
				state:1,
				
				paperId: '', //考试题目
				paperTitle: '', //考试标题
				paperType: '', //1每日一练 2模拟试题 3大厂真题 5企业真题
				
				type: '', //标识类型 1试卷 2章节 3热门考点 4错题集 5高频错题
				systems: {},
				isMockExam: true, //是否是模拟考试
				isShowTip: false, //是否展示温馨提示
				isShowSheet: false, //
				
				paper: '', //试卷详情
				time: 0, //允许做题的时间
				times: 0, //做题时分秒倒计时
				quest: '', //当前选中的题目
				quests: [], //题目数据
				questTotal: 0, //题目条数
				cIndex: 0, //当前做题下标
				
				answerTxt: '', //填空题、简答题答案
				isGoBack: false,
				isShowView: false
			}
		},
		onReady() {},
		onLoad() {
			this.getQuests()
		},
		methods: {
			getQuestType() {
				// <!-- 1单选 2多选 3 判断 4 填空 5 简答', -->
				var text = '';
				switch (this.quest.qtype) {
					case 1:
						text = '单选题';
						break;
					case 2:
						text = '多选题';
						break;
					case 3:
						text = '判断题';
						break;
					case 4:
						text = '填空题';
						break;
					case 5:
						text = '简答题';
						break;
					default:
						break;
				}
				return text;
			},
					
			stylesText(text){
				return utils.preText(text);
			},
			
			addTitleType(title, qtype) {
				var stitle=this.stylesText(title);
				return stitle;
			},
						
			//获取考试对象
			getPaper() {
				var _ts = this;
				req.getRequest(api.paper_detail + _ts.paperId, {}, res => {
					if (res) {
						if (res.time > 0 && _ts.paperType != 3 && _ts.paperType != 5) {
							_ts.time = res.time * 60;
							_ts.setTime();
						}
						_ts.paperType = res.paperType * 1;
						_ts.paper = res;
					}
				});
			},

			getQuests(){
				let _ts = this
				req.getRequest('https://mock.apifox.cn/m1/2171629-0-default/api/paper/quest/init/2834',{},quests=>{
					console.log(quests)
					if (quests && quests.length > 0) {
						_ts.questTotal = quests.length;
						for (var k = 0; k < quests.length; k++) {
							var quest = quests[k];
							quest.eitype = _ts.etype;
							quest.title = quest.title.replace(/<code class="(.*?)"/gi, '<code class="Java" ');
						}
						if (_ts.questTotal > 0) {
							_ts.quest = _ts.setQuest(quests[0]);
						}
						_ts.quests = quests;
					}
				})
			},
			
			//考试时间倒计时
			setTime() {
				var _ts = this;
				var time = _ts.time;
				if (time <= 0) {
					//考试时间到，交卷
					if (_ts.ptime) {
						clearTimeout(_ts.ptime);
					}
					_ts.submitTest();
					return;
				}
				var times = {};
				times.hour = _ts.cut22(Math.floor(time / 3600));
				var leave2 = time % 3600;
				times.minutes = _ts.cut22(Math.floor(leave2 / 60));
				var leave3 = leave2 % 60;
				times.seconds = _ts.cut22(Math.round(leave3));
				_ts.times = times;
				_ts.ptime = setTimeout(function() {
					_ts.time = time - 1;
					_ts.setTime();
				}, 1000);
			}, //下次继续
						
			cut22(n) {
				n = n.toString();
				return n[1] ? n : '0' + n;
			},
						
			//将答案和问题转成数组或对象
			setQuest(quest) {
				console.log('quest.iscv==', quest.iscv);
				if (quest.iscv) {
					return quest;
				}
				quest.iscv = true;
				var answers = [];
				var qjs = [];
				try {
					var qJsons = JSON.parse(quest.questJson);
					if (quest.qtype == 1 || quest.qtype == 3) {
						//'单选题'
						answers = quest.answerJson ? [quest.answerJson] : [];
					} else if (quest.qtype == 2) {
						if (quest.answerJson) {
							answers = JSON.parse(quest.answerJson);
						}
					}
					for (var m = 0; m < qJsons.length; m++) {
						var num = this.getNum(m);
						qjs.push({
							num: num,
							title: qJsons[m],
							cssStr: ''
						});
					}
				} catch (e) {}
				quest.answerJson = answers;
				quest.questJson = qjs;
				console.log('下一题中');
				quest.answerTxt = '';
				this.answerTxt = '';
				return quest;
			},
						
			getNum: function(ix) {
				var keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];
				return keys[ix];
			},
			intAnswer(item, idx) {
				var _ts = this;
				var qes = this.quest;
				qes.isSubmit = true;
				_ts.quest = qes;
			},
			setAnswer(item, idx) {
				// <!-- 1单选 2多选 3 判断 4 填空 5 简答', -->
				var _ts = this;
				idx = idx + 1;
				var qes = this.quest;
				/*修改答案选中项*/
				var sItems = qes.sItems;
				if (qes.qtype == 2) {
					var isflg = false;
					if (sItems && sItems.length > 0) {
						var cidx = sItems.indexOf(idx);
						if (cidx > -1) {
							sItems.splice(cidx, 1);
							isflg = true;
						}
					} else {
						sItems = [];
					}
					if (!isflg) {
						sItems.push(idx);
					}
				} else if (qes.qtype == 1 || qes.qtype == 3) {
					sItems = [idx];
				}
				qes.sItems = sItems.sort();
				qes.isSubmit = true;
				//修改Css
				qes = _ts.setCss(qes);
				_ts.quest = qes;
				_ts.quests[_ts.cIndex] = qes;
			},
						
			//设置页面选中样式
			setCss(qes) {
				var qjson = qes.questJson;
				var answers = qes.answerJson; //答案
				var sItems = qes.sItems;
				if (!sItems) {
					sItems = [];
				}
				for (var m = 0; m < qjson.length; m++) {
					var qitem = qjson[m];
					var cidx = sItems.indexOf(m + 1);
					if (cidx > -1) {
						qitem.cssStr = ' active';
					} else {
						qitem.cssStr = '';
					}
				}
				qes.questJson = qjson;
				qes.cssStr = ' active';
				return qes;
			},
						
			//上一题
			prev() {
				var _ts = this;
				var cIndex = _ts.cIndex;
				if (cIndex <= 0) {
					return;
				}
				_ts.cIndex = cIndex - 1;
				_ts.quest = _ts.setQuest(_ts.quests[_ts.cIndex]);
			}, //下一题
			next() {
				var _ts = this;
				var cIndex = _ts.cIndex;
				if (cIndex >= _ts.questTotal - 1) {
					return;
				}
				_ts.cIndex = cIndex + 1;
				console.log('下一题');
				_ts.quest = _ts.setQuest(_ts.quests[_ts.cIndex]);
				console.log('下一题后');
				console.log('_ts.quest==', _ts.quest);
				console.log('_ts.quest.answerTxt==', _ts.quest.answerTxt);
				_ts.$forceUpdate();
				console.log('quests==', _ts.quests);
			},
						
			toQuestTip(index) {
				var _ts = this;
				var _ts = this;
				_ts.cIndex = index;
				_ts.quest = _ts.setQuest(_ts.quests[_ts.cIndex]);
				_ts.closeCeng();
				// });
			},
						
			//提交
			submitQuest() {
				var msg = '';
				if (this.paperType == 2) {
					if (this.times.hour > 0) {
						msg = '距离考试结束还剩' + this.times.hour + '小时' + this.times.minutes + '分钟，确定要结束考试吗？';
					} else {
						if (this.times.minutes > 0) {
							msg = '距离考试结束还剩' + this.times.minutes + '分钟，确定要结束考试吗？';
						} else {
							msg = '确定要交卷结束考试吗？';
						}
					}
				} else {
					msg = '确定要交卷结束做题吗？';
				}
						
				this.$showModal({ title: '温馨提示', content: msg, cancelText: '继续作答', confirmText: '交卷' })
					.then(res => {
						this.submitTest();
					})
					.catch(err => {
						// 点击取消按钮的操作
					});
			},
						
			async submitTest(){
				if (!this.paper.isScore) {//手动阅卷
				//订阅成绩通知
					await requsetmessage.resultsTest().then(res => {});
				}
				this.submit();
			},
						
						
			//提交考试+答案
			submit() {
				uni.redirectTo({
					url:'/pages/scoreQuery/scoreQuery'
				})
				return
				var _ts = this;
				if (_ts.ptime) {
					clearTimeout(_ts.ptime);
				}
				var dataP = {
					uniqueId: _ts.paperId,
					uniqueType: _ts.type
				};
				//组装考试题目
				dataP.questionList = this.quests.map(it => {
					// <!-- 1单选 2多选 3 判断 4 填空 5 简答', -->
					var data = {
						id: it.id, //记录ID
						paperQuestionId: it.pqId, //试卷题目ID
						questionId: it.questId //题目ID
					};
					var answerJson = '';
					if (it.qtype == 1 || it.qtype == 3) {
						answerJson = it.sItems ? it.sItems.join('') : '';
					} else if (it.qtype == 2) {
						answerJson = it.sItems ? JSON.stringify(it.sItems) : '';
					} else if (it.qtype == 4) {
						var list = [];
						list.push(it.answerTxt ? it.answerTxt : '');
						answerJson = JSON.stringify(list);
					} else if (it.qtype == 5) {
						answerJson = it.answerTxt ? it.answerTxt : '';
					}
					data.answerJson = answerJson;
					return data;
				});
				console.log(dataP);
				req.postRequest(
					api.complete_exam,
					dataP,
					res => {
						if (!_ts.paper.isScore) {//手动阅卷
							uni.redirectTo({
								url: '/learn/marking/index?id=' + res.id
							});
						} else {//自动阅卷
							uni.redirectTo({
								url: '/learn/result/index?id=' + res.id
							});
						}
					},
					true
				);
			},
			
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}

</script>

<style>
	@import url('./test.css');
</style>