@fonixtree/magic-design 2.0.200 → 2.0.203

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

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _card = _interopRequireDefault(require("./imgs/card.png"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -226,6 +228,26 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+var defaultData = [{
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name Long Long Long Long Long',
+  salesPrice: 10000,
+  specialPrice: null,
+  marketPrice: 20000,
+  salePercent: 500,
+  discountPercent: 90
+}, {
+  imgUrlContent: {
+    url: _card["default"]
+  },
+  offerName: 'Product Name',
+  salesPrice: 10000,
+  specialPrice: null,
+  marketPrice: 20000,
+  salePercent: 500
+}];
 var LAYOUT_IMAGE_SIZE = {
   layout1: {
     w: '100%',
@@ -248,6 +270,73 @@ var LAYOUT_IMAGE_SIZE = {
     h: 110
   }
 };
+/**
+ * 将第二个数组随机插入到第一个数组中
+ * @param {Array} array1 - 第一个数组
+ * @param {Array} array2 - 第二个数组
+ * @returns {Array} - 返回合并后的新数组
+ */
+
+var insertArrayRandomly = function insertArrayRandomly(arr1, arr2) {
+  if (arr1.length < 1) {
+    return [];
+  }
+
+  if (arr1.length < 2) {
+    return __spreadArrays(arr1, arr2);
+  }
+
+  if (arr1.length === 2) {
+    return __spreadArrays([arr1[0]], arr2, [arr1[1]]);
+  }
+
+  if (arr1.length === 3) {
+    return __spreadArrays([arr1[0]], arr2, arr1.splice(1));
+  } // 创建一个复制的第一个数组，以免修改原数组
+
+
+  var result = __spreadArrays(arr1); // 记录已插入元素的位置
+
+
+  var insertedIndices = [];
+
+  var _loop_1 = function _loop_1(i) {
+    var randomIndex; // 确保生成的随机索引不在首尾，并且与已插入的索引相隔至少两个位置
+
+    do {
+      randomIndex = Math.floor(Math.random() * (result.length - 2)) + 1; // 1 到 result.length - 2
+      // eslint-disable-next-line no-loop-func
+    } while (insertedIndices.some(function (index) {
+      return Math.abs(index - randomIndex) < 2;
+    })); // 在随机位置插入第二个数组的元素
+
+
+    result.splice(randomIndex, 0, arr2[i]); // 记录已插入的位置
+
+    insertedIndices.push(randomIndex);
+  }; // 随机插入第二个数组的元素
+  // eslint-disable-next-line no-plusplus
+
+
+  for (var i = 0; i < arr2.length; i++) {
+    _loop_1(i);
+  }
+
+  return result;
+};
+
+var getRandomItemsAndRemove = function getRandomItemsAndRemove(arr, list) {
+  var _count = Math.ceil(list.length / 5);
+
+  var result = []; // eslint-disable-next-line no-plusplus
+
+  for (var i = 0; i < _count && arr.length > 0; i++) {
+    var randomIndex = Math.floor(Math.random() * arr.length);
+    result.push(arr.splice(randomIndex, 1)[0]);
+  }
+
+  return result;
+};
 
 var RecommendMobile =
 /** @class */
@@ -257,6 +346,7 @@ function (_super) {
   function RecommendMobile() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.ads = [];
     _this.preData = {};
     _this.preLayout = '';
     _this.preContent = '';
@@ -306,16 +396,49 @@ function (_super) {
       }, '#CE1126') : '#CE1126';
     };
 
+    _this.getAdvertise = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var ad;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/ad/today/valid/MagicDesignRecommendation/list', {}, 'GET')];
+
+            case 1:
+              ad = _a.sent();
+
+              if (ad === null || ad === void 0 ? void 0 : ad.length) {
+                return [2
+                /*return*/
+                , ad[0].advertiseContents.map(function (it) {
+                  return {
+                    type: 'ad',
+                    url: it === null || it === void 0 ? void 0 : it.url,
+                    adObj: it
+                  };
+                })];
+              }
+
+              return [2
+              /*return*/
+              , []];
+          }
+        });
+      });
+    };
+
     _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, e_1, _h, insertAds, _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;
@@ -327,7 +450,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();
                     });
                     /** 如果数据未过期 */
