@fonixtree/magic-design 2.0.202 → 2.0.204

package/lib/common/LinkModal/ProductList/index.less

@@ -0,0 +1,130 @@
+.mProductList {
+  height: 500px;
+
+  .proModalWrap {
+    .info {
+      background: #ecf1fd;
+      border: 1px solid #bdcff9;
+      border-radius: 2px;
+      padding: 5px 0 5px 16px;
+      margin-bottom: 8px;
+    }
+
+    .prodImage {
+      width: 36px;
+      height: 36px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: contain;
+    }
+
+    .mProductListContent {
+      display: flex;
+
+      .rightCot {
+        width: calc(100% - 240px);
+        margin-left: 16px;
+
+        .selectedCot {
+          padding-right: 18px;
+          margin-left: 4px;
+          height: 78px;
+          background: #f8f8f8;
+          border: 1px solid #e0e0e0;
+          border-radius: 2px;
+          display: flex;
+          flex-direction: row;
+          // flex-wrap: wrap;
+          overflow-x: auto;
+
+          .selectedItem {
+            box-sizing: border-box;
+            margin-top: 12px;
+            margin-left: 18px;
+            height: 52px;
+            position: relative;
+
+            &:hover {
+              .selectedItemImg {
+                width: 52px;
+                height: 52px;
+                border: 1px solid #4477ee !important;
+                box-shadow: 0 0 0 2px rgba(68, 119, 238, 0.15);
+                border-radius: 2px;
+              }
+
+              .selectedItemClose {
+                display: flex;
+              }
+            }
+
+            .selectedItemClose {
+              display: none;
+              border: 1px solid #000;
+              width: 16px;
+              height: 16px;
+              border-radius: 50%;
+              padding: 2px;
+              position: absolute;
+              top: -9px;
+              right: -8px;
+              z-index: 400;
+              cursor: pointer;
+            }
+
+            .selectedItemImg {
+              height: 52px;
+              width: 52px;
+              border: 1px solid #e0e0e0;
+              border-radius: 2px;
+
+              &.invalid {
+                border: 1px solid red;
+              }
+            }
+          }
+        }
+      }
+
+      .leftCot {
+        width: 280px;
+        // height: 400px;
+        box-sizing: border-box;
+        border-right: 1px solid #e0e0e0;
+        padding-right: 15px;
+
+        .price {
+          display: flex;
+          width: calc(100% - 16px);
+
+          .icon {
+            width: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid #e0e0e0;
+            border-radius: 2px;
+          }
+        }
+
+        .cylon-form-item {
+          margin-bottom: 4px;
+        }
+
+        .buttonStyle {
+          margin-top: 10px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+
+.cylon-modal-root {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+}

package/lib/common/LinkModal/index.js

@@ -55,6 +55,8 @@ var _MissionDetail = _interopRequireDefault(require("./MissionDetail"));
 
 var _BizType = _interopRequireDefault(require("./BizType"));
 
+var _ProductList = _interopRequireDefault(require("./ProductList"));
+
 var _locale = require("../../locale");
 
 var _commonUtil = require("../../utils/commonUtil");
@@ -449,9 +451,14 @@ var LinkModal = function LinkModal(props) {
     onChange: function onChange(value) {
       return setLinkUrl(value);
     }
+  }), selected === 'ProductList' && /*#__PURE__*/_react["default"].createElement(_ProductList["default"], {
+    onChange: function onChange(url, t) {
+      setLinkUrl(url);
+      setTotal(t);
+    }
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "footer"
-  }, selected === 'FilteredProduct' ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, selected === 'FilteredProduct' || selected === 'ProductList' ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "total"
   }, (0, _locale.i18n)('PRODUCTS_IN_TOTAL', {
     total: total

package/lib/common/ProductCardModal/index.js

@@ -0,0 +1,255 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ProductCardModal;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _framerMotion = require("framer-motion");
+
+var _dotIcon = _interopRequireDefault(require("./imgs/dot-icon.png"));
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+require("./index.less");
+
+var _coreUtil = require("../../utils/coreUtil");
+
+var _commonUtil = require("../../utils/commonUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ProductCardModal(_a) {
+  var _b = _a.data,
+      data = _b === void 0 ? [] : _b,
+      onClose = _a.onClose,
+      _c = _a.autoplay,
+      autoplay = _c === void 0 ? false : _c;
+
+  var _d = (0, _react.useState)(0),
+      active = _d[0],
+      setActive = _d[1];
+
+  var _e = (0, _react.useState)(true),
+      loading = _e[0],
+      setLoading = _e[1];
+
+  var flag = true;
+
+  var handleNext = function handleNext(e) {
+    e.stopPropagation();
+    setActive(function (prev) {
+      return (prev + 1) % data.length;
+    });
+  };
+
+  var handlePrev = function handlePrev(e) {
+    e.stopPropagation();
+    setActive(function (prev) {
+      return (prev - 1 + data.length) % data.length;
+    });
+  };
+
+  var isActive = function isActive(index) {
+    return index === active;
+  };
+
+  var isShow = function isShow(index) {
+    if (data.length > 3) {
+      var oneShow = 0;
+      var twoShow = 0;
+
+      if (active === 0) {
+        oneShow = data.length - 1;
+        twoShow = active + 1;
+      } else if (active === data.length - 1) {
+        oneShow = active - 1;
+        twoShow = 0;
+      } else {
+        oneShow = active - 1;
+        twoShow = active + 1;
+      }
+
+      return index === oneShow || index === twoShow;
+    } else {
+      return true;
+    }
+  };
+
+  var randomRotateY = function randomRotateY(index) {
+    // return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
+    return index === 0 || index === 1 ? -10 : 10;
+  };
+
+  var handleScroll = function handleScroll(e) {
+    if (flag) {
+      flag = false; // 统一处理 delta 值
+
+      var delta = 0;
+
+      if (e.deltaY) {
+        delta = e.deltaY; // 现代浏览器
+      } else if (e.wheelDelta) {
+        delta = -e.wheelDelta / 40; // 旧版浏览器，调整方向和数值
+      } // 判断方向
+
+
+      if (delta > 0) {
+        console.log('向下滚动..');
+        handleNext(e);
+      } else if (delta < 0) {
+        console.log('向上滚动');
+        handlePrev(e);
+      } // 阻止默认滚动行为（如需要）
+
+
+      e.preventDefault();
+      var scrollTimeout_1 = setTimeout(function () {
+        flag = true;
+        clearTimeout(scrollTimeout_1);
+      }, 2000);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (autoplay) {
+      var interval_1 = setInterval(handleNext, 5000);
+      return function () {
+        return clearInterval(interval_1);
+      };
+    } // 监听滚轮事件（推荐：现代浏览器）
+
+
+    document.addEventListener('wheel', handleScroll); // 兼容旧版浏览器（如 IE/旧 WebKit）
+    // document.addEventListener('mousewheel', handleScroll);
+
+    return function () {
+      document.removeEventListener('wheel', handleScroll); // document.removeEventListener('mousewheel', handleScroll);
+    };
+  }, [autoplay]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "productCardModalWrap",
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "content",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+      key: item.offerId,
+      animate: {
+        opacity: isActive(index) ? 1 : isShow(index) ? 0.7 : 0,
+        scale: isActive(index) ? 1 : 0.95,
+        z: isActive(index) ? 0 : -100,
+        rotate: isActive(index) ? 0 : randomRotateY(index),
+        zIndex: isActive(index) ? 999 : data.length + 2 - index,
+        y: isActive(index) ? [0, -80, 0] : 0
+      },
+      className: "card",
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        z: 100,
+        rotate: randomRotateY(index)
+      },
+      initial: {
+        opacity: 0,
+        scale: 0.9,
+        z: -100,
+        rotate: randomRotateY(index)
+      },
+      transition: {
+        duration: 0.4,
+        ease: 'easeInOut'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "bgImg",
+      draggable: false,
+      onLoad: function onLoad() {
+        return setLoading(false);
+      },
+      src: item.cardImgUrl
+    }), !loading && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "absoluteWrap"
+    }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+      key: active,
+      animate: {
+        y: 0,
+        opacity: 1
+      },
+      className: "text",
+      exit: {
+        y: -20,
+        opacity: 0
+      },
+      initial: {
+        y: 20,
+        opacity: 0
+      },
+      transition: {
+        duration: 0.2,
+        ease: 'easeInOut'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: (0, _commonUtil.xssDecode)(item.goodsIntroduce || '')
+      }
+    })), index === active && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "closIcon",
+      color: "#929292",
+      onClick: onClose,
+      size: 22,
+      type: "icon-close"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btnApply",
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)("proDetail-" + item.offerId + "-" + item.productId);
+      }
+    }, "Apply Now", /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#FCD116",
+      size: 20,
+      type: "icon-arrow-right"
+    })), index === active && /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "dotIcon",
+      src: _dotIcon["default"]
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardLeft",
+      onClick: function onClick(e) {
+        return handlePrev(e);
+      }
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardRight",
+      onClick: function onClick(e) {
+        return handleNext(e);
+      }
+    })));
+  }))), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "iconLeft",
+    color: "#929292",
+    onClick: function onClick(e) {
+      return handlePrev(e);
+    },
+    size: 36,
+    type: "icon-circle-down"
+  }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "iconRight",
+    color: "#929292",
+    onClick: function onClick(e) {
+      return handleNext(e);
+    },
+    size: 36,
+    type: "icon-circle-down"
+  }));
+}

