@fonixtree/magic-design 2.0.200 → 2.0.203

package/lib/common/VideoPC/index.less

@@ -0,0 +1,79 @@
+.video-container {
+  position: relative;
+  height: 100%;
+  background-image: linear-gradient(0, rgba(0, 0, 0, .2), rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
+  &:empty {
+    height: 400px;
+  }
+
+  .video-cover-img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+
+  .prism-player .prism-cover {
+    z-index: 0;
+  }
+  .prism-player video{
+    position:relative !important;
+    left: 0 !important;
+    top: 0 !important;
+    transform: none !important;
+    display: block !important;
+  }
+
+  .video-wrap {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.pc-video-modal-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+
+  .video-shadow-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    opacity: .4;
+    background-color: #000;
+  }
+
+  .content-wrap {
+    width: 1100px;
+    max-width: 90%;
+    height: 600px;
+    // padding: 10px;
+    background: rgb(255 255 255);
+    border-radius: 5px;
+    z-index: 1001;
+    position: relative;
+
+    .close-img-wrap {
+      position: absolute;
+      right: 14px;
+      top: 14px;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+  }
+}

package/lib/common/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "CropperModal", {
     return _CropperModal["default"];
   }
 });
+Object.defineProperty(exports, "ErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorBoundary["default"];
+  }
+});
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function get() {
@@ -111,6 +117,12 @@ Object.defineProperty(exports, "PopUpModal", {
     return _PopUpModal["default"];
   }
 });
