<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">
|
<u-divider
|
:text="'第'+ (currentIndex+1) +'题'"
|
textColor="#2979ff"
|
lineColor="#2979ff"
|
textSize="16"
|
style="margin: 40px 0"
|
></u-divider>
|
<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="currentQ.exExerciseAnswer.answer"
|
placement="column"
|
: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"
|
>
|
</u-checkbox>
|
</u-checkbox-group>
|
<u-radio-group v-model="currentQ.exExerciseAnswer.answer" 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"
|
>
|
</u-radio>
|
</u-radio-group>
|
<u-button style="width: 80%;margin: 30px auto"
|
v-if="viewType ==1 && (currentQ.exExerciseAnswer && currentQ.exExerciseAnswer.answer && (typeof currentQ.exExerciseAnswer.answer == String?currentQ.exExerciseAnswer.answer !=='':currentQ.exExerciseAnswer.answer.length>0))"
|
type="primary" shape="circle" text="确认答案"
|
@click="confirmAnswer">
|
</u-button>
|
<view class="answers" v-if="viewType == 2 && currentQ.studentAnswer && currentQ.studentAnswer.answer">
|
<view>你的答案：
|
<span v-if="currentQ.questionType==2" :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 style="width: 30%" type="error" shape="circle" plain size="small" text="查看答案" @click="showA"></u-button>-->
|
<u-button v-if="currentIndex<questionList.length - 1" style="width: 30%" type="error" shape="circle" size="small" text="下一题" @click="nextQ"></u-button>
|
<u-button v-if="currentIndex==questionList.length - 1 && viewType == 1" style="width: 30%" type="primary" shape="circle" size="small" text="保存退出" @click="endExam"></u-button>
|
<u-button v-if="currentIndex==questionList.length - 1 && viewType == 2" style="width: 30%" type="primary" shape="circle" size="small" text="退出" @click="goBack"></u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getExamIdIdList,
|
getExamListByIds, postExamAnswer,postEndExam
|
} from '../../../api/wearhouse.js'
|
import Vue from 'vue'
|
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
statusBarHeight: 0,
|
bank: {},
|
idList: [],
|
questionList: [],
|
currentIndex: 0,
|
currentQ: {},
|
currentA: '',
|
currentB: [],
|
viewType: null
|
}
|
},
|
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.getQuestionIds(this.bank.paperId)
|
},
|
onShow(){
|
|
},
|
mounted() {
|
|
},
|
computed: {
|
|
},
|
beforeUnmount() {
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
methods: {
|
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
|
getExamListByIds({paperId: id,questionIds: list.map(i=>i.id)}).then(re=>{
|
if(re.code == 200){
|
this.questionList = re.data.map(i=>{
|
i.content = JSON.parse(i.content)
|
Vue.set(i,'passed',null)
|
if(i.studentAnswer){
|
i.exExerciseAnswer.answer = i.studentAnswer.answer
|
i.exExerciseAnswer.passed = i.studentAnswer.passed
|
}
|
if(i.questionType == 2){
|
if(i.exExerciseAnswer.answer){
|
i.exExerciseAnswer.answer = i.exExerciseAnswer.answer.split(',')
|
}
|
}
|
return i
|
})
|
this.currentQ = this.questionList[this.currentIndex]
|
console.log(this.currentQ,'当前问题')
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
}else{
|
this.idList = []
|
uni.showToast({
|
title: '本题库暂无题目',
|
duration: 1000
|
});
|
}
|
}else{
|
uni.$u.toast(res.message)
|
}
|
},
|
checkboxChange(n) {
|
console.log('change', n);
|
},
|
groupChange(n) {
|
console.log('groupChange', n);
|
},
|
radioChange(n) {
|
console.log('radioChange', n);
|
},
|
|
confirmAnswer(){
|
const data = {
|
answer: this.currentQ.questionType==2?this.currentQ.exExerciseAnswer.answer.join(','):this.currentQ.exExerciseAnswer.answer,
|
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
|
uni.$u.toast('答案已提交')
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
},
|
|
prevQ(){
|
if(this.currentIndex - 1>=0){
|
this.currentIndex--
|
this.currentQ = this.questionList[this.currentIndex]
|
}else{
|
uni.showToast({
|
title: '已经是第一题了',
|
duration: 1000
|
});
|
}
|
},
|
|
nextQ(){
|
if(this.currentQ.passed==null && this.currentQ.exExerciseAnswer.passed == null){
|
uni.$u.toast('请先完成当前题目')
|
return
|
}
|
if(this.currentIndex + 1<this.questionList.length){
|
this.currentIndex++
|
this.currentQ = this.questionList[this.currentIndex]
|
}else{
|
uni.showToast({
|
title: '已经是最后一题了',
|
duration: 1000
|
});
|
}
|
console.log(this.currentQ,'current')
|
},
|
|
endExam(){
|
if(this.currentQ.passed==null && this.currentQ.exExerciseAnswer.passed == null){
|
uni.$u.toast('请先完成当前题目')
|
return
|
}
|
const data = {
|
id: this.bank.id,
|
// paperId: this.bank.paperId,
|
// studentId: uni.getStorageSync('uid')
|
}
|
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)
|
}
|
})
|
},
|
|
showA(){
|
uni.showModal({
|
title: '正确答案',
|
content: this.currentQ.answer,
|
showCancel: false,
|
success: function (res) {
|
if (res.confirm) {
|
console.log('用户点击确定');
|
}
|
}
|
});
|
},
|
|
goBack(){
|
const url = uni.getStorageSync("prevPage");
|
if(url){
|
uni.reLaunch({
|
url: url
|
});
|
} else{
|
uni.reLaunch({
|
url: '/pages/tabBar/firstPage/firstPage'
|
})
|
}
|
}
|
}
|
};
|
</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;
|
}
|
|
.m-p-15{
|
width: 100%;
|
padding: 0 15px;
|
box-sizing: border-box;
|
|
.top{
|
text-align: center;
|
margin: 20rpx 0;
|
font-weight: bolder;
|
}
|
|
.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: 7px 7px 15px rgba(55, 84, 170, .15),
|
-7px -7px 20px rgba(255, 255, 255, 1),
|
inset 0px 0px 4px rgba(255, 255, 255, .2),
|
inset 7px 7px 15px rgba(55, 84, 170, 0),
|
inset -7px -7px 20px rgba(255, 255, 255, 0),
|
0px 0px 4px rgba(255, 255, 255, 0) !important;
|
transition: box-shadow .25s ease !important;
|
}
|
|
/deep/ .u-checkbox:active {
|
box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
|
-7px -7px 20px rgba(255, 255, 255, 1),
|
inset 0px 0px 4px rgba(255, 255, 255, 0),
|
inset 7px 7px 15px rgba(55, 84, 170, .15),
|
inset -7px -7px 20px rgba(255, 255, 255, 1),
|
0px 0px 4px rgba(255, 255, 255, .2) !important;
|
}
|
|
/deep/ .u-radio:active {
|
box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
|
-7px -7px 20px rgba(255, 255, 255, 1),
|
inset 0px 0px 4px rgba(255, 255, 255, 0),
|
inset 7px 7px 15px rgba(55, 84, 170, .15),
|
inset -7px -7px 20px rgba(255, 255, 255, 1),
|
0px 0px 4px rgba(255, 255, 255, .2) !important;
|
}
|
|
</style>
|
