GCLS_Page_Learn/src/components/live/CurMaterial.vue

<template>
  <el-dialog
    class="cur-material"
    :visible="dialogVisibleMaterial"
    width="900px"
    title="当前推送课件"
    @close="dialogMaterialClose"
  >
    <div class="material-name">{{ materialName }}</div>

    <template v-if="materialType === 'COURSEWARE'">
      <question :context="context" />
    </template>
    <template v-else>
      <template v-if="fileType === 'pdf'">
        <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
      </template>

      <template v-else-if="isImage(fileType)">
        <el-image fit="contain" :src="file_url_https" />
      </template>

      <template v-if="fileType !== 'pdf'">
        <iframe
          :src="'https://view.officeapps.live.com/op/view.aspx?src=' + `${file_url_https}`"
          width="100%"
          height="490px"
          scrolling="no"
        >
        </iframe>
      </template>
    </template>

    <div slot="footer">
      <el-button type="primary" @click="finishMyMaterial">完成</el-button>
    </div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf';
import { GetCoursewareContent_View } from '@/api/course';
import { GetFileStoreInfo } from '@/api/app';
import { FinishMyMaterial } from '@/api/live';

export default {
  components: {
    pdf
  },
  props: {
    dialogVisibleMaterial: {
      default: false,
      type: Boolean
    },
    taskId: {
      default: '',
      type: String
    },
    materialId: {
      default: '',
      type: String
    },
    materialName: {
      default: '',
      type: String
    },
    materialType: {
      default: '',
      type: String
    },
    materialPictureUrl: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      context: null,
      file_relative_path: '',
      file_url_https: '',
      pdfSrc: '',
      numPages: 1
    };
  },
  computed: {
    fileType() {
      return this.file_url_https.slice(
        this.file_url_https.lastIndexOf('.') + 1,
        this.file_url_https.length
      );
    }
  },
  watch: {
    materialId() {
      if (this.materialType === 'COURSEWARE') {
        this.getCoursewareContent_View();
      } else {
        this.getFileStoreInfo();
      }
    }
  },
  methods: {
    dialogMaterialClose() {
      this.$emit('dialogMaterialClose');
    },

    getCoursewareContent_View() {
      GetCoursewareContent_View({ id: this.materialId }).then(res => {
        if (res.content) {
          this.context = {
            id: this.currentCourse,
            ui_type: JSON.parse(res.content).question.ui_type,
            sort_number: 1,
            content: JSON.parse(res.content)
          };
        } else {
          this.context = null;
        }
      });
    },

    getFileStoreInfo() {
      GetFileStoreInfo({ file_id: this.materialId }).then(
        ({ file_relative_path, file_url_https }) => {
          this.file_relative_path = file_relative_path;
          this.file_url_https = file_url_https;
          let fileType = file_url_https.slice(
            file_url_https.lastIndexOf('.') + 1,
            file_url_https.length
          );
          if (fileType === 'pdf') {
            this.getNumPages(file_url_https);
          }
        }
      );
    },

    getNumPages(url) {
      let loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise
        .then(pdf => {
          this.pdfSrc = loadingTask;
          this.numPages = pdf.numPages;
        })
        .catch(err => {
          console.error('pdf加载失败', err);
          this.$message.error('pdf加载失败');
        });
    },

    finishMyMaterial() {
      FinishMyMaterial({
        task_id: this.taskId,
        material_id: this.materialId,
        material_type: this.materialType
      }).then(() => {
        this.$message.success('完成推送资料成功');
        this.$emit('dialogMaterialClose');
      });
    },

    isImage(type) {
      return ['jpeg', 'gif', 'jpg', 'png', 'bmp', 'pic', 'svg'].includes(type);
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin.scss';

.cur-material {
  @include dialog;

  .material-name {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
  }
}
</style>