+Object.defineProperty(exports, "ProductCardModal", {
+  enumerable: true,
+  get: function get() {
+    return _ProductCardModal["default"];
+  }
+});
 Object.defineProperty(exports, "ProductFilterModal", {
   enumerable: true,
   get: function get() {
@@ -159,6 +171,12 @@ Object.defineProperty(exports, "SystemNotification", {
     return _SystemNotification["default"];
   }
 });
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast["default"];
+  }
+});
 Object.defineProperty(exports, "UrlPicker", {
   enumerable: true,
   get: function get() {
@@ -171,6 +189,12 @@ Object.defineProperty(exports, "Video", {
     return _Video["default"];
   }
 });
+Object.defineProperty(exports, "VideoPC", {
+  enumerable: true,
+  get: function get() {
+    return _VideoPC["default"];
+  }
+});
 Object.defineProperty(exports, "VideoUpload", {
   enumerable: true,
   get: function get() {
@@ -218,6 +242,8 @@ var _SystemNotification = _interopRequireDefault(require("./SystemNotification")
 
 var _Video = _interopRequireDefault(require("./Video"));
 
+var _VideoPC = _interopRequireDefault(require("./VideoPC"));
+
 var _SwiperBan = _interopRequireDefault(require("./SwiperBan"));
 
 var _InputNumber = _interopRequireDefault(require("./InputNumber"));
@@ -236,4 +262,10 @@ var _NewImg = _interopRequireDefault(require("./NewImg"));
 
 var _ProductFilterModal = _interopRequireDefault(require("./ProductFilterModal"));
 
+var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));
+
+var _ProductCardModal = _interopRequireDefault(require("./ProductCardModal"));
+
+var _Toast = _interopRequireDefault(require("./Toast"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/composite-comp/common/components/ImageLabel/index.js

@@ -71,14 +71,14 @@ function (_super) {
         return /*#__PURE__*/_react["default"].createElement("img", {
           key: label.imgUrl || label.labelPictureUrl,
           alt: "img",
-          className: (0, _classnames["default"])('image-label-wrap', 'img', (_a = {}, _a["position-" + (label.position || 'default')] = true, _a.small = small, _a)),
+          className: (0, _classnames["default"])('image-label-wrap', 'img', (_a = {}, _a["position-" + label.position] = true, _a.small = small, _a)),
           src: label.imgUrl || label.labelPictureUrl
         });
       }
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: label.labelName,
-        className: (0, _classnames["default"])('image-label-wrap', (_b = {}, _b["position-" + (label.position || 'default')] = true, _b))
+        className: (0, _classnames["default"])('image-label-wrap', 'label', (_b = {}, _b["position-" + label.position] = true, _b))
       }, label.labelName);
     });
   };

package/lib/composite-comp/common/components/ImageLabel/index.less

@@ -1,7 +1,6 @@
 .image-label-wrap {
-  position: absolute;
-  z-index: 1;
   font-size: 12px;
+  display: none;
 
   &.img {
     max-width: 75%;
@@ -13,30 +12,48 @@
     }
   }
 
-  &.position-1,
-  &.position-default {
+  &.label {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.position-1 {
+    display: block;
+    position: absolute;
+    z-index: 1;
     top: 0;
     left: 0;
   }
 
   &.position-2 {
+    display: block;
+    position: absolute;
+    z-index: 1;
     bottom: 0;
     left: 0;
   }
 
   &.position-3 {
+    display: block;
+    position: absolute;
+    z-index: 1;
     top: 0;
     right: 0;
   }
 
   &.position-4 {
+    display: block;
+    position: absolute;
+    z-index: 1;
     bottom: 0;
     right: 0;
   }
 
 
   &.position-6 {
-    position: unset;
+    display: block;
     height: 18px;
     margin-right: 5px;
     vertical-align: middle;
@@ -44,8 +61,7 @@
   }
 
   &.position-7 {
-    position: unset;
-    // width: 56px;
+    display: block;
     height: 16px;
   }
 }

package/lib/composite-comp/common/components/ProductItem/index.js

@@ -97,21 +97,21 @@ function (_super) {
   }
 
   ProductItem.prototype.render = function () {
-    var _a, _b, _c, _d, _e;
-
-    var _f = this.props,
-        data = _f.data,
-        type = _f.type,
-        panelProps = _f.panelProps,
-        onItemClick = _f.onItemClick,
-        showProName = _f.showProName,
-        showProgress = _f.showProgress,
-        fixHeight = _f.fixHeight,
-        layout = _f.layout,
-        imgHeight = _f.imgHeight,
-        imgWidth = _f.imgWidth,
-        unknownPrice = _f.unknownPrice,
-        rest = __rest(_f, ["data", "type", "panelProps", "onItemClick", "showProName", "showProgress", "fixHeight", "layout", "imgHeight", "imgWidth", "unknownPrice"]);
+    var _a, _b, _c, _d, _e, _f, _g;
+
+    var _h = this.props,
+        data = _h.data,
+        type = _h.type,
+        panelProps = _h.panelProps,
+        onItemClick = _h.onItemClick,
+        showProName = _h.showProName,
+        showProgress = _h.showProgress,
+        fixHeight = _h.fixHeight,
+        layout = _h.layout,
+        imgHeight = _h.imgHeight,
+        imgWidth = _h.imgWidth,
+        unknownPrice = _h.unknownPrice,
+        rest = __rest(_h, ["data", "type", "panelProps", "onItemClick", "showProName", "showProgress", "fixHeight", "layout", "imgHeight", "imgWidth", "unknownPrice"]);
 
     var promotions = (0, _businessUtil.getPromotionList)(data);
     var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
@@ -155,7 +155,20 @@ function (_super) {
     })) || [];
     var priceLabels = ((_c = data.labels) === null || _c === void 0 ? void 0 : _c.filter(function (f) {
       return f.position === '7';
-    })) || [];
+    })) || []; // ad 卡片
+
+    if (data.type === 'ad') {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "m-product-item-advertise"
+      }, data.url && /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "welcome advertise",
+        onClick: function onClick() {
+          (0, _commonUtil.jumpUrlConfig)(data.adObj);
+        },
+        src: data.url
+      }));
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: (0, _classnames["default"])('m-product-item-wrap', {
         fixHeight: fixHeight,
@@ -165,7 +178,7 @@ function (_super) {
         return onItemClick();
       },
       style: {
-        width: imgWidth + 2
+        width: imgWidth
       }
     }, rest), /*#__PURE__*/_react["default"].createElement("div", {
       className: "img-wrap"
@@ -221,13 +234,17 @@ function (_super) {
     }), priceLabels.length > 0 && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
       labels: priceLabels,
       small: true
-    })), panelProps.salesPrice.open && /*#__PURE__*/_react["default"].createElement("div", {
+    })), panelProps.salesPrice.open && (!!discount || oldPrice) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "price-sold-wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "old-price-wrap"
-    }, !!discount && /*#__PURE__*/_react["default"].createElement("span", {
-      className: type === 'groupBuy' || type === 'bargain' ? 'discount2' : 'discount'
-    }, "-", discount, "%"), oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    }, !!discount && ((_d = panelProps.discountLabel) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "discount",
+      data: __assign(__assign({}, panelProps.discountLabel), {
+        text: "-" + discount + "%"
+      }),
+      readonly: true
+    }), oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "old-price",
       data: __assign(__assign({}, panelProps.salesPrice), {
         text: oldPrice
@@ -236,9 +253,9 @@ function (_super) {
       style: {
         color: panelProps.salesPrice.content.color
       }
-    })), type !== 'groupBuy' && !showProgress && data.salesCnt > 0 && data.displaySalesCntFlag === 'Y' && /*#__PURE__*/_react["default"].createElement("div", {
+    })), type !== 'groupBuy' && !showProgress && data.salesCnt > 0 && data.displaySalesCntFlag === 'Y' && ((_e = panelProps.sold) === null || _e === void 0 ? void 0 : _e.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "sold-count"
-    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))), showProgress && ((_d = panelProps.salesProgress) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))), showProgress && ((_f = panelProps.salesProgressVisible) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "progress-wrap"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "text"
@@ -248,7 +265,7 @@ function (_super) {
       className: "progress",
       style: {
         width: salePercent + "%",
-        backgroundColor: (_e = panelProps.salesProgress) === null || _e === void 0 ? void 0 : _e.color
+        backgroundColor: (_g = panelProps.salesProgress) === null || _g === void 0 ? void 0 : _g.color
       }
     })))));
   };

