student-client/src/features/OnlineExam/Examing/QuestionBody.vue

<template>
  <div
    v-if="questionDetail"
    :key="examQuestion.questionId"
    class="question-body"
  >
    <QuestionContainer
      :node="questionDetail.container"
      :exam-question="examQuestion"
    />
    <!-- <div v-html="questionDetail.text"></div> -->
    <!-- <div v-html="questionDetail.audio"></div> -->
    <!-- <div
      v-for="{ src, name } in questionDetail.audio"
      :key="name"
      class="audio-container"
    >
      <div style="position: relative; margin-bottom: 2px;" class="audio-div">
        <QuestionAudio
          key="src"
          :name="name"
          :src="src"
          :play-count="
            examQuestion.limitedPlayTimes ? getAudioPlayedTimes(name) : 1
          "
          @played="played(name)"
        />
        <span v-if="examQuestion.limitedPlayTimes">
          （剩余播放次数：{{ getAudioPlayedTimes(name) }}）
        </span>
        <div
          v-if="audioInPlay.has(name)"
          style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;"
        ></div>
      </div>
    </div> -->
  </div>

  <div v-else>获取试题中...</div>
</template>

<script>
// import QuestionAudio from "./QuestionAudio";
import QuestionContainer from "./QuestionContainer";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");

export default {
  name: "QuestionBody",
  components: {
    // QuestionAudio,
    QuestionContainer,
  },
  props: {
    questionBody: { type: String, default: "" },
    examQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      questionDetail: null,
      audioPlayTimes: null,
      audioInPlay: new Set(),
    };
  },
  computed: {
    ...mapState(["allAudioPlayTimes"]),
  },
  watch: {
    questionBody() {
      this.parseQuestion();
    },
    examQuestion() {
      this.parseQuestion();
    },
  },
  mounted() {
    this.parseQuestion();
    // this.$nextTick(() => {
    //   const ap = document.querySelectorAll(".audio-placeholder");
    //   const as = document.querySelectorAll(".audio-container");
    //   [...ap].forEach((v, i) => (v.innerHTML = [...as][i].innerHTML));
    // });
  },
  methods: {
    ...mapMutations(["updateExamQuestion", "updateQuestionAudioPlayTimes"]),
    async parseQuestion() {
      let question = {};
      const container = document.createElement("div");
      if (this.questionBody.includes("question-audio")) {
        question.text = this.questionBody.replace(
          /<a.*?name="([^"]*)".*?question-audio.*?url="([^"]*)".*?\/a>/g,
          "<span class='audio-placeholder' data-name='$1' data-src='$2'></span>"
        );
        // console.log(question.text);
        // 测试 v-html中含有directive是否生效。结论：不生效
        question.audio = [];
        let re;
        if (/<a.*?question-audio.*?\/a>/.test(this.questionBody)) {
          re = /name="([^"]*)".*?question-audio.*?url="([^"]*)"/g;
        }
        let array1;
        while ((array1 = re.exec(this.questionBody)) !== null) {
          question.audio.push({ name: array1[1], src: array1[2] });
        }
      } else {
        question.text = this.questionBody;
        question.audio = [];
      }
      container.innerHTML = question.text;
      question.container = container;
      this.questionDetail = question;
    },
    // played(name) {
    //   if (!this.examQuestion.limitedPlayTimes) {
    //     // 如果没有设置音频播放次数，可无限播放
    //     return false;
    //   }
    //   console.log("开始播放");

    //   // 正在播放中
    //   this.updateQuestionAudioPlayTimes(name);
    // },
    // getAudioPlayedTimes(name) {
    //   return Math.max(
    //     this.examQuestion.limitedPlayTimes -
    //       (this.allAudioPlayTimes.find(a => a.name === name) || { times: 0 })
    //         .times,
    //     0
    //   );
    // },
  },
};
</script>

<style>
.audio-div {
  display: inline-flex;
  align-items: center;
}
/* .question-body audio::-webkit-media-controls-timeline,
.question-body audio::-webkit-media-controls-timeline-container {
  display: none;
} */
</style>