<template>
|
<view style="display: flex;flex-direction: column;height: 100%;">
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view style="display: flex; flex-direction: column;">
|
<view class="navBar">
|
<u-icon name="arrow-left" color="black" size="17" style="margin-left: 8px;" @click="goBack"/>
|
<view class="barText">题目内容</view>
|
<!-- <view >
|
<u-button type="text" @click="loginOut" style="color: blue;margin-right: 5px;">退出</u-button>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
<view class="m-p-15">
|
<view class="timer" v-if="viewType == 1">
|
<u--image :showLoading="true" :src="sandPic" width="18px" height="18px"></u--image>
|
<view class="timer-b">
|
<span>开考时间：</span>
|
<span>{{ formattedTime }}</span>
|
</view>
|
</view>
|
<view class="top">
|
<view class="ind">{{'第 ' + (curTotalIndex+1) + ' 题'}}</view>
|
<view class="panelBtn" @click="openPanel">答题卡</view>
|
</view>
|
<view class="questions">
|
<view class="title">
|
<span>【{{currentQ.questionType == 1?'单选题':currentQ.questionType == 2?'多选题':'判断题'}}】</span>
|
{{currentQ.title}}
|
</view>
|
<view class="content">
|
<u-checkbox-group
|
v-if="currentQ.questionType==2"
|
v-model="currentB"
|
placement="column"
|
class="myRadio"
|
iconPlacement="right"
|
:disabled="viewType==1?false:true"
|
@change="checkboxChange"
|
>
|
<u-checkbox
|
:customStyle="{marginBottom: '15px'}"
|
v-for="(item, index) in currentQ.content.items"
|
:key="index"
|
:label="item.prefix +'：'+ item.content"
|
:name="item.prefix"
|
:class="{'picked': currentB.includes(item.prefix)}"
|
>
|
</u-checkbox>
|
</u-checkbox-group>
|
<u-radio-group v-model="currentA" class="myRadio" iconPlacement="right" placement="column" @change="groupChange" v-if="currentQ.questionType==1||currentQ.questionType==3" :disabled="viewType==1?false:true">
|
<u-radio
|
:customStyle="{marginBottom: '15px'}"
|
v-for="(item, index) in currentQ.content.items"
|
:key="index"
|
shape="square"
|
:label="item.prefix +'：'+ item.content"
|
:name="item.prefix"
|
@change="radioChange"
|
:class="{'picked': currentA == item.prefix}"
|
>
|
</u-radio>
|
</u-radio-group>
|
|
<u-button style="width: 80%;margin: 30px auto"
|
v-if="currentQ.questionType==2 && currentB.length>0 && viewType ==1"
|
type="primary" shape="circle" text="确认答案" @click="confirmAnswer"></u-button>
|
<view class="answers" v-if="viewType == 2 && currentQ.studentAnswer && currentQ.studentAnswer.answer">
|
<view>你的答案：
|
<span :class="currentQ.answer == currentQ.studentAnswer.answer?'right':'wrong'">{{currentQ.studentAnswer.answer}}</span>
|
<!-- <span v-else :class="currentQ.answer == currentQ.studentAnswer.answer?'right':'wrong'">{{currentQ.studentAnswer.answer}}</span>-->
|
</view>
|
<view>正确答案：<span class="right">{{currentQ.answer}}</span></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="btns">
|
<u-button style="width: 30%" type="error" shape="circle" size="small" text="上一题" @click="prevQ"></u-button>
|
<u-button v-if="viewType == 1" style="width: 30%" type="primary" shape="circle" size="small" text="交卷" @click="endExam"></u-button>
|
<u-button v-if="curTotalIndex < idList.length - 1" style="width: 30%" type="error" shape="circle" size="small" text="下一题" @click="nextQ"></u-button>
|
<u-button v-if="curTotalIndex == idList.length - 1 && viewType == 2" style="width: 30%" type="primary" shape="circle" size="small" text="退出" @click="goBack"></u-button>
|
</view>
|
<u-popup :show="showPanel" :round="40" mode="right" @close="close" @open="open">
|
<view class="panel">
|
<view :class="item.passed==1?'right-a':item.passed==0?'wrong-a':''" v-for="(item,index) in idList" @click="toQuestion(item,index)">
|
{{index + 1}}
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getExamIdIdList,
|
getExamListByIds,
|
postExamAnswer,
|
postEndExam,
|
getQuestionIdList,
|
getErrorsIdList,
|
getQuestionByIds,
|
postExerciseAnswer
|
} from '../../../api/wearhouse.js'
|
import Vue from 'vue'
|
import {loginOut} from "../../../api";
|
import sand from '../../../static/sand.gif'
|
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
statusBarHeight: 0,
|
sandPic: sand,
|
bank: {},
|
idList: [],
|
questionList: [],
|
curTotalIndex: 0,
|
currentQ: {},
|
currentA: '',
|
currentB: [],
|
viewType: null,
|
startTime: null,
|
elapsedTime: 0,
|
timerInterval: null,
|
showPanel: false
|
}
|
},
|
onReady(){
|
},
|
onLoad(e) {
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
|
this.bank = e.bank && JSON.parse(decodeURIComponent(e.bank))
|
this.viewType = e.type && JSON.parse(decodeURIComponent(e.type))
|
this.startTime = this.bank.startTime?this.bank.startTime:0
|
this.getQuestionIds(this.bank.paperId)
|
|
},
|
onShow(){
|
|
},
|
mounted() {
|
if(this.viewType == 1){
|
this.startTimer()
|
}
|
},
|
computed: {
|
formattedTime() {
|
const totalSeconds = Math.floor(this.elapsedTime / 1000);
|
const hours = Math.floor(totalSeconds / 3600);
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
const seconds = totalSeconds % 60;
|
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
}
|
},
|
beforeUnmount() {
|
|
},
|
|
beforeDestroy() {
|
clearInterval(this.timerInterval)
|
},
|
methods: {
|
async openPanel(){
|
const t = this
|
t.showPanel = true
|
const res = await getExamIdIdList({paperId: this.bank.paperId,viewType: this.viewType})
|
if(res.code == 200){
|
let list = res.data || []
|
if(list.length>0){
|
t.idList = list.sort((a, b) => a.id - b.id)
|
}else{
|
t.idList = []
|
uni.showToast({
|
title: '本题库暂无题目',
|
duration: 1000
|
});
|
}
|
}else{
|
uni.$u.toast(res.message)
|
}
|
},
|
|
async toQuestion(item,index){
|
this.curTotalIndex = index
|
const curIdList = this.idList.slice(this.curTotalIndex,this.curTotalIndex + 20)
|
this.currentId = this.idList[this.curTotalIndex].id
|
await this.getQuestionsByIds(curIdList)
|
this.currentQ = this.questionList[0]
|
this.showAnswer()
|
this.showPanel = false
|
},
|
|
open() {
|
// console.log('open');
|
},
|
close() {
|
this.showPanel = false
|
// console.log('close');
|
},
|
|
updateTimer() {
|
const currentTime = Date.now();
|
this.elapsedTime = currentTime - this.startTimestamp;
|
},
|
startTimer() {
|
this.startTimestamp = this.startTime ? this.startTime : Date.now();
|
this.timerInterval = setInterval(this.updateTimer, 1000);
|
},
|
|
async getQuestionIds(id){
|
const res = await getExamIdIdList({paperId: id,viewType: this.viewType})
|
if(res.code == 200){
|
let list = res.data || []
|
if(list.length>0){
|
this.idList = list.sort((a, b) => a.id - b.id)
|
this.curTotalIndex = this.bank.questionId ? this.idList.findIndex(i=>i.id == this.bank.questionId):0
|
const curIdList = this.idList.slice(this.curTotalIndex,this.curTotalIndex + 20)
|
this.currentId = this.idList[this.curTotalIndex].id
|
await this.getQuestionsByIds(curIdList)
|
this.currentQ = this.questionList[0]
|
this.showAnswer()
|
}else{
|
this.idList = []
|
uni.showToast({
|
title: '本题库暂无题目',
|
duration: 1000
|
});
|
}
|
}else{
|
uni.$u.toast(res.message)
|
}
|
},
|
|
async getErrorIds(id){
|
const res = await getErrorsIdList({bankId: id})
|
if(res.code == 200){
|
let list = res.data || []
|
if(list.length>0){
|
this.idList = list.sort((a, b) => a - b)
|
this.curTotalIndex = 0
|
const curIdList = this.idList.slice(0,20)
|
this.currentId = this.idList[0].id
|
await this.getQuestionsByIds(curIdList)
|
this.currentQ = this.questionList[0]
|
this.showAnswer()
|
}else{
|
this.idList = []
|
uni.showToast({
|
title: '本题库暂无错题',
|
duration: 1000
|
});
|
}
|
}else{
|
uni.$u.toast(res.message)
|
}
|
},
|
|
async getQuestionsByIds(idList){
|
const res = await getExamListByIds({paperId: this.bank.paperId,questionIds: idList.map(i=>i.id)})
|
if(res.code == 200){
|
this.questionList = res.data.map(i=>{
|
i.content = JSON.parse(i.content)
|
return i
|
})
|
}else{
|
uni.$u.toast(res.message)
|
}
|
},
|
|
checkboxChange(n) {
|
console.log('change', n);
|
},
|
groupChange(n) {
|
if(this.currentA !== ''){
|
this.confirmAnswer()
|
}
|
},
|
radioChange(n) {
|
console.log('radioChange', n);
|
},
|
|
confirmAnswer(){
|
const data = {
|
answer: this.currentQ.questionType==2?this.currentB.join(','):this.currentA,
|
paperId: this.bank.paperId,
|
questionId: this.currentQ.id,
|
studentId: uni.getStorageSync('uid')
|
}
|
postExamAnswer(data).then(res=>{
|
if(res.code == 200){
|
this.currentQ.passed = res.data
|
// this.currentQ.exExerciseAnswer.passed = res.data.passed
|
this.currentQ.studentAnswer.answer = res.data.answer
|
// uni.$u.toast('答案已提交')
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
},
|
|
prevQ(){
|
if(this.curTotalIndex - 1>=0){
|
this.curTotalIndex--
|
if(this.curTotalIndex == 0){
|
this.getQuestionsByIds([this.idList[0]]).then(()=>{
|
// this.currentQ = this.questionList[this.questionList.length-1]
|
this.$set(this, 'currentQ', this.questionList[this.questionList.length-1])
|
this.showAnswer()
|
})
|
}else{
|
this.currentId = this.idList[this.curTotalIndex].id
|
if(this.questionList.find(i=>i.id == this.currentId)){
|
this.$set(this, 'currentQ', this.questionList.find(i=>i.id == this.currentId))
|
this.showAnswer()
|
}else{
|
const startIndex = Math.max(0, this.curTotalIndex - 19);
|
const curIdList = this.idList.slice(startIndex, this.curTotalIndex+1);
|
this.getQuestionsByIds(curIdList).then(()=>{
|
// this.currentQ = this.questionList[this.questionList.length-1]
|
this.$set(this, 'currentQ', this.questionList[this.questionList.length-1])
|
this.showAnswer()
|
})
|
}
|
}
|
}else{
|
uni.showToast({
|
title: '已经是第一题了',
|
duration: 1000
|
});
|
}
|
},
|
|
nextQ(){
|
if(this.curTotalIndex + 1<this.idList.length){
|
this.curTotalIndex++
|
this.currentId = this.idList[this.curTotalIndex].id
|
if(this.questionList.find(i=>i.id == this.currentId)){
|
this.$set(this, 'currentQ', this.questionList.find(i=>i.id == this.currentId))
|
this.showAnswer()
|
}else{
|
const curIdList = this.idList.slice(this.curTotalIndex,this.curTotalIndex + 20)
|
this.getQuestionsByIds(curIdList).then(()=>{
|
this.$set(this, 'currentQ', this.questionList[0])
|
// this.currentQ = this.questionList[0]
|
this.showAnswer()
|
})
|
}
|
}else{
|
uni.showToast({
|
title: '已经是最后一题了',
|
duration: 1000
|
});
|
}
|
},
|
|
showAnswer(){
|
if(this.currentQ.studentAnswer && this.currentQ.studentAnswer.answer){
|
if(this.currentQ.questionType == 2){
|
this.currentB = this.currentQ.studentAnswer.answer.split(',')
|
}else{
|
this.currentA = this.currentQ.studentAnswer.answer
|
}
|
}else{
|
this.currentB = []
|
this.currentA = ''
|
}
|
},
|
|
|
|
goBack(){
|
clearInterval(this.timerInterval);
|
const url = uni.getStorageSync("prevPage");
|
if(url){
|
uni.reLaunch({
|
url: url
|
});
|
} else{
|
uni.reLaunch({
|
url: '/pages/tabBar/firstPage/firstPage'
|
})
|
}
|
},
|
|
endExam(){
|
const t = this
|
uni.showModal({
|
title: '提示',
|
content: '交卷后将无法再次做题，是否继续？',
|
success: async function (res) {
|
if (res.confirm) {
|
const data = {
|
id: t.bank.id,
|
}
|
postEndExam(data).then(res=>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '本次考试结束',
|
duration: 1500
|
})
|
setTimeout(()=>{
|
const url = uni.getStorageSync("prevPage");
|
if(url){
|
if(url == '/pages/tabBar/firstPage/firstPage'){
|
uni.reLaunch({
|
url:'/pages/tabBar/firstPage/firstPage'
|
});
|
}else{
|
uni.navigateTo({
|
url: url
|
})
|
}
|
} else{
|
uni.reLaunch({
|
url: '/pages/tabBar/firstPage/firstPage'
|
})
|
}
|
},1500)
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
} else if (res.cancel) {
|
console.log('用户点击取消');
|
}
|
}
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
}
|
.barText{
|
margin-left: -20px;
|
flex: 1;
|
/* margin-left: 20px; */
|
text-align: center;
|
width: 85%;
|
font-size: 16px;
|
/* text-align: center; */
|
font-weight: 600;
|
}
|
.navBarBox .navBar .logo {
|
width: 82rpx;
|
height: 82rpx;
|
margin-right: 10rpx;
|
}
|
|
.panel{
|
height: 100vh;
|
width: 60vw;
|
background: #f2f2f2;
|
overflow-y: auto;
|
padding: 15px;
|
box-sizing: border-box;
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 15px;
|
grid-auto-rows: min-content;
|
|
&>view{
|
padding: 5px;
|
min-width: calc(20% - 12px);
|
border-radius: 4px;
|
text-align: center;
|
background: rgba(41,121,255,0);
|
border: 1px solid #fff;
|
color: #333;
|
background: #f2f2f2;
|
transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
|
cursor: pointer;
|
|
&:active {
|
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
|
&:after {
|
box-shadow: inset 0px -2px 5px rgb(255, 255, 255),
|
inset 0px 2px 5px rgba(0, 0, 0, 0.15);
|
}
|
}
|
|
}
|
|
.right-a{
|
background: rgba(41,121,255,.1);
|
border: 1px solid #2979ff;
|
color: #2979ff;
|
}
|
|
.wrong-a{
|
background: rgba(237,100,100,.1);
|
border: 1px solid #ed6464;
|
color: #ed6464;
|
}
|
}
|
|
.m-p-15{
|
width: 100%;
|
padding: 0 15px;
|
box-sizing: border-box;
|
|
.timer{
|
background: #fff;
|
width: auto;
|
margin: 10px auto;
|
padding: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 99px;
|
|
.timer-b{
|
margin-left: 5px;
|
display: flex;
|
align-items: center;
|
span:last-of-type{
|
font-size: 16px;
|
font-weight: bold;
|
color: #0f7ff9;
|
}
|
}
|
|
}
|
|
.top{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin: 20px 0;
|
|
.ind{
|
font-size: 16px;
|
font-weight: bold;
|
color: #2979ff
|
}
|
.panelBtn{
|
width: 25%;
|
margin: 0;
|
text-align: center;
|
padding: 4px 0;
|
border-radius: 4px;
|
color: #2979ff;
|
background: #f5f7fa;
|
border: 1px solid rgba(41,121,255,.4);
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1);
|
transition: box-shadow .25s ease !important;
|
}
|
.panelBtn:active{
|
background: #f5f7fa;
|
border: 1px solid rgba(41,121,255,1);
|
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
|
}
|
}
|
|
.questions{
|
width: 100%;
|
margin-top: 40px;
|
.title{
|
font-size: 16px;
|
margin-bottom: 20px;
|
}
|
.content{
|
padding-left: 10rpx;
|
|
.answers{
|
background: #ecf5ff;
|
padding: 10px;
|
&>view{
|
margin-bottom: 5px;
|
}
|
|
span{
|
font-weight: bolder;
|
}
|
.right{
|
color: #3c9cff
|
}
|
.wrong{
|
color: #e45656
|
}
|
}
|
}
|
}
|
}
|
.btns{
|
width: 100%;
|
position: fixed;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
z-index: 99;
|
bottom: 60px;
|
left: 0;
|
}
|
|
/deep/ .u-checkbox{
|
background: #fff;
|
padding: 10px;
|
box-sizing: border-box;
|
border-radius: 8px;
|
}
|
|
/deep/ .u-radio,.u-checkbox{
|
padding: 12px 10px;
|
box-sizing: border-box;
|
border-radius: 8px;
|
background: #f5f7fa;
|
border: 1px solid #fff;
|
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1);
|
transition: box-shadow .25s ease !important;
|
}
|
|
.myRadio{
|
/deep/ .picked{
|
border: 2px solid #2979ff;
|
|
.u-radio__icon-wrap,.u-checkbox__icon-wrap{
|
border-color: #fff !important;
|
span{
|
color: #fff !important;
|
}
|
}
|
span{
|
color: #2979ff
|
}
|
}
|
}
|
|
/deep/ .u-checkbox:active {
|
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
|
}
|
|
/deep/ .u-radio:active {
|
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
|
}
|
|
</style>
|
