@fonixtree/magic-design 2.0.202 → 2.0.204

package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _commonUtil = require("../../../../../../utils/commonUtil");
+
+var _currencyUtil = require("../../../../../../utils/currencyUtil");
+
+var _common = require("../../../../../../common");
+
+var _components = require("../../../../../../meta-comp/components");
+
+var _businessUtil = require("../../../../../../utils/businessUtil");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var ProductItem =
+/** @class */
+function (_super) {
+  __extends(ProductItem, _super);
+
+  function ProductItem() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  ProductItem.prototype.render = function () {
+    var _a = this.props,
+        data = _a.data,
+        panelProps = _a.panelProps,
+        onItemClick = _a.onItemClick,
+        unknownPrice = _a.unknownPrice,
+        rest = __rest(_a, ["data", "panelProps", "onItemClick", "unknownPrice"]);
+
+    var promotions = (0, _businessUtil.getPromotionList)(data);
+    var price = (0, _currencyUtil.formatCurrency)(data.salesPrice);
+    /** 当是拼团时 显示价格 */
+
+    if (data.sppType && promotions.length) {
+      price = data.specialPrice !== null ? (0, _currencyUtil.formatCurrency)(data.specialPrice) : (0, _currencyUtil.formatCurrency)(data.salesPrice);
+    }
+
+    var integerPart = price;
+    var decimalPart = null;
+
+    if (unknownPrice) {
+      if (price.length > 5) {
+        integerPart = price.slice(0, -5).replace(/\d/g, '? ') + price.slice(-5);
+      } else {
+        integerPart = price.replace(/\d/, '? ');
+      }
+    } else if (Array.isArray(price)) {
+      integerPart = price[0];
+      decimalPart = price[1];
+    }
+
+    var pricePrefix = (0, _commonUtil.ensure)(function () {
+      return window.systemParams.prefix;
+    }, 'Rp');
+
+    var _price = integerPart + " " + (decimalPart ? '.' + decimalPart : '');
+
+    var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({
+      className: (0, _classnames["default"])('m-pc-flash-product-item'),
+      onClick: function onClick() {
+        return onItemClick();
+      }
+    }, rest), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "img-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.NewImg, {
+      className: "product-img",
+      lazy: true,
+      src: (0, _commonUtil.convertImageUrl)(data.productImg || data.imgUrlContent || data.productImageUrlContent)
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "product-name-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "box"
+    }, panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      data: __assign(__assign({}, panelProps.productName), {
+        text: data.offerName
+      }),
+      readonly: true
+    }))), (panelProps.activityPrice.open || panelProps.salesPrice.open) && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "price-wrap"
+    }, panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "prefix"
+    }, pricePrefix), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "price",
+      data: __assign(__assign({}, panelProps.activityPrice), {
+        text: _price
+      }),
+      readonly: true
+    })), panelProps.salesPrice.open && oldPrice && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "old-price",
+      data: __assign(__assign({}, panelProps.salesPrice), {
+        text: oldPrice
+      }),
+      readonly: true,
+      style: {
+        color: panelProps.salesPrice.content.color
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "rate-sold-wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "rate-wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#FCD117",
+      size: 16,
+      type: "icon-star"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "rate-text"
+    }, (0, _currencyUtil.numberToFixed)(5.0, 1))), data.salesCnt > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sold-count"
+    }, (0, _commonUtil.convertCount)(data.salesCnt), " sold"))));
+  };
+
+  ProductItem.defaultProps = {
+    data: {},
+    panelProps: {},
+    layout: 'vertical'
+  };
+  return ProductItem;
+}(_react["default"].Component);
+
+var _default = ProductItem;
+exports["default"] = _default;

package/lib/composite-comp/dito/components/FlashDeal/pc/ProductItem/index.less

