@fonixtree/magic-design 2.0.42 → 2.0.44

package/es/composite-comp/bol/components/Banner/mobile/index.js

@@ -211,7 +211,10 @@ function (_super) {
         onClick: function onClick() {
           /** PTO 定制GA */
           if (window.magicDesign.pushGA) {
-            window.magicDesign.pushGA({}, 'select_promotion');
+            window.magicDesign.pushGA({}, 'select_promotion', {
+              event_label: (0, _ConfigPanel.getSecondConfigName)(data, item.id),
+              promotion_name: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+            });
           }
         },
         onMouseEnter: _this.mouseEnterWrap,

package/es/composite-comp/bol/components/Wallet/mobile/index.js

@@ -7,10 +7,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactSlick = _interopRequireDefault(require("react-slick"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react2 = require("swiper/react");
+
+var _modules = require("swiper/modules");
+
 var _components = require("../../../../../meta-comp/components");
 
 var _mobx = require("../../../../../mobx");
@@ -27,12 +29,14 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
+require("swiper/css");
+
+require("swiper/css/effect-cards");
+
 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 || {
@@ -243,7 +247,7 @@ function (_super) {
       sliderIndex: 0,
       userWalletData: {}
     };
-    _this.sliderRef = null;
+    _this.swiperRef = null;
     _this.destroy = null;
 
     _this.getMyWalletData = function () {
@@ -306,12 +310,12 @@ function (_super) {
               //   defaultShowWallet: 'Balance',
               // };
 
-              if (data.customize.layout === 'layout2' && this.sliderRef) {
+              if (data.customize.layout === 'layout2' && this.swiperRef) {
                 defaultShowIndex_1 = 0;
                 data.groupSource.forEach(function (f, i) {
                   if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
                 });
-                this.sliderRef.slickGoTo(defaultShowIndex_1);
+                this.swiperRef.slideTo(defaultShowIndex_1);
               }
 
               bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
@@ -338,7 +342,7 @@ function (_super) {
                   amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userBalance),
                   btnText: 'Social Commerce'
                 }, _b[_constants.walletType.CENDUIT] = {
-                  amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userPoint),
+                  amount: userPoint === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userPoint),
                   btnText: 'Cenduit Mall'
                 }, _b)
               });
@@ -384,7 +388,7 @@ function (_super) {
       });
 
       if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
-        _this.sliderRef.slickGoTo(nextIndex);
+        _this.swiperRef.slideTo(nextIndex);
       }
     };
 
