20261008

2026-10-08 18:34:09 +08:00
commit 2933904f4c
905 changed files with 112129 additions and 0 deletions
@@ -0,0 +1,168 @@
+<template>
+  <view class="pdf-page">
+    <view class="pdf-wrap" :style="{'height':viewHeight}">
+      <view ref="pdfRef" id="pdfView"></view>
+    </view>
+    <view v-if="showBottom" class="pdf-btn-group">
+      <slot>
+        <button class="btn-readed" size="mini" @click="handleComplete"
+            :disabled="btnDisabled">{{showTimer ? countTimer<=1 ? '':'('+countTimer+'s)':''}}我已阅读</button>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import Pdfh5 from "pdfh5";
+  import "pdfh5/css/pdfh5.css";
+  export default {
+    name: "u-pdf",
+    props: {
+      url: {
+        type: String,
+        require: true
+      },
+      viewHeight: {
+        type: String,
+        default: "100%"
+      },
+      showBottom: {
+        type: Boolean,
+        default: true
+      },
+      options: {
+        type: Object,
+        default: () => ({
+          cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
+          lazy: false,
+          withCredentials: true,
+          // pdfLoaded:false,
+          renderType: "svg",
+          maxZoom: 3, //手势缩放最大倍数 默认3
+          scrollEnable: true, //是否允许pdf滚动
+          zoomEnable: true //是否允许pdf手势缩放
+        })
+      },
+      disabled:{
+        type:Boolean,
+        default:true
+      },
+      showTimer:Boolean
+    },
+    data() {
+      return {
+        totalNum: 0,
+        pdfh5: undefined,
+        countTimer:10,
+        timer:undefined,
+        btnDisabled:true
+      }
+    },
+    
+    watch:{
+      disabled(n,o){
+        this.btnDisabled = this.disabled
+      },
+      showTimer(n,o){
+        console.log("showTimer ",n);
+        if(this.showTimer){
+          this.startCountDownTimer()
+        }
+      }
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.loadPdf()
+      })
+    },
+
+    // onPageScroll(scroll) {
+    //   console.log(`onPageScroll ${scroll}`,scroll);
+    // },
+
+    // onReachBottom(scroll) {
+    //   console.log(`onReachBottom 滚动到底部`);
+    // },
+
+    methods: {
+      handleComplete(){
+        this.$emit("onClickReader")
+      },
+      
+      startCountDownTimer(){
+        this.timer= setInterval(()=>{
+          if(this.countTimer<=1){
+            this.btnDisabled=false
+            clearInterval(this.timer)
+          }else{
+            this.countTimer--
+          }
+        },1000)
+      },
+      
+      loadPdf() {
+        if (!this.url) {
+          console.error("pdf url is null ");
+          return;
+        }
+        const opts = {
+          pdfurl: this.url,
+          ...this.options
+        }
+        console.log(opts);
+        this.pdfh5 = new Pdfh5('#pdfView', opts);
+        // 准备加载pdf
+        this.pdfh5.on("ready", () => {
+          this.$emit("ready")
+        })
+        //pdf 监听完成事件
+        this.pdfh5.on("complete", (status, msg, time) => {
+          console.log(`PDF complete status=${status}, msg =${msg}`);
+          this.$emit("complete", { status, msg })
+        });
+        // pdf 滚动事件 Svg 方式不会执行此方法， 需要在page中监听 onReachBottom，onPageScroll
+        this.pdfh5.on("scroll", (scrollTop, currentNum) => {
+          console.log(`pdf scrollTop =${scrollTop} , currentNum =${currentNum}`);
+          this.$emit("scroll", { scrollTop, currentNum })
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  @import 'pdfh5/css/pdfh5.css';
+
+  .pdf-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .pdf-wrap {
+    width: 100%;
+    flex: 1;
+  }
+
+  .pdf-btn-group {
+    width: 100%;
+    border-top: 2rpx solid #F8F9FC;
+    height: 8%;
+    position: fixed;
+    bottom: -1rpx;
+    z-index: 999;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-readed {
+    background: #4E70F6;
+    color: #ffffff;
+    font-size: 32rpx;
+  }
+</style>