eep_page/src/views/book/courseware/preview/components/h5_games/H5GamesPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="imageText-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
    <div ref="fullscreenElement" :class="[full_type ? 'full-screen-games' : '']">
      <el-button
        type="primary"
        :class="[full_type ? 'exit-btn' : '']"
        style="margin-bottom: 10px"
        :style="{
          background:
            data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
          borderColor:
            data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#165dff',
        }"
        @click="toggleFullScreen"
        >{{ full_type ? convertText('退出全屏') : convertText('进入全屏') }}</el-button
      >
      <iframe
        :src="games_url"
        width="100%"
        :height="full_type ? '100%' : isMobile ? '400px' : '580px'"
        style="border: none"
      ></iframe>
    </div>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import { getH5GamesData } from '@/views/book/courseware/data/h5Games';
import { H5StartupFile } from '@/api/app';
export default {
  name: 'H5GamesPreview',
  components: {},
  mixins: [PreviewMixin],
  props: {
    isMobile: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: getH5GamesData(),
      games_url: '',
      full_type: false,
      scroll_top: 0, // 预览时滚动的高度 切换全屏时使用
    };
  },
  watch: {
    'data.file_list.length': {
      handler() {
        this.initData();
      },
    },
  },
  created() {
    this.initData();
  },
  mounted() {
    document.addEventListener('keyup', (e) => {
      if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27) {
        this.full_type = false;
        this.$nextTick(() => {
          const div = document.querySelector('.main-container');
          if (div) {
            div.scrollTop = this.scroll_top;
          }
        });
      }
    });
  },
  methods: {
    initData() {
      this.data.file_list.forEach((item) => {
        const suffix = item.file_url.slice(item.file_url.lastIndexOf('.') + 1, item.file_url.length).toLowerCase();
        if (suffix === 'html') {
          this.games_url = item.file_url;
        } else {
          H5StartupFile({ file_id: item.file_id, index_file_name: 'index.html' }).then((res) => {
            this.games_url = res.file_url;
          });
        }
      });
    },
    toggleFullScreen() {
      const div = document.querySelector('.main-container');
      if (div) {
        if (this.full_type) {
          this.full_type = false;
          this.$nextTick(() => {
            div.scrollTop = this.scroll_top;
          });
        } else {
          this.scroll_top = div.scrollTop;
          this.full_type = true;
        }
      } else {
        this.full_type = !this.full_type;
      }
    },
    /**
     * 获取无文本内容的数据结构，用于保存为个人模板时的样式模板
     */
    getNoTextContentData() {
      let noTextContentData = JSON.parse(JSON.stringify(this.data));
      const resetFieldMap = {
        file_list: [],
        file_id_list: [],
        file_info: {}, // 存放文件序号
      };

      Object.assign(noTextContentData, resetFieldMap);

      if (noTextContentData.answer) {
        noTextContentData.answer.answer_list = [];
        noTextContentData.answer.reference_answer = '';
      }

      return noTextContentData;
    },
  },
};
</script>

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

.exit-btn {
  position: fixed;
  top: 10px;
  left: 10px;
}

.full-screen-games {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100vh;
}
</style>