GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/UploadControl.vue

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
    <UploadView
      :changeFillId="changeFillId"
      :accept="accept"
      :filleNumber="1"
      :fileList="curQue.fileList"
    />
    <div class="dv" v-loading="loading">
      <div class="main">
        <div class="content">
          <template v-if="curQue.data">
            <template
              v-if="
                curQue.data.file_name.indexOf('png') != -1 ||
                curQue.data.file_name.indexOf('jpg') != -1
              "
            >
              <img :src="curQue.data.file_url" alt="" />
            </template>
            <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
              <pdf
                ref="pdf"
                :src="curQue.data.fileRelativePath"
                v-for="i in curQue.data.numPages"
                :key="i"
                :page="i"
              >
              </pdf>
            </template>
          </template>
        </div>
      </div>
      <div class="remove" @click="remove">
        <img src="../../../assets/adult/red_remove.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import UploadView from "../common/UploadView.vue";
import pdf from "vue-pdf";
export default {
  components: {
    UploadView,
    pdf,
  },
  props: ["curQue", "changeCurQue"],
  data() {
    return {
      uploadType: "",
      fileList: [],
      data: null,
      numPages: null,
      accept: ".png,.jpg,.pdf",
      data_structure: {
        type: "upload_control_chs",
        name: "上传控件",
        title: "",
        fileList: [],
      },
      loading: false,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    remove() {
      this.data = null;
      this.curQue.data = null;
      this.curQue.fileList = [];
      this.$message.success("删除成功");
    },
    changeFillId(fileList, item, index) {
      this.curQue.fileList = fileList;
      this.curQue.data = fileList[0].response.file_info_list[0];
      if (this.curQue.data.file_name.indexOf("pdf" != -1)) {
        this.curQue.data = fileList[0].response.file_info_list[0];
        this.curQue.data.fileRelativePath =
          process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
        this.getNumPages();
      }
    },
    // 获取pdf的页数
    getNumPages() {
      let _this = this;
      let loadingTask = pdf.createLoadingTask(
        _this.curQue.data.fileRelativePath
      );
      loadingTask.promise
        .then((pdff) => {
          _this.numPages = pdff.numPages;
          _this.curQue.data.numPages = pdff.numPages;
          this.$forceUpdate();
        })
        .catch((err) => {
          this.$message.success("pdf 加载失败", err);
          this.data = null;
          this.curQue.data = null;
          this.curQue.fileList = [];
        });
    },

    initcurQue() {
      let data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.curQue) {
      this.initcurQue();
    } else {
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes {
  padding: 24px 0 24px 24px;
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  .dv {
    display: flex;
    align-items: center;
    .remove {
      width: 40px;
      height: 39px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 32px;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
  .main {
    margin-top: 23px;
    width: 477px;
    height: 292px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      width: 445px;
      height: 260px;
      border-radius: 4px;
      box-sizing: border-box;
      background: linear-gradient(0deg, #ebebeb, #ebebeb);
      overflow-y: scroll;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>