完善四月份新题的考生

src/api/types/questionTwoList.d.ts

@@ -16,7 +16,8 @@ declare namespace questionTwoList {
         "num": number,
         "rightAnswer": number,
         "type": number,
-        "isExplainJs"?:Boolean
+        "isExplainJs"?:Boolean,
+        "userAnswer"?:number
     }
     interface response {
         code: number,

src/views/aprilExam/test.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="container">
+    <div class="container" ref="container">
       <div class="tab">
         <div
           v-for="(item, index) in tabItemList"
@@ -9,6 +9,7 @@
           @click="
             () => {
               tabItemListIndex = index;
+              listIndex = listIndexList[tabItemListIndex];
               getPage(index);
             }
           "
@@ -22,7 +23,7 @@
         </div>
       </div>
       <div class="topics">
-        <div class="topics-title"></div>
+        <div class="topics-title">{{ list[listIndex].type == 1 ? '判断' : '选择' }}</div>
         <div class="topics-content">
           {{ list[listIndex].explainJs }}
         </div>
@@ -36,12 +37,20 @@
           <div class="options-selectText">
             <img
               src="@/assets/img/okimg.png"
-              v-if="list[listIndex].rightAnswer == 1 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 1 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer == 1
+              "
               class="options-selectText-okimg"
             />
             <img
               src="@/assets/img/noimg.png"
-              v-if="list[listIndex].rightAnswer !== 1 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 1 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer !== 1
+              "
               class="options-selectText-noimg"
             />
             <div class="options-selectText-header">A</div>
@@ -49,9 +58,13 @@
               class="options-selectText-mid"
               :class="{
                 'options-selectText-mid_selectOk':
-                  list[listIndex].rightAnswer == 1 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 1 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer == 1,
                 'options-selectText-mid_selectNo':
-                  list[listIndex].rightAnswer !== 1 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 1 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer !== 1,
               }"
             >
               {{ list[listIndex].an1 }}
@@ -67,12 +80,20 @@
           <div class="options-selectText">
             <img
               src="@/assets/img/okimg.png"
-              v-if="list[listIndex].rightAnswer == 2 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 2 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer == 2
+              "
               class="options-selectText-okimg"
             />
             <img
               src="@/assets/img/noimg.png"
-              v-if="list[listIndex].rightAnswer !== 2 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 2 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer !== 2
+              "
               class="options-selectText-noimg"
             />
             <div class="options-selectText-header">B</div>
@@ -80,9 +101,13 @@
               class="options-selectText-mid"
               :class="{
                 'options-selectText-mid_selectOk':
-                  list[listIndex].rightAnswer == 2 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 2 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer == 2,
                 'options-selectText-mid_selectNo':
-                  list[listIndex].rightAnswer !== 2 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 2 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer !== 2,
               }"
             >
               {{ list[listIndex].an2 }}
@@ -98,12 +123,20 @@
           <div class="options-selectText">
             <img
               src="@/assets/img/okimg.png"
-              v-if="list[listIndex].rightAnswer == 3 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 3 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer == 3
+              "
               class="options-selectText-okimg"
             />
             <img
               src="@/assets/img/noimg.png"
-              v-if="list[listIndex].rightAnswer !== 3 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 3 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer !== 3
+              "
               class="options-selectText-noimg"
             />
             <div class="options-selectText-header">C</div>
@@ -111,9 +144,13 @@
               class="options-selectText-mid"
               :class="{
                 'options-selectText-mid_selectOk':
-                  list[listIndex].rightAnswer == 3 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 3 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer == 3,
                 'options-selectText-mid_selectNo':
-                  list[listIndex].rightAnswer !== 3 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 3 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer !== 3,
               }"
             >
               {{ list[listIndex].an3 }}
@@ -130,12 +167,20 @@
           <div class="options-selectText">
             <img
               src="@/assets/img/okimg.png"
-              v-if="list[listIndex].rightAnswer == 4 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 4 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer == 4
+              "
               class="options-selectText-okimg"
             />
             <img
               src="@/assets/img/noimg.png"
-              v-if="list[listIndex].rightAnswer !== 4 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 4 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer !== 4
+              "
               class="options-selectText-noimg"
             />
             <div class="options-selectText-header">D</div>
@@ -143,9 +188,13 @@
               class="options-selectText-mid"
               :class="{
                 'options-selectText-mid_selectOk':
-                  list[listIndex].rightAnswer == 4 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 4 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer == 4,
                 'options-selectText-mid_selectNo':
-                  list[listIndex].rightAnswer !== 4 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 4 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer !== 4,
               }"
             >
               {{ list[listIndex].an4 }}
