@fonixtree/magic-design 2.0.190 → 3.0.3

package/lib/composite-comp/monpay/components/MonpayFlashDeal/pc/index.less

@@ -0,0 +1,150 @@
+.monpay-flash-deal-pc {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+
+  .flash-deal-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        height: 18px;
+        margin-right: 10px;
+      }
+
+      .title {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 18px;
+        color: #2C2C2C;
+        margin-right: 10px;
+      }
+
+      .sub-title {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 10px;
+        line-height: 18px;
+        color: #2C2C2C;
+        margin-right: 6px;
+        align-self: end;
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      .text {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 15px;
+        color: #0038A8;
+        margin-right: 5px;
+      }
+
+      .btn {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .flash-deal-time {
+    margin-top: 16px;
+    white-space: nowrap;
+    overflow-x: auto;
+
+    .item {
+      margin-right: 10px;
+      border: 1px solid #E4E4E4;
+      padding: 6px 12px;
+      border-radius: 8px;
+      display: inline-block;
+      width: auto;
+
+      .time {
+        font-weight: 600;
+        font-size: 12px;
+        color: #000;
+      }
+
+      .status {
+        font-size: 10px;
+        font-weight: 400;
+        color: #545454;
+      }
+    }
+
+  }
+
+  .flash-deal-content {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    .arrow-icon {
+      display: block;
+      width: 36px;
+      height: 36px;
+      line-height: 42px;
+      text-align: center;
+      background: #FFFFFF;
+      box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+      border-radius: 100px;
+      cursor: pointer;
+
+      &.left {
+        margin-right: 30px;
+      }
+
+      &.right {
+        margin-left: 30px;
+      }
+    }
+  }
+
+  .flash-deal-list {
+    margin-top: 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    position: relative;
+    flex: 1;
+
+    .loading-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 30px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    // 秒杀特有样式
+    .m-product-item-wrap {
+      width: 142px;
+      margin-right: 24px;
+
+      .product-name {
+        height: 36px;
+      }
+    }
+  }
+}

package/lib/composite-comp/monpay/components/MonpayRecommend/defaultJSON.js

@@ -195,31 +195,31 @@ var getDefaultJSON = function getDefaultJSON() {
         text: 'Button',
         content: {
           url: '',
-          backgroundColor: '#ff8650'
+          backgroundColor: '#CE1126'
         },
         buttonText: {
           sizeType: 'Customize font styles',
           fontFamily: defaultFontFamily,
-          fontWeight: 700,
-          fontSize: 12,
+          fontWeight: 600,
+          fontSize: 8,
           fontStyle: 'normal',
           color: '#fff'
         },
         buttonBorder: {
           open: true,
           borderColor: '',
-          borderRadius: '0 5px 5px 0'
+          borderRadius: 0
         },
         spacing: {
           pc: {
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 0,
+            paddingBottom: 0,
             paddingLeft: 5,
             paddingRight: 5
           },
           mobile: {
-            paddingTop: 3,
-            paddingBottom: 3,
+            paddingTop: 0,
+            paddingBottom: 0,
             paddingLeft: 5,
             paddingRight: 5
           }

package/lib/composite-comp/monpay/components/MonpayRecommend/index.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobile = _interopRequireDefault(require("./mobile"));
 
+var _pc = _interopRequireDefault(require("./pc"));
+
 var _defaultJSON = require("./defaultJSON");
 
 var _coreUtil = require("../../../../utils/coreUtil");
@@ -70,7 +72,9 @@ 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"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+      panelProps: nodeData
+    }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       panelProps: nodeData
     }));
   };

package/lib/composite-comp/monpay/components/MonpayRecommend/mobile/index.js

@@ -724,22 +724,20 @@ function (_super) {
   };
 
   RecommendMobile.prototype.render = function () {
-    var _a;
-
     var _this = this;
 
-    var _b;
+    var _a;
 
     var panelProps = this.props.panelProps;
-    var _c = this.state,
-        tabIndex = _c.tabIndex,
-        tabLeft = _c.tabLeft,
-        tabWidth = _c.tabWidth,
-        groupSource = _c.groupSource,
-        hideTabs = _c.hideTabs,
-        contentWidth = _c.contentWidth,
-        filterObj = _c.filterObj,
-        searchParams = _c.searchParams;
+    var _b = this.state,
+        tabIndex = _b.tabIndex,
+        tabLeft = _b.tabLeft,
+        tabWidth = _b.tabWidth,
+        groupSource = _b.groupSource,
+        hideTabs = _b.hideTabs,
+        contentWidth = _b.contentWidth,
+        filterObj = _b.filterObj,
+        searchParams = _b.searchParams;
     var products = this.state["products" + tabIndex] || [];
 
     var _products = products.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : products;
@@ -764,7 +762,7 @@ function (_super) {
     if (_layout === 'layout1-2' && contentWidth) imgHeight = (contentWidth - 12) / 2;
     if (_layout === 'layout1-3' && contentWidth) imgHeight = (contentWidth - 12 * 2) / 3;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (groupSource.length === 1 && _products.length > 0 || groupSource.length > 1) && /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("monpay-recommend-mobile recommend_" + panelProps.id, (_a = {}, _a['reversed-layout'] = (0, _commonUtil.needReverse)(), _a))
+      className: "monpay-recommend-mobile recommend_" + panelProps.id
     }, panelProps.title.headerImage.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       className: "headerImg",
       data: panelProps.title.headerImage,
@@ -806,7 +804,7 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), ((_b = panelProps.content.filter) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement(_SearchCondition["default"], {
+    })), ((_a = panelProps.content.filter) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement(_SearchCondition["default"], {
       filterObj: filterObj,
       onChange: this.onSearchCondChange,
       value: searchParams
@@ -822,7 +820,6 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         intelligentType: (_a = groupSource[tabIndex]) === null || _a === void 0 ? void 0 : _a.intelligentType,
-        isRecommend: true,
         layout: layout === 'layout2' ? 'horizontal' : 'vertical',
         onItemClick: function onItemClick() {
           /** PTO 定制GA */
@@ -837,6 +834,7 @@ function (_super) {
           (0, _coreUtil.clickUrl)("proDetail-" + item.offerId + "-" + (item.sppProductId || item.productId || ''));
         },
         panelProps: panelProps.content,
+        showDiscountTag: true,
         showProgress: false
       });
     })), _seeAll.open && _products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
@@ -873,6 +871,7 @@ function (_super) {
           (0, _coreUtil.clickUrl)("proDetail-" + item.offerId + "-" + (item.sppProductId || item.productId || ''));
         },
         panelProps: panelProps.content,
+        showDiscountTag: true,
         showProgress: false
       });
     })), _seeAll.open && _products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {

package/lib/composite-comp/monpay/components/MonpayRecommend/mobile/index.less

@@ -82,14 +82,3 @@
   display: block;
   margin: 0.6rem auto;
 }
-.monpay-recommend-mobile.reversed-layout .monpay-product-item-wrap .discount-tag {
-  left: unset !important;
-  right: 0;
-}
-.monpay-recommend-mobile.reversed-layout .monpay-product-item-wrap.horizontal .img-wrap {
-  margin-right: 0;
-  margin-left: 0.16rem;
-}
-.monpay-recommend-mobile.reversed-layout .monpay-product-item-wrap.horizontal .img-wrap .product-img {
-  border-radius: 0 0.16rem 0.16rem 0;
-}