feat: 处理加载情况

package.json

@@ -76,10 +76,12 @@
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
     "js-base64": "^3.7.5",
+    "pdfjs-dist": "^5.0.375",
     "regenerator-runtime": "^0.12.1",
     "vconsole": "^3.15.1",
-    "vue": "^2.6.11",
+    "vue": "^3.3.0",
     "vue-pdf": "^4.3.0",
+    "vue-pdf-embed": "^2.1.2",
     "vuex": "^3.2.0"
   },
   "devDependencies": {

src/pages/explain/index.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="container_all">
-    <div class="container_public" :style="{ transform: `scale(${scale})` }">
+    <!-- ///:style="{ transform: `scale(${scale})` }"  @page-loaded="onPageLoaded" -->
+    <div class="container_public">
       <div v-for="pageNumber in loadedPages" :key="pageNumber">
-        <vue-pdf
+        <!-- <vue-pdf
           v-if="pageNumber < 3"
           class="container_pdf"
-          :src="fileUrl"
+          :src="{
+            url: fileUrl,
+            cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
+            cMapPacked: true,
+          }"
           :page="pageNumber"
-          @page-loaded="onPageLoaded"
-        ></vue-pdf>
+      
+        ></vue-pdf> -->
         <vue-pdf
-          v-else
           class="container_pdf"
           :src="{
             url: fileUrl,
@@ -69,6 +73,10 @@ export default {
   onLoad(e) {
     var that = this;
     that.id = e.id;
+    uni.showLoading({
+      title: "加载中...",
+      mask: true,
+    });
     that.getDetail();
   },
 
@@ -97,24 +105,32 @@ export default {
       detail(id).then((res) => {
         if (res.code === 0) {
           that.name = res.data.name;
-          that.fileUrl = res.data.fileUrl;
-          that.fileName = that.getFileExtension(that.fileUrl);
-          that.getPdfPages();
+          var fileUrl = res.data.fileUrl;
+          that.getPdfPages(fileUrl);
         }
       });
     },
 
-    async getPdfPages() {
+    async getPdfPages(fileUrl) {
       var that = this;
-      const loadingTask = VuePdf.createLoadingTask(that.fileUrl);
+      const loadingTask = VuePdf.createLoadingTask(fileUrl);
       const pdf = await loadingTask.promise;
-      this.numPages = pdf.numPages;
-      // this.loadedPages = this.numPages;
-      if (this.numPages == 0) {
+      var numPages = pdf.numPages;
+      // that.loadedPages = that.numPages;
+      if (numPages == 0) {
         return;
       }
-      this.loadedPages = this.numPages;
-      // this.loadedPages = this.numPages > 2 ? 2 : this.numPages;
+
+      // that.numPages = numPages;
+      // that.loadedPages = 1;
+      that.fileUrl = fileUrl;
+      await that.sleep(500);
+      that.loadAll = true;
+      that.loadedPages = numPages;
+    },
+
+    sleep(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
     },
 
     ///截取文件
@@ -148,15 +164,23 @@ export default {
       this.scale /= 1.1;
     },
 
+    // onPageLoaded1(page) {
+    //   console.log("gadfsadsfqwerqewrqr==11=" + page);
+    //   // var that = this;
+    //   // if (page == 2) {
+    //   //   that.loadedPages = that.numPages;
+    //   // }
+    // },
+
+    // setNumPages1(numPagesData) {
+    //   console.log("gadfsadsfqwerqewrqr==22=" + numPagesData);
+    //   // this.numPages = numPagesData;
+    // },
+
     onPageLoaded(page) {
-      if (this.numPages > 0) {
-        if (!this.loadAll) {
-          this.loadAll = true;
-        }
-        var p = this.loadedPages;
-        if (p < this.numPages) {
-          this.loadedPages = p + 1;
-        }
+      var that = this;
+      console.log("gadfqwerqwerqrq===" + page);
+      if (!that.loadAll && page >= that.numPages) {
       }
     },
 
@@ -164,7 +188,7 @@ export default {
       var that = this;
       var name = that.name;
       var fileUrl = that.fileUrl;
-      var fileName = that.fileName;
+      var fileName = that.getFileExtension(fileUrl);
 
       var finalName = "";
       if (name != null && name != "") {