eep_page/src/views/book/courseware/preview/components/upload_control/UploadControlPreview.vue

<template>
  <div class="upload-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <UploadFile
        v-if="data.answer.answer_list.length === 0"
        :change-fill-id="changeFillId"
        :accept="acceptFileType"
        :fille-number="1"
        :file-list="data.file_list"
      />
      <div v-else class="preview-box">
        <template
          v-if="
            data.answer.answer_list[0].file_name.indexOf('png') !== -1 ||
            data.answer.answer_list[0].file_name.indexOf('jpg') !== -1 ||
            data.answer.answer_list[0].file_name.indexOf('jpeg') !== -1
          "
        >
          <el-image
            style="width: 100%; height: 260px"
            :src="data.answer.answer_list[0].file_url"
            :fit="'contain'"
            :preview-src-list="[data.answer.answer_list[0].file_url]"
          />
        </template>
        <template v-else>
          <iframe
            id="ifm"
            :src="data.answer.answer_list[0].newpath"
            width="100%"
            height="260px"
            frameborder="0"
          ></iframe>
        </template>
        <div class="dv">
          <div class="remove" :class="[isJudgingRightWrong ? 'notAllow' : '']" @click="remove">
            <img src="@/assets/red_remove.png" alt="" />
          </div>
          <div class="remove zoom-in" @click="showIframe = true">
            <i class="el-icon-zoom-in"></i>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="showIframe"
      :visible.sync="showIframe"
      :show-close="true"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="1000px"
      class="login-dialog"
    >
      <iframe id="ifms" :src="data.answer.answer_list[0].newpath" width="100%" height="600px" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import UploadFile from './components/UploadView.vue';
import { getUploadControlData } from '@/views/book/courseware/data/uploadControl';
const Base64 = require('js-base64').Base64;
import { getConfig } from '@/utils/auth';

export default {
  name: 'UploadControlPreview',
  components: { UploadFile },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getUploadControlData(),
      acceptFileType: '.png,.jpg,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.mp3,.wma,.mp4,.mov,.zip,.rar',
      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
      showIframe: false,
    };
  },
  methods: {
    changeFillId(fileList) {
      this.data.answer.answer_list = [fileList[0].response.file_info_list[0]];
      let path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(fileList[0].response.file_info_list[0].file_url)}`;
      this.data.answer.answer_list[0].newpath = path;
      this.$forceUpdate();
    },
    remove() {
      if (!this.isJudgingRightWrong) {
        if (this.data.answer.answer_list.length > 0) {
          this.data.answer.answer_list = [];
          this.$message.success('删除成功');
          this.$forceUpdate();
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.upload-preview {
  @include preview-base;
}

.preview-box {
  display: flex;
}

.dv {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  width: 72px;
  padding: 60px 0;

  .remove {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 39px;
    margin-left: 32px;
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 10%);
    border-radius: 8px;

    &.notAllow {
      cursor: not-allowed;
    }

    img {
      width: 24px;
      height: 24px;
    }
  }
}
</style>