package/lib/composite-comp/common/components/ProductItem/index.less

@@ -1,3 +1,10 @@
+.m-product-item-advertise {
+  img {
+    width: 100%;
+    border-radius: 8px;
+  }
+}
+
 .m-product-item-wrap {
   display: flex;
   flex-direction: column;
@@ -9,6 +16,7 @@
 
   .img-wrap {
     position: relative;
+    overflow: hidden;
 
     .product-img {
       width: 140px;
@@ -57,7 +65,6 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      margin-bottom: 5px;
 
       .price {
         width: auto !important;
@@ -70,7 +77,7 @@
 
     .price-sold-wrap {
       display: flex;
-      margin-top: 0px;
+      margin-top: 5px;
       align-items: center;
       white-space: nowrap;
       overflow: hidden;
@@ -83,25 +90,13 @@
         line-height: 13px;
 
         .discount {
-          margin-right: 3px;
-          font-family: 'Montserrat';
-          font-style: normal;
-          font-weight: 700;
-          font-size: 8px;
-          line-height: 15px;
-          color: #fff;
-          padding: 0 4px;
-          background-color: #CE1126;
-        }
-
-        .discount2 {
           margin-right: 3px;
           font-family: 'Montserrat';
           font-style: normal;
           font-weight: 700;
           font-size: 12px;
           line-height: 15px;
-          color: #2F3043;
+          color: #2C2C2C;
         }
 
         .old-price {
@@ -118,6 +113,13 @@
       }
     }
 
+    .sold {
+      display: inline-block;
+      color: #545454;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
     .rate-wrap {
       display: flex;
       margin-top: 8px;

package/lib/composite-comp/common/config-panels/BackgroundConfig/index.js

@@ -49,33 +49,34 @@ function (_super) {
   __extends(BackgroundConfig, _super);
 
   function BackgroundConfig() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.state = {};
-    return _this;
+    return _super !== null && _super.apply(this, arguments) || this;
   }
 
   BackgroundConfig.prototype.render = function () {
     var _this = this;
 
-    var data = this.props.data;
+    var _a = this.props,
+        data = _a.data,
+        name = _a.name,
+        type = _a.type;
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
-      title: (0, _locale.i18n)('BACKGROUND')
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      title: name
+    }, type === 'all' && /*#__PURE__*/_react["default"].createElement(_antd.Select, {
       onChange: function onChange(bgType) {
         data.bgType = bgType;
+        data.tabBgType = bgType;
 
         _this.selfRender();
       },
       style: {
         marginBottom: '15px'
       },
-      value: data.bgType
+      value: data.bgType || data.tabBgType
     }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
       value: "color"
     }, (0, _locale.i18n)('COLOR')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
       value: "image"
-    }, (0, _locale.i18n)('IMAGE'))), data.bgType === 'color' ? /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+    }, (0, _locale.i18n)('IMAGE'))), (type === 'color' || data.bgType === 'color' || data.tabBgType === 'color') && /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
       colorType: "rgba",
       onChange: function onChange(v) {
         data.opacity = 1;
@@ -84,7 +85,7 @@ function (_super) {
         _this.selfRender();
       },
       value: data.color
-    }) : /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
+    }), (type === 'image' || data.bgType === 'image' || data.tabBgType === 'image') && /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
       imageSelectedWay: data.imageSelectedWay || {
         pc: '',
         mobile: ''
@@ -109,8 +110,11 @@ function (_super) {
       opacity: 100,
       color: '#232F46',
       image: '',
-      bgType: 'color'
-    }
+      bgType: 'color',
+      tabBgType: 'color'
+    },
+    name: (0, _locale.i18n)('BACKGROUND'),
+    type: 'all'
   };
   return BackgroundConfig;
 }(_BaseConfig["default"]);