@@ -0,0 +1,100 @@
+.m-pc-flash-product-item {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  cursor: pointer;
+  position: relative;
+  width: 270px;
+
+  .img-wrap {
+    position: relative;
+    overflow: hidden;
+    border-radius: 16px;
+    border: 1px solid #E0E0E0;
+
+    .product-img {
+      width: 270px;
+      height: 270px;
+      object-fit: cover;
+    }
+  }
+
+  .content-wrap {
+    padding: 8px;
+
+    .product-name-wrap {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-height: 24px;
+      height: 48px;
+      white-space: wrap;
+    }
+
+    .price-wrap {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      margin-top: 8px;
+
+      .prefix {
+        font-weight: 700;
+        font-size: 20px;
+        color: #CE1126;
+      }
+
+      .price {
+        width: auto !important;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 8px;
+      }
+
+      .old-price {
+        text-decoration: line-through;
+        width: fit-content;
+      }
+
+    }
+
+    .rate-sold-wrap {
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+
+      .rate-wrap {
+        display: flex;
+        align-items: center;
+
+        .rate-text {
+          font-size: 16px;
+          font-weight: 500;
+          color: #666666;
+          margin-left: 4px;
+        }
+      }
+
+      .sold-count {
+        font-size: 16px;
+        font-weight: 500;
+        color: #666666;
+        margin-left: 10px;
+        display: flex;
+        align-items: center;
+
+        &:before {
+          content: '';
+          display: block;
+          width: 2px;
+          height: 16px;
+          background-color: #666666;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+}

package/lib/composite-comp/dito/components/FlashDeal/pc/index.js

@@ -13,7 +13,7 @@ var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
 var _defImg = _interopRequireDefault(require("./imgs/defImg.png"));
 
-var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
+var _ProductItem = _interopRequireDefault(require("./ProductItem"));
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
@@ -474,40 +474,40 @@ function (_super) {
   FlashDealPc.prototype.render = function () {
     var _this = this;
 
+    var _a, _b;
+
     var panelProps = this.props.panelProps;
-    var _a = this.state,
-        list = _a.list,
-        effDate = _a.effDate,
-        expDate = _a.expDate,
-        now = _a.now,
-        isWill = _a.isWill,
-        scrollToLeftDisabled = _a.scrollToLeftDisabled,
-        scrollToRightDisabled = _a.scrollToRightDisabled;
+    var _c = this.state,
+        list = _c.list,
+        effDate = _c.effDate,
+        expDate = _c.expDate,
+        now = _c.now,
+        isWill = _c.isWill,
+        scrollToLeftDisabled = _c.scrollToLeftDisabled,
+        scrollToRightDisabled = _c.scrollToRightDisabled;
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
-    var imgHeight = panelProps.customize.pcRowNum === 6 ? 153 : 193;
-    var imgWidth = panelProps.customize.pcRowNum === 6 ? 153 : 193;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-flash-deal-pc"
     }, /*#__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: "",
+    }, ((_a = panelProps.title.image) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       className: "icon",
-      src: panelProps.title.icon.url
-    }), panelProps.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      data: panelProps.title.image
+    }), !(0, _coreUtil.isPc)() && panelProps.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "title",
       data: panelProps.title.headline
-    }), isWill && /*#__PURE__*/_react["default"].createElement("span", {
+    }), !(0, _coreUtil.isPc)() && isWill && /*#__PURE__*/_react["default"].createElement("span", {
       className: "sub-title"
-    }, (0, _locale.i18n)('NEXT')), /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
+    }, (0, _locale.i18n)('NEXT')), ((_b = panelProps.title.countDown) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement(_CountDown["default"], {
       effDate: effDate,
       expDate: expDate,
       now: now,
-      refresh: this.getNextFlashSale
+      refresh: this.getNextFlashSale,
+      type: "pc"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "right",
       onClick: function onClick() {
@@ -536,10 +536,6 @@ function (_super) {
         data: __assign(__assign({}, item), {
           salePercent: isWill ? 0 : item.salePercent
         }),
-        fixHeight: true,
-        imgHeight: imgHeight,
-        imgWidth: imgWidth // onItemClick={() => clickUrl(`/product/detail/${item.offerId}?productId=${item.sppProductId ?? ''}`)}
-        ,
         onItemClick: function onItemClick() {
           return (0, _coreUtil.clickUrl)("proDetail-" + item.offerId + "-" + (item.sppProductId || ''));
         },

package/lib/composite-comp/dito/components/FlashDeal/pc/index.less

@@ -1,12 +1,13 @@
 .m-flash-deal-pc {
   display: flex;
   flex-direction: column;
-  padding: 16px 16px 28px 16px;
 
   .flash-deal-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 0 64px;
+    margin-bottom: 40px;
 
     .left {
       display: flex;
@@ -18,7 +19,6 @@
       }
 
       .title {
-        font-family: 'Montserrat';
         font-style: normal;
         font-weight: 600;
         font-size: 14px;
@@ -28,7 +28,6 @@
       }
 
       .sub-title {
-        font-family: 'Montserrat';
         font-style: normal;
         font-weight: 600;
         font-size: 10px;
@@ -44,7 +43,6 @@
       align-items: center;
 
       .text {
-        font-family: 'Montserrat';
         font-style: normal;
         font-weight: 600;
         font-size: 12px;
@@ -66,27 +64,26 @@
 
     .arrow-icon {
       display: block;
-      width: 36px;
-      height: 36px;
-      line-height: 42px;
+      width: 48px;
+      height: 48px;
+      line-height: 50px;
       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;
+      border: 1px solid #F0F0F0;
       cursor: pointer;
 
       &.left {
-        margin-right: 30px;
+        margin-right: 16px;
       }
 
       &.right {
-        margin-left: 30px;
+        margin-left: 16px;
       }
     }
   }
 
   .flash-deal-list {
-    margin-top: 16px;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
@@ -95,27 +92,19 @@
     justify-content: flex-start;
     position: relative;
     flex: 1;
+    gap: 40px;
+  }
+}
 
-    .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;
+@media(min-width: 750px) {
+  .m-flash-deal-pc {
+    .flash-deal-title {
+      .left {
+        .icon {
+          height: 36px;
+          margin-right: 16px;
+        }
       }
     }
   }

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

@@ -76,9 +76,12 @@
 .m-group-buy-mobile .group-buy-list .m-product-item-wrap {
   width: 3.44rem;
   margin-right: 0.24rem;
-  border-radius: 0;
+  border-radius: 0.16rem;
 }
-.m-group-buy-mobile .group-buy-list .m-product-item-wrap .product-img {
+.m-group-buy-mobile .group-buy-list .m-product-item-wrap .img-wrap {
+  border-radius: 0.16rem 0.16rem 0 0;
+}
+.m-group-buy-mobile .group-buy-list .m-product-item-wrap .img-wrap .product-img {
   height: 3.4rem;
   width: 3.4rem;
 }