eep_page/src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="imageText-preview" :style="getAreaStyle()">
    <template v-if="data.mp3_list && data.mp3_list.length > 0 && mp3_url">
      <AudioLine
        audioId="Audio"
        :mp3="mp3_url"
        :getCurTime="getCurTime"
        :duration="data.mp3_list[0].media_duration"
        :mp3Source="data.mp3_list[0].source"
        :width="audio_width"
        :ed="ed"
        type="audioLine"
        ref="audioLine"
        @emptyEd="emptyEd"
      />
    </template>
    <div
      class="img-box"
      :style="{
        background: 'url(' + image_url + ') center / contain no-repeat',
        width: data.image_width + 'px',
        height: data.image_height + 'px',
      }"
      v-if="image_url"
    >
      <div
        v-for="(itemP, indexP) in data.text_list"
        :key="indexP"
        :class="['position-item', mageazineDetailIndex === indexP ? 'active' : '']"
        :style="{
          width: itemP.width,
          height: itemP.height,
          left: itemP.x,
          top: itemP.y,
        }"
        @click="handleChangePosition(indexP)"
      ></div>
      <div
        v-for="(itemP, indexP) in data.input_list"
        :key="indexP"
        :class="['position-item position-item-input', 'active']"
        :style="{
          width: itemP.width,
          height: itemP.height,
          left: itemP.x,
          top: itemP.y,
        }"
      >
        <el-input
          type="textarea"
          v-model="answer.answer_list[indexP].text"
          style="height: 100%"
          placeholder="请输入"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import AudioLine from '../voice_matrix/components/AudioLine.vue';
import { getImageTextData } from '@/views/book/courseware/data/imageText';
import { GetFileURLMap } from '@/api/app';
export default {
  name: 'ImageTextPreview',

  components: { AudioLine },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getImageTextData(),
      curTime: 0,
      paraIndex: -1, //段落索引
      sentIndex: -1, // 句子索引
      ed: undefined,
      mp3_url: '',
      image_url: '',
      audio_width: 0,
      mageazineDetailIndex: null, // 当前高亮第几个
      mageazineDetailShow: false,
      inputIndex: null,
    };
  },
  methods: {
    initData() {
      if (!this.isJudgingRightWrong) {
        this.answer.answer_list = [];
        this.data.input_list.forEach((item, index) => {
          let obj = {
            text: '',
            answer: item.text,
            id: item.id,
          };
          this.answer.answer_list.push(obj);
        });
      }

      this.data.image_list.forEach((item) => {
        GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
          this.image_url = url_map[item.file_id];
        });
      });
      this.data.mp3_list.forEach((item) => {
        GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
          this.mp3_url = url_map[item.file_id];
        });
      });
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
      this.getSentIndex(this.curTime);
    },
    getSentIndex(curTime) {
      // for (let i = 0; i < this.curQue.wordTime.length; i++) {
      //   let bg = this.curQue.wordTime[i].bg;
      //   let ed = this.curQue.wordTime[i].ed;
      //   if (curTime >= bg && curTime <= ed) {
      //     this.sentIndex = i;
      //     break;
      //   }
      // }
    },
    emptyEd() {
      this.ed = undefined;
    },
    // 切换画刊里面的卡片
    handleChangePosition(index) {
      if (this.$refs.audioLine.audio.playing) {
        this.$refs.audioLine.PlayAudio();
      }
      this.mageazineDetailIndex = index;
      this.mageazineDetailShow = true;
    },
  },
  created() {
    this.initData();
  },
  mounted() {
    this.audio_width = document.getElementsByClassName('imageText-preview')[0].clientWidth - 150;
  },
};
</script>

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

.position-item {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  border: 3px solid transparent;

  &.active {
    border-color: #ff1616;
  }

  &:hover {
    border-color: #ff1616;
  }

  &.position-item-input {
    border-color: #f90;
  }

  :deep .el-textarea__inner {
    height: 100%;
    font-family: 'League', '楷体';
    text-align: center;
    resize: none;
    background: transparent;
    border: none;
  }
}

.img-box {
  position: relative;
  margin: 20px auto;
}
</style>