@fonixtree/magic-design 0.1.78 → 0.1.80

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

@@ -7,10 +7,18 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("../../../../../meta-comp/components");
 
+var _mobx = require("../../../../../mobx");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _common = require("../../../../../common");
+
 var _constants = require("../../../../../constants");
 
 var _currencyUtil = require("../../../../../utils/currencyUtil");
@@ -227,35 +235,84 @@ function (_super) {
   function WalletMobile() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
-      cashback: 0,
-      credit: 0,
-      bnpl: 0
+      sliderIndex: 0,
+      userWalletData: {}
     };
+    _this.destroy = null;
 
     _this.getMyWalletData = function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var _a, userCreditResps, userCashbackValues, creditObj, bnplObj;
+        var data, _a, userCreditResps, userCashbackValues, userBalance, userPoint, defaultShowWallet, bnplObj, creditObj, B2BObj;
 
-        return __generator(this, function (_b) {
-          switch (_b.label) {
+        var _b;
+
+        var _this = this;
+
+        return __generator(this, function (_c) {
+          switch (_c.label) {
             case 0:
+              data = this.props.data;
               return [4
               /*yield*/
               , (0, _commonUtil.commonFetch)('/designer/v1/h5/mywallet/list', {}, 'GET')];
 
             case 1:
-              _a = _b.sent(), userCreditResps = _a.userCreditResps, userCashbackValues = _a.userCashbackValues;
+              _a = _c.sent(), userCreditResps = _a.userCreditResps, userCashbackValues = _a.userCashbackValues, userBalance = _a.userBalance, userPoint = _a.userPoint, defaultShowWallet = _a.defaultShowWallet;
+              bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 1;
+              });
               creditObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
-                return item.creditId === 2 && [_constants.CREDIT_STATE.APPROVED.KEY, _constants.CREDIT_STATE.LOCKED.KEY].includes(item.state);
+                return item.creditId === 2;
               });
-              bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
-                return item.creditId === 1 && [_constants.CREDIT_STATE.APPROVED.KEY, _constants.CREDIT_STATE.LOCKED.KEY].includes(item.state);
+              B2BObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
+                return item.creditId === 3;
               });
               this.setState({
-                cashback: userCashbackValues === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userCashbackValues),
-                credit: userCreditResps === null ? '****' : creditObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(creditObj.availableAmount) : 'APPLY',
-                bnpl: userCreditResps === null ? '****' : bnplObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(bnplObj.availableAmount) : 'APPLY'
+                userWalletData: (_b = {}, _b[_constants.walletType.BNPL] = {
+                  amount: userCreditResps === null ? '****' : bnplObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(bnplObj.availableAmount) : 'APPLY',
+                  show: userCreditResps === null || [_constants.CREDIT_STATE.APPROVED.KEY].includes(bnplObj === null || bnplObj === void 0 ? void 0 : bnplObj.state)
+                }, _b[_constants.walletType.CREDIT] = {
+                  amount: userCreditResps === null ? '****' : creditObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(creditObj.availableAmount) : 'APPLY',
+                  show: userCreditResps === null || [_constants.CREDIT_STATE.APPROVED.KEY].includes(creditObj === null || creditObj === void 0 ? void 0 : creditObj.state)
+                }, _b[_constants.walletType.B2B] = {
+                  amount: userCreditResps === null ? '****' : B2BObj ? (0, _currencyUtil.formatCurrencyWithSymbol)(B2BObj.availableAmount) : 'APPLY',
+                  text: B2BObj ? 'Add more products to your shop！' : '',
+                  btnText: B2BObj ? 'Procure Product' : '',
+                  show: userCreditResps === null || [_constants.CREDIT_STATE.APPROVED.KEY].includes(B2BObj === null || B2BObj === void 0 ? void 0 : B2BObj.state)
+                }, _b[_constants.walletType.CASHBACK] = {
+                  amount: userCashbackValues === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userCashbackValues),
+                  show: true
+                }, _b[_constants.walletType.BALANCE] = {
+                  amount: userBalance === null ? '****' : (0, _currencyUtil.formatCurrencyWithSymbol)(userBalance),
+                  btnText: userBalance ? 'Social Commerce' : '',
+                  show: true
+                }, _b[_constants.walletType.CENDUIT] = {
+                  amount: userPoint === null ? '****' : userPoint,
+                  btnText: userPoint ? 'CenDuit Mall' : '',
+                  show: true
+                }, _b)
+              }, function () {
+                var _a;
+
+                if (data.customize.layout === 'layout2' && _this.carouselRef) {
+                  var userWalletData_1 = _this.state.userWalletData;
+
+                  var _groupSource = data.groupSource.filter(function (f) {
+                    var _a;
+
+                    return (_a = userWalletData_1[f.sourceType]) === null || _a === void 0 ? void 0 : _a.show;
+                  });
+
+                  var defaultShowIndex_1 = 0;
+
+                  _groupSource.forEach(function (f, i) {
+                    if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
+                  });
+
+                  (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(defaultShowIndex_1);
+                }
               });
               return [2
               /*return*/
@@ -265,88 +322,281 @@ function (_super) {
       });
     };
 
