增加错题的复盘,即将对侧边显示进行修改

src/api/types/selectTestQuestionInfo.d.ts

@@ -6,6 +6,8 @@ declare namespace selectTestQuestionInfo {
         rows:[row]
     }
     interface row {
+        userAnswerLetter?:string,
+        isError?:Boolean,
         answerArr?: string[];
         userAnswer: string|string[];
         createTime: string,

src/components/mask/correctAnswerMask.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="mask">
+    <div>
+      <div class="dialog">
+        <div class="title">
+          <span>错题学习</span>
+        </div>
+        <div class="mid">
+          <!-- <div class="mid-line1">亲爱的考生：</div> -->
+          <div class="mid-line2">{{ no + 1 }}.{{ question.issue }}</div>
+          <div class="mt9 topic-select">
+            <div
+              v-for="(item, index) in question.optsArr"
+              :key="index"
+              class="topic-select-item"
+            >
+              {{ letter[index] }}.<span>{{ item }}</span>
+            </div>
+            <!-- <div class="topic-select-item">B.<span>xx</span></div> countdown-->
+          </div>
+          <!-- <div class="mid-line3" v-if="correctScore >= 90">再接再励</div> -->
+          <!-- <div class="mid-line3">技巧：{{ explainJq }}</div> -->
+        </div>
+        <div v-if="question.image" class="image">
+          <image
+            mode="heightFix"
+            class="answer-image"
+            :src="question.image"
+          ></image>
+        </div>
+        <div class="bottom">
+          <view class="answer">
+            正确答案：{{ answerLetter }}&nbsp; 您的答案：{{ userAnswerLetter }}
+          </view>
+          <button
+            @click="
+              () => {
+                $emit('close');
+              }
+            "
+          >
+            关闭
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: {},
+      letter: ["A", "B", "C", "D", "E", "F"],
+    };
+  },
+  methods: {
+    back() {
+      this.$router.push({
+        name:"/"
+      })
+   
+    },
+  },
+  computed: {
+    answerLetter() {
+      let arr = [];
+      if (this.question.questionType == 3) {
+        this.question.answer.split("-").forEach((element) => {
+          arr.push(this.letter[this.question.optsArr.indexOf(element)]);
+        });
+        return arr.sort().join();
+      } else {
+        return this.letter[this.question.optsArr.indexOf(this.question.answer)];
+      }
+    },
+    userAnswerLetter() {
+      let arr = [];
+      if (this.question.questionType == 3) {
+         this.question.userAnswer.forEach((element) => {
+          arr.push(this.letter[this.question.optsArr.indexOf(element)]);
+        });
+        return arr.sort().join();
+      } else {
+        return this.letter[
+          this.question.optsArr.indexOf(this.question.userAnswer)
+        ];
+      }
+    },
+  },
+  // setup(props, { emit }) {
+  //   const state = reactive({
+  //     count: 0,
+  //   });
+  //   const phone = new Phone();
+  //   const backView = phone.backView.bind(phone);
+  //   const time = ref(8);
+  //   const timer = window.setInterval((e) => {
+  //     time.value = time.value - 1;
+  //     if (time.value === 0) {
+  //       window.clearInterval(timer);
+  //       // backView()
+  //       router.push({
+  //         name: 'examBegin',
+  //         query: {
+  //           ...router.currentRoute.value.query,
+  //         },
+  //       });
+  //     }
+  //   }, 1000);
+  //   const sendPaper = () => {
+  //     emit('confirm');
+  //   };
+  //   const cancelSubmit = () => {
+  //     emit('cancel');
+  //   };
+
+  //   return {
+  //     ...toRefs(state),
+  //     props,
+  //     sendPaper,
+  //     cancelSubmit,
+  //     time,
+  //     timer,
+  //     router,
+  //     backView,
+  //   };
+  // },
+  //correct
+  unmounted() {
+    clearInterval(this.timer);
+  },
+  mounted() {},
+  props: {
+    no: {
+      type: Number,
+      default: 1,
+    },
+    question: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.image {
+  display: flex;
+  justify-content: center;
+  .answer-image {
+    height: 74rpx;
+  }
+}
+
+button {
+  border-radius: 0;
+  border: none;
+}
+.topic-select {
+  display: flex;
+  width: 100%;
+  padding-left: 10rpx;
+  padding-right: 10rpx;
+  font-size: 14rpx;
+  flex-wrap: wrap;
+}
+.topic-select-item {
+  width: 100%;
+  font-size: 14rpx;
+  text-align: left;
+}
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.65);
+  z-index: 10;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  .dialog {
+    width: 400rpx;
+    background: #fff;
+    .title {
+      width: 100%;
+      line-height: 40rpx;
+      height: 40rpx;
+      background: #306ace;
+      color: #fff;
+      font-size: 12rpx;
+      text-align: center;
+    }
+    .mid {
+      width: 100%;
+      background: #fff;
+
+      padding-left: 10rpx;
+      padding-right: 10rpx;
+      font-size: 14rpx;
+      .mid-line1 {
+        line-height: 25rpx;
+        height: 25rpx;
+        text-align: left;
+      }
+      .mid-line2 {
+        text-align: left;
+        line-height: 30rpx;
+      }
+      .mid-line3 {
+        text-align: left;
+        line-height: 30rpx;
+      }
+      .mid-line4 {
+        text-align: left;
+        line-height: 30rpx;
+      }
+    }
+    .bottom {
+      background: #306ace;
+      width: 100%;
+      height: 70rpx;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      align-content: flex-start;
+      .answer {
+        width: 100%;
+        font-size: 12rpx;
+        line-height: 24rpx;
+        color: #d8d8d8;
+        text-indent: 1em;
+      }
+
+      button:nth-child(1) {
+        height: 30rpx;
+        margin-top: 10rpx;
+        line-height: 30rpx;
+      }
+      .bottom-line {
+        width: 100%;
+        text-align: center;
+        color: #fff;
+        font-size: 12rpx;
+        margin-top: 5rpx;
+      }
+      button:nth-child(2) {
+        height: 30rpx;
+        line-height: 30rpx;
+      }
+    }
+  }
+}
+</style>

