@fonixtree/magic-design 2.0.45 → 2.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/common/CardCarousel/index.js +171 -0
- package/es/common/CardCarousel/index.less +29 -0
- package/es/composite-comp/bol/components/Wallet/mobile/index.js +32 -42
- package/es/composite-comp/bol/components/Wallet/mobile/index.less +5 -5
- package/es/composite-comp/dito/components/SearchBar/mobile/index.js +1 -1
- package/es/utils/commonUtil.js +52 -2
- package/lib/common/CardCarousel/index.js +171 -0
- package/lib/common/CardCarousel/index.less +29 -0
- package/lib/composite-comp/bol/components/Wallet/mobile/index.js +32 -42
- package/lib/composite-comp/bol/components/Wallet/mobile/index.less +5 -5
- package/lib/composite-comp/dito/components/SearchBar/mobile/index.js +1 -1
- package/lib/utils/commonUtil.js +52 -2
- package/package.json +2 -3
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.CardCarousel = void 0;
|
|
9
|
+
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _commonUtil = require("../../utils/commonUtil");
|
|
17
|
+
|
|
18
|
+
require("./index.less");
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
+
|
|
26
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
27
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
28
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
29
|
+
__proto__: []
|
|
30
|
+
} instanceof Array && function (d, b) {
|
|
31
|
+
d.__proto__ = b;
|
|
32
|
+
} || function (d, b) {
|
|
33
|
+
for (var p in b) {
|
|
34
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
return _extendStatics(d, b);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
return function (d, b) {
|
|
42
|
+
_extendStatics(d, b);
|
|
43
|
+
|
|
44
|
+
function __() {
|
|
45
|
+
this.constructor = d;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
49
|
+
};
|
|
50
|
+
}();
|
|
51
|
+
|
|
52
|
+
var CardCarousel =
|
|
53
|
+
/** @class */
|
|
54
|
+
function (_super) {
|
|
55
|
+
__extends(CardCarousel, _super);
|
|
56
|
+
|
|
57
|
+
function CardCarousel() {
|
|
58
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
59
|
+
|
|
60
|
+
_this.state = {
|
|
61
|
+
index: 0
|
|
62
|
+
};
|
|
63
|
+
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
64
|
+
_this.inter = null;
|
|
65
|
+
|
|
66
|
+
_this.toPrev = function () {
|
|
67
|
+
var children = _this.props.children;
|
|
68
|
+
var index = _this.state.index;
|
|
69
|
+
var preIndex = index > 0 ? index : children.length;
|
|
70
|
+
|
|
71
|
+
_this.slideTo(preIndex - 1);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
_this.toNext = function () {
|
|
75
|
+
var children = _this.props.children;
|
|
76
|
+
var index = _this.state.index;
|
|
77
|
+
var nextIndex = index < children.length - 1 ? index + 1 : 0;
|
|
78
|
+
|
|
79
|
+
_this.slideTo(nextIndex);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
_this.startPlay = function () {
|
|
83
|
+
var _a = _this.props,
|
|
84
|
+
delay = _a.delay,
|
|
85
|
+
autoplay = _a.autoplay;
|
|
86
|
+
|
|
87
|
+
if (!_this.inter && autoplay) {
|
|
88
|
+
_this.inter = setInterval(function () {
|
|
89
|
+
_this.toNext();
|
|
90
|
+
}, delay);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
_this.stopPlay = function () {
|
|
95
|
+
if (_this.inter) {
|
|
96
|
+
clearInterval(_this.inter);
|
|
97
|
+
_this.inter = null;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
_this.slideTo = function (index) {
|
|
102
|
+
var onChange = _this.props.onChange;
|
|
103
|
+
|
|
104
|
+
_this.stopPlay();
|
|
105
|
+
|
|
106
|
+
_this.setState({
|
|
107
|
+
index: index
|
|
108
|
+
}, function () {
|
|
109
|
+
onChange(index);
|
|
110
|
+
|
|
111
|
+
_this.startPlay();
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
return _this;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
CardCarousel.prototype.componentDidMount = function () {
|
|
119
|
+
(0, _commonUtil.onListenTouch)('.cardCarousel', this.toPrev, this.toNext);
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
CardCarousel.prototype.componentWillReceiveProps = function (nextProps) {
|
|
123
|
+
if (nextProps.autoplay) {
|
|
124
|
+
this.startPlay();
|
|
125
|
+
} else {
|
|
126
|
+
this.stopPlay();
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
CardCarousel.prototype.render = function () {
|
|
131
|
+
var index = this.state.index;
|
|
132
|
+
var children = this.props.children;
|
|
133
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
134
|
+
ref: this.carouselRef,
|
|
135
|
+
className: "cardCarousel"
|
|
136
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
137
|
+
className: "content"
|
|
138
|
+
}, _react["default"].Children.map(children, function (child, i) {
|
|
139
|
+
var zIndex = i >= index ? children.length - i + index : index - i;
|
|
140
|
+
var space = children.length - zIndex === 1 ? 5 : children.length - zIndex === 2 ? 10 : 0;
|
|
141
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
142
|
+
className: (0, _classnames["default"])('cardItem', {
|
|
143
|
+
active: i === index
|
|
144
|
+
}),
|
|
145
|
+
style: {
|
|
146
|
+
zIndex: zIndex,
|
|
147
|
+
transform: "translate(" + space + "px, " + space + "px)"
|
|
148
|
+
}
|
|
149
|
+
}, child);
|
|
150
|
+
})));
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
return CardCarousel;
|
|
154
|
+
}(_react.Component);
|
|
155
|
+
|
|
156
|
+
exports.CardCarousel = CardCarousel;
|
|
157
|
+
CardCarousel.propTypes = {
|
|
158
|
+
/** 外层容器 */
|
|
159
|
+
onChange: _propTypes["default"].func,
|
|
160
|
+
autoplay: _propTypes["default"].bool,
|
|
161
|
+
delay: _propTypes["default"].number
|
|
162
|
+
};
|
|
163
|
+
CardCarousel.defaultProps = {
|
|
164
|
+
onChange: function onChange() {
|
|
165
|
+
return null;
|
|
166
|
+
},
|
|
167
|
+
autoplay: false,
|
|
168
|
+
delay: 3000
|
|
169
|
+
};
|
|
170
|
+
var _default = CardCarousel;
|
|
171
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.cardCarousel {
|
|
2
|
+
width: 100%;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
|
|
5
|
+
.content {
|
|
6
|
+
|
|
7
|
+
.cardItem {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 218px;
|
|
10
|
+
border-radius: 10px;
|
|
11
|
+
background-color: pink;
|
|
12
|
+
position: absolute;
|
|
13
|
+
|
|
14
|
+
&.active {
|
|
15
|
+
transition: transform 0.3s;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.btn-left,
|
|
22
|
+
.btn-right {
|
|
23
|
+
width: 120px;
|
|
24
|
+
height: 40px;
|
|
25
|
+
background-color: #fff;
|
|
26
|
+
color: #000;
|
|
27
|
+
margin: 10px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -9,9 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
var _modules = require("swiper/modules");
|
|
12
|
+
var _CardCarousel = _interopRequireDefault(require("src/components/common/CardCarousel"));
|
|
15
13
|
|
|
16
14
|
var _components = require("../../../../../meta-comp/components");
|
|
17
15
|
|
|
@@ -29,10 +27,6 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
|
|
|
29
27
|
|
|
30
28
|
var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
|
|
31
29
|
|
|
32
|
-
require("swiper/css");
|
|
33
|
-
|
|
34
|
-
require("swiper/css/effect-cards");
|
|
35
|
-
|
|
36
30
|
require("./index.less");
|
|
37
31
|
|
|
38
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -243,11 +237,11 @@ function (_super) {
|
|
|
243
237
|
function WalletMobile() {
|
|
244
238
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
245
239
|
|
|
240
|
+
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
246
241
|
_this.state = {
|
|
247
242
|
sliderIndex: 0,
|
|
248
243
|
userWalletData: {}
|
|
249
244
|
};
|
|
250
|
-
_this.swiperRef = null;
|
|
251
245
|
_this.destroy = null;
|
|
252
246
|
|
|
253
247
|
_this.getMyWalletData = function () {
|
|
@@ -256,8 +250,10 @@ function (_super) {
|
|
|
256
250
|
|
|
257
251
|
var _b;
|
|
258
252
|
|
|
259
|
-
|
|
260
|
-
|
|
253
|
+
var _c;
|
|
254
|
+
|
|
255
|
+
return __generator(this, function (_d) {
|
|
256
|
+
switch (_d.label) {
|
|
261
257
|
case 0:
|
|
262
258
|
data = this.props.data;
|
|
263
259
|
return [4
|
|
@@ -265,7 +261,7 @@ function (_super) {
|
|
|
265
261
|
, (0, _commonUtil.commonFetch)('/designer/v1/h5/mywallet/list', {}, 'GET')];
|
|
266
262
|
|
|
267
263
|
case 1:
|
|
268
|
-
_a =
|
|
264
|
+
_a = _d.sent(), userCreditResps = _a.userCreditResps, userCashbackValues = _a.userCashbackValues, userBalance = _a.userBalance, userPoint = _a.userPoint, defaultShowWallet = _a.defaultShowWallet; // const { userCreditResps, userCashbackValues, userBalance, userPoint, defaultShowWallet } = {
|
|
269
265
|
// userCreditResps: [
|
|
270
266
|
// {
|
|
271
267
|
// userCreditId: 1023,
|
|
@@ -310,12 +306,12 @@ function (_super) {
|
|
|
310
306
|
// defaultShowWallet: 'Balance',
|
|
311
307
|
// };
|
|
312
308
|
|
|
313
|
-
if (data.customize.layout === 'layout2' && this.
|
|
309
|
+
if (data.customize.layout === 'layout2' && this.carouselRef) {
|
|
314
310
|
defaultShowIndex_1 = 0;
|
|
315
311
|
data.groupSource.forEach(function (f, i) {
|
|
316
312
|
if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
|
|
317
313
|
});
|
|
318
|
-
this.
|
|
314
|
+
(_c = this.carouselRef.current) === null || _c === void 0 ? void 0 : _c.slideTo(defaultShowIndex_1);
|
|
319
315
|
}
|
|
320
316
|
|
|
321
317
|
bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
|
|
@@ -388,7 +384,7 @@ function (_super) {
|
|
|
388
384
|
});
|
|
389
385
|
|
|
390
386
|
if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
|
|
391
|
-
_this.
|
|
387
|
+
_this.carouselRef.current.slideTo(nextIndex);
|
|
392
388
|
}
|
|
393
389
|
};
|
|
394
390
|
|
|
@@ -402,13 +398,13 @@ function (_super) {
|
|
|
402
398
|
this.destroy = (0, _mobx.autorun)(function () {
|
|
403
399
|
var _a;
|
|
404
400
|
|
|
405
|
-
if (_this.props.data.customize.layout === 'layout2' && _this.
|
|
401
|
+
if (_this.props.data.customize.layout === 'layout2' && _this.carouselRef) {
|
|
406
402
|
_this.sliderGoTo(_this.props.data.groupSource);
|
|
407
403
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
408
404
|
|
|
409
405
|
|
|
410
406
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
411
|
-
(_a = _this.
|
|
407
|
+
(_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.stopPlay();
|
|
412
408
|
}
|
|
413
409
|
}
|
|
414
410
|
});
|
|
@@ -417,13 +413,13 @@ function (_super) {
|
|
|
417
413
|
WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
|
|
418
414
|
var _a, _b;
|
|
419
415
|
|
|
420
|
-
if (nextProps.data.customize.layout === 'layout2' && this.
|
|
416
|
+
if (nextProps.data.customize.layout === 'layout2' && this.carouselRef) {
|
|
421
417
|
this.sliderGoTo(nextProps.data.groupSource);
|
|
422
418
|
|
|
423
419
|
if (nextProps.data.setting.autoplay.open) {
|
|
424
|
-
(_a = this.
|
|
420
|
+
(_a = this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.startPlay();
|
|
425
421
|
} else {
|
|
426
|
-
(_b = this.
|
|
422
|
+
(_b = this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.stopPlay();
|
|
427
423
|
}
|
|
428
424
|
}
|
|
429
425
|
};
|
|
@@ -431,20 +427,21 @@ function (_super) {
|
|
|
431
427
|
WalletMobile.prototype.render = function () {
|
|
432
428
|
var _this = this;
|
|
433
429
|
|
|
434
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
430
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
435
431
|
|
|
436
432
|
var data = this.props.data;
|
|
437
433
|
var sliderIndex = this.state.sliderIndex;
|
|
438
434
|
var colNum = data.customize.rowNum;
|
|
435
|
+
var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
|
|
439
436
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
440
437
|
|
|
441
438
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
442
|
-
|
|
439
|
+
autoplay = false;
|
|
443
440
|
}
|
|
444
441
|
|
|
445
442
|
var navStyle = {
|
|
446
|
-
fontSize: (0, _commonUtil.convertToRem)((
|
|
447
|
-
color: (
|
|
443
|
+
fontSize: (0, _commonUtil.convertToRem)((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.navigation) === null || _d === void 0 ? void 0 : _d.size),
|
|
444
|
+
color: (_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.color
|
|
448
445
|
};
|
|
449
446
|
|
|
450
447
|
var getItemContent = function getItemContent(item, preItem, nextItem) {
|
|
@@ -571,41 +568,34 @@ function (_super) {
|
|
|
571
568
|
}, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
|
|
572
569
|
className: "carousel-icon-left",
|
|
573
570
|
onClick: function onClick() {
|
|
574
|
-
return _this.
|
|
571
|
+
return _this.carouselRef.current.toPrev();
|
|
575
572
|
},
|
|
576
573
|
onMouseEnter: this.mouseEnterBtn,
|
|
577
574
|
onMouseLeave: this.mouseLeaveBtn,
|
|
578
575
|
style: navStyle,
|
|
579
576
|
type: "icon-left"
|
|
580
|
-
}), /*#__PURE__*/_react["default"].createElement(
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
loop: true,
|
|
586
|
-
modules: [_modules.EffectCards, _modules.Autoplay],
|
|
587
|
-
onSlideChange: function onSlideChange(swiper) {
|
|
577
|
+
}), /*#__PURE__*/_react["default"].createElement(_CardCarousel["default"], {
|
|
578
|
+
ref: this.carouselRef,
|
|
579
|
+
autoplay: autoplay,
|
|
580
|
+
delay: ((_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.autoplay) === null || _h === void 0 ? void 0 : _h.interval) * 1000,
|
|
581
|
+
onChange: function onChange(index) {
|
|
588
582
|
return _this.setState({
|
|
589
|
-
sliderIndex:
|
|
583
|
+
sliderIndex: index
|
|
590
584
|
});
|
|
591
|
-
}
|
|
592
|
-
onSwiper: function onSwiper(swiper) {
|
|
593
|
-
return _this.swiperRef = swiper;
|
|
594
|
-
},
|
|
595
|
-
slidesPerView: 1
|
|
585
|
+
}
|
|
596
586
|
}, data.groupSource.map(function (item, index) {
|
|
597
587
|
var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
|
|
598
588
|
var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
|
|
599
589
|
var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
|
|
600
590
|
var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
|
|
601
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
591
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
602
592
|
key: item.id,
|
|
603
593
|
className: "item-wrap"
|
|
604
|
-
}, getItemContent(item, preItem, nextItem))
|
|
594
|
+
}, getItemContent(item, preItem, nextItem));
|
|
605
595
|
})), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
|
|
606
596
|
className: "carousel-icon-right",
|
|
607
597
|
onClick: function onClick() {
|
|
608
|
-
return _this.
|
|
598
|
+
return _this.carouselRef.current.toNext();
|
|
609
599
|
},
|
|
610
600
|
onMouseEnter: this.mouseEnterBtn,
|
|
611
601
|
onMouseLeave: this.mouseLeaveBtn,
|
|
@@ -620,7 +610,7 @@ function (_super) {
|
|
|
620
610
|
active: i == sliderIndex
|
|
621
611
|
}),
|
|
622
612
|
onClick: function onClick() {
|
|
623
|
-
return _this.
|
|
613
|
+
return _this.carouselRef.current.slideTo(i);
|
|
624
614
|
},
|
|
625
615
|
style: (0, _commonUtil.pxToRem)({
|
|
626
616
|
backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-wrap: wrap;
|
|
10
10
|
border-radius: 0.2rem;
|
|
11
|
-
padding: 0.2rem 0.8rem 1.
|
|
11
|
+
padding: 0.2rem 0.8rem 1.16rem 0.8rem;
|
|
12
12
|
}
|
|
13
13
|
.m-Wallet-mobile .item-wrap .text-content .wallet-btn {
|
|
14
14
|
margin-top: 0.2rem;
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
bottom: 0;
|
|
62
62
|
margin: auto;
|
|
63
63
|
cursor: pointer;
|
|
64
|
-
z-index:
|
|
64
|
+
z-index: 20;
|
|
65
65
|
}
|
|
66
66
|
.m-Wallet-mobile .carousel-layout .carousel-icon-right {
|
|
67
67
|
position: absolute;
|
|
@@ -70,16 +70,16 @@
|
|
|
70
70
|
bottom: 0;
|
|
71
71
|
margin: auto;
|
|
72
72
|
cursor: pointer;
|
|
73
|
-
z-index:
|
|
73
|
+
z-index: 20;
|
|
74
74
|
}
|
|
75
75
|
.m-Wallet-mobile .carousel-layout .swiper-ban {
|
|
76
76
|
position: absolute;
|
|
77
77
|
width: 100%;
|
|
78
|
-
bottom: 0.
|
|
78
|
+
bottom: 0.72rem;
|
|
79
79
|
display: flex;
|
|
80
80
|
align-items: center;
|
|
81
81
|
justify-content: center;
|
|
82
|
-
z-index:
|
|
82
|
+
z-index: 20;
|
|
83
83
|
}
|
|
84
84
|
.m-Wallet-mobile .carousel-layout .swiper-ban .ban {
|
|
85
85
|
font-size: 0.16rem;
|
package/es/utils/commonUtil.js
CHANGED
|
@@ -16,7 +16,7 @@ exports.dragSource = exports.downloadBase64Image = void 0;
|
|
|
16
16
|
exports.ensure = ensure;
|
|
17
17
|
exports.getGAData = exports.getColorRgba = void 0;
|
|
18
18
|
exports.getPageDataMap = getPageDataMap;
|
|
19
|
-
exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
|
|
19
|
+
exports.onListenTouch = exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
|
|
20
20
|
exports.pushGA = pushGA;
|
|
21
21
|
exports.pxToRem = void 0;
|
|
22
22
|
exports.shareFacebook = shareFacebook;
|
|
@@ -898,4 +898,54 @@ var convertCount = function convertCount(value) {
|
|
|
898
898
|
return newValue;
|
|
899
899
|
};
|
|
900
900
|
|
|
901
|
-
exports.convertCount = convertCount;
|
|
901
|
+
exports.convertCount = convertCount;
|
|
902
|
+
|
|
903
|
+
var onListenTouch = function onListenTouch(cls, leftFunc, rightFunc) {
|
|
904
|
+
var box = document.querySelector(cls); // 监听对象
|
|
905
|
+
|
|
906
|
+
var startTime = ''; // 触摸开始时间
|
|
907
|
+
|
|
908
|
+
var startDistanceX = ''; // 触摸开始X轴位置
|
|
909
|
+
|
|
910
|
+
var startDistanceY = ''; // 触摸开始Y轴位置
|
|
911
|
+
|
|
912
|
+
var endTime = ''; // 触摸结束时间
|
|
913
|
+
|
|
914
|
+
var endDistanceX = ''; // 触摸结束X轴位置
|
|
915
|
+
|
|
916
|
+
var endDistanceY = ''; // 触摸结束Y轴位置
|
|
917
|
+
|
|
918
|
+
var moveTime = ''; // 触摸时间
|
|
919
|
+
|
|
920
|
+
var moveDistanceX = ''; // 触摸移动X轴距离
|
|
921
|
+
|
|
922
|
+
var moveDistanceY = ''; // 触摸移动Y轴距离
|
|
923
|
+
|
|
924
|
+
box.addEventListener('touchstart', function (e) {
|
|
925
|
+
startTime = new Date().getTime();
|
|
926
|
+
startDistanceX = e.touches[0].screenX;
|
|
927
|
+
startDistanceY = e.touches[0].screenY;
|
|
928
|
+
});
|
|
929
|
+
box.addEventListener('touchend', function (e) {
|
|
930
|
+
endTime = new Date().getTime();
|
|
931
|
+
endDistanceX = e.changedTouches[0].screenX;
|
|
932
|
+
endDistanceY = e.changedTouches[0].screenY;
|
|
933
|
+
moveTime = endTime - startTime;
|
|
934
|
+
moveDistanceX = startDistanceX - endDistanceX;
|
|
935
|
+
moveDistanceY = startDistanceY - endDistanceY; // 判断滑动距离超过40 且 时间小于500毫秒
|
|
936
|
+
|
|
937
|
+
if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
|
|
938
|
+
// 判断X轴移动的距离是否大于Y轴移动的距离
|
|
939
|
+
if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
|
|
940
|
+
// 左右
|
|
941
|
+
if (moveDistanceX > 0) leftFunc();else rightFunc();
|
|
942
|
+
} else {
|
|
943
|
+
// 上下
|
|
944
|
+
return moveDistanceY > 0 ? 'top' : 'bottom';
|
|
945
|
+
}
|
|
946
|
+
}
|
|
947
|
+
});
|
|
948
|
+
return null;
|
|
949
|
+
};
|
|
950
|
+
|
|
951
|
+
exports.onListenTouch = onListenTouch;
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.CardCarousel = void 0;
|
|
9
|
+
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _commonUtil = require("../../utils/commonUtil");
|
|
17
|
+
|
|
18
|
+
require("./index.less");
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
+
|
|
26
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
27
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
28
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
29
|
+
__proto__: []
|
|
30
|
+
} instanceof Array && function (d, b) {
|
|
31
|
+
d.__proto__ = b;
|
|
32
|
+
} || function (d, b) {
|
|
33
|
+
for (var p in b) {
|
|
34
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
return _extendStatics(d, b);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
return function (d, b) {
|
|
42
|
+
_extendStatics(d, b);
|
|
43
|
+
|
|
44
|
+
function __() {
|
|
45
|
+
this.constructor = d;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
49
|
+
};
|
|
50
|
+
}();
|
|
51
|
+
|
|
52
|
+
var CardCarousel =
|
|
53
|
+
/** @class */
|
|
54
|
+
function (_super) {
|
|
55
|
+
__extends(CardCarousel, _super);
|
|
56
|
+
|
|
57
|
+
function CardCarousel() {
|
|
58
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
59
|
+
|
|
60
|
+
_this.state = {
|
|
61
|
+
index: 0
|
|
62
|
+
};
|
|
63
|
+
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
64
|
+
_this.inter = null;
|
|
65
|
+
|
|
66
|
+
_this.toPrev = function () {
|
|
67
|
+
var children = _this.props.children;
|
|
68
|
+
var index = _this.state.index;
|
|
69
|
+
var preIndex = index > 0 ? index : children.length;
|
|
70
|
+
|
|
71
|
+
_this.slideTo(preIndex - 1);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
_this.toNext = function () {
|
|
75
|
+
var children = _this.props.children;
|
|
76
|
+
var index = _this.state.index;
|
|
77
|
+
var nextIndex = index < children.length - 1 ? index + 1 : 0;
|
|
78
|
+
|
|
79
|
+
_this.slideTo(nextIndex);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
_this.startPlay = function () {
|
|
83
|
+
var _a = _this.props,
|
|
84
|
+
delay = _a.delay,
|
|
85
|
+
autoplay = _a.autoplay;
|
|
86
|
+
|
|
87
|
+
if (!_this.inter && autoplay) {
|
|
88
|
+
_this.inter = setInterval(function () {
|
|
89
|
+
_this.toNext();
|
|
90
|
+
}, delay);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
_this.stopPlay = function () {
|
|
95
|
+
if (_this.inter) {
|
|
96
|
+
clearInterval(_this.inter);
|
|
97
|
+
_this.inter = null;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
_this.slideTo = function (index) {
|
|
102
|
+
var onChange = _this.props.onChange;
|
|
103
|
+
|
|
104
|
+
_this.stopPlay();
|
|
105
|
+
|
|
106
|
+
_this.setState({
|
|
107
|
+
index: index
|
|
108
|
+
}, function () {
|
|
109
|
+
onChange(index);
|
|
110
|
+
|
|
111
|
+
_this.startPlay();
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
return _this;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
CardCarousel.prototype.componentDidMount = function () {
|
|
119
|
+
(0, _commonUtil.onListenTouch)('.cardCarousel', this.toPrev, this.toNext);
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
CardCarousel.prototype.componentWillReceiveProps = function (nextProps) {
|
|
123
|
+
if (nextProps.autoplay) {
|
|
124
|
+
this.startPlay();
|
|
125
|
+
} else {
|
|
126
|
+
this.stopPlay();
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
CardCarousel.prototype.render = function () {
|
|
131
|
+
var index = this.state.index;
|
|
132
|
+
var children = this.props.children;
|
|
133
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
134
|
+
ref: this.carouselRef,
|
|
135
|
+
className: "cardCarousel"
|
|
136
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
137
|
+
className: "content"
|
|
138
|
+
}, _react["default"].Children.map(children, function (child, i) {
|
|
139
|
+
var zIndex = i >= index ? children.length - i + index : index - i;
|
|
140
|
+
var space = children.length - zIndex === 1 ? 5 : children.length - zIndex === 2 ? 10 : 0;
|
|
141
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
142
|
+
className: (0, _classnames["default"])('cardItem', {
|
|
143
|
+
active: i === index
|
|
144
|
+
}),
|
|
145
|
+
style: {
|
|
146
|
+
zIndex: zIndex,
|
|
147
|
+
transform: "translate(" + space + "px, " + space + "px)"
|
|
148
|
+
}
|
|
149
|
+
}, child);
|
|
150
|
+
})));
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
return CardCarousel;
|
|
154
|
+
}(_react.Component);
|
|
155
|
+
|
|
156
|
+
exports.CardCarousel = CardCarousel;
|
|
157
|
+
CardCarousel.propTypes = {
|
|
158
|
+
/** 外层容器 */
|
|
159
|
+
onChange: _propTypes["default"].func,
|
|
160
|
+
autoplay: _propTypes["default"].bool,
|
|
161
|
+
delay: _propTypes["default"].number
|
|
162
|
+
};
|
|
163
|
+
CardCarousel.defaultProps = {
|
|
164
|
+
onChange: function onChange() {
|
|
165
|
+
return null;
|
|
166
|
+
},
|
|
167
|
+
autoplay: false,
|
|
168
|
+
delay: 3000
|
|
169
|
+
};
|
|
170
|
+
var _default = CardCarousel;
|
|
171
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.cardCarousel {
|
|
2
|
+
width: 100%;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
|
|
5
|
+
.content {
|
|
6
|
+
|
|
7
|
+
.cardItem {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 218px;
|
|
10
|
+
border-radius: 10px;
|
|
11
|
+
background-color: pink;
|
|
12
|
+
position: absolute;
|
|
13
|
+
|
|
14
|
+
&.active {
|
|
15
|
+
transition: transform 0.3s;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.btn-left,
|
|
22
|
+
.btn-right {
|
|
23
|
+
width: 120px;
|
|
24
|
+
height: 40px;
|
|
25
|
+
background-color: #fff;
|
|
26
|
+
color: #000;
|
|
27
|
+
margin: 10px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -9,9 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
var _modules = require("swiper/modules");
|
|
12
|
+
var _CardCarousel = _interopRequireDefault(require("src/components/common/CardCarousel"));
|
|
15
13
|
|
|
16
14
|
var _components = require("../../../../../meta-comp/components");
|
|
17
15
|
|
|
@@ -29,10 +27,6 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
|
|
|
29
27
|
|
|
30
28
|
var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
|
|
31
29
|
|
|
32
|
-
require("swiper/css");
|
|
33
|
-
|
|
34
|
-
require("swiper/css/effect-cards");
|
|
35
|
-
|
|
36
30
|
require("./index.less");
|
|
37
31
|
|
|
38
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -243,11 +237,11 @@ function (_super) {
|
|
|
243
237
|
function WalletMobile() {
|
|
244
238
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
245
239
|
|
|
240
|
+
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
246
241
|
_this.state = {
|
|
247
242
|
sliderIndex: 0,
|
|
248
243
|
userWalletData: {}
|
|
249
244
|
};
|
|
250
|
-
_this.swiperRef = null;
|
|
251
245
|
_this.destroy = null;
|
|
252
246
|
|
|
253
247
|
_this.getMyWalletData = function () {
|
|
@@ -256,8 +250,10 @@ function (_super) {
|
|
|
256
250
|
|
|
257
251
|
var _b;
|
|
258
252
|
|
|
259
|
-
|
|
260
|
-
|
|
253
|
+
var _c;
|
|
254
|
+
|
|
255
|
+
return __generator(this, function (_d) {
|
|
256
|
+
switch (_d.label) {
|
|
261
257
|
case 0:
|
|
262
258
|
data = this.props.data;
|
|
263
259
|
return [4
|
|
@@ -265,7 +261,7 @@ function (_super) {
|
|
|
265
261
|
, (0, _commonUtil.commonFetch)('/designer/v1/h5/mywallet/list', {}, 'GET')];
|
|
266
262
|
|
|
267
263
|
case 1:
|
|
268
|
-
_a =
|
|
264
|
+
_a = _d.sent(), userCreditResps = _a.userCreditResps, userCashbackValues = _a.userCashbackValues, userBalance = _a.userBalance, userPoint = _a.userPoint, defaultShowWallet = _a.defaultShowWallet; // const { userCreditResps, userCashbackValues, userBalance, userPoint, defaultShowWallet } = {
|
|
269
265
|
// userCreditResps: [
|
|
270
266
|
// {
|
|
271
267
|
// userCreditId: 1023,
|
|
@@ -310,12 +306,12 @@ function (_super) {
|
|
|
310
306
|
// defaultShowWallet: 'Balance',
|
|
311
307
|
// };
|
|
312
308
|
|
|
313
|
-
if (data.customize.layout === 'layout2' && this.
|
|
309
|
+
if (data.customize.layout === 'layout2' && this.carouselRef) {
|
|
314
310
|
defaultShowIndex_1 = 0;
|
|
315
311
|
data.groupSource.forEach(function (f, i) {
|
|
316
312
|
if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
|
|
317
313
|
});
|
|
318
|
-
this.
|
|
314
|
+
(_c = this.carouselRef.current) === null || _c === void 0 ? void 0 : _c.slideTo(defaultShowIndex_1);
|
|
319
315
|
}
|
|
320
316
|
|
|
321
317
|
bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
|
|
@@ -388,7 +384,7 @@ function (_super) {
|
|
|
388
384
|
});
|
|
389
385
|
|
|
390
386
|
if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
|
|
391
|
-
_this.
|
|
387
|
+
_this.carouselRef.current.slideTo(nextIndex);
|
|
392
388
|
}
|
|
393
389
|
};
|
|
394
390
|
|
|
@@ -402,13 +398,13 @@ function (_super) {
|
|
|
402
398
|
this.destroy = (0, _mobx.autorun)(function () {
|
|
403
399
|
var _a;
|
|
404
400
|
|
|
405
|
-
if (_this.props.data.customize.layout === 'layout2' && _this.
|
|
401
|
+
if (_this.props.data.customize.layout === 'layout2' && _this.carouselRef) {
|
|
406
402
|
_this.sliderGoTo(_this.props.data.groupSource);
|
|
407
403
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
408
404
|
|
|
409
405
|
|
|
410
406
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
411
|
-
(_a = _this.
|
|
407
|
+
(_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.stopPlay();
|
|
412
408
|
}
|
|
413
409
|
}
|
|
414
410
|
});
|
|
@@ -417,13 +413,13 @@ function (_super) {
|
|
|
417
413
|
WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
|
|
418
414
|
var _a, _b;
|
|
419
415
|
|
|
420
|
-
if (nextProps.data.customize.layout === 'layout2' && this.
|
|
416
|
+
if (nextProps.data.customize.layout === 'layout2' && this.carouselRef) {
|
|
421
417
|
this.sliderGoTo(nextProps.data.groupSource);
|
|
422
418
|
|
|
423
419
|
if (nextProps.data.setting.autoplay.open) {
|
|
424
|
-
(_a = this.
|
|
420
|
+
(_a = this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.startPlay();
|
|
425
421
|
} else {
|
|
426
|
-
(_b = this.
|
|
422
|
+
(_b = this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.stopPlay();
|
|
427
423
|
}
|
|
428
424
|
}
|
|
429
425
|
};
|
|
@@ -431,20 +427,21 @@ function (_super) {
|
|
|
431
427
|
WalletMobile.prototype.render = function () {
|
|
432
428
|
var _this = this;
|
|
433
429
|
|
|
434
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
430
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
435
431
|
|
|
436
432
|
var data = this.props.data;
|
|
437
433
|
var sliderIndex = this.state.sliderIndex;
|
|
438
434
|
var colNum = data.customize.rowNum;
|
|
435
|
+
var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
|
|
439
436
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
440
437
|
|
|
441
438
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
442
|
-
|
|
439
|
+
autoplay = false;
|
|
443
440
|
}
|
|
444
441
|
|
|
445
442
|
var navStyle = {
|
|
446
|
-
fontSize: (0, _commonUtil.convertToRem)((
|
|
447
|
-
color: (
|
|
443
|
+
fontSize: (0, _commonUtil.convertToRem)((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.navigation) === null || _d === void 0 ? void 0 : _d.size),
|
|
444
|
+
color: (_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.color
|
|
448
445
|
};
|
|
449
446
|
|
|
450
447
|
var getItemContent = function getItemContent(item, preItem, nextItem) {
|
|
@@ -571,41 +568,34 @@ function (_super) {
|
|
|
571
568
|
}, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
|
|
572
569
|
className: "carousel-icon-left",
|
|
573
570
|
onClick: function onClick() {
|
|
574
|
-
return _this.
|
|
571
|
+
return _this.carouselRef.current.toPrev();
|
|
575
572
|
},
|
|
576
573
|
onMouseEnter: this.mouseEnterBtn,
|
|
577
574
|
onMouseLeave: this.mouseLeaveBtn,
|
|
578
575
|
style: navStyle,
|
|
579
576
|
type: "icon-left"
|
|
580
|
-
}), /*#__PURE__*/_react["default"].createElement(
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
loop: true,
|
|
586
|
-
modules: [_modules.EffectCards, _modules.Autoplay],
|
|
587
|
-
onSlideChange: function onSlideChange(swiper) {
|
|
577
|
+
}), /*#__PURE__*/_react["default"].createElement(_CardCarousel["default"], {
|
|
578
|
+
ref: this.carouselRef,
|
|
579
|
+
autoplay: autoplay,
|
|
580
|
+
delay: ((_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.autoplay) === null || _h === void 0 ? void 0 : _h.interval) * 1000,
|
|
581
|
+
onChange: function onChange(index) {
|
|
588
582
|
return _this.setState({
|
|
589
|
-
sliderIndex:
|
|
583
|
+
sliderIndex: index
|
|
590
584
|
});
|
|
591
|
-
}
|
|
592
|
-
onSwiper: function onSwiper(swiper) {
|
|
593
|
-
return _this.swiperRef = swiper;
|
|
594
|
-
},
|
|
595
|
-
slidesPerView: 1
|
|
585
|
+
}
|
|
596
586
|
}, data.groupSource.map(function (item, index) {
|
|
597
587
|
var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
|
|
598
588
|
var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
|
|
599
589
|
var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
|
|
600
590
|
var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
|
|
601
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
591
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
602
592
|
key: item.id,
|
|
603
593
|
className: "item-wrap"
|
|
604
|
-
}, getItemContent(item, preItem, nextItem))
|
|
594
|
+
}, getItemContent(item, preItem, nextItem));
|
|
605
595
|
})), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
|
|
606
596
|
className: "carousel-icon-right",
|
|
607
597
|
onClick: function onClick() {
|
|
608
|
-
return _this.
|
|
598
|
+
return _this.carouselRef.current.toNext();
|
|
609
599
|
},
|
|
610
600
|
onMouseEnter: this.mouseEnterBtn,
|
|
611
601
|
onMouseLeave: this.mouseLeaveBtn,
|
|
@@ -620,7 +610,7 @@ function (_super) {
|
|
|
620
610
|
active: i == sliderIndex
|
|
621
611
|
}),
|
|
622
612
|
onClick: function onClick() {
|
|
623
|
-
return _this.
|
|
613
|
+
return _this.carouselRef.current.slideTo(i);
|
|
624
614
|
},
|
|
625
615
|
style: (0, _commonUtil.pxToRem)({
|
|
626
616
|
backgroundColor: i == sliderIndex ? data.setting.dots.hoverColor : data.setting.dots.color,
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
justify-content: center;
|
|
9
9
|
flex-wrap: wrap;
|
|
10
10
|
border-radius: 0.2rem;
|
|
11
|
-
padding: 0.2rem 0.8rem 1.
|
|
11
|
+
padding: 0.2rem 0.8rem 1.16rem 0.8rem;
|
|
12
12
|
}
|
|
13
13
|
.m-Wallet-mobile .item-wrap .text-content .wallet-btn {
|
|
14
14
|
margin-top: 0.2rem;
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
bottom: 0;
|
|
62
62
|
margin: auto;
|
|
63
63
|
cursor: pointer;
|
|
64
|
-
z-index:
|
|
64
|
+
z-index: 20;
|
|
65
65
|
}
|
|
66
66
|
.m-Wallet-mobile .carousel-layout .carousel-icon-right {
|
|
67
67
|
position: absolute;
|
|
@@ -70,16 +70,16 @@
|
|
|
70
70
|
bottom: 0;
|
|
71
71
|
margin: auto;
|
|
72
72
|
cursor: pointer;
|
|
73
|
-
z-index:
|
|
73
|
+
z-index: 20;
|
|
74
74
|
}
|
|
75
75
|
.m-Wallet-mobile .carousel-layout .swiper-ban {
|
|
76
76
|
position: absolute;
|
|
77
77
|
width: 100%;
|
|
78
|
-
bottom: 0.
|
|
78
|
+
bottom: 0.72rem;
|
|
79
79
|
display: flex;
|
|
80
80
|
align-items: center;
|
|
81
81
|
justify-content: center;
|
|
82
|
-
z-index:
|
|
82
|
+
z-index: 20;
|
|
83
83
|
}
|
|
84
84
|
.m-Wallet-mobile .carousel-layout .swiper-ban .ban {
|
|
85
85
|
font-size: 0.16rem;
|
package/lib/utils/commonUtil.js
CHANGED
|
@@ -16,7 +16,7 @@ exports.dragSource = exports.downloadBase64Image = void 0;
|
|
|
16
16
|
exports.ensure = ensure;
|
|
17
17
|
exports.getGAData = exports.getColorRgba = void 0;
|
|
18
18
|
exports.getPageDataMap = getPageDataMap;
|
|
19
|
-
exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
|
|
19
|
+
exports.onListenTouch = exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
|
|
20
20
|
exports.pushGA = pushGA;
|
|
21
21
|
exports.pxToRem = void 0;
|
|
22
22
|
exports.shareFacebook = shareFacebook;
|
|
@@ -898,4 +898,54 @@ var convertCount = function convertCount(value) {
|
|
|
898
898
|
return newValue;
|
|
899
899
|
};
|
|
900
900
|
|
|
901
|
-
exports.convertCount = convertCount;
|
|
901
|
+
exports.convertCount = convertCount;
|
|
902
|
+
|
|
903
|
+
var onListenTouch = function onListenTouch(cls, leftFunc, rightFunc) {
|
|
904
|
+
var box = document.querySelector(cls); // 监听对象
|
|
905
|
+
|
|
906
|
+
var startTime = ''; // 触摸开始时间
|
|
907
|
+
|
|
908
|
+
var startDistanceX = ''; // 触摸开始X轴位置
|
|
909
|
+
|
|
910
|
+
var startDistanceY = ''; // 触摸开始Y轴位置
|
|
911
|
+
|
|
912
|
+
var endTime = ''; // 触摸结束时间
|
|
913
|
+
|
|
914
|
+
var endDistanceX = ''; // 触摸结束X轴位置
|
|
915
|
+
|
|
916
|
+
var endDistanceY = ''; // 触摸结束Y轴位置
|
|
917
|
+
|
|
918
|
+
var moveTime = ''; // 触摸时间
|
|
919
|
+
|
|
920
|
+
var moveDistanceX = ''; // 触摸移动X轴距离
|
|
921
|
+
|
|
922
|
+
var moveDistanceY = ''; // 触摸移动Y轴距离
|
|
923
|
+
|
|
924
|
+
box.addEventListener('touchstart', function (e) {
|
|
925
|
+
startTime = new Date().getTime();
|
|
926
|
+
startDistanceX = e.touches[0].screenX;
|
|
927
|
+
startDistanceY = e.touches[0].screenY;
|
|
928
|
+
});
|
|
929
|
+
box.addEventListener('touchend', function (e) {
|
|
930
|
+
endTime = new Date().getTime();
|
|
931
|
+
endDistanceX = e.changedTouches[0].screenX;
|
|
932
|
+
endDistanceY = e.changedTouches[0].screenY;
|
|
933
|
+
moveTime = endTime - startTime;
|
|
934
|
+
moveDistanceX = startDistanceX - endDistanceX;
|
|
935
|
+
moveDistanceY = startDistanceY - endDistanceY; // 判断滑动距离超过40 且 时间小于500毫秒
|
|
936
|
+
|
|
937
|
+
if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
|
|
938
|
+
// 判断X轴移动的距离是否大于Y轴移动的距离
|
|
939
|
+
if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
|
|
940
|
+
// 左右
|
|
941
|
+
if (moveDistanceX > 0) leftFunc();else rightFunc();
|
|
942
|
+
} else {
|
|
943
|
+
// 上下
|
|
944
|
+
return moveDistanceY > 0 ? 'top' : 'bottom';
|
|
945
|
+
}
|
|
946
|
+
}
|
|
947
|
+
});
|
|
948
|
+
return null;
|
|
949
|
+
};
|
|
950
|
+
|
|
951
|
+
exports.onListenTouch = onListenTouch;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fonixtree/magic-design",
|
|
3
3
|
"author": "Cylon Team",
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.46",
|
|
5
5
|
"description": "Magic Design",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -41,8 +41,7 @@
|
|
|
41
41
|
"replace": "^1.2.1",
|
|
42
42
|
"shortid": "^2.2.16",
|
|
43
43
|
"slick-carousel": "^1.8.1",
|
|
44
|
-
"spark-md5": "^3.0.2"
|
|
45
|
-
"swiper": "^11.0.3"
|
|
44
|
+
"spark-md5": "^3.0.2"
|
|
46
45
|
},
|
|
47
46
|
"peerDependencies": {
|
|
48
47
|
"react": ">=16.11.0",
|