纯pdf的上传和预览

src/components/Adult/Preview.vue

@@ -386,6 +386,14 @@
                     v-if="refresh"
                   />
                 </template>
+                <template v-if="itemss.type == 'upload_pdf_chs'">
+                  <PdfView
+                    :cur-que="itemss.data"
+                    :type="itemss.type"
+                    :theme-color="themeColor"
+                    v-if="refresh"
+                  />
+                </template>
               </template>
             </div>
           </div>
@@ -426,6 +434,7 @@ import CourseStart from "./preview/CourseStart.vue"; // 封面
 import Tinydemo from "./preview/TinyModule.vue"; // 富文本
 import VideoControl from "./preview/VideoControl.vue"; // 视频控件
 import TableView from "./preview/TableView.vue"; // 视频控件
+import PdfView from "./preview/PdfView.vue"; // 视频控件
 
 export default {
   name: "Preview",
@@ -460,6 +469,7 @@ export default {
     Tinydemo,
     VideoControl,
     TableView,
+    PdfView,
   },
   props: [
     "context",

src/components/Adult/common/UploadView.vue

@@ -94,7 +94,7 @@ export default {
   created() {
     this.currentfileList = this.fileList || [];
     // this.showList = this.fileList ? true : false;
-    if (this.type == "upload_control_preview_chs") {
+    if (this.type == "upload_control_preview_chs"||this.type=='upload_pdf_chs') {
       this.showList = true;
     } else {
       this.showList = false;

src/components/Adult/common/data.js

@@ -727,6 +727,10 @@ let fnData = [{
         type: "play_record_chs",
         name: "播放音频控件",
     },
+    {
+        type: "upload_pdf_chs",
+        name: "上传pdf",
+    },
 ]
 
 

src/components/Adult/inputModules/UploadPdf.vue

@@ -0,0 +1,172 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
+    <UploadView
+      :changeFillId="changeFillId"
+      :accept="accept"
+      :filleNumber="1"
+      :fileList="curQue.fileList"
+      :type="type"
+    />
+  </div>
+</template>
+
+<script>
+import UploadView from "../common/UploadView.vue";
+import pdf from "vue-pdf";
+export default {
+  components: {
+    UploadView,
+    pdf,
+  },
+  props: ["curQue", "changeCurQue", "type"],
+  data() {
+    return {
+      uploadType: "",
+      fileList: [],
+      data: null,
+      numPages: null,
+      accept: ".pdf",
+      data_structure: {
+        type: "upload_pdf_chs",
+        name: "上传pdf",
+        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 = JSON.parse(JSON.stringify(fileList));
+      if (fileList.length > 0) {
+        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;
+      data = JSON.parse(JSON.stringify(this.data_structure));
+      this.changeCurQue(data);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (!this.curQue) {
+      this.initcurQue();
+    }
+  },
+  //生命周期 - 挂载完成（可以访问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;
+      }
+    }
+  }
+  .uploadBtn {
+    width: 141px;
+    height: 39px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    line-height: 150%;
+    color: #000000;
+
+    img {
+      margin-right: 13px;
+    }
+  }
+  .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>

src/components/Adult/preview/PdfView.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="pdfView">
+    <pdf
+      ref="pdf"
+      :src="curQue.data.fileRelativePath"
+      v-for="i in curQue.data.numPages"
+      :key="i"
+      :page="i"
+    >
+    </pdf>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import pdf from "vue-pdf";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { pdf },
+  props: ["curQue", "fn_data", "type"],
+
+  data() {
+    //这里存放数据
+    return {
+      numPages: null,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getNumPages() {
+      let _this = this;
+      let loadingTask = pdf.createLoadingTask(
+        _this.curQue.data.fileRelativePath
+      );
+      this.$forceUpdate();
+
+      loadingTask.promise
+        .then((pdff) => {
+          console.log("拿到结果");
+          _this.numPages = pdff.numPages;
+          _this.curQue.data.numPages = pdff.numPages;
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          console.error("pdf 加载失败", err);
+        });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style scoped>
+/* @import url(); 引入css类 */
+.pdfView {
+  width: 100%;
+}
+</style>

src/views/adultInput.vue

@@ -585,6 +585,17 @@
                     />
                   </template>
                 </template>
+                <template v-if="topicIitem.type == 'upload_pdf_chs'">
+                  <template v-if="topicIitem.is_edit">
+                    <UploadPdf
+                      :curQue="topicIitem.data"
+                      :type="topicIitem.type"
+                      :fn_data="fn_data"
+                      :changeCurQue="changeCurQue"
+                    />
+                  </template>
+                  <template v-else> </template>
+                </template>
               </div>
               <div
                 v-if="topicIitem.data && topicIitem.is_edit"
@@ -745,6 +756,8 @@ import Tinydemo from "@/components/Adult/inputModules/Tinydemo.vue";
 import VideoControl from "@/components/Adult/inputModules/VideoControl.vue";
 import Table from "@/components/Adult/inputModules/Table.vue";
 import PlayRecord from "@/components/Adult/inputModules/PlayRecord.vue";
+import UploadPdf from "@/components/Adult/inputModules/UploadPdf.vue";
+
 
 import Textdes from "@/components/Adult/inputModules/Textdes.vue";
 import Record from "@/components/Adult/inputModules/Record.vue";
@@ -836,6 +849,7 @@ export default {
     TableView,
     PlayRecord,
     PlayRecordView,
+    UploadPdf,
   },
   data() {
     return {