huxiaofeng666/jwl-applet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
脆皮鸭
2023-08-24 15:26:02 +08:00
parent 1596959583
commit 97547afc4d
19 changed files with 922 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/pages/questionBank/components/Question.vue
View File

@@ -13,30 +13,66 @@
<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>
<template v-if="quesItem.type!='3'">
<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>
<view class="m14lr mt30"
v-if="quesItem.clickAnswer&&!quesItem.trueAnswer.includes(quesItem.clickAnswer)">
<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>
</template>
<template v-else>
<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.isChoose&&quesItem.trueAnswer.includes(item.opValue)&&quesItem.clickAnswer&&quesItem.clickAnswer.includes(item.opValue)">
<u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="32"></u-icon>
</template>
<template
v-else-if="quesItem.isChoose&&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="!quesItem.isChoose||quesItem.clickAnswer&&!quesItem.clickAnswer.includes(item.opValue)&&quesItem.isChoose">
<template v-if="quesItem.isChoose">
<view class="option_item" :class="quesItem.trueAnswer.includes(item.opValue)&&quesItem.clickAnswer&&!quesItem.clickAnswer.includes(item.opValue)?'right_option':''">{{item.op}}</view>
</template>
<template v-else>
<view class="option_item" :class="quesItem.clickAnswer&&quesItem.clickAnswer.includes(item.opValue)&&!quesItem.isChoose?'checked_option':''">{{item.op}}</view>
</template>
</template>
<text class="fs18">{{item.opDesc}}</text>
</template>
</view>
<view class="p14">
<button :class="quesItem.clickAnswer&&quesItem.clickAnswer.length>1?'dx_checked':'dx_btn'" @click="duoxuan(quesItem.clickAnswer)">确认</button>
</view>
<view class="m14lr mt30"
v-if="isShowAnswer">
<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>
</template>
</view>
</scroll-view>
</swiper-item>
@@ -174,8 +210,8 @@
<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 style="height: 528rpx;width: 100%;background-image: url(../../static/image/practice/vip_bg.jpg);background-size: 100% 100%;margin-top: -65px;position: relative;">
<text style="position: absolute;top: 151px;left:117px;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">
@@ -245,12 +281,92 @@ export default {
time:0,
}
},
computed: {
...mapState(useQuestionStore, ["currentIndex_subject1","currentIndex_subject2"]) //映射函数，取出tagslist
...mapState(useQuestionStore, ["currentIndex_subject1","currentIndex_subject2"]) ,//映射函数，取出tagslist
isShowAnswer(){
// quesItem.isChoose&&quesItem.clickAnswer&&!quesItem.trueAnswer.includes(quesItem.clickAnswer)
if(this.questionList[this.topicIndex].isChoose){
const arr1=this.questionList[this.topicIndex].clickAnswer.split('')
const arr2=this.questionList[this.topicIndex].trueAnswer.split('')
if(!this.isArrEqual(arr1,arr2)){
return true
}else{
return false
}
}else{
return false
}
}
},
methods: {
...mapActions(useQuestionStore,['getCurrentIndex']),
duoxuan(val){
if(val&&val.length>1){
this.questionList[this.topicIndex].isChoose=true
const falseList =storage.get(`wrongList_subject${this.subject}`) || []
const trueList =storage.get(`rightList_subject${this.subject}`) || []
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(()=>{
console.log(12345);
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)
}
}
}
}
},
timeChange(e){
this.time=e
if(e.hours==0&&e.minutes==0&&e.seconds==0&&e.milliseconds==0){
@@ -381,7 +497,7 @@ export default {
if (this.questionList[index + 1]) {
list.push(this.questionList[index + 1]);
}
this.duration = 0;
setTimeout(() => {
@@ -407,6 +523,7 @@ export default {
// 轮播图当前位置小于原来时则表示为上一题
this.topicIndex--;
}
this.getCurrentIndex(this.topicIndex,this.subject)
// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
this.swiperIndex = e.detail.current;
@@ -447,8 +564,13 @@ export default {
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}`
}else{
if(this.questionList[this.topicIndex].type=='3'&&!this.questionList[this.topicIndex].clickAnswer.includes(op)){
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].clickAnswer}${op}`
}
}
if(this.tCurrent!==1){
if(this.tCurrent!==1&&this.questionList[this.topicIndex].type!='3'){
const arr1=this.questionList[this.topicIndex].clickAnswer.split('')
const arr2=this.questionList[this.topicIndex].trueAnswer.split('')
if(this.isArrEqual(arr1,arr2)){
@@ -521,6 +643,7 @@ export default {
isCollect=true
}
this.questionList.push({
isChoose:false,
isCollect:isCollect,
...item
})
@@ -536,6 +659,11 @@ export default {
</script>
<style scoped lang="scss">
.checked_option{
background-color: #000;
border: 1px solid #000;
color:#fff
}
.type_box {
width: 350rpx;
height: 72rpx;
@@ -610,26 +738,26 @@ export default {
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;
}
@@ -657,4 +785,27 @@ export default {
border-radius: 55rpx;
padding: 14rpx;
}
.dx_btn{
width:100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
color:#fff;
background: rgb(204,204,204);
border-radius:100rpx;
}
.dx_checked{
width:100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
color:#fff;
background: #05C341;
border-radius:100rpx;
}
.right_option{
border-color: #05C341;
background-color: #fff;
color: #05C341
}
</style>