@fonixtree/magic-design 1.0.149 → 1.0.151

package/es/common/ProductCardModal/index.js

@@ -160,6 +160,16 @@ function ProductCardModal(_a) {
       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",

package/es/common/ProductCardModal/index.less

@@ -25,6 +25,25 @@
       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;
@@ -86,7 +105,7 @@
     transform: rotate(90deg);
     cursor: pointer;
     position: absolute;
-    left: 8%;
+    left: 20%;
     top: 0;
     bottom: 0;
     margin: auto;
@@ -97,7 +116,7 @@
     transform: rotate(-90deg);
     cursor: pointer;
     position: absolute;
-    right: 8%;
+    right: 20%;
     top: 0;
     bottom: 0;
     margin: auto;

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

@@ -21,6 +21,8 @@ var _common = require("../../../../../common");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _businessUtil = require("../../../../../utils/businessUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 require("slick-carousel/slick/slick.css");
@@ -234,7 +236,8 @@ function (_super) {
       visible: false,
       relativeLeft: 0,
       logVisible: false,
-      userInfo: {}
+      userInfo: {},
+      cartNum: 0
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -468,6 +471,43 @@ function (_super) {
       });
     };
 
+    _this.getCartCount = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var num, res;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              num = 0;
+              if (!(0, _commonUtil.isLogin)()) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/carts/num', {}, 'GET')];
+
+            case 1:
+              res = _a.sent();
+              num = res.num;
+              return [3
+              /*break*/
+              , 3];
+
+            case 2:
+              num = (0, _businessUtil.getTempCartCount)();
+              _a.label = 3;
+
+            case 3:
+              this.setState({
+                cartNum: num
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
     return _this;
   }
 
@@ -478,6 +518,7 @@ function (_super) {
       this.getUserInfo();
     }
 
+    this.getCartCount();
     this.getCategory();
     this.destroy = (0, _mobx.autorun)(function () {
       _this.bannerGoto(_this.props.data.groupSource);
@@ -517,7 +558,8 @@ function (_super) {
         relativeLeft = _s.relativeLeft,
         catgImg = _s.catgImg,
         logVisible = _s.logVisible,
-        userInfo = _s.userInfo;
+        userInfo = _s.userInfo,
+        cartNum = _s.cartNum;
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -602,7 +644,9 @@ function (_super) {
       },
       size: 24,
       type: "icon-ShoppingCartSimple1"
-    })), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
+    }), cartNum > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cart-num"
+    }, cartNum)), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('personal-info', {
         showLogOut: logVisible
       }),

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

@@ -124,6 +124,21 @@
 
       .icon-wrap {
         cursor: pointer;
+        position: relative;
+
+        .cart-num {
+          position: absolute;
+          top: -8px;
+          right: -8px;
+          width: 20px;
+          height: 20px;
+          background-color: #ce1126;
+          color: #fff;
+          border-radius: 50%;
+          font-size: 11px;
+          line-height: 20px;
+          text-align: center;
+        }
       }
 
       .personal-info {

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

@@ -69,8 +69,6 @@ function (_super) {
     return _super !== null && _super.apply(this, arguments) || this;
   }
 
-  CardItem.prototype.componentDidMount = function () {};
-
   CardItem.prototype.render = function () {
     var _a = this.props,
         data = _a.data,
@@ -83,13 +81,15 @@ function (_super) {
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
       data: data
-    }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
-      className: "img-text",
+    }), data.groupName.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "text-perch"
+    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "canvas-ignore",
       data: data.groupName,
       style: {
         pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
       }
-    })));
+    }))));
   };
 
   CardItem.defaultProps = {

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

@@ -1,7 +1,10 @@
 .slide-image-card-item-wrap {
   cursor: pointer;
 
-  .img-text {
+  .video-wrap {}
+
+  .text-perch {
     margin-top: 20px;
+    height: 30px;
   }
 }

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

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -48,9 +50,14 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      playing: false
+      playing: false,
+      inside: false,
+      isNearCenter: false,
+      flag: false,
+      corner: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
+    _this.cardRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -74,36 +81,129 @@ function (_super) {
       _this.setState({
         playing: false
       });
+    }; // 获取元素中心坐标
+
+
+    _this.getCenter = function (element) {
+      var rect = element.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      };
+    }; // 判断是否在中心区域
+
+
+    _this.checkMouseNearCenter = function (e, radius) {
+      if (radius === void 0) {
+        radius = 20;
+      }
+
+      var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
+
+
+      var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
+      return distance <= radius;
+    }; // 判断鼠标方位
+
+
+    _this.getMousePos = function (e) {
+      var rect = e.target.getBoundingClientRect();
+      var x = e.clientX - rect.left; // 鼠标相对于元素的 X 坐标
+
+      var y = e.clientY - rect.top; // 鼠标相对于元素的 Y 坐标
+      // 判断区域
+
+      var isLeft = x < rect.width / 2;
+      var isTop = y < rect.height / 2;
+      var corner = '';
+      if (isLeft && isTop) corner = 'topLeft';else if (!isLeft && isTop) corner = 'topRight';else if (isLeft && !isTop) corner = 'bottomLeft';else corner = 'bottomRight';
+      return corner;
+    };
+
+    _this.handleMouseMove = (0, _lodash["default"])(function (e) {
+      var dom = _this.cardRef.current;
+      var size = parseInt(getComputedStyle(dom).width);
+      var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
+
+      var y = size * 0.5 + e.offsetY * 0.5;
+      dom.style.setProperty('--x', x);
+      dom.style.setProperty('--y', y);
+      dom.style.setProperty('--size', size);
+
+      var isNear = _this.checkMouseNearCenter(e);
+
+      var corner = _this.getMousePos(e);
+
+      if (isNear) _this.setState({
+        flag: true
+      });
+
+      _this.setState({
+        isNearCenter: isNear,
+        inside: true,
+        corner: corner
+      });
+    });
+
+    _this.handleMouseLeave = function () {
+      _this.setState({
+        inside: false,
+        flag: false,
+        corner: ''
+      });
     };
 
     return _this;
   }
 
