From a5576762d803c5723162e7ca37f938c25a519224 Mon Sep 17 00:00:00 2001
From: Jackie Zhang <JackieDark@users.noreply.github.com>
Date: Fri, 2 Nov 2018 21:13:14 +0800
Subject: [PATCH] =?UTF-8?q?=20[new=20feature]Sku:=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20(#2019)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: SKU组件新增图片预览功能
---
 packages/sku/Sku.vue                  | 43 +++++++++++++++++++++++++++
 packages/sku/components/SkuHeader.vue |  6 +++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.vue
index efa91a59c..2656a3195 100644
--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.vue
@@ -106,6 +106,7 @@
 import Vue from 'vue';
 import Popup from '../popup';
 import Toast from '../toast';
+import ImagePreview from '../image-preview';
 import SkuHeader from './components/SkuHeader';
 import SkuRow from './components/SkuRow';
 import SkuRowItem from './components/SkuRowItem';
@@ -273,6 +274,25 @@ export default create({
 
     skuTree() {
       return this.sku.tree || [];
+    },
+
+    imageList() {
+      const imageList = [this.goods.picture];
+      if (this.skuTree.length > 0) {
+        const treeItem = this.skuTree.filter(treeItem => treeItem.k_s === 's1')[0] || {};
+
+        if (!treeItem.v) {
+          return;
+        }
+
+        treeItem.v.forEach(vItem => {
+          if (vItem.imgUrl) {
+            imageList.push(vItem.imgUrl);
+          }
+        });
+      }
+
+      return imageList;
     }
   },
 
@@ -283,6 +303,7 @@ export default create({
     skuEventBus.$on('sku:close', this.onClose);
     skuEventBus.$on('sku:select', this.onSelect);
     skuEventBus.$on('sku:numChange', this.onNumChange);
+    skuEventBus.$on('sku:previewImage', this.onPreviewImage);
     skuEventBus.$on('sku:overLimit', this.onOverLimit);
     skuEventBus.$on('sku:addCart', this.onAddCart);
     skuEventBus.$on('sku:buy', this.onBuy);
@@ -368,6 +389,28 @@ export default create({
       this.selectedNum = num;
     },
 
+    onPreviewImage(indexImage) {
+      const index = this.imageList.findIndex(image => {
+        return image === indexImage;
+      });
+
+      const cbParams = {
+        index,
+        imageList: this.imageList,
+        indexImage
+      };
+
+      this.$emit('preview-on', cbParams);
+
+      ImagePreview({
+        images: this.imageList,
+        startPosition: index,
+        onClose: () => {
+          this.$emit('preview-close', cbParams);
+        }
+      });
+    },
+
     onOverLimit(data) {
       const { action, limitType, quota, quotaUsed } = data;
       const { handleOverLimit } = this.customStepperConfig;
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
index d8aab4d10..883d3355f 100644
--- a/packages/sku/components/SkuHeader.vue
+++ b/packages/sku/components/SkuHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="b()" class="van-hairline--bottom">
-    <div :class="b('img-wrap')">
+    <div :class="b('img-wrap')" @click="previewImage">
       <img :src="goodsImg" >
     </div>
     <div :class="b('goods-info')">
@@ -49,6 +49,10 @@ export default create({
       if (matchedSku && matchedSku.imgUrl) {
         return matchedSku.imgUrl;
       }
+    },
+
+    previewImage() {
+      this.skuEventBus.$emit('sku:previewImage', this.goodsImg);
     }
   }
 });