@fonixtree/magic-design 0.0.78 → 0.0.80

package/es/composite-comp/dito/components/Recommend/defaultJSON.js

@@ -7,13 +7,16 @@ exports.recommendGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
+var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo, text) {
   var groupId = (0, _uuid.v4)();
+  var imageId = (0, _uuid.v4)();
+  var groupNameId = (0, _uuid.v4)();
   return {
     id: groupId,
+    parentId: parentId,
     image: {
       parentId: groupId,
-      id: (0, _uuid.v4)(),
+      id: imageId,
       open: true,
       type: 'IMAGE',
       content: {
@@ -33,12 +36,13 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
     },
     groupName: {
       parentId: groupId,
-      id: (0, _uuid.v4)(),
+      id: groupNameId,
       open: true,
       type: 'TEXT',
       specialContent: [],
       text: text,
       content: {
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 14,
@@ -52,6 +56,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
       vertical: {}
     },
     seeAll: {
+      parentId: groupId,
       id: (0, _uuid.v4)(),
       open: true,
       type: 'BUTTON',
@@ -61,6 +66,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
         backgroundColor: '#fff'
       },
       buttonText: {
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 12,
@@ -98,10 +104,10 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
     intelligentValue: [],
     maxProdNum: 10,
     hover: {
-      open: true,
+      open: false,
       image: {
         parentId: groupId,
-        id: (0, _uuid.v4)(),
+        id: imageId,
         open: false,
         type: 'IMAGE',
         content: {
@@ -121,12 +127,13 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
       },
       groupName: {
         parentId: groupId,
-        id: (0, _uuid.v4)(),
+        id: groupNameId,
         open: false,
         type: 'TEXT',
         specialContent: [],
         text: text,
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -146,10 +153,11 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
 exports.recommendGroupSourceJSON = recommendGroupSourceJSON;
 
 var getDefaultJSON = function getDefaultJSON() {
+  var groupId = (0, _uuid.v4)();
   return {
-    id: (0, _uuid.v4)(),
+    id: groupId,
     type: 'RECOMMEND',
-    groupSource: [recommendGroupSourceJSON('', 'Tab1'), recommendGroupSourceJSON('', 'Tab2')],
+    groupSource: [recommendGroupSourceJSON(groupId, '', 'Tab1'), recommendGroupSourceJSON(groupId, '', 'Tab2')],
     content: {
       label: {
         id: (0, _uuid.v4)(),
@@ -161,6 +169,7 @@ var getDefaultJSON = function getDefaultJSON() {
           backgroundColor: '#CE1126'
         },
         buttonText: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 8,
@@ -199,6 +208,7 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         text: 'Flash Deal',
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 700,
           fontSize: 14,
@@ -221,6 +231,7 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         text: 'Flash Deal',
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 700,
           fontSize: 14,
@@ -243,6 +254,7 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         text: 'Flash Deal',
         content: {
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 500,
           fontSize: 10,
@@ -268,19 +280,25 @@ var getDefaultJSON = function getDefaultJSON() {
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 0,
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {
-      layout: 'left',
-      align: 'left'
+      layout: {
+        pcLayout: 'layout1',
+        h5Layout: 'layout1'
+      },
+      align: 'left',
+      pcRowNum: 6,
+      pcMaxRowNum: 6,
+      pcMinRowNum: 5
     },
     background: {
       opacity: 100,

package/es/composite-comp/dito/components/Recommend/index.js

@@ -9,14 +9,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobile = _interopRequireDefault(require("./mobile"));
 
+var _pc = _interopRequireDefault(require("./pc"));
+
 var _defaultJSON = require("./defaultJSON");
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,10 +72,9 @@ function (_super) {
 
   Recommend.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: wrapStyle
-    }, (0, _coreUtil.isPc)() ? null : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+      panelProps: nodeData
+    }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       panelProps: nodeData
     }));
   };

package/es/composite-comp/dito/components/Recommend/mobile/index.js

@@ -227,10 +227,6 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 };
 
 var LAYOUT_IMAGE_SIZE = {
-  left: {
-    w: '100%',
-    h: 165
-  },
   layout1: {
     w: '100%',
     h: 164
@@ -263,6 +259,7 @@ function (_super) {
 
     _this.preData = {};
     _this.preLayout = '';
+    _this.preContent = '';
     _this._cache = (0, _coreUtil.isDesignMode)() ? {} : (0, _commonUtil.ensure)(function () {
       return (0, _storeUtil.getMagicStore)("recommend_" + _this.props.panelProps.id);
     }, {});
@@ -292,9 +289,10 @@ function (_super) {
 
     _this.getTabBarActiveColor = function (_panelProps) {
       var tabIndex = _this.state.tabIndex;
-      return (0, _commonUtil.ensure)(function () {
-        return _panelProps.groupSource[tabIndex].hover.groupName.content.color;
-      }, '#1890ff');
+      var activeHoverGroupName = _panelProps.groupSource[tabIndex].hover;
+      return activeHoverGroupName.open ? (0, _commonUtil.ensure)(function () {
+        return activeHoverGroupName.groupName.content.color;
+      }, '#CE1126') : '#CE1126';
     };
 
     _this.getProductList = function (index) {
@@ -416,18 +414,16 @@ function (_super) {
     };
 
     _this.resetLayout = function () {
-      var layout = _this.props.panelProps.customize.layout.h5Layout || _this.props.panelProps.customize.layout; // 后面删除
-
+      var layout = _this.props.panelProps.customize.layout.h5Layout;
       var LAYOUT_COLUMN = {
-        left: 2,
         layout1: 2,
         layout2: 1,
         layout3: 3
       };
       if (!LAYOUT_COLUMN[layout]) return;
       setTimeout(function () {
-        if (document.querySelector('.macyContainer')) {
-          _this.getMacy('.macyContainer', LAYOUT_COLUMN[layout]);
+        if (document.querySelector(".macyContainer_" + _this.props.panelProps.id)) {
+          _this.getMacy(".macyContainer_" + _this.props.panelProps.id, LAYOUT_COLUMN[layout]);
         }
       });
     };
@@ -469,8 +465,7 @@ function (_super) {
 
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
-      if (tabIndex === index) return;
-      e.currentTarget.scrollIntoView(false);
+      if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
 
       _this.setState({
         tabIndex: index
@@ -543,13 +538,15 @@ function (_super) {
         hideTabs: hideTabs
       });
     });
-    var curLayout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
+    var curLayout = panelProps.customize.layout.h5Layout;
+    var curContent = JSON.stringify(panelProps.content);
 
-    if (curLayout !== this.preLayout) {
+    if (curLayout !== this.preLayout || curContent !== this.preContent) {
       this.resetLayout();
     }
 
     this.preLayout = curLayout;
+    this.preContent = curContent;
   };
 
   RecommendMobile.prototype.render = function () {
@@ -565,8 +562,11 @@ function (_super) {
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
-    var layout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
-    // const _seeAll = ensure(() => groupSource[tabIndex].seeAll, '');
+    var layout = panelProps.customize.layout.h5Layout;
+
+    var _seeAll = (0, _commonUtil.ensure)(function () {
+      return groupSource[tabIndex].seeAll;
+    }, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
       return LAYOUT_IMAGE_SIZE[layout].h;
@@ -614,11 +614,33 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), ['layout4', 'layout5'].includes(layout) ? /*#__PURE__*/_react["default"].createElement("div", {
+    })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      key: "macyContainer",
+      className: "macyContainer macyContainer_" + panelProps.id
+    }, products.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
+        key: item.productId,
+        data: item,
+        fixHeight: layout === 'layout3',
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
+        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
+        onItemClick: function onItemClick() {
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+        },
+        panelProps: panelProps.content,
+        showProgress: false
+      });
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+      className: "btnSeeAll",
+      data: _seeAll
+    })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout5'
       })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "scrollProductList"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
@@ -634,24 +656,10 @@ function (_super) {
         panelProps: panelProps.content,
         showProgress: false
       }));
-    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-      key: "macyContainer",
-      className: "macyContainer"
-    }, products.map(function (item) {
-      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
-        key: item.productId,
-        data: item,
-        fixHeight: layout === 'layout3',
-        imgHeight: imgHeight,
-        imgWidth: imgWidth,
-        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
-        onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
-        },
-        panelProps: panelProps.content,
-        showProgress: false
-      });
-    }))));
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+      className: "btnSeeAll",
+      data: _seeAll
+    })));
   };
 
   RecommendMobile.defaultProps = {

package/es/composite-comp/dito/components/Recommend/mobile/index.less

@@ -26,6 +26,7 @@
       display: flex;
       align-items: center;
       padding: 0 24px;
+      width: fit-content;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
@@ -66,8 +67,14 @@
       padding-left: 100px;
     }
 