@@ -162,12 +211,20 @@
           <div class="options-selectText">
             <img
               src="@/assets/img/okimg.png"
-              v-if="list[listIndex].rightAnswer == 5 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 5 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer == 5
+              "
               class="options-selectText-okimg"
             />
             <img
               src="@/assets/img/noimg.png"
-              v-if="list[listIndex].rightAnswer !== 5 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 5 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer !== 5
+              "
               class="options-selectText-noimg"
             />
             <div class="options-selectText-header">E</div>
@@ -175,9 +232,13 @@
               class="options-selectText-mid"
               :class="{
                 'options-selectText-mid_selectOk':
-                  list[listIndex].rightAnswer == 5 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 5 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer == 5,
                 'options-selectText-mid_selectNo':
-                  list[listIndex].rightAnswer !== 5 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 5 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer !== 5,
               }"
             >
               {{ list[listIndex].an5 }}
@@ -194,12 +255,20 @@
           <div class="options-selectText">
             <img
               src="@/assets/img/okimg.png"
-              v-if="list[listIndex].rightAnswer == 6 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 6 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer == 6
+              "
               class="options-selectText-okimg"
             />
             <img
               src="@/assets/img/noimg.png"
-              v-if="list[listIndex].rightAnswer !== 6 && list[listIndex].isExplainJs"
+              v-if="
+                list[listIndex].userAnswer == 6 &&
+                list[listIndex].isExplainJs &&
+                list[listIndex].rightAnswer !== 6
+              "
               class="options-selectText-noimg"
             />
             <div class="options-selectText-header">F</div>
@@ -207,9 +276,13 @@
               class="options-selectText-mid"
               :class="{
                 'options-selectText-mid_selectOk':
-                  list[listIndex].rightAnswer == 6 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 6 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer == 6,
                 'options-selectText-mid_selectNo':
-                  list[listIndex].rightAnswer !== 6 && list[listIndex].isExplainJs,
+                  list[listIndex].userAnswer == 6 &&
+                  list[listIndex].isExplainJs &&
+                  list[listIndex].rightAnswer !== 6,
               }"
             >
               {{ list[listIndex].an6 }}
@@ -245,7 +318,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, ref, onUnmounted } from 'vue';
 import { Toast } from 'vant';
 import api from '@/api/api';
 import blueTabItemImg0 from '@/assets/img/blueCar.png';
@@ -302,11 +375,19 @@ let list = ref<questionTwoList.row[]>([
     type: 0,
   },
 ]);
+let listIndexList = [0, 0, 0, 0];
+let timer = window.setInterval(() => {
+  listIndexList[tabItemListIndex.value] = listIndex.value;
+}, 400);
+onUnmounted(() => {
+  window.clearInterval(timer);
+});
 let listIndex = ref(0);
 let list0 = ref<questionTwoList.row[]>([]);
 let list1 = ref<questionTwoList.row[]>([]);
 let list2 = ref<questionTwoList.row[]>([]);
 let list3 = ref<questionTwoList.row[]>([]);
+let container = ref(null);
 const query = {
   pageNum: 1,
   pageSize: 1000,
@@ -370,6 +451,8 @@ let nextTopics = () => {
   } else {
     listIndex.value = listIndex.value + 1;
   }
+  container.value.scrollTo(0, 0);
+  // container.scrollTo(0, 0);
 };
 let backTopics = () => {
   if (listIndex.value == 0) {
@@ -378,10 +461,13 @@ let backTopics = () => {
   } else {
     listIndex.value = listIndex.value - 1;
   }
+  container.value.scrollTo(0, 0);
 };
 let selectAnswer = (item: questionTwoList.row, index: number) => {
-  item.isExplainJs = true;
-  console.log(item);
+  if (!item.isExplainJs) {
+    item.isExplainJs = true;
+    item.userAnswer = index;
+  }
 };
 //初始获取题目
 getPage(0);
@@ -441,7 +527,6 @@ getPage(0);
   background: #fff;
   border-radius: 8px;
   .topics-title::before {
-    content: '判断';
     color: white;
   }
   .topics-title {
@@ -455,6 +540,7 @@ getPage(0);
     display: flex;
     align-items: center;
     justify-content: center;
+    color: #fff;
   }
   .topics-content {
     text-align: left;
@@ -476,7 +562,7 @@ getPage(0);
   .options-selectText {
     border: 5px solid #2d2d2d;
     height: 84px;
-    line-height: 84px;
+    text-align: left;
     display: flex;
     align-content: center;
     align-items: center;
@@ -501,6 +587,8 @@ getPage(0);
     align-items: center;
     color: white;
     border-radius: 8px;
+    flex-basis: 1;
+    flex-shrink: 0;
   }
 
   .options-selectText-mid {