@fonixtree/magic-design 0.0.17 → 0.0.18

package/src/components/composite-comp/dito/components/FlashDeal/mobile/index.js

@@ -0,0 +1,233 @@
+import { __extends, __assign, __awaiter, __generator } from '../../../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import img from './imgs/defImg1.png.js';
+import img$1 from './imgs/defImg2.png.js';
+import img$2 from './imgs/defImg3.png.js';
+import ProductItem from '../../../../common/components/ProductItem/index.js';
+import { isDesignMode, clickUrl } from '../../../../../utils/coreUtil.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import '../../../../../meta-comp/components/Image/index.js';
+import { getColorRgba, ensure, commonFetch } from '../../../../../utils/commonUtil.js';
+import { getMagicStore, setMagicStore } from '../../../../../utils/storeUtil.js';
+import { newDate } from '../../../../../utils/dateUtil.js';
+import CountDown from '../../../../../common/CountDown/index.js';
+
+var defaultData = [{
+  imgUrlContent: {
+    url: img
+  },
+  offerName: 'DITO STARTER PACK + 3GB Data',
+  salesPrice: 49,
+  marketPrice: 100,
+  discountPercent: 51,
+  salePercent: 5000,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: img$1
+  },
+  offerName: 'DITO Level Up 99 x 365 days',
+  salesPrice: 594,
+  marketPrice: 1188,
+  discountPercent: 50,
+  salePercent: 5000,
+  sppType: '2'
+}, {
+  imgUrlContent: {
+    url: img$2
+  },
+  offerName: 'DITO Level-Up Pack 99 7GB',
+  salesPrice: 99,
+  marketPrice: 138,
+  discountPercent: 28,
+  salePercent: 5000,
+  sppType: '2'
+}];
+
+var FlashDealMobile =
+/** @class */
+function (_super) {
+  __extends(FlashDealMobile, _super);
+
+  function FlashDealMobile() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 商品列表排序方式
+
+
+    _this.sortType = '';
+    _this.state = {
+      list: isDesignMode() ? [] : ensure(function () {
+        return getMagicStore("flashSale_".concat(_this.props.panelProps.id));
+      }, []),
+      effDate: '',
+      expDate: '',
+      now: '',
+      isWill: false
+    };
+
+    _this.getFlashData = function (pageSize, campaign) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , commonFetch("".concat(window.magicDesign.MBaseUrl, "/h5/flsale/offer/page"), {
+                campaignId: campaign.campaignId,
+                sortType: this.sortType,
+                pageIndex: 1,
+                pageSize: pageSize
+              })];
+
+            case 1:
+              res = _a.sent();
+              if (!res.list || res.list.length === 0) return [2
+              /*return*/
+              ];
+
+              if (!isDesignMode()) {
+                setMagicStore("flashSale_".concat(this.props.panelProps.id), res.list);
+              }
+
+              this.setState({
+                now: +newDate(campaign.now),
+                effDate: +newDate(campaign.effDate),
+                expDate: +newDate(campaign.expDate),
+                isWill: campaign.cmpState === 'A',
+                list: res.list
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.getNextFlashSale = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , commonFetch("".concat(window.magicDesign.MBaseUrl, "/h5/flsale/next"), {
+                excludeExpireCmp: true
+              }, 'GET')];
+
+            case 1:
+              data = _a.sent();
+
+              if (data.length > 0) {
+                this.getFlashData(30, data[0]);
+              } else {
+                // 秒杀场次结束之后，清空列表数据，隐藏秒杀组件
+                this.setState({
+                  list: []
+                });
+              }
+
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  FlashDealMobile.prototype.componentDidMount = function () {
+    this.sortType = this.props.panelProps.content.sortType;
+    this.getNextFlashSale();
+  };
+
+  FlashDealMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.panelProps.content.sortType !== this.sortType) {
+      this.sortType = nextProps.panelProps.content.sortType;
+      this.getNextFlashSale();
+    }
+  };
+
+  FlashDealMobile.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    var _a = this.state,
+        list = _a.list,
+        effDate = _a.effDate,
+        expDate = _a.expDate,
+        now = _a.now,
+        isWill = _a.isWill;
+
+    var _list = list.length === 0 && isDesignMode() ? defaultData : list;
+
+    var bgStyle = {};
+
+    if (panelProps.background.bgType === 'color') {
+      bgStyle = {
+        backgroundColor: getColorRgba(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
+      };
+    } else {
+      bgStyle = {
+        background: "url(".concat(panelProps.background.image, ") no-repeat center"),
+        backgroundSize: '100%'
+      };
+    }
+
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _list.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+      className: "m-flash-deal-mobile",
+      style: bgStyle
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flash-deal-title"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "left"
+    }, panelProps.title.icon.open && panelProps.title.icon.url && /*#__PURE__*/React__default.createElement("img", {
+      alt: "",
+      className: "icon",
+      src: panelProps.title.icon.url
+    }), panelProps.title.headline.open && /*#__PURE__*/React__default.createElement(Text, {
+      className: "title",
+      data: panelProps.title.headline
+    }), isWill && /*#__PURE__*/React__default.createElement("span", {
+      className: "sub-title"
+    }, "Next"), /*#__PURE__*/React__default.createElement(CountDown, {
+      effDate: effDate,
+      expDate: expDate,
+      now: now,
+      refresh: this.getNextFlashSale
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "right",
+      onClick: function () {
+        return clickUrl('/spike');
+      }
+    }, panelProps.title.button.open && /*#__PURE__*/React__default.createElement(Button, {
+      className: "btn",
+      data: panelProps.title.button
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "flash-deal-list"
+    }, _list.map(function (item) {
+      return /*#__PURE__*/React__default.createElement(ProductItem, {
+        key: item.id,
+        data: __assign(__assign({}, item), {
+          salePercent: isWill ? 0 : item.salePercent
+        }),
+        onItemClick: function () {
+          var _a;
+
+          return clickUrl("/product/detail/".concat(item.offerId, "?productId=").concat((_a = item.sppProductId) !== null && _a !== void 0 ? _a : ''));
+        },
+        panelProps: panelProps.content
+      });
+    }))));
+  };
+
+  FlashDealMobile.defaultProps = {
+    panelProps: {}
+  };
+  return FlashDealMobile;
+}(React__default.Component);
+
+export { FlashDealMobile as default };

