pdfjs

package.json

@@ -19,6 +19,7 @@
     "lodash": "^4.17.19",
     "vconsole": "^3.3.4",
     "vue": "2.6.11",
+    "vue-pdf": "^4.1.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "weixin-js-sdk": "^1.6.0"

src/api/detail.zhongan.yiwai.js

@@ -4,7 +4,7 @@
  * @Description:众安50万意外险
  * @Date: 2020-07-27 15:46:37
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-10 14:59:04
+ * @LastEditTime: 2020-08-10 19:01:08
  */
 
 import goodsBg from "@/assets/images/goods/detail/yiwaixian/bg.png";
@@ -129,7 +129,7 @@ export default {
   popupArray: [
     {
       title: "保险条款",
-      url: "http://mangguo-contract.qthbx.com/zhong-an-baoxiantiaokuan-v1/"
+      url: "http://mangguo-contract-pdf.qthbx.com/%E4%BC%97%E5%AE%89%E4%BF%9D%E9%99%A9%E6%9D%A1%E6%AC%BE.pdf"
     },
     {
       title: "健康告知",

src/components/PopupWithIframe.vue

@@ -18,13 +18,17 @@
       v-html="content"
     ></div>
     <!-- iframe -->
-    <div class="protocol-frame-wrap" v-if="url && scrollRefresh">
+    <div class="protocol-frame-wrap" v-if="!isPdf && url && scrollRefresh">
       <iframe class="protocol-frame" :src="url" frameborder="0" height="100%"></iframe>
     </div>
     <!-- slot -->
     <div class="protocol-wrap" v-if="!content && scrollRefresh && $slots.default">
       <slot></slot>
     </div>
+    <!-- content -->
+    <div class="protocol-content" v-if="isPdf && scrollRefresh && !$slots.default">
+      <pdf v-for="(item, index) in pdfNumPages" :key="index" :src="pdfUrl" :page="index + 1" />
+    </div>
   </cr-popup>
 </template>
 
@@ -34,6 +38,7 @@
  * @param {type}
  * @return:
  */
+import pdf from "vue-pdf";
 const CHANGE_EVENT = "input";
 export default {
   name: "PopupWithIframe",
@@ -52,6 +57,9 @@ export default {
       default: ""
     }
   },
+  components: {
+    pdf
+  },
   watch: {
     value(val) {
       this.popupShow = val;
@@ -63,16 +71,40 @@ export default {
       this.$emit(CHANGE_EVENT, val);
       if (!val) {
         setTimeout(() => {
+          this.pdfNumPages = null;
+          this.pdfUrl = null;
           this.scrollRefresh = false;
         }, 300);
       }
     }
   },
+  computed: {
+    isPdf() {
+      const isPdf = this.url.indexOf("pdf") > -1;
+      isPdf && this.pdfTask();
+      return isPdf;
+    }
+  },
   data() {
     return {
       popupShow: false,
-      scrollRefresh: true
+      scrollRefresh: true,
+      pdfUrl: "",
+      pdfNumPages: null
     };
+  },
+  methods: {
+    pdfTask() {
+      this.pdfUrl = pdf.createLoadingTask(this.url);
+      console.log(this.pdfUrl);
+      this.pdfUrl.promise
+        .then(pdf => {
+          this.pdfNumPages = pdf.numPages;
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    }
   }
 };
 </script>

yarn.lock

@@ -1700,6 +1700,11 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "http://npmprivate.quantgroups.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+  integrity sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=
+
 babel-runtime@^6.0.0:
   version "6.26.0"
   resolved "http://npmprivate.quantgroups.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -5228,7 +5233,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "http://npmprivate.quantgroups.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -5237,6 +5242,15 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "http://npmprivate.quantgroups.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "http://npmprivate.quantgroups.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6269,6 +6283,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pdfjs-dist@^2.5.207:
+  version "2.5.207"
+  resolved "http://npmprivate.quantgroups.com/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz#b5e8c19627be64269cd3fb6df3eaaf45ddffe7b6"
+  integrity sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "http://npmprivate.quantgroups.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -6957,6 +6976,14 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.1:
+  version "4.0.1"
+  resolved "http://npmprivate.quantgroups.com/raw-loader/-/raw-loader-4.0.1.tgz#14e1f726a359b68437e183d5a5b7d33a3eba6933"
+  integrity sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 read-pkg@^5.1.1:
   version "5.2.0"
   resolved "http://npmprivate.quantgroups.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -7284,6 +7311,14 @@ sax@~1.2.4:
   resolved "http://npmprivate.quantgroups.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "http://npmprivate.quantgroups.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "http://npmprivate.quantgroups.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -8526,6 +8561,23 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-pdf@^4.1.0:
+  version "4.1.0"
+  resolved "http://npmprivate.quantgroups.com/vue-pdf/-/vue-pdf-4.1.0.tgz#028019750a1246cd41c3b9781b5ba6536ab22024"
+  integrity sha512-kjDmCJplCtf5+qQv6uMuUoh01AsoyKNsawHtfi9x739f1sTxdIwrLu25g+EhfRdtjh6JBqW46Mff1wijKa79wA==
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    loader-utils "^1.4.0"
+    pdfjs-dist "^2.5.207"
+    raw-loader "^4.0.1"
+    vue-resize-sensor "^2.0.0"
+    worker-loader "^2.0.0"
+
+vue-resize-sensor@^2.0.0:
+  version "2.0.0"
+  resolved "http://npmprivate.quantgroups.com/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz#3a587fd6802e1688709cf2c5aadae7a0075952bf"
+  integrity sha512-W+y2EAI/BxS4Vlcca9scQv8ifeBFck56DRtSwWJ2H4Cw1GLNUYxiZxUHHkuzuI5JPW/cYtL1bPO5xPyEXx4LmQ==
+
 vue-router@^3.2.0:
   version "3.3.4"
   resolved "http://npmprivate.quantgroups.com/vue-router/-/vue-router-3.3.4.tgz#4e38abc34a11c41b6c3d8244449a2e363ba6250b"
@@ -8785,6 +8837,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "http://npmprivate.quantgroups.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "http://npmprivate.quantgroups.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"