250 lines
7.3 KiB
Vue
250 lines
7.3 KiB
Vue
<template style="">
|
||
<view class="" style="background-color: #d4eaf0; min-height: calc(100vh); padding: 20rpx;">
|
||
<public-module></public-module>
|
||
<z-nav-bar title="正在考试"></z-nav-bar>
|
||
<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 :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 ">
|
||
<view class="flex_box flex_between">
|
||
<view class="item">
|
||
<button @click="showPrevQuestion" type="default" plain="true" v-if="curIndex1 > 0" size="mini">上一题</button>
|
||
</view>
|
||
<view class="item" >
|
||
<button @click="showNextQuestion" type="primary" v-show="curIndex1 < testPaper.length-1" :disabled="curQuestion.answerIds.length == 0" size="mini">下一题</button>
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin-top: 20rpx;" v-show="curIndex1 == testPaper.length-1">
|
||
<button @click="sumitAnswer" type="primary" >交 卷</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
code:0, // 英文code
|
||
classId:undefined,
|
||
testPaper:[],
|
||
curQuestion:{
|
||
answerIds:[]
|
||
},
|
||
curIndex1:0,
|
||
paperCreateTime:0,
|
||
examId:undefined
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
console.log('收到得值');
|
||
this.classId = e.classId
|
||
|
||
if(this.testPaper.length == 0){
|
||
this.getTestPage()
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"])
|
||
},
|
||
methods: {
|
||
// 获取交卷数据
|
||
sumitAnswer(){
|
||
var _newList = this.testPaper.map( item =>{
|
||
return item.answerIds
|
||
})
|
||
|
||
_newList = _newList.map(item => {
|
||
return item.join(',')
|
||
})
|
||
console.log('_newList',_newList);
|
||
this.sumbitPaper(_newList)
|
||
},
|
||
// q请求提交试卷
|
||
sumbitPaper(ids){
|
||
$http.request({
|
||
url: "common/classExam/submitExamPaper",
|
||
method: "POST",
|
||
data: {
|
||
id: this.examId,
|
||
"answer": ids
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title:'交卷成功',
|
||
icon:'success'
|
||
})
|
||
|
||
}
|
||
|
||
}).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,);
|
||
},
|
||
showNextQuestion(){
|
||
// 下一题
|
||
this.curIndex1++
|
||
// this.curQuestion.answerIds = []
|
||
this.curQuestion = {...this.testPaper[this.curIndex1]}
|
||
console.log('+++++++++++++++',this.testPaper,);
|
||
},
|
||
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]
|
||
}
|
||
}
|
||
},
|
||
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.curQuestion = {...this.testPaper[this.curIndex1] }
|
||
uni.showToast({
|
||
title: '获取成功',
|
||
icon: 'success'
|
||
})
|
||
console.log(res, '试卷',this.curQuestion)
|
||
// setTimeout(() => {
|
||
// this.getClassInfo()
|
||
// }, 500)
|
||
}
|
||
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
console.log(e, '数据报错')
|
||
// this.status = 3
|
||
uni.showToast({
|
||
title: e.errorMsg,
|
||
icon: 'error'
|
||
})
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/style/mixin.scss";
|
||
.questionType{position: absolute; left: 0 ;top:20rpx; background-color: $themeColor; color: #fff; padding: 10rpx 20rpx;
|
||
border-radius: 0 50rpx 50rpx 0;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.timeBox{background-color: #fff; margin-bottom: 20rpx;}
|
||
.btnBox{
|
||
.item{width:40%; display: flex; justify-content: center;}
|
||
}
|
||
</style>
|