Merge branch 'dev/v1.0.92_yf' of jianyu/web into feature/v1.0.92

apps/mobile/src/views/article/components/PDF.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="pdf-box">
     <van-loading v-if="loading" size="32px" vertical>加载中</van-loading>
-    <div
-      v-show="isRender"
-      id="pdf-canvas"
-      style="height: 100%; width: 100%"
-    ></div>
+    <div v-show="isRender" id="pdf-canvas" style="height: 100%; width: 100%">
+      <div class="pagination-container">
+        <span class="pagination-now">1</span>
+        <em>/</em>
+        <span class="pagination-total"></span>
+      </div>
+    </div>
     <div v-show="!isRender && !loading" class="error-container">
       加载异常，点击<span class="highlight-label" @click="initPdfH5">刷新</span
       >重试
@@ -37,7 +39,8 @@ export default {
     return {
       pdfH5: null,
       isRender: true,
-      loading: true
+      loading: true,
+      currentPage: 1
     }
   },
   mounted() {
@@ -52,21 +55,28 @@ export default {
     initPdfH5() {
       this.loading = true
       this.pdfH5 = new Pdfh5('#pdf-canvas', {
-        pdfurl: this.url, // 'http://localhost:8080/jy_mobile/src/assets/image/pdf.pdf'
+        pdfurl: this.url, // 'http://localhost:8080/jy_mobile/src/assets/image/demo.pdf',
         lazy: true, // 启用懒加载
         renderType: 'canvas', // 渲染方式，可选值：canvas、svg
         maxZoom: 2, // 手势缩放最大倍数
-        pageNum: true, // 是否显示左上角页码
+        pageNum: false, // 是否显示左上角页码(自带的计算页码会有偏差，用下面updateCurrentPage方法重新计算渲染)
         backTop: false // 是否显示右下角返回顶部按钮
       })
       // 监听pdf准备开始渲染，此时可以拿到pdf总页数
       this.pdfH5.on('ready', function (totalNum) {
         console.log('总页数:' + totalNum)
         this.loading = false
+        const pageTotal = document.querySelector('.pagination-total')
+        pageTotal.textContent = totalNum
       })
       // 监听滚动事件
+      let scrollTimeout
       this.pdfH5.on('scroll', (scrollTop, currentNum) => {
         // console.log('scrollTop:' + scrollTop, 'currentNum:' + currentNum)
+        clearTimeout(scrollTimeout)
+        scrollTimeout = setTimeout(() => {
+          this.updateCurrentPage()
+        }, 100) // 100ms 防抖
       })
       // 防抖处理
       let renderTimeout
@@ -83,11 +93,29 @@ export default {
         )
         if (status === 'error') {
           this.isRender = false
+          this.loading = false
         } else {
           this.isRender = true
           this.loading = false
         }
       })
+    },
+    updateCurrentPage() {
+      const container = document.querySelector('.viewerContainer')
+      const pages = container.querySelectorAll('.pageContainer')
+      let currentPage = 1
+
+      pages.forEach((page, index) => {
+        const rect = page.getBoundingClientRect()
+        if (rect.top <= container.offsetHeight / 2) {
+          currentPage = index + 1
+        }
+      })
+
+      this.currentPage = currentPage
+      const pageNow = document.querySelector('.pagination-now')
+      pageNow.textContent = currentPage
+      console.log('当前页码:', this.currentPage)
     }
   }
 }
@@ -97,9 +125,6 @@ export default {
 .pdf-box {
   height: 500px;
 }
-.pageNum {
-  display: block !important;
-}
 .error-container {
   width: 100%;
   height: 100%;
@@ -119,4 +144,22 @@ export default {
 .van-loading__text {
   margin-top: 20px;
 }
+.pagination-container {
+  position: absolute;
+  width: calc(100% - 14px);
+  height: 30px;
+  top: 0;
+  left: 6.5px;
+  background: #4e4e4e;
+  text-align: center;
+  line-height: 30px;
+  color: #fff;
+  font-size: 16px;
+}
+.pdfjs {
+  padding-top: 30px;
+}
+.pdfjs .pdfViewer {
+  padding-top: 1px;
+}
 </style>