zydx-plus 1.19.91 → 1.19.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.19.91",
+  "version": "1.19.92",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -22,7 +22,6 @@
   "dependencies": {
     "vue-draggable-next": "^2.1.1",
     "pdfjs-dist": "^2.0.943",
-    "flipbook-vue": "^1.0.0-beta.4",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/plugin-upload-attachment": "^1.1.0",
     "snabbdom": "^3.5.1",

package/src/components/dragPopup/src/dragPopup.vue

@@ -59,8 +59,8 @@ export default {
         }
     },
     mounted() {
-        let clientWidth = window.outerWidth;
-        let clientHeight = window.outerHeight;
+        let clientWidth = document.documentElement.clientWidth;
+        let clientHeight = document.documentElement.clientHeight;
         this.x = clientWidth / 2 - this.footDownOffset / 2;
         this.y = clientHeight / 2 - this.footRightOffset / 2;
     },

package/src/components/flip/src/flip.vue

@@ -1,45 +1,46 @@
 <template>
   <div id="docView">
-      <div v-show="show" class="load-pop">
-          <div class="load">
-              <span>文件较大耐心等待</span>
-              <div class="loading">
-                  <div class="loading-cont" :style="{'width': loadWidth +'%'}"></div>
+      <div style="height: 100%;">
+          <div class="book">
+              <div class="pages">
+                  <div class="wrap" id="canvas-wrap"></div>
+                  <div class="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}" @click="flipLeft(pageIndex-=1,false)"></div>
+                  <div class="page-but-right" :style="{cursor: pageIndex === pdfPages?'default':'pointer'}" @click="flipRight(pageIndex+=1,false)"></div>
+<!--                  <div class="paper z-in" :class="{'data-right': pages}">-->
+<!--                      <div class="page page-2" id="canvas-wrap1"></div>-->
+<!--                      <div class="page page-2-back" id="canvas-wrap2"></div>-->
+<!--                  </div>-->
+<!--                  <div class="paper z-in-ac">-->
+<!--                      <div class="page page-2" id="canvas-wrap3"></div>-->
+<!--                      <div class="page page-2-back" id="canvas-wrap4"></div>-->
+<!--                  </div>-->
               </div>
           </div>
-      </div>
-      <div v-show="!show" style="height: 100%;">
-          <div class="pdf-container">
-              <canvas :id="'pdf-canvas'+ index" v-for="(item,index) in pdfPages" class="pdf-canvas"></canvas>
-          </div>
-          <div class="book">
-              <flipbook class="flipbook" :startPage="pageIndex" :pages="imgArr" @flip-left-end="flipLeft($event,false)" @flip-right-end="flipRight($event,false)" v-slot="flipbook" :singlePage="singlePage" :ambient="0" :gloss="1" :dragToFlip="false" :pagesHiRes="0">
-                  <div class="but" v-if="butShow">
-                      <button class="but-brown" :class="{'but-act': pageIndex === 1}" @click="flipbook.flipLeft">上一页</button>
-                      <button class="but-brown" :class="{'but-act': pageIndex === pdfPages}" @click="flipbook.flipRight">下一页</button>
-                  </div>
-              </flipbook>
+          <div class="but-wrap" v-if="butShow">
+              <button class="but-brown" :disabled="pageIndex === 1" :class="{'but-act': pageIndex === 1}" @click="flipLeft(pageIndex-=1,false)">上一页</button>
+              <button class="but-brown" :disabled="pageIndex === pdfPages" :class="{'but-act': pageIndex === pdfPages}" @click="flipRight(pageIndex+=1,false)">下一页</button>
           </div>
       </div>
   </div>
 </template>
 
 <script>