@@ -341,10 +464,10 @@ 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, 9,, 10]);
 
               if (!(groupSource.length > 0)) return [3
               /*break*/
@@ -370,7 +493,7 @@ 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*/
@@ -393,7 +516,7 @@ function (_super) {
               }, 'POST')];
 
             case 4:
-              res = _l.sent();
+              res = _m.sent();
               newData = __spreadArrays(res.pageInfo.list);
               return [3
               /*break*/
@@ -401,7 +524,7 @@ function (_super) {
 
             case 5:
               newData = [];
-              _l.label = 6;
+              _m.label = 6;
 
             case 6:
               return [3
@@ -410,7 +533,7 @@ function (_super) {
 
             case 7:
               newData = [];
-              _l.label = 8;
+              _m.label = 8;
 
             case 8:
               return [3
@@ -418,19 +541,34 @@ function (_super) {
               , 10];
 
             case 9:
-              e_1 = _l.sent();
+              e_1 = _m.sent();
               newData = [];
               return [3
               /*break*/
               , 10];
 
             case 10:
+              if (!window.magicDesign.showRecommendAds) return [3
+              /*break*/
+              , 12];
+              _h = this;
+              return [4
+              /*yield*/
+              , this.getAdvertise()];
+
+            case 11:
+              _h.ads = _m.sent();
+              insertAds = getRandomItemsAndRemove(this.ads, newData);
+              newData = insertArrayRandomly(newData, insertAds);
+              _m.label = 12;
+
+            case 12:
               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
@@ -572,6 +710,9 @@ function (_super) {
         hideTabs = _a.hideTabs,
         contentWidth = _a.contentWidth;
     var products = this.state["products" + tabIndex] || [];
+
+    var _products = products.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : products;
+
     var isDivide = groupSource.length <= 3;
     var layout = panelProps.customize.layout.h5Layout;
 
@@ -587,10 +728,26 @@ function (_super) {
     }, 140);
     if (layout === 'layout1' && contentWidth) imgHeight = (contentWidth - 12) / 2;
     if (layout === 'layout3' && contentWidth) imgHeight = (contentWidth - 12 * 2) / 3;
+    var background = panelProps.background.tabBackground;
+    var tabStyle = {};
+
+    if (background) {
+      if (background.tabBgType === 'color') {
+        tabStyle.backgroundColor = background.color;
+        tabStyle.opacity = background.opacity ? background.opacity : 1;
+      } else {
+        tabStyle.backgroundImage = "url(" + background.image + ")";
+        tabStyle.backgroundPosition = 'center center';
+        tabStyle.backgroundSize = 'cover';
+        tabStyle.backgroundRepeat = 'no-repeat';
+      }
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-mobile recommend_" + panelProps.id
     }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tab-select-wrap"
+      className: "tab-select-wrap",
+      style: tabStyle
     }, groupSource.map(function (tab, index) {
       var _image = index == tabIndex && tab.hover.open && tab.hover.image.open ? tab.hover.image : tab.image;
 
@@ -619,7 +776,7 @@ function (_super) {
           tab.groupName.text = text;
         }
       }));
-    }), groupSource.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    }), groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "active-line",
       style: {
         width: tabWidth,
@@ -629,7 +786,7 @@ function (_super) {
     })), ['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) {
+    }, _products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.productId,
         data: item // fixHeight={layout === 'layout3'}