+  VideoItem.prototype.componentDidMount = function () {
+    var dom = this.cardRef.current;
+    dom.addEventListener('mousemove', this.handleMouseMove);
+    dom.addEventListener('mouseleave', this.handleMouseLeave);
+  };
+
+  VideoItem.prototype.componentWillUnmount = function () {
+    var dom = this.cardRef.current;
+    dom.removeEventListener('mousemove', this.handleMouseMove);
+    dom.removeEventListener('mouseleave', this.handleMouseLeave);
+  };
+
   VideoItem.prototype.render = function () {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
+
+    var _c, _d, _e, _f, _g, _h, _j;
 
     var data = this.props.data;
-    var playing = this.state.playing;
+    var _k = this.state,
+        playing = _k.playing,
+        inside = _k.inside,
+        isNearCenter = _k.isNearCenter,
+        flag = _k.flag,
+        corner = _k.corner;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "slide-image-video-wrap",
+      ref: this.cardRef,
+      className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
+      className: "canvas-ignore",
       loop: true,
       muted: true,
-      playsinline: true
+      playsinline: true,
+      style: {
+        visibility: playing ? 'visible' : 'hidden'
+      }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
+      src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
       type: "video/mp4"
-    })), ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: (0, _classnames["default"])('video-img', {
-        cover: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl
-      }),
-      src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', (_b = {}, _b['canvas-ignore'] = (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl, _b)),
+      src: (_h = (_g = data.overilay) === null || _g === void 0 ? void 0 : _g.content) === null || _h === void 0 ? void 0 : _h.pcImgSrc,
       style: {
-        visibility: playing ? 'hidden' : 'visible'
+        visibility: playing ? 'hidden' : 'visible',
+        zIndex: ((_j = data.video) === null || _j === void 0 ? void 0 : _j.sourceUrl) ? 3 : 0
       }
     }));
   };

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -1,24 +1,86 @@
 .slide-image-video-wrap {
   position: relative;
+  transition: border-radius 0.2s ease;
+  overflow: hidden;
   cursor: pointer;
+  --dx: calc(var(--size) - var(--x));
+  --dy: calc(var(--size) - var(--y));
+
+  // &.hover {
+  // border-radius:
+  //   ~"calc(var(--x)/var(--size)*100%)"
+  //   ~"calc(var(--dx)/var(--size)*100%)"
+  //   ~"calc(var(--dx)/var(--size)*100%)"
+  //   ~"calc(var(--x)/var(--size)*100%) /"
+  //   ~"calc(var(--y)/var(--size)*100%)"
+  //   ~"calc(var(--y)/var(--size)*100%)"
+  //   ~"calc(var(--dy)/var(--size)*100%)"
+  //   ~"calc(var(--dy)/var(--size)*100%)";
+  // }
+
+  &.topLeft {
+    border-radius:
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"0"
+      ~"0"
+      ~"0 /"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"0"
+      ~"0"
+      ~"0";
+  }
+
+  &.topRight {
+    border-radius:
+      ~"0"
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"0"
+      ~"0 /"
+      ~"0"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"0"
+      ~"0";
+  }
+
+  &.bottomRight {
+    border-radius:
+      ~"0"
+      ~"0"
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"0 /"
+      ~"0"
+      ~"0"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"0";
+  }
+
+  &.bottomLeft {
+    border-radius:
+      ~"0"
+      ~"0"
+      ~"0"
+      ~"calc(var(--x)/var(--size)*100%) /"
+      ~"0"
+      ~"0"
+      ~"0"
+      ~"calc(var(--y)/var(--size)*100%)";
+  }
 
   video {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    object-fit: cover;
     width: 100%;
+    height: 100%;
+    z-index: 2;
   }
 
   .video-img {
     width: 100%;
-
-    &.cover {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-    }
+    position: relative;
+    z-index: 0;
   }
 }