三力分析页面3

src/api/question/question.ts

@@ -68,6 +68,14 @@ export default {
             url: "/question/wrong/wrongByUser",
             method: 'get',
 
+        })
+    },
+    //恢复云端错题到本机（根据用户获取错题）
+    questionThreeWrongWrongByUser(){
+        return request({
+            url: "/question/threeWrong/wrongByUser",
+            method: 'get',
+
         })
     }
 }

src/views/driverExamAnaly/index.vue

@@ -16,7 +16,7 @@
         </div>
 
         <div class="font0 overflow-hidden">
-          <span class="font50 text-red-500">3</span>
+          <span class="font50 text-red-500">{{ score }}</span>
           <span class="font16 text-red-500">分</span>
         </div>
 
@@ -30,12 +30,30 @@
       </div>
       <div class="pt30 pb30 pt30 pb30">
         <div
+          v-for="(item, index) in list"
+          :key="index"
           class="round10 pt30 pr30 pl30 pb30 text-left round10 gray-border mb20"
         >
-          <div>1、驾驶机动车不妨碍其他车辆正常行驶时，可连续变更两条车道。</div>
-          <div>×A、正确</div>
-          <div>√B、错误</div>
+          <div>{{ index + 1 }}、{{ list[index].issue }}</div>
           <div
+            :class="{
+              'text-red-500': userAnswerList[index] == '0',
+            }"
+            v-for="(_item, _index) in list[index].optsArr"
+            :key="_index"
+          >
+            <span v-if="userAnswerList[index] == _index + 1&&userAnswerList[index] != '0'">x</span>
+            <span v-if="userAnswerList[index] != _index + 1&&userAnswerList[index] != '0'">√</span>
+            {{ switchIndexBySelect(_index) }} . {{ _item }}
+          </div>
+
+          <div
+            @click="
+              () => {
+                alertVisible = true;
+                alertContent = list[index].explainJs;
+              }
+            "
             class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20 cursor-pointer"
           >
             本题解析
@@ -43,30 +61,69 @@
         </div>
       </div>
     </div>
- 
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      :title="alertTitle"
+      :content="alertContent"
+    ></mProblemAlert>
   </div>
 </template>
 
 <script lang="ts">
 import { openApi } from "@/api/open/type";
 import { defineComponent, ref } from "vue";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
 // import { Button } from "ant-design-vue";
 export default defineComponent({
   setup() {
     return {
-      score:ref(0),
-      userAnswerList:ref<openApi.selectFreeQuestionInfoRes["rows"]>([])
+      score: ref(0),
+      list: ref<openApi.selectFreeQuestionInfoRes["rows"]>([]),
+      userAnswerList: ref<string[]>([]),
+      alertTitle: "解析",
+      alertVisible: ref(false),
+      alertContent: ref(""),
     };
   },
   components: {
+    mProblemAlert,
     // aButton: Button,
   },
-  mounted () {
-       this.score = Number(this.$route.query.score);
-
+  methods: {
+    switchIndexBySelect(index: number) {
+      let name = "";
+      const i = Number(index);
+      switch (i) {
+        case 0:
+          name = "A";
+          break;
+        case 1:
+          name = "B";
+          break;
+        case 2:
+          name = "C";
+          break;
+        case 3:
+          name = "D";
+          break;
+        case 4:
+          name = "E";
+          break;
+        case 5:
+          name = "F";
+          break;
+      }
+      return name;
+    },
+  },
+  mounted() {
+    this.score = Number(this.$route.query.score);
+    this.list = JSON.parse(
+      window.sessionStorage.getItem("driverExam_temp_wrong_list") || "[]"
+    );
     this.userAnswerList = JSON.parse(
       (this.$route.query.wrongListRes as string) || "[]"
-    );;
+    );
   },
 });
 </script>

src/views/threeExamAnaly/index.vue

@@ -116,6 +116,7 @@
       :title="alertTitle"
       :content="alertContent"
     ></mProblemAlert>
+    
   </div>
 </template>