@conecli/cone-render 0.10.1-shop3.113 → 0.10.1-shop3.114
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/dist/components/base/LazyLayoutLoad/index.module.scss +9 -9
- package/dist/components/base/LazyLayoutLoad/index.tsx +1 -1
- package/dist/components/base/Price/Double/index.tsx +1 -1
- package/dist/jumpEventReport/logEventConfig.h5.ts +1 -1
- package/dist/jumpEventReport/web.jd.ts +1 -1
- package/package.json +1 -1
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
.d-mobile-floor-lazy-layout-load,
|
|
4
4
|
.d-app-floor-lazy-layout-load {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
position: relative;
|
|
6
|
+
background: #fff
|
|
7
|
+
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAeCAMAAABT0xOcAAAAe1BMVEUAAADx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fELy0NOAAAAKHRSTlMApwmfFtYm9rWveHDm70yJHYJaD2k8IeIr6pY2X0HHfsGRZDHdu1XNmO+CqgAAAu9JREFUSMfNlNmymzAQRAchkCUhdrMZbLze/v8vjIRMKN8kRR7ykFNeVIPV9Ewj039P1TR8+eILjL7RdLFFJUO8QMS7ZmyDJvZ0nDYGY+aKKDSJpY3OwWX6uFUEY/peCNEbY4Rp6AABixFYkLQRAK3VOmAjUrawMt1GrfWtXD7rlFF3uiA6HV/p0TF1tBECEVskYe+7qqW08mqT1jruneu21/72JfHoSZ7faj2bJu6mOlgEa3qjEXKeL/ACV1s5YSbqYP6stXUeX2FZnV3wuBSZqnVWqDNCIvaFRzZIiGAIw+CS/1brQCslgOQdUBoW10C2EFJei7AkygOlAnmGeMprJq/NjhZpAIrepOpOte2Oq9EXjupIMVoiXduQ9rTo7KsODhxJYaAGuJPjgRvdkRD1KP9CawRwettyF5SbVLZ49ZbuMJxGW93XisXPKA/oXNMDEReJT6N0OfZ2V4RqX4tFQPbOQbntwrl8oXCOQmu2hVosSr6j5QcW+uvukZJP37CWzL7tQs2lH8B53Nd6eq192N/72mdfa52XhdXPx6zcXKYgikLXbaNP66M27edoAO2X+RkQ9tVRhoWC6IZkCZAbHHa1SgDHNdHDsbrLr0ojKTkfDWp6+WPh1APakMAXbVrb6B/Mn+311zlETJZOCJYChttWxedUIyvyi9bLt+J4IPcLvVYypBNaDG5TguCzmct3rUkAPSdHJRLyDEjXQ6Un3GZQBamxaU09gJg+/r+4gqV0uzixXjBfLnDzixrjhDJGNoDXXqvK76OEJaO3L1bx/FQOCSxqcfJVUWiXCydEPowHeIqaZnf3wmvNRsBiC28ttEnS+1oy+lNtOMVAzayZCwsQ5ESNREgvKKuNjjI/ewNHr9Y4N5Is98llx2U8iOQXcKczhDwAM6ObayaanfWDDwhJcMvpU8ucr6+cPji5a8+UEVMCMNo97tLm0MU2uoMmi850yrc8s8Khyzuj7+Q6U7GPMCt8mOtGljP6l/wAUcBZ6lceL/8AAAAASUVORK5CYII=')
|
|
8
|
+
center center no-repeat;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.d-mobile-prestrain-component {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
position: absolute;
|
|
13
|
+
//top: -50vh;
|
|
14
|
+
top: -35vh;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 0;
|
|
17
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Taro, { useRouter } from '@tarojs/taro'
|
|
2
1
|
isH5AndJdShopView,
|
|
3
2
|
isH5AndJdShopViewH5Scroll,
|
|
4
3
|
getSgmCustomCode,
|
|
5
4
|
draBusinessCustomReport
|
|
6
5
|
SECTION_HOME_TAB_TYPE,
|
|
7
6
|
SECTION_HOME_TAB_NAME_TYPE,
|
|
8
7
|
TaroEventType,
|
|
9
8
|
latestFromNativeMsgStorage,
|
|
10
9
|
nativePageRegisterMessage,
|
|
11
10
|
Message_Type,
|
|
12
11
|
getNativePageScrollRes,
|
|
13
12
|
const {
|
|
14
13
|
sectionType = SECTION_HOME_TAB_NAME_TYPE[
|
|
15
14
|
SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN
|
|
16
15
|
],
|
|
17
16
|
type = LazyType.FLOOR,
|
|
18
17
|
children = null,
|
|
19
18
|
placeholder = null,
|
|
20
19
|
height = 200,
|
|
21
20
|
className = '',
|
|
22
21
|
lazyNodeClassName = '',
|
|
23
22
|
containerId,
|
|
24
23
|
floorData = {},
|
|
25
24
|
} = props
|
|
26
25
|
const getRouterInfo = useRouter()
|
|
27
26
|
const getQueryData = getRouterInfo?.params || {}
|
|
28
27
|
const [componentShowState, setComponentShowState] = useState(false)
|
|
29
28
|
const [componentRenderShowState, setComponentRenderShowState] =
|
|
30
29
|
useState(false)
|
|
31
30
|
const componentLazyRef = useRef<HTMLElement | null>(null)
|
|
32
31
|
const componentShowStateRef = useRef(false)
|
|
33
32
|
const needShowHighVersion =
|
|
34
33
|
isH5AndJdShopViewH5Scroll &&
|
|
35
34
|
!(
|
|
36
35
|
global.info.queryInfo?.downgraded &&
|
|
37
36
|
global.info.queryInfo.downgraded === 'true'
|
|
38
37
|
)
|
|
39
38
|
const rootDom =
|
|
40
39
|
isH5AndJdShopView && needShowHighVersion
|
|
41
40
|
? null
|
|
42
41
|
: document.querySelector('#J_shopHomeRoot')
|
|
43
42
|
const { ref, inView } = useInView({
|
|
44
43
|
threshold: 0,
|
|
45
44
|
triggerOnce: true,
|
|
46
45
|
root: rootDom,
|
|
47
46
|
rootMargin: `0px 0px ${window.innerHeight}px 0px`,
|
|
48
47
|
})
|
|
49
48
|
useEffect(() => {
|
|
50
49
|
if (needShowHighVersion || !isH5AndJdShopView) return
|
|
51
50
|
if (type === LazyType.FLOOR) {
|
|
52
51
|
const latestRes =
|
|
53
52
|
latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
|
|
54
53
|
!componentShowStateRef.current && dealPageScrollInfo(latestRes, false)
|
|
55
54
|
Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
|
|
56
55
|
!componentShowStateRef.current && dealPageScrollInfo(res, true)
|
|
57
56
|
})
|
|
58
57
|
}
|
|
59
58
|
}, [])
|
|
60
59
|
useEffect(() => {
|
|
61
60
|
if (
|
|
62
61
|
(!needShowHighVersion && componentShowState === true) ||
|
|
63
62
|
(needShowHighVersion && inView && isH5AndJdShopView)
|
|
64
63
|
) {
|
|
65
64
|
console.log(
|
|
66
65
|
'>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染!',
|
|
67
66
|
)
|
|
68
67
|
const modularPackResult = floorData?.floorExtInfo?.modularPackResult
|
|
69
68
|
const modularPackResultObj =
|
|
70
69
|
typeof modularPackResult === 'string'
|
|
71
70
|
? JSON.parse(modularPackResult)
|
|
72
71
|
: modularPackResult
|
|
73
72
|
if (modularPackResultObj && modularPackResultObj.bundleUrl) {
|
|
74
73
|
const { bundleUrl } = modularPackResultObj
|
|
75
74
|
nativePageRegisterMessage(Message_Type.NATIVE_INJECT_JS_FILE, {
|
|
76
75
|
data: {
|
|
77
76
|
bundleUrl: [bundleUrl],
|
|
78
77
|
},
|
|
79
78
|
})
|
|
80
79
|
}
|
|
81
80
|
}
|
|
82
81
|
}, [componentShowState, inView])
|
|
83
82
|
|
|
84
83
|
const dealPageScrollInfo = (res, pageScrollTrigger) => {
|
|
85
84
|
const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
|
|
86
85
|
if (
|
|
87
86
|
typeof displayHeight === 'undefined' ||
|
|
88
87
|
typeof offSetY === 'undefined'
|
|
89
88
|
) {
|
|
90
89
|
const shopId = floorData?.floorExtInfo?.shopId
|
|
91
90
|
if (!lazyLayoutLoadErrorShopId[`${shopId}`] && pageScrollTrigger) {
|
|
92
91
|
const opt = {
|
|
93
92
|
msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
|
|
94
93
|
uid: floorData?.uid,
|
|
95
94
|
floorIdx: floorData?.floorIdx,
|
|
96
95
|
shopId: shopId,
|
|
97
96
|
moduleId: floorData?.moduleId,
|
|
98
97
|
moduleName: floorData?.moduleName,
|
|
99
98
|
middleTemplateId: floorData?.middleTemplateId,
|
|
100
99
|
}
|
|
101
100
|
draBusinessCustomReport({
|
|
102
101
|
eventName: 'business',
|
|
103
102
|
errorName: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
|
|
104
103
|
errorMessage: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
|
|
105
104
|
extraData: JSON.stringify(opt)
|
|
106
105
|
})
|
|
107
106
|
lazyLayoutLoadErrorShopId[`${shopId}`] = true
|
|
108
107
|
}
|
|
109
108
|
return
|
|
110
109
|
}
|
|
111
110
|
if (componentLazyRef.current) {
|
|
112
111
|
const eleClientRect = componentLazyRef.current.getBoundingClientRect()
|
|
113
112
|
const getContainerHeightOffSetY = displayHeight + offSetY
|
|
114
113
|
const eleOffsetTop = Math.ceil(eleClientRect.top)
|
|
115
114
|
const eleOffsetHeight = Math.ceil(eleClientRect.height)
|
|
116
115
|
const eleOffsetTopHeight = eleOffsetTop + eleOffsetHeight
|
|
117
116
|
if (!componentShowStateRef.current) {
|
|
118
117
|
if (getContainerHeightOffSetY > eleOffsetTop) {
|
|
119
118
|
componentShowStateRef.current = true
|
|
120
119
|
setComponentShowState(true)
|
|
121
120
|
Taro.nextTick(() => {
|
|
122
121
|
setComponentRenderShowState(true)
|
|
123
122
|
})
|
|
124
123
|
}
|
|
125
124
|
}
|
|
126
125
|
}
|
|
127
126
|
}
|
|
128
127
|
return isH5AndJdShopView && !needShowHighVersion ? (
|
|
129
128
|
<div
|
|
130
129
|
id={`${containerId}_lazy`}
|
|
131
130
|
ref={componentLazyRef}
|
|
132
131
|
className={classNames(
|
|
133
132
|
lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
|
|
134
133
|
'd-app-floor-lazy-load',
|
|
135
134
|
)}
|
|
136
135
|
style={{
|
|
137
136
|
minHeight: `${componentRenderShowState ? 'auto' : height + 'px'}`,
|
|
138
137
|
backgroundColor: componentRenderShowState ? 'transparent' : '#ffffff',
|
|
139
138
|
}}
|
|
140
139
|
>
|
|
141
140
|
{componentShowState ? children : placeholder}
|
|
142
141
|
</div>
|
|
143
142
|
) : (
|
|
144
143
|
<div
|
|
145
144
|
id={`${containerId}_lazy`}
|
|
146
145
|
className={classNames(
|
|
147
146
|
lazyLayoutLoadStyle['d-mobile-floor-lazy-layout-load'],
|
|
148
147
|
'd-mobile-floor-lazy-load',
|
|
149
148
|
lazyNodeClassName,
|
|
150
149
|
)}
|
|
151
150
|
ref={ref}
|
|
152
151
|
style={{
|
|
153
152
|
minHeight: `${inView ? 'auto' : height + 'px'}`,
|
|
154
153
|
backgroundColor: inView ? 'transparent' : '#ffffff',
|
|
155
154
|
}}
|
|
156
155
|
>
|
|
157
156
|
{inView ? children : placeholder}
|
|
158
157
|
</div>
|
|
159
158
|
)
|
|
159
|
+
import Taro from '@tarojs/taro';
|
|
160
160
|
isH5AndJdShopView,
|
|
161
161
|
isH5AndJdShopViewH5Scroll,
|
|
162
162
|
getSgmCustomCode,
|
|
163
163
|
draBusinessCustomReport,
|
|
164
164
|
SECTION_HOME_TAB_TYPE,
|
|
165
165
|
SECTION_HOME_TAB_NAME_TYPE,
|
|
166
166
|
TaroEventType,
|
|
167
167
|
latestFromNativeMsgStorage,
|
|
168
168
|
nativePageRegisterMessage,
|
|
169
169
|
Message_Type,
|
|
170
170
|
getNativePageScrollRes,
|
|
171
171
|
const {
|
|
172
172
|
sectionType = SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
|
|
173
173
|
type = LazyType.FLOOR,
|
|
174
174
|
children = null,
|
|
175
175
|
placeholder = null,
|
|
176
176
|
height = 200,
|
|
177
177
|
className = '',
|
|
178
178
|
lazyNodeClassName = '',
|
|
179
179
|
containerId,
|
|
180
180
|
floorData = {},
|
|
181
181
|
rootMargin = `0px 0px ${window.innerHeight}px 0px`,
|
|
182
182
|
} = props;
|
|
183
183
|
const [componentShowState, setComponentShowState] = useState(false);
|
|
184
184
|
const [componentRenderShowState, setComponentRenderShowState] = useState(false);
|
|
185
185
|
const componentLazyRef = useRef<HTMLElement | null>(null);
|
|
186
186
|
const componentShowStateRef = useRef(false);
|
|
187
187
|
const needShowHighVersion =
|
|
188
188
|
isH5AndJdShopViewH5Scroll &&
|
|
189
189
|
!(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === 'true');
|
|
190
190
|
const rootDom =
|
|
191
191
|
isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot');
|
|
192
192
|
const { ref, inView } = useInView({
|
|
193
193
|
threshold: 0,
|
|
194
194
|
triggerOnce: true,
|
|
195
195
|
root: rootDom,
|
|
196
196
|
rootMargin,
|
|
197
197
|
});
|
|
198
198
|
useEffect(() => {
|
|
199
199
|
if (needShowHighVersion || !isH5AndJdShopView) return;
|
|
200
200
|
if (type === LazyType.FLOOR) {
|
|
201
201
|
const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {};
|
|
202
202
|
!componentShowStateRef.current && dealPageScrollInfo(latestRes, false);
|
|
203
203
|
Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
|
|
204
204
|
!componentShowStateRef.current && dealPageScrollInfo(res, true);
|
|
205
205
|
});
|
|
206
206
|
}
|
|
207
207
|
}, []);
|
|
208
208
|
useEffect(() => {
|
|
209
209
|
if (
|
|
210
210
|
(!needShowHighVersion && componentShowState === true) ||
|
|
211
211
|
(needShowHighVersion && inView && isH5AndJdShopView)
|
|
212
212
|
) {
|
|
213
213
|
console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染!');
|
|
214
214
|
const modularPackResult = floorData?.floorExtInfo?.modularPackResult;
|
|
215
215
|
const modularPackResultObj =
|
|
216
216
|
typeof modularPackResult === 'string' ? JSON.parse(modularPackResult) : modularPackResult;
|
|
217
217
|
if (modularPackResultObj) {
|
|
218
218
|
const url =
|
|
219
219
|
window?.taroRenderVersion === 0
|
|
220
220
|
? modularPackResultObj.bundleUrl
|
|
221
221
|
: modularPackResultObj.bundleUrlV2;
|
|
222
222
|
if (url) {
|
|
223
223
|
nativePageRegisterMessage(Message_Type.NATIVE_INJECT_JS_FILE, {
|
|
224
224
|
data: {
|
|
225
225
|
bundleUrl: [url],
|
|
226
226
|
},
|
|
227
227
|
});
|
|
228
228
|
}
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
231
|
}, [componentShowState, inView]);
|
|
232
232
|
|
|
233
233
|
const dealPageScrollInfo = (res, pageScrollTrigger) => {
|
|
234
234
|
const { displayHeight, offSetY } = getNativePageScrollRes(res) || {};
|
|
235
235
|
if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') {
|
|
236
236
|
const shopId = floorData?.floorExtInfo?.shopId;
|
|
237
237
|
if (!lazyLayoutLoadErrorShopId[`${shopId}`] && pageScrollTrigger) {
|
|
238
238
|
const opt = {
|
|
239
239
|
msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
|
|
240
240
|
uid: floorData?.uid,
|
|
241
241
|
floorIdx: floorData?.floorIdx,
|
|
242
242
|
shopId: shopId,
|
|
243
243
|
moduleId: floorData?.moduleId,
|
|
244
244
|
moduleName: floorData?.moduleName,
|
|
245
245
|
middleTemplateId: floorData?.middleTemplateId,
|
|
246
246
|
};
|
|
247
247
|
draBusinessCustomReport({
|
|
248
248
|
eventName: 'business',
|
|
249
249
|
errorName: getSgmCustomCode(SgmCustomCode.FLOORLAZYLOAD_DATA),
|
|
250
250
|
errorMessage: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
|
|
251
251
|
extraData: JSON.stringify(opt),
|
|
252
252
|
});
|
|
253
253
|
lazyLayoutLoadErrorShopId[`${shopId}`] = true;
|
|
254
254
|
}
|
|
255
255
|
return;
|
|
256
256
|
}
|
|
257
257
|
if (componentLazyRef.current) {
|
|
258
258
|
const eleClientRect = componentLazyRef.current.getBoundingClientRect();
|
|
259
259
|
const getContainerHeightOffSetY = displayHeight + offSetY;
|
|
260
260
|
const eleOffsetTop = Math.ceil(eleClientRect.top);
|
|
261
261
|
const eleOffsetHeight = Math.ceil(eleClientRect.height);
|
|
262
262
|
const eleOffsetTopHeight = eleOffsetTop + eleOffsetHeight;
|
|
263
263
|
if (!componentShowStateRef.current) {
|
|
264
264
|
if (getContainerHeightOffSetY > eleOffsetTop) {
|
|
265
265
|
componentShowStateRef.current = true;
|
|
266
266
|
setComponentShowState(true);
|
|
267
267
|
Taro.nextTick(() => {
|
|
268
268
|
setComponentRenderShowState(true);
|
|
269
269
|
});
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
};
|
|
274
274
|
return isH5AndJdShopView && !needShowHighVersion ? (
|
|
275
275
|
<div
|
|
276
276
|
id={`${containerId}_lazy`}
|
|
277
277
|
ref={componentLazyRef}
|
|
278
278
|
className={classNames(
|
|
279
279
|
lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
|
|
280
280
|
'd-app-floor-lazy-load',
|
|
281
281
|
)}
|
|
282
282
|
style={{
|
|
283
283
|
minHeight: `${componentRenderShowState ? 'auto' : height + 'px'}`,
|
|
284
284
|
backgroundColor: componentRenderShowState ? 'transparent' : '#ffffff',
|
|
285
285
|
}}
|
|
286
286
|
>
|
|
287
287
|
{componentShowState ? children : placeholder}
|
|
288
288
|
</div>
|
|
289
289
|
) : (
|
|
290
290
|
<div
|
|
291
291
|
id={`${containerId}_lazy`}
|
|
292
292
|
className={classNames(
|
|
293
293
|
lazyLayoutLoadStyle['d-mobile-floor-lazy-layout-load'],
|
|
294
294
|
'd-mobile-floor-lazy-load',
|
|
295
295
|
lazyNodeClassName,
|
|
296
296
|
)}
|
|
297
297
|
ref={ref}
|
|
298
298
|
style={{
|
|
299
299
|
minHeight: `${inView ? 'auto' : height + 'px'}`,
|
|
300
300
|
backgroundColor: inView ? 'transparent' : '#ffffff',
|
|
301
301
|
}}
|
|
302
302
|
>
|
|
303
303
|
{inView ? children : placeholder}
|
|
304
304
|
</div>
|
|
305
305
|
);
|