src/hooks/examTest.ts

@@ -1,10 +1,12 @@
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import dayjs from "dayjs";
 import Api from '@/api/api';
 import router from "@/router/"
 import store from "@/store/"
 
 export function useExamTest() {
+    let letter = ["A", "B", "C", "D", "E", "F"]
+    let correctAnswerVisible = ref(false)
     let list = ref<selectTestQuestionInfo.row[]>([
         {
             createTime: '2021-11-05 10:25:51',
@@ -432,6 +434,52 @@ export function useExamTest() {
     let errorScore = ref(0)
     let beforeSubmitVisible = ref(false)
     let submitVisible = ref(false)
+    let wrongQuestion = ref<selectTestQuestionInfo.row>({
+        createTime: "2021-11-05 10:25:51",
+        id: 20,
+        image: null,
+        imageYdt: null,
+        answer: "√",
+        answerkeyword: null,
+        explainGif: "https://t1-1305573081.file.myqcloud.com/qb/gif/20.gif",
+        explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
+        explainJs:
+            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
+        explainMp3:
+            "https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3",
+        issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
+        opts: "√-×",
+        optsArr: ["√", "×"],
+        skillkeyword: "追究-答对",
+        titlekeyword: "追究",
+        issuemp3:
+            "https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3",
+        answermp3:
+            "https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3",
+        explainjsmp3:
+            "https://t1-1305573081.file.myqcloud.com/qb/explainjs/explainJS20.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: "0",
+        sequeIssue: "2",
+        classIssue: "32",
+        placeIssue: "0",
+        excellIssue: "1",
+        copyIssue: "0",
+        mockIssue: "0",
+        sequeIssueName: "练习二",
+        placeIssueName: null,
+        excellIssueName: "必学题一",
+        classIssueName: "刑法题",
+        questionType: 1,
+        subject: 1,
+        classSort: 16,
+        excellSort: 39,
+        sequeSort: 118,
+        placeSort: null,
+        userAnswer: "",
+    })
 
     let submitScore = () => {
         //重置为0,不然会有数据不准确的bug
@@ -468,6 +516,81 @@ export function useExamTest() {
 
     }
     let listIndex = ref(0);
+    let wrongQuestionIndex = ref(0)
+    watch(listIndex, (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+            if (list.value[oldVal].questionType == 3) {
+                let userAnswerLetter: any[] = [];
+                if (
+                    list.value[oldVal].userAnswer &&
+                    list.value[oldVal].userAnswer.sort().toString() !==
+                    list.value[oldVal].answer.split("-").sort().toString()
+                ) {
+                    // this.$set(this.list[oldVal], "isError", true);
+                    list.value[oldVal].isError = true
+                    list.value[oldVal].userAnswer.forEach((element: string) => {
+                        userAnswerLetter.push(
+                            letter[list.value[oldVal].optsArr.indexOf(element)]
+                        );
+                    });
+                    list.value[oldVal].userAnswerLetter = userAnswerLetter.sort().join("")
+                    // this.$set(
+                    //   this.list[oldVal],
+                    //   "userAnswerLetter",
+                    //   userAnswerLetter.sort().join("")
+                    // );
+                    correctAnswerVisible.value = true;
+                    wrongQuestion.value = list.value[oldVal];
+                    wrongQuestionIndex.value = oldVal;
+                } else {
+
+                    list.value[oldVal].userAnswerLetter = userAnswerLetter.join("")
+
+
+
+                    correctAnswerVisible.value = false;
+                }
+            } else if (list.value[oldVal].questionType < 3) {
+                let userAnswerLetter = [];
+                if (
+                    list.value[oldVal].userAnswer &&
+                    list.value[oldVal].userAnswer !== list.value[oldVal].answer
+                ) {
+
+                    list.value[oldVal].userAnswerLetter = letter[
+                        list.value[oldVal].optsArr.indexOf(list.value[oldVal].userAnswer)
+                    ]
+
+
+                    list.value[oldVal].isError = true
+
+                    correctAnswerVisible.value = true;
+                    list.value[oldVal].userAnswerLetter = letter[
+                        list.value[oldVal].optsArr.indexOf(list.value[oldVal].userAnswer)
+                    ]
+                    wrongQuestion.value = list.value[oldVal];
+                    wrongQuestionIndex.value = oldVal;
+                } else {
+                    correctAnswerVisible.value = false
+                    list.value[oldVal].userAnswerLetter = letter[
+                        list.value[oldVal].optsArr.indexOf(list.value[oldVal].userAnswer)
+                    ]
+                    // this.$set(
+                    //     this.list[oldVal],
+                    //     "userAnswerLetter",
+                    //     this.letter[
+                    //     this.list[oldVal].optsArr.indexOf(this.list[oldVal].userAnswer)
+                    //     ]
+                    // );
+                    // this.correctAnswer = false;
+                }
+            }
+        }
+
+
+
+
+    })
 
     let changeListIndex = (e: PointerEvent) => {
         if (e.target?.dataset?.key) {
@@ -553,7 +676,10 @@ export function useExamTest() {
         correctScore,
         errorScore,
         beforeSubmitVisible,
-        submitVisible
+        submitVisible,
+        wrongQuestion,
+        wrongQuestionIndex,
+        correctAnswerVisible,
 
 
 

src/views/exam/test.vue

@@ -18,6 +18,16 @@
       "
     ></beforeSubmitMask>
     <submitMask v-if="submitVisible" :correctScore="correctScore"></submitMask>
+    <correctAnswerMask
+      :question="wrongQuestion"
+      :no="wrongQuestionIndex"
+      @close="
+        () => {
+          correctAnswerVisible = false;
+        }
+      "
+      v-if="correctAnswerVisible"
+    ></correctAnswerMask>
     <div class="box">
       <div class="main">
         <div class="container1">
@@ -215,6 +225,7 @@ import { defineComponent, reactive, ref, onMounted } from 'vue';
 import dayjs from 'dayjs';
 import beforeSubmitMask from '@/components/mask/beforeSubmitMask.vue';
 import submitMask from '@/components/mask/submitMask.vue';
+import correctAnswerMask from '@/components/mask/correctAnswerMask.vue';
 // import Api from '@/api/api';
 import { countdownTime, countdown, countdownTimer } from '@/hooks/countdown';
 import { useStore } from 'vuex';
@@ -250,6 +261,9 @@ export default defineComponent({
       correctScore,
       errorScore,
       submitVisible,
+      wrongQuestion,
+      wrongQuestionIndex,
+      correctAnswerVisible,
     } = useExamTest();
     //设置开始时间
     store.commit('SET_BEGINTIME', {
@@ -744,6 +758,7 @@ export default defineComponent({
       letter: ['A', 'B', 'C', 'D', 'E', 'F'],
       questionTypeMap: ['', '判断题', '选择题', '多选题'],
       listIndex: listIndex,
+
       beforeTopic,
       nextTopic,
       changeListIndex,
@@ -762,11 +777,15 @@ export default defineComponent({
       username,
       carType,
       sex,
+      wrongQuestion,
+      wrongQuestionIndex,
+      correctAnswerVisible,
     };
   },
   components: {
     beforeSubmitMask,
     submitMask,
+    correctAnswerMask,
   },
 });
 </script>