xinjiang_army/web/src/views/scene/components/question/datiing.vue

<template>
  <div class="datiing" v-if="currentTimu.question" @click.stop>
    <p class="qtitle">第{{currentIdx+1}}/{{tiku.answer.length}}题</p>
    <div class="dati">
      <p class="title">{{ currentTimu.question }}</p>
      <ul>
        <li
          :class="{active:timuselect == item.val && !isSubmit}"
          v-for="(item, i) in currentTimu.answer"
          @click="timuselect = item.val"
          :key="i"
        >
          <div>
            <img
              v-if="item.val == currentTimu.correct && isSubmit"
              :src="require(`@/assets/images/btnlist/dui.png`)"
            />
            <img
              v-if="
                item.val == timuselect &&
                  item.val != currentTimu.correct &&
                  isSubmit
              "
              :src="require(`@/assets/images/btnlist/cuo_${theme}.png`)"
            />
            <span v-if="timuselect == item.val && !isSubmit"></span>
          </div>
          <span>{{ "ABCD"[i] }}.{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="dati_btn">
      <span class="active" @click="handleNext">{{
        canNext ? "下一题" : "确认"
      }}</span>
    </div>
  </div>
</template>

<script>
import { getQuestionGroupDetail, submitAnswers } from "@/config/api";

export default {
  props: ["timu"],
  data() {
    return {
      tiku: {},
      currentIdx: 0,
      timuselect: "",
      isSubmit: false,
      canNext: false,
      correctNum: 0,
      correctRate: 0,
    };
  },
  computed: {
    currentTimu() {
      return this.tiku.answer ? this.tiku.answer[this.currentIdx] || {} : {};
    },
  },
  watch: {
    currentIdx(newVal) {
      if (newVal >= this.tiku.answer.length) {
        this.correctRate = Math.floor(
          (this.correctNum / this.tiku.answer.length) * 100
        );
        this.submitAnswers()
      }
    },
  },
  methods: {
    reset() {
      this.canNext = false;
      this.isSubmit = false;
      this.timuselect = "";
    },
    handleNext() {
      if (this.timuselect == this.currentTimu.correct || this.canNext) {
        if (this.timuselect == this.currentTimu.correct) {
          this.correctNum++;
        }
        this.reset();
        this.currentIdx++;
      } else {
        this.isSubmit = true;
        this.canNext = true;
      }
    },
    submitAnswers() {
      submitAnswers(
        {
          percent: this.correctRate,
          questionGroupId: this.tiku.entity.id,
          score: this.correctNum,
          userId: this.userInfo.id,
        },
        (res) => {
          this.$bus.$emit("datiing", {
            correctNum: this.correctNum,
            datiing: false,
            correctRate: this.correctRate,
            challengesuccess: this.correctRate >= 50,
          });
          console.log(res);
        }
      );
    },
    getDetail() {
      getQuestionGroupDetail({ id: this.timu.id}, (res) => {
        res.data.answer = res.data.answer.map((item) => {
          item.answer = JSON.parse(item.answer);
          return item;
        });
        this.tiku = res.data;
      });
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>

<style lang="less" scoped>
.datiing {
  width: 100%;
  height: 100%;
  .qtitle {
    color: #fff;
    margin-top: 6px;
  }
  .dati {
    width: 83%;
    height: 62%;
    overflow-y: auto;
    margin: 0 auto;
    margin-top: 100px;
    padding: 0 10px;
  }

  .dati_btn {
    > span {
      padding: 0 40px;
      border-radius: 5px;
    }
  }
}
</style>