GCLS_Page_Learn/src/components/live/CurMaterial.vue

<template>
  <el-dialog
    :class="['cur-material', { 'align-left': !isAlignCenter }]"
    :visible="dialogVisibleMaterial"
    :modal="false"
    width="900px"
    @close="dialogMaterialClose"
  >
    <div slot="title" class="dialog-header">
      <span class="dialog-header-title">当前推送课件</span>
      <span @click="isAlignCenter = !isAlignCenter">
        <svg-icon :icon-class="isAlignCenter ? 'align-center' : 'align-left'" />
      </span>
    </div>

    <div class="material-name">{{ materialName }}</div>

    <template v-if="materialType === 'COURSEWARE'">
      <bookquestion
        ref="courseware"
        :context="context"
        @handleBookUserAnswer="handleBookUserAnswer"
      />
    </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,
      exam_answer: '',
      file_relative_path: '',
      file_url_https: '',
      pdfSrc: '',
      numPages: 1,
      isAlignCenter: true
    };
  },
  computed: {
    fileType() {
      return this.file_url_https.slice(
        this.file_url_https.lastIndexOf('.') + 1,
        this.file_url_https.length
      );
    }
  },
  watch: {
    dialogVisibleMaterial(newVal) {
      if (!newVal) {
        this.context = null;
        this.exam_answer = '';
        this.file_relative_path = '';
        this.file_url_https = '';
        this.pdfSrc = '';
        this.numPages = 1;
      }
    },
    materialId() {
      if (this.materialType === 'COURSEWARE') {
        this.getCoursewareContent_View();
      } else {
        this.getFileStoreInfo();
      }
    }
  },
  methods: {
    dialogMaterialClose() {
      this.$emit('dialogMaterialClose');
    },

    getCoursewareContent_View() {
      GetCoursewareContent_View({ id: this.materialId }).then(({ content }) => {
        if (content) {
          this.context = {
            id: this.materialId,
            ui_type: JSON.parse(content).question.ui_type,
            content: JSON.parse(content)
          };
          this.$nextTick(() => {
            this.$refs.courseware.handleAnswerTimeStart();
          });
        } 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加载失败');
        });
    },

    handleBookUserAnswer(data) {
      this.exam_answer = data;
    },

    finishMyMaterial() {
      FinishMyMaterial({
        task_id: this.taskId,
        material_id: this.materialId,
        material_type: this.materialType,
        exam_answer: this.exam_answer
      }).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;

  &.align-left {
    .el-dialog {
      margin-left: 20px;
    }
  }

  .el-dialog__header {
    .dialog-header {
      display: flex;
      justify-content: space-between;
      padding-right: 24px;

      &-title {
        font-weight: bold;
        font-size: 18px;
        line-height: 24px;
      }

      .svg-icon {
        cursor: pointer;
      }
    }
  }

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