音频播放不可暂停

src/features/OnlineExam/Examing/QuestionBody.vue

@@ -3,8 +3,12 @@
     <div v-html="questionDetail.text"></div>
     <!-- <div v-html="questionDetail.audio"></div> -->
     <div v-for="({src, name}, index) in questionDetail.audio" :key="name" class="audio-div">
-      <audio controls preload="auto" controlsList='nodownload' :key="src" :name="name" :src="src" @click="audioClicked" @play="($event) => played(index, $event)"></audio>
-      <span>（剩余播放次数：{{getAudioPlayedTimes(name)}}）</span><br />
+      <div style="position: relative;" class="audio-div">
+        <audio controls preload="auto" controlsList='nodownload' :key="src" :name="name" :src="src" @play="($event) => played(index, $event)" @ended="() => audioEnded(name)" @click="($event) => audioClicked(index, $event)"></audio>
+        <span v-if="examQuestion.limitedPlayTimes">（剩余播放次数：{{getAudioPlayedTimes(name)}}）</span><br />
+        <div v-if="audioInPlay.has(name)" style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;">
+        </div>
+      </div>
     </div>
   </div>
 
@@ -20,7 +24,11 @@ const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 export default {
   name: "QuestionBody",
   data() {
-    return { questionDetail: null, audioPlayTimes: null };
+    return {
+      questionDetail: null,
+      audioPlayTimes: null,
+      audioInPlay: new Set()
+    };
   },
   props: {
     questionBody: String,
@@ -126,13 +134,20 @@ export default {
     //     });
     //   });
     // },
-    audioClicked($event) {
+    audioClicked(index, $event) {
       if ($event.target.paused === false) {
         // 正在播放中，不能暂停
         $event.preventDefault();
       }
     },
+    audioEnded(name) {
+      this.audioInPlay.delete(name);
+    },
     played(index, $event) {
+      if (!this.examQuestion.limitedPlayTimes) {
+        // 如果没有设置音频播放次数
+        return false;
+      }
       const limitedPlayTimes = this.examQuestion.limitedPlayTimes;
       console.log("开始播放");
       const name = $event.target.attributes.name.value;
@@ -144,6 +159,7 @@ export default {
         $event.target.pause();
         return;
       }
+      this.audioInPlay.add(name);
 
       // var audio = new Audio($event.target.src);
       // audio.play();
@@ -153,7 +169,10 @@ export default {
       // } else {
       //   this.audioPlayTimes.push({ name: name, times: 1 });
       // }
-      this.updateQuestionAudioPlayTimes(name);
+      if ($event.target.paused === false) {
+        // 正在播放中
+        this.updateQuestionAudioPlayTimes(name);
+      }
     },
     getAudioPlayedTimes(name) {
       return Math.max(

src/features/OnlineExam/Examing/QuestionView.vue

@@ -51,7 +51,8 @@ export default {
   data() {
     return {
       parentQuestionBody: null,
-      question: null
+      question: null,
+      updateQuestioning: false // TODO: 更新问题时，隐藏旧内容。可能用不着
     };
   },
   props: {
@@ -63,6 +64,7 @@ export default {
   methods: {
     ...mapMutations(["updateExamQuestion"]),
     async updateQuestion() {
+      this.updateQuestioning = true;
       const currentExamQuestion = this.examQuestion; // 避免以后执行时，this.examQuestion换掉了
       const examRecordDataId = this.$route.params.examRecordDataId;
 
@@ -75,10 +77,12 @@ export default {
             examRecordDataId
         );
       } catch (e) {
+        this.updateQuestioning = false;
         this.parentQuestionBody = null;
         this.question = null;
         return;
       }
+      this.updateQuestioning = false;
       const question = qContentRes.data;
 
       this.updateExamQuestion({

src/utils/axios.js

@@ -92,7 +92,7 @@ qmInstance.interceptors.response.use(
 );
 
 qmInstance.defaults.withCredentials = true; //允许跨域携带cookie
-qmInstance.defaults.timeout = 10000; //超时时间
+qmInstance.defaults.timeout = 20 * 1000; //超时时间
 qmInstance.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; //标识这是一个 ajax 请求
 
 qmInstance.get = cachingGet(qmInstance.get, [