@fonixtree/magic-design 2.0.98 → 2.0.100

package/lib/composite-comp/monpay/components/MonpayRecommend/defaultJSON.js

@@ -7,6 +7,10 @@ exports.recommendGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
+var _headerImage = _interopRequireDefault(require("./mobile/imgs/headerImage.jpg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo, text) {
   var groupId = (0, _uuid.v4)();
   var imageId = (0, _uuid.v4)();
@@ -165,8 +169,8 @@ var getDefaultJSON = function getDefaultJSON() {
         content: {
           h5Name: '',
           pcName: '',
-          h5ImgSrc: '',
-          pcImgSrc: '',
+          h5ImgSrc: _headerImage["default"],
+          pcImgSrc: _headerImage["default"],
           clickUrl: ''
         },
         hover: {
@@ -178,7 +182,7 @@ var getDefaultJSON = function getDefaultJSON() {
         }
       }
     },
-    groupSource: [recommendGroupSourceJSON(groupId, '', 'Tab1'), recommendGroupSourceJSON(groupId, '', 'Tab2')],
+    groupSource: [recommendGroupSourceJSON(groupId, '', 'Tab1')],
     content: {
       label: {
         id: (0, _uuid.v4)(),

package/lib/composite-comp/monpay/components/MonpayRecommend/mobile/SearchCondition/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SearchCondition;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _locale = require("../../../../../../locale");
+
+require("./index.less");
+
+var _common = require("../../../../../../common");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+function SearchCondition(props) {
+  var onChange = props.onChange,
+      filterObj = props.filterObj,
+      isBundle = props.isBundle;
+
+  var _a = (0, _react.useState)(false),
+      visible = _a[0],
+      setVisible = _a[1];
+
+  var _b = (0, _react.useState)(null),
+      sort = _b[0],
+      setSort = _b[1];
+
+  var _c = (0, _react.useState)({}),
+      filter = _c[0],
+      setFilter = _c[1];
+
+  var sortList = [{
+    title: (0, _locale.i18n)('EARLIEST'),
+    key: '8'
+  }, {
+    title: (0, _locale.i18n)('LOWEST_PRICE'),
+    key: '3'
+  }, {
+    title: (0, _locale.i18n)('MOST_SOLD'),
+    key: '1'
+  }, {
+    title: (0, _locale.i18n)('HIGHEST_RATED'),
+    key: '9'
+  }, {
+    title: (0, _locale.i18n)('PROMOTION'),
+    key: '10'
+  }];
+  var bundleSortList = [{
+    title: (0, _locale.i18n)('EARLIEST'),
+    key: 'effDate'
+  }, {
+    title: (0, _locale.i18n)('LOWEST_PRICE'),
+    key: 'price'
+  }, {
+    title: (0, _locale.i18n)('MOST_SOLD'),
+    key: 'salesCnt'
+  }];
+
+  var onSortByClick = function onSortByClick(val) {
+    var sortType = '';
+
+    if (val === sort) {
+      setSort(null);
+    } else {
+      setSort(val);
+      sortType = val;
+    }
+
+    onChange(__assign(__assign({}, filter), {
+      sortType: sortType
+    }));
+  };
+
+  var onFilterChange = function onFilterChange(val) {
+    setFilter(val);
+    onChange(__assign({}, val));
+    setVisible(false);
+  };
+
+  (0, _react.useEffect)(function () {}, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "searchCondWrap",
+    id: "sortCond"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "leftWrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sortItem",
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "filterText"
+  }, (0, _locale.i18n)('FILTER')), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: "#848484",
+    size: 16,
+    type: "icon-list-sort"
+  })), /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('SORT_BY'), ":")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "rightWrap"
+  }, (isBundle ? bundleSortList : sortList).map(function (srt) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('sortItem', {
+        activeItem: sort === srt.key
+      }),
+      onClick: function onClick() {
+        return onSortByClick(srt.key);
+      }
+    }, srt.title);
+  })), /*#__PURE__*/_react["default"].createElement(_common.ProductFilterModal, {
+    filterObj: filterObj,
+    onChange: onFilterChange,
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    value: filter,
+    visible: visible
+  }));
+}

