jwl-applet/src/pages/questionBank/components/Question.vue

<template>
  <view style="margin-top: 100px;">
    <view class="flex ai-c jc-c">
      <view class="flex type_box jc-sb ai-c">
        <view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
        <view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
      </view>
    </view>
    <swiper class="swiper" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true"	@change="onChange" @animationfinish="onAnimationfinish">
      <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">{{quesItem.questionTypeDesc}}</text>
              <text class="fs18">{{quesItem.questionDesc}}</text>
            </view>
            <view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList"
                  :key="item.op" @tap="answerQues(item.op,index)">
              <template
                  v-if="quesItem.clickAnswer&&item.op===quesItem.rightOp">
                <u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="30"></u-icon>
              </template>
              <template
                  v-else-if="quesItem.clickAnswer===item.op&&item.op!==quesItem.rightAnswer">
                <u-icon class="mr15" name="close-circle-fill" color="red" size="30"></u-icon>
              </template>
              <template v-else-if="!item.chooseOption">
                <view class="option_item">{{item.op}}</view>
              </template>
              <text class="fs18">{{item.opDesc}}</text>
            </view>
            <view class="m14lr mt30"
                  v-if="quesItem.clickAnswer&&quesItem.clickAnswer!==quesItem.rightOp || tCurrent===1">
              <view class="answer_box">
                <text class="fs18 fw600 cor-000">答案:{{quesItem.rightOp}}</text>
                <view class="fs18 cor-000" style="text-indent:2em;"> 这里是相关解释文字，这里是相关解释文字相关解释文字</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <u-modal :show="tipShow" :title="title" :content="content">
      <template #confirmButton>
        <view class="p10" >
          <u-button :customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx'}">查看练题结果</u-button>
        </view>
      </template>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content:'太棒啦，已答完最后一题',
      tipShow:false,
      title:'提示',
      tCurrent:0,
      questionList: [],//数据源
      swiperList: [], // 轮播图数据列表
      swiperIndex: 0, // 轮播图当前位置
      isChange: false, // 是否切换
      topicIndex: 0, // 题目位置
      duration: 200, // 动画过渡时长
    }
  },
  onLoad() {
    this.getQuestionList()
    this.renderSwiper(0)
  },
  methods: {
    // 渲染 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--;
      }

      // 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
      this.swiperIndex = e.detail.current;
    },
    // 轮播图动画结束
    onAnimationfinish(e) {
      if (!this.isChange) return;

      this.isChange = false;
      setTimeout(() => {
        this.renderSwiper(this.topicIndex);
      }, 10);
    },
    // 选择题目
    pickerTopic(index) {
      this.topicIndex = index;
      this.renderSwiper(index);
    },
    //答题
    answerQues(op, index) {
      if (!this.questionList[this.topicIndex].clickAnswer) {
        this.questionList[this.topicIndex].optionList[index].chooseOption = op
        this.questionList[this.topicIndex].clickAnswer = op
      }
      if(this.tCurrent!==1){
        if(this.questionList[this.topicIndex].clickAnswer===this.questionList[this.topicIndex].rightOp){
          if(this.topicIndex<=this.questionList.length-1){
            if(this.topicIndex===this.questionList.length-1){
              this.tipShow=true
            }else{
              this.tipShow=false
            }
            this.topicIndex ++;
            setTimeout(()=>{
              this.renderSwiper(this.topicIndex);
            },1000)
          }
        }
      }
    },
    sectionChange(index) {
      this.tCurrent = index
      this.getQuestionList()
      this.renderSwiper(0)
    },
    getQuestionList() {
      this.questionList = [{
        questionId: 0,
        questionTypeDesc: '单选',
        questionDesc: '第一题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
        optionList: [{
          op: 'A',
          opDesc: '注意新手标志'
        }, {
          op: 'B',
          opDesc: '注意新手标志'
        }, {
          op: 'C',
          opDesc: '注意新手标志'
        }, {
          op: 'D',
          opDesc: '注意新手标志'
        }],
        rightOp: 'C',
      }, {
        questionId: 1,
        questionTypeDesc: '单选',
        questionDesc: '第二题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
        optionList: [{
          op: 'A',
          opDesc: '注意新手标志'
        }, {
          op: 'B',
          opDesc: '注意新手标志'
        }, {
          op: 'C',
          opDesc: '注意新手标志'
        }, {
          op: 'D',
          opDesc: '注意新手标志'
        }],
        rightOp: 'B',
      }, {
        questionId: 2,
        questionTypeDesc: '单选',
        questionDesc: '第三题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
        optionList: [{
          op: 'A',
          opDesc: '注意新手标志'
        }, {
          op: 'B',
          opDesc: '注意新手标志'
        }, {
          op: 'C',
          opDesc: '注意新手标志'
        }, {
          op: 'D',
          opDesc: '注意新手标志'
        }],
        rightOp: 'A',
      },
        {
          questionId: 3,
          questionTypeDesc: '单选',
          questionDesc: '第四题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 4,
          questionTypeDesc: '单选',
          questionDesc: '第5题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        },
        {
          questionId: 5,
          questionTypeDesc: '单选',
          questionDesc: '第6题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 6,
          questionTypeDesc: '单选',
          questionDesc: '第7题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 7,
          questionTypeDesc: '单选',
          questionDesc: '第8题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 8,
          questionTypeDesc: '单选',
          questionDesc: '第9题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'C',
        }, {
          questionId: 9,
          questionTypeDesc: '单选',
          questionDesc: '第10题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'B',
        }, {
          questionId: 10,
          questionTypeDesc: '单选',
          questionDesc: '第11题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        },
        {
          questionId: 11,
          questionTypeDesc: '单选',
          questionDesc: '第12题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 12,
          questionTypeDesc: '单选',
          questionDesc: '第13题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        },
        {
          questionId: 13,
          questionTypeDesc: '单选',
          questionDesc: '第14题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 14,
          questionTypeDesc: '单选',
          questionDesc: '第15题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }, {
          questionId: 15,
          questionTypeDesc: '单选',
          questionDesc: '第16题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
          optionList: [{
            op: 'A',
            opDesc: '注意新手标志'
          }, {
            op: 'B',
            opDesc: '注意新手标志'
          }, {
            op: 'C',
            opDesc: '注意新手标志'
          }, {
            op: 'D',
            opDesc: '注意新手标志'
          }],
          rightOp: 'A',
        }
      ]
      if(this.tCurrent===1){
        this.questionList=this.questionList.map(item=>{
          return{
            ...item,
            clickAnswer:item.rightOp
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.type_box {
  width: 280rpx;
  height: 72rpx;
  background-color: #FFFFFF;
  border-radius: 8rpx;
}

.type_item {
  text-align: center;
  line-height: 64rpx;
  width: 126rpx;
  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;
}
</style>