@@ -653,7 +810,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", {
@@ -663,7 +820,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(_ProductItem["default"], {
@@ -684,7 +841,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/dito/components/Recommend/mobile/index.less

@@ -1,6 +1,7 @@
 .m-recommend-mobile {
   display: flex;
   flex-direction: column;
+  min-height: 4rem;
 }
 .m-recommend-mobile .cylon-tabs-nav-operations {
   display: none !important;
@@ -65,7 +66,7 @@
   align-items: flex-start;
 }
 .m-recommend-mobile .scrollContainer .scrollProductList .productCard {
-  margin-right: 0.24rem;
+  margin-right: 0.16rem;
 }
 .m-recommend-mobile .btnSeeAll {
   display: block;
@@ -74,3 +75,25 @@
   margin: 0 auto;
   flex: none;
 }
+.m-recommend-mobile .m-product-item-wrap {
+  border-radius: 0.16rem;
+}
+.m-recommend-mobile .m-product-item-wrap .img-wrap {
+  border-radius: 0.16rem 0.16rem 0 0;
+}
+.m-recommend-mobile .m-product-item-wrap.horizontal .img-wrap {
+  border-radius: 0.16rem 0 0 0.16rem;
+}
+.m-recommend-mobile .scrollContainer .m-product-item-wrap {
+  border: none;
+  background-color: transparent;
+}
+.m-recommend-mobile .scrollContainer .m-product-item-wrap .img-wrap {
+  border-radius: 0.16rem;
+}
+.m-recommend-mobile .scrollContainer .m-product-item-wrap .img-wrap .product-img {
+  border-radius: 0.16rem;
+}
+.m-recommend-mobile .scrollContainer .m-product-item-wrap .content-wrap {
+  padding: 0.16rem 0;
+}

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

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.groupSourceJSON = exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var _constants = require("../../../../constants");
+
+var _index = require("../../../../assets/images/base64/index");
+
+var groupSourceJSON = function groupSourceJSON() {
+  var groupId = (0, _uuid.v4)();
+  return {
+    id: groupId,
+    image: {
+      parentId: groupId,
+      id: (0, _uuid.v4)(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
+        h5ImgSrc: '',
+        pcImgSrc: '',
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    }
+  };
+};
+
+exports.groupSourceJSON = groupSourceJSON;
+
+var getDefaultJSON = function getDefaultJSON() {
+  var _a;
+
+  var defaultFontFamily = _constants.projectFontFamily[(_a = window.systemParams) === null || _a === void 0 ? void 0 : _a.projectCode] || 'Open Sans';
+  var compId = (0, _uuid.v4)();
+  return {
+    id: compId,
+    type: 'SEARCH_BANNER',
+    content: {
+      logo: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'IMAGE',
+        content: {
+          h5Name: 'name2',
+          pcName: 'name2',
+          h5ImgSrc: '',
+          pcImgSrc: '',
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      box: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        color: {
+          pc: '#fff',
+          mobile: '#fff'
+        },
+        backgroundColor: {
+          pc: 'transparent',
+          mobile: 'transparent'
+        }
+      },
+      keyword: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'InputField',
+        placeholder: 'Tshirt Woman',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: defaultFontFamily,
+          fontWeight: 600,
+          fontSize: 12,
+          pcFontSize: 14,
+          color: '#CE1126'
+        }
+      },
+      placeholder: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        text: ''
+      },
+      cartIcon: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'IMAGE',
+        content: {
+          h5Name: 'name2',
+          pcName: 'name2',
+          h5ImgSrc: _index.searchCartIcon,
+          pcImgSrc: '',
+          clickUrl: {
+            name: '/main/cart',
+            value: '/main/cart'
+          }
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      chatbotIcon: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'IMAGE',
+        content: {
+          h5Name: 'name2',
+          pcName: 'name2',
+          h5ImgSrc: _index.searchChatbotIcon,
+          pcImgSrc: '',
+          clickUrl: {
+            name: '/new-chat',
+            value: '/new-chat'
+          }
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      messageIcon: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'IMAGE',
+        content: {
+          h5Name: 'name2',
+          pcName: 'name2',
+          h5ImgSrc: _index.searchMessageIcon,
+          pcImgSrc: '',
+          clickUrl: {
+            name: '/message-center',
+            value: '/message-center'
+          }
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      }
+    },
+    groupSource: [groupSourceJSON()],
+    setting: {
+      // 自动轮播
+      autoplay: {
+        open: true,
+        interval: 4
+      },
+      // 切换按钮
+      navigation: {
+        open: true,
+        size: 16,
+        hoverSize: 16,
+        color: '#aaa',
+        hoverColor: '#fff'
+      },
+      // 面板指示点
+      dots: {
+        open: true,
+        layout: 'layout1',
+        color: {
+          pc: '#fff',
+          mobile: '#fff'
+        },
+        hoverColor: {
+          pc: '#fff',
+          mobile: '#fff'
+        },
+        size: {
+          pc: 16,
+          mobile: 8
+        },
+        hoverSize: {
+          pc: 16,
+          mobile: 8
+        }
+      }
+    },
+    spacing: {
+      pc: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: window.magicDesign.compSpacing * 1.5,
+        fillUp: false
+      },
+      mobile: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        marginBottom: window.magicDesign.compSpacing
+      }
+    },
+    customize: {
+      layout: 'left',
+      align: 'left'
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;