feat: sku to support large image mode

src/sku/Sku.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Popup from '../popup';
 import Toast from '../toast';
+import Lazyload from '../lazyload';
 import ImagePreview from '../image-preview';
 import SkuHeader from './components/SkuHeader';
 import SkuHeaderItem from './components/SkuHeaderItem';
@@ -25,6 +26,8 @@ const namespace = createNamespace('sku');
 const [createComponent, bem, t] = namespace;
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
+Vue.use(Lazyload);
+
 export default createComponent({
   props: {
     sku: Object,
@@ -98,6 +101,18 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    supportBigPicture: {
+      type: Boolean,
+      default: false,
+    },
+    supportBigPictureIndex: {
+      type: Number,
+      default: 0,
+    },
+    hasScrollTab: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -616,8 +631,10 @@ export default createComponent({
       selectedNum,
       stepperTitle,
       selectedSkuComb,
+      supportBigPicture,
+      supportBigPictureIndex,
+      hasScrollTab,
     } = this;
-
     const slotsProps = {
       price,
       originPrice,
@@ -634,6 +651,7 @@ export default createComponent({
         goods={goods}
         skuEventBus={skuEventBus}
         selectedSku={selectedSku}
+        supportBigPicture={supportBigPicture}
       >
         <template slot="sku-header-image-extra">
           {slots('sku-header-image-extra')}
@@ -669,17 +687,44 @@ export default createComponent({
       slots('sku-group') ||
       (this.hasSkuOrAttr && (
         <div class={this.skuGroupClass}>
-          {this.skuTree.map((skuTreeItem) => (
-            <SkuRow skuRow={skuTreeItem}>
-              {skuTreeItem.v.map((skuValue) => (
-                <SkuRowItem
-                  skuList={sku.list}
-                  skuValue={skuValue}
-                  selectedSku={selectedSku}
-                  skuEventBus={skuEventBus}
-                  skuKeyStr={skuTreeItem.k_s}
-                />
-              ))}
+          {this.skuTree.map((skuTreeItem, index) => (
+            <SkuRow
+              skuRow={skuTreeItem}
+              isShowBigPicture={
+                supportBigPicture && supportBigPictureIndex === index
+              }
+              hasScrollTab={hasScrollTab && skuTreeItem.v.length > 6}
+            >
+              {skuTreeItem.v.map((skuValue, itemIndex) => {
+                return supportBigPicture && supportBigPictureIndex === index ? (
+                  <template
+                    slot={
+                      Math.floor(itemIndex / 3) % 2 === 0
+                        ? 'sku-item-group-one'
+                        : 'sku-item-group-two'
+                    }
+                  >
+                    <SkuRowItem
+                      skuList={sku.list}
+                      skuValue={skuValue}
+                      selectedSku={selectedSku}
+                      skuEventBus={skuEventBus}
+                      skuKeyStr={skuTreeItem.k_s}
+                      isShowBigPicture={
+                        supportBigPicture && supportBigPictureIndex === index
+                      }
+                    ></SkuRowItem>
+                  </template>
+                ) : (
+                  <SkuRowItem
+                    skuList={sku.list}
+                    skuValue={skuValue}
+                    selectedSku={selectedSku}
+                    skuEventBus={skuEventBus}
+                    skuKeyStr={skuTreeItem.k_s}
+                  ></SkuRowItem>
+                );
+              })}
             </SkuRow>
           ))}
           {this.propList.map((skuTreeItem) => (