-    .productCard {
-      margin-right: 12px;
+    .scrollProductList {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      .productCard {
+        margin-right: 12px;
+      }
     }
   }
 
@@ -76,5 +83,6 @@
     width: fit-content;
     min-width: 80px;
     margin: 0 auto;
+    flex: none;
   }
 }

package/es/composite-comp/dito/components/Recommend/pc/index.js

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -25,6 +27,8 @@ var _commonUtil = require("../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -228,16 +232,24 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 
 var LAYOUT_IMAGE_SIZE = {
   layout1: {
-    w: 180,
+    w: '100%',
     h: 180
   },
-  layout2: {
+  layout2_col6: {
     w: 160,
     h: 160
   },
-  layout3: {
-    w: 180,
-    h: 180
+  layout2_col5: {
+    w: 200,
+    h: 200
+  },
+  layout3_col6: {
+    w: 160,
+    h: 160
+  },
+  layout3_col5: {
+    w: 200,
+    h: 200
   }
 };
 
@@ -251,17 +263,31 @@ function (_super) {
 
     _this.preData = {};
     _this.preLayout = '';
+    _this.preContent = '';
     _this._cache = (0, _coreUtil.isDesignMode)() ? {} : (0, _commonUtil.ensure)(function () {
       return (0, _storeUtil.getMagicStore)("recommend_" + _this.props.panelProps.id);
     }, {});
+    _this.scrollRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = __assign({
       tabIndex: 0,
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      scrollToLeftDisabled: true,
+      scrollToRightDisabled: true
     }, _this._cache);
 
+    _this.setScrollDisabled = function (scrollDom) {
+      var scrollToLeftDisabled = scrollDom.scrollLeft === 0;
+      var scrollToRightDisabled = scrollDom.clientWidth + scrollDom.scrollLeft >= scrollDom.scrollWidth;
+
+      _this.setState({
+        scrollToLeftDisabled: scrollToLeftDisabled,
+        scrollToRightDisabled: scrollToRightDisabled
+      });
+    };
+
     _this.initTab = function (index, hideTabs) {
       var selectedTabDom = document.querySelector(".tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
       var tabLeft = 0;
@@ -407,8 +433,8 @@ function (_super) {
       var customize = _this.props.panelProps.customize;
       if (customize.layout.pcLayout !== 'layout1') return;
       setTimeout(function () {
-        if (document.querySelector('.macyContainer')) {
-          _this.getMacy('.macyContainer', customize.pcRowNum);
+        if (document.querySelector(".macyContainer_" + _this.props.panelProps.id)) {
+          _this.getMacy(".macyContainer_" + _this.props.panelProps.id, customize.pcRowNum);
         }
       });
     };
@@ -450,8 +476,7 @@ function (_super) {
 
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
-      if (tabIndex === index) return;
-      e.currentTarget.scrollIntoView(false);
+      if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
 
       _this.setState({
         tabIndex: index
@@ -462,6 +487,34 @@ function (_super) {
       });
 
       _this.getProductList(index);
+
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
+    };
+
+    _this.scrollToRight = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.clientWidth + scrollDom.scrollLeft < scrollDom.scrollWidth) {
+        scrollDom.scrollTo(scrollDom.scrollLeft + scrollDom.clientWidth, 0);
+      }
+    };
+
+    _this.scrollToLeft = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.scrollLeft > 0) {
+        scrollDom.scrollTo(scrollDom.scrollLeft - scrollDom.clientWidth, 0);
+      }
     };
 
     return _this;
@@ -483,6 +536,17 @@ function (_super) {
 
       _this.getProductList(0);
     });
+    setTimeout(function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom) {
+        _this.setScrollDisabled(scrollDom);
+
+        scrollDom.onscroll = (0, _lodash["default"])(function () {
+          _this.setScrollDisabled(scrollDom);
+        }, 500);
+      }
+    }, 0);
   };
 
   RecommendMobile.prototype.componentWillReceiveProps = function () {
@@ -524,13 +588,31 @@ function (_super) {
         hideTabs: hideTabs
       });
     });