@@ -396,26 +400,30 @@ function (_super) {
 
     this.getMyWalletData();
     this.destroy = (0, _mobx.autorun)(function () {
-      if (_this.props.data.customize.layout === 'layout2' && _this.sliderRef) {
+      var _a;
+
+      if (_this.props.data.customize.layout === 'layout2' && _this.swiperRef) {
         _this.sliderGoTo(_this.props.data.groupSource);
         /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
 
         if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-          _this.sliderRef.slickPause();
+          (_a = _this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
         }
       }
     });
   };
 
   WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
-    if (nextProps.data.customize.layout === 'layout2' && this.sliderRef) {
+    var _a, _b;
+
+    if (nextProps.data.customize.layout === 'layout2' && this.swiperRef) {
       this.sliderGoTo(nextProps.data.groupSource);
 
       if (nextProps.data.setting.autoplay.open) {
-        this.sliderRef.slickPlay();
+        (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.start();
       } else {
-        this.sliderRef.slickPause();
+        (_b = this.swiperRef.autoplay) === null || _b === void 0 ? void 0 : _b.stop();
       }
     }
   };
@@ -423,39 +431,24 @@ function (_super) {
   WalletMobile.prototype.render = function () {
     var _this = this;
 
+    var _a, _b, _c, _d, _e, _f, _g;
+
     var data = this.props.data;
     var sliderIndex = this.state.sliderIndex;
     var colNum = data.customize.rowNum;
-    var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
     if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-      autoplay = false;
+      (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
     }
 
-    var settings = {
-      className: 'slider-wrap',
-      arrows: false,
-      dots: false,
-      autoplay: autoplay,
-      autoplaySpeed: data.setting.autoplay.interval * 1000,
-      speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      beforeChange: function beforeChange(oldIndex, newIndex) {
-        _this.setState({
-          sliderIndex: newIndex
-        });
-      }
-    };
     var navStyle = {
-      fontSize: (0, _commonUtil.convertToRem)(data.setting.navigation.size),
-      color: data.setting.navigation.color
+      fontSize: (0, _commonUtil.convertToRem)((_c = (_b = data.setting) === null || _b === void 0 ? void 0 : _b.navigation) === null || _c === void 0 ? void 0 : _c.size),
+      color: (_e = (_d = data.setting) === null || _d === void 0 ? void 0 : _d.navigation) === null || _e === void 0 ? void 0 : _e.color
     };
 
     var getItemContent = function getItemContent(item, preItem, nextItem) {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 
       var data = _this.props.data;
       var userWalletData = _this.state.userWalletData;
@@ -476,47 +469,47 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "text-content",
         style: _bgStyle
-      }, item.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      }, ((_a = item.title) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "title",
         data: item.title,
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         })
-      }), item.amount.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      }), ((_b = item.amount) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "amount",
         data: __assign(__assign({}, item.amount), {
-          text: (_a = userWalletData[item.sourceType]) === null || _a === void 0 ? void 0 : _a.amount
+          text: (_c = userWalletData[item.sourceType]) === null || _c === void 0 ? void 0 : _c.amount
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
         readonly: true
-      }), item.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      }), ((_d = item.text) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "text",
         data: __assign(__assign({}, item.text), {
-          text: ((_b = userWalletData[item.sourceType]) === null || _b === void 0 ? void 0 : _b.text) || 'Make money and shop on Cendol!'
+          text: ((_e = userWalletData[item.sourceType]) === null || _e === void 0 ? void 0 : _e.text) || 'Make money and shop on Cendol!'
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
         readonly: true
-      }), item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+      }), ((_f = item.button) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "wallet-btn",
         data: __assign(__assign({}, item.button), {
-          text: ((_c = userWalletData[item.sourceType]) === null || _c === void 0 ? void 0 : _c.btnText) || 'Lets Go!'
+          text: ((_g = userWalletData[item.sourceType]) === null || _g === void 0 ? void 0 : _g.btnText) || 'Lets Go!'
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         })
-      }), data.customize.layout === 'layout2' && item.peek.open && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }), data.customize.layout === 'layout2' && ((_h = item.peek) === null || _h === void 0 ? void 0 : _h.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "peek left"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_d = preItem === null || preItem === void 0 ? void 0 : preItem.title) === null || _d === void 0 ? void 0 : _d.text) || '')
+          text: "" + (((_j = preItem === null || preItem === void 0 ? void 0 : preItem.title) === null || _j === void 0 ? void 0 : _j.text) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -525,7 +518,7 @@ function (_super) {
         readonly: true
       }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_e = userWalletData[preItem === null || preItem === void 0 ? void 0 : preItem.sourceType]) === null || _e === void 0 ? void 0 : _e.amount) || '')
+          text: "" + (((_k = userWalletData[preItem === null || preItem === void 0 ? void 0 : preItem.sourceType]) === null || _k === void 0 ? void 0 : _k.amount) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -536,7 +529,7 @@ function (_super) {
         className: "peek right"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_f = nextItem === null || nextItem === void 0 ? void 0 : nextItem.title) === null || _f === void 0 ? void 0 : _f.text) || '')
+          text: "" + (((_l = nextItem === null || nextItem === void 0 ? void 0 : nextItem.title) === null || _l === void 0 ? void 0 : _l.text) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -545,7 +538,7 @@ function (_super) {
         readonly: true
       }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_g = userWalletData[nextItem === null || nextItem === void 0 ? void 0 : nextItem.sourceType]) === null || _g === void 0 ? void 0 : _g.amount) || '')
