@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.
@@ -2,16 +2,16 @@
2
2
 
3
3
  .d-mobile-floor-lazy-layout-load,
4
4
  .d-app-floor-lazy-layout-load {
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;
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
- position: absolute;
13
- //top: -50vh;
14
- top: -35vh;
15
- width: 100%;
16
- height: 0;
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
  );