fix(Sku): add open-preview event data (#6664)

* fix(Sku): open-preview event data

* fix(Sku): delete findIndex

* fix(Sku): change name

Co-authored-by: songweite <songweite@youzan.com>

src/sku/Sku.js

@@ -512,9 +512,22 @@ export default createComponent({
       this.selectedNum = num;
     },
 
-    onPreviewImage(indexImage) {
-      const index = this.imageList.findIndex((image) => image === indexImage);
+    onPreviewImage(selectedValue) {
+      const { imageList } = this;
+      let index = 0;
+      let indexImage = imageList[0];
+      if (selectedValue && selectedValue.imgUrl) {
+        this.imageList.some((image, pos) => {
+          if (image === selectedValue.imgUrl) {
+            index = pos;
+            return true;
+          }
+          return false;
+        });
+        indexImage = selectedValue.imgUrl;
+      }
       const params = {
+        ...selectedValue,
         index,
         imageList: this.imageList,
         indexImage,

src/sku/components/SkuHeader.tsx

@@ -23,13 +23,18 @@ export type SkuHeaderSlots = DefaultSlots & {
   'sku-header-image-extra'?: ScopedSlot;
 };
 
+type SelectedValueType = {
+  ks: string;
+  imgUrl: string;
+};
+
 const [createComponent, bem] = createNamespace('sku-header');
 
-function getSkuImg(
+function getSkuImgValue(
   sku: SkuData,
   selectedSku: SelectedSkuData
-): string | undefined {
-  let img;
+): SelectedValueType | undefined {
+  let imgValue;
 
   sku.tree.some((item) => {
     const id = selectedSku[item.k_s];
@@ -37,14 +42,23 @@ function getSkuImg(
     if (id && item.v) {
       const matchedSku =
         item.v.filter((skuValue) => skuValue.id === id)[0] || {};
-      img = matchedSku.previewImgUrl || matchedSku.imgUrl || matchedSku.img_url;
-      return img;
+
+      const img =
+        matchedSku.previewImgUrl || matchedSku.imgUrl || matchedSku.img_url;
+      if (img) {
+        imgValue = {
+          ...matchedSku,
+          ks: item.k_s,
+          imgUrl: img,
+        };
+        return true;
+      }
     }
 
     return false;
   });
 
-  return img;
+  return imgValue;
 }
 
 function SkuHeader(
@@ -61,10 +75,11 @@ function SkuHeader(
     showHeaderImage = true,
   } = props;
 
-  const imgUrl = getSkuImg(sku, selectedSku) || goods.picture;
+  const selectedValue = getSkuImgValue(sku, selectedSku);
+  const imgUrl = selectedValue ? selectedValue.imgUrl : goods.picture;
 
   const previewImage = () => {
-    skuEventBus.$emit('sku:previewImage', imgUrl);
+    skuEventBus.$emit('sku:previewImage', selectedValue);
   };
 
   return (

src/sku/components/SkuRowItem.js

@@ -51,7 +51,12 @@ export default createComponent({
 
     onPreviewImg(event) {
       event.stopPropagation();
-      this.skuEventBus.$emit('sku:previewImage', this.imgUrl);
+      const { skuValue, skuKeyStr } = this;
+      this.skuEventBus.$emit('sku:previewImage', {
+        ...skuValue,
+        ks: skuKeyStr,
+        imgUrl: skuValue.imgUrl || skuValue.img_url,
+      });
     },
 
     genImage(classPrefix) {