package/lib/common/ProductCardModal/index.less

@@ -0,0 +1,131 @@
+.productCardModalWrap {
+  background: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .content {
+    position: relative;
+    width: 50%;
+
+    .card {
+      transform-origin: bottom;
+      inset: 0;
+      width: 100%;
+      height: fit-content;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      cursor: pointer;
+
+      .cardLeft {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+
+      .cardRight {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+      }
+
+      .bgImg {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: 1.5rem;
+        -o-object-position: center;
+        object-position: center;
+        -o-object-fit: cover;
+        object-fit: cover;
+      }
+
+      .closIcon {
+        position: absolute;
+        top: 5%;
+        right: 5%;
+        cursor: pointer;
+        z-index: 3;
+      }
+
+      .dotIcon {
+        width: 28px;
+        position: absolute;
+        bottom: 25px;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .text {
+        position: absolute;
+        top: 20%;
+        right: 10%;
+        width: 35%;
+        height: 42%;
+        overflow-y: auto;
+
+        p {
+          min-height: 1em;
+        }
+      }
+
+      .btnApply {
+        color: #fff;
+        background-color: #CE1126;
+        font-weight: 700;
+        font-size: .3rem;
+        width: fit-content;
+        padding: 10px 24px;
+        border-radius: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        position: absolute;
+        bottom: 25%;
+        left: 55%;
+        z-index: 3;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .iconLeft {
+    transform: rotate(90deg);
+    cursor: pointer;
+    position: absolute;
+    left: 20%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+
+  .iconRight {
+    transform: rotate(-90deg);
+    cursor: pointer;
+    position: absolute;
+    right: 20%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+}

package/lib/common/Toast/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Toast;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./index.less");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Toast(_a) {
+  var message = _a.message,
+      onClose = _a.onClose,
+      duration = _a.duration;
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      onClose();
+    }, duration);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "toastWrap"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, message));
+}

package/lib/common/Toast/index.less

@@ -0,0 +1,29 @@
+.toastWrap {
+  position: fixed;
+  display: flex;
+  top: 40%;
+  left: 20px;
+  right: 20px;
+  z-index: 99999;
+  transform: translateZ(1000px);
+  background-color: #e5f6ea;
+  min-height: 32px;
+  align-items: center;
+  margin-bottom: 15px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 16px;
+  animation: fadeIn .2s linear;
+
+  span {
+    text-overflow: ellipsis;
+    color: #fff;
+    font-weight: 500;
+    font-size: 14px;
+    text-align: center;
+    color: #FFFFFF;
+    line-height: 24px;
+    padding: 15px;
+    letter-spacing: .5px;
+    width: 100%;
+  }
+}

package/lib/common/UrlPicker/index.js

@@ -87,7 +87,7 @@ function (_super) {
         modalConfig = _c.modalConfig; // 弹框选择url不可编辑，需要先清除
 
     var editable = !value || !value.type;
-    var inputName = (value === null || value === void 0 ? void 0 : value.name) || '';
+    var inputName = (value === null || value === void 0 ? void 0 : value.name) || (value === null || value === void 0 ? void 0 : value.value) || '';
 
     if ((value === null || value === void 0 ? void 0 : value.type) === _constants.urlTypeMap.ANCHOR) {
       var selectedAnchorIndex = _mobx.store.MPageData.findIndex(function (m) {

package/lib/common/Video/index.js

@@ -375,7 +375,7 @@ var createAliVideo = function createAliVideo(domId, opts) {
               rePlay: false,
               playsinline: true,
               preload: true,
-              controlBarVisibility: 'hover',
+              controlBarVisibility: opts.controlBarHide ? 'never' : 'hover',
               useH5Prism: true,
               skinLayout: skinLayout
             }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", components), _window$Aliplayer), function (player) {
@@ -784,9 +784,11 @@ function (_super) {
     var _a = this.props,
         videoId = _a.videoId,
         opts = _a.opts,
-        play = _a.play;
+        play = _a.play,
+        onClick = _a.onClick;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "video-container"
+      className: "video-container",
+      onClick: onClick
     }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-wrap",
       id: 'video' + videoId