修改答题逻辑，完善判断题的显示处理逻辑，新增开始考试请求数据的静态效果

src/views/home/answer/page-answer-recruit.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="isInited" class="page-exam-question-box">
+  <div class="page-exam-question-box">
     <van-nav-bar title="答题" left-arrow @click-left="handleBackFun" />
     <!-- 题目卡片 -->
     <div class="exam-question-div">
-      <div class="exam-question-card">
+      <div v-if="examQuestionList.length > 0" class="exam-question-card">
         <!-- 标题、分数、题页 -->
         <div class="exam-question-head">
           <div class="exam-question-head-left">
@@ -31,7 +31,7 @@
           }}
         </div>
         <!-- 答题列表 -->
-        <!-- 单选题、多选题的选项区域 -->
+        <!-- 单选题、多选题、判断题 的选项区域 -->
         <div
           v-if="
             examQuestionList[answerIndex].type === questionType.TrueOrFalse ||
@@ -92,9 +92,22 @@
           >
         </div>
       </div>
+      <div v-else class="exam-question-card">
+        <div v-if="isInited" class="exam-question-card-nodata">暂无数据</div>
+        <div
+          v-else
+          class="exam-question-card-nodata exam-question-card-loading"
+        >
+          加载中...
+        </div>
+      </div>
     </div>
     <!-- 题目卡片 -->
