提交代码ll

jydocs-mobile/src/views/details/details.vue

@@ -12,9 +12,9 @@
             <div class="continue" v-show="!buyed">全文共{{detailData.docPageSize}}页，<span @click="continued">继续阅读<van-icon name="arrow-down" size="18" /></span></div>
         </div>
         <div class="botts" v-show="buyed">
-            <!-- <div class="cont-page"> -->
-                <iframe :src="conts.data" width="920" height="900"></iframe>
-            <!-- </div> -->
+            <div class="cont-page" id="pdfPage">
+                <iframe :src="conts" width="100%" height="100%"></iframe>
+            </div>
         </div>
         <van-goods-action>
             <van-goods-action-icon class="no-icon">
@@ -72,12 +72,91 @@ export default class extends Vue {
   detailData: any = []
   collectd = 0
   buyed = 0
+  pdfh5 = null
+  pdfDocument: any
+  config: any = {
+    PAGE_TO_VIEW: 0,
+    SCALE: 1.0
+  }
+
+  pData: any = {
+    heightList: []
+  }
+
   created () {
     this.docIds = this.$route.params.id
     // this.docIds = '19d53d64-8890-11eb-8699-0050568f51e7'
     this.onList()
   }
 
+  mounted () {
+    // 监听滚轮
+    window.addEventListener('scroll', this.watchPage)
+  }
+
+  destroyed () { // 移除监听
+    window.removeEventListener('scroll', this.watchPage)
+  }
+
+  // updateText (type: any, value = '') {
+  //   switch (type) {
+  //     case 'count': {
+  //       document.querySelector('#page_count').textContent = value
+  //       break
+  //     }
+  //     case 'num': {
+  //       document.querySelector('#page_num').textContent = value
+  //       break
+  //     }
+  //   }
+  // }
+
+  // renders () {
+  //   const container = document.getElementById('pdfPage')
+  //   return this.pdfDocument.getPage(this.config.PAGE_TO_VIEW).then((pdfPage: any) => {
+  //     const pdfPageView = new pdfjsViewer.PDFPageView({
+  //       container: container,
+  //       id: this.config.PAGE_TO_VIEW,
+  //       scale: this.config.SCALE,
+  //       defaultViewport: pdfPage.getViewport({ scale: this.config.SCALE }),
+  //       eventBus: new pdfjsViewer.EventBus(),
+  //       annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory()
+  //     })
+  //     pdfPageView.setPdfPage(pdfPage)
+  //     this.pData.heightList.push(pdfPageView.viewport.height)
+  //     return pdfPageView.draw()
+  //   })
+  // }
+
+  // init () {
+  //   console.log(this.conts)
+  //   const loadingTask = pdfjsLib.getDocument({
+  //     url: this.conts
+  //   })
+  //   loadingTask.promise.then((pdfDocument: any) => {
+  //     this.pdfDocument = pdfDocument
+  //     console.log(this.pdfDocument.numPages)
+  //     // this.updateText({type: 'count', value: this.pdfDocument.numPages})
+  //     // this.updateText({type: 'num', value: 1})
+  //     for (let i = 0; i < this.pdfDocument.numPages; i++) {
+  //       this.config.PAGE_TO_VIEW++
+  //       this.renders()
+  //     }
+  //   })
+  // }
+
+  watchPage () {
+    const top = window.scrollY
+    let base = 0
+    for (let i = 0; i < this.pData.heightList.length; i++) {
+      base += this.pData.heightList[i]
+      if (top <= base) {
+        // this.updateText({type: 'num', value: i + 1})
+        break
+      }
+    }
+  }
+
   onList () {
     this.getDetails({ docId: this.docIds }).then((res: any) => {
       console.log(res.data)
@@ -167,6 +246,7 @@ export default class extends Vue {
 .details-p {
     display: flex;
     flex-direction: column;
+    padding-bottom: 80px;
     .tops {
         display: flex;
         background: #fff;