@fonixtree/magic-design 2.0.132 → 2.0.135

package/lib/common/LinkModal/CustomTable/index.js

@@ -221,7 +221,7 @@ function CustomTable(props) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Table, {
     bordered: false,
@@ -232,7 +232,7 @@ function CustomTable(props) {
     rowKey: "bdPageId",
     rowSelection: rowSelection,
     scroll: {
-      y: 480
+      y: 380
     }
   }));
 }

package/lib/common/LinkModal/FilteredProductModal/index.js

@@ -674,7 +674,7 @@ var FilteredProductModal = function FilteredProductModal(props) {
       }
     }),
     scroll: {
-      y: 400
+      y: 350
     }
   })))));
 };

package/lib/common/LinkModal/FilteredProductModal/index.less

@@ -1,5 +1,5 @@
 .mFilteredProductModal {
-  height: 550px;
+  height: 450px;
 
   .proModalWrap {
     .info {
@@ -86,7 +86,8 @@
 
       .leftCot {
         width: 280px;
-        // height: 400px;
+        height: 400px;
+        overflow-y: auto;
         box-sizing: border-box;
         border-right: 1px solid #e0e0e0;
         padding-right: 15px;

package/lib/common/LinkModal/FunctionTable/index.js

@@ -218,7 +218,7 @@ function FunctionTable(props) {
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Table, {
     columns: columns,
@@ -228,7 +228,7 @@ function FunctionTable(props) {
     rowKey: "funcUrlLibId",
     rowSelection: rowSelection,
     scroll: {
-      y: 480
+      y: 380
     }
   }));
 }

package/lib/common/LinkModal/InterestedMerchants/index.js

@@ -262,7 +262,7 @@ function InterestedMerchants(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
     labelCol: {
@@ -319,7 +319,7 @@ function InterestedMerchants(props) {
     rowKey: "interestId",
     rowSelection: rowSelection,
     scroll: {
-      y: 400
+      y: 350
     }
   }));
 }

package/lib/common/LinkModal/InterestedProducts/index.js

@@ -262,7 +262,7 @@ function InterestedMerchants(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
     labelCol: {
@@ -319,7 +319,7 @@ function InterestedMerchants(props) {
     rowKey: "interestId",
     rowSelection: rowSelection,
     scroll: {
-      y: 400
+      y: 350
     }
   }));
 }

package/lib/common/LinkModal/MerchantStory/index.js

@@ -264,7 +264,7 @@ function MerchantStory(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
     labelCol: {
@@ -321,7 +321,7 @@ function MerchantStory(props) {
     rowKey: "storeId",
     rowSelection: rowSelection,
     scroll: {
-      y: 400
+      y: 350
     }
   }));
 }

package/lib/common/LinkModal/MiniAppApi/index.js

@@ -55,7 +55,7 @@ function MiniAppApi(_a) {
     rowKey: "title",
     rowSelection: rowSelection,
     scroll: {
-      y: 480
+      y: 350
     }
   }));
 }

package/lib/common/LinkModal/MiniAppTable/index.js

@@ -233,7 +233,7 @@ function CustomTable(props) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Table, {
     bordered: false,
@@ -244,7 +244,7 @@ function CustomTable(props) {
     rowKey: "storeMiniProgramId",
     rowSelection: rowSelection,
     scroll: {
-      y: 480
+      y: 380
     }
   }));
 }

package/lib/common/LinkModal/MissionDetail/index.js

@@ -227,13 +227,13 @@ function MissionDetail(props) {
     queryData(paginationParams);
   }, []);
   var columns = [{
-    title: 'taskName',
+    title: 'Mission Name',
     dataIndex: 'taskName'
   }, {
-    title: 'effDate',
+    title: 'EffDate',
     dataIndex: 'effDate'
   }, {
-    title: 'expDate',
+    title: 'ExpDate',
     dataIndex: 'expDate'
   }];
   var rowSelection = {
@@ -255,7 +255,7 @@ function MissionDetail(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
     labelCol: {
@@ -312,7 +312,7 @@ function MissionDetail(props) {
     rowKey: "sfTaskId",
     rowSelection: rowSelection,
     scroll: {
-      y: 400
+      y: 350
     }
   }));
 }

