@fonixtree/magic-design 1.0.149 → 1.0.150
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/ProductCardModal/index.js +10 -0
- package/es/common/ProductCardModal/index.less +21 -2
- package/es/composite-comp/dito/components/SearchDITO/pc/index.js +47 -3
- package/es/composite-comp/dito/components/SearchDITO/pc/index.less +15 -0
- package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +0 -2
- package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +80 -3
- package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less +17 -0
- package/es/constants/index.js +4 -1
- package/es/utils/businessUtil.js +13 -2
- package/lib/common/ProductCardModal/index.js +10 -0
- package/lib/common/ProductCardModal/index.less +21 -2
- package/lib/composite-comp/dito/components/SearchDITO/pc/index.js +47 -3
- package/lib/composite-comp/dito/components/SearchDITO/pc/index.less +15 -0
- package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js +0 -2
- package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js +80 -3
- package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less +17 -0
- package/lib/constants/index.js +4 -1
- package/lib/utils/businessUtil.js +13 -2
- package/package.json +1 -1
|
@@ -160,6 +160,16 @@ function ProductCardModal(_a) {
|
|
|
160
160
|
alt: "",
|
|
161
161
|
className: "dotIcon",
|
|
162
162
|
src: _dotIcon["default"]
|
|
163
|
+
}), index === active && /*#__PURE__*/_react["default"].createElement("div", {
|
|
164
|
+
className: "cardLeft",
|
|
165
|
+
onClick: function onClick(e) {
|
|
166
|
+
return handlePrev(e);
|
|
167
|
+
}
|
|
168
|
+
}), index === active && /*#__PURE__*/_react["default"].createElement("div", {
|
|
169
|
+
className: "cardRight",
|
|
170
|
+
onClick: function onClick(e) {
|
|
171
|
+
return handleNext(e);
|
|
172
|
+
}
|
|
163
173
|
})));
|
|
164
174
|
}))), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
|
|
165
175
|
className: "iconLeft",
|
|
@@ -25,6 +25,25 @@
|
|
|
25
25
|
top: 0;
|
|
26
26
|
bottom: 0;
|
|
27
27
|
margin: auto;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
|
|
30
|
+
.cardLeft {
|
|
31
|
+
width: 50%;
|
|
32
|
+
height: 100%;
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 0;
|
|
35
|
+
left: 0;
|
|
36
|
+
z-index: 2;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.cardRight {
|
|
40
|
+
width: 50%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 0;
|
|
44
|
+
right: 0;
|
|
45
|
+
z-index: 2;
|
|
46
|
+
}
|
|
28
47
|
|
|
29
48
|
.bgImg {
|
|
30
49
|
display: block;
|
|
@@ -86,7 +105,7 @@
|
|
|
86
105
|
transform: rotate(90deg);
|
|
87
106
|
cursor: pointer;
|
|
88
107
|
position: absolute;
|
|
89
|
-
left:
|
|
108
|
+
left: 20%;
|
|
90
109
|
top: 0;
|
|
91
110
|
bottom: 0;
|
|
92
111
|
margin: auto;
|
|
@@ -97,7 +116,7 @@
|
|
|
97
116
|
transform: rotate(-90deg);
|
|
98
117
|
cursor: pointer;
|
|
99
118
|
position: absolute;
|
|
100
|
-
right:
|
|
119
|
+
right: 20%;
|
|
101
120
|
top: 0;
|
|
102
121
|
bottom: 0;
|
|
103
122
|
margin: auto;
|
|
@@ -21,6 +21,8 @@ var _common = require("../../../../../common");
|
|
|
21
21
|
|
|
22
22
|
var _commonUtil = require("../../../../../utils/commonUtil");
|
|
23
23
|
|
|
24
|
+
var _businessUtil = require("../../../../../utils/businessUtil");
|
|
25
|
+
|
|
24
26
|
var _components = require("../../../../../meta-comp/components");
|
|
25
27
|
|
|
26
28
|
require("slick-carousel/slick/slick.css");
|
|
@@ -234,7 +236,8 @@ function (_super) {
|
|
|
234
236
|
visible: false,
|
|
235
237
|
relativeLeft: 0,
|
|
236
238
|
logVisible: false,
|
|
237
|
-
userInfo: {}
|
|
239
|
+
userInfo: {},
|
|
240
|
+
cartNum: 0
|
|
238
241
|
};
|
|
239
242
|
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
240
243
|
_this.destroy = null;
|
|
@@ -468,6 +471,43 @@ function (_super) {
|
|
|
468
471
|
});
|
|
469
472
|
};
|
|
470
473
|
|
|
474
|
+
_this.getCartCount = function () {
|
|
475
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
476
|
+
var num, res;
|
|
477
|
+
return __generator(this, function (_a) {
|
|
478
|
+
switch (_a.label) {
|
|
479
|
+
case 0:
|
|
480
|
+
num = 0;
|
|
481
|
+
if (!(0, _commonUtil.isLogin)()) return [3
|
|
482
|
+
/*break*/
|
|
483
|
+
, 2];
|
|
484
|
+
return [4
|
|
485
|
+
/*yield*/
|
|
486
|
+
, (0, _commonUtil.commonFetch)('/designer/v1/h5/carts/num', {}, 'GET')];
|
|
487
|
+
|
|
488
|
+
case 1:
|
|
489
|
+
res = _a.sent();
|
|
490
|
+
num = res.num;
|
|
491
|
+
return [3
|
|
492
|
+
/*break*/
|
|
493
|
+
, 3];
|
|
494
|
+
|
|
495
|
+
case 2:
|
|
496
|
+
num = (0, _businessUtil.getTempCartCount)();
|
|
497
|
+
_a.label = 3;
|
|
498
|
+
|
|
499
|
+
case 3:
|
|
500
|
+
this.setState({
|
|
501
|
+
cartNum: num
|
|
502
|
+
});
|
|
503
|
+
return [2
|
|
504
|
+
/*return*/
|
|
505
|
+
];
|
|
506
|
+
}
|
|
507
|
+
});
|
|
508
|
+
});
|
|
509
|
+
};
|
|
510
|
+
|
|
471
511
|
return _this;
|
|
472
512
|
}
|
|
473
513
|
|
|
@@ -478,6 +518,7 @@ function (_super) {
|
|
|
478
518
|
this.getUserInfo();
|
|
479
519
|
}
|
|
480
520
|
|
|
521
|
+
this.getCartCount();
|
|
481
522
|
this.getCategory();
|
|
482
523
|
this.destroy = (0, _mobx.autorun)(function () {
|
|
483
524
|
_this.bannerGoto(_this.props.data.groupSource);
|
|
@@ -517,7 +558,8 @@ function (_super) {
|
|
|
517
558
|
relativeLeft = _s.relativeLeft,
|
|
518
559
|
catgImg = _s.catgImg,
|
|
519
560
|
logVisible = _s.logVisible,
|
|
520
|
-
userInfo = _s.userInfo
|
|
561
|
+
userInfo = _s.userInfo,
|
|
562
|
+
cartNum = _s.cartNum;
|
|
521
563
|
var autoplay = data.setting.autoplay.open;
|
|
522
564
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
523
565
|
|
|
@@ -602,7 +644,9 @@ function (_super) {
|
|
|
602
644
|
},
|
|
603
645
|
size: 24,
|
|
604
646
|
type: "icon-ShoppingCartSimple1"
|
|
605
|
-
})
|
|
647
|
+
}), cartNum > 0 && /*#__PURE__*/_react["default"].createElement("span", {
|
|
648
|
+
className: "cart-num"
|
|
649
|
+
}, cartNum)), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
606
650
|
className: (0, _classnames["default"])('personal-info', {
|
|
607
651
|
showLogOut: logVisible
|
|
608
652
|
}),
|
|
@@ -124,6 +124,21 @@
|
|
|
124
124
|
|
|
125
125
|
.icon-wrap {
|
|
126
126
|
cursor: pointer;
|
|
127
|
+
position: relative;
|
|
128
|
+
|
|
129
|
+
.cart-num {
|
|
130
|
+
position: absolute;
|
|
131
|
+
top: -8px;
|
|
132
|
+
right: -8px;
|
|
133
|
+
width: 20px;
|
|
134
|
+
height: 20px;
|
|
135
|
+
background-color: #ce1126;
|
|
136
|
+
color: #fff;
|
|
137
|
+
border-radius: 50%;
|
|
138
|
+
font-size: 11px;
|
|
139
|
+
line-height: 20px;
|
|
140
|
+
text-align: center;
|
|
141
|
+
}
|
|
127
142
|
}
|
|
128
143
|
|
|
129
144
|
.personal-info {
|
|
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
11
11
|
|
|
12
12
|
require("./index.less");
|
|
13
13
|
|
|
14
|
+
var _lodash = _interopRequireDefault(require("lodash.throttle"));
|
|
15
|
+
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
17
|
|
|
16
18
|
var __extends = void 0 && (void 0).__extends || function () {
|
|
@@ -48,9 +50,13 @@ function (_super) {
|
|
|
48
50
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
49
51
|
|
|
50
52
|
_this.state = {
|
|
51
|
-
playing: false
|
|
53
|
+
playing: false,
|
|
54
|
+
inside: false,
|
|
55
|
+
isNearCenter: false,
|
|
56
|
+
flag: false
|
|
52
57
|
};
|
|
53
58
|
_this.videoRef = /*#__PURE__*/_react["default"].createRef();
|
|
59
|
+
_this.cardRef = /*#__PURE__*/_react["default"].createRef();
|
|
54
60
|
|
|
55
61
|
_this.onMouseEnter = function () {
|
|
56
62
|
var _a;
|
|
@@ -74,18 +80,89 @@ function (_super) {
|
|
|
74
80
|
_this.setState({
|
|
75
81
|
playing: false
|
|
76
82
|
});
|
|
83
|
+
}; // 获取元素中心坐标
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
_this.getCenter = function (element) {
|
|
87
|
+
var rect = element.getBoundingClientRect();
|
|
88
|
+
return {
|
|
89
|
+
x: rect.left + rect.width / 2,
|
|
90
|
+
y: rect.top + rect.height / 2
|
|
91
|
+
};
|
|
92
|
+
}; // 判断是否在中心区域
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
_this.checkMouseNearCenter = function (e, radius) {
|
|
96
|
+
if (radius === void 0) {
|
|
97
|
+
radius = 35;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
|
|
104
|
+
return distance <= radius;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
_this.handleMouseMove = (0, _lodash["default"])(function (e) {
|
|
108
|
+
var dom = _this.cardRef.current;
|
|
109
|
+
var size = parseInt(getComputedStyle(dom).width);
|
|
110
|
+
var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
|
|
111
|
+
|
|
112
|
+
var y = size * 0.5 + e.offsetY * 0.5;
|
|
113
|
+
dom.style.setProperty('--x', x);
|
|
114
|
+
dom.style.setProperty('--y', y);
|
|
115
|
+
dom.style.setProperty('--size', size);
|
|
116
|
+
|
|
117
|
+
var isNear = _this.checkMouseNearCenter(e);
|
|
118
|
+
|
|
119
|
+
if (isNear) _this.setState({
|
|
120
|
+
flag: true
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
_this.setState({
|
|
124
|
+
isNearCenter: isNear,
|
|
125
|
+
inside: true
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
_this.initAnim = function () {
|
|
130
|
+
var dom = _this.cardRef.current;
|
|
131
|
+
dom.addEventListener('mousemove', _this.handleMouseMove);
|
|
132
|
+
dom.addEventListener('mouseleave', function () {
|
|
133
|
+
_this.setState({
|
|
134
|
+
inside: false,
|
|
135
|
+
flag: false
|
|
136
|
+
});
|
|
137
|
+
}); // 窗口大小变化时重新计算中心
|
|
138
|
+
// window.addEventListener('resize', () => {
|
|
139
|
+
// this.setState({
|
|
140
|
+
// inside: false,
|
|
141
|
+
// });
|
|
142
|
+
// });
|
|
77
143
|
};
|
|
78
144
|
|
|
79
145
|
return _this;
|
|
80
146
|
}
|
|
81
147
|
|
|
148
|
+
VideoItem.prototype.componentDidMount = function () {
|
|
149
|
+
this.initAnim();
|
|
150
|
+
};
|
|
151
|
+
|
|
82
152
|
VideoItem.prototype.render = function () {
|
|
83
153
|
var _a, _b, _c, _d, _e, _f;
|
|
84
154
|
|
|
85
155
|
var data = this.props.data;
|
|
86
|
-
var
|
|
156
|
+
var _g = this.state,
|
|
157
|
+
playing = _g.playing,
|
|
158
|
+
inside = _g.inside,
|
|
159
|
+
isNearCenter = _g.isNearCenter,
|
|
160
|
+
flag = _g.flag;
|
|
87
161
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
88
|
-
|
|
162
|
+
ref: this.cardRef,
|
|
163
|
+
className: (0, _classnames["default"])('slide-image-video-wrap', {
|
|
164
|
+
hover: inside && !isNearCenter && !flag
|
|
165
|
+
}),
|
|
89
166
|
onMouseEnter: this.onMouseEnter,
|
|
90
167
|
onMouseLeave: this.onMouseLeave
|
|
91
168
|
}, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
|
|
@@ -1,7 +1,24 @@
|
|
|
1
1
|
.slide-image-video-wrap {
|
|
2
2
|
position: relative;
|
|
3
|
+
transition: border-radius 0.1s linear;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
--dx: calc(var(--size) - var(--x));
|
|
6
|
+
--dy: calc(var(--size) - var(--y));
|
|
3
7
|
cursor: pointer;
|
|
4
8
|
|
|
9
|
+
&.hover {
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
border-radius:
|
|
12
|
+
~"calc(var(--x)/var(--size)*100%)"
|
|
13
|
+
~"calc(var(--dx)/var(--size)*100%)"
|
|
14
|
+
~"calc(var(--dx)/var(--size)*100%)"
|
|
15
|
+
~"calc(var(--x)/var(--size)*100%) /"
|
|
16
|
+
~"calc(var(--y)/var(--size)*100%)"
|
|
17
|
+
~"calc(var(--y)/var(--size)*100%)"
|
|
18
|
+
~"calc(var(--dy)/var(--size)*100%)"
|
|
19
|
+
~"calc(var(--dy)/var(--size)*100%)";
|
|
20
|
+
}
|
|
21
|
+
|
|
5
22
|
video {
|
|
6
23
|
width: 100%;
|
|
7
24
|
}
|
package/es/constants/index.js
CHANGED
package/es/utils/businessUtil.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
|
|
6
|
+
exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getTempCartCount = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
|
|
7
7
|
|
|
8
8
|
var _qs = _interopRequireDefault(require("qs"));
|
|
9
9
|
|
|
@@ -11,6 +11,8 @@ var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
|
|
|
11
11
|
|
|
12
12
|
var _commonUtil = require("./commonUtil");
|
|
13
13
|
|
|
14
|
+
var _storeUtil = require("./storeUtil");
|
|
15
|
+
|
|
14
16
|
var _constants = require("../constants");
|
|
15
17
|
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -483,5 +485,14 @@ var computeStyle = function computeStyle(_a, device) {
|
|
|
483
485
|
|
|
484
486
|
return wrapStyle;
|
|
485
487
|
};
|
|
488
|
+
/** 获取临时购物车 数量 */
|
|
489
|
+
|
|
490
|
+
|
|
491
|
+
exports.computeStyle = computeStyle;
|
|
492
|
+
|
|
493
|
+
var getTempCartCount = function getTempCartCount() {
|
|
494
|
+
var tempCarts = (0, _storeUtil.getStore)(_constants.STORE_KEY.TEMP_CART) || [];
|
|
495
|
+
return tempCarts.length;
|
|
496
|
+
};
|
|
486
497
|
|
|
487
|
-
exports.
|
|
498
|
+
exports.getTempCartCount = getTempCartCount;
|
|
@@ -160,6 +160,16 @@ function ProductCardModal(_a) {
|
|
|
160
160
|
alt: "",
|
|
161
161
|
className: "dotIcon",
|
|
162
162
|
src: _dotIcon["default"]
|
|
163
|
+
}), index === active && /*#__PURE__*/_react["default"].createElement("div", {
|
|
164
|
+
className: "cardLeft",
|
|
165
|
+
onClick: function onClick(e) {
|
|
166
|
+
return handlePrev(e);
|
|
167
|
+
}
|
|
168
|
+
}), index === active && /*#__PURE__*/_react["default"].createElement("div", {
|
|
169
|
+
className: "cardRight",
|
|
170
|
+
onClick: function onClick(e) {
|
|
171
|
+
return handleNext(e);
|
|
172
|
+
}
|
|
163
173
|
})));
|
|
164
174
|
}))), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
|
|
165
175
|
className: "iconLeft",
|
|
@@ -25,6 +25,25 @@
|
|
|
25
25
|
top: 0;
|
|
26
26
|
bottom: 0;
|
|
27
27
|
margin: auto;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
|
|
30
|
+
.cardLeft {
|
|
31
|
+
width: 50%;
|
|
32
|
+
height: 100%;
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 0;
|
|
35
|
+
left: 0;
|
|
36
|
+
z-index: 2;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.cardRight {
|
|
40
|
+
width: 50%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 0;
|
|
44
|
+
right: 0;
|
|
45
|
+
z-index: 2;
|
|
46
|
+
}
|
|
28
47
|
|
|
29
48
|
.bgImg {
|
|
30
49
|
display: block;
|
|
@@ -86,7 +105,7 @@
|
|
|
86
105
|
transform: rotate(90deg);
|
|
87
106
|
cursor: pointer;
|
|
88
107
|
position: absolute;
|
|
89
|
-
left:
|
|
108
|
+
left: 20%;
|
|
90
109
|
top: 0;
|
|
91
110
|
bottom: 0;
|
|
92
111
|
margin: auto;
|
|
@@ -97,7 +116,7 @@
|
|
|
97
116
|
transform: rotate(-90deg);
|
|
98
117
|
cursor: pointer;
|
|
99
118
|
position: absolute;
|
|
100
|
-
right:
|
|
119
|
+
right: 20%;
|
|
101
120
|
top: 0;
|
|
102
121
|
bottom: 0;
|
|
103
122
|
margin: auto;
|
|
@@ -21,6 +21,8 @@ var _common = require("../../../../../common");
|
|
|
21
21
|
|
|
22
22
|
var _commonUtil = require("../../../../../utils/commonUtil");
|
|
23
23
|
|
|
24
|
+
var _businessUtil = require("../../../../../utils/businessUtil");
|
|
25
|
+
|
|
24
26
|
var _components = require("../../../../../meta-comp/components");
|
|
25
27
|
|
|
26
28
|
require("slick-carousel/slick/slick.css");
|
|
@@ -234,7 +236,8 @@ function (_super) {
|
|
|
234
236
|
visible: false,
|
|
235
237
|
relativeLeft: 0,
|
|
236
238
|
logVisible: false,
|
|
237
|
-
userInfo: {}
|
|
239
|
+
userInfo: {},
|
|
240
|
+
cartNum: 0
|
|
238
241
|
};
|
|
239
242
|
_this.carouselRef = /*#__PURE__*/_react["default"].createRef();
|
|
240
243
|
_this.destroy = null;
|
|
@@ -468,6 +471,43 @@ function (_super) {
|
|
|
468
471
|
});
|
|
469
472
|
};
|
|
470
473
|
|
|
474
|
+
_this.getCartCount = function () {
|
|
475
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
476
|
+
var num, res;
|
|
477
|
+
return __generator(this, function (_a) {
|
|
478
|
+
switch (_a.label) {
|
|
479
|
+
case 0:
|
|
480
|
+
num = 0;
|
|
481
|
+
if (!(0, _commonUtil.isLogin)()) return [3
|
|
482
|
+
/*break*/
|
|
483
|
+
, 2];
|
|
484
|
+
return [4
|
|
485
|
+
/*yield*/
|
|
486
|
+
, (0, _commonUtil.commonFetch)('/designer/v1/h5/carts/num', {}, 'GET')];
|
|
487
|
+
|
|
488
|
+
case 1:
|
|
489
|
+
res = _a.sent();
|
|
490
|
+
num = res.num;
|
|
491
|
+
return [3
|
|
492
|
+
/*break*/
|
|
493
|
+
, 3];
|
|
494
|
+
|
|
495
|
+
case 2:
|
|
496
|
+
num = (0, _businessUtil.getTempCartCount)();
|
|
497
|
+
_a.label = 3;
|
|
498
|
+
|
|
499
|
+
case 3:
|
|
500
|
+
this.setState({
|
|
501
|
+
cartNum: num
|
|
502
|
+
});
|
|
503
|
+
return [2
|
|
504
|
+
/*return*/
|
|
505
|
+
];
|
|
506
|
+
}
|
|
507
|
+
});
|
|
508
|
+
});
|
|
509
|
+
};
|
|
510
|
+
|
|
471
511
|
return _this;
|
|
472
512
|
}
|
|
473
513
|
|
|
@@ -478,6 +518,7 @@ function (_super) {
|
|
|
478
518
|
this.getUserInfo();
|
|
479
519
|
}
|
|
480
520
|
|
|
521
|
+
this.getCartCount();
|
|
481
522
|
this.getCategory();
|
|
482
523
|
this.destroy = (0, _mobx.autorun)(function () {
|
|
483
524
|
_this.bannerGoto(_this.props.data.groupSource);
|
|
@@ -517,7 +558,8 @@ function (_super) {
|
|
|
517
558
|
relativeLeft = _s.relativeLeft,
|
|
518
559
|
catgImg = _s.catgImg,
|
|
519
560
|
logVisible = _s.logVisible,
|
|
520
|
-
userInfo = _s.userInfo
|
|
561
|
+
userInfo = _s.userInfo,
|
|
562
|
+
cartNum = _s.cartNum;
|
|
521
563
|
var autoplay = data.setting.autoplay.open;
|
|
522
564
|
/** 设计器模式下 如果选中特定group 自动播放关闭 */
|
|
523
565
|
|
|
@@ -602,7 +644,9 @@ function (_super) {
|
|
|
602
644
|
},
|
|
603
645
|
size: 24,
|
|
604
646
|
type: "icon-ShoppingCartSimple1"
|
|
605
|
-
})
|
|
647
|
+
}), cartNum > 0 && /*#__PURE__*/_react["default"].createElement("span", {
|
|
648
|
+
className: "cart-num"
|
|
649
|
+
}, cartNum)), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
606
650
|
className: (0, _classnames["default"])('personal-info', {
|
|
607
651
|
showLogOut: logVisible
|
|
608
652
|
}),
|
|
@@ -124,6 +124,21 @@
|
|
|
124
124
|
|
|
125
125
|
.icon-wrap {
|
|
126
126
|
cursor: pointer;
|
|
127
|
+
position: relative;
|
|
128
|
+
|
|
129
|
+
.cart-num {
|
|
130
|
+
position: absolute;
|
|
131
|
+
top: -8px;
|
|
132
|
+
right: -8px;
|
|
133
|
+
width: 20px;
|
|
134
|
+
height: 20px;
|
|
135
|
+
background-color: #ce1126;
|
|
136
|
+
color: #fff;
|
|
137
|
+
border-radius: 50%;
|
|
138
|
+
font-size: 11px;
|
|
139
|
+
line-height: 20px;
|
|
140
|
+
text-align: center;
|
|
141
|
+
}
|
|
127
142
|
}
|
|
128
143
|
|
|
129
144
|
.personal-info {
|
|
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
11
11
|
|
|
12
12
|
require("./index.less");
|
|
13
13
|
|
|
14
|
+
var _lodash = _interopRequireDefault(require("lodash.throttle"));
|
|
15
|
+
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
17
|
|
|
16
18
|
var __extends = void 0 && (void 0).__extends || function () {
|
|
@@ -48,9 +50,13 @@ function (_super) {
|
|
|
48
50
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
49
51
|
|
|
50
52
|
_this.state = {
|
|
51
|
-
playing: false
|
|
53
|
+
playing: false,
|
|
54
|
+
inside: false,
|
|
55
|
+
isNearCenter: false,
|
|
56
|
+
flag: false
|
|
52
57
|
};
|
|
53
58
|
_this.videoRef = /*#__PURE__*/_react["default"].createRef();
|
|
59
|
+
_this.cardRef = /*#__PURE__*/_react["default"].createRef();
|
|
54
60
|
|
|
55
61
|
_this.onMouseEnter = function () {
|
|
56
62
|
var _a;
|
|
@@ -74,18 +80,89 @@ function (_super) {
|
|
|
74
80
|
_this.setState({
|
|
75
81
|
playing: false
|
|
76
82
|
});
|
|
83
|
+
}; // 获取元素中心坐标
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
_this.getCenter = function (element) {
|
|
87
|
+
var rect = element.getBoundingClientRect();
|
|
88
|
+
return {
|
|
89
|
+
x: rect.left + rect.width / 2,
|
|
90
|
+
y: rect.top + rect.height / 2
|
|
91
|
+
};
|
|
92
|
+
}; // 判断是否在中心区域
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
_this.checkMouseNearCenter = function (e, radius) {
|
|
96
|
+
if (radius === void 0) {
|
|
97
|
+
radius = 35;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
|
|
104
|
+
return distance <= radius;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
_this.handleMouseMove = (0, _lodash["default"])(function (e) {
|
|
108
|
+
var dom = _this.cardRef.current;
|
|
109
|
+
var size = parseInt(getComputedStyle(dom).width);
|
|
110
|
+
var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
|
|
111
|
+
|
|
112
|
+
var y = size * 0.5 + e.offsetY * 0.5;
|
|
113
|
+
dom.style.setProperty('--x', x);
|
|
114
|
+
dom.style.setProperty('--y', y);
|
|
115
|
+
dom.style.setProperty('--size', size);
|
|
116
|
+
|
|
117
|
+
var isNear = _this.checkMouseNearCenter(e);
|
|
118
|
+
|
|
119
|
+
if (isNear) _this.setState({
|
|
120
|
+
flag: true
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
_this.setState({
|
|
124
|
+
isNearCenter: isNear,
|
|
125
|
+
inside: true
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
_this.initAnim = function () {
|
|
130
|
+
var dom = _this.cardRef.current;
|
|
131
|
+
dom.addEventListener('mousemove', _this.handleMouseMove);
|
|
132
|
+
dom.addEventListener('mouseleave', function () {
|
|
133
|
+
_this.setState({
|
|
134
|
+
inside: false,
|
|
135
|
+
flag: false
|
|
136
|
+
});
|
|
137
|
+
}); // 窗口大小变化时重新计算中心
|
|
138
|
+
// window.addEventListener('resize', () => {
|
|
139
|
+
// this.setState({
|
|
140
|
+
// inside: false,
|
|
141
|
+
// });
|
|
142
|
+
// });
|
|
77
143
|
};
|
|
78
144
|
|
|
79
145
|
return _this;
|
|
80
146
|
}
|
|
81
147
|
|
|
148
|
+
VideoItem.prototype.componentDidMount = function () {
|
|
149
|
+
this.initAnim();
|
|
150
|
+
};
|
|
151
|
+
|
|
82
152
|
VideoItem.prototype.render = function () {
|
|
83
153
|
var _a, _b, _c, _d, _e, _f;
|
|
84
154
|
|
|
85
155
|
var data = this.props.data;
|
|
86
|
-
var
|
|
156
|
+
var _g = this.state,
|
|
157
|
+
playing = _g.playing,
|
|
158
|
+
inside = _g.inside,
|
|
159
|
+
isNearCenter = _g.isNearCenter,
|
|
160
|
+
flag = _g.flag;
|
|
87
161
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
88
|
-
|
|
162
|
+
ref: this.cardRef,
|
|
163
|
+
className: (0, _classnames["default"])('slide-image-video-wrap', {
|
|
164
|
+
hover: inside && !isNearCenter && !flag
|
|
165
|
+
}),
|
|
89
166
|
onMouseEnter: this.onMouseEnter,
|
|
90
167
|
onMouseLeave: this.onMouseLeave
|
|
91
168
|
}, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
|
|
@@ -1,7 +1,24 @@
|
|
|
1
1
|
.slide-image-video-wrap {
|
|
2
2
|
position: relative;
|
|
3
|
+
transition: border-radius 0.1s linear;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
--dx: calc(var(--size) - var(--x));
|
|
6
|
+
--dy: calc(var(--size) - var(--y));
|
|
3
7
|
cursor: pointer;
|
|
4
8
|
|
|
9
|
+
&.hover {
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
border-radius:
|
|
12
|
+
~"calc(var(--x)/var(--size)*100%)"
|
|
13
|
+
~"calc(var(--dx)/var(--size)*100%)"
|
|
14
|
+
~"calc(var(--dx)/var(--size)*100%)"
|
|
15
|
+
~"calc(var(--x)/var(--size)*100%) /"
|
|
16
|
+
~"calc(var(--y)/var(--size)*100%)"
|
|
17
|
+
~"calc(var(--y)/var(--size)*100%)"
|
|
18
|
+
~"calc(var(--dy)/var(--size)*100%)"
|
|
19
|
+
~"calc(var(--dy)/var(--size)*100%)";
|
|
20
|
+
}
|
|
21
|
+
|
|
5
22
|
video {
|
|
6
23
|
width: 100%;
|
|
7
24
|
}
|
package/lib/constants/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
|
|
6
|
+
exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getTempCartCount = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
|
|
7
7
|
|
|
8
8
|
var _qs = _interopRequireDefault(require("qs"));
|
|
9
9
|
|
|
@@ -11,6 +11,8 @@ var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
|
|
|
11
11
|
|
|
12
12
|
var _commonUtil = require("./commonUtil");
|
|
13
13
|
|
|
14
|
+
var _storeUtil = require("./storeUtil");
|
|
15
|
+
|
|
14
16
|
var _constants = require("../constants");
|
|
15
17
|
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -483,5 +485,14 @@ var computeStyle = function computeStyle(_a, device) {
|
|
|
483
485
|
|
|
484
486
|
return wrapStyle;
|
|
485
487
|
};
|
|
488
|
+
/** 获取临时购物车 数量 */
|
|
489
|
+
|
|
490
|
+
|
|
491
|
+
exports.computeStyle = computeStyle;
|
|
492
|
+
|
|
493
|
+
var getTempCartCount = function getTempCartCount() {
|
|
494
|
+
var tempCarts = (0, _storeUtil.getStore)(_constants.STORE_KEY.TEMP_CART) || [];
|
|
495
|
+
return tempCarts.length;
|
|
496
|
+
};
|
|
486
497
|
|
|
487
|
-
exports.
|
|
498
|
+
exports.getTempCartCount = getTempCartCount;
|