@fonixtree/magic-design 0.0.37 → 0.0.39

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

@@ -40,9 +40,9 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
       text: text,
       content: {
         fontFamily: 'Open Sans',
-        fontWeight: 700,
+        fontWeight: 400,
         fontSize: 14,
-        color: '#929292'
+        color: '#8493AF'
       },
       underline: {
         open: false,
@@ -51,7 +51,52 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
       },
       vertical: {}
     },
+    seeAll: {
+      id: (0, _uuid.v4)(),
+      open: true,
+      type: 'BUTTON',
+      text: 'See All',
+      content: {
+        url: '',
+        backgroundColor: '#fff'
+      },
+      buttonText: {
+        fontFamily: 'Open Sans',
+        fontWeight: 400,
+        fontSize: 12,
+        fontStyle: 'normal',
+        color: '#232F46'
+      },
+      buttonBorder: {
+        open: true,
+        borderColor: '',
+        borderRadius: 0
+      },
+      spacing: {
+        pc: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0
+        },
+        mobile: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0
+        }
+      },
+      buttonIcon: {
+        iconUrl: '/get/resource/platform/conf/20220923/picture/Frame24271573200432656932864.png',
+        layout: 'left'
+      },
+      hover: null
+    },
     sourceType: 'recommend',
+    prodIds: '',
+    intelligentType: '',
+    intelligentValue: [],
+    maxProdNum: 10,
     hover: {
       open: true,
       image: {
@@ -83,7 +128,7 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
         text: text,
         content: {
           fontFamily: 'Open Sans',
-          fontWeight: 700,
+          fontWeight: 600,
           fontSize: 14,
           color: '#CE1126'
         },
@@ -104,7 +149,7 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: (0, _uuid.v4)(),
     type: 'RECOMMEND',
-    groupSource: [recommendGroupSourceJSON('', 'Sale'), recommendGroupSourceJSON('', 'Popular')],
+    groupSource: [recommendGroupSourceJSON('', 'Tab1'), recommendGroupSourceJSON('', 'Tab2')],
     content: {
       label: {
         id: (0, _uuid.v4)(),
@@ -113,20 +158,33 @@ var getDefaultJSON = function getDefaultJSON() {
         text: 'Button',
         content: {
           url: '',
-          backgroundColor: '#0038A8'
+          backgroundColor: '#CE1126'
         },
         buttonText: {
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 8,
           fontStyle: 'normal',
-          color: '#fff',
-          padding: '0 5px'
+          color: '#fff'
         },
         buttonBorder: {
           open: true,
           borderColor: '',
-          borderRadius: 7
+          borderRadius: 0
+        },
+        spacing: {
+          pc: {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 5,
+            paddingRight: 5
+          },
+          mobile: {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 5,
+            paddingRight: 5
+          }
         },
         buttonIcon: {
           iconUrl: '',
@@ -142,9 +200,9 @@ var getDefaultJSON = function getDefaultJSON() {
         text: 'Flash Deal',
         content: {
           fontFamily: 'Open Sans',
-          fontWeight: 500,
+          fontWeight: 700,
           fontSize: 14,
-          color: '#2C2C2C'
+          color: '#232F46'
         },
         underline: {
           open: false,
@@ -164,7 +222,7 @@ var getDefaultJSON = function getDefaultJSON() {
         text: 'Flash Deal',
         content: {
           fontFamily: 'Open Sans',
-          fontWeight: 600,
+          fontWeight: 700,
           fontSize: 14,
           color: '#CE1126'
         },
@@ -188,7 +246,7 @@ var getDefaultJSON = function getDefaultJSON() {
           fontFamily: 'Open Sans',
           fontWeight: 500,
           fontSize: 10,
-          color: '#929292'
+          color: '#8493AF'
         },
         underline: {
           open: false,
@@ -204,13 +262,35 @@ var getDefaultJSON = function getDefaultJSON() {
         open: true
       }
     },
+    spacing: {
+      pc: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        marginBottom: 0
+      }
+    },
     customize: {
-      layout: 'left',
-      align: 'left'
+      layout: {
+        pcLayout: 'layout1',
+        h5Layout: 'layout1'
+      },
+      align: 'left',
+      pcRowNum: 6,
+      pcMaxRowNum: 6,
+      pcMinRowNum: 5
     },
     background: {
       opacity: 100,
-      color: '#F2F2F2',
+      color: '#fff',
       image: '',
       bgType: 'color'
     }

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

@@ -9,12 +9,16 @@ 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); }
@@ -70,7 +74,12 @@ function (_super) {
 
   Recommend.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? null : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
+    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: wrapStyle
+    }, (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

@@ -11,6 +11,8 @@ var _macy = _interopRequireDefault(require("macy"));
 
 require("./index.less");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -224,6 +226,29 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+var LAYOUT_IMAGE_SIZE = {
+  layout1: {
+    w: '100%',
+    h: 164
+  },
+  layout2: {
+    w: 100,
+    h: '100%'
+  },
+  layout3: {
+    w: '100%',
+    h: 104
+  },
+  layout4: {
+    w: 96,
+    h: 96
+  },
+  layout5: {
+    w: 110,
+    h: 110
+  }
+};
+
 var RecommendMobile =
 /** @class */
 function (_super) {
@@ -233,15 +258,34 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.preData = {};
+    _this.preLayout = '';
     _this._cache = (0, _coreUtil.isDesignMode)() ? {} : (0, _commonUtil.ensure)(function () {
       return (0, _storeUtil.getMagicStore)("recommend_" + _this.props.panelProps.id);
     }, {});
     _this.state = __assign({
       tabIndex: 0,
       tabLeft: 0,
-      tabWidth: 0
+      tabWidth: 0,
+      groupSource: [],
+      hideTabs: false
     }, _this._cache);
 
+    _this.initTab = function (index, hideTabs) {
+      var selectedTabDom = document.querySelector(".tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
+      var tabLeft = 0;
+      var tabWidth = 0;
+
+      if (selectedTabDom && !hideTabs) {
+        tabLeft = selectedTabDom.offsetLeft;
+        tabWidth = selectedTabDom.offsetWidth;
+      }
+
+      _this.setState({
+        tabLeft: tabLeft,
+        tabWidth: tabWidth
+      });
+    };
+
     _this.getTabBarActiveColor = function (_panelProps) {
       var tabIndex = _this.state.tabIndex;
       return (0, _commonUtil.ensure)(function () {
@@ -251,24 +295,26 @@ function (_super) {
 
     _this.getProductList = function (index) {
       return __awaiter(_this, void 0, void 0, function () {
-        var recommendId, cache, sourceType, ids, newData, res, res, e_1, _cache;
+        var panelProps, groupSource, recommendId, cache, _a, _b, sourceType, _c, prodIds, _d, intelligentType, _e, intelligentValue, _f, maxProdNum, newData, res, res, e_1, _cache;
 
-        var _a, _b, _c;
+        var _g, _h, _j;
 
         var _this = this;
 
-        return __generator(this, function (_d) {
-          switch (_d.label) {
+        return __generator(this, function (_k) {
+          switch (_k.label) {
             case 0:
-              recommendId = this.props.panelProps.id;
+              panelProps = this.props.panelProps;
+              groupSource = this.state.groupSource;
+              recommendId = panelProps.id;
 
               if (!(0, _coreUtil.isDesignMode)()) {
                 cache = (0, _storeUtil.getMagicStore)("recommend_" + recommendId);
 
                 if (cache) {
                   if ("products" + index in cache) {
-                    this.setState((_a = {}, _a["products" + index] = cache["products" + index], _a), function () {
-                      _this.getMacy('.tab-item-container');
+                    this.setState((_g = {}, _g["products" + index] = cache["products" + index], _g), function () {
+                      _this.resetLayout();
                     });
                     /** 如果数据未过期 */
 
@@ -279,23 +325,18 @@ function (_super) {
                 }
               }
 
-              sourceType = (0, _commonUtil.ensure)(function () {
-                return _this.props.panelProps.groupSource[index].sourceType;
-              }, 'recommend');
-              ids = (0, _commonUtil.ensure)(function () {
-                return _this.props.panelProps.groupSource[index].prodIds;
-              }, '');
+              _a = groupSource[index] || {}, _b = _a.sourceType, sourceType = _b === void 0 ? '' : _b, _c = _a.prodIds, prodIds = _c === void 0 ? '' : _c, _d = _a.intelligentType, intelligentType = _d === void 0 ? '' : _d, _e = _a.intelligentValue, intelligentValue = _e === void 0 ? [] : _e, _f = _a.maxProdNum, maxProdNum = _f === void 0 ? 10 : _f;
               newData = [];
-              _d.label = 1;
+              _k.label = 1;
 
             case 1:
-              _d.trys.push([1, 6,, 7]);
+              _k.trys.push([1, 7,, 8]);
 
               if (!(sourceType === 'select')) return [3
               /*break*/
               , 3];
 
-              if (!ids) {
+              if (!prodIds) {
                 return [2
                 /*return*/
                 ];
@@ -304,54 +345,63 @@ function (_super) {
               return [4
               /*yield*/
               , (0, _commonUtil.commonFetch)(window.magicDesign.MBaseUrl + "/h5/products", {
-                products: ids,
+                products: prodIds,
                 state: 'A'
               }, 'GET')];
 
             case 2:
-              res = _d.sent();
+              res = _k.sent();
               newData = __spreadArrays(res.list);
               return [3
               /*break*/
-              , 5];
+              , 6];
 
             case 3:
+              if (!(sourceType === 'recommend')) return [3
+              /*break*/
+              , 5];
               return [4
               /*yield*/
               , (0, _commonUtil.commonFetch)(window.magicDesign.MBaseUrl + "/h5/offers", {
                 pageIndex: 1,
-                pageSize: 30,
+                pageSize: maxProdNum,
                 sortType: '1',
-                // intelligentType: 'ALL',
-                // aggregation: false,
-                q: ''
+                intelligentType: intelligentType,
+                intelligentValue: intelligentValue.join(','),
+                aggregation: false
               }, 'POST')];
 
             case 4:
-              res = _d.sent();
+              res = _k.sent();
               newData = __spreadArrays(res.pageInfo.list);
-              _d.label = 5;
+              return [3
+              /*break*/
+              , 6];
 
             case 5:
+              newData = [];
+              _k.label = 6;
+
+            case 6:
               return [3
               /*break*/
-              , 7];
+              , 8];
 
-            case 6:
-              e_1 = _d.sent();
+            case 7:
+              e_1 = _k.sent();
               newData = [];
               return [3
               /*break*/
-              , 7];
+              , 8];
 
-            case 7:
+            case 8:
               if (!(0, _coreUtil.isDesignMode)()) {
                 _cache = (0, _storeUtil.getMagicStore)("recommend_" + recommendId);
-                (0, _storeUtil.setMagicStore)("recommend_" + recommendId, __assign(__assign({}, _cache), (_b = {}, _b["products" + index] = newData, _b.endTime = Date.now() + 3 * 60 * 1000, _b)));
+                (0, _storeUtil.setMagicStore)("recommend_" + recommendId, __assign(__assign({}, _cache), (_h = {}, _h["products" + index] = newData, _h.endTime = Date.now() + 3 * 60 * 1000, _h)));
               }
 
-              this.setState((_c = {}, _c["products" + index] = newData, _c), function () {
-                _this.getMacy('.tab-item-container');
+              this.setState((_j = {}, _j["products" + index] = newData, _j), function () {
+                _this.resetLayout();
               });
               return [2
               /*return*/
@@ -361,7 +411,22 @@ function (_super) {
       });
     };
 
-    _this.getMacy = function (container) {
+    _this.resetLayout = function () {
+      var layout = _this.props.panelProps.customize.layout.h5Layout;
+      var LAYOUT_COLUMN = {
+        layout1: 2,
+        layout2: 1,
+        layout3: 3
+      };
+      if (!LAYOUT_COLUMN[layout]) return;
+      setTimeout(function () {
+        if (document.querySelector('.macyContainer')) {
+          _this.getMacy('.macyContainer', LAYOUT_COLUMN[layout]);
+        }
+      });
+    };
+
+    _this.getMacy = function (container, columns) {
       var masonryNew = new _macy["default"]({
         container: container,
         trueOrder: false,
@@ -371,29 +436,13 @@ function (_super) {
           x: 12,
           y: 12
         },
-        columns: 2
+        columns: columns
       });
       masonryNew.runOnImageLoad(function () {
         masonryNew.recalculate(true);
       }, true);
     };
 
-    _this.onTabChange = function (tabIndex) {
-      var _a;
-
-      var panelProps = _this.props.panelProps;
-      if (tabIndex === _this.state.tabIndex) return;
-
-      _this.setState((_a = {
-        tabIndex: tabIndex
-      }, _a["products" + tabIndex] = [], _a));
-
-      var curTab = panelProps.groupSource[tabIndex];
-      if (curTab.prodIds === '') return;
-
-      _this.getProductList(tabIndex);
-    };
-
     _this.getBackgroundStyle = function () {
       var panelProps = _this.props.panelProps;
       var bgStyle = {};
@@ -413,46 +462,88 @@ function (_super) {
     };
 
     _this.onTabClick = function (e, index) {
-      var tabLeft = e.currentTarget.offsetLeft;
-      var tabWidth = e.currentTarget.offsetWidth;
+      var tabIndex = _this.state.tabIndex;
+      if (tabIndex === index) return;
       e.currentTarget.scrollIntoView(false);
 
-      _this.getProductList(index);
-
       _this.setState({
-        tabLeft: tabLeft,
-        tabWidth: tabWidth,
         tabIndex: index
       }, function () {
-        _this.getMacy('.tab-item-container');
+        _this.resetLayout();
+
+        _this.initTab(index);
       });
+
+      _this.getProductList(index);
     };
 
     return _this;
   }
 
   RecommendMobile.prototype.componentDidMount = function () {
-    var tabIndex = this.state.tabIndex;
-    this.getProductList(tabIndex);
-    var initTabDom = document.querySelector('.tab-select-wrap .tabTitle:nth-child(1)');
-    var tabLeft = initTabDom.offsetLeft;
-    var tabWidth = initTabDom.offsetWidth;
+    var _this = this;
+
+    var panelProps = this.props.panelProps;
+    var source = [];
+    panelProps.groupSource.map(function (m) {
+      var show = m.image.open || m.groupName.open;
+      if (show) source.push(m);
+    });
     this.setState({
-      tabLeft: tabLeft,
-      tabWidth: tabWidth
+      groupSource: source
+    }, function () {
+      _this.initTab(0);
+
+      _this.getProductList(0);
     });
   };
 
   RecommendMobile.prototype.componentWillReceiveProps = function () {
+    var _this = this;
+
     var tabIndex = this.state.tabIndex;
-    var tabGroupInfo = this.props.panelProps.groupSource[tabIndex];
+    var panelProps = this.props.panelProps;
+    var source = [];
+    var hideTabs = false;
+    panelProps.groupSource.map(function (m) {
+      var show = m.image.open || m.groupName.open;
+      if (show) source.push(m);
+    });
+
+    if (source.length === 0 && panelProps.groupSource.length > 0) {
+      source.push(panelProps.groupSource[0]);
+      hideTabs = true;
+    }
+
+    this.setState({
+      groupSource: source
+    }, function () {
+      var groupSource = _this.state.groupSource;
+
+      if (JSON.stringify(groupSource) === _this.preData) {
+        return;
+      }
+
+      _this.preData = JSON.stringify(groupSource);
+      var newTabIndex = tabIndex;
+      if (tabIndex >= source.length) newTabIndex = 0;
+
+      _this.initTab(newTabIndex, hideTabs);
+
+      _this.getProductList(newTabIndex);
+
+      _this.setState({
+        tabIndex: newTabIndex,
+        hideTabs: hideTabs
+      });
+    });
+    var curLayout = panelProps.customize.layout.h5Layout;
 
-    if (JSON.stringify(tabGroupInfo) === this.preData) {
-      return;
+    if (curLayout !== this.preLayout) {
+      this.resetLayout();
     }
 
-    this.preData = JSON.stringify(tabGroupInfo);
-    this.getProductList(tabIndex);
+    this.preLayout = curLayout;
   };
 
   RecommendMobile.prototype.render = function () {
@@ -462,21 +553,36 @@ function (_super) {
     var _a = this.state,
         tabIndex = _a.tabIndex,
         tabLeft = _a.tabLeft,
-        tabWidth = _a.tabWidth;
+        tabWidth = _a.tabWidth,
+        groupSource = _a.groupSource,
+        hideTabs = _a.hideTabs;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = panelProps.groupSource.length <= 3;
+    var isDivide = groupSource.length <= 3;
+    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;
+    }, 140);
+    var imgWidth = (0, _commonUtil.ensure)(function () {
+      return LAYOUT_IMAGE_SIZE[layout].w;
+    }, 140);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-mobile",
       style: bgStyle
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-select-wrap"
-    }, panelProps.groupSource.map(function (tab, index) {
+    }, groupSource.map(function (tab, index) {
       var _image = index == tabIndex && tab.hover.open && tab.hover.image.open ? tab.hover.image : tab.image;
 
       var _groupName = index == tabIndex && tab.hover.open && tab.hover.groupName.open ? tab.hover.groupName : tab.groupName;
 
       return /*#__PURE__*/_react["default"].createElement("div", {
+        key: tab.id,
         className: "tabTitle",
         onClick: function onClick(e) {
           _this.onTabClick(e, index);
@@ -505,18 +611,49 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tab-item-container"
+    })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__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
+    })) : /*#__PURE__*/_react["default"].createElement("div", {
+      key: "scrollContainer",
+      className: (0, _classnames["default"])('scrollContainer', {
+        pl_100: layout === 'layout5'
+      })
+    }, products.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "productCard"
+      }, /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
+        key: "scroll_" + item.productId,
+        data: item,
+        fixHeight: true,
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
+        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
     })));
   };