-    var curLayout = panelProps.customize.layout.pcLayout;
+    var curLayout = JSON.stringify(panelProps.customize);
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
     }
 
     this.preLayout = curLayout;
+    var curContent = JSON.stringify(panelProps.content);
+
+    if (curContent !== this.preContent) {
+      this.resetLayout();
+    }
+
+    this.preContent = curContent;
   };
 
   RecommendMobile.prototype.render = function () {
@@ -542,10 +624,12 @@ function (_super) {
         tabLeft = _a.tabLeft,
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
-        hideTabs = _a.hideTabs;
+        hideTabs = _a.hideTabs,
+        scrollToLeftDisabled = _a.scrollToLeftDisabled,
+        scrollToRightDisabled = _a.scrollToRightDisabled;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = groupSource.length <= 3;
+    var isDivide = groupSource.length <= 10;
     var layout = panelProps.customize.layout.pcLayout;
 
     var _seeAll = (0, _commonUtil.ensure)(function () {
@@ -553,10 +637,10 @@ function (_super) {
     }, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
     }, 140);
     var imgWidth = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].w;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
     }, 140);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
@@ -598,9 +682,23 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-content"
+    }, layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon left",
+      onClick: function onClick() {
+        return _this.scrollToLeft();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToLeftDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-left"
+    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-list"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       key: "macyContainer",
-      className: "macyContainer"
+      ref: this.scrollRef,
+      className: "macyContainer macyContainer_" + panelProps.id
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.productId,
@@ -609,19 +707,24 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
         },
         panelProps: panelProps.content,
         showProgress: false
       });
     })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-      className: "btnSeeAll",
+      className: (0, _classnames["default"])('btnSeeAll', {
+        line: layout === 'layout1'
+      }),
       data: _seeAll
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
+      ref: this.scrollRef,
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "scrollProductList"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
@@ -632,15 +735,24 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
         },
         panelProps: panelProps.content,
         showProgress: false
       }));
-    }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
-    })));
+    })), layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon right",
+      onClick: function onClick() {
+        return _this.scrollToRight();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToRightDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-right"
+    }))));
   };
 
   RecommendMobile.defaultProps = {