<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"
|
@change="checkboxChange"
|
>
|
<u-checkbox
|
:customStyle="{marginBottom: '20px'}"
|
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" >
|
<u-radio
|
:customStyle="{marginBottom: '20px'}"
|
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: 90%;margin: 30px auto" v-if="currentQ.exExerciseAnswer && currentQ.exExerciseAnswer.answer" type="primary" shape="circle" size="small" text="确认答案" @click="confirmAnswer"></u-button>
|
<view class="answers" v-if="currentQ.exExerciseAnswer && (currentQ.exExerciseAnswer.passed==0||currentQ.exExerciseAnswer.passed==1)">
|
<view>你的答案：
|
<span v-if="currentQ.questionType==2" :class="currentQ.answer == currentQ.exExerciseAnswer.answer.join(',')?'right':'wrong'">{{currentQ.exExerciseAnswer.answer.join(',')}}</span>
|
<span v-else :class="currentQ.answer == currentQ.exExerciseAnswer.answer?'right':'wrong'">{{currentQ.exExerciseAnswer.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" style="width: 30%" type="primary" shape="circle" size="small" text="保存退出" @click="goBack"></u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {getQuestionIdList,getQuestionByIds,postExerciseAnswer} from '../../../api/wearhouse.js'
|
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
statusBarHeight: 0,
|
bank: {},
|
idList: [],
|
questionList: [],
|
currentIndex: 0,
|
currentQ: {}
|
}
|
},
|
onReady(){
|
},
|
onLoad(e) {
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
this.bank = e.bank && JSON.parse(decodeURIComponent(e.bank));
|
this.currentIndex = this.bank.exerciseCount
|
console.log(this.bank,this.currentIndex,66)
|
this.getQuestionIds(this.bank.id)
|
},
|
onShow(){
|
|
},
|
mounted() {
|
|
},
|
computed: {
|
|
},
|
beforeUnmount() {
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
methods: {
|
async getQuestionIds(id){
|
const res = await getQuestionIdList({bankId: id})
|
if(res.code == 200){
|
let list = res.data || []
|
if(list.length>0){
|
this.idList = list
|
getQuestionByIds({questionIds: list.map(i=>i.id)}).then(re=>{
|
if(re.code == 200){
|
this.questionList = re.data.map(i=>{
|
i.content = JSON.parse(i.content)
|
if(i.questionType == 2){
|
if(i.exExerciseAnswer.answer){
|
i.exExerciseAnswer.answer = i.exExerciseAnswer.answer.split(',')
|
}
|
}
|
return i
|
})
|
this.currentQ = this.questionList[this.currentIndex]
|
// this.currentQ.content = JSON.parse(this.currentQ.content)
|
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,
|
bankId: this.bank.id,
|
questionId: this.currentQ.id
|
}
|
postExerciseAnswer(data).then(res=>{
|
if(res.code == 200){
|
this.currentQ.exExerciseAnswer.passed = res.data.passed
|
}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
|
});
|
}
|
console.log(this.currentQ,'current')
|
},
|
|
nextQ(){
|
if(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')
|
},
|
|
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){
|
if(url == '/pages/tabBar/wearhouse/wearhouse'){
|
uni.reLaunch({
|
url:'/pages/tabBar/wearhouse/wearhouse'
|
});
|
}else{
|
uni.navigateTo({
|
url: url
|
})
|
}
|
} else{
|
uni.reLaunch({
|
url: '/pages/tabBar/wearhouse/wearhouse'
|
})
|
}
|
}
|
}
|
};
|
</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: 5px 10px;
|
|
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;
|
}
|
</style>
|
