@fonixtree/magic-design 2.0.45 → 2.0.47
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/common/index.js +8 -0
- package/es/composite-comp/bol/components/Wallet/mobile/index.js +34 -46
- 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/common/index.js +8 -0
- package/lib/composite-comp/bol/components/Wallet/mobile/index.js +34 -46
- 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
|
+
}
|
package/es/common/index.js
CHANGED
|
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ButtonIconLayout", {
|
|
|
21
21
|
return _ButtonIconLayout["default"];
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
+
Object.defineProperty(exports, "CardCarousel", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _CardCarousel["default"];
|
|
28
|
+
}
|
|
29
|
+
});
|
|
24
30
|
Object.defineProperty(exports, "Collapse", {
|
|
25
31
|
enumerable: true,
|
|
26
32
|
get: function get() {
|
|
@@ -172,4 +178,6 @@ var _InputNumber = _interopRequireDefault(require("./InputNumber"));
|
|
|
172
178
|
|
|
173
179
|
var _VideoUpload = _interopRequireDefault(require("./VideoUpload"));
|
|
174
180
|
|
|
181
|
+
var _CardCarousel = _interopRequireDefault(require("./CardCarousel"));
|
|
182
|
+
|
|
175
183
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
|
|
12
|
-
var _react2 = require("swiper/react");
|
|
13
|
-
|
|
14
|
-
var _modules = require("swiper/modules");
|
|
15
|
-
|
|
16
12
|
var _components = require("../../../../../meta-comp/components");
|
|
17
13
|
|
|
18
14
|
var _mobx = require("../../../../../mobx");
|
|
@@ -21,7 +17,7 @@ var _coreUtil = require("../../../../../utils/coreUtil");
|
|
|
21
17
|
|
|
22
18
|
var _commonUtil = require("../../../../../utils/commonUtil");
|
|
23
19
|
|
|
24
|
-
var
|
|
20
|
+
var _common = require("../../../../../common");
|
|
25
21
|
|
|
26
22
|
var _constants = require("../../../../../constants");
|
|
27
23
|
|
|
@@ -29,10 +25,6 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
|
|
|
29
25
|
|
|
30
26
|
var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
|
|
31
27
|
|
|
32
|
-
require("swiper/css");
|
|
33
|
-
|
|
34
|
-
require("swiper/css/effect-cards");
|
|
35
|
-
|
|
36
28
|
require("./index.less");
|
|
37
29
|
|
|
38
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -243,11 +235,11 @@ function (_super) {
|
|
|
243
235
|
function WalletMobile() {
|
|
244
236
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
245
237
|
|
|
238
|
+
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
246
239
|
_this.state = {
|
|
247
240
|
sliderIndex: 0,
|
|
248
241
|
userWalletData: {}
|
|
249
242
|
};
|
|
250
|
-
_this.swiperRef = null;
|
|
251
243
|
_this.destroy = null;
|
|
252
244
|
|
|
253
245
|
_this.getMyWalletData = function () {
|
|
@@ -256,8 +248,10 @@ function (_super) {
|
|
|
256
248
|
|
|
257
249
|
var _b;
|
|
258
250
|
|
|
259
|
-
|
|
260
|
-
|
|
251
|
+
var _c;
|
|
252
|
+
|
|
253
|
+
return __generator(this, function (_d) {
|
|
254
|
+
switch (_d.label) {
|
|
261
255
|
case 0:
|
|
262
256
|
data = this.props.data;
|
|
263
257
|
return [4
|
|
@@ -265,7 +259,7 @@ function (_super) {
|
|
|
265
259
|
, (0, _commonUtil.commonFetch)('/designer/v1/h5/mywallet/list', {}, 'GET')];
|
|
266
260
|
|
|
267
261
|
case 1:
|
|
268
|
-
_a =
|
|
262
|
+
_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
263
|
// userCreditResps: [
|
|
270
264
|
// {
|
|
271
265
|
// userCreditId: 1023,
|
|
@@ -310,12 +304,12 @@ function (_super) {
|
|
|
310
304
|
// defaultShowWallet: 'Balance',
|
|
311
305
|
// };
|
|
312
306
|
|
|
313
|
-
if (data.customize.layout === 'layout2' && this.
|
|
307
|
+
if (data.customize.layout === 'layout2' && this.carouselRef) {
|
|
314
308
|
defaultShowIndex_1 = 0;
|
|
315
309
|
data.groupSource.forEach(function (f, i) {
|
|
316
310
|
if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
|
|
317
311
|
});
|
|
318
|
-
this.
|
|
312
|
+
(_c = this.carouselRef.current) === null || _c === void 0 ? void 0 : _c.slideTo(defaultShowIndex_1);
|
|
319
313
|
}
|
|
320
314
|
|
|
321
315
|
bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
|
|
@@ -388,7 +382,7 @@ function (_super) {
|
|
|
388
382
|
});
|
|
389
383
|
|
|
390
384
|
if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
|
|
391
|
-
_this.
|
|
385
|
+
_this.carouselRef.current.slideTo(nextIndex);
|
|
392
386
|
}
|
|
393
387
|
};
|
|
394
388
|
|
|
@@ -402,13 +396,13 @@ function (_super) {
|
|
|
402
396
|
this.destroy = (0, _mobx.autorun)(function () {
|
|
403
397
|
var _a;
|
|
404
398
|
|
|
405
|
-
if (_this.props.data.customize.layout === 'layout2' && _this.
|
|
399
|
+
if (_this.props.data.customize.layout === 'layout2' && _this.carouselRef) {
|
|
406
400
|
_this.sliderGoTo(_this.props.data.groupSource);
|
|
407
401
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
408
402
|
|
|
409
403
|
|
|
410
404
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
411
|
-
(_a = _this.
|
|
405
|
+
(_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.stopPlay();
|
|
412
406
|
}
|
|
413
407
|
}
|
|
414
408
|
});
|
|
@@ -417,13 +411,13 @@ function (_super) {
|
|
|
417
411
|
WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
|
|
418
412
|
var _a, _b;
|
|
419
413
|
|
|
420
|
-
if (nextProps.data.customize.layout === 'layout2' && this.
|
|
414
|
+
if (nextProps.data.customize.layout === 'layout2' && this.carouselRef) {
|
|
421
415
|
this.sliderGoTo(nextProps.data.groupSource);
|
|
422
416
|
|
|
423
417
|
if (nextProps.data.setting.autoplay.open) {
|
|
424
|
-
(_a = this.
|
|
418
|
+
(_a = this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.startPlay();
|
|
425
419
|
} else {
|
|
426
|
-
(_b = this.
|
|
420
|
+
(_b = this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.stopPlay();
|
|
427
421
|
}
|
|
428
422
|
}
|
|
429
423
|
};
|
|
@@ -431,20 +425,21 @@ function (_super) {
|
|
|
431
425
|
WalletMobile.prototype.render = function () {
|
|
432
426
|
var _this = this;
|
|
433
427
|
|
|
434
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
428
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
435
429
|
|
|
436
430
|
var data = this.props.data;
|
|
437
431
|
var sliderIndex = this.state.sliderIndex;
|
|
438
432
|
var colNum = data.customize.rowNum;
|
|
433
|
+
var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
|
|
439
434
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
440
435
|
|
|
441
436
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
442
|
-
|
|
437
|
+
autoplay = false;
|
|
443
438
|
}
|
|
444
439
|
|
|
445
440
|
var navStyle = {
|
|
446
|
-
fontSize: (0, _commonUtil.convertToRem)((
|
|
447
|
-
color: (
|
|
441
|
+
fontSize: (0, _commonUtil.convertToRem)((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.navigation) === null || _d === void 0 ? void 0 : _d.size),
|
|
442
|
+
color: (_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.color
|
|
448
443
|
};
|
|
449
444
|
|
|
450
445
|
var getItemContent = function getItemContent(item, preItem, nextItem) {
|
|
@@ -568,44 +563,37 @@ function (_super) {
|
|
|
568
563
|
}, getItemContent(item));
|
|
569
564
|
})) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
570
565
|
className: "carousel-layout"
|
|
571
|
-
}, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(
|
|
566
|
+
}, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
|
|
572
567
|
className: "carousel-icon-left",
|
|
573
568
|
onClick: function onClick() {
|
|
574
|
-
return _this.
|
|
569
|
+
return _this.carouselRef.current.toPrev();
|
|
575
570
|
},
|
|
576
571
|
onMouseEnter: this.mouseEnterBtn,
|
|
577
572
|
onMouseLeave: this.mouseLeaveBtn,
|
|
578
573
|
style: navStyle,
|
|
579
574
|
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) {
|
|
575
|
+
}), /*#__PURE__*/_react["default"].createElement(_common.CardCarousel, {
|
|
576
|
+
ref: this.carouselRef,
|
|
577
|
+
autoplay: autoplay,
|
|
578
|
+
delay: ((_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.autoplay) === null || _h === void 0 ? void 0 : _h.interval) * 1000,
|
|
579
|
+
onChange: function onChange(index) {
|
|
588
580
|
return _this.setState({
|
|
589
|
-
sliderIndex:
|
|
581
|
+
sliderIndex: index
|
|
590
582
|
});
|
|
591
|
-
}
|
|
592
|
-
onSwiper: function onSwiper(swiper) {
|
|
593
|
-
return _this.swiperRef = swiper;
|
|
594
|
-
},
|
|
595
|
-
slidesPerView: 1
|
|
583
|
+
}
|
|
596
584
|
}, data.groupSource.map(function (item, index) {
|
|
597
585
|
var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
|
|
598
586
|
var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
|
|
599
587
|
var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
|
|
600
588
|
var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
|
|
601
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
589
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
602
590
|
key: item.id,
|
|
603
591
|
className: "item-wrap"
|
|
604
|
-
}, getItemContent(item, preItem, nextItem))
|
|
605
|
-
})), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(
|
|
592
|
+
}, getItemContent(item, preItem, nextItem));
|
|
593
|
+
})), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
|
|
606
594
|
className: "carousel-icon-right",
|
|
607
595
|
onClick: function onClick() {
|
|
608
|
-
return _this.
|
|
596
|
+
return _this.carouselRef.current.toNext();
|
|
609
597
|
},
|
|
610
598
|
onMouseEnter: this.mouseEnterBtn,
|
|
611
599
|
onMouseLeave: this.mouseLeaveBtn,
|
|
@@ -620,7 +608,7 @@ function (_super) {
|
|
|
620
608
|
active: i == sliderIndex
|
|
621
609
|
}),
|
|
622
610
|
onClick: function onClick() {
|
|
623
|
-
return _this.
|
|
611
|
+
return _this.carouselRef.current.slideTo(i);
|
|
624
612
|
},
|
|
625
613
|
style: (0, _commonUtil.pxToRem)({
|
|
626
614
|
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
|
+
}
|
package/lib/common/index.js
CHANGED
|
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ButtonIconLayout", {
|
|
|
21
21
|
return _ButtonIconLayout["default"];
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
+
Object.defineProperty(exports, "CardCarousel", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _CardCarousel["default"];
|
|
28
|
+
}
|
|
29
|
+
});
|
|
24
30
|
Object.defineProperty(exports, "Collapse", {
|
|
25
31
|
enumerable: true,
|
|
26
32
|
get: function get() {
|
|
@@ -172,4 +178,6 @@ var _InputNumber = _interopRequireDefault(require("./InputNumber"));
|
|
|
172
178
|
|
|
173
179
|
var _VideoUpload = _interopRequireDefault(require("./VideoUpload"));
|
|
174
180
|
|
|
181
|
+
var _CardCarousel = _interopRequireDefault(require("./CardCarousel"));
|
|
182
|
+
|
|
175
183
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -9,10 +9,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
|
|
12
|
-
var _react2 = require("swiper/react");
|
|
13
|
-
|
|
14
|
-
var _modules = require("swiper/modules");
|
|
15
|
-
|
|
16
12
|
var _components = require("../../../../../meta-comp/components");
|
|
17
13
|
|
|
18
14
|
var _mobx = require("../../../../../mobx");
|
|
@@ -21,7 +17,7 @@ var _coreUtil = require("../../../../../utils/coreUtil");
|
|
|
21
17
|
|
|
22
18
|
var _commonUtil = require("../../../../../utils/commonUtil");
|
|
23
19
|
|
|
24
|
-
var
|
|
20
|
+
var _common = require("../../../../../common");
|
|
25
21
|
|
|
26
22
|
var _constants = require("../../../../../constants");
|
|
27
23
|
|
|
@@ -29,10 +25,6 @@ var _currencyUtil = require("../../../../../utils/currencyUtil");
|
|
|
29
25
|
|
|
30
26
|
var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
|
|
31
27
|
|
|
32
|
-
require("swiper/css");
|
|
33
|
-
|
|
34
|
-
require("swiper/css/effect-cards");
|
|
35
|
-
|
|
36
28
|
require("./index.less");
|
|
37
29
|
|
|
38
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -243,11 +235,11 @@ function (_super) {
|
|
|
243
235
|
function WalletMobile() {
|
|
244
236
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
245
237
|
|
|
238
|
+
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
246
239
|
_this.state = {
|
|
247
240
|
sliderIndex: 0,
|
|
248
241
|
userWalletData: {}
|
|
249
242
|
};
|
|
250
|
-
_this.swiperRef = null;
|
|
251
243
|
_this.destroy = null;
|
|
252
244
|
|
|
253
245
|
_this.getMyWalletData = function () {
|
|
@@ -256,8 +248,10 @@ function (_super) {
|
|
|
256
248
|
|
|
257
249
|
var _b;
|
|
258
250
|
|
|
259
|
-
|
|
260
|
-
|
|
251
|
+
var _c;
|
|
252
|
+
|
|
253
|
+
return __generator(this, function (_d) {
|
|
254
|
+
switch (_d.label) {
|
|
261
255
|
case 0:
|
|
262
256
|
data = this.props.data;
|
|
263
257
|
return [4
|
|
@@ -265,7 +259,7 @@ function (_super) {
|
|
|
265
259
|
, (0, _commonUtil.commonFetch)('/designer/v1/h5/mywallet/list', {}, 'GET')];
|
|
266
260
|
|
|
267
261
|
case 1:
|
|
268
|
-
_a =
|
|
262
|
+
_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
263
|
// userCreditResps: [
|
|
270
264
|
// {
|
|
271
265
|
// userCreditId: 1023,
|
|
@@ -310,12 +304,12 @@ function (_super) {
|
|
|
310
304
|
// defaultShowWallet: 'Balance',
|
|
311
305
|
// };
|
|
312
306
|
|
|
313
|
-
if (data.customize.layout === 'layout2' && this.
|
|
307
|
+
if (data.customize.layout === 'layout2' && this.carouselRef) {
|
|
314
308
|
defaultShowIndex_1 = 0;
|
|
315
309
|
data.groupSource.forEach(function (f, i) {
|
|
316
310
|
if (f.sourceType === defaultShowWallet) defaultShowIndex_1 = i;
|
|
317
311
|
});
|
|
318
|
-
this.
|
|
312
|
+
(_c = this.carouselRef.current) === null || _c === void 0 ? void 0 : _c.slideTo(defaultShowIndex_1);
|
|
319
313
|
}
|
|
320
314
|
|
|
321
315
|
bnplObj = userCreditResps === null || userCreditResps === void 0 ? void 0 : userCreditResps.find(function (item) {
|
|
@@ -388,7 +382,7 @@ function (_super) {
|
|
|
388
382
|
});
|
|
389
383
|
|
|
390
384
|
if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
|
|
391
|
-
_this.
|
|
385
|
+
_this.carouselRef.current.slideTo(nextIndex);
|
|
392
386
|
}
|
|
393
387
|
};
|
|
394
388
|
|
|
@@ -402,13 +396,13 @@ function (_super) {
|
|
|
402
396
|
this.destroy = (0, _mobx.autorun)(function () {
|
|
403
397
|
var _a;
|
|
404
398
|
|
|
405
|
-
if (_this.props.data.customize.layout === 'layout2' && _this.
|
|
399
|
+
if (_this.props.data.customize.layout === 'layout2' && _this.carouselRef) {
|
|
406
400
|
_this.sliderGoTo(_this.props.data.groupSource);
|
|
407
401
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
408
402
|
|
|
409
403
|
|
|
410
404
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
411
|
-
(_a = _this.
|
|
405
|
+
(_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.stopPlay();
|
|
412
406
|
}
|
|
413
407
|
}
|
|
414
408
|
});
|
|
@@ -417,13 +411,13 @@ function (_super) {
|
|
|
417
411
|
WalletMobile.prototype.componentWillReceiveProps = function (nextProps) {
|
|
418
412
|
var _a, _b;
|
|
419
413
|
|
|
420
|
-
if (nextProps.data.customize.layout === 'layout2' && this.
|
|
414
|
+
if (nextProps.data.customize.layout === 'layout2' && this.carouselRef) {
|
|
421
415
|
this.sliderGoTo(nextProps.data.groupSource);
|
|
422
416
|
|
|
423
417
|
if (nextProps.data.setting.autoplay.open) {
|
|
424
|
-
(_a = this.
|
|
418
|
+
(_a = this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.startPlay();
|
|
425
419
|
} else {
|
|
426
|
-
(_b = this.
|
|
420
|
+
(_b = this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.stopPlay();
|
|
427
421
|
}
|
|
428
422
|
}
|
|
429
423
|
};
|
|
@@ -431,20 +425,21 @@ function (_super) {
|
|
|
431
425
|
WalletMobile.prototype.render = function () {
|
|
432
426
|
var _this = this;
|
|
433
427
|
|
|
434
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
428
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
435
429
|
|
|
436
430
|
var data = this.props.data;
|
|
437
431
|
var sliderIndex = this.state.sliderIndex;
|
|
438
432
|
var colNum = data.customize.rowNum;
|
|
433
|
+
var autoplay = (_b = (_a = data.setting) === null || _a === void 0 ? void 0 : _a.autoplay) === null || _b === void 0 ? void 0 : _b.open;
|
|
439
434
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
440
435
|
|
|
441
436
|
if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
|
|
442
|
-
|
|
437
|
+
autoplay = false;
|
|
443
438
|
}
|
|
444
439
|
|
|
445
440
|
var navStyle = {
|
|
446
|
-
fontSize: (0, _commonUtil.convertToRem)((
|
|
447
|
-
color: (
|
|
441
|
+
fontSize: (0, _commonUtil.convertToRem)((_d = (_c = data.setting) === null || _c === void 0 ? void 0 : _c.navigation) === null || _d === void 0 ? void 0 : _d.size),
|
|
442
|
+
color: (_f = (_e = data.setting) === null || _e === void 0 ? void 0 : _e.navigation) === null || _f === void 0 ? void 0 : _f.color
|
|
448
443
|
};
|
|
449
444
|
|
|
450
445
|
var getItemContent = function getItemContent(item, preItem, nextItem) {
|
|
@@ -568,44 +563,37 @@ function (_super) {
|
|
|
568
563
|
}, getItemContent(item));
|
|
569
564
|
})) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
570
565
|
className: "carousel-layout"
|
|
571
|
-
}, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(
|
|
566
|
+
}, data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
|
|
572
567
|
className: "carousel-icon-left",
|
|
573
568
|
onClick: function onClick() {
|
|
574
|
-
return _this.
|
|
569
|
+
return _this.carouselRef.current.toPrev();
|
|
575
570
|
},
|
|
576
571
|
onMouseEnter: this.mouseEnterBtn,
|
|
577
572
|
onMouseLeave: this.mouseLeaveBtn,
|
|
578
573
|
style: navStyle,
|
|
579
574
|
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) {
|
|
575
|
+
}), /*#__PURE__*/_react["default"].createElement(_common.CardCarousel, {
|
|
576
|
+
ref: this.carouselRef,
|
|
577
|
+
autoplay: autoplay,
|
|
578
|
+
delay: ((_h = (_g = data.setting) === null || _g === void 0 ? void 0 : _g.autoplay) === null || _h === void 0 ? void 0 : _h.interval) * 1000,
|
|
579
|
+
onChange: function onChange(index) {
|
|
588
580
|
return _this.setState({
|
|
589
|
-
sliderIndex:
|
|
581
|
+
sliderIndex: index
|
|
590
582
|
});
|
|
591
|
-
}
|
|
592
|
-
onSwiper: function onSwiper(swiper) {
|
|
593
|
-
return _this.swiperRef = swiper;
|
|
594
|
-
},
|
|
595
|
-
slidesPerView: 1
|
|
583
|
+
}
|
|
596
584
|
}, data.groupSource.map(function (item, index) {
|
|
597
585
|
var preItemFirst = data.groupSource.length > 1 ? data.groupSource[data.groupSource.length - 1] : null;
|
|
598
586
|
var preItemLast = data.groupSource.length > 1 ? data.groupSource[0] : null;
|
|
599
587
|
var preItem = index === 0 ? preItemFirst : data.groupSource[index - 1];
|
|
600
588
|
var nextItem = index === data.groupSource.length - 1 ? preItemLast : data.groupSource[index + 1];
|
|
601
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
589
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
602
590
|
key: item.id,
|
|
603
591
|
className: "item-wrap"
|
|
604
|
-
}, getItemContent(item, preItem, nextItem))
|
|
605
|
-
})), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(
|
|
592
|
+
}, getItemContent(item, preItem, nextItem));
|
|
593
|
+
})), data.setting.navigation.open && data.groupSource.length > 1 && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
|
|
606
594
|
className: "carousel-icon-right",
|
|
607
595
|
onClick: function onClick() {
|
|
608
|
-
return _this.
|
|
596
|
+
return _this.carouselRef.current.toNext();
|
|
609
597
|
},
|
|
610
598
|
onMouseEnter: this.mouseEnterBtn,
|
|
611
599
|
onMouseLeave: this.mouseLeaveBtn,
|
|
@@ -620,7 +608,7 @@ function (_super) {
|
|
|
620
608
|
active: i == sliderIndex
|
|
621
609
|
}),
|
|
622
610
|
onClick: function onClick() {
|
|
623
|
-
return _this.
|
|
611
|
+
return _this.carouselRef.current.slideTo(i);
|
|
624
612
|
},
|
|
625
613
|
style: (0, _commonUtil.pxToRem)({
|
|
626
614
|
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.47",
|
|
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",
|