feat:豆丁非pdf得文档，走最多预览五页的逻辑

jydocs-pc/src/views/Content.vue

@@ -44,7 +44,7 @@
             <i class="el-icon-arrow-down"></i></span>
           </div>
         </div>
-        <div class="head-tip" id="fixedTop" :class="{ 'is-fixed': fixed }">
+        <div class="head-tip" id="fixedTop" :class="{ 'is-fixed': fixed }" v-if="!docLoadError">
           <h3 v-show="fixed">
             <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
             <span>{{ datas.docName }}</span>
@@ -281,7 +281,7 @@ export default {
         docinImg: []
       },
       // 文档加载失败
-      docLoadError: false,
+      docLoadError: false
     }
   },
   created () {
@@ -390,13 +390,28 @@ export default {
     }
   },
   methods: {
-    rendered () {
-      console.log('渲染完成')
-    },
-    errorHandler () {
-      this.ddErrorPreview()
-      console.log('渲染失败')
+    // 设置操作按钮bottom距离
+    setFixedBottom () {
+      const bottomFooter = document.querySelector('.j-bottom')
+      let ob = { top: 0 }
+      if (bottomFooter) {
+        ob = bottomFooter.getBoundingClientRect()
+      }
+      // bottom出现在视口
+      const bottom = window.innerHeight - ob.top
+      if (bottom > 0 && ob.top !== 0) {
+        $(this.$el).css({ bottom: parseInt(bottom) })
+      } else {
+        $(this.$el).css({ bottom: 0 })
+      }
     },
+    // rendered () {
+    //   console.log('渲染完成')
+    // },
+    // errorHandler () {
+    //   this.ddNotPdfPreview()
+    //   console.log('渲染失败')
+    // },
     // 使用免费下载特权
     downLoadFreeEvent () {
       if (this.docsInfo?.freeDownload === 0) {
@@ -493,11 +508,10 @@ export default {
       this.fixed = !!(scrollTop > this.offsetTop && this.buyed)
       this.watchPage()
       let t = document.getElementById('pdfPage')
-      if (this.fileTypeThis === 'docx') {
-        t = document.getElementById('docxPage')
-      } else if (this.fileTypeThis === 'xlsx' || this.fileTypeThis === 'xls') {
-        t = document.getElementById('xlsxPage')
+      if (this.fileTypeThis !== 'pdf') {
+        t = document.getElementById('bottoms-preview')
       }
+
       const targetElement = this.$refs.transitionDom
       const rect = targetElement.getBoundingClientRect()
       const innerHeight = window.innerHeight
@@ -565,7 +579,7 @@ export default {
         this.loading = false
         // 文档加载失败
         if (this.datas.source === 2) {
-          this.ddErrorPreview()
+          this.ddNotPdfPreview()
         }
       })
     },
@@ -594,24 +608,27 @@ export default {
           })
 
           this.fileTypeThis = fileExtensions[FileIndex]
-          if (fileExtensions[FileIndex] === 'docx' || fileExtensions[FileIndex] === 'xlsx' || fileExtensions[FileIndex] === 'xls') {
+          // switch (fileExtensions[FileIndex]) {
+          //   case 'docx':
+          //     this.fileSrc.docSrc = res.data.data
+          //     break
+          //   case 'xlsx':
+          //     this.excelOptions.xls = false
+          //     this.fileSrc.excelSrc = res.data.data
+          //     break
+          //   case 'xls':
+          //     this.excelOptions.xls = true
+          //     this.fileSrc.excelSrc = res.data.data
+          //   default:
+          //     this.init(type)
+          //     break
+          // }
+          // P620购买后，由于excel以及word用插件加载会出现压缩的情况，所以直接用预览最多5张展示处理
+          if (fileExtensions[FileIndex] === 'pdf') {
+            this.init(type)
+          } else {
             this.loading = false
-          }
-          switch (fileExtensions[FileIndex]) {
-            case 'docx':
-              // this.fileSrc.docSrc = res.data.data
-              this.ddErrorPreview()
-              break
-            case 'xlsx':
-              this.excelOptions.xls = false
-              this.fileSrc.excelSrc = res.data.data
-              break
-            case 'xls':
-              this.excelOptions.xls = true
-              this.fileSrc.excelSrc = res.data.data
-            default:
-              this.init(type)
-              break
+            this.ddNotPdfPreview()
           }
         } else {
           this.loading = false
@@ -730,8 +747,8 @@ export default {
         }
       }
     },
-    // 豆丁预览(如果购买后的全文加载失败，则走预览逻辑,PDF)
-    ddErrorPreview () {
+    // 豆丁预览(如果购买后的全文加载失败，则走预览逻辑)、非pdf得也走预览逻辑
+    ddNotPdfPreview () {
       this.docLoadError = true
       this.fixed = true
       this.previewConfig.docinImg = []
@@ -740,6 +757,10 @@ export default {
         const ddUrl = `https://docimg1.docin.com/docinviewpic.jsp?file=${this.datas.imgId}&width=920&pageno=${i}&sview=1&clogo=1`
         this.previewConfig.docinImg.push(ddUrl)
       }
+      // 监听滚轮
+      setTimeout(() => {
+        this.initHeight()
+      }, 500)
     },
     adverse () {
       // 获取广告信息
@@ -1297,8 +1318,8 @@ export default {
       margin: 16px 0;
     }
     .bottoms {
-      // position: fixed;
-      // bottom: 0;
+       //position: fixed;
+       //bottom: 0;
       display: flex;
       flex-direction: column;