<template>
|
<view class="page_bg">
|
<!-- #ifdef APP-PLUS -->
|
<view class="status_bar">
|
<view class="top_view"></view>
|
</view>
|
<!-- #endif -->
|
<view class="top_nav">
|
<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
|
<view class="cate">{{cardHidden ? pageTitle : '答题卡'}}</view>
|
<block v-if="!checkAnswer" @tap="collectQuestion">
|
<u-icon name="more-dot-fill" class="more_fun" @tap="collection = !collection"></u-icon>
|
<view class="collection_bg" v-if="collection">
|
<block v-if="questionList.length!=0 && vk.pubfn.isNull(questionList[currentIndex].star)">
|
<u-icon name="star" color="#fff" size="32"></u-icon>收藏本题
|
</block>
|
<block v-else>
|
<u-icon name="star-fill" color="#fff" size="32"></u-icon>已收藏本题
|
</block>
|
</view>
|
</block>
|
</view>
|
<view class="main">
|
<view class="exam_title">{{detail.title}}</view>
|
<pw-swiper ref="swiper" class="pw_swiper" :list="questionList" :dataIndex="currentIndex" @change="change">
|
<template v-slot:default="{item,index}">
|
<scroll-view scroll-y class="scroll_bg">
|
<view class="item_top">
|
<text class="item_type">{{qType(item.type)}}</text>
|
<text class="number"><text>{{index + 1}}</text> / {{questionList.length}}</text>
|
</view>
|
<mp-html class="item_body" :content="item.title"></mp-html>
|
<!-- 单选 -->
|
<view class="single" v-if="item.type == 1 || item.type == 3">
|
<view class="answer_item" v-for="(answer,a_index) in item.answerList"
|
:key="item._id + a_index" @tap="choose(a_index,answer.isRight,item,item.type)">
|
<view class="left_icon" :class="{'selected':a_index == answercard[item._id].a}">
|
{{ letter[a_index] }}
|
</view>
|
{{answer.content}}
|
</view>
|
</view>
|
|
<!-- 多选 -->
|
<view class="single" v-if="item.type == 2">
|
<view class="answer_item" v-for="(answer,a_index) in item.answerList"
|
:key="item._id + a_index" @tap="choose(a_index,answer.isRight,item,item.type)">
|
<view class="left_icon"
|
:class="{'selected':answercard[item._id].a && answercard[item._id].a.indexOf(a_index)!=-1}">
|
{{ letter[a_index] }}
|
</view>
|
{{answer.content}}
|
</view>
|
</view>
|
|
<view class="answer_check" v-if="checkAnswer">
|
<view class="check_title">答案解析</view>
|
<view class="right_answer">正确答案：{{rightAnswer(item)}}</view>
|
<mp-html class="check_detail" :content="item.analysis"></mp-html>
|
</view>
|
</scroll-view>
|
</template>
|
</pw-swiper>
|
<view class="end_nav" :class="{end_nav_show: !cardHidden}">
|
<block v-if="cardHidden">
|
<view class="btn" :class="{cant: currentIndex == 0}" @tap="changeIndex('before')">
|
上一题
|
</view>
|
<view class="icon">
|
<image src="/static/local/16403089344736532213.png" class="image_8" />
|
<view class="text" @tap="cardHidden = false">答题卡</view>
|
</view>
|
<view class="icon" v-if="checkAnswer==false" @tap="checkAnswer = true">
|
<image src="/static/local/16403089465091811020.png" class="image_8" />
|
<view class="text">答案解析</view>
|
</view>
|
<view class="icon" v-else @tap="collectQuestion">
|
<block v-if="questionList.length!=0 && vk.pubfn.isNull(questionList[currentIndex].star)">
|
<u-icon name="star" color="#000" size="42"></u-icon>
|
<view class="text">收藏</view>
|
</block>
|
<block v-else>
|
<u-icon name="star-fill" color="#000" size="42"></u-icon>
|
<view class="text">已收藏</view>
|
</block>
|
</view>
|
<block v-if="questionList && currentIndex < questionList.length - 1">
|
<view class="btn" @tap="changeIndex('after')">下一题</view>
|
</block>
|
<block v-else>
|
<view class="btn" @tap="sendExam()">交卷</view>
|
</block>
|
</block>
|
<block v-else>
|
<scroll-view scroll-y class="card_bg">
|
<view class="card_top">
|
<text class="ready"></text>已选
|
<text class="not_ready"></text>未选
|
</view>
|
<view class="card_main">
|
<!-- 单选 -->
|
<block v-if="single">
|
<view class="title">单选题</view>
|
<view class="item_bg" v-for="item in questionList" :key="item._id" v-if="item.type == 1"
|
@tap="cardHidden=true;currentIndex=item.no-1">
|
<view class="item" :class="{selected: answercard[item._id].r != 0}">
|
{{item.no}}
|
</view>
|
</view>
|
</block>
|
<!-- 多选 -->
|
<block v-if="more">
|
<view class="title">多选题</view>
|
<view class="item_bg" v-for="item in questionList" :key="item._id" v-if="item.type == 2"
|
@tap="cardHidden=true;currentIndex=item.no-1">
|
<view class="item" :class="{selected: answercard[item._id].r != 0}">
|
{{item.no}}
|
</view>
|
</view>
|
</block>
|
<!-- 判断 -->
|
<block v-if="judge">
|
<view class="title">判断题</view>
|
<view class="item_bg" v-for="item in questionList" :key="item._id" v-if="item.type == 3"
|
@tap="cardHidden=true;currentIndex=item.no-1">
|
<view class="item" :class="{selected: answercard[item._id].r != 0}">
|
{{item.no}}
|
</view>
|
</view>
|
</block>
|
</view>
|
</scroll-view>
|
<view class="save_btn" @tap="sendExam()">交卷</view>
|
</block>
|
</view>
|
</view>
|
|
<u-modal v-model="modalShow" :show-title="false" :content="content" :show-cancel-button="true"
|
@confirm="sendExamAnswer">
|
</u-modal>
|
<u-toast ref="uToast" />
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
typeId: '',
|
pageTitle: '',
|
detail: [],
|
questionList: [],
|
answercard: {}, //留有最新结果的答题版
|
answercardNew: {}, //本次答的题目，用于统计
|
// 各类问题
|
single: false,
|
more: false,
|
judge: false,
|
|
currentIndex: 0,
|
cardHidden: true,
|
checkAnswer: false,
|
letter: ['A', "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
|
"T", "U", "V", 'W', "X", "Y", "Z"
|
],
|
// 保存提示模态框
|
modalShow: false,
|
content: '',
|
collection: false,
|
outWay: 1 // 退出方式 0左上角退出 1交卷退出
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
computed: {
|
qType() {
|
return (type) => {
|
switch (type) {
|
case '1':
|
return '单选题'
|
case '2':
|
return '多选题'
|
case '3':
|
return '判断题'
|
}
|
}
|
},
|
rightAnswer() {
|
return (item) => {
|
let str = ''
|
for (let k in item.answerList) {
|
if (item.answerList[k].isRight) str += ` ${this.letter[k]}`
|
}
|
return str
|
}
|
}
|
},
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
// 当前显示标题
|
this.typeId = options.id
|
this.pageTitle = options.pageTitle
|
if (options.check) this.checkAnswer = true
|
this.getInfo(options.id, options.pageTitle)
|
},
|
pageBack() {
|
if (!this.cardHidden) {
|
this.cardHidden = true
|
return
|
}
|
this.saveExam()
|
},
|
// 获取信息
|
getInfo(id, tit) {
|
let str = ''
|
switch (tit) {
|
case '历年真题':
|
str = 'client/quest-bank/kh/real-exam/getOneRealExam'
|
break
|
case '章节练习':
|
str = 'client/quest-bank/kh/chapter/getOneChapter'
|
break
|
case '每日一练':
|
str = 'client/quest-bank/kh/everyday/getOneEveryDay'
|
break
|
case '模拟试题':
|
str = 'client/quest-bank/kh/simulation/getOneSimulation'
|
break
|
case '会员练习':
|
str = 'client/quest-bank/kh/vip/getOneVip'
|
break
|
}
|
vk.callFunction({
|
url: str,
|
data: { id, need_user_info: true },
|
success(res) {
|
that.detail = res.data
|
that.questionList = res.data.questions
|
let temp = {}
|
let num = 1
|
let obj = vk.pubfn.arrayToJson(res.data.history, "question_id");
|
res.data.questions.forEach(v => {
|
v.no = num
|
num++
|
if (v.type == 1) that.single = true
|
if (v.type == 2) that.more = true
|
if (v.type == 3) that.judge = true
|
if (obj != null && obj[v._id] != null) {
|
temp[v._id] = { a: obj[v._id].answer, r: obj[v._id].is_right }
|
} else {
|
temp[v._id] = { a: null, r: 0 }
|
}
|
})
|
that.answercard = temp
|
}
|
})
|
},
|
choose(index, right, item, type) {
|
let res = this.answercard[item._id]
|
//单选 判断
|
if (type == 1 || type == 3) {
|
res = { a: index, r: right ? 1 : 2 }
|
} else if (type == 2) {
|
if (res.a == null) {
|
//第一次选择
|
res.a = [index]
|
} else {
|
//判断是选中还是取消
|
const find_index = res.a.indexOf(index)
|
if (find_index > -1) {
|
if (res.a.length < 2) {
|
this.$refs.uToast.show({
|
title: '请至少选择一个答案',
|
type: 'warning',
|
duration: 1000
|
})
|
return
|
}
|
res.a.splice(find_index, 1)
|
} else {
|
res.a.push(index)
|
}
|
}
|
//判断答案是否正确
|
let my_choice = res.a.sort(function(a, b) {
|
return a - b
|
}).join(',')
|
let answerArr = []
|
item.answerList.forEach((item, index) => {
|
if (item.isRight) answerArr.push(index)
|
});
|
let answer_str = answerArr.sort(function(a, b) {
|
return a - b
|
}).join(',')
|
res.r = my_choice == answer_str ? 1 : 2
|
}
|
this.answercard[item._id] = res
|
this.answercardNew[item._id] = res
|
},
|
change(e) {
|
this.collection = false
|
this.currentIndex = e
|
},
|
changeIndex(type) {
|
if (type == 'before' && this.currentIndex > 0) {
|
this.$refs.swiper.goPrevious()
|
return
|
}
|
if (type == 'after' && this.currentIndex < this.detail.questions.length - 1) {
|
this.$refs.swiper.goNext()
|
return
|
}
|
},
|
// 收藏题目
|
collectQuestion() {
|
let item = this.questionList[this.currentIndex]
|
vk.callFunction({
|
url: 'client/quest-bank/kh/collection/saveInCollection',
|
title: '收藏中...',
|
data: {
|
qid: item._id,
|
star: vk.pubfn.isNull(item.star) ? 0 : 1,
|
need_user_info: true,
|
},
|
success(res) {
|
that.$refs.uToast.show({
|
title: res.msg,
|
type: 'success',
|
duration: 1200
|
})
|
that.$forceUpdate()
|
if (res.status == 0) {
|
that.questionList[that.currentIndex].star = {}
|
return
|
}
|
that.questionList[that.currentIndex].star = { id: res.id }
|
}
|
})
|
},
|
// 退出前弹框提示
|
saveExam() {
|
this.content = '退出并保存当前进度么？'
|
this.modalShow = true
|
this.outWay = 0
|
},
|
// 交卷提示
|
sendExam() {
|
this.content = '确认交卷么？'
|
this.modalShow = true
|
this.outWay = 1
|
},
|
// 交卷
|
sendExamAnswer() {
|
let cateInfo = vk.getStorageSync('bank_cate');
|
let time = vk.pubfn.timeFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
|
// 只更新本次选择过的答案
|
vk.callFunction({
|
url: 'client/quest-bank/kh/saveAnswer',
|
title: '提交中...',
|
data: {
|
answercard: that.answercardNew,
|
typeId: that.typeId,
|
need_user_info: true,
|
cate_id: cateInfo ? cateInfo.id : null
|
},
|
success(res) {
|
// 退出方式为点击左上角
|
if (that.outWay == 0) {
|
that.$refs.uToast.show({
|
title: '保存成功',
|
type: 'success',
|
duration: 1200,
|
url: '/pages/question-bank/index',
|
isTab: true
|
})
|
uni.$emit('bankUpdate');
|
return
|
}
|
// 退出方式为点交卷
|
let result = {
|
answerCardNow: that.answercard,
|
questions: that.questionList
|
}
|
vk.setStorageSync('exam-result', result);
|
|
that.$refs.uToast.show({
|
title: '交卷成功',
|
type: 'success',
|
duration: 1200,
|
url: '/pages/question-bank/exam-result',
|
params: {
|
id: that.typeId,
|
type: that.pageTitle,
|
title: that.detail.title,
|
time
|
}
|
})
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
background-color: #ffffff;
|
width: 100%;
|
height: 100vh;
|
overflow-y: auto;
|
|
.status_bar,
|
.top_view {
|
background-color: #FFFFFF;
|
}
|
|
.top_nav {
|
padding-bottom: 24rpx;
|
color: rgb(51, 51, 51);
|
font-size: 34rpx;
|
line-height: 41rpx;
|
white-space: nowrap;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.1);
|
border-radius: 0px 0px 30rpx 30rpx;
|
height: 90rpx;
|
position: relative;
|
|
.image_1 {
|
left: 21rpx;
|
top: 27rpx;
|
width: 19rpx;
|
height: 35rpx;
|
position: absolute;
|
}
|
|
.cate {
|
width: 100%;
|
padding: 20rpx 0;
|
color: rgb(51, 51, 51);
|
font-size: 34rpx;
|
line-height: 41rpx;
|
white-space: nowrap;
|
text-align: center;
|
}
|
|
.more_fun {
|
position: absolute;
|
right: 41rpx;
|
top: 27rpx;
|
}
|
|
.collection_bg {
|
position: absolute;
|
right: 21rpx;
|
top: 110rpx;
|
width: 188rpx;
|
height: 68rpx;
|
background: #515151;
|
box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.12);
|
opacity: 1;
|
border-radius: 12rpx;
|
font-size: 24rpx;
|
color: #FFFFFF;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.u-icon {
|
margin-right: 6rpx;
|
}
|
}
|
}
|
|
.main {
|
height: calc(100vh - 188rpx);
|
display: flex;
|
flex-direction: column;
|
|
.exam_title {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #999999;
|
padding: 36rpx 20rpx;
|
}
|
|
.pw_swiper {
|
flex: 1;
|
|
.scroll_bg {
|
height: calc(100vh - 388rpx);
|
}
|
|
.item_top {
|
font-size: 24rpx;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 30rpx;
|
|
.item_type {
|
display: inline-block;
|
padding: 5rpx 10rpx;
|
background: linear-gradient(163deg, #FDD303 0%, #FF960C 100%);
|
border-radius: 4rpx;
|
}
|
|
.number {
|
color: #999999;
|
display: flex;
|
align-items: center;
|
|
text {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #333333;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
|
.item_body {
|
font-size: 32rpx;
|
line-height: 52rpx;
|
color: #333333;
|
padding: 28rpx 30rpx;
|
min-height: 10vh;
|
}
|
|
.answer_item {
|
display: flex;
|
font-size: 32rpx;
|
align-items: center;
|
padding: 30rpx;
|
|
.left_icon {
|
width: 72rpx;
|
height: 72rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 2rpx solid #999999;
|
border-radius: 50%;
|
font-size: 34rpx;
|
font-weight: bold;
|
color: #333333;
|
margin-right: 30rpx;
|
}
|
|
.selected {
|
color: #FFFFFF;
|
background: #FF960C;
|
border-color: #FF960C;
|
box-shadow: 0px 3rpx 6rpx rgba(255, 150, 12, 0.26);
|
}
|
}
|
|
.answer_check {
|
border-top: 1px solid #F0F0F0;
|
padding: 40rpx 30rpx;
|
margin-top: 20rpx;
|
|
.check_title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #140005;
|
margin-bottom: 30rpx;
|
}
|
|
.right_answer {
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #333333;
|
margin-bottom: 32rpx;
|
}
|
}
|
}
|
|
.end_nav {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
background: rgba(255, 255, 255, 0.39);
|
box-shadow: 0px -6rpx 16rpx rgba(0, 0, 0, 0.08);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 25rpx 20rpx;
|
background-color: #FFFFFF;
|
|
.btn {
|
color: #FFFFFF;
|
width: 164rpx;
|
height: 66rpx;
|
background-color: #333333;
|
border-radius: 33rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.cant {
|
background-color: #D1D1D1;
|
}
|
|
.icon {
|
text-align: center;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #333333;
|
|
.image_8 {
|
width: 42rpx;
|
height: 42rpx;
|
}
|
|
.u-icon {
|
margin-bottom: 6rpx;
|
}
|
}
|
|
.card_bg {
|
height: 100%;
|
width: 100%;
|
|
.card_top {
|
display: flex;
|
align-items: center;
|
margin-bottom: 65rpx;
|
|
.ready,
|
.not_ready {
|
display: inline-block;
|
width: 44rpx;
|
height: 44rpx;
|
border-radius: 50%;
|
margin: 0 22rpx;
|
}
|
|
.ready {
|
background: rgba(255, 150, 12, 1);
|
box-shadow: 0px 3rpx 6rpx rgba(255, 150, 12, 1);
|
}
|
|
.not_ready {
|
border: 2rpx solid #999999;
|
margin-left: 60rpx;
|
}
|
}
|
|
.card_main {
|
display: flex;
|
flex-wrap: wrap;
|
|
.title {
|
font-size: 30rpx;
|
font-weight: bold;
|
margin-bottom: 28rpx;
|
width: 100%;
|
}
|
|
.item_bg {
|
width: 20%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 36rpx;
|
|
.item {
|
width: 72rpx;
|
height: 72rpx;
|
background: rgba(255, 255, 255, 0.39);
|
border: 2rpx solid #999999;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-left: 20rpx;
|
}
|
|
.selected {
|
color: #FFFFFF;
|
background: #FF960C;
|
border-color: #FF960C;
|
box-shadow: 0px 3rpx 6rpx rgba(255, 150, 12, 0.26);
|
}
|
}
|
}
|
}
|
|
.save_btn {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
height: 98rpx;
|
background: #333333;
|
color: #FFFFFF;
|
line-height: 98rpx;
|
text-align: center;
|
}
|
}
|
|
.end_nav_show {
|
height: calc(100vh - 200rpx);
|
box-shadow: none;
|
}
|
}
|
}
|
</style>
|
