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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="talkpictrue-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
    <div class="content">
      <div class="content-left">
        <el-carousel
          type="card"
          height="276px"
          :autoplay="false"
          indicator-position="none"
          arrow="always"
          @change="changeImg"
        >
          <el-carousel-item v-for="(item, index) in data.option_list" :key="index">
            <el-image
              v-if="pic_list[item.picture_file_id]"
              style="width: 370px; height: 276px"
              :src="pic_list[item.picture_file_id]"
              fit="contain"
            />
          </el-carousel-item>
        </el-carousel>
        <h3 class="pic-title" v-html="sanitizeHTML(data.option_list[active_index].picture_title)"></h3>
        <p class="pic-info" v-html="sanitizeHTML(data.option_list[active_index].picture_info)"></p>

        <template v-if="isEnable(data.property.is_enable_voice_answer)">
          <!-- 语音作答 -->
          <SoundRecordPreview :wav-blob.sync="answer_list[active_index].audio_file_id" />
        </template>
      </div>
      <div class="content-right"></div>
    </div>
    <div v-if="isEnable(data.property.is_enable_reference_answer) && 1 === 2" class="reference-box">
      <h5 class="reference-title">参考答案</h5>
      <span class="reference-answer" v-html="sanitizeHTML(data.option_list[active_index].reference_answer)"></span>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import { GetFileStoreInfo } from '@/api/app';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';

export default {
  name: 'TalkPictruePreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      pic_list: {},
      active_index: 0,
      answer_list: [],
    };
  },
  created() {
    this.handleData();
  },
  methods: {
    // 初始化数据
    handleData() {
      this.answer_list = [];
      this.pic_list = {};
      this.active_index = 0;
      this.data.file_id_list.forEach((item) => {
        GetFileStoreInfo({ file_id: item }).then(({ file_id, file_url }) => {
          this.$set(this.pic_list, file_id, file_url);
        });
      });
      this.data.option_list.forEach((item) => {
        let obj = {
          mark: item.mark,
          audio_file_id: '',
        };
        this.answer_list.push(obj);
      });
    },
    changeImg(index) {
      this.active_index = index;
    },
  },
};
</script>

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

.talkpictrue-preview {
  @include preview;

  :deep p {
    margin: 0;
  }

  .content {
    display: flex;
    column-gap: 24px;

    &-left {
      flex-shrink: 0;
      width: 478px;

      :deep .el-carousel__item--card {
        width: 77%;
        margin-left: -13.5%;
      }

      .el-image {
        opacity: 0.2;
      }

      :deep .el-carousel__arrow:focus {
        outline: none;
      }

      .el-carousel__item--card.is-active {
        .el-image {
          background: #fff;
          opacity: 1;
        }
      }

      .pic-title {
        margin: 8px 0 4px;
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
        color: #000;
        word-break: break-word;
      }

      .pic-info {
        margin: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: #000;
        word-break: break-word;
      }
    }

    .sound-record-wrapper {
      margin-top: 8px;
    }

    &-right {
      flex: 1;

      .el-textarea {
        height: 276px;
        margin-bottom: 16px;
      }
    }
  }

  .reference-box {
    padding: 12px;
    background: #f9f8f9;

    .reference-title {
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: #4e5969;
    }
  }
}
</style>