GCLS_Page_Exercise/src/views/exercise_questions/preview/RepeatPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="repeat-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ data.property.question_number }}.
      </span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div
      v-if="isEnable(data.property.is_enable_description)"
      class="description rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>
    <div class="option-list">
      <li v-for="(item, i) in answer.answer_list" :key="i" :class="['option-item']">
        <span :style="{ fontSize: data.property.option_question_number_font_size }">
          {{ computeOptionMethods[data.option_number_show_mode](i) }}
        </span>
        <AudioPlay
          v-if="data.option_list[i] && data.option_list[i].audio_file_id"
          :file-id="data.option_list[i].audio_file_id"
          :show-slider="true"
        />
        <div
          v-if="sanitizeHTML(data.option_list[i].content)"
          class="option-content rich-text"
          v-html="sanitizeHTML(data.option_list[i].content)"
        ></div>
        <div class="sound-box">
          <SoundRecordPreview :wav-blob.sync="item.audio_file_id" :disabled="disabled" :type="'small'" />
        </div>
      </li>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import { computeOptionMethods } from '@/views/exercise_questions/data/common';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';

export default {
  name: 'RepeatPreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val || this.data.type !== 'repeat') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.handleData();
  },
  methods: {
    // 初始化数据
    handleData() {
      if (!this.isJudgingRightWrong) {
        this.answer.answer_list = [];
        this.data.option_list.forEach((item) => {
          let obj = {
            mark: item.mark,
            audio_file_id: '',
          };
          this.answer.answer_list.push(obj);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.repeat-preview {
  @include preview;

  .option-list {
    // display: flex;
    // flex-wrap: wrap;
    // row-gap: 16px;

    .option-item {
      display: flex;
      column-gap: 16px;
      align-items: center;
      width: 90%;
      margin-bottom: 16px;

      .option-content {
        width: 480px;
        padding: 8px 16px;
        color: #706f78;
        background-color: $content-color;
        border-radius: 40px;
      }

      .sound-box {
        padding: 4px;
        background: $content-color;
        border-radius: 40px;
      }
    }
  }
}
</style>