|
|
|
|
<template>
|
|
|
|
|
<view class="content">
|
|
|
|
|
<view class="flex ai-c jc-c">
|
|
|
|
|
<view class="flex type_box jc-sb ai-c">
|
|
|
|
|
<view class="type_item" v-for="(item,index) of tabsList" :key="index" :class="tCurrent==item.value?'checked':'unchecked'" @tap="sectionChange(item.value)">{{item.label}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<swiper class="swiper mt20" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true" @change="onChange" @animationfinish="onAnimationfinish" @touchend="touchEnd" >
|
|
|
|
|
<swiper-item v-for="(quesItem,quesIndex) in swiperList" :key="quesIndex">
|
|
|
|
|
<scroll-view scroll-y="true" class="swiper-scroll">
|
|
|
|
|
<view>
|
|
|
|
|
<view class="m14lr">
|
|
|
|
|
<text class="tag_box">{{getQuestType(quesItem.type)}}</text>
|
|
|
|
|
<text class="fs18">{{quesItem.question}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList"
|
|
|
|
|
:key="item.op" @tap="answerQues(item.opValue,index)">
|
|
|
|
|
<template v-if="item.opDesc">
|
|
|
|
|
<template
|
|
|
|
|
v-if="quesItem.clickAnswer&&quesItem.trueAnswer.includes(item.opValue)">
|
|
|
|
|
<u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="32"></u-icon>
|
|
|
|
|
</template>
|
|
|
|
|
<template
|
|
|
|
|
v-else-if="quesItem.clickAnswer&&quesItem.clickAnswer.includes(item.opValue)&&!quesItem.trueAnswer.includes(item.opValue)">
|
|
|
|
|
<u-icon class="mr15" name="close-circle-fill" color="red" size="32"></u-icon>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="!item.chooseOption">
|
|
|
|
|
<view class="option_item">{{item.op}}</view>
|
|
|
|
|
</template>
|
|
|
|
|
<text class="fs18">{{item.opDesc}}</text>
|
|
|
|
|
</template>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="m14lr mt30"
|
|
|
|
|
v-if="quesItem.clickAnswer&&!quesItem.trueAnswer.includes(quesItem.clickAnswer) || tCurrent===1">
|
|
|
|
|
<view class="answer_box">
|
|
|
|
|
<text class="fs18 fw600 cor-000">答案:{{getRightOp(quesItem.trueAnswer)}}</text>
|
|
|
|
|
<view class="fs18 cor-000" style="text-indent:2em;"> {{quesItem.bestAnswer}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</swiper-item>
|
|
|
|
|
</swiper>
|
|
|
|
|
<view class="wp100 flex jc-sb ai-c p14 bc-fff" v-if="isShowAll" style="position: fixed;bottom: 0;left: 0;">
|
|
|
|
|
<view style="width: 220rpx;">
|
|
|
|
|
<view v-if="type==='practice'" style="width: 220rpx;height: 80rpx;"></view>
|
|
|
|
|
<view v-else class="btn" style="text-align: center;" @tap="submitPaper">
|
|
|
|
|
<u-count-down ref="countDown_1" :time=" 1*60*60 * 1000" format="HH:mm:ss" @change="timeChange"></u-count-down>
|
|
|
|
|
<text>交卷</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center flex jc-c ai-c" style="flex-direction: column;" @tap="toCollect">
|
|
|
|
|
<u-icon name="star-fill" v-if="questionList[topicIndex].isCollect" color="rgb(249,236,141)" size="24"></u-icon>
|
|
|
|
|
<u-icon name="star" v-else size="24"></u-icon>
|
|
|
|
|
<text class="cor-666">{{questionList[topicIndex].isCollect?'已收藏':'收藏'}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<view style="color: #00B74F;">{{rightList.length}}</view>
|
|
|
|
|
<text class="cor-666">答对</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<view style="color: #FF6E02;">{{wrongList.length}}</view>
|
|
|
|
|
<text class="cor-666">答错</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center" @tap="popupShow=!popupShow">
|
|
|
|
|
<view><text class="cor-333">{{topicIndex+1}}</text><text style="color:#999;">/{{questionList.length}}</text></view>
|
|
|
|
|
<text class="cor-666">题板</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else class="wp100 p14" style="position: fixed;bottom: 30rpx;left: 0;">
|
|
|
|
|
<button class="vip_btn" @click="toVip">立即查看全部题目</button>
|
|
|
|
|
</view>
|
|
|
|
|
<u-modal :show="tipShow">
|
|
|
|
|
<view class="relative wp100">
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<text>{{title}}</text>
|
|
|
|
|
<view class="mt20">{{content}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="position: absolute;right:0px;top:0" @tap="cancel">
|
|
|
|
|
<u-icon name="close-circle-fill" color="rgb(204,204,204)" size="24"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<template #confirmButton>
|
|
|
|
|
<view class="p10" >
|
|
|
|
|
<u-button :customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx',color:'#fff',backgroundColor:'#05C341'}" @click="toResult">查看练题结果</u-button>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
</u-modal>
|
|
|
|
|
<u-modal :show="isSubmit">
|
|
|
|
|
<view class="wp100">
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<text>确认交卷</text>
|
|
|
|
|
<view class="mt20 flex ai-c jc-sb">
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<text style="color:#FF6E02">{{questionList.length-rightList.length-wrongList.length}}</text>
|
|
|
|
|
<view class="cor-333">未答题数</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<u-count-down ref="countDown_3" class="balckColor" :time="1*60*60 * 1000" format="HH:mm:ss"></u-count-down>
|
|
|
|
|
<view>剩余时间</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<text style="color:#333">{{(rightList.length/questionList.length * 100).toFixed(0)}}</text>
|
|
|
|
|
<view class="cor-333">考试得分</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<template #confirmButton>
|
|
|
|
|
<view class="p10" >
|
|
|
|
|
<u-button :customStyle="{width:'45%',marginRight:'10px',height:'68rpx',lineHeight:'68rpx',borderRadius:'34rpx',color:'#666',border:'1px solid #666',display:'inline-block'}" @click="continueExam">继续考试</u-button>
|
|
|
|
|
<u-button :customStyle="{width:'45%',marginLeft:'10px',height:'68rpx',lineHeight:'68rpx',borderRadius:'34rpx',color:'#fff',backgroundColor:'#05C341',display:'inline-block'}" @click="toSubmit">现在交卷</u-button>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
</u-modal>
|
|
|
|
|
<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
|
|
|
|
|
<view>
|
|
|
|
|
<view class="wp100 flex jc-sb p14 bc-fff">
|
|
|
|
|
<view style="width: 220rpx;">
|
|
|
|
|
<view v-if="type==='practice'" style="width: 220rpx;height: 80rpx;"></view>
|
|
|
|
|
<view v-else class="btn" style="text-align: center;" @tap="submitPaper">
|
|
|
|
|
<u-count-down ref="countDown_2" :time="1 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
|
|
|
|
|
<text>交卷</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center flex jc-c ai-c" style="flex-direction: column;" @tap="toCollect">
|
|
|
|
|
<u-icon name="star-fill" v-if="questionList[topicIndex].isCollect" color="rgb(249,236,141)" size="24"></u-icon>
|
|
|
|
|
<u-icon name="star" v-else size="24"></u-icon>
|
|
|
|
|
<text class="cor-666">{{questionList[topicIndex].isCollect?'已收藏':'收藏'}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<view style="color: #00B74F;">{{rightList.length}}</view>
|
|
|
|
|
<text class="cor-666">答对</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<view style="color: #FF6E02;">{{wrongList.length}}</view>
|
|
|
|
|
<text class="cor-666">答错</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="text-center" @tap="popupShow=!popupShow">
|
|
|
|
|
<view><text class="cor-333">{{topicIndex+1}}</text><text style="color:#999;">/{{questionList.length}}</text></view>
|
|
|
|
|
<text class="cor-666">题板</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="flex ai-c jc-fs p14" style="flex-wrap: wrap;max-height: 400px;overflow-y: scroll;">
|
|
|
|
|
<view v-for="(item,index) of questionList" :key="index" style="width:20%;" class="flex ai-c jc-c" @tap="chooseQueston(index)">
|
|
|
|
|
<view class="tCircle mb10" :class="{
|
|
|
|
|
'active':index == topicIndex,
|
|
|
|
|
'success':rightList.includes(item.questionId),
|
|
|
|
|
'error':wrongList.includes(item.questionId)
|
|
|
|
|
}">
|
|
|
|
|
{{index+1}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</u-popup>
|
|
|
|
|
<u-popup :show="showVip" mode="bottom" :closeOnClickOverlay="true" :round="16" @close="showVip=false">
|
|
|
|
|
<view class="p14" style="z-index: 9;">
|
|
|
|
|
<view class="wp100 flex ai-c jc-sb">
|
|
|
|
|
<text class="fs30 fw600 cor-000">VIP题库</text>
|
|
|
|
|
<u-icon name="close" color="#c2c2c2" size="20" @tap="showVip=false"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="fs16 cor-666">精准刷题，更高效</text>
|
|
|
|
|
<view style="width:100%;height: 110rpx;background-image: url(../../static/image/practice/vip_question.png);background-size: 100% 100%;" class="mt15 relative">
|
|
|
|
|
<view style="position: absolute;left:0,top:0;height: 110rpx;" class="wp100 flex jc-c ai-c">
|
|
|
|
|
<text class="fs16" style="color: #994800;">科一+科四精简500题</text>
|
|
|
|
|
</view>
|
|
|
|
|
<image style="width: 65rpx;height: 65rpx; position: absolute;right: 20px;top: -5px;" src="../../static/image/practice/vip_include.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="width:100%;height: 110rpx;background-image: url(../../static/image/practice/vip_test.png);background-size: 100% 100%;z-index: 9;" class="mt15 relative">
|
|
|
|
|
<view style="position: absolute;left:0,top:0;height: 110rpx;" class="wp100 flex jc-c ai-c">
|
|
|
|
|
<text class="fs16" style="color: #994800;">科一+科四考前密卷2套</text>
|
|
|
|
|
</view>
|
|
|
|
|
<image style="width: 65rpx;height: 65rpx; position: absolute;right: 20px;top: -5px;" src="../../static/image/practice/vip_include.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="height: 528rpx;width: 100%;background-image: url(../../static/image/practice/vip_bg.png);background-size: 100% 100%;margin-top: -65px;position: relative;">
|
|
|
|
|
<text style="position: absolute;top: 138px;left:100px;rotate: 16deg;" class="fs25 cor-fff">VIP题库</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="wp100 p14" style="position: absolute;left: 0;bottom:20px">
|
|
|
|
|
<view class="sub_btn flex ai-c jc-sb">
|
|
|
|
|
<text class="cor-fff fs14">¥<text class="fs24 cor-fff">{{nowPrice}}</text></text>
|
|
|
|
|
<image style="width: 276rpx;height: 88rpx;margin-top: -5px;" src="../../static/image/index/buy.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</u-popup>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
mapState,
|
|
|
|
|
mapActions
|
|
|
|
|
} from 'pinia' //引入映射函数
|
|
|
|
|
import storage from '@/jtools/storage';
|
|
|
|
|
import useQuestionStore from '@/jtools/store/question' //引入store
|
|
|
|
|
import {
|
|
|
|
|
submitTest
|
|
|
|
|
} from '@/jtools/api/question';
|
|
|
|
|
export default {
|
|
|
|
|
props:{
|
|
|
|
|
tabsList:{
|
|
|
|
|
type:Array
|
|
|
|
|
},
|
|
|
|
|
type:{
|
|
|
|
|
type:String,
|
|
|
|
|
default:'practice'
|
|
|
|
|
},
|
|
|
|
|
isSubmit:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:false
|
|
|
|
|
},
|
|
|
|
|
isShowAll:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:true
|
|
|
|
|
},
|
|
|
|
|
subject:{
|
|
|
|
|
type:[String,Number],
|
|
|
|
|
default:1,
|
|
|
|
|
},
|
|
|
|
|
navTitle:{
|
|
|
|
|
type:String
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
nowPrice:68,
|
|
|
|
|
showVip:false,
|
|
|
|
|
popupShow:false,
|
|
|
|
|
content:'太棒啦，已答完最后一题~',
|
|
|
|
|
tipShow:false,
|
|
|
|
|
title:'提示',
|
|
|
|
|
tCurrent:0,
|
|
|
|
|
index:0,
|
|
|
|
|
qIndex:0,
|
|
|
|
|
rightList:[],
|
|
|
|
|
wrongList:[],
|
|
|
|
|
collectList:storage.get(`collectList_subject${this.subject}`) || [],
|
|
|
|
|
questionList: [{isCollect:true}],//数据源
|
|
|
|
|
swiperList: [], // 轮播图数据列表
|
|
|
|
|
swiperIndex: 0, // 轮播图当前位置
|
|
|
|
|
isChange: false, // 是否切换
|
|
|
|
|
topicIndex: 0, // 题目位置
|
|
|
|
|
duration: 200, // 动画过渡时长
|
|
|
|
|
time:0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState(useQuestionStore, ["currentIndex_subject1","currentIndex_subject2"]) //映射函数，取出tagslist
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
...mapActions(useQuestionStore,['getCurrentIndex']),
|
|
|
|
|
timeChange(e){
|
|
|
|
|
this.time=e
|
|
|
|
|
if(e.hours==0&&e.minutes==0&&e.seconds==0&&e.milliseconds==0){
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title:"考试结束，将为您自动交卷~",
|
|
|
|
|
icon:'none'
|
|
|
|
|
})
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.toSubmit()
|
|
|
|
|
},1000)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//获取正确选项
|
|
|
|
|
getRightOp(val){
|
|
|
|
|
let rightOp=''
|
|
|
|
|
this.questionList[this.topicIndex].optionList.forEach(item=>{
|
|
|
|
|
if(this.questionList[this.topicIndex].trueAnswer.includes(item.opValue)){
|
|
|
|
|
if(rightOp){
|
|
|
|
|
rightOp=rightOp+'、'+item.op
|
|
|
|
|
}else{
|
|
|
|
|
rightOp=item.op
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return rightOp
|
|
|
|
|
},
|
|
|
|
|
//获取题类型
|
|
|
|
|
getQuestType(val){
|
|
|
|
|
if(val=='1'){
|
|
|
|
|
return '判断'
|
|
|
|
|
}else if(val=='2'){
|
|
|
|
|
return '单选'
|
|
|
|
|
}else if(val=='3'){
|
|
|
|
|
return '多选'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//开通VIP
|
|
|
|
|
toVip(){
|
|
|
|
|
this.showVip=true
|
|
|
|
|
},
|
|
|
|
|
submitPaper(){
|
|
|
|
|
this.$refs.countDown_1.pause();
|
|
|
|
|
this.$refs.countDown_2.pause();
|
|
|
|
|
this.$refs.countDown_3.pause();
|
|
|
|
|
this.$emit('update:isSubmit',true)
|
|
|
|
|
},
|
|
|
|
|
continueExam(){
|
|
|
|
|
this.$refs.countDown_1.start();
|
|
|
|
|
this.$refs.countDown_2.start();
|
|
|
|
|
this.$refs.countDown_3.start();
|
|
|
|
|
this.$emit('update:isSubmit',false)
|
|
|
|
|
},
|
|
|
|
|
//切换题目
|
|
|
|
|
chooseQueston(index){
|
|
|
|
|
this.popupShow=false
|
|
|
|
|
this.pickerTopic(index)
|
|
|
|
|
},
|
|
|
|
|
//交卷
|
|
|
|
|
toSubmit(){
|
|
|
|
|
const restTime=this.time.hours*60*60+this.time.minutes*60+this.time.seconds
|
|
|
|
|
const score=(this.rightList.length/this.questionList.length * 100).toFixed(0)
|
|
|
|
|
submitTest({
|
|
|
|
|
"carTypeId": storage.get('carType') || '1001',
|
|
|
|
|
"score": score,
|
|
|
|
|
"testTime": 60*60-restTime,
|
|
|
|
|
subject:this.subject
|
|
|
|
|
}).then(resp=>{
|
|
|
|
|
const doNotNum=this.questionList.length-this.rightList.length-this.wrongList.length
|
|
|
|
|
const list = JSON.stringify(this.wrongList)
|
|
|
|
|
if(resp.code==='0000'){
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url:"/pages/questionBank/examResult?doNotNum="+doNotNum+"&wrongList="+list+"&score="+score+"&subject="+this.subject+"&navTitle="+this.navTitle
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//查看考试结果
|
|
|
|
|
toResult(){
|
|
|
|
|
const allDoNum=this.wrongList.length+this.rightList.length
|
|
|
|
|
const list = JSON.stringify(this.wrongList)
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url:"/pages/questionBank/practiceResult?allDoNum="+allDoNum+"&wrongList="+list+"&subject="+this.subject+"&navTitle="+this.navTitle
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
toCollect(){
|
|
|
|
|
if(this.questionList[this.topicIndex].isCollect){
|
|
|
|
|
if(this.collectList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
const idx=this.collectList.indexOf(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
this.collectList.splice(idx,1)
|
|
|
|
|
}
|
|
|
|
|
this.questionList[this.topicIndex].isCollect=false
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title:"取消收藏",
|
|
|
|
|
icon:'none'
|
|
|
|
|
})
|
|
|
|
|
}else{
|
|
|
|
|
this.collectList.push(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
this.questionList[this.topicIndex].isCollect=true
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title:"已收藏",
|
|
|
|
|
icon:'none'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
storage.set(`collectList_subject${this.subject}`,this.collectList)
|
|
|
|
|
},
|
|
|
|
|
cancel(){
|
|
|
|
|
this.tipShow=false
|
|
|
|
|
},
|
|
|
|
|
touchEnd(e){
|
|
|
|
|
if(this.topicIndex<this.questionList.length-1){
|
|
|
|
|
this.index=this.topicIndex
|
|
|
|
|
}else{
|
|
|
|
|
this.index++
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 渲染 swiper
|
|
|
|
|
renderSwiper(index) {
|
|
|
|
|
let list = [];
|
|
|
|
|
let current = 1;
|
|
|
|
|
if (this.questionList[index - 1]) {
|
|
|
|
|
list.push(this.questionList[index - 1]);
|
|
|
|
|
} else {
|
|
|
|
|
current = 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
list.push(this.questionList[index])
|
|
|
|
|
|
|
|
|
|
if (this.questionList[index + 1]) {
|
|
|
|
|
list.push(this.questionList[index + 1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.duration = 0;
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.swiperList = list;
|
|
|
|
|
this.swiperIndex = current;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.duration = 200;
|
|
|
|
|
}, 100)
|
|
|
|
|
}, 50)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 轮播图切换
|
|
|
|
|
onChange(e) {
|
|
|
|
|
// 非触摸事件不做轮播图状态更新
|
|
|
|
|
if (e.detail.source != "touch") return;
|
|
|
|
|
|
|
|
|
|
// 标识已切换
|
|
|
|
|
this.isChange = true;
|
|
|
|
|
// 轮播图当前位置大于原来时则表示为下一题
|
|
|
|
|
if (e.detail.current > this.swiperIndex) {
|
|
|
|
|
this.topicIndex++;
|
|
|
|
|
} else {
|
|
|
|
|
// 轮播图当前位置小于原来时则表示为上一题
|
|
|
|
|
this.topicIndex--;
|
|
|
|
|
}
|
|
|
|
|
this.getCurrentIndex(this.topicIndex,this.subject)
|
|
|
|
|
// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
|
|
|
|
|
this.swiperIndex = e.detail.current;
|
|
|
|
|
},
|
|
|
|
|
// 轮播图动画结束
|
|
|
|
|
onAnimationfinish(e) {
|
|
|
|
|
if(this.index>=this.questionList.length){
|
|
|
|
|
if(this.isShowAll){
|
|
|
|
|
this.tipShow=true
|
|
|
|
|
}else{
|
|
|
|
|
this.showVip=true
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
this.showVip=false
|
|
|
|
|
this.tipShow=false
|
|
|
|
|
}
|
|
|
|
|
if (!this.isChange) return;
|
|
|
|
|
|
|
|
|
|
this.isChange = false;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.renderSwiper(this.topicIndex);
|
|
|
|
|
}, 10);
|
|
|
|
|
},
|
|
|
|
|
// 选择题目
|
|
|
|
|
pickerTopic(index) {
|
|
|
|
|
this.topicIndex = index;
|
|
|
|
|
this.index=this.topicIndex
|
|
|
|
|
this.getCurrentIndex(this.topicIndex,this.subject)
|
|
|
|
|
this.renderSwiper(index);
|
|
|
|
|
},
|
|
|
|
|
isArrEqual(arr1, arr2){
|
|
|
|
|
return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
|
|
|
|
|
},
|
|
|
|
|
//答题
|
|
|
|
|
answerQues(op, index) {
|
|
|
|
|
const falseList =storage.get(`wrongList_subject${this.subject}`) || []
|
|
|
|
|
const trueList =storage.get(`rightList_subject${this.subject}`) || []
|
|
|
|
|
if (!this.questionList[this.topicIndex].clickAnswer) {
|
|
|
|
|
this.questionList[this.topicIndex].optionList[index].chooseOption =`${this.questionList[this.topicIndex].optionList[index].chooseOption?this.questionList[this.topicIndex].optionList[index].chooseOption:''}${op}`
|
|
|
|
|
this.questionList[this.topicIndex].clickAnswer = `${this.questionList[this.topicIndex].optionList[index].clickAnswer?this.questionList[this.topicIndex].optionList[index].clickAnswer:''}${op}`
|
|
|
|
|
}
|
|
|
|
|
if(this.tCurrent!==1){
|
|
|
|
|
const arr1=this.questionList[this.topicIndex].clickAnswer.split('')
|
|
|
|
|
const arr2=this.questionList[this.topicIndex].trueAnswer.split('')
|
|
|
|
|
if(this.isArrEqual(arr1,arr2)){
|
|
|
|
|
//判断选择的答案和实际的答案是否相同，如果相同，判断如果该题的ID在不在正确的数组中，不在则Push(存储的的同理)
|
|
|
|
|
//如果这道题在错误的数组中则把这道题在错误数组中删掉
|
|
|
|
|
if(!this.rightList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
this.rightList.push(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
}
|
|
|
|
|
if(!trueList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
trueList.push(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
storage.set(`rightList_subject${this.subject}`,trueList)
|
|
|
|
|
}
|
|
|
|
|
if(this.wrongList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
const wIndex=this.wrongList.indexOf(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
this.wrongList.splice(wIndex,1)
|
|
|
|
|
}
|
|
|
|
|
if(falseList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
const wIndex=falseList.indexOf(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
falseList.splice(wIndex,1)
|
|
|
|
|
storage.set(`wrongList_subject${this.subject}`,falseList)
|
|
|
|
|
}
|
|
|
|
|
//答对题目 如果不是最后一题，跳下一题
|
|
|
|
|
if(this.topicIndex<this.questionList.length-1){
|
|
|
|
|
this.topicIndex ++;
|
|
|
|
|
this.qIndex=this.topicIndex
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.renderSwiper(this.topicIndex);
|
|
|
|
|
},1000)
|
|
|
|
|
}
|
|
|
|
|
if(this.topicIndex<=this.questionList.length-1){
|
|
|
|
|
this.qIndex=this.topicIndex
|
|
|
|
|
}else{
|
|
|
|
|
this.qIndex++
|
|
|
|
|
}
|
|
|
|
|
if(this.qIndex>=this.questionList.length-1){
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.tipShow=true
|
|
|
|
|
},1000)
|
|
|
|
|
}else{
|
|
|
|
|
this.tipShow=false
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
if(!this.wrongList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
this.wrongList.push(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
}
|
|
|
|
|
if(!falseList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
falseList.push(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
storage.set(`wrongList_subject${this.subject}`,falseList)
|
|
|
|
|
}
|
|
|
|
|
if(trueList.includes(this.questionList[this.topicIndex].questionId)){
|
|
|
|
|
const rIndex=trueList.indexOf(this.questionList[this.topicIndex].questionId)
|
|
|
|
|
trueList.splice(rIndex,1)
|
|
|
|
|
storage.set(`rightList_subject${this.subject}`,trueList)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sectionChange(index) {
|
|
|
|
|
this.tCurrent = index
|
|
|
|
|
// this.getQuestionList()
|
|
|
|
|
// this.renderSwiper(0)
|
|
|
|
|
this.$emit('changeTab',index)
|
|
|
|
|
},
|
|
|
|
|
getQuestionList(val) {
|
|
|
|
|
const arr = JSON.parse(val)
|
|
|
|
|
this.questionList=[]
|
|
|
|
|
arr.forEach(item=>{
|
|
|
|
|
let isCollect=false
|
|
|
|
|
if(this.collectList.includes(item.questionId)){
|
|
|
|
|
isCollect=true
|
|
|
|
|
}
|
|
|
|
|
this.questionList.push({
|
|
|
|
|
isCollect:isCollect,
|
|
|
|
|
...item
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
if(this.navTitle==='顺序答题'){
|
|
|
|
|
this.pickerTopic(this[`currentIndex_subject${this.subject}`])
|
|
|
|
|
}else{
|
|
|
|
|
this.renderSwiper(0)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.type_box {
|
|
|
|
|
width: 350rpx;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.type_item {
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 64rpx;
|
|
|
|
|
width: 160rpx;
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.checked {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: #05C341;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unchecked {
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag_box {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 78rpx;
|
|
|
|
|
height: 42rpx;
|
|
|
|
|
background: #05C341;
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option_item {
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
border: 1px solid #666;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
margin-right: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.answer_box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
background: #EEEEEE;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.btn{
|
|
|
|
|
width: 220rpx;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
color:#fff;
|
|
|
|
|
background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%);
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
}
|
|
|
|
|
.tCircle{
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: #ddd solid 1px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
border: #05C341 solid 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.success {
|
|
|
|
|
background-color:rgb(236,247,241);
|
|
|
|
|
color: #05C341;
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
border: #05C341 solid 1px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.error {
|
|
|
|
|
background-color: #ffeceb;
|
|
|
|
|
color: #f84d27;
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
border: #f84d27 solid 1px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
padding-top: calc(var(--window-top) + 10px);
|
|
|
|
|
}
|
|
|
|
|
.vip_btn{
|
|
|
|
|
width:100%;
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
line-height: 100rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color:#fff;
|
|
|
|
|
background: linear-gradient(90deg, #FF9804 0%, #E95B0E 100%);
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
}
|
|
|
|
|
.sub_btn{
|
|
|
|
|
width:100%;
|
|
|
|
|
height: 110rpx;
|
|
|
|
|
border: 4px solid #F59B26;
|
|
|
|
|
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
|
|
|
|
|
box-shadow: 0rpx 16rpx 20rpx 1rpx rgba(245,155,38,0.78);
|
|
|
|
|
border-radius: 55rpx;
|
|
|
|
|
padding: 14rpx;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