package/src/components/composite-comp/dito/components/FlashDeal/mobile/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-flash-deal-mobile__kOpDj {\n  display: flex;\n  flex-direction: column;\n  padding: 16px 16px 28px 16px;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_left__IApxP {\n  display: flex;\n  align-items: center;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_left__IApxP .index_icon__v85R8 {\n  height: 18px;\n  margin-right: 10px;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_left__IApxP .index_title__eB-fI {\n  font-family: 'Montserrat';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 18px;\n  color: #2C2C2C;\n  margin-right: 10px;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_left__IApxP .index_sub-title__nXzYJ {\n  font-family: 'Montserrat';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 10px;\n  line-height: 18px;\n  color: #2C2C2C;\n  margin-right: 6px;\n  align-self: end;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_right__8WGHj {\n  display: flex;\n  align-items: center;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_right__8WGHj .index_text__ZZfrV {\n  font-family: 'Montserrat';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 15px;\n  color: #0038A8;\n  margin-right: 5px;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-title__Ckqt9 .index_right__8WGHj .index_btn__jqVLi {\n  white-space: nowrap;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-list__zF3qY {\n  margin-top: 16px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  border-radius: 9px;\n  display: flex;\n  align-items: flex-start;\n  position: relative;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-list__zF3qY .index_loading-wrap__FHL2r {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 30px;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: auto;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-list__zF3qY .index_m-product-item-wrap__qCAVj {\n  margin-right: 8px;\n}\n.index_m-flash-deal-mobile__kOpDj .index_flash-deal-list__zF3qY .index_m-product-item-wrap__qCAVj .index_product-name__Ddpzc {\n  height: 36px;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,210 @@
+import uuid_1 from '../../../../../../my_node_modules/uuid/index.js';
+
+var recommendGroupSourceJSON = function (logo, text) {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    image: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: '',
+        pcName: '',
+        h5ImgSrc: logo,
+        pcImgSrc: logo,
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    },
+    groupName: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'TEXT',
+      specialContent: [],
+      text: text,
+      content: {
+        fontFamily: 'Open Sans',
+        fontWeight: 700,
+        fontSize: 14,
+        color: '#929292'
+      },
+      underline: {
+        open: false,
+        textDecorationColor: '',
+        textDecorationStyle: 'solid'
+      },
+      vertical: {}
+    },
+    sourceType: 'recommend',
+    hover: {
+      open: true,
+      image: {
+        parentId: groupId,
+        id: uuid_1.v4(),
+        open: false,
+        type: 'IMAGE',
+        content: {
+          h5Name: '',
+          pcName: '',
+          h5ImgSrc: logo,
+          pcImgSrc: logo,
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      groupName: {
+        parentId: groupId,
+        id: uuid_1.v4(),
+        open: false,
+        type: 'TEXT',
+        specialContent: [],
+        text: text,
+        content: {
+          fontFamily: 'Open Sans',
+          fontWeight: 700,
+          fontSize: 14,
+          color: '#CE1126'
+        },
+        underline: {
+          open: false,
+          textDecorationColor: '',
+          textDecorationStyle: 'solid'
+        },
+        vertical: {}
+      }
+    }
+  };
+};
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'RECOMMEND',
+    groupSource: [recommendGroupSourceJSON('', 'Sale'), recommendGroupSourceJSON('', 'Popular')],
+    content: {
+      label: {
+        id: uuid_1.v4(),
+        open: true,
+        type: 'BUTTON',
+        text: 'Button',
+        content: {
+          url: '',
+          backgroundColor: '#0038A8'
+        },
+        buttonText: {
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 8,
+          fontStyle: 'normal',
+          color: '#fff',
+          padding: '0 5px'
+        },
+        buttonBorder: {
+          open: true,
+          borderColor: '',
+          borderRadius: 7
+        },
+        buttonIcon: {
+          iconUrl: '',
+          layout: 'right'
+        },
+        hover: null
+      },
+      productName: {
+        id: uuid_1.v4(),
+        open: true,
+        type: 'Text',
+        specialContent: [],
+        text: 'Flash Deal',
+        content: {
+          fontFamily: 'Open Sans',
+          fontWeight: 500,
+          fontSize: 14,
+          color: '#2C2C2C'
+        },
+        underline: {
+          open: false,
+          textDecorationColor: '',
+          textDecorationStyle: 'solid'
+        },
+        vertical: {
+          open: false,
+          lineHeight: 18
+        }
+      },
+      activityPrice: {
+        id: uuid_1.v4(),
+        open: true,
+        type: 'Text',
+        specialContent: [],
+        text: 'Flash Deal',
+        content: {
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 14,
+          color: '#CE1126'
+        },
+        underline: {
+          open: false,
+          textDecorationColor: '',
+          textDecorationStyle: 'solid'
+        },
+        vertical: {
+          open: false,
+          lineHeight: 18
+        }
+      },
+      salesPrice: {
+        id: uuid_1.v4(),
+        open: true,
+        type: 'Text',
+        specialContent: [],
+        text: 'Flash Deal',
+        content: {
+          fontFamily: 'Open Sans',
+          fontWeight: 500,
+          fontSize: 10,
+          color: '#929292'
+        },
+        underline: {
+          open: false,
+          textDecorationColor: '',
+          textDecorationStyle: 'solid'
+        },
+        vertical: {
+          open: false,
+          lineHeight: 18
+        }
+      },
+      salesProgressVisible: {
+        open: true
+      }
+    },
+    customize: {
+      layout: 'left',
+      align: 'left'
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON, recommendGroupSourceJSON };

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

@@ -0,0 +1,31 @@
+import { __extends, __decorate } from '../../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import RecommendMobile from './mobile/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import { isPc } from '../../../../utils/coreUtil.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+
+var Recommend =
+/** @class */
+function (_super) {
+  __extends(Recommend, _super);
+
+  function Recommend() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Recommend.prototype.render = function () {
+    var nodeData = this.props.nodeData;
+    return /*#__PURE__*/React__default.createElement("div", null, isPc() ? null : /*#__PURE__*/React__default.createElement(RecommendMobile, {
+      panelProps: nodeData
+    }));
+  };
+
+  Recommend.defaultProps = {};
+  Recommend.type = 'RECOMMEND';
+  Recommend.getDefaultJSON = getDefaultJSON;
+  Recommend = __decorate([compositeDecorator], Recommend);
+  return Recommend;
+}(Component);
+
+export { Recommend as default };