+          text: "" + (((_m = userWalletData[nextItem === null || nextItem === void 0 ? void 0 : nextItem.sourceType]) === null || _m === void 0 ? void 0 : _m.amount) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -565,42 +558,54 @@ function (_super) {
       style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
       })
-    }, data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
+    }, data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap",
         style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
         })
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item));
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       className: "carousel-layout"
     }, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
-        return _this.sliderRef.slickPrev();
+        return _this.swiperRef.slidePrev();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
-      ref: function ref(slider) {
-        return _this.sliderRef = slider;
-      }
-    }, settings), data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
-      return /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
+      autoplay: {
+        delay: ((_g = (_f = data.setting) === null || _f === void 0 ? void 0 : _f.autoplay) === null || _g === void 0 ? void 0 : _g.interval) * 1000
+      },
+      effect: "cards",
+      loop: true,
+      modules: [_modules.EffectCards, _modules.Autoplay],
+      onSlideChange: function onSlideChange(swiper) {
+        return _this.setState({
+          sliderIndex: swiper.realIndex || 0
+        });
+      },
+      onSwiper: function onSwiper(swiper) {
+        return _this.swiperRef = swiper;
+      },
+      slidesPerView: 1
+    }, data.groupSource.map(function (item, index) {
+      var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
+      var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
+      var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
+      var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, null, /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap"
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item, preItem, nextItem)));
     })), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-right",
       onClick: function onClick() {
-        return _this.sliderRef.slickNext();
+        return _this.swiperRef.slideNext();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
@@ -615,7 +620,7 @@ function (_super) {
           active: i == sliderIndex
         }),
         onClick: function onClick() {
-          return _this.sliderRef.slickGoTo(i);
+          return _this.swiperRef.slideTo(i);
         },
         style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,

package/es/composite-comp/bol/components/Wallet/mobile/index.less

@@ -8,14 +8,14 @@
   justify-content: center;
   flex-wrap: wrap;
   border-radius: 0.2rem;
