[new feature]Sku: 组件新增图片预览功能 (#2019)

* feat: SKU组件新增图片预览功能

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;

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);
     }
   }
 });