621 lines
15 KiB
Vue
621 lines
15 KiB
Vue
<template style="">
|
||
<view class="" style="background-color: #d4eaf0; min-height: calc(100vh); padding: 20rpx;">
|
||
<public-module></public-module>
|
||
<z-nav-bar title="正在考试" backState="2000">
|
||
<text slot="right" style="padding-right: 20rpx; font-size: 26rpx; color: #666;"
|
||
@click="showPopup = true">考试说明</text>
|
||
</z-nav-bar>
|
||
<!-- 有考试结果时候 -->
|
||
<template>
|
||
<view class="border_radius_10 haveResult">
|
||
<view class="scoreBox">
|
||
本次考试卷面成绩为：<text class="score PM_font">90分</text>
|
||
</view>
|
||
<view class="">
|
||
<button type="primary" @click="goToClass">返回班级</button> <button type="primary" @click="goToPaper">查看试卷</button>
|
||
</view>
|
||
<view class="result_imgBox">
|
||
<image src="../../static/jiesuan_Icon.jpg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 没有考试结果的时候 -->
|
||
<template>
|
||
<!-- <view class="tips border_radius_10">
|
||
<text>①、每位学员共有两次考试的机会，考试成绩以两次成绩的最高分作为最终的卷面成绩，请认真对待每次考试;<br />
|
||
②、请在倒计时结束前完成答题，倒计时结束后将自动交卷;<br />
|
||
③、考试结束前中途离开视为放弃此次考试，成绩为0分。</text>
|
||
</view> -->
|
||
<view style="padding: 20rpx; " class="timeBox border_radius_10 flex_box flex_between align-items_box"
|
||
v-if="paperCreateTime > 0">
|
||
<!-- <view class=""> -->
|
||
<view class="">
|
||
<text><i style="color: #00aaff; font-style: normal; margin-right: 10rpx;" class="">{{curIndex1+1}}
|
||
</i> / {{testPaper.length}}</text>
|
||
</view>
|
||
<view class="flex_box align-items_box">
|
||
<view class="">
|
||
剩余时间：
|
||
</view>
|
||
<view class="">
|
||
<uni-countdown @timeup="timeup" :font-size="20" :show-day="false" :hour="paperCreateTime"
|
||
color="#ffaa7f" />
|
||
</view>
|
||
</view>
|
||
<!-- </view> -->
|
||
<!-- <pre>{{testPaper}}</pre> -->
|
||
</view>
|
||
<view class="question border_radius_10" v-if="curQuestion.id">
|
||
<view class="">
|
||
<text class="questionType">{{curQuestion.type == 0 ? '单选题' : '多选题'}}</text>
|
||
<view class="questionItem" v-if="curQuestion.id">
|
||
<view class="">
|
||
<text>{{curQuestion.content}}</text>
|
||
</view>
|
||
<!-- <view class="">
|
||
{{curQuestion}}-{{curIndex1}}
|
||
</view> -->
|
||
<view class="optionsBox">
|
||
<view
|
||
:class="['item','border_radius_10',curQuestion.answerIds.includes(item.id) ? 'choosed' : '']"
|
||
@click="clickOption(item, index)" v-for="(item, index) in curQuestion.options"
|
||
:key="index">
|
||
<text>{{item.content}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btnBox " style="overflow: hidden;">
|
||
<view class="flex_box flex_between">
|
||
<view class="item">
|
||
<button @click="showPrevQuestion" type="default" plain="true" :disabled="curIndex1 == 0"
|
||
size="mini">上一题</button>
|
||
</view>
|
||
<view class="item">
|
||
<button @click="showNextQuestion" type="primary"
|
||
:disabled="curIndex1 == testPaper.length-1" size="mini">下一题</button>
|
||
</view>
|
||
</view>
|
||
<!-- v-show="curIndex1 == testPaper.length-1 && !isOvertime" -->
|
||
<view class="" style="margin-top: 20rpx;"
|
||
>
|
||
<button @click="sumitAnswer" type="primary">交 卷</button>
|
||
</view>
|
||
</view>
|
||
<view class="questIndx ">
|
||
<view class="" style="text-align: center; font-size: 24rpx; color: #666;">
|
||
<span>题目索引</span>
|
||
</view>
|
||
<scroll-view class="scroll-view_H" scroll-x="true">
|
||
<view class="scroll-view-item_H" v-for="index of getallLIst" :key="index">
|
||
<text @click="clickIndex(index)"
|
||
:class="[ haveAnswerList.includes(index-1) ? 'green' : '', noAnswerList.includes(index-1) ? 'red' : '',(curIndex1+1) == index ? 'cur' :'']">{{index}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<u-popup key="1" :show="showPopup" :round="10" @close="hidePopup">
|
||
<view class="guanli">
|
||
<h3>考试说明</h3>
|
||
<view class="tips border_radius_10">
|
||
<text>①、每位学员共有两次考试的机会，考试成绩以两次成绩的最高分作为最终的卷面成绩，请认真对待每次考试;<br />
|
||
②、请在倒计时结束前完成答题，倒计时结束后将自动交卷;<br />
|
||
③、考试结束前中途离开视为放弃此次考试，成绩为0分。</text>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
showPopup: false,
|
||
code: 0, // 英文code
|
||
classId: undefined,
|
||
testPaper: [],
|
||
curQuestion: {
|
||
answerIds: []
|
||
},
|
||
result: {}, // 考试结果
|
||
curIndex1: 0,
|
||
paperCreateTime: 0,
|
||
examId: undefined,
|
||
endTime: undefined, // 结束时间戳
|
||
isOvertime: false, // 是否超时
|
||
step: 8, /// 步长
|
||
// questIndexList: [],
|
||
nowPart: 1,
|
||
|
||
maxNumber: 0,
|
||
minNumber: 0,
|
||
noAnswerList: [],
|
||
haveAnswerList:[]
|
||
}
|
||
},
|
||
async onLoad(e) {
|
||
console.log('收到得值');
|
||
this.classId = e.classId
|
||
|
||
if (this.testPaper.length == 0) {
|
||
this.getTestPage()
|
||
}
|
||
// this.questIndexList = await this.getNowList('add')
|
||
},
|
||
onHide() {
|
||
if (!this.isOvertime) {}
|
||
},
|
||
onShow() {
|
||
this.endTime = this.hourUp(1)
|
||
console.log('this.endTime', this.endTime.getTime());
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.isOvertime) { // 如果中途退出
|
||
this.giveZero()
|
||
}
|
||
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
getallLIst() {
|
||
const numbers = Array.from(Array(100).keys(), n => n + 1);
|
||
console.log('numbers', numbers);
|
||
return numbers
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
// 单个题的提交
|
||
saveQuestAnswer(paperId,questIndex,ids){
|
||
console.log('收到的值',paperId,questIndex,ids);
|
||
$http.request({
|
||
url: "common/classExam/submitOption",
|
||
method: "POST",
|
||
data: {
|
||
"id": paperId, //试卷id
|
||
"no": questIndex, // 提索引 1....
|
||
"answer": ids // 答案id
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
|
||
if (res.code == 0) {
|
||
console.log('提交成功');
|
||
}else{
|
||
uni.showToast({
|
||
title: e.errMsg,
|
||
icon: 'error'
|
||
})
|
||
}
|
||
|
||
}).catch(e => {
|
||
console.log(e, '数据报错')
|
||
uni.showToast({
|
||
title: e.errMsg,
|
||
icon: 'error'
|
||
})
|
||
});
|
||
},
|
||
getNoAnswerList() {
|
||
var list = []
|
||
if (this.curIndex1 > 0) {
|
||
for (var i = 0; i < this.curIndex1; i++) {
|
||
if (this.testPaper[i].answerIds.length == 0) {
|
||
console.log('fuhe?');
|
||
list.push(i)
|
||
}
|
||
}
|
||
}
|
||
return list
|
||
},
|
||
gethaveAnswerList() {
|
||
var list = []
|
||
if (this.curIndex1 > 0) {
|
||
for (var i = 0; i < this.curIndex1; i++) {
|
||
if (this.testPaper[i].answerIds.length > 0) {
|
||
console.log('fuhe?');
|
||
list.push(i)
|
||
}
|
||
}
|
||
}
|
||
return list
|
||
},
|
||
// 倒计时结束 （超时）
|
||
timeup() {
|
||
this.isOvertime = true
|
||
this.sumitAnswer()
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: "考试结束，系统已为您自动交卷",
|
||
confirmText: '知道了',
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// that.goToClass()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
goToPaper(){
|
||
uni.navigateTo({
|
||
url: `/pages/miniClass/paperBack?id=${this.classId}`
|
||
})
|
||
|
||
},
|
||
// 获取交卷数据
|
||
sumitAnswer() {
|
||
// var list = []
|
||
// var _newList = this.testPaper.map(item => {
|
||
// return item.answerIds
|
||
// })
|
||
|
||
// _newList = _newList.map(item => {
|
||
// return item.join(',')
|
||
// })
|
||
// console.log('_newList', _newList);
|
||
// list = _newList
|
||
// return list
|
||
this.sumbitPaper()
|
||
},
|
||
// q请求提交试卷
|
||
sumbitPaper(ids) {
|
||
$http.request({
|
||
url: "common/classExam/submitExamPaper",
|
||
method: "POST",
|
||
data: {
|
||
id: this.examId
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '交卷成功',
|
||
icon: 'success'
|
||
})
|
||
this.isOvertime = true
|
||
}
|
||
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
console.log(e, '数据报错')
|
||
// this.status = 3
|
||
uni.showToast({
|
||
title: e.errorMsg,
|
||
icon: 'error'
|
||
})
|
||
});
|
||
},
|
||
showPrevQuestion() {
|
||
// 上一题
|
||
this.curIndex1--
|
||
// this.curQuestion.answerIds = []
|
||
this.curQuestion = {
|
||
...this.testPaper[this.curIndex1]
|
||
}
|
||
console.log('----------------', this.testPaper );
|
||
// this.haveAnswerList = this.gethaveAnswerList()
|
||
},
|
||
showNextQuestion() {
|
||
// 下一题
|
||
this.curIndex1++
|
||
// this.curQuestion.answerIds = []
|
||
this.curQuestion = {
|
||
...this.testPaper[this.curIndex1]
|
||
}
|
||
console.log('+++++++++++++++', this.testPaper, );
|
||
this.haveAnswerList = this.gethaveAnswerList()
|
||
},
|
||
clickOption(item, index) {
|
||
console.log('item', item, index, this.curIndex1);
|
||
if (this.curQuestion.type == 0) {
|
||
this.testPaper[this.curIndex1].answerIds = [item.id]
|
||
this.curQuestion.answerIds = [item.id]
|
||
// console.log('666666666', this.testPaper, this.curQuestion.answerIds);
|
||
this.$forceUpdate()
|
||
} else if (this.curQuestion.type == 1) {
|
||
console.log('多选');
|
||
var isIN = this.curQuestion.answerIds.findIndex(itemss => {
|
||
return itemss == item.id
|
||
})
|
||
if (isIN >= 0) {
|
||
console.log('有重复的,删除对应的', isIN);
|
||
this.testPaper[this.curIndex1].answerIds.splice(isIN, 1)
|
||
this.curQuestion.answerIds.splice(isIN, 1)
|
||
} else {
|
||
this.testPaper[this.curIndex1].answerIds.push(item.id)
|
||
|
||
this.curQuestion.answerIds = [...this.testPaper[this.curIndex1].answerIds]
|
||
}
|
||
}
|
||
this.noAnswerList = this.getNoAnswerList()
|
||
this.haveAnswerList = this.gethaveAnswerList()
|
||
console.log('this.testPaper.',this.testPaper.id);
|
||
this.saveQuestAnswer(this.examId,this.curIndex1+1,this.curQuestion.answerIds.join(','))
|
||
console.log('noAnswerList', this.noAnswerList)
|
||
},
|
||
setDesc() {
|
||
const letterArr = []
|
||
// 字母A的code值是65，但因为已经到字母D了，所以直接从69E开始循环
|
||
for (let i = 65; i < 91; i++) {
|
||
letterArr[i] = String.fromCharCode(i)
|
||
}
|
||
return letterArr
|
||
},
|
||
getTestPage() {
|
||
uni.showLoading({
|
||
title: '正在生成试卷'
|
||
})
|
||
$http.request({
|
||
url: "common/classExam/generateExamPaper",
|
||
method: "POST",
|
||
data: {
|
||
"classId": this.classId
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 0) {
|
||
// that.isHave = true
|
||
res.examPaper.forEach(item => {
|
||
item.answerIds = []
|
||
var code = 0
|
||
item.options.forEach(item1 => {
|
||
const randomAbc = this.setDesc().splice(65)
|
||
item1.content = randomAbc[code] + '、' + item1.content
|
||
code++
|
||
})
|
||
})
|
||
this.testPaper = res.examPaper
|
||
this.examId = res.id
|
||
this.paperCreateTime = 1
|
||
this.endTime = this.hourUp(1)
|
||
console.log('this.endTime', this.endTime);
|
||
this.curQuestion = {
|
||
...this.testPaper[this.curIndex1]
|
||
}
|
||
uni.showToast({
|
||
title: '获取成功',
|
||
icon: 'success'
|
||
})
|
||
console.log(res, '试卷', this.curQuestion)
|
||
// setTimeout(() => {
|
||
// this.getClassInfo()
|
||
// }, 500)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.errMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
console.log(e, '数据报错')
|
||
// this.status = 3
|
||
uni.showToast({
|
||
title: e.errMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
});
|
||
},
|
||
giveZero() {
|
||
// 没有完成完成考试，记为0分
|
||
},
|
||
showElart() {
|
||
// uni.showModal({
|
||
// title:'提示',
|
||
// content:"您还没有完成考试，确定要离开吗？离开后成绩会记为0分，是否继续？"
|
||
// })
|
||
},
|
||
goToClass() {
|
||
uni.navigateTo({
|
||
url: `/pages/miniClass/classInfo?id=${this.classId}`
|
||
})
|
||
},
|
||
hidePopup() {
|
||
this.showPopup = false
|
||
},
|
||
clickIndex(val) {
|
||
|
||
this.curIndex1 = val - 1
|
||
console.log('val', val, this.curIndex1, this.testPaper.length);
|
||
this.curQuestion = this.testPaper[this.curIndex1]
|
||
this.noAnswerList = this.getNoAnswerList()
|
||
this.haveAnswerList = this.gethaveAnswerList()
|
||
},
|
||
hourUp(e) {
|
||
// 比现在多几个小时
|
||
var end = Date.now()
|
||
var start = 1000 * 60 * 60 * e
|
||
var interval = end + start; //结束 - 开始 = 毫秒值
|
||
var a = new Date(interval)
|
||
return a
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/style/mixin.scss";
|
||
|
||
.questIndx { overflow: hidden;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
span{padding: 20rpx 0; display: inline-block;}
|
||
.red{border-color: #f56c6c; color: #f56c6c;}
|
||
.green{
|
||
border-color: #67c23a; color: #67c23a;
|
||
}
|
||
text {
|
||
background-color: #fff;
|
||
padding: 6rpx 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
align-items: center;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.cur {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.guanli {
|
||
padding: 40rpx;
|
||
|
||
h3 {
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
background: #fbe8e8;
|
||
color: #f56c6c;
|
||
line-height: 50rpx;
|
||
font-size: 28rpx;
|
||
padding: 10rpx 20rpx;
|
||
text-align: justify;
|
||
}
|
||
|
||
.questionType {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 20rpx;
|
||
background-color: $themeColor;
|
||
color: #fff;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 0 50rpx 50rpx 0;
|
||
}
|
||
|
||
.scroll-Y {
|
||
height: 300rpx;
|
||
}
|
||
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-view-item {
|
||
// height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.scroll-view-item_H {
|
||
display: inline-block;
|
||
width: 13%;
|
||
// height: 300rpx;
|
||
overflow: hidden;
|
||
// line-height: 300rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.haveResult {
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.scoreBox {
|
||
margin-top: 100rpx;
|
||
color: #333;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.score {
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.question {
|
||
padding: 20rpx;
|
||
padding-top: 100rpx;
|
||
background-color: #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.optionsBox {
|
||
margin: 30rpx 0;
|
||
|
||
.item {
|
||
border: 1px solid #eee;
|
||
padding: 24rpx 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.choosed {
|
||
border-color: #b3d8ff;
|
||
color: #409eff;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.right {
|
||
border-color: #c2e7b0;
|
||
color: #67c23a;
|
||
background-color: #f0f9eb;
|
||
}
|
||
|
||
.wrong {
|
||
border-color: #fbc4c4;
|
||
color: #f56c6c;
|
||
background-color: #fef0f0;
|
||
}
|
||
}
|
||
|
||
.result_imgBox {
|
||
width: 100%;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.timeBox {
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.questIndx {
|
||
.cur {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btnBox {
|
||
.item {
|
||
width: 40%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |