解决音频播放次数更新到其他问题的bug

src/components/FaceRecognition/FaceRecognition.vue

@@ -178,6 +178,10 @@ export default {
             "&examRecordDataId=" +
             examRecordDataId
         )).data;
+        if (this.$route.name !== "OnlineExamingHome") {
+          // 非考试页，不显示结果，也不继续查询
+          return;
+        }
         if (snapRes.isCompleted) {
           if (snapRes.isStranger) {
             this.$Message.error("请独立考试");

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -55,7 +55,11 @@ export default {
       this.toggleSnapNow();
     }, 5 * 1000); // 一分钟后抓拍
 
-    if (/^\d+$/.test(this.$route.query.faceVerifyMinute)) {
+    // 仅在线上使用活体检测
+    if (
+      process.env.NODE_ENV === "production" &&
+      /^\d+$/.test(this.$route.query.faceVerifyMinute)
+    ) {
       setTimeout(() => {
         this.toggleSnapNow();
         this.$Message.info("30秒后开始活体检测");

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -1,7 +1,12 @@
 <template>
-  <div v-if="questionDetail" class="question-body">
+  <div v-if="questionDetail" class="question-body" :key="examQuestion.order">
     <div v-html="questionDetail.text"></div>
-    <div v-html="questionDetail.audio"></div>
+    <!-- <div v-html="questionDetail.audio"></div> -->
+    <div v-for="(ad, index) in questionDetail.audio" :key="ad">
+      <audio controls controlsList='nodownload' :src="ad" @play="($event) => played(index, $event)"></audio>
+      <span>（剩余播放次数：{{examQuestion.limitedPlayTimes -
+        audioPlayTimes[index]}}）</span><br />
+    </div>
   </div>
 </template>
 
@@ -12,7 +17,7 @@ const { mapMutations } = createNamespacedHelpers("examingHomeModule");
 export default {
   name: "QuestionBody",
   data() {
-    return { questionDetail: null };
+    return { questionDetail: null, audioPlayTimes: null };
   },
   props: {
     questionBody: String,
@@ -21,6 +26,12 @@ export default {
   mounted() {
     this.parseQuestion();
   },
+  // updated() {
+  //   if (this.questionBody.includes("question-audio")) {
+  //     console.log(this.questionBody);
+  //     this.bindAudioPlay();
+  //   }
+  // },
   methods: {
     ...mapMutations(["updateExamQuestion"]),
     async parseQuestion() {
@@ -29,9 +40,9 @@ export default {
         let audioArray = this.questionBody.match(/<a.*?question-audio.*?\/a>/g);
         if (!this.examQuestion.audioPlayTimes) {
           // 初始化音频播放次数
-          this.examQuestion.audioPlayTimes = new Array(audioArray.length).fill(
-            0
-          );
+          this.audioPlayTimes = new Array(audioArray.length).fill(0);
+        } else {
+          this.audioPlayTimes = this.examQuestion.audioPlayTimes;
         }
         question.text = this.questionBody.replace(
           /<a.*?question-audio.*?\/a>/g,
@@ -39,63 +50,100 @@ export default {
         );
         // 测试 v-html中含有directive是否生效。结论：不生效
         // question.text += "<span v-html='<text>abc</text>'>empty</span>";
-        audioArray = audioArray.map((v, i) => {
-          const remainTimes =
-            this.examQuestion.limitedPlayTimes -
-            this.examQuestion.audioPlayTimes[i];
-          if (remainTimes <= 0) {
-            v = v.replace("<a", "<a disabled"); // disabled不生效，仅仅起标明作用
-            v = v.replace(/url=/g, "");
-          }
-          return `${v}<span>（剩余播放次数：${remainTimes}）</span><br/>`;
-        });
-        question.audio = audioArray
-          .join("")
-          .replace(/<a/g, "<audio controls controlsList='nodownload'")
-          .replace(/url=/g, "src=")
-          .replace(/a>/g, "audio>");
+        // audioArray = audioArray.map((v, i) => {
+        //   const remainTimes =
+        //     this.examQuestion.limitedPlayTimes -
+        //     this.examQuestion.audioPlayTimes[i];
+        //   if (remainTimes <= 0) {
+        //     v = v.replace("<a", "<a disabled"); // disabled不生效，仅仅起标明作用
+        //     v = v.replace(/url=/g, "");
+        //   }
+        //   return `${v}<span>（剩余播放次数：${remainTimes}）</span><br/>`;
+        // });
+        // question.audio = audioArray
+        //   .join("")
+        //   .replace(/<a/g, "<audio controls controlsList='nodownload'")
+        //   .replace(/url=/g, "src=")
+        //   .replace(/a>/g, "audio>");
 
-        setTimeout(this.bindAudioPlay, 1000);
+        // console.log(this.questionBody);
+        // console.log(this.questionBody.match(/url="[^"]*"/g));
+        // question.audio = this.questionBody
+        //   .match(/url="[^"]*"/g)
+        //   .map(v => v.replace("url="));
+
+        // /question-audio.*?url="[^"]*"/.exec(this.questionBody)
+
+        question.audio = [];
+        let re = /question-audio.*?url="([^"]*)"/g;
+        let array1;
+        while ((array1 = re.exec(this.questionBody)) !== null) {
+          // console.log(`Found ${array1[0]}. Next starts at ${re.lastIndex}.`);
+          // console.log(array1[1]);
+          question.audio.push(array1[1]);
+          // expected output: "Found foo. Next starts at 9."
+          // expected output: "Found foo. Next starts at 19."
+        }
+
+        // setTimeout(this.bindAudioPlay.bind(this), 1000);
       } else {
         question.text = this.questionBody;
-        question.audio = "";
+        question.audio = [];
       }
       this.questionDetail = question;
     },
-    bindAudioPlay() {
-      const audios = document.getElementsByTagName("audio");
-      if (audios.length === 0) {
-        setTimeout(this.bindAudioPlay, 1000);
+    // bindAudioPlay() {
+    //   const audios = document.getElementsByTagName("audio");
+    //   if (audios.length === 0) {
+    //     // setTimeout(this.bindAudioPlay.bind(this), 1000);
+    //     return;
+    //   }
+
+    //   [...audios].forEach((audio, index) => {
+    //     console.log("bind audio: order:" + this.examQuestion.order);
+    //     const order = this.examQuestion.order;
+    //     const limitedPlayTimes = this.examQuestion.limitedPlayTimes;
+    //     let audioPlayTimes = this.examQuestion.audioPlayTimes;
+
+    //     audio.addEventListener("play", () => {
+    //       console.log("开始播放");
+    //       if (limitedPlayTimes - audioPlayTimes <= 0) {
+    //         console.log("无剩余播放次数");
+    //       }
+    //       audioPlayTimes[index] = audioPlayTimes[index] + 1;
+    //       this.updateExamQuestion({
+    //         order: order,
+    //         audioPlayTimes: audioPlayTimes
+    //       });
+    //     });
+    //     audio.addEventListener("ended", () => {
+    //       console.log("结束播放");
+    //       this.parseQuestion(); // 不会死循环，因为这个是音频播放触发的
+    //     });
+    //   });
+    // },
+    played(index, $event) {
+      const limitedPlayTimes = this.examQuestion.limitedPlayTimes;
+      let audioPlayTimes = this.audioPlayTimes;
+      console.log("开始播放");
+      if (limitedPlayTimes - audioPlayTimes[index] <= 0) {
+        console.log("无剩余播放次数");
+        $event.target.pause();
         return;
       }
-
-      [...audios].forEach((audio, index) => {
-        audio.addEventListener("play", () => {
-          console.log("开始播放");
-          if (
-            this.examQuestion.limitedPlayTimes -
-              this.examQuestion.audioPlayTimes[index] <=
-            0
-          ) {
-            console.log("无剩余播放次数");
-          }
-        });
-        audio.addEventListener("ended", () => {
-          console.log("结束播放");
-          this.examQuestion.audioPlayTimes[index] =
-            this.examQuestion.audioPlayTimes[index] + 1;
-          this.updateExamQuestion({
-            order: this.examQuestion.order,
-            audioPlayTimes: this.examQuestion.audioPlayTimes
-          });
-          this.parseQuestion(); // 不会死循环，因为这个是音频播放触发的
-        });
+      audioPlayTimes[index] = audioPlayTimes[index] + 1;
+      this.updateExamQuestion({
+        order: this.examQuestion.order,
+        audioPlayTimes: audioPlayTimes
       });
     }
   },
   watch: {
     questionBody() {
       this.parseQuestion();
+    },
+    examQuestion() {
+      this.parseQuestion();
     }
   }
 };