-    _this.getAmount = function (type) {
-      var _a = _this.state,
-          cashback = _a.cashback,
-          credit = _a.credit,
-          bnpl = _a.bnpl;
-      if (type === 'Cashback') return cashback;
-      if (type === 'Credit') return credit;
-      if (type === 'BNPL') return bnpl;
+    _this.mouseEnterBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.hoverColor) {
+        e.target.style.color = data.setting.navigation.hoverColor;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.hoverSize) {
+        e.target.style.fontSize = data.setting.navigation.hoverSize;
+      }
+    };
+
+    _this.mouseLeaveBtn = function (e) {
+      var _a, _b;
+
+      var data = _this.props.data;
+
+      if ((_a = data.setting.navigation) === null || _a === void 0 ? void 0 : _a.color) {
+        e.target.style.color = data.setting.navigation.color;
+      }
+
+      if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
+        e.target.style.fontSize = data.setting.navigation.size;
+      }
+    };
+
+    _this.sliderGoTo = function (groupSource) {
+      var nextIndex = groupSource.findIndex(function (item) {
+        return item.id === _mobx.store.clickedGroup;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
+        _this.carouselRef.current.slideTo(nextIndex);
+      }
     };
 
     return _this;
   }
 
   WalletMobile.prototype.componentDidMount = function () {
+    var _this = this;
+
     this.getMyWalletData();
+    this.destroy = (0, _mobx.autorun)(function () {
+      var _a;
+
+      if (_this.props.data.customize.layout === 'layout2' && _this.carouselRef) {
+        _this.sliderGoTo(_this.props.data.groupSource);
+        /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+        if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+          (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.stopPlay();
+        }
+      }
+    });
+  };
+
+  WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    var _a, _b;
+
+    if (nextProps.data.customize.layout === 'layout2' && this.carouselRef) {
+      this.sliderGoTo(nextProps.data.groupSource);
+
+      if (nextProps.data.setting.autoplay.open) {
+        (_a = this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.startPlay();
+      } else {
+        (_b = this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.stopPlay();
+      }
+    }
   };
 
   WalletMobile.prototype.render = function () {
     var _this = this;
 
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+
     var data = this.props.data;
-    var GAData = (0, _commonUtil.getGAData)(data);
+    var _j = this.state,
+        sliderIndex = _j.sliderIndex,
+        userWalletData = _j.userWalletData;
     var colNum = data.customize.rowNum;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-Wallet-mobile"
-    }, data.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
-      className: "headline",
-      data: data.title.headline
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content column_" + colNum,
-      style: (0, _commonUtil.pxToRem)({
-        gap: MOBILE_IMG_SIZE[colNum].gap
-      })
-    }, data.groupSource.map(function (item) {
-      var _amount = _this.getAmount(item.sourceType);
+    var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: item.id,
-        className: "item-wrap",
-        onMouseEnter: function onMouseEnter() {
-          var _a;
+    var _groupSource = data.groupSource.filter(function (f) {
+      var _a;
 
-          return _this.setState((_a = {}, _a["hover_" + item.id] = true, _a));
-        },
-        onMouseLeave: function onMouseLeave() {
-          var _a;
+      return (_a = userWalletData[f.sourceType]) === null || _a === void 0 ? void 0 : _a.show;
+    });
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
-          return _this.setState((_a = {}, _a["hover_" + item.id] = false, _a));
-        },
-        style: (0, _commonUtil.pxToRem)({
-          width: "calc((100% - " + (0, _commonUtil.convertToRem)(MOBILE_IMG_SIZE[colNum].gap * (colNum - 1)) + ") / " + colNum + ")"
+
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
+    }
+
+    var navStyle = {
+      fontSize: (0, _commonUtil.convertToRem)((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.navigation) === null || _d === void 0 ? void 0 : _d.size),
+      color: (_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.color
+    };
+
+    var getItemContent = function getItemContent(item, preItem, nextItem) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+
+      var data = _this.props.data;
+      var userWalletData = _this.state.userWalletData;
+      var GAData = (0, _commonUtil.getGAData)(data);
+      var _bgStyle = {};
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          _bgStyle.backgroundColor = item.background.color;
+          _bgStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          _bgStyle.backgroundImage = "url(" + item.background.image + ")";
+          _bgStyle.backgroundPosition = 'center';
+          _bgStyle.backgroundSize = 'cover';
+        }
+      }
+
+      item.text.text = ((_a = userWalletData[item.sourceType]) === null || _a === void 0 ? void 0 : _a.text) || 'Make money and shop on Cendol!';
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "text-content",
+        style: _bgStyle
+      }, ((_b = item.title) === null || _b === void 0 ? void 0 : _b.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.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        className: "image",
-        data: item.hover.open && item.hover.image.open && _this.state["hover_" + item.id] ? item.hover.image : item.image,
+      }), ((_c = item.amount) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "amount",
+        data: __assign(__assign({}, item.amount), {
+          text: (_d = userWalletData[item.sourceType]) === null || _d === void 0 ? void 0 : _d.amount
+        }),
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        }) // maxHeight={MOBILE_IMG_SIZE[colNum].maxH}
-        ,
-        maxWidth: "100%"
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "text-content"
-      }, item.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
-        className: "title",
-        data: item.hover.open && item.hover.title.open && _this.state["hover_" + item.id] ? item.hover.title : item.title,
+        }),
+        readonly: true
+      }), ((_e = item.text) === null || _e === void 0 ? void 0 : _e.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        className: "text",
+        data: item.text,
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         })
-      }), item.amount.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
-        className: "amount",
-        data: __assign(__assign({}, item.hover.open && item.hover.amount.open && _this.state["hover_" + item.id] ? item.hover.amount : item.amount), {
-          text: _amount
+      }), ((_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: ((_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' && ((_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: "" + (((_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,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          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,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "peek right"
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          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,
+          groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+        }),
+        readonly: true
+      }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+        data: __assign(__assign({}, item.peek), {
+          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,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
         readonly: true
-      })));
-    })));
+      }))));
+    };
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-Wallet-mobile"
+    }, data.title.headline.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "headline",
+      data: data.title.headline
+    }), data.customize.layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "column-layout column_" + colNum,
+      style: (0, _commonUtil.pxToRem)({
+        gap: MOBILE_IMG_SIZE[colNum].gap
+      })
+    }, _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));
+    })) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "carousel-layout"
+    }, data.setting.navigation.open && _groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "carousel-icon-left",
+      onClick: function onClick() {
+        return _this.carouselRef.current.toPrev();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-left"
+    }), /*#__PURE__*/_react["default"].createElement(_common.CardCarousel, {
+      ref: this.carouselRef,
+      autoplay: autoplay,
+      delay: ((_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.autoplay) === null || _h === void 0 ? void 0 : _h.interval) * 1000,
+      onChange: function onChange(index) {
+        return _this.setState({
+          sliderIndex: index
+        });
+      }
+    }, _groupSource.map(function (item, index) {
+      var preItemFirst = _groupSource.length > 1 ? _groupSource[_groupSource.length - 1] : null;
+      var preItemLast = _groupSource.length > 1 ? _groupSource[0] : null;
+      var preItem = index === 0 ? preItemFirst : _groupSource[index - 1];
+      var nextItem = index === _groupSource.length - 1 ? preItemLast : _groupSource[index + 1];
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.id,
+        className: "item-wrap"
+      }, getItemContent(item, preItem, nextItem));
+    })), data.setting.navigation.open && _groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "carousel-icon-right",
+      onClick: function onClick() {
+        return _this.carouselRef.current.toNext();
+      },
+      onMouseEnter: this.mouseEnterBtn,
+      onMouseLeave: this.mouseLeaveBtn,
+      style: navStyle,
+      type: "icon-right"
+    }), data.setting.dots.open && _groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "swiper-ban"
+    }, _groupSource.map(function (item, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        className: (0, _classnames["default"])('ban', {
+          active: i == sliderIndex
+        }),
+        onClick: function onClick() {
+          return _this.carouselRef.current.slideTo(i);
+        },
+        style: (0, _commonUtil.pxToRem)({
+          backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
+          fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
+        })
+      });
+    }))));
   };
 
   WalletMobile.defaultProps = {

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

@@ -1,27 +1,103 @@
 .m-Wallet-mobile .headline {
   margin-bottom: 0.14rem;
 }
-.m-Wallet-mobile .content {
+.m-Wallet-mobile .item-wrap .text-content {
+  position: relative !important;
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-wrap: wrap;
+  border-radius: 0.2rem;
+  padding: 0.2rem 0.8rem 1.16rem 0.8rem;
+}
+.m-Wallet-mobile .item-wrap .text-content .wallet-btn {
+  margin-top: 0.2rem;
 }
-.m-Wallet-mobile .content.column_3 .item-wrap .title {
-  top: 13%;
+.m-Wallet-mobile .item-wrap .text-content .peek {
+  position: absolute;
+  bottom: 0.16rem;
+  width: 1.2rem !important;
+  white-space: nowrap;
+}
+.m-Wallet-mobile .item-wrap .text-content .peek.left {
+  left: 0.8rem;
 }
-.m-Wallet-mobile .content.column_3 .item-wrap .amount {
-  bottom: 13%;
+.m-Wallet-mobile .item-wrap .text-content .peek.right {
+  right: 0.8rem;
 }
-.m-Wallet-mobile .content .item-wrap {
+.m-Wallet-mobile .column-layout {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.m-Wallet-mobile .column-layout .text-content {
+  padding: 0.2rem 0 0.2rem 0;
+}
+.m-Wallet-mobile .column-layout .text-content .wallet-btn {
+  margin-top: 0.2rem;
+}
+.m-Wallet-mobile .column-layout .text-content .peek {
+  bottom: 0.2rem;
+}
+.m-Wallet-mobile .column-layout .text-content .peek.left {
+  left: 0.32rem;
+}
+.m-Wallet-mobile .column-layout .text-content .peek.right {
+  right: 0.32rem;
+}
+.m-Wallet-mobile .carousel-layout {
   position: relative;
-  border-radius: 0.2rem;
+  min-height: 4.8rem;
 }
-.m-Wallet-mobile .content .item-wrap .image {
-  border-radius: 0.2rem;
-  overflow: hidden;
+.m-Wallet-mobile .carousel-layout .slick-track {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.m-Wallet-mobile .carousel-layout .carousel-icon-left {
+  position: absolute;
+  left: 0.32rem;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: pointer;
+  z-index: 20;
 }
-.m-Wallet-mobile .content .item-wrap .text-content {
+.m-Wallet-mobile .carousel-layout .carousel-icon-right {
   position: absolute;
+  right: 0.32rem;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: pointer;
+  z-index: 20;
+}
+.m-Wallet-mobile .carousel-layout .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 0.72rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+}
+.m-Wallet-mobile .carousel-layout .swiper-ban .ban {
+  font-size: 0.16rem;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background-color: #FFF;
+  cursor: inherit;
+  margin-right: 0.2rem;
+  transition: all 0.5s;
+  opacity: 0.4;
+}
+.m-Wallet-mobile .carousel-layout .swiper-ban .ban:last-child {
+  margin-right: 0;
+}
+.m-Wallet-mobile .carousel-layout .swiper-ban .ban.active {
+  width: 2em;
+  height: 1em;
+  border-radius: 2rem;
+  opacity: 1;
 }

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

@@ -17,8 +17,6 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
 
 var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
-require("./index.less");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {

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

@@ -1,40 +1 @@
-.m-Wallet-pc {
-
-  .headline {
-    margin-bottom: 20px;
-  }
-
-  .content {
-    display: flex;
-    flex-wrap: wrap;
-
-    &.column_3 {
-      .item-wrap {
-        .title {
-          top: 24%;
-        }
-
-        .amount {
-          bottom: 14%;
-        }
-      }
-    }
-
-    .item-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      border-radius: 10px;
-
-      .image {
-        border-radius: 10px;
-        overflow: hidden;
-      }
-
-      .text-content {
-        position: absolute;
-      }
-    }
-  }
-}
+.m-Wallet-pc {}