package/lib/composite-comp/monpay/components/MonpayRecommend/mobile/SearchCondition/index.less

@@ -0,0 +1,49 @@
+.searchCondWrap {
+  height: 1.12rem;
+  padding-left: 0.4rem;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  background-color: #FFF;
+}
+.searchCondWrap .leftWrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 2.8rem;
+  flex-shrink: 0;
+  padding-right: 0.16rem;
+}
+.searchCondWrap .rightWrap {
+  display: flex;
+  overflow: scroll;
+}
+.searchCondWrap .sortItem {
+  height: 0.64rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.24rem;
+  border: 0.02rem solid #E4E4E4;
+  color: #848484;
+  border-radius: 0.52rem;
+  font-size: 0.24rem;
+  font-weight: 400;
+  width: fit-content;
+  flex-shrink: 0;
+}
+.searchCondWrap .sortItem .filterText {
+  margin-right: 0.08rem;
+  height: 0.24rem;
+  overflow: hidden;
+  line-height: 0.24rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.searchCondWrap .sortItem + .sortItem {
+  margin-left: 0.2rem;
+}
+.searchCondWrap .activeItem {
+  color: #FF8650;
+  border-color: #FF8650;
+}

package/lib/composite-comp/monpay/components/MonpayRecommend/mobile/index.js

@@ -13,6 +13,10 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _card = _interopRequireDefault(require("./imgs/card.png"));
+
+var _SearchCondition = _interopRequireDefault(require("./SearchCondition"));
+
 var _mobx = require("../../../../../mobx");
 
 var _MonpayProductItem = _interopRequireDefault(require("../../../../common/components/MonpayProductItem"));
@@ -226,6 +230,51 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+var defaultData = [{
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}];
 var LAYOUT_IMAGE_SIZE = {
   'layout1-2': {
     w: '100%',
@@ -275,7 +324,9 @@ function (_super) {
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      filterObj: {},
+      searchParams: {}
     }, _this._cache);
 
     _this.listenWidth = function () {
@@ -313,14 +364,14 @@ function (_super) {
 
     _this.getProductList = function (index) {
       return __awaiter(_this, void 0, void 0, function () {
-        var panelProps, groupSource, recommendId, pageId, cache, _a, _b, sourceType, _c, prodIds, _d, prodType, _e, intelligentType, _f, intelligentValue, _g, maxProdNum, newData, params, res, res, e_1, _cache;
+        var panelProps, groupSource, recommendId, pageId, cache, _a, _b, sourceType, _c, prodIds, _d, prodType, _e, intelligentType, _f, intelligentValue, _g, maxProdNum, newData, params, res, res, _h, pageInfo, brandIds, catgIds, offerAttrValues, serviceIds, e_1, _cache;
 
-        var _h, _j, _k;
+        var _j, _k, _l;
 
         var _this = this;
 
-        return __generator(this, function (_l) {
-          switch (_l.label) {
+        return __generator(this, function (_m) {
+          switch (_m.label) {
             case 0:
               panelProps = this.props.panelProps;
               groupSource = this.state.groupSource;
@@ -332,7 +383,7 @@ function (_super) {
 
                 if (cache) {
                   if ("products" + index in cache) {
-                    this.setState((_h = {}, _h["products" + index] = cache["products" + index], _h), function () {
+                    this.setState((_j = {}, _j["products" + index] = cache["products" + index], _j), function () {
                       _this.resetLayout();
                     });
                     /** 如果数据未过期 */
@@ -346,14 +397,14 @@ function (_super) {
 
               _a = groupSource[index] || {}, _b = _a.sourceType, sourceType = _b === void 0 ? '' : _b, _c = _a.prodIds, prodIds = _c === void 0 ? '' : _c, _d = _a.prodType, prodType = _d === void 0 ? '' : _d, _e = _a.intelligentType, intelligentType = _e === void 0 ? '' : _e, _f = _a.intelligentValue, intelligentValue = _f === void 0 ? [] : _f, _g = _a.maxProdNum, maxProdNum = _g === void 0 ? 10 : _g;
               newData = [];
-              _l.label = 1;
+              _m.label = 1;
 
             case 1:
-              _l.trys.push([1, 9,, 10]);
+              _m.trys.push([1, 14,, 15]);
 
               if (!(groupSource.length > 0)) return [3
               /*break*/
-              , 7];
+              , 12];
               if (!(sourceType === 'select')) return [3
               /*break*/
               , 3];
@@ -375,16 +426,46 @@ function (_super) {
               , (0, _commonUtil.commonFetch)('/designer/v1/h5/products', params, 'GET')];
 
             case 2:
-              res = _l.sent();
+              res = _m.sent();
               newData = __spreadArrays(res.list);
               return [3
               /*break*/
-              , 6];
+              , 11];
 
             case 3:
               if (!(sourceType === 'recommend')) return [3
               /*break*/
+              , 10];
+              if (!(intelligentType === 'Recently')) return [3
+              /*break*/
+              , 7];
+              if (!!(0, _coreUtil.isDesignMode)()) return [3
+              /*break*/
               , 5];
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/viewlog/recent/list', {
+                pageIndex: 1,
+                pageSize: maxProdNum
+              }, 'GET')];
+
+            case 4:
+              res = _m.sent();
+              newData = __spreadArrays(res.list);
+              return [3
+              /*break*/
+              , 6];
+
+            case 5:
+              newData = defaultData;
+              _m.label = 6;
+
+            case 6:
+              return [3
+              /*break*/
+              , 9];
+
+            case 7:
               return [4
               /*yield*/
               , (0, _commonUtil.commonFetch)('/designer/v1/h5/offers', {
@@ -397,45 +478,56 @@ function (_super) {
                 storeId: window.magicDesign.storeId >= 0 ? window.magicDesign.storeId : ''
               }, 'POST')];
 
-            case 4:
-              res = _l.sent();
-              newData = __spreadArrays(res.pageInfo.list);
+            case 8:
+              _h = _m.sent(), pageInfo = _h.pageInfo, brandIds = _h.brandIds, catgIds = _h.catgIds, offerAttrValues = _h.offerAttrValues, serviceIds = _h.serviceIds;
+              this.setState({
+                filterObj: {
+                  brandIds: brandIds,
+                  catgIds: catgIds,
+                  offerAttrValues: offerAttrValues,
+                  serviceIds: serviceIds
+                }
+              });
+              newData = __spreadArrays(pageInfo.list);
+              _m.label = 9;
+
+            case 9:
               return [3
               /*break*/
-              , 6];
+              , 11];
 
-            case 5:
+            case 10:
               newData = [];
-              _l.label = 6;
+              _m.label = 11;
 
-            case 6:
+            case 11:
               return [3
               /*break*/
-              , 8];
+              , 13];
 
-            case 7:
+            case 12:
               newData = [];
-              _l.label = 8;
+              _m.label = 13;
 
-            case 8:
+            case 13:
               return [3
               /*break*/
-              , 10];
+              , 15];
 
-            case 9:
-              e_1 = _l.sent();
+            case 14:
+              e_1 = _m.sent();
               newData = [];
               return [3
               /*break*/
-              , 10];
+              , 15];
 
-            case 10:
+            case 15:
               if (!(0, _coreUtil.isDesignMode)()) {
                 _cache = (0, _storeUtil.getMagicStore)("recommend_" + pageId + "_" + recommendId);
-                (0, _storeUtil.setMagicStore)("recommend_" + pageId + "_" + recommendId, __assign(__assign({}, _cache), (_j = {}, _j["products" + index] = newData, _j.endTime = Date.now() + 3 * 60 * 1000, _j)));
+                (0, _storeUtil.setMagicStore)("recommend_" + pageId + "_" + recommendId, __assign(__assign({}, _cache), (_k = {}, _k["products" + index] = newData, _k.endTime = Date.now() + 3 * 60 * 1000, _k)));
               }
 
-              this.setState((_k = {}, _k["products" + index] = newData, _k), function () {
+              this.setState((_l = {}, _l["products" + index] = newData, _l), function () {
                 _this.resetLayout();
               });
               return [2
@@ -497,6 +589,13 @@ function (_super) {
       _this.getProductList(index);
     };
 
+    _this.onSearchCondChange = function (cond) {
+      _this.setState({
+        searchParams: cond
+      }); // initProduct({ pageIndex: 1/, pageSize: 10, q: searchValue, ...linkParams, ...cond });
+
+    };
+
     return _this;
   }
 
@@ -581,8 +680,13 @@ function (_super) {
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
         hideTabs = _a.hideTabs,
-        contentWidth = _a.contentWidth;
+        contentWidth = _a.contentWidth,
+        filterObj = _a.filterObj,
+        searchParams = _a.searchParams;
     var products = this.state["products" + tabIndex] || [];
+
+    var _products = products.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : products;
+
     var isDivide = groupSource.length <= 3;
 
     var _seeAll = (0, _commonUtil.ensure)(function () {
@@ -644,10 +748,14 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), ['layout1', 'layout2'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement(_SearchCondition["default"], {
+      filterObj: filterObj,
+      onChange: this.onSearchCondChange,
+      value: searchParams
+    }), ['layout1', 'layout2'].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) {
+    }, _products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_MonpayProductItem["default"], {
         key: item.productId,
         data: item,
@@ -669,7 +777,7 @@ function (_super) {
         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
     })) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -679,7 +787,7 @@ function (_super) {
       })
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "scrollProductList"
-    }, products.map(function (item) {
+    }, _products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
       }, /*#__PURE__*/_react["default"].createElement(_MonpayProductItem["default"], {
@@ -698,7 +806,7 @@ function (_super) {
         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
     })));

package/lib/composite-comp/monpay/components/MonpayRecommend/pc/index.js

@@ -17,6 +17,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
+var _card = _interopRequireDefault(require("./imgs/card.png"));
+
 var _mobx = require("../../../../../mobx");
 
 var _MonpayProductItem = _interopRequireDefault(require("../../../../common/components/MonpayProductItem"));
@@ -232,6 +234,52 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+var defaultData = [{
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 18000000,
+  specialPrice: 18000000,
+  marketPrice: 19000000,
+  discountPercent: 10,
+  salePercent: 500,
+  sppType: '2'
+}];
+
 var RecommendMobile =
 /** @class */
 function (_super) {
@@ -627,6 +675,9 @@ function (_super) {
         scrollToRightDisabled = _a.scrollToRightDisabled,
         contentWidth = _a.contentWidth;
     var products = this.state["products" + tabIndex] || [];
+
+    var _products = products.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : products;
+
     var isDivide = false;
     var layout = panelProps.customize.layout.pcLayout;
 
@@ -641,7 +692,10 @@ function (_super) {
     if (contentWidth) imgSize = (contentWidth - 24 * spaceNumber - otherWidth) / colNumber;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc"
-    }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
+    }, panelProps.title.headerImage.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      className: "headerImg",
+      data: panelProps.title.headerImage
+    }), !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-select-wrap"
     }, groupSource.map(function (tab, index) {
       var _image = index == tabIndex && tab.hover.open && tab.hover.image.open ? tab.hover.image : tab.image;
@@ -695,7 +749,7 @@ function (_super) {
       key: "macyContainer",
       ref: this.scrollRef,
       className: "macyContainer macyContainer_" + panelProps.id
-    }, products.map(function (item) {
+    }, _products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_MonpayProductItem["default"], {
         key: item.productId,
         data: item,
@@ -709,7 +763,7 @@ function (_super) {
         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: (0, _classnames["default"])('btnSeeAll', {
         line: layout === 'layout1'
       }),
@@ -722,7 +776,7 @@ function (_super) {
       })
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "scrollProductList"
-    }, products.map(function (item) {
+    }, _products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
       }, /*#__PURE__*/_react["default"].createElement(_MonpayProductItem["default"], {
@@ -738,7 +792,7 @@ function (_super) {
         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", {

package/lib/composite-comp/monpay/components/MonpayRecommend/pc/index.less

@@ -13,6 +13,11 @@
   //   display: none;
   // }
 
+  .headerImg {
+    display: block;
+    margin-bottom: 20px;
+  }
+
   .tab-select-wrap {
     display: flex;
     align-items: center;