-import flipbook from 'flipbook-vue'
 import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法
 PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
 export default {
   name: "zydx-flip",
-  components: {flipbook},
   data() {
     return {
       pdfPages: 0,
-      imgArr: [],
+      imgArr: {},
       hei: 0,
       pageIndex: this.page,
       show: false,
       load: 0,
-      loadWidth: 0
+      loadWidth: 0,
+      pages: false,
+      pagesData: [],
+      opacity: 1
     }
   },
   props: {
@@ -60,79 +61,67 @@ export default {
       default: 1
     }
   },
+  watch: {
+      page: {
+         handler: function (val, oldVal) {
+            this.pageIndex = val
+         },
+         immediate: true
+      }
+  },
   emits: ['flip'],
   mounted() {
-    this.$nextTick(() => {
-      this.readPdf()
-    })
+     this.readPdf()
   },
   methods: {
       flipLeft(e,v) {
-          this.pageIndex = e
+          if(e <= 1) {
+              this.pageIndex = 1
+          }else {
+              this.pageIndex = e
+          }
+          this.readPdf()
           if(!v) {
               this.$emit('flip', {
-                  page: e,
+                  page: this.pageIndex,
                   total: this.pdfPages
               })
           }
       },
       flipRight(e,v) {
-          this.pageIndex = e
+          if(e >= this.pdfPages) {
+              this.pageIndex = this.pdfPages
+          }else {
+              this.pageIndex = e
+          }
+          this.readPdf()
           if(!v) {
               this.$emit('flip', {
-                  page: e,
+                  page: this.pageIndex,
                   total: this.pdfPages
               })
           }
       },
       readPdf() {
           let that = this
-          if(that.pdfPages > 30) that.show = true
           const loadingTask = PdfJs.getDocument(this.source)
           loadingTask.promise.then((pdf) => {
               that.pdfPages = pdf.numPages // 获取pdf文件的总页数
-              for (let i = 0; i < that.pdfPages; i++) {
-                  pdf.getPage(i + 1).then(function (page) {
-                      const canvas = document.getElementById('pdf-canvas' + i)
-                      const ctx = canvas.getContext('2d')
-                      const dpr = window.devicePixelRatio || 1
-                      const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
-                      const ratio = dpr / bsr
-                      const viewport = page.getViewport({scale: 1})
-                      canvas.width = viewport.width * ratio
-                      canvas.height = viewport.height * ratio
-                      canvas.style.width = viewport.width + 'px'
-                      canvas.style.height = viewport.height + 'px'
-                      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
-                      const renderContext = {
-                          canvasContext: ctx,
-                          viewport: viewport
-                      }
-                      page.render(renderContext)
-                      if(that.pdfPages > 30) {
-                          that.load = i + 1
-                          that.loadWidth = Math.floor(that.load / that.pdfPages * 100)
-                      }
-                  });
-              }
-              setTimeout(function () {
-                  for (let i = 0; i < that.pdfPages; i++) {
-                      const canvas = document.getElementById('pdf-canvas' + i)
-                      const dataURL = canvas.toDataURL("image/jpeg", 1); //获取Base64编码
-                      that.imgArr.push(dataURL)
-                      that.load = i + 1
-                      if(that.pdfPages > 30) {
-                          if(that.load >= that.pdfPages) {
-                              setTimeout(() => {
-                                  that.show = false
-                                  that.load = 0
-                              },100)
-                          }else {
-                              that.loadWidth = Math.floor(that.load / that.pdfPages * 100)
-                          }
-                      }
-                  }
-              }, 500)
+              pdf.getPage(that.pageIndex).then(function (page) {
+                  let viewport = page.getViewport({scale: 1})
+                  document.getElementById('canvas-wrap').innerHTML = ''
+                  let container = document.createElement('div')
+                  container.style.width = viewport.width + 'px'
+                  container.style.height = viewport.height + 'px'
+                  container.style.margin = '0 auto'
+                  document.getElementById('canvas-wrap').appendChild(container)
+                  return page.getOperatorList().then(function(opList) {
+                      let svgGfx = new PdfJs.SVGGraphics(page.commonObjs, page.objs)
+                      return svgGfx.getSVG(opList, viewport).then(function(svg) {
+                          container.appendChild(svg)
+                      })
+                  })
+              })
           })
       }
   }
@@ -140,39 +129,90 @@ export default {
 </script>
 
 <style scoped>
-.load-pop{
-  width: 100%;
-  height: 100%;
-    display: flex;
-    align-items: center;
+.wrap{
+    width: 100%;
+    height: 100%;
 }
-.load{
-  display: inline-block;
-    margin: 0 auto;
+.but-wrap{
+    text-align: center;
 }
-.load>span{
-    display: inline-block;
+.z-in{
+    z-index: 2;
+}
+.z-in-ac{
+    z-index: 1;
+}
+.pages{
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.paper{
+    position: absolute;
+    right: 0;
+    transform-style: preserve-3d;
     width: 100%;
+}
+.page{
+    position: absolute;
     text-align: center;
-    padding-bottom: 10px;
-    font-size: 14px;
 }
-.loading{
-    width: 200px;
-    height: 10px;
-    border-radius: 20px;
-    position: relative;
-    overflow: hidden;
-    background-color: #ccc;
+.page img{
+    width: 100%;
+    height: 100%;
+}
+.data-right {
+    opacity: 1;
+    transform-origin: left center;
+    animation: flip-to-left 1.5s ease-in-out forwards;
 }
-.loading-cont{
+.data-left{
+    right: auto;
+    left: 0;
+}
+@keyframes flip-to-left {
+    0% {
+        transform: perspective(3000px) rotateY(0);
+    }
+    95% {
+        transform: perspective(3000px) rotateY(-180deg);
+    }
+    100% {
+        transform: perspective(3000px) rotateY(-180deg);
+    }
+}
+.page-1-back, .page-2-back {
+    transform: scale(-1, 1);
+}
+.page-1, .page-2 {
+    transform: translateZ(1px);
+}
+
+
+
+
+.page-but-left{
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
     z-index: 1;
-    background-color: #5daf34;
-    height: 100%;
-    border-radius: 20px;
+    width: 10%;
+}
+.page-but-right{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    width: 10%;
+}
+.load>span{
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 10px;
+    font-size: 14px;
 }
 #docView{
   height: 100%;
@@ -189,33 +229,10 @@ export default {
   cursor: pointer;
   margin-left: 10px;
 }
-.but{
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  text-align: center;
-}
 .book{
   width: 100%;
   height: 100%;
 }
-.flipbook {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  padding-bottom: 24px;
-}
-.pdf-container{
-  position: relative;
-}
-  .pdf-canvas{
-    position: absolute;
-    top: -100000px;
-    left: 0;
-    z-index: -100;
-  }
   .but-act{
     background-color: #bbbbbb;
     color: #fff;

package/src/index.js

@@ -57,7 +57,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.19.91',
+    version: '1.19.92',
     install,
     Calendar,
     Message,