@fonixtree/magic-design 0.0.1

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

@@ -0,0 +1,530 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _macy = _interopRequireDefault(require("macy"));
+
+require("./index.less");
+
+var _mobx = require("../../../../../mobx");
+
+var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
+
+var _components = require("../../../../../meta-comp/components");
+
+var _storeUtil = require("../../../../../utils/storeUtil");
+
+var _commonUtil = require("../../../../../utils/commonUtil");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+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);
+};
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+    label: 0,
+    sent: function sent() {
+      if (t[0] & 1) throw t[1];
+      return t[1];
+    },
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+
+          case 7:
+            op = _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+
+              _.ops.push(op);
+
+              break;
+            }
+
+            if (t[2]) _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+        }
+
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+var RecommendMobile =
+/** @class */
+function (_super) {
+  __extends(RecommendMobile, _super);
+
+  function RecommendMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.preData = {};
+    _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
+    }, _this._cache);
+
+    _this.getTabBarActiveColor = function (_panelProps) {
+      var tabIndex = _this.state.tabIndex;
+      return (0, _commonUtil.ensure)(function () {
+        return _panelProps.groupSource[tabIndex].hover.groupName.content.color;
+      }, '#1890ff');
+    };
+
+    _this.getProductList = function (index) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var recommendId, cache, sourceType, ids, newData, res, res, e_1, _cache;
+
+        var _a, _b, _c;
+
+        var _this = this;
+
+        return __generator(this, function (_d) {
+          switch (_d.label) {
+            case 0:
+              recommendId = this.props.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');
+                    });
+                    /** 如果数据未过期 */
+
+                    if (cache.endTime > Date.now()) return [2
+                    /*return*/
+                    ];
+                  }
+                }
+              }
+
+              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;
+              }, '');
+              newData = [];
+              _d.label = 1;
+
+            case 1:
+              _d.trys.push([1, 6,, 7]);
+
+              if (!(sourceType === 'select')) return [3
+              /*break*/
+              , 3];
+
+              if (!ids) {
+                return [2
+                /*return*/
+                ];
+              }
+
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)(window.magicDesign.MBaseUrl + "/h5/products", {
+                products: ids,
+                state: 'A'
+              }, 'GET')];
+
+            case 2:
+              res = _d.sent();
+              newData = __spreadArrays(res.list);
+              return [3
+              /*break*/
+              , 5];
+
+            case 3:
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)(window.magicDesign.MBaseUrl + "/h5/offers", {
+                pageIndex: 1,
+                pageSize: 30,
+                sortType: '1',
+                // intelligentType: 'ALL',
+                // aggregation: false,
+                q: ''
+              }, 'POST')];
+
+            case 4:
+              res = _d.sent();
+              newData = __spreadArrays(res.pageInfo.list);
+              _d.label = 5;
+
+            case 5:
+              return [3
+              /*break*/
+              , 7];
+
+            case 6:
+              e_1 = _d.sent();
+              newData = [];
+              return [3
+              /*break*/
+              , 7];
+
+            case 7:
+              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)));
+              }
+
+              this.setState((_c = {}, _c["products" + index] = newData, _c), function () {
+                _this.getMacy('.tab-item-container');
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.getMacy = function (container) {
+      var masonryNew = new _macy["default"]({
+        container: container,
+        trueOrder: false,
+        waitForImages: false,
+        useOwnImageLoader: false,
+        margin: {
+          x: 12,
+          y: 12
+        },
+        columns: 2
+      });
+      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 = {};
+
+      if (panelProps.background.bgType === 'color') {
+        bgStyle = {
+          backgroundColor: (0, _commonUtil.getColorRgba)(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
+        };
+      } else {
+        bgStyle = {
+          background: "url(" + panelProps.background.image + ") no-repeat center",
+          backgroundSize: '100%'
+        };
+      }
+
+      return bgStyle;
+    };
+
+    _this.onTabClick = function (e, index) {
+      var tabLeft = e.currentTarget.offsetLeft;
+      var tabWidth = e.currentTarget.offsetWidth;
+      e.currentTarget.scrollIntoView(false);
+
+      _this.getProductList(index);
+
+      _this.setState({
+        tabLeft: tabLeft,
+        tabWidth: tabWidth,
+        tabIndex: index
+      }, function () {
+        _this.getMacy('.tab-item-container');
+      });
+    };
+
+    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;
+    this.setState({
+      tabLeft: tabLeft,
+      tabWidth: tabWidth
+    });
+  };
+
+  RecommendMobile.prototype.componentWillReceiveProps = function () {
+    var tabIndex = this.state.tabIndex;
+    var tabGroupInfo = this.props.panelProps.groupSource[tabIndex];
+
+    if (JSON.stringify(tabGroupInfo) === this.preData) {
+      return;
+    }
+
+    this.preData = JSON.stringify(tabGroupInfo);
+    this.getProductList(tabIndex);
+  };
+
+  RecommendMobile.prototype.render = function () {
+    var _this = this;
+
+    var panelProps = this.props.panelProps;
+    var _a = this.state,
+        tabIndex = _a.tabIndex,
+        tabLeft = _a.tabLeft,
+        tabWidth = _a.tabWidth;
+    var bgStyle = this.getBackgroundStyle();
+    var products = this.state["products" + tabIndex] || [];
+    var isDivide = panelProps.groupSource.length <= 3;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-recommend-mobile",
+      style: bgStyle
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-select-wrap"
+    }, panelProps.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", {
+        className: "tabTitle",
+        onClick: function onClick(e) {
+          _this.onTabClick(e, index);
+
+          _mobx.store.setState({
+            clickedGroup: tab.id,
+            clickedFloor: _mobx.store.getFloorIdByGroupId(tab.id)
+          });
+        },
+        style: {
+          flex: ~~isDivide
+        }
+      }, tab.image.open && _image && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+        data: _image
+      }), tab.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: _groupName,
+        onTextInput: function onTextInput(text) {
+          tab.hover.groupName.text = text;
+          tab.groupName.text = text;
+        }
+      }));
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "active-line",
+      style: {
+        width: tabWidth,
+        transform: "translateX(" + tabLeft + "px)",
+        background: this.getTabBarActiveColor(panelProps)
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-item-container"
+    }, products.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
+        key: item.productId,
+        data: item,
+        onItemClick: function onItemClick() {
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+        },
+        panelProps: panelProps.content,
+        showProgress: false
+      });
+    })));
+  };
+
+  RecommendMobile.defaultProps = {
+    panelProps: {}
+  };
+  return RecommendMobile;
+}(_react["default"].Component);
+
+var _default = RecommendMobile;
+exports["default"] = _default;

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