-  padding: 0.4rem 0.8rem 1.8rem 0.8rem;
+  padding: 0.2rem 0.8rem 1.3rem 0.8rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .wallet-btn {
-  margin-top: 0.4rem;
+  margin-top: 0.2rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .peek {
   position: absolute;
-  bottom: 0.32rem;
+  bottom: 0.16rem;
   width: 1.2rem !important;
   white-space: nowrap;
 }
@@ -28,9 +28,10 @@
 .m-Wallet-mobile .column-layout {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 }
 .m-Wallet-mobile .column-layout .text-content {
-  padding: 0.2rem 0 0.4rem 0;
+  padding: 0.2rem 0 0.2rem 0;
 }
 .m-Wallet-mobile .column-layout .text-content .wallet-btn {
   margin-top: 0.2rem;
@@ -44,6 +45,10 @@
 .m-Wallet-mobile .column-layout .text-content .peek.right {
   right: 0.32rem;
 }
+.m-Wallet-mobile .carousel-layout {
+  position: relative;
+  min-height: 4.8rem;
+}
 .m-Wallet-mobile .carousel-layout .slick-track {
   display: flex;
   justify-content: center;
@@ -65,14 +70,16 @@
   bottom: 0;
   margin: auto;
   cursor: pointer;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban {
   position: absolute;
   width: 100%;
-  bottom: 0.8rem;
+  bottom: 0.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban .ban {
   font-size: 0.16rem;

package/lib/composite-comp/bol/components/Banner/mobile/index.js

@@ -211,7 +211,10 @@ function (_super) {
         onClick: function onClick() {
           /** PTO 定制GA */
           if (window.magicDesign.pushGA) {
-            window.magicDesign.pushGA({}, 'select_promotion');
+            window.magicDesign.pushGA({}, 'select_promotion', {
+              event_label: (0, _ConfigPanel.getSecondConfigName)(data, item.id),
+              promotion_name: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+            });
           }
         },
         onMouseEnter: _this.mouseEnterWrap,

package/lib/composite-comp/bol/components/Wallet/mobile/index.js

@@ -7,10 +7,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactSlick = _interopRequireDefault(require("react-slick"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react2 = require("swiper/react");
+
+var _modules = require("swiper/modules");
+
 var _components = require("../../../../../meta-comp/components");
 
 var _mobx = require("../../../../../mobx");
@@ -27,12 +29,14 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
+require("swiper/css");
+
+require("swiper/css/effect-cards");
+
 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 || {
@@ -243,7 +247,7 @@ function (_super) {
       sliderIndex: 0,
       userWalletData: {}
     };
-    _this.sliderRef = null;
+    _this.swiperRef = null;
     _this.destroy = null;
 
     _this.getMyWalletData = function () {
@@ -306,12 +310,12 @@ function (_super) {
               //   defaultShowWallet: 'Balance',
               // };
 
-              if (data.customize.layout === 'layout2' && this.sliderRef) {
+              if (data.customize.layout === 'layout2' && this.swiperRef) {
                 defaultShowIndex_1 = 0;
                 data.groupSource.forEach(function (f, i) {
                   if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
                 });
-                this.sliderRef.slickGoTo(defaultShowIndex_1);
+                this.swiperRef.slideTo(defaultShowIndex_1);
               }
 
               bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
@@ -338,7 +342,7 @@ function (_super) {
                   amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userBalance),
                   btnText: 'Social Commerce'
                 }, _b[_constants.walletType.CENDUIT] = {
-                  amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userPoint),
+                  amount: userPoint === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userPoint),
                   btnText: 'Cenduit Mall'
                 }, _b)
               });
@@ -384,7 +388,7 @@ function (_super) {
       });
 
       if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
-        _this.sliderRef.slickGoTo(nextIndex);
+        _this.swiperRef.slideTo(nextIndex);
       }
     };
 
@@ -396,26 +400,30 @@ function (_super) {
 
     this.getMyWalletData();
     this.destroy = (0, _mobx.autorun)(function () {
-      if (_this.props.data.customize.layout === 'layout2' && _this.sliderRef) {
+      var _a;
+
+      if (_this.props.data.customize.layout === 'layout2' && _this.swiperRef) {
         _this.sliderGoTo(_this.props.data.groupSource);
         /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
 
         if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-          _this.sliderRef.slickPause();
+          (_a = _this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
         }
       }
     });
   };
 
   WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
-    if (nextProps.data.customize.layout === 'layout2' && this.sliderRef) {
+    var _a, _b;
+
+    if (nextProps.data.customize.layout === 'layout2' && this.swiperRef) {
       this.sliderGoTo(nextProps.data.groupSource);
 
       if (nextProps.data.setting.autoplay.open) {
-        this.sliderRef.slickPlay();
+        (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.start();
       } else {
-        this.sliderRef.slickPause();
+        (_b = this.swiperRef.autoplay) === null || _b === void 0 ? void 0 : _b.stop();
       }
     }
   };
@@ -423,39 +431,24 @@ function (_super) {
   WalletMobile.prototype.render = function () {
     var _this = this;
 
+    var _a, _b, _c, _d, _e, _f, _g;
+
     var data = this.props.data;
     var sliderIndex = this.state.sliderIndex;
     var colNum = data.customize.rowNum;
-    var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
     if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-      autoplay = false;
+      (_a = this.swiperRef.autoplay) === null || _a === void 0 ? void 0 : _a.stop();
     }
 
-    var settings = {
-      className: 'slider-wrap',
-      arrows: false,
-      dots: false,
-      autoplay: autoplay,
-      autoplaySpeed: data.setting.autoplay.interval * 1000,
-      speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      beforeChange: function beforeChange(oldIndex, newIndex) {
-        _this.setState({
-          sliderIndex: newIndex
-        });
-      }
-    };
     var navStyle = {
-      fontSize: (0, _commonUtil.convertToRem)(data.setting.navigation.size),
-      color: data.setting.navigation.color
+      fontSize: (0, _commonUtil.convertToRem)((_c = (_b = data.setting) === null || _b === void 0 ? void 0 : _b.navigation) === null || _c === void 0 ? void 0 : _c.size),
+      color: (_e = (_d = data.setting) === null || _d === void 0 ? void 0 : _d.navigation) === null || _e === void 0 ? void 0 : _e.color
     };
 
     var getItemContent = function getItemContent(item, preItem, nextItem) {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 
       var data = _this.props.data;
       var userWalletData = _this.state.userWalletData;
@@ -476,47 +469,47 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "text-content",
         style: _bgStyle
-      }, item.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      }, ((_a = item.title) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "title",
         data: item.title,
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         })
-      }), item.amount.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      }), ((_b = item.amount) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "amount",
         data: __assign(__assign({}, item.amount), {
-          text: (_a = userWalletData[item.sourceType]) === null || _a === void 0 ? void 0 : _a.amount
+          text: (_c = userWalletData[item.sourceType]) === null || _c === void 0 ? void 0 : _c.amount
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
         readonly: true
-      }), item.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      }), ((_d = item.text) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         className: "text",
         data: __assign(__assign({}, item.text), {
-          text: ((_b = userWalletData[item.sourceType]) === null || _b === void 0 ? void 0 : _b.text) || 'Make money and shop on Cendol!'
+          text: ((_e = userWalletData[item.sourceType]) === null || _e === void 0 ? void 0 : _e.text) || 'Make money and shop on Cendol!'
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
         readonly: true
-      }), item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+      }), ((_f = item.button) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "wallet-btn",
         data: __assign(__assign({}, item.button), {
-          text: ((_c = userWalletData[item.sourceType]) === null || _c === void 0 ? void 0 : _c.btnText) || 'Lets Go!'
+          text: ((_g = userWalletData[item.sourceType]) === null || _g === void 0 ? void 0 : _g.btnText) || 'Lets Go!'
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         })
-      }), data.customize.layout === 'layout2' && item.peek.open && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }), data.customize.layout === 'layout2' && ((_h = item.peek) === null || _h === void 0 ? void 0 : _h.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "peek left"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_d = preItem === null || preItem === void 0 ? void 0 : preItem.title) === null || _d === void 0 ? void 0 : _d.text) || '')
+          text: "" + (((_j = preItem === null || preItem === void 0 ? void 0 : preItem.title) === null || _j === void 0 ? void 0 : _j.text) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -525,7 +518,7 @@ function (_super) {
         readonly: true
       }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_e = userWalletData[preItem === null || preItem === void 0 ? void 0 : preItem.sourceType]) === null || _e === void 0 ? void 0 : _e.amount) || '')