package/lib/common/LinkModal/ProductDetailPage/index.js

@@ -557,7 +557,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
     rowKey: "productId",
     rowSelection: rowSelection,
     scroll: {
-      y: 300
+      y: 250
     }
   }));
 };

package/lib/common/LinkModal/ProductDetailPage/index.less

@@ -1,5 +1,5 @@
 .productDetailPage {
-  height: 550px;
+  height: 450px;
 
   .btn-select-type {
     margin-bottom: 10px;

package/lib/common/LinkModal/SelectVideoModal/index.less

@@ -2,7 +2,8 @@
   display: flex;
   // padding: 20px 80px;
   // border-top: 1px solid #f0f0f0;
-  height: 550px;
+  height: 450px;
+
   .video-left-wrap {
     display: flex;
     flex-direction: column;

package/lib/common/LinkModal/ShareUrl/index.less

@@ -1,3 +1,3 @@
 .shareWrap {
-  height: 550px;
+  height: 450px;
 }

package/lib/common/LinkModal/StoreCatgTable/index.js

@@ -223,7 +223,7 @@ function StoreCatgTable(props) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Table, {
     bordered: false,
@@ -237,7 +237,7 @@ function StoreCatgTable(props) {
     },
     rowSelection: rowSelection,
     scroll: {
-      y: 480
+      y: 380
     }
   }));
 }

package/lib/common/LinkModal/StoreTable/index.js

@@ -264,7 +264,7 @@ function StoreTable(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      height: 550
+      height: 450
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
     labelCol: {
@@ -321,7 +321,7 @@ function StoreTable(props) {
     rowKey: "storeId",
     rowSelection: rowSelection,
     scroll: {
-      y: 400
+      y: 350
     }
   }));
 }

package/lib/common/LinkModal/index.js

@@ -11,6 +11,8 @@ var _antd = require("antd4");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _CouponTable = _interopRequireDefault(require("./CouponTable"));
 
 var _FilteredProductModal = _interopRequireDefault(require("./FilteredProductModal"));
