Files
medicine_app/pages/miniClass/test.vue
@fawn-nine bc7656e5ed 提交
2024-10-15 16:50:47 +08:00

875 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template style="">
<view class="" style="background-color: #d4eaf0; min-height: calc(100vh); padding: 20rpx;">
<public-module></public-module>
<z-nav-bar :title="pagetitle" backState="2000">
<text slot="right" style="padding-right: 20rpx; font-size: 26rpx; color: #666;"
@click="showPopup = true">考试说明</text>
</z-nav-bar>
<!-- 有考试结果时候 -->
<template v-if="exameResult.id">
<view class="border_radius_10 haveResult">
<view class="scoreBox">
本次考试卷面成绩为<text class="score PM_font">{{exameResult.score}} </text>
</view>
<view class="flex_box flex_between">
<button type="primary" size="mini" @click="goToClass">返回班级</button>
<button type="warn" size="mini" @click="goToPaper">查看试卷</button>
</view>
<view class="result_imgBox">
<image src="../../static/jiesuan_Icon.jpg" mode="widthFix"></image>
</view>
</view>
</template>
<!-- 没有考试结果的时候 -->
<template v-else>
<view style="padding: 20rpx; " class="timeBox border_radius_10 flex_box flex_between align-items_box"
v-if="secondTimeDif > 0">
<!-- <view class=""> -->
<view class="">
<text><i style="color: #00aaff; font-style: normal; margin-right: 10rpx;" class="">{{curIndex1+1}}
</i> / {{testPaper.length}}</text>
<text class="checkQuestBtn small_btn border_radius_10" @click="showQuestIndex = true">全部题目</text>
</view>
<view class="flex_box align-items_box" v-if="secondTimeDif > 0">
<view class="">
剩余时间:
</view>
<view class="">
<uni-countdown @timeup="timeup" :font-size="20" :show-day="false"
:hour="timeDif.hour"
:minute="timeDif.minutes"
:second="timeDif.second"
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>
<!-- <text class="checkQuestBtn small_btn border_radius_10" @click="showQuestIndex = true">检查</text> -->
<view class="questionItem" v-if="curQuestion.id">
<view class="">
<text>{{curQuestion.content}}</text>
</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" v-show="curIndex1 == testPaper.length-1 && !isOvertime">
<button @click="sumitAnswer" type="primary" size="mini"> </button>
</view>
<view class="item">
<button @click="showNextQuestion" type="primary"
:disabled="curIndex1 == testPaper.length-1" size="mini">下一题</button>
</view>
</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 />
请在倒计时结束前完成答题倒计时结束后将自动交卷</text>
</view>
</view>
</u-popup>
<u-popup key="2" :show="showQuestIndex" :round="10" @close="hidePopup">
<view class="guanli">
<h3>题目索引</h3>
<view class="" style="text-align: center; font-size: 28rpx; line-height: 50rpx; color: #666;">
<text>红框标识未作答绿色框标识已选定答案灰色框标识您未查看的题目</text>
</view>
<view class="">
<view class="questIndx questIndxPup flex_box">
<!-- <scroll-view class="scroll-view_H" scroll-x="true">
<view class="scroll-view-item_H" v-for="index of getallLIst" :key="index"> -->
<text v-for="index of getallLIst" @click="clickIndex(index)" :key="index"
:class="[ haveAnswerList.includes(index-1) ? 'green' : '', noAnswerList.includes(index-1) ? 'red' : '',(curIndex1+1) == index ? 'cur' :'']">{{index}}</text>
<!-- </view>
</scroll-view> -->
</view>
</view>
</view>
</u-popup>
<u-popup :show="protocolShow" mode="center" round="6" :key="3">
<view class="popup_box">
<view class="title">温馨提示</view>
<view class="content">
<view class="center">
用户您好本次考试时间为 <text style="color: red; font-weight: bold; font-size: 30rpx;">{{testDuration}}</text> 分钟<br />
<view style="color: red; font-weight: bold"> : </view>
<view>
<text>每位学员共有两次考试的机会考试成绩以两次成绩的最高分作为最终的卷面成绩请认真对待每次考试;<br />
请在倒计时结束前完成答题倒计时结束后将自动交卷</text>
</view>
</view>
<view class="bottom">
<view class="button_box">
<u-button size="small" text="稍后再考" @click="cancelClick"></u-button>
<u-button text="开始考试" color="#258feb" size="small" @click="onHandleClickBuy"></u-button>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import debounce from "@/common/debounce.js";
import {
mapState,mapMutations
} from "vuex";
export default {
data() {
return {
testDuration:undefined, // 考试时长
protocolShow:false,
showPopup: false,
code: 0, // 英文code
classId: undefined,
testPaper: [],
curQuestion: {
answerIds: []
},
result: {}, // 考试结果
curIndex1: 0,
paperCreateTime: 0,
examId: undefined,
endTime: undefined, // 结束时间戳
timeDif:{}, // 时间差(结束 - 现在)
isOvertime: false, // 是否超时
step: 8, /// 步长
// questIndexList: [],
nowPart: 1,
maxNumber: 0,
minNumber: 0,
noAnswerList: [],
haveAnswerList:[],
exameResult:{},
showQuestIndex:false,
secondTimeDif:undefined,
pagetitle:'', // 页面标题
flag:false,
}
},
async onLoad(e) {
console.log('收到得值');
this.classId = e.classId
this.testDuration = e.testDuration
this.protocolShow = true
this.pagetitle = '准备考试'
},
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(this.testPaper.length).keys(), n => n + 1);
console.log('numbers', numbers);
return numbers
}
},
methods: {
...mapMutations(['setPaperEndTime']),
cancelClick(){
this.protocolShow = false
uni.navigateTo({
url: `/pages/miniClass/classInfo?id=${this.classId}`
})
},
onHandleClickBuy(){ // 确定开始考试
debounce(async () => {
this.protocolShow = false
if (this.testPaper.length <= 0) {
this.pagetitle = '获取试卷'
this.getTestPage()
}else{
uni.showToast({
title:'页面发生错误,请退出后重新进入页面或联系客服人员',
icon:'none',
duration:3000
})
}
},300)
},
// 获取服务器时间
async getServerTime() {
var time = 0
await $http.request({
url: "common/classExam/getServerTime",
method: "POST",
data: {},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(async (res) => {
if (res.code == 0) {
time = res.serverTime
} else {
time = -1
}
}).catch(e => {
time = -1
});
return time
},
// 单个题的提交
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.testPaper.length; i++) {
if (this.testPaper[i].answerIds.length == 0 && this.testPaper[i].hadOpend) {
console.log('fuhe?');
list.push(i)
}
}
// }
return list
},
gethaveAnswerList() {
var list = []
// if (this.curIndex1 > 0) {
for (var i = 0; i < this.testPaper.length; i++) {
if (this.testPaper[i].answerIds.length > 0 && this.testPaper[i].hadOpend) {
// console.log('fuhe?');
list.push(i)
}
}
// }
return list
},
// 倒计时结束 (超时)
timeup() {
this.isOvertime = true
this.sumbitPaper()
let that = this
uni.showModal({
title: '提示',
content: "考试结束,系统已为您自动交卷,点击按钮返回所在班级",
confirmText: '知道了',
showCancel: false,
success: (res) => {
if (res.confirm) {
// that.goToClass()
uni.navigateTo({
url: `/pages/miniClass/classInfo?id=${that.classId}`
})
}
}
})
},
goToPaper(){
uni.navigateTo({
url: `/pages/miniClass/paperBack?id=${this.examId}`
})
},
// 获取交卷数据
sumitAnswer() {
debounce(async () => {
let that = this
// this.noAnswerList = await this.getNoAnswerList()
if(this.noAnswerList.length > 0){
this.showQuestIndex = true
uni.showModal({
title:'提示',
content:'您有未作答的题目,是否继续交卷操作?',
cancelText:'点错了',
confirmText:'确定',
success(res) {
if (res.confirm) {
that.sumbitPaper()
}
},
})
}else{
that.sumbitPaper()
}
},300)
},
// q请求提交试卷
sumbitPaper(ids) {
let that = this
if(that.flag){
return
}
that.flag = true
uni.showLoading({
title:'正在交卷'
})
$http.request({
url: "common/classExam/submitExamPaper",
method: "POST",
data: {
id: that.examId
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
uni.hideLoading()
if (res.code == 0) {
console.log('交卷结果',res);
uni.showToast({
title: '交卷成功',
icon: 'success'
})
setTimeout( ()=>{
that.exameResult = res.examPaper
// this.timeup()
that.showQuestIndex = false
that.secondTimeDif = 0
that.isOvertime = true
uni.setStorage({
key:'paperEndTime',
data:{
time: 0,
examId: undefined
},
success: function () {
console.log('时间存储成功');
}
})
},300)
}else{
that.flag = false
uni.showToast({
title: e.errMsg,
icon: 'error'
})
}
}).catch(e => {
that.flag = false
uni.hideLoading()
console.log(e, '数据报错')
// this.status = 3
uni.showToast({
title: e.errMsg,
icon: 'error'
})
});
},
showPrevQuestion() {
// 上一题
this.curIndex1--
// this.curQuestion.answerIds = []
this.curQuestion = {
...this.testPaper[this.curIndex1]
}
this.testPaper[this.curIndex1].hadOpend = true
console.log('----------------', this.testPaper );
this.noAnswerList = this.getNoAnswerList()
this.haveAnswerList = this.gethaveAnswerList()
},
showNextQuestion() {
debounce(async () => {
// 下一题
this.curIndex1++
// this.curQuestion.answerIds = []
this.curQuestion = {
...this.testPaper[this.curIndex1]
}
this.testPaper[this.curIndex1].hadOpend = true
// console.log('+++++++++++++++', this.testPaper, );
this.noAnswerList = this.getNoAnswerList()
this.haveAnswerList = this.gethaveAnswerList()
},300)
},
clickOption(item, index) {
// debounce(async () => {
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)
// },300)
},
setDesc() {
const letterArr = []
// 字母A的code值是65但因为已经到字母D了所以直接从69E开始循环
for (let i = 65; i < 91; i++) {
letterArr[i] = String.fromCharCode(i)
}
return letterArr
},
async getTestPage() {
uni.showLoading({
title: '正在生成试卷'
})
await $http.request({
url: "common/classExam/generateExamPaper",
method: "POST",
data: {
// "classId":
"type":"1",//考试类型 1小班 2自考
"relationId": this.classId, //小班id、课程id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(async res => {
uni.hideLoading()
if (res.code == 0) {
// that.isHave = true
res.examPaper.forEach(item => {
item.answerIds = []
item.hadOpend = false // 是否呗打开过
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(res.startTime,2) // 结束的时间戳
// var planEndTimeDate = new Date(res.planEndTime)
// this.endTime = planEndTimeDate.getTime();
this.endTime = res.planEndTime
var severNowTime = await this.getServerTime()
this.secondTimeDif = this.endTime - severNowTime // 时间差 毫秒
let that = this
if(this.secondTimeDif > 0){
this.timeDif.hour = parseInt((this.secondTimeDif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
this.timeDif.minutes = parseInt((this.secondTimeDif % (1000 * 60 * 60)) / (1000 * 60))
this.timeDif.second = (this.secondTimeDif % (1000 * 60)) / 1000
console.log('this.endTime',this.timeDif.hour, this.timeDif.minutes, this.timeDif.second);
}else{
uni.showModal({
title:'提示',
content:'您的时间已经结束,即将返回班级',
confirmText:'好的',
showCancel:fals,
success: (res) => {
if(res.confirm){
that.goToClass()
}
}
})
}
this.curQuestion = {
...this.testPaper[this.curIndex1]
}
this.testPaper[this.curIndex1].hadOpend = true
uni.showToast({
title: '获取成功',
icon: 'success'
})
console.log(res, '试卷', this.curQuestion)
this.pagetitle = '正在考试'
} 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
})
setTimeout(()=>{
this.goToClass()
},1000)
});
},
giveZero() {
// 没有完成完成考试记为0分
},
showElart() {
// uni.showModal({
// title:'提示',
// content:"您还没有完成考试确定要离开吗离开后成绩会记为0分是否继续"
// })
},
goToClass() {
uni.navigateTo({
url: `/pages/miniClass/classInfo?id=${this.classId}`
})
},
hidePopup() {
this.showPopup = false
this.showQuestIndex = false
},
clickIndex(val) {
this.curIndex1 = val - 1
console.log('val', val, this.curIndex1, this.testPaper.length);
for (var i = 0; i < this.curIndex1; i++) {
this.testPaper[i].hadOpend = true
}
this.curQuestion = this.testPaper[this.curIndex1]
this.testPaper[this.curIndex1].hadOpend = true
this.hidePopup()
this.noAnswerList = this.getNoAnswerList()
this.haveAnswerList = this.gethaveAnswerList()
},
hourUp(start,e) {
// 比现在多几个小时
// var end = Date.now()
var startTimeDate = new Date(start)
var startTime = startTimeDate.getTime();
var step = 1000 * 60 * 60 * e // 时间间隔
var interval = startTime + step; //开始 + 时长 = 结束的毫秒数
// var a = new Date(interval)
console.log('aaaaaaaaaa结束时间的毫秒数时间戳',interval);
return interval
},
}
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.popup_box {
padding-bottom: 20rpx;
width: 85vw;
overflow: hidden;
position: relative;
height: auto;
.title {
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 46rpx;
color: $themeColor;
background-color: #f5f5f5;
// line-height: 46rpx;
padding: 20rpx;
// border-leradius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.content {
font-size: 26rpx;
letter-spacing: 0.15rpx;
padding: 20rpx;
color: #3f3f3f;
.top {
margin: 30rpx 0;
}
.center {
line-height: 40rpx;
// padding:0 10rpx;
}
.bottom {
width: 100%;
margin-top: 60rpx;
font-size: 24rpx;
line-height: 26rpx;
color: #b0b0b0;
}
}
.button_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
.u-button {
margin-left: 40rpx;
}
.u-button:nth-child(1) {
margin-left: 0;
}
}
}
.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 {
font-size: 28rpx;
background-color: #fff;
// padding: 6rpx 10rpx;
display: flex;
// justify-content: center;
border-radius: 10rpx;
// align-items: center;
width: 70rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border: 1px solid #eee;
}
.cur {
background-color: #409eff;
color: #fff;
}
}
.guanli {
padding: 40rpx;
max-height: 60vh;
overflow-y: scroll;
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;
}
.checkQuestBtn {
margin-left: 10rpx;
// position: absolute;
// right: 20rpx;
// top: 20rpx;
font-size: 28rpx;
// border: 1px solid $themeColor;
background-color: #409eff;
color: #fff;
// padding: 10rpx 20rpx;
// border-radius: 0 50rpx 50rpx 0;
}
// .checkQuestBtn {
// position: absolute;
// right: 20rpx;
// top: 20rpx;
// border: 1px solid $themeColor;
// color: $themeColor;
// // 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: 20rpx 16rpx;
margin-bottom: 16rpx;
}
.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 {
border-color:#409eff ;
background-color: #409eff;
color: #fff;
}
}
.questIndxPup{
justify-content: space-around;
flex-wrap: wrap;
text{
display: inline-block; margin: 10rpx;
}
}
.btnBox {
.item {
width: 40%;
display: flex;
justify-content: center;
}
}
</style>