@fonixtree/magic-design 1.0.133 → 1.0.135

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

@@ -213,7 +213,7 @@ function (_super) {
       catgList: [],
       catgChildList: [],
       activeCatgId: null,
-      catgChildImg: '',
+      catgImg: '',
       visible: false,
       relativeLeft: 0
     };
@@ -275,6 +275,7 @@ function (_super) {
               relativeLeft = childRect.left - parentRect.left;
               this.setState({
                 activeCatgId: model.catgId,
+                catgImg: model.imgUrl,
                 visible: true,
                 relativeLeft: relativeLeft
               });
@@ -296,6 +297,7 @@ function (_super) {
             case 2:
               this.setState({
                 activeCatgId: null,
+                catgImg: '',
                 visible: false,
                 relativeLeft: 0
               });
@@ -317,25 +319,6 @@ function (_super) {
           }
         });
       });
-    };
-
-    _this.keyDoFunc = function (data) {
-      data.groupSource.forEach(function (group) {
-        group.newProperty = 'freshKey'; // Reflect.deleteProperty(group, 'text');
-        // Reflect.deleteProperty(group, 'title');
-      });
-    };
-
-    _this.onMouseEnter = function (item) {
-      _this.setState({
-        catgChildImg: item.model.imgUrl
-      });
-    };
-
-    _this.onMouseLeave = function () {
-      _this.setState({
-        catgChildImg: ''
-      });
     }; // 跳转配置
 
 
@@ -399,6 +382,20 @@ function (_super) {
       (0, _coreUtil.clickUrl)(jumpUrl);
     };
 
+    _this.getRealIndex = function (rawIndex, total) {
+      if (rawIndex === 0) return total - 1; // 第一个克隆页对应最后一个真实项
+
+      if (rawIndex === total + 1) return 0; // 最后一个克隆页对应第一个真实项
+
+      return rawIndex - 1; // 中间项索引-1得到真实索引
+    };
+
+    _this.afterChange = function (n) {
+      _this.setState({
+        carouseIndex: n
+      });
+    };
+
     return _this;
   }
 
@@ -442,7 +439,7 @@ function (_super) {
         activeCatgId = _s.activeCatgId,
         visible = _s.visible,
         relativeLeft = _s.relativeLeft,
-        catgChildImg = _s.catgChildImg;
+        catgImg = _s.catgImg;
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -497,11 +494,7 @@ function (_super) {
         key: m.model.catgId,
         onClick: function onClick() {
           return _this.jumpUrlConfig(m.model.catgRela);
-        },
-        onMouseEnter: function onMouseEnter() {
-          return _this.onMouseEnter(m);
-        },
-        onMouseLeave: _this.onMouseLeave
+        }
       }, /*#__PURE__*/_react["default"].createElement("div", null, m.model.catgName), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
         className: "icon_right",
         color: "#CE1126",
@@ -510,7 +503,7 @@ function (_super) {
       }));
     })), /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      src: catgChildImg
+      src: catgImg
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
     }, ((_f = (_e = (_d = data.content) === null || _d === void 0 ? void 0 : _d.icon) === null || _e === void 0 ? void 0 : _e.searchIcon) === null || _f === void 0 ? void 0 : _f.pc) && /*#__PURE__*/_react["default"].createElement("div", {
@@ -537,15 +530,14 @@ function (_super) {
       key: JSON.stringify(data.groupSource),
       ref: this.carouselRef,
       afterChange: function afterChange(n) {
-        return _this.setState({
-          carouseIndex: n
-        });
+        return _this.afterChange(n);
       },
       autoplay: autoplay,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       className: "carousel-img",
-      dots: false
-    }, data.groupSource.map(function (m) {
+      dots: false,
+      infinite: false
+    }, data.groupSource.map(function (m, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: m.id
       }, m.image && m.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
@@ -553,7 +545,7 @@ function (_super) {
         data: m.image,
         imgCover: true,
         isBackground: true
-      }), m.video && /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
+      }), m.video && i === carouseIndex && /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
         data: m
       }));
     })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -1,6 +1,7 @@
 .m-search-dito-pc {
   position: relative;
   width: 100%;
+  background-color: #fff;
 
   .search-bar {
     display: block;
@@ -120,6 +121,10 @@
       display: flex;
       gap: 15px;
       align-items: center;
+
+      .icon-wrap {
+        cursor: pointer;
+      }
     }
   }
 

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

@@ -77,7 +77,7 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: groupId,
     type: 'SLIDE_IMAGE',
-    groupSource: [groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId)],
+    groupSource: [groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId)],
     spacing: {
       pc: {
         paddingTop: 0,

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

@@ -64,10 +64,7 @@ function (_super) {
   __extends(CardItem, _super);
 
   function CardItem() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.state = {};
-    return _this;
+    return _super !== null && _super.apply(this, arguments) || this;
   }
 
   CardItem.prototype.componentDidMount = function () {};
@@ -75,15 +72,21 @@ function (_super) {
   CardItem.prototype.render = function () {
     var _a = this.props,
         data = _a.data,
-        rest = __rest(_a, ["data"]);
+        createModal = _a.createModal,
+        rest = __rest(_a, ["data", "createModal"]);
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
+      className: (0, _classnames["default"])('slide-image-card-item-wrap'),
+      onClick: function onClick() {
+        var _a;
 
-    return /*#__PURE__*/_react["default"].createElement("div", _extends({
-      className: (0, _classnames["default"])('slide-image-card-item-wrap')
+        return createModal(((_a = data.groupName.content.clickUrl) === null || _a === void 0 ? void 0 : _a.value) || []);
+      }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
       data: data
     }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       data: data.groupName
-    }));
+    })));
   };
 
   CardItem.defaultProps = {

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

@@ -1 +1,3 @@
-.slide-image-card-item-wrap {}
+.slide-image-card-item-wrap {
+  cursor: pointer;
+}

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

@@ -26,7 +26,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ParallaxScroll(_a) {
   var source = _a.source,
       xGap = _a.xGap,
-      yGap = _a.yGap;
+      yGap = _a.yGap,
+      createModal = _a.createModal;
 
   var _b = (0, _react.useState)(0),
       colOneScrollY = _b[0],
@@ -104,6 +105,7 @@ function ParallaxScroll(_a) {
         y: translateFirst
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
+      createModal: createModal,
       data: el
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
@@ -119,6 +121,7 @@ function ParallaxScroll(_a) {
         y: translateSecond
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
+      createModal: createModal,
       data: el
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
@@ -134,6 +137,7 @@ function ParallaxScroll(_a) {
         y: translateThird
       }
     }, /*#__PURE__*/_react["default"].createElement(_CardItem["default"], {
+      createModal: createModal,
       data: el
     }));
   }))));

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

