zydx-plus 1.28.128 → 1.28.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.28.128",
+  "version": "1.28.130",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

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

@@ -4,17 +4,20 @@
             <div class="book">
                 <div class="pages">
                     <div class="wrap">
+                        <div class="wrap-one" :class="{'flip-animation-start': flipRights, 'flip-animation-end': flipLefts}" v-if="oneShow" :style="canvasStyle">
+                            <img :src="imgArr[(oneIndex === 'right')? pageIndex-1: pageIndex]" alt="" />
+                        </div>
                         <div class="wrap-can">
                             <canvas :id="id"></canvas>
                         </div>
                     </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="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}" @click="flipRight(pageIndex-=1,false)"></div>
+                    <div class="page-but-right" :style="{cursor: pageIndex === pdfPages?'default':'pointer'}" @click="flipLeft(pageIndex+=1,false)"></div>
                 </div>
             </div>
             <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>
+                <button class="but-brown" :disabled="pageIndex === 1" :class="{'but-act': pageIndex === 1}" @click="flipRight(pageIndex-=1,false)">上一页</button>
+                <button class="but-brown" :disabled="pageIndex === pdfPages" :class="{'but-act': pageIndex === pdfPages}" @click="flipLeft(pageIndex+=1,false)">下一页</button>
             </div>
         </div>
         <div v-if="loading" class="loading-back">
@@ -43,7 +46,12 @@ export default {
             pagesData: [],
             opacity: 1,
             id: null,
-            loading: false
+            loading: false,
+            canvasStyle: {},
+            oneShow: false,
+            flipRights: false,
+            flipLefts: false,
+            oneIndex: 'right'
         }
     },
     props: {
@@ -85,12 +93,13 @@ export default {
     },
     methods: {
         flipLeft(e,v) {
-            if(e < 1) {
-                this.pageIndex = 1
+            if(e >= this.pdfPages) {
+                this.pageIndex = this.pdfPages
                 return
             }else {
                 this.pageIndex = e
             }
+            this.oneIndex = 'right'
             this.readPdf()
             if(!v) {
                 this.$emit('flip', {
@@ -100,12 +109,13 @@ export default {
             }
         },
         flipRight(e,v) {
-            if(e >= this.pdfPages) {
-                this.pageIndex = this.pdfPages
+            if(e < 1) {
+                this.pageIndex = 1
                 return
             }else {
                 this.pageIndex = e
             }
+            this.oneIndex = 'left'
             this.readPdf()
             if(!v) {
                 this.$emit('flip', {
@@ -118,17 +128,25 @@ export default {
             if(this.source === '' || this.source === undefined || this.source === null) return
             let that = this
             that.loading = true
+            if(that.imgArr[that.pageIndex - 1] !== undefined) {
+                that.oneShow = that.pageIndex !== 1
+            }
             const loadingTask = PdfJs.getDocument(this.source)
             loadingTask.promise.then((pdf) => {
                 that.pdfPages = pdf.numPages // 获取pdf文件的总页数
                 pdf.getPage(that.pageIndex).then(function (page) {
                     let canvas = document.getElementById(that.id)
                     let ctx = canvas.getContext('2d');
-                    let viewport = page.getViewport({scale: 1.4})
+                    let viewport = page.getViewport({scale: 1.35})
                     canvas.width = viewport.width * 2
                     canvas.height = viewport.height * 2
                     canvas.style.width = viewport.width + 'px'
                     canvas.style.height = viewport.height + 'px'
+                    that.canvasStyle = {
+                        width: viewport.width + 'px',
+                        height: viewport.height + 'px',
+                        marginLeft: -(viewport.width/2) + 'px'
+                    }
                     let renderContext = {
                         canvasContext: ctx,
                         viewport: viewport,
@@ -136,6 +154,20 @@ export default {
                     }
                     page.render(renderContext)
                     that.loading = false
+                    if(that.oneIndex === 'right') {
+                        that.flipRights = true
+                        that.flipLefts = false
+                    }else {
+                        that.flipRights = false
+                        that.flipLefts = true
+                    }
+                    // 获取canvas的base64数据
+                    setTimeout(() => {
+                        that.flipRights = false
+                        that.flipLefts = false
+                        that.oneShow = false
+                        that.imgArr[that.pageIndex] = canvas.toDataURL('image/jpeg', 1)
+                    }, 1000)
                 })
             })
         }
@@ -144,11 +176,64 @@ export default {
 </script>
 
 <style scoped>
+/*动画部分*/
+/*I'm the home page动画*/
+.flip-animation-start {
+    transform-origin: left center;
+    animation: flipBook1 1s forwards;
+}
+.flip-animation-end {
+    transform-origin: left center;
+    animation: flipBook2 1s forwards;
+}
+@keyframes flipBook1 {
+    0% {
+        transform: perspective(3000px) rotateY(0deg);
+        opacity: 1;
+    }
+    60%{
+        opacity: 1;
+    }
+    100% {
+        transform: perspective(3000px) rotateY(-160deg);
+        opacity: 0;
+    }
+}
+/*关闭书页*/
+@keyframes flipBook2 {
+    0% {
+        transform: perspective(3000px) rotateY(-160deg);
+        opacity: 0;
+    }
+    30%{
+        opacity: 1;
+    }
+    70%{
+        opacity: 1;
+    }
+    100% {
+        transform: perspective(3000px) rotateY(0deg);
+        opacity: 0;
+    }
+}
+.wrap-one{
+    position: absolute;
+    top: 0;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+}
+.wrap-one img{
+    width: 100%;
+    height: 100%;
+}
 .wrap{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
+    position: relative;
 }
 .wrap-can{
     display: inline-block;

package/src/index.js

@@ -67,7 +67,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.28.128',
+    version: '1.28.130',
     install,
     Calendar,
     Message,