@@ -323,116 +325,124 @@ var LinkModal = function LinkModal(props) {
     visible: visible,
     width: "1000px",
     wrapClassName: "magicLinkModal"
-  }, modalConfig), /*#__PURE__*/_react["default"].createElement(_antd.Tabs, {
-    activeKey: selected,
-    onChange: onTabsChange
+  }, modalConfig), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "types-list"
   }, linkTypes.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_antd.Tabs.TabPane, {
+    return /*#__PURE__*/_react["default"].createElement("span", {
       key: item.linkTypeCode,
-      tab: item.linkTypeName
-    }, item.linkTypeCode === 'StoreCategory' && /*#__PURE__*/_react["default"].createElement(_StoreCatgTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'Category' && /*#__PURE__*/_react["default"].createElement(_CatgTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'CustomizedPage' && /*#__PURE__*/_react["default"].createElement(_CustomTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'ProductDetailPage' && /*#__PURE__*/_react["default"].createElement(_ProductDetailPage["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(url) {
-        return setLinkUrl(url);
-      }
-    }), item.linkTypeCode === 'FilteredProduct' && /*#__PURE__*/_react["default"].createElement(_FilteredProductModal["default"], {
-      _fetch: _fetch,
-      onDataChange: function onDataChange(url, t) {
-        setLinkUrl(url);
-        setTotal(t);
-      }
-    }), item.linkTypeCode === 'FunctionPage' && /*#__PURE__*/_react["default"].createElement(_FunctionTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'Coupons' && /*#__PURE__*/_react["default"].createElement(_CouponTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'BundleCampaign' && /*#__PURE__*/_react["default"].createElement(_BundleCampaign["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'Video' && /*#__PURE__*/_react["default"].createElement(_SelectVideoModal["default"], {
-      _fetch: _fetch,
-      setUrl: function setUrl(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'ShareURL' && /*#__PURE__*/_react["default"].createElement(_ShareUrl["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'MiniApp' && /*#__PURE__*/_react["default"].createElement(_MiniAppTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'Store' && /*#__PURE__*/_react["default"].createElement(_StoreTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'AffiliateProduct' && /*#__PURE__*/_react["default"].createElement(_AffiliateProductTable["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'AffiliateStore' && /*#__PURE__*/_react["default"].createElement(_AffiliateStore["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'MiniApi' && /*#__PURE__*/_react["default"].createElement(_MiniAppApi["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'AffiliatePlatform' && /*#__PURE__*/_react["default"].createElement(_AffiliatePlatform["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'InterestedMerchants' && /*#__PURE__*/_react["default"].createElement(_InterestedMerchants["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'InterestedProducts' && /*#__PURE__*/_react["default"].createElement(_InterestedProducts["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'MerchantStory' && /*#__PURE__*/_react["default"].createElement(_MerchantStory["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
-      }
-    }), item.linkTypeCode === 'AffiliateMissionDetail' && /*#__PURE__*/_react["default"].createElement(_MissionDetail["default"], {
-      _fetch: _fetch,
-      onChange: function onChange(value) {
-        return setLinkUrl(value);
+      className: (0, _classnames["default"])('tag', {
+        active: selected === item.linkTypeCode
+      }),
+      onClick: function onClick() {
+        return onTabsChange(item.linkTypeCode);
       }
-    }));
+    }, item.linkTypeName);
   })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-content"
+  }, selected === 'StoreCategory' && /*#__PURE__*/_react["default"].createElement(_StoreCatgTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      setLinkUrl(value);
+    }
+  }), selected === 'Category' && /*#__PURE__*/_react["default"].createElement(_CatgTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'CustomizedPage' && /*#__PURE__*/_react["default"].createElement(_CustomTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'ProductDetailPage' && /*#__PURE__*/_react["default"].createElement(_ProductDetailPage["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(url) {
+      return setLinkUrl(url);
+    }
+  }), selected === 'FilteredProduct' && /*#__PURE__*/_react["default"].createElement(_FilteredProductModal["default"], {
+    _fetch: _fetch,
+    onDataChange: function onDataChange(url, t) {
+      setLinkUrl(url);
+      setTotal(t);
+    }
+  }), selected === 'FunctionPage' && /*#__PURE__*/_react["default"].createElement(_FunctionTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'Coupons' && /*#__PURE__*/_react["default"].createElement(_CouponTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'BundleCampaign' && /*#__PURE__*/_react["default"].createElement(_BundleCampaign["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'Video' && /*#__PURE__*/_react["default"].createElement(_SelectVideoModal["default"], {
+    _fetch: _fetch,
+    setUrl: function setUrl(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'ShareURL' && /*#__PURE__*/_react["default"].createElement(_ShareUrl["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'MiniApp' && /*#__PURE__*/_react["default"].createElement(_MiniAppTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'Store' && /*#__PURE__*/_react["default"].createElement(_StoreTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'AffiliateProduct' && /*#__PURE__*/_react["default"].createElement(_AffiliateProductTable["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'AffiliateStore' && /*#__PURE__*/_react["default"].createElement(_AffiliateStore["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'MiniApi' && /*#__PURE__*/_react["default"].createElement(_MiniAppApi["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'AffiliatePlatform' && /*#__PURE__*/_react["default"].createElement(_AffiliatePlatform["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'InterestedMerchants' && /*#__PURE__*/_react["default"].createElement(_InterestedMerchants["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'InterestedProducts' && /*#__PURE__*/_react["default"].createElement(_InterestedProducts["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'MerchantStory' && /*#__PURE__*/_react["default"].createElement(_MerchantStory["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }), selected === 'AffiliateMissionDetail' && /*#__PURE__*/_react["default"].createElement(_MissionDetail["default"], {
+    _fetch: _fetch,
+    onChange: function onChange(value) {
+      return setLinkUrl(value);
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "footer"
   }, selected === 'FilteredProduct' ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "total"

package/lib/common/LinkModal/index.less

@@ -4,9 +4,10 @@
   left: unset !important;
 
   .cylon-modal .cylon-modal-content .cylon-modal-body {
-      padding-bottom: 60px !important;
-      padding-top: 0 !important;
+    padding-bottom: 60px !important;
+    padding-top: 0 !important;
   }
+
   .urlModalWrap {
     font-family: 'Open Sans';
     font-style: normal;
@@ -69,10 +70,40 @@
       }
     }
   }
+
   .shareUrlWrap {
     height: 500px;
   }
 
+  .types-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .tag {
+      display: inline-block;
+      width: 145px;
+      height: 36px;
+      background-color: #F5F6F7;
+      border-radius: 4px;
+      line-height: 36px;
+      text-align: center;
+      color: #232F46;
+      font-weight: 400;
+      font-size: 14px;
+      border: 1px solid #F5F6F7;
+      cursor: pointer;
+
+      &.active {
+        border: 1px solid #2F54EB;
+        color: #2F54EB;
+      }
+    }
+  }
+
   .footer {
     padding: 10px 0;
     display: flex;
@@ -91,11 +122,13 @@
       border: none;
       margin-right: 12px;
     }
+
     .btn-confirm {
       background: #2F54EB;
       border: none;
       border-radius: 6px;
     }
+
     .total {
       font-size: 13px;
       color: #2d3040;

package/lib/composite-comp/common/components/ProductItem/index.js

@@ -206,7 +206,9 @@ function (_super) {
         text: data.offerName
       }),
       readonly: true
-    }))), panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
+    }))), (panelProps.activityPrice.open || panelProps.salesPrice.open) && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "price-info-wrap"
+    }, panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "price-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "price",
@@ -232,9 +234,9 @@ function (_super) {
       style: {
         color: panelProps.salesPrice.content.color
       }
-    })), type !== 'groupBuy' && !showProgress && data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    })), type !== 'groupBuy' && !showProgress && data.salesCnt > 0 && data.displaySalesCntFlag === 'Y' && /*#__PURE__*/_react["default"].createElement("div", {
       className: "sold-count"
-    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold")), showProgress && ((_d = panelProps.salesProgress) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))), showProgress && ((_d = panelProps.salesProgress) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "progress-wrap"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "text"

package/lib/composite-comp/dito/components/FlashDeal/defaultJSON.js

@@ -85,6 +85,10 @@ var getDefaultJSON = function getDefaultJSON() {
           layout: 'right'
         },
         hover: null
+      },
+      countDown: {
+        id: (0, _uuid.v4)(),
+        open: true
       }
     },
     content: {

package/lib/composite-comp/dito/components/FlashDeal/mobile/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 require("./index.less");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _defImg = _interopRequireDefault(require("./imgs/defImg.png"));
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -375,13 +377,16 @@ function (_super) {
   };
 
   FlashDealMobile.prototype.render = function () {
+    var _a;
+
     var panelProps = this.props.panelProps;
-    var _a = this.state,
-        list = _a.list,
-        effDate = _a.effDate,
-        expDate = _a.expDate,
-        now = _a.now,
-        isWill = _a.isWill;
+    console.log('flash deal panelProps: ', panelProps);
+    var _b = this.state,
+        list = _b.list,
+        effDate = _b.effDate,
+        expDate = _b.expDate,
+        now = _b.now,
+        isWill = _b.isWill;
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
@@ -400,7 +405,7 @@ function (_super) {
       data: panelProps.title.headline
     }), isWill && /*#__PURE__*/_react["default"].createElement("span", {
       className: "sub-title"
-    }, (0, _locale.i18n)('NEXT')), /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
+    }, (0, _locale.i18n)('NEXT')), ((_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.countDown.open) && /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
       effDate: effDate,
       expDate: expDate,
       now: now,
@@ -414,7 +419,10 @@ function (_super) {
       className: "btn",
       data: panelProps.title.button
     }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "flash-deal-list"
+      className: (0, _classnames["default"])('flash-deal-list', {
+        'flash-deal-list-vertical': panelProps.customize.layout === 'layout1',
+        'flash-deal-list-horizontal': panelProps.customize.layout === 'layout2'
+      })
     }, _list.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.id,
@@ -422,6 +430,7 @@ function (_super) {
           salePercent: isWill ? 0 : item.salePercent
         }) // onItemClick={() => clickUrl(`/product/detail/${item.offerId}?productId=${item.sppProductId ?? ''}`)}
         ,
+        layout: panelProps.customize.layout === 'layout2' ? 'horizontal' : 'vertical',
         onItemClick: function onItemClick() {
           if (window.magicDesign.pushGA) {
             window.magicDesign.pushGA({}, 'select_promotion', {