@@ -0,0 +1,179 @@
+"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 _common = require("../../../../../../../common");
+
+require("./index.less");
+
+var _coreUtil = require("../../../../../../../utils/coreUtil");
+
+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 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 randomRotateY = function randomRotateY() {
+    return Math.floor(Math.random() * 21) - 10;
+  };
+
+  (0, _react.useEffect)(function () {
+    if (autoplay) {
+      var interval_1 = setInterval(handleNext, 5000);
+      return function () {
+        return clearInterval(interval_1);
+      };
+    }
+  }, [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 : 0.7,
+        scale: isActive(index) ? 1 : 0.95,
+        z: isActive(index) ? 0 : -100,
+        rotate: isActive(index) ? 0 : randomRotateY(),
+        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()
+      },
+      initial: {
+        opacity: 0,
+        scale: 0.9,
+        z: -100,
+        rotate: randomRotateY()
+      },
+      transition: {
+        duration: 0.4,
+        ease: 'easeInOut'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "bgImg",
+      draggable: false,
+      onLoad: function onLoad() {
+        return setLoading(false);
+      },
+      src: item.imgUrl
+    }), !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: item.goodsIntroduce
+      }
+    })), index === active && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      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(_common.Iconfont, {
+      color: "#FCD116",
+      size: 20,
+      type: "icon-arrow-right"
+    })), index === active && /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "dotIcon",
+      src: _dotIcon["default"]
+    })));
+  }))), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    className: "iconLeft",
+    color: "#929292",
+    onClick: function onClick(e) {
+      return handlePrev(e);
+    },
+    size: 36,
+    type: "icon-circle-down"
+  }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    className: "iconRight",
+    color: "#929292",
+    onClick: function onClick(e) {
+      return handleNext(e);
+    },
+    size: 36,
+    type: "icon-circle-down"
+  }));
+}

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

@@ -0,0 +1,106 @@
+.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: 60%;
+
+    .card {
+      transform-origin: bottom;
+      inset: 0;
+      width: 100%;
+      height: fit-content;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+
+      .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;
+      }
+
+      .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;
+      }
+
+      .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%;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .iconLeft {
+    transform: rotate(90deg);
+    cursor: pointer;
+    position: absolute;
+    left: 8%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+
+  .iconRight {
+    transform: rotate(-90deg);
+    cursor: pointer;
+    position: absolute;
+    right: 8%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+}

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

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _commonUtil = require("../../../../../../../utils/commonUtil");
+var _NewImg = _interopRequireDefault(require("../../../../../../../common/NewImg"));
 
 require("./index.less");
 
@@ -39,41 +39,18 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var Layout1 =
+var VideoItem =
 /** @class */
 function (_super) {
-  __extends(Layout1, _super);
+  __extends(VideoItem, _super);
 
-  function Layout1() {
+  function VideoItem() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
       playing: false
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
-    /** 视频ref映射 */
-
-    _this.videoRefMap = {};
-
-    _this.playOrPause = function (group) {
-      (0, _commonUtil.ensure)(function () {
-        if (_this.videoRefMap[group.id].playing) {
-          _this.videoRefMap[group.id].playing = false;
-
-          _this.videoRefMap[group.id].el.player.pause();
-        } else {
-          if (group.video.playPosition == 'Popup') {
-            _this.videoRefMap[group.id].el.fullPlay('pc');
-          } else {
-            _this.videoRefMap[group.id].playing = true;
-
-            _this.videoRefMap[group.id].el.player.play();
-          }
-        }
-
-        _this.setState({});
-      });
-    };
 
     _this.onMouseEnter = function () {
       _this.videoRef.current.play();
@@ -94,7 +71,7 @@ function (_super) {
     return _this;
   }
 
-  Layout1.prototype.render = function () {
+  VideoItem.prototype.render = function () {
     var _a, _b, _c, _d, _e;
 
     var data = this.props.data;
@@ -105,17 +82,25 @@ function (_super) {
       onMouseLeave: this.onMouseLeave
     }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
-      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl
-    }), !playing && ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+      loop: true,
+      muted: true,
+      playsinline: true
+    }, /*#__PURE__*/_react["default"].createElement("source", {
+      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
+      type: "video/mp4"
+    })), ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement(_NewImg["default"], {
       className: "video-cover-img",
+      lazy: true,
       src: (_e = (_d = data.overilay) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.pcImgSrc,
-      alt: ""
+      style: {
+        visibility: playing ? 'hidden' : 'visible'
+      }
     }));
   };
 
-  Layout1.defaultProps = {};
-  return Layout1;
+  VideoItem.defaultProps = {};
+  return VideoItem;
 }(_react["default"].Component);
 
-var _default = Layout1;
+var _default = VideoItem;
 exports["default"] = _default;