feat: 处理加载情况处理持续闪烁的问题

src/pages/explain/index.vue

@@ -3,26 +3,16 @@
     <!-- ///:style="{ transform: `scale(${scale})` }"  @page-loaded="onPageLoaded" -->
     <div class="container_public">
       <div v-for="pageNumber in loadedPages" :key="pageNumber">
-        <!-- <vue-pdf
-          v-if="pageNumber < 3"
-          class="container_pdf"
-          :src="{
-            url: fileUrl,
-            cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
-            cMapPacked: true,
-          }"
-          :page="pageNumber"
-      
-        ></vue-pdf> -->
         <vue-pdf
           class="container_pdf"
+          :key="`${pageNumber}===rrr`"
           :src="{
             url: fileUrl,
             cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
             cMapPacked: true,
           }"
           :page="pageNumber"
-          @page-loaded="onPageLoaded"
+          @rendered="handlePageRendered"
         ></vue-pdf>
       </div>
     </div>
@@ -45,6 +35,19 @@
       class="absolute_image3"
       @click="scaleOut"
     /> -->
+
+    <!-- 全屏遮罩层 -->
+    <div
+      v-show="isLoading"
+      class="fullscreen-loader"
+      :style="{ zIndex: zIndex }"
+    >
+      <!-- 加载动画 -->
+      <div class="loader">
+        <div class="spinner"></div>
+        <p class="tip">{{ text }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -67,16 +70,21 @@ export default {
       numPages: 0,
       scale: 1,
       loadedPages: 1,
+
+      isLoading: true,
+      text: "拼命加载中...",
+      zIndex: 9999,
     };
   },
 
   onLoad(e) {
     var that = this;
     that.id = e.id;
-    uni.showLoading({
-      title: "加载中...",
-      mask: true,
-    });
+    // uni.showLoading({
+    //   title: "加载中...",
+    //   mask: true,
+    // });
+    // uni.hideLoading();
     that.getDetail();
   },
 
@@ -107,26 +115,38 @@ export default {
           that.name = res.data.name;
           var fileUrl = res.data.fileUrl;
           that.getPdfPages(fileUrl);
+        } else {
+          that.isLoading = false;
         }
       });
     },
 
     async getPdfPages(fileUrl) {
       var that = this;
-      const loadingTask = VuePdf.createLoadingTask(fileUrl);
-      const pdf = await loadingTask.promise;
-      var numPages = pdf.numPages;
-      // that.loadedPages = that.numPages;
-      if (numPages == 0) {
-        return;
-      }
 
-      // that.numPages = numPages;
-      // that.loadedPages = 1;
-      that.fileUrl = fileUrl;
-      await that.sleep(500);
-      that.loadAll = true;
-      that.loadedPages = numPages;
+      try {
+        const loadingTask = VuePdf.createLoadingTask({
+          url: fileUrl,
+          cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/",
+          cMapPacked: true,
+        });
+        const pdf = await loadingTask.promise;
+        var numPages = pdf.numPages;
+        // that.loadedPages = that.numPages;
+        if (numPages == 0) {
+          return;
+        }
+
+        that.numPages = numPages;
+        that.fileUrl = fileUrl;
+        await that.sleep(500);
+        that.loadAll = true;
+        that.loadedPages = numPages;
+        await that.sleep(2000);
+        that.isLoading = false;
+      } catch (e) {
+        console.error("PDF加载失败:", e);
+      }
     },
 
     sleep(ms) {
@@ -164,26 +184,6 @@ 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) {
-      var that = this;
-      console.log("gadfqwerqwerqrq===" + page);
-      if (!that.loadAll && page >= that.numPages) {
-      }
-    },
-
     async download() {
       var that = this;
       var name = that.name;
@@ -279,4 +279,44 @@ export default {
   border-radius: 5px;
   cursor: pointer;
 }
+
+.fullscreen-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(255, 255, 255, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader {
+  text-align: center;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 15px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #409eff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.tip {
+  color: #606266;
+  font-size: 14px;
+}
 </style>