+          text: "" + (((_k = userWalletData[preItem === null || preItem === void 0 ? void 0 : preItem.sourceType]) === null || _k === void 0 ? void 0 : _k.amount) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -536,7 +529,7 @@ function (_super) {
         className: "peek right"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_f = nextItem === null || nextItem === void 0 ? void 0 : nextItem.title) === null || _f === void 0 ? void 0 : _f.text) || '')
+          text: "" + (((_l = nextItem === null || nextItem === void 0 ? void 0 : nextItem.title) === null || _l === void 0 ? void 0 : _l.text) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -545,7 +538,7 @@ function (_super) {
         readonly: true
       }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
         data: __assign(__assign({}, item.peek), {
-          text: "" + (((_g = userWalletData[nextItem === null || nextItem === void 0 ? void 0 : nextItem.sourceType]) === null || _g === void 0 ? void 0 : _g.amount) || '')
+          text: "" + (((_m = userWalletData[nextItem === null || nextItem === void 0 ? void 0 : nextItem.sourceType]) === null || _m === void 0 ? void 0 : _m.amount) || '')
         }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
@@ -565,42 +558,54 @@ function (_super) {
       style: (0, _commonUtil.pxToRem)({
         gap: MOBILE_IMG_SIZE[colNum].gap
       })
-    }, data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
+    }, data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap",
         style: (0, _commonUtil.pxToRem)({
           width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
         })
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item));
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       className: "carousel-layout"
     }, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