@@ -0,0 +1,79 @@
+.m-recommend-mobile {
+  display: flex;
+  flex-direction: column;
+
+  .ant-tabs-nav-operations {
+    display: none !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+
+  .tab-select-wrap {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    background: rgb(255 255 255);
+    overflow: auto;
+    position: relative;
+    margin-bottom: 10px;
+
+    .tabTitle {
+      display: flex;
+      align-items: center;
+      padding: 0 24px;
+      height: 100%;
+      justify-content: center;
+      white-space: nowrap;
+
+      img {
+        height: 18px;
+        width: 18px;
+      }
+    }
+
+    .active-line {
+      position: absolute;
+      bottom: 0;
+      width: 200px;
+      height: 3px;
+      background-color: #fff;
+      transition: .2s all linear;
+      border-radius: 1.5px;
+    }
+  }
+
+  .tab-item-container {
+    display: flex;
+    margin: 0 12px;
+  }
+
+
+
+  // .ant-tabs-content-holder {
+  //   padding: 0 16px;
+  // }
+
+  // // 推荐特有样式
+  // .m-product-item-wrap {
+  //   width: 100%;
+
+  //   .img-wrap {
+  //     width: 100%;
+  //   }
+  // }
+}
+
+// 被隐藏的标签页
+// .ant-tabs-dropdown {
+//   .tabTitle {
+//     .m-meta-image img {
+//       width: 18px;
+//       height: 18px;
+//     }
+//   }
+// }

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var _ditoLogo = _interopRequireDefault(require("./imgs/dito-logo.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// import { ButtonMetaType } from '../../../meta-comp/config-panels/ButtonConfig';
+// import { TextMetaType } from '../../../meta-comp/config-panels/TextConfig';
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'SEARCH',
+    logo: {
+      id: (0, _uuid.v4)(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: 'name2',
+        pcName: 'name2',
+        h5ImgSrc: _ditoLogo["default"],
+        pcImgSrc: 'https://online.iwhalecloud.com/static/banner3.d4d11f4b.webp',
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    },
+    icon: {
+      open: true,
+      color: '#2F54EB'
+    },
+    customize: {
+      layout: 'left',
+      align: 'left'
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;

package/es/composite-comp/dito/components/SearchBar/imgs/dito-logo.svg

@@ -0,0 +1,6 @@
+<svg width="69" height="20" viewBox="0 0 69 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.459 0.0166016H5.12022C3.76042 0.0194901 2.45736 0.562029 1.49731 1.52504C0.53725 2.48804 -0.00128482 3.79276 2.3019e-06 5.15257V19.5672C-0.000156996 19.6234 0.0107454 19.679 0.0320869 19.7309C0.0534285 19.7829 0.0847912 19.8301 0.124385 19.8699C0.163978 19.9097 0.211026 19.9414 0.262844 19.963C0.314661 19.9846 0.370232 19.9958 0.426385 19.996H11.5535C13.7819 19.9912 15.9171 19.1014 17.4895 17.5224C19.0619 15.9435 19.9427 13.8045 19.9382 11.5762V8.52608C19.9414 6.27348 19.0501 4.11179 17.4601 2.51612C15.8701 0.92046 13.7116 0.0214159 11.459 0.0166016ZM15.1681 11.4429C15.17 12.4235 14.7824 13.3647 14.0905 14.0596C13.3986 14.7545 12.459 15.1461 11.4784 15.1483H6.81001L3.03555 16.9193L4.83678 14.1526V5.19739C4.83645 5.08419 4.88103 4.97549 4.96073 4.89511C5.04043 4.81472 5.14875 4.76923 5.26195 4.76858H11.6662C12.5955 4.77211 13.4856 5.14376 14.1415 5.80216C14.7974 6.46056 15.1657 7.35204 15.1656 8.28139L15.1681 11.4429Z" fill="#CE1126"/>
+<path d="M27.3733 2.39582C27.3733 1.07858 26.3055 0.0107422 24.9882 0.0107422C23.671 0.0107422 22.6031 1.07858 22.6031 2.39582V17.6148C22.6031 18.932 23.671 19.9998 24.9882 19.9998C26.3055 19.9998 27.3733 18.932 27.3733 17.6148V2.39582Z" fill="#CE1126"/>
+<path d="M46.8076 0H30.4646C30.4083 -2.25721e-07 30.3526 0.0110998 30.3007 0.0326641C30.2487 0.0542284 30.2015 0.0858331 30.1618 0.125667C30.1221 0.165501 30.0906 0.212782 30.0692 0.2648C30.0478 0.316818 30.0368 0.372551 30.037 0.428805V4.29774C30.0368 4.35399 30.0478 4.40973 30.0692 4.46175C30.0906 4.51376 30.1221 4.56104 30.1618 4.60088C30.2015 4.64071 30.2487 4.67232 30.3007 4.69388C30.3526 4.71545 30.4083 4.72655 30.4646 4.72655H35.8138C35.8699 4.7267 35.9255 4.73792 35.9773 4.75956C36.0291 4.78119 36.0762 4.81282 36.1158 4.85264C36.1554 4.89246 36.1867 4.93969 36.208 4.99162C36.2294 5.04356 36.2403 5.0992 36.2401 5.15535V19.57C36.24 19.6262 36.2509 19.682 36.2723 19.734C36.2937 19.786 36.3252 19.8333 36.365 19.8731C36.4047 19.913 36.4519 19.9446 36.5038 19.9661C36.5558 19.9877 36.6115 19.9988 36.6677 19.9988H40.6105C40.6667 19.9986 40.7223 19.9874 40.7741 19.9658C40.8259 19.9441 40.873 19.9125 40.9126 19.8727C40.9522 19.8329 40.9835 19.7856 41.0049 19.7337C41.0262 19.6818 41.0371 19.6261 41.037 19.57V5.15535C41.036 5.04236 41.0798 4.93358 41.1588 4.85277C41.2377 4.77197 41.3455 4.72572 41.4585 4.72412H46.8076C46.8638 4.72396 46.9193 4.71275 46.9712 4.69111C47.023 4.66948 47.07 4.63785 47.1096 4.59803C47.1492 4.55821 47.1806 4.51098 47.2019 4.45904C47.2233 4.4071 47.2342 4.35147 47.234 4.29532V0.428805C47.2342 0.372653 47.2233 0.317019 47.2019 0.26508C47.1806 0.21314 47.1492 0.165914 47.1096 0.126095C47.07 0.0862771 47.023 0.0546472 46.9712 0.0330117C46.9193 0.0113762 46.8638 0.000158847 46.8076 0V0Z" fill="#CE1126"/>
+<path d="M58.3829 0.0107422H58.2508C55.6058 0.0165188 53.0714 1.07272 51.205 2.94703C49.3387 4.82134 48.2933 7.36024 48.2987 10.0053V17.4355C48.2974 18.1141 48.5657 18.7654 49.0445 19.2463C49.5234 19.7272 50.1736 19.9982 50.8522 19.9998H58.3817C61.0261 19.9931 63.5596 18.9365 65.4252 17.0623C67.2907 15.1881 68.3357 12.6497 68.3302 10.0053C68.3357 7.36108 67.2909 4.82291 65.4256 2.94874C63.5603 1.07457 61.0271 0.0178015 58.3829 0.0107422ZM63.4329 9.94351C63.4309 11.1388 63.017 12.2968 62.2607 13.2224C61.5044 14.1479 60.4522 14.7844 59.2813 15.0246C58.1104 15.2647 56.8925 15.0937 55.833 14.5406C54.7735 13.9874 53.9371 13.0858 53.4649 11.9878C52.9927 10.8898 52.9135 9.66252 53.2407 8.51294C53.5679 7.36335 54.2814 6.36174 55.2611 5.67697C56.2407 4.99221 57.4265 4.66616 58.6185 4.75382C59.8106 4.84147 60.9359 5.33746 61.8049 6.15816L65.2425 4.80633L62.9096 7.66382C63.2544 8.37299 63.4333 9.15132 63.4329 9.93988V9.94351Z" fill="#CE1126"/>
+</svg>