From 346f7b4a07f527de6f95912e4876bb274acb48f2 Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Wed, 2 Dec 2020 15:57:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E9=97=A8=E7=BA=A2=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=88=86=E4=BA=AB=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ebiz/goodStart/GoodStartScheme.vue | 49 ++++++++++++++++++--
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/views/ebiz/goodStart/GoodStartScheme.vue b/src/views/ebiz/goodStart/GoodStartScheme.vue
index a7d0a8511..72ac6c641 100644
--- a/src/views/ebiz/goodStart/GoodStartScheme.vue
+++ b/src/views/ebiz/goodStart/GoodStartScheme.vue
@@ -5,22 +5,29 @@
         <van-image height="200" :src="$assetsUrl + pic.picUrl" @click="prevImg(pic)" />
       </van-grid-item>
     </van-grid>
+    <van-image-preview id="preview" v-model="isPrevShow" :images="images" />
+    <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button>
   </div>
 </template>
 
 <script>
 import { Grid, GridItem, Image as VanImage, ImagePreview } from 'vant'
 import { getSchemePics } from '@/api/ebiz/goodStart'
+import Vue from 'vue'
+
+// 全局注册
+Vue.use(ImagePreview)
 export default {
   components: {
     [Grid.name]: Grid,
     [GridItem.name]: GridItem,
-    [VanImage.name]: VanImage,
-    [ImagePreview.name]: ImagePreview
+    [VanImage.name]: VanImage
   },
   data() {
     return {
-      pics: []
+      isPrevShow: false,
+      pics: [],
+      images: []
     }
   },
   created() {
@@ -37,7 +44,31 @@ export default {
       }
     },
     prevImg(pic) {
-      ImagePreview([this.$assetsUrl + pic.picUrl])
+      this.isPrevShow = true
+      this.images = [this.$assetsUrl + pic.picUrl]
+    },
+    shareImg() {
+      const img = this.getImageBase64()
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          shareType: '1',
+          img
+        }
+      })
+    },
+    getImageBase64() {
+      const img = document.querySelector('#preview .van-image__img')
+      img.setAttribute('crossOrigin', 'anonymous')
+      var canvas = document.createElement('canvas')
+      canvas.width = img.width
+      canvas.height = img.height
+      var ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, img.width, img.height)
+      var dataURL = canvas.toDataURL('image/png')
+      canvas = null
+      return dataURL
     }
   }
 }
@@ -51,4 +82,14 @@ export default {
 /deep/ .van-grid-item__content {
   padding: 5px;
 }
+
+.share-btn {
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+}
+
+/deep/ .van-image-preview__image {
+  bottom: auto;
+}
 </style>