-    <div v-show="answerStatus === 2" class="exam-question-div">
+    <div
+      v-if="examQuestionList.length > 0"
+      v-show="answerStatus === 2"
+      class="exam-question-div"
+    >
       <div class="exam-question-card">
         <div class="exam-question-result">
           正确答案：{{
@@ -123,7 +136,7 @@ export default {
         singleChoice: "DanXuan", // 单选题
         multipleChoice: "DuoXuan", // 多选题
         gapFilling: "TianKong", // 填空题
-        TrueOrFalse: "PanDuanTi" // 判断题
+        TrueOrFalse: "PanDuan" // 判断题
       }, // 试题类型
       examQuestionList: [], // 试题列表
       answerIndex: null, // 当前试题的下标索引
@@ -206,7 +219,6 @@ export default {
           if (isLast) {
             // 临时解决多个异步请求进行的问题
             this.examQuestionList = httpResultData;
-            console.log(this.examQuestionList);
             this.handleExamQuestionItemFun(this.examQuestionList[0], 0); // 设置第一题开始
             let curTime = new Date();
             this.answerTime.startTime = curTime; // 赋值开始时间
@@ -244,12 +256,10 @@ export default {
           break;
         case this.questionType.gapFilling:
           typeTxt = "填空题";
-          console.log(content);
           questionInputNum = this.getPlaceholderCount(content);
           questionContent = content.replace("$PH$", "()");
           break;
         case this.questionType.TrueOrFalse:
-          console.log("判断题");
           typeTxt = "判断题";
           break;
         default:
@@ -277,13 +287,14 @@ export default {
       switch (this.examQuestionList[this.answerIndex].type) {
         case this.questionType.singleChoice:
         case this.questionType.multipleChoice:
+        case this.questionType.TrueOrFalse:
           finalAnswer.forEach((item, index) => {
             txt = txt + item;
           });
           break;
         case this.questionType.gapFilling:
           finalAnswer.forEach((item, index) => {
-            txt = txt + `${index > 0 ? "、" : ""}` + item;
+            txt = txt + (index > 0 ? "、" : "") + item;
           });
           break;
         default:
@@ -301,6 +312,7 @@ export default {
       switch (item.type) {
         case this.questionType.singleChoice:
         case this.questionType.multipleChoice:
+        case this.questionType.TrueOrFalse:
           this.answerValue = [...new Set(item.userAnswer)];
           break;
         case this.questionType.gapFilling:
@@ -357,7 +369,6 @@ export default {
         return;
       }
       this.examQuestionList[this.answerIndex].userAnswer = this.answerValue;
-      console.log(this.examQuestionList[this.answerIndex].userAnswer);
       this.answerStatus = this.getAnswerItemResultFun(
         this.examQuestionList[this.answerIndex]
       )
@@ -369,21 +380,40 @@ export default {
     },
     // 方法：判断当前题目是否正确
     getAnswerItemResultFun(item) {
-      console.log(item);
+      // let isSure = false;
+      // let sureNum = 0;
+      // item.finalAnswer.forEach(it => {
+      //   item.userAnswer.forEach(answerItem => {
+      //     if (it === answerItem) {
+      //       sureNum++;
+      //     }
+      //   });
+      // });
+      // if (sureNum === item.finalAnswer.length) {
+      //   isSure = true;
+      // }
+      // return isSure;
       let isSure = false;
-      let sureNum = 0;
-      item.finalAnswer.forEach(it => {
-        item.userAnswer.forEach(answerItem => {
-          if (it === answerItem) {
-            sureNum++;
-          }
-        });
-      });
-      if (sureNum === item.finalAnswer.length) {
+      let lastAnswer = [""];
+      lastAnswer[0] = this.getUserAnswerSortFun(item);
+      if (lastAnswer[0] === item.finalAnswer[0]) {
         isSure = true;
       }
       return isSure;
     },
+    // 获取用户所选选项的升序编号答案
+    getUserAnswerSortFun(item) {
+      let newUnserAnswer = [];
+      item.answers.forEach((itemOne, indexOne) => {
+        item.userAnswer.forEach(itemTwo => {
+          if (itemOne === itemTwo) {
+            newUnserAnswer.push(this.formatQuestionIndex(indexOne));
+          }
+        });
+      });
+      newUnserAnswer.sort();
+      return newUnserAnswer.join("");
+    },
     // 操作：下一题
     handleNextFun() {
       let nextIndex = this.answerIndex + 1;
@@ -438,16 +468,9 @@ export default {
     // 方法：计算成绩
     getUserExamAllPointsFun() {
       let grades = 0;
-      this.examQuestionList.forEach((item, index) => {
-        let sureNum = 0;
-        item.finalAnswer.forEach(it => {
-          item.userAnswer.forEach(answerItem => {
-            if (it === answerItem) {
-              sureNum++;
-            }
-          });
-        });
-        if (sureNum === item.finalAnswer.length) {
+      this.examQuestionList.forEach(item => {
+        let isSure = this.getAnswerItemResultFun(item);
+        if (isSure) {
           grades++; // 默认每题一分
         }
       });
@@ -457,8 +480,8 @@ export default {
     getUserExamAllAnswersFun() {
       let answers = [];
       this.examQuestionList.forEach((item, index) => {
-        // answers[index] = item.userAnswer;
-        answers[index] = item.userAnswer.join("||");
+        // answers[index] = item.userAnswer.join("||");
+        answers[index] = this.getUserAnswerSortFun(item);
       });
       return answers;
     },
@@ -580,6 +603,19 @@ export default {
       .exam-question-analysis {
         padding-top: 0.25rem;
       }
+      .exam-question-card-loading,
+      .exam-question-card-nodata {
+        width: 100%;
+        height: 5rem;
+        color: #333;
+        font-size: 0.7rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .exam-question-card-loading {
+        color: #0088e9;
+      }
     }
   }
 }

src/views/home/exam/page-exam-item-doing.vue

@@ -1,12 +1,12 @@
 <template>
-  <div v-if="isInited" class="page-exam-question-box">
+  <div class="page-exam-question-box">
     <van-nav-bar title="考试" />
     <!-- 倒计时 -->
-    <div class="exam-question-countdown">
+    <div v-if="isInited" class="exam-question-countdown">
       <span>剩余考试时间：{{ timeDiff }}</span>
     </div>
     <!-- 题序盒子 -->
-    <div class="exam-question-list">
+    <div v-if="isInited" class="exam-question-list">
       <!-- 辅助间隙，样式问题 -->
       <div class="exam-question-start">st</div>
       <!-- 题序 -->
@@ -27,9 +27,9 @@
     </div>
     <!-- 题目卡片 -->
     <div class="exam-question-div">
-      <div class="exam-question-card">
+      <div v-if="examQuestionList.length > 0" class="exam-question-card">
         <!-- 标题、分数、题页 -->
-        <div v-if="examQuestionList.length" class="exam-question-head">
+        <div class="exam-question-head">
           <div class="exam-question-head-left">
             <div class="exam-question-head-left-icon"></div>
             <div class="exam-question-head-left-txt">
@@ -48,23 +48,20 @@
           </div>
         </div>
         <!-- 描述 -->
-        <div v-if="examQuestionList.length" class="exam-question-describe">
+        <div class="exam-question-describe">
           {{
             examQuestionList[answerIndex].questionContent ||
               examQuestionList[answerIndex].content
           }}
         </div>
         <!-- 答题列表 -->
-        <!-- 单选题、多选题的选项区域 -->
+        <!-- 单选题、多选题、判断题 的选项区域 -->
         <div
           v-if="
-            examQuestionList.length &&
-              (examQuestionList[answerIndex].type ===
-                questionType.TrueOrFalse ||
-                examQuestionList[answerIndex].type ===
-                  questionType.singleChoice ||
-                examQuestionList[answerIndex].type ===
-                  questionType.multipleChoice)
+            examQuestionList[answerIndex].type === questionType.TrueOrFalse ||
+              examQuestionList[answerIndex].type ===
+                questionType.singleChoice ||
+              examQuestionList[answerIndex].type === questionType.multipleChoice
           "
           class="exam-question-options"
         >
@@ -82,10 +79,7 @@
         </div>
         <!-- 填空题的答题区域 -->
         <div
-          v-if="
-            examQuestionList.length &&
-              examQuestionList[answerIndex].type === questionType.gapFilling
-          "
+          v-if="examQuestionList[answerIndex].type === questionType.gapFilling"
           class="exam-question-gapFilling"
         >
           <textarea
@@ -118,6 +112,15 @@
           >
         </div>
       </div>
+      <div v-else class="exam-question-card">
+        <div v-if="isInited" class="exam-question-card-nodata">暂无数据</div>
+        <div
+          v-else
+          class="exam-question-card-nodata exam-question-card-loading"
+        >
+          加载中...
+        </div>
+      </div>
     </div>
     <!-- 拍照用 -->
     <input
@@ -126,7 +129,7 @@
       name="file"
       accept="image/*"
       capture="user"
-      @change="startTakePhotoFUn"
+      @change="takePhotoCallbackFun"
       style="display: none"
     />
   </div>
@@ -144,7 +147,7 @@ export default {
         singleChoice: "DanXuan", // 单选题
         multipleChoice: "DuoXuan", // 多选题
         gapFilling: "TianKong", // 填空题
-        TrueOrFalse: "PanDuanTi" // 判断题
+        TrueOrFalse: "PanDuan" // 判断题
       }, // 试题类型
       examEndTimeSeconds: null, // 考试结束时的毫秒秒数
       examBeforeHalfEndTimeSeconds: null, // 开始考试一半时间的毫秒秒数
@@ -157,6 +160,7 @@ export default {
       inputValue: [], // 填空题时输入框的值
       isInited: false, // 是否已初始化完毕
       isOverHalfTime: false, // 是否已超过1/3的考试时间
+      isTakePhoto: false, // 是否已进行了拍照
       answerTime: {
         startTime: 0,
         endTime: 0
@@ -176,7 +180,6 @@ export default {
     this.initDataFun(); // 初始化数据信息
   },
   beforeDestroy() {
-    console.log("in");
     if (this.interval) {
       clearInterval(this.interval); // 销毁前清空计时器
     }
@@ -210,7 +213,6 @@ export default {
     // 方法：开始考试
     examStartFun() {
       this.$store.commit("toggleLoading", true);
-      console.log(this.chooseEngneeringWork);
       let params = {
         type: this.chooseEngneeringWork.value
       };
@@ -331,10 +333,6 @@ export default {
         let curTime = Date.now(); // 获取当前时间的毫秒时间戳
         if (!isStart) {
           this.examBeforeHalfEndTimeSeconds = this.examEndTimeSeconds - curTime; // 获取当前开始考试的时间的毫秒秒数
-          console.log(
-            "examBeforeHalfEndTimeSeconds：",
-            this.examBeforeHalfEndTimeSeconds
-          );
           isStart = true;
         }
         let diffTime = this.examEndTimeSeconds - curTime; // 计算出当前时间距离目标时间的时间差
@@ -386,13 +384,10 @@ export default {
           break;
         case this.questionType.gapFilling:
           typeTxt = "填空题";
-          console.log(content);
           questionInputNum = this.getPlaceholderCount(content);
           questionContent = content.replace("$PH$", "()");
-          console.log(questionContent, questionInputNum);
           break;
         case this.questionType.TrueOrFalse:
-          console.log("判断题");
           typeTxt = "判断题";
           break;
         default:
@@ -423,6 +418,7 @@ export default {
       switch (item.type) {
         case this.questionType.singleChoice:
         case this.questionType.multipleChoice:
+        case this.questionType.TrueOrFalse:
           this.answerValue = [...new Set(item.userAnswer)];
           break;
         case this.questionType.gapFilling:
@@ -488,7 +484,7 @@ export default {
       this.examQuestionList[this.answerIndex].userAnswer = this.answerValue;
       this.handleNextFun();
       // 若超过了了考试时间的1/3，则需要调用拍照
-      if (this.isOverHalfTime) {
+      if (this.isOverHalfTime && !this.isTakePhoto) {
         this.$refs.uploadUserInput.click(); // 调用拍照工具
       }
     },
@@ -555,38 +551,66 @@ export default {
     getUserExamAllPointsFun() {
       let grades = 0;
       this.examQuestionList.forEach((item, index) => {
-        let sureNum = 0;
-        item.finalAnswer.forEach(it => {
-          item.userAnswer.forEach(answerItem => {
-            if (it === answerItem) {
-              sureNum++;
-            }
-          });
-        });
-        if (sureNum === item.finalAnswer.length) {
+        // let sureNum = 0;
+        // item.finalAnswer.forEach(it => {
+        //   item.userAnswer.forEach(answerItem => {
+        //     if (it === answerItem) {
+        //       sureNum++;
+        //     }
+        //   });
+        // });
+        // if (sureNum === item.finalAnswer.length) {
+        //   grades++; // 默认每题一分
+        // }
+        let isSure = this.getAnswerItemResultFun(item);
+        if (isSure) {
           grades++; // 默认每题一分
         }
       });
       return grades;
     },
+    // 方法：判断当前题目是否正确
+    getAnswerItemResultFun(item) {
+      let isSure = false;
+      let lastAnswer = [""];
+      lastAnswer[0] = this.getUserAnswerSortFun(item);
+      if (lastAnswer[0] === item.finalAnswer[0]) {
+        isSure = true;
+      }
+      return isSure;
+    },
+    // 获取用户所选选项的升序编号答案
+    getUserAnswerSortFun(item) {
+      let newUnserAnswer = [];
+      item.answers.forEach((itemOne, indexOne) => {
+        item.userAnswer.forEach(itemTwo => {
+          if (itemOne === itemTwo) {
+            newUnserAnswer.push(this.formatQuestionIndex(indexOne));
+          }
+        });
+      });
+      newUnserAnswer.sort();
+      return newUnserAnswer.join("");
+    },
     // 方法：获取题目的答案
     getUserExamAllAnswersFun() {
       let answers = [];
       this.examQuestionList.forEach((item, index) => {
-        // answers[index] = item.userAnswer;
-        answers[index] = item.userAnswer.join("||");
+        // answers[index] = item.userAnswer.join("||");
+        answers[index] = this.getUserAnswerSortFun(item);
       });
       return answers;
     },
     // 方法：开始考试
-    startTakePhotoFUn(event) {
+    takePhotoCallbackFun(event) {
       let file = event.target.files[0]; // 获取文件对象
       if (file) {
+        this.isTakePhoto = true;
         // let fd = new FormData(); // 构造formdata对象
         // fd.append("file", file); // 向formdata里面存放键值对存放图片文件
         // fd.append("userId", this.userInfo.id); // 向formdata里面存放用户的ID
         // console.log(fd);
-        this.$router.replace({ name: "Exam" });
+        // this.$router.replace({ name: "Exam" });
       } else {
         Toast("请完成拍照后，再进行考试");
       }
@@ -735,6 +759,19 @@ export default {
           margin-top: 0.75rem;
         }
       }
+      .exam-question-card-loading,
+      .exam-question-card-nodata {
+        width: 100%;
+        height: 5rem;
+        color: #333;
+        font-size: 0.7rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .exam-question-card-loading {
+        color: #0088e9;
+      }
     }
   }
 }

src/views/home/learn/page-learn-content.vue

@@ -189,7 +189,7 @@ export default {
         if (this.seconds > 0) {
           this.seconds--;
         } else {
-          Toast("学习完成，积分+1");
+          // Toast("学习完成，积分+1");
           if (this.isReadable) {
             this.isReadable = false;
             this.ReadMaterial();