-        return _this.sliderRef.slickPrev();
+        return _this.swiperRef.slidePrev();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
-      ref: function ref(slider) {
-        return _this.sliderRef = slider;
-      }
-    }, settings), data.groupSource.map(function (item, index) {
-      var preItem = index === 0 ? {} : data.groupSource[index - 1];
-      var nextItem = index === data.groupSource.length ? {} : data.groupSource[index + 1];
-      return /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
+      autoplay: {
+        delay: ((_g = (_f = data.setting) === null || _f === void 0 ? void 0 : _f.autoplay) === null || _g === void 0 ? void 0 : _g.interval) * 1000
+      },
+      effect: "cards",
+      loop: true,
+      modules: [_modules.EffectCards, _modules.Autoplay],
+      onSlideChange: function onSlideChange(swiper) {
+        return _this.setState({
+          sliderIndex: swiper.realIndex || 0
+        });
+      },
+      onSwiper: function onSwiper(swiper) {
+        return _this.swiperRef = swiper;
+      },
+      slidesPerView: 1
+    }, data.groupSource.map(function (item, index) {
+      var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
+      var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
+      var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
+      var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, null, /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "item-wrap"
-      }, getItemContent(item, preItem, nextItem));
+      }, getItemContent(item, preItem, nextItem)));
     })), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-right",
       onClick: function onClick() {
-        return _this.sliderRef.slickNext();
+        return _this.swiperRef.slideNext();
       },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn,
@@ -615,7 +620,7 @@ function (_super) {
           active: i == sliderIndex
         }),
         onClick: function onClick() {
-          return _this.sliderRef.slickGoTo(i);
+          return _this.swiperRef.slideTo(i);
         },
         style: (0, _commonUtil.pxToRem)({
           backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,

package/lib/composite-comp/bol/components/Wallet/mobile/index.less

@@ -8,14 +8,14 @@
   justify-content: center;
   flex-wrap: wrap;
   border-radius: 0.2rem;
-  padding: 0.4rem 0.8rem 1.8rem 0.8rem;
+  padding: 0.2rem 0.8rem 1.3rem 0.8rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .wallet-btn {
-  margin-top: 0.4rem;
+  margin-top: 0.2rem;
 }
 .m-Wallet-mobile .item-wrap .text-content .peek {
   position: absolute;
-  bottom: 0.32rem;
+  bottom: 0.16rem;
   width: 1.2rem !important;
   white-space: nowrap;
 }
@@ -28,9 +28,10 @@
 .m-Wallet-mobile .column-layout {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 }
 .m-Wallet-mobile .column-layout .text-content {
-  padding: 0.2rem 0 0.4rem 0;
+  padding: 0.2rem 0 0.2rem 0;
 }
 .m-Wallet-mobile .column-layout .text-content .wallet-btn {
   margin-top: 0.2rem;
@@ -44,6 +45,10 @@
 .m-Wallet-mobile .column-layout .text-content .peek.right {
   right: 0.32rem;
 }
+.m-Wallet-mobile .carousel-layout {
+  position: relative;
+  min-height: 4.8rem;
+}
 .m-Wallet-mobile .carousel-layout .slick-track {
   display: flex;
   justify-content: center;
@@ -65,14 +70,16 @@
   bottom: 0;
   margin: auto;
   cursor: pointer;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban {
   position: absolute;
   width: 100%;
-  bottom: 0.8rem;
+  bottom: 0.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 10;
 }
 .m-Wallet-mobile .carousel-layout .swiper-ban .ban {
   font-size: 0.16rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.42",
+  "version": "2.0.44",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -41,7 +41,8 @@
     "replace": "^1.2.1",
     "shortid": "^2.2.16",
     "slick-carousel": "^1.8.1",
-    "spark-md5": "^3.0.2"
+    "spark-md5": "^3.0.2",
+    "swiper": "^11.0.1"
   },
   "peerDependencies": {
     "react": ">=16.11.0",