package/lib/composite-comp/common/config-panels/SpacingConfig/index.js

@@ -63,6 +63,8 @@ function (_super) {
     var _a = this.props,
         data = _a.data,
         configCompSpace = _a.configCompSpace,
+        configLineSpace = _a.configLineSpace,
+        configColumnSpace = _a.configColumnSpace,
         configWidth = _a.configWidth,
         fillUpWidth = _a.fillUpWidth;
     var obj = data[window.magicDesign.device] || {};
@@ -153,11 +155,39 @@ function (_super) {
       value: {
         count: obj.marginBottom
       }
+    })), configLineSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      title: (0, _locale.i18n)('LINE_SPACING')
+    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+      maxVal: 100,
+      minVal: 0,
+      onChange: function onChange(value) {
+        obj.lineSpace = value.count;
+
+        _this.selfRender();
+      },
+      value: {
+        count: obj.lineSpace
+      }
+    })), configColumnSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      title: (0, _locale.i18n)('COLUMN_SPACING')
+    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+      maxVal: 100,
+      minVal: 0,
+      onChange: function onChange(value) {
+        obj.columnSpace = value.count;
+
+        _this.selfRender();
+      },
+      value: {
+        count: obj.columnSpace
+      }
     })));
   };
 
   SpacingConfig.defaultProps = {
     configCompSpace: true,
+    configLineSpace: false,
+    configColumnSpace: false,
     configWidth: false,
     fillUpWidth: false,
     data: {

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

@@ -210,6 +210,30 @@ var getDefaultJSON = function getDefaultJSON() {
           lineHeight: 18
         }
       },
+      discountLabel: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'TEXT',
+        specialContent: [],
+        text: '',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Montserrat',
+          fontWeight: 700,
+          fontSize: 12,
+          color: '#2C2C2C',
+          urlDisabled: true
+        },
+        underline: {
+          open: false,
+          textDecorationColor: '',
+          textDecorationStyle: 'solid'
+        },
+        vertical: {
+          open: false,
+          lineHeight: 18
+        }
+      },
       salesProgress: {
         open: true
       }

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

@@ -26,7 +26,7 @@ var CommonFunctionsGroupSourceJSON = function CommonFunctionsGroupSourceJSON(tex
       content: {
         sizeType: 'Customize font styles',
         fontFamily: defaultFontFamily,
-        fontWeight: 600,
+        fontWeight: 500,
         fontSize: 14,
         color: '#2C2C2C',
         width: 0,

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

@@ -9,12 +9,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _components = require("../../../../../meta-comp/components");
 
 var _common = require("../../../../../common");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _storeUtil = require("../../../../../utils/storeUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,11 +75,15 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
+    var LPObj = (0, _storeUtil.getSessionStore)('channelPurchase') || {};
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('common-functions-mobile')
     }, /*#__PURE__*/_react["default"].createElement("ul", null, data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("li", {
         key: item.id,
+        className: (0, _classnames["default"])({
+          hide: !(0, _isEmpty["default"])(LPObj) && item.title.text === 'Security Center'
+        }),
         onClick: function onClick() {
           return _this.onItemClick(item);
         }

package/lib/composite-comp/dito/components/CommonFunctions/mobile/index.less

@@ -14,6 +14,9 @@
   justify-content: space-between;
   align-items: center;
 }
+.common-functions-mobile ul li.hide {
+  display: none;
+}
 .common-functions-mobile ul li .content-wrap {
   display: flex;
   align-items: center;