@conecli/cone-render 0.8.39 → 0.8.40

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.
Files changed (90) hide show
  1. package/README.md +7 -1
  2. package/dist/api/index.ts +1 -1
  3. package/dist/common/const.ts +1 -1
  4. package/dist/common/environmentType.ts +1 -0
  5. package/dist/common/index.h5.ts +1 -1
  6. package/dist/common/index.jd.ts +1 -1
  7. package/dist/common/index.ts +1 -1
  8. package/dist/common/index.weapp.ts +1 -1
  9. package/dist/common/jdplayerSdk.ts +1 -0
  10. package/dist/common/sgmCustomCode.ts +1 -0
  11. package/dist/common/token/token.jd.ts +1 -1
  12. package/dist/common/token/token.ts +1 -1
  13. package/dist/common/wxappApi.jd.ts +1 -0
  14. package/dist/components/ErrorBoundary.tsx +1 -1
  15. package/dist/components/base/CountDown/index.tsx +1 -1
  16. package/dist/components/base/CustomScrollView/index.jd.tsx +1 -0
  17. package/dist/components/base/CustomScrollView/index.module.scss +7 -0
  18. package/dist/components/base/CustomScrollView/index.tsx +1 -1
  19. package/dist/components/base/CustomVideo/index.tsx +1 -1
  20. package/dist/components/base/Dialog/index.module.scss +5 -0
  21. package/dist/components/base/Dialog/index.tsx +1 -1
  22. package/dist/components/base/Exposure/index.h5.tsx +1 -1
  23. package/dist/components/base/ExposureSmart/index.h5.tsx +1 -1
  24. package/dist/components/base/ExposureSmart/index.tsx +1 -1
  25. package/dist/components/base/InOrOutViewObserver/index.tsx +1 -1
  26. package/dist/components/base/InViewRender/index.tsx +1 -1
  27. package/dist/components/base/ItemViewExposureSmart/index.tsx +1 -1
  28. package/dist/components/base/LazyLayoutLoad/index.tsx +1 -1
  29. package/dist/components/base/LazyLayoutLoad/index.weapp.tsx +1 -1
  30. package/dist/components/base/LazyLoadImage/const.ts +1 -1
  31. package/dist/components/base/LazyLoadImage/index.h5.module.scss +20 -20
  32. package/dist/components/base/LazyLoadImage/index.h5.tsx +1 -1
  33. package/dist/components/base/NetworkDataError/const.ts +1 -1
  34. package/dist/components/base/NetworkDataError/index.module.scss +4 -0
  35. package/dist/components/base/NetworkDataError/index.tsx +1 -1
  36. package/dist/components/base/Skeleton/index.tsx +1 -1
  37. package/dist/components/decorate/EmptyFloorModule/index.tsx +1 -1
  38. package/dist/components/floorItem.jd.tsx +1 -1
  39. package/dist/components/floorItem.weapp.tsx +1 -1
  40. package/dist/components/isv/Floor/index.tsx +1 -1
  41. package/dist/components/remoteFloorItem.tsx +1 -1
  42. package/dist/interface/common.ts +1 -1
  43. package/dist/interface/component.ts +1 -1
  44. package/dist/interface/jumpEventReport.ts +1 -1
  45. package/dist/interface/service.ts +1 -1
  46. package/dist/interface/utils.ts +1 -1
  47. package/dist/jumpEventReport/base.ts +1 -1
  48. package/dist/jumpEventReport/const.ts +1 -1
  49. package/dist/jumpEventReport/createReportFloorData.ts +1 -1
  50. package/dist/jumpEventReport/index.h5.ts +1 -1
  51. package/dist/jumpEventReport/index.jd.ts +1 -1
  52. package/dist/jumpEventReport/index.weapp.ts +1 -1
  53. package/dist/jumpEventReport/jdJumpJdApp.ts +1 -1
  54. package/dist/jumpEventReport/jumpUrlConfig/base.ts +1 -1
  55. package/dist/jumpEventReport/logEventConfig.ts +1 -1
  56. package/dist/jumpEventReport/web/report.ts +1 -1
  57. package/dist/jumpEventReport/web.base.ts +1 -1
  58. package/dist/jumpEventReport/web.jd.ts +1 -1
  59. package/dist/jumpEventReport/web.jdb.ts +1 -1
  60. package/dist/jumpEventReport/web.jdjch.ts +1 -1
  61. package/dist/jumpEventReport/web.jxwxapp.ts +1 -0
  62. package/dist/jumpEventReport/web.tjapp.ts +1 -0
  63. package/dist/jumpEventReport/web.tjm.ts +1 -0
  64. package/dist/jumpEventReport/web.wxapp.ts +1 -1
  65. package/dist/modules/ContainerFloorList/index.h5.module.scss +17 -1
  66. package/dist/modules/ContainerFloorList/index.h5.tsx +1 -1
  67. package/dist/modules/ContainerFloorList/index.tsx +1 -1
  68. package/dist/open/api/environment.ts +1 -1
  69. package/dist/open/api/index.ts +1 -1
  70. package/dist/open/api/jump copy.ts +1 -1
  71. package/dist/open/api/shopMember.ts +1 -1
  72. package/dist/open/api/track.ts +1 -1
  73. package/dist/open/api/util.ts +1 -1
  74. package/dist/sass/app.h5.scss +39 -3
  75. package/dist/sass/base.scss +12 -0
  76. package/dist/service/requestServer.ts +1 -1
  77. package/dist/utils/connectNativeJsBridge.ts +1 -1
  78. package/dist/utils/connectNativeJsBridge.weapp.ts +1 -1
  79. package/dist/utils/draExceptionAndProfile.ts +1 -1
  80. package/dist/utils/h5Utils.ts +1 -1
  81. package/dist/utils/index.h5.ts +1 -1
  82. package/dist/utils/index.ts +1 -1
  83. package/dist/utils/index.weapp.ts +1 -1
  84. package/dist/utils/jm-common.js +1 -1
  85. package/dist/utils/sgmCodeUtils.ts +1 -0
  86. package/dist/utils/taroRenderUtil.ts +1 -0
  87. package/dist/utils/utils.ts +1 -1
  88. package/package.json +2 -1
  89. package/dist/components/base/Skeleton/old.tsx +0 -1
  90. package/dist/customHooks/useDocumentVisibilitychange.ts +0 -1
@@ -1 +1 @@
1
- import React from 'react'
2
1
  const { className, pointClassName, children, reportData, trackCallback, ...otherProps } =
3
2
  props
4
3
  const [floorData, mInfo] = reportData
5
4
  const checkReportDataState = floorData && mInfo
6
5
 
7
6
  checkReportDataState && !mInfo.hasOwnProperty('pos') && (mInfo.pos = 0)
8
7
  return (
9
8
  <View
10
9
  ref={ref}
11
10
  className={classNames(
12
11
  itemViewExposureSmartStyle['d-item-point-layout'],
13
12
  className,
14
13
  )}
15
14
  {...otherProps}
16
15
  >
17
16
  {children ? children : null}
18
17
  {checkReportDataState && (
19
18
  <ExposureSmart
20
19
  className={classNames(pointClassName,{
21
20
  [itemViewExposureSmartStyle['d-item-chart-point']]: isChartH5,
22
21
  })}
23
22
  reportData={reportData}
24
23
  trackCallback={trackCallback}
25
24
  markPoint
26
25
  />
27
26
  )}
28
27
  </View>
29
28
  )
29
+ import React from 'react'
30
30
  const { className, pointClassName, children, reportData, customReportDataKey,customReportDataFn, trackCallback, ...otherProps } =
31
31
  props
32
32
  const isCustomReport = customReportDataKey && customReportDataFn
33
33
  const checkReportData = Array.isArray(reportData)
34
34
  const [floorData, mInfo] = checkReportData ? reportData : []
35
35
  const checkReportDataState = isCustomReport ? true : floorData && mInfo
36
36
 
37
37
  floorData && mInfo && !mInfo.hasOwnProperty('pos') && (mInfo.pos = 0)
38
38
  return (
39
39
  <View
40
40
  ref={ref}
41
41
  className={classNames(
42
42
  itemViewExposureSmartStyle['d-item-point-layout'],
43
43
  className,
44
44
  )}
45
45
  {...otherProps}
46
46
  >
47
47
  {children ? children : null}
48
48
  {checkReportDataState && (
49
49
  <ExposureSmart
50
50
  className={classNames(pointClassName,{
51
51
  [itemViewExposureSmartStyle['d-item-chart-point']]: isChartH5,
52
52
  })}
53
53
  reportData={reportData}
54
54
  trackCallback={trackCallback}
55
55
  customReportDataFn={customReportDataFn}
56
56
  customReportDataKey={customReportDataKey}
57
57
  markPoint
58
58
  />
59
59
  )}
60
60
  </View>
61
61
  )
62
62
  reportData: [],
63
63
  customReportDataKey: null,
64
64
  customReportDataFn: null
@@ -1 +1 @@
1
- import Taro, { useRouter } from '@tarojs/taro'
2
1
  floorData = {},
3
2
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
4
3
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
5
4
  root: rootDom,
6
5
  rootMargin: `0px 0px ${window.innerHeight}px 0px`,
7
6
  useEffect(() => {
8
7
  if(needShowHighVersion) return
9
8
  if (type === LazyType.FLOOR) {
10
9
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
11
10
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
12
11
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
13
12
  !componentShowStateRef.current && dealPageScrollInfo(res)
14
13
  })
15
14
  }
16
15
  }, [])
17
16
  useEffect(() => {
18
17
  if((!needShowHighVersion && componentShowState === true) ||
19
18
  (needShowHighVersion && inView && isH5AndJdShopView)
20
19
  ) {
21
20
  console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染!')
22
21
  const modularPackResult = floorData?.floorExtInfo?.modularPackResult
23
22
  nativePageRegisterMessage(
24
23
  Message_Type.NATIVE_INJECT_JS_FILE,
25
24
  {
26
25
  data: {
27
26
  "bundleUrl": [bundleUrl]
28
27
  },
29
28
  },
30
29
  )
31
30
  }
32
31
  }
33
32
  }, [componentShowState,inView])
34
33
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
35
34
  ref={ref}
35
+ import Taro, { useRouter } from '@tarojs/taro'
36
36
  SECTION_HOME_TAB_TYPE,
37
37
  SECTION_HOME_TAB_NAME_TYPE,
38
38
  TaroEventType,
39
39
  const {
40
40
  children,
41
41
  containerId,
42
42
  type,
43
43
  placeholder,
44
44
  height,
45
45
  floorData = {},
46
46
  sectionType,
47
47
  lazyNodeClassName,
48
48
  } = props
49
49
  const getRouterInfo = useRouter()
50
50
  const getQueryData = getRouterInfo?.params || {}
51
51
  const [componentShowState, setComponentShowState] = useState(false)
52
52
  const [componentRenderShowState, setComponentRenderShowState] =
53
53
  useState(false)
54
54
  const componentLazyRef = useRef<HTMLElement | null>(null)
55
55
  const componentShowStateRef = useRef(false)
56
56
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
57
57
  const rootDom = isH5AndJdShopView && needShowHighVersion ? null : document.querySelector('#J_shopHomeRoot')
58
58
  const { ref, inView } = useInView({
59
59
  threshold: 0,
60
60
  triggerOnce: true,
61
61
  root: rootDom,
62
62
  rootMargin: `0px 0px ${window.innerHeight}px 0px`,
63
63
  })
64
64
  useEffect(() => {
65
65
  if(needShowHighVersion || !isH5AndJdShopView) return
66
66
  if (type === LazyType.FLOOR) {
67
67
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
68
68
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
69
69
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
70
70
  !componentShowStateRef.current && dealPageScrollInfo(res)
71
71
  })
72
72
  }
73
73
  }, [])
74
74
  useEffect(() => {
75
75
  if((!needShowHighVersion && componentShowState === true) ||
76
76
  (needShowHighVersion && inView && isH5AndJdShopView)
77
77
  ) {
78
78
  console.log('>>>>>>>>>>>>>>>>>>> 楼层【id=' + containerId + '】已经渲染!')
79
79
  const modularPackResult = floorData?.floorExtInfo?.modularPackResult
80
80
  const modularPackResultObj = typeof modularPackResult === 'string' ? JSON.parse(modularPackResult) : modularPackResult
81
81
  if (modularPackResultObj && modularPackResultObj.bundleUrl) {
82
82
  const { bundleUrl } = modularPackResultObj
83
83
  nativePageRegisterMessage(
84
84
  Message_Type.NATIVE_INJECT_JS_FILE,
85
85
  {
86
86
  data: {
87
87
  "bundleUrl": [bundleUrl]
88
88
  },
89
89
  },
90
90
  )
91
91
  }
92
92
  }
93
93
  }, [componentShowState,inView])
94
94
 
95
95
  const dealPageScrollInfo = (res) => {
96
96
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
97
97
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') {
98
98
  const shopId = floorData?.floorExtInfo?.shopId
99
99
  if(!lazyLayoutLoadErrorShopId[`${shopId}`]) {
100
100
  const opt = {
101
101
  msg: `店铺楼层懒加载失败。楼层顺序-floorIdx: ${floorData?.floorIdx}。`,
102
102
  uid: floorData?.uid,
103
103
  floorIdx: floorData?.floorIdx,
104
104
  shopId: shopId,
105
105
  moduleId: floorData?.moduleId,
106
106
  moduleName: floorData?.moduleName,
107
107
  middleTemplateId: floorData?.middleTemplateId,
108
108
  modularPackResult: typeof floorData?.floorExtInfo?.modularPackResult == 'string' ? JSON.parse(floorData?.floorExtInfo?.modularPackResult) : floorData?.floorExtInfo?.modularPackResult,
109
109
  }
110
110
  sgmCustomReport({
111
111
  code: 'lazyLayoutLoadError',
112
112
  msg: opt,
113
113
  })
114
114
  lazyLayoutLoadErrorShopId[`${shopId}`] = true
115
115
  }
116
116
  return
117
117
  }
118
118
  if (componentLazyRef.current) {
119
119
  const eleClientRect =
120
120
  componentLazyRef.current.getBoundingClientRect()
121
121
  const getContainerHeightOffSetY = displayHeight + offSetY
122
122
  const eleOffsetTop = Math.ceil(eleClientRect.top)
123
123
  const eleOffsetHeight = Math.ceil(eleClientRect.height)
124
124
  const eleOffsetTopHeight = eleOffsetTop + eleOffsetHeight
125
125
  if (!componentShowStateRef.current) {
126
126
  if (getContainerHeightOffSetY > eleOffsetTop) {
127
127
  componentShowStateRef.current = true
128
128
  setComponentShowState(true)
129
129
  Taro.nextTick(() => {
130
130
  setComponentRenderShowState(true)
131
131
  })
132
132
  }
133
133
  }
134
134
  }
135
135
  }
136
136
  return isH5AndJdShopView && !needShowHighVersion ? (
137
137
  <div
138
138
  id={`${containerId}_lazy`}
139
139
  ref={componentLazyRef}
140
140
  className={classNames(
141
141
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
142
142
  'd-app-floor-lazy-load',
143
143
  )}
144
144
  style={{
145
145
  minHeight: `${
146
146
  componentRenderShowState ? 'auto' : height + 'px'
147
147
  }`,
148
148
  backgroundColor: componentRenderShowState
149
149
  ? 'transparent'
150
150
  : '#ffffff',
151
151
  }}
152
152
  >
153
153
  {componentShowState ? children : placeholder}
154
154
  </div>
155
155
  ) : (
156
156
  <div
157
157
  id={`${containerId}_lazy`}
158
158
  className={classNames(
159
159
  lazyLayoutLoadStyle['d-mobile-floor-lazy-layout-load'],
160
160
  'd-mobile-floor-lazy-load',
161
161
  lazyNodeClassName,
162
162
  )}
163
163
  ref={ref}
164
164
  style={{
165
165
  minHeight: `${inView ? 'auto' : height + 'px'}`,
166
166
  backgroundColor: inView ? 'transparent' : '#ffffff',
167
167
  }}
168
168
  >
169
169
  {}
170
170
  {inView ? children : placeholder}
171
171
  </div>
172
172
  )
173
173
  sectionType:
174
174
  SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
175
175
  type: LazyType.FLOOR,
176
176
  children: null,
177
177
  placeholder: null,
178
178
  height: 200,
179
179
  className: '',
180
180
  lazyNodeClassName: '',
@@ -1 +1 @@
1
- import Taro from '@tarojs/taro'
1
+ import Taro from '@tarojs/taro'
2
2
  SECTION_HOME_TAB_TYPE,
3
3
  SECTION_HOME_TAB_NAME_TYPE,
4
4
  const {
5
5
  children,
6
6
  containerId,
7
7
  type,
8
8
  placeholder,
9
9
  height,
10
10
  sectionType,
11
11
  lazyNodeClassName,
12
12
  } = props
13
13
  const [componentShowState, setComponentShowState] = useState(false)
14
14
  const componentLazyRef = useRef<HTMLElement | null>(null)
15
15
  const lazyLayoutLoadFloor =
16
16
  'lazy-layout-load-floor' + Math.floor(Math.random() * 10000000)
17
17
  useEffect(() => {
18
18
  Taro.nextTick(() => {
19
19
  const createIntersectionObserver = new intersectionObserver({
20
20
  selector: `.${lazyLayoutLoadFloor}`,
21
21
  context: this,
22
22
  onFinal: () => {
23
23
  setComponentShowState(true)
24
24
  createIntersectionObserver.disconnect()
25
25
  },
26
26
  })
27
27
  createIntersectionObserver.connect()
28
28
  })
29
29
  }, [])
30
30
  return type === LazyType.IMAGE ? (
31
31
  children
32
32
  ) : (
33
33
  <View
34
34
  id={`${containerId}_lazy`}
35
35
  ref={componentLazyRef}
36
36
  className={classNames(
37
37
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
38
38
  'd-app-floor-lazy-load',
39
39
  lazyLayoutLoadFloor,
40
40
  )}
41
41
  style={{
42
42
  minHeight: `${componentShowState ? 'auto' : height + 'px'}`,
43
43
  backgroundColor: componentShowState ? 'transparent' : '#ffffff',
44
44
  }}
45
45
  >
46
46
  {componentShowState ? children : placeholder}
47
47
  </View>
48
48
  )
49
49
  sectionType:
50
50
  SECTION_HOME_TAB_NAME_TYPE[SECTION_HOME_TAB_TYPE.HOME_WELL_CHOSEN],
51
51
  type: LazyType.FLOOR,
52
52
  children: null,
53
53
  placeholder: null,
54
54
  height: 200,
55
55
  className: '',
56
56
  lazyNodeClassName: '',
@@ -1 +1 @@
1
- export const NetWorkTypeQuality = {
1
+ export const NetWorkTypeQuality = {
@@ -1,24 +1,24 @@
1
1
 
2
2
  .d-lazy-image,
3
3
  .d-app-lazy-image {
4
- //background: #F8F8F8 url("../../resoure/jd_logo_bg.png") center center/50% no-repeat;
5
- background: #fff
6
- 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=')
7
- center center no-repeat;
8
- &.d-lazy-sku-image {
9
- background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png');
10
- background-size: cover;
11
- }
12
- &.d-load-completed {
13
- background: none;
14
- }
15
- img {
16
- display: block;
17
- width: 100%;
18
- }
19
- &.d-hide-image-error {
20
- img {
21
- opacity: 0;
22
- }
23
- }
4
+ //background: #F8F8F8 url("../../resoure/jd_logo_bg.png") center center/50% no-repeat;
5
+ background: #fff
6
+ 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=')
7
+ center center no-repeat;
8
+ &.d-lazy-sku-image {
9
+ background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/222907/25/7012/5824/61c4797cEbcd17c7f/6c76fc71e4fdb5a5.png');
10
+ background-size: cover;
11
+ }
12
+ &.d-load-completed {
13
+ background: none;
14
+ }
15
+ img {
16
+ display: block;
17
+ width: 100%;
18
+ }
19
+ &.d-hide-image-error {
20
+ img {
21
+ opacity: 0;
22
+ }
23
+ }
24
24
  }
@@ -1 +1 @@
1
- import React, { useCallback, useEffect, useRef, useState } from 'react'
2
1
  const [componentShowState, setComponentShowState] = useState(false)
3
2
  const componentLazyRef = useRef<HTMLElement | null>(null)
4
3
  const componentShowStateRef = useRef(false)
5
4
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
6
5
  useEffect(() => {
7
6
  if(needShowHighVersion) return
8
7
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
9
8
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
10
9
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
11
10
  !componentShowStateRef.current && dealPageScrollInfo(res)
12
11
  })
13
12
 
14
13
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
15
14
  <View
16
15
  ref={ componentLazyRef }
17
16
  className={classNames(
18
17
  imageStyle['d-app-lazy-image'],
19
18
  {
20
19
  [imageStyle['d-lazy-sku-image']]: isSkuImage,
21
20
  },
22
21
  {
23
22
  [imageStyle['d-hide-image-error']]: imageErrState,
24
23
  },
25
24
  {
26
25
  [imageStyle['d-load-completed']]: loadSuccess,
27
26
  },
28
27
  {
29
28
  'd-imag-rendering-crisp-edges':
30
29
  !taroJdBaseInfo.info.pageInfo.isVipShop &&
31
30
  imagRenderingSet,
32
31
  },
33
32
  'J_html5ImageBg',
34
33
  className,
35
34
  )}
36
35
  style={{
37
36
  ...style,
38
37
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
39
38
  >
40
39
  {(componentShowState || lazyLoad === false) && <img
41
40
  src={getQualityImage(
42
41
  imgSrc,
43
42
  taroJdBaseInfo.info.pageInfo.isVipShop
44
43
  ? NetWorkTypeQuality['perfect']
45
44
  : NetWorkTypeQuality[getNetWorkType],
46
45
  )}
47
46
  onLoad={imageLoad.bind(this, imgSrc)}
48
47
  onError={imageError}
49
48
  />}
50
49
  </View>
51
50
  ) : (
52
51
  <Image
53
52
  style={{
54
53
  ...style,
55
54
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
56
55
  }}
57
56
  className={classNames(
58
57
  imageStyle['d-lazy-image'],
59
58
  {
60
59
  [imageStyle['d-lazy-sku-image']]: isSkuImage,
61
60
  },
62
61
  {
63
62
  [imageStyle['d-hide-image-error']]: imageErrState,
64
63
  },
65
64
  {
66
65
  [imageStyle['d-load-completed']]: loadSuccess,
67
66
  },
68
67
  {
69
68
  'd-imag-rendering-crisp-edges': imagRenderingSet,
70
69
  },
71
70
  className,
72
71
  )}
73
72
  src={getQualityImage(
74
73
  imgSrc,
75
74
  NetWorkTypeQuality[getNetWorkType],
76
75
  )}
77
76
  lazyLoad={isChartH5 ? false : lazyLoad}
78
77
  onError={imageError}
79
78
  onLoad={imageLoad.bind(this, imgSrc)}
80
79
  {...otherOption}
81
80
  />
82
81
  )
82
+ import React, { useCallback, useEffect, useRef, useState } from 'react'
83
83
  TaroEventType,
84
84
  const {
85
85
  src,
86
86
  lazyLoad,
87
87
  imagRenderingSet,
88
88
  width,
89
89
  height,
90
90
  className,
91
91
  isSkuImage,
92
92
  hideErrorImage,
93
93
  style,
94
94
  backgroundColor,
95
95
  errorSrc,
96
96
  onLoad,
97
97
  onError,
98
98
  ...otherOption
99
99
  } = props
100
100
  getNetWorkType === NetWorkTypeQuality.default &&
101
101
  (getNetWorkType = taroJdBaseInfo.info.sysInfo.netWorkType)
102
102
  const [loadSuccess, setLoadSuccess] = useState(false)
103
103
  const [imageErrState, setImageErrState] = useState(false)
104
104
  const [componentShowState, setComponentShowState] = useState(false)
105
105
  const [imgSrc, setImgSrc] = useState(src)
106
106
  const componentLazyRef = useRef<HTMLElement | null>(null)
107
107
  const componentShowStateRef = useRef(false)
108
108
  const needShowHighVersion = isH5AndJdShopViewH5Scroll && !(global.info.queryInfo?.downgraded && global.info.queryInfo.downgraded === "true")
109
109
  const imageError = useCallback(
110
110
  (e) => {
111
111
  console.log('图片加载错误', e)
112
112
  errorSrc && setImgSrc(errorSrc)
113
113
  hideErrorImage && setImageErrState(true)
114
114
  typeof onError === 'function' && onError(e, src, props)
115
115
  },
116
116
  [src],
117
117
  )
118
118
 
119
119
  const imageLoad = useCallback(
120
120
  (_src, event) => {
121
121
  setLoadSuccess(true)
122
122
  typeof onLoad === 'function' && onLoad(event, src, props)
123
123
  },
124
124
  [src],
125
125
  )
126
126
 
127
127
  const changeStyleIncludeWidthAndHeightAndBgColor = () => {
128
128
  const changeStyle = {}
129
129
  width && (changeStyle['width'] = width)
130
130
  height && (changeStyle['height'] = height)
131
131
  backgroundColor && (changeStyle['backgroundColor'] = backgroundColor)
132
132
  return changeStyle
133
133
  }
134
134
  useEffect(() => {
135
135
  if(needShowHighVersion) return
136
136
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
137
137
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
138
138
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
139
139
  !componentShowStateRef.current && dealPageScrollInfo(res)
140
140
  })
141
141
  }, [])
142
142
 
143
143
  const dealPageScrollInfo = (res) => {
144
144
  const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
145
145
  if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
146
146
  if (componentLazyRef.current) {
147
147
  const eleClientRect =
148
148
  componentLazyRef.current.getBoundingClientRect()
149
149
  const getContainerHeightOffSetY =
150
150
  displayHeight * 1.5 + offSetY
151
151
  const eleOffsetTop = Math.ceil(eleClientRect.top)
152
152
  const eleOffsetHeight = Math.ceil(eleClientRect.height)
153
153
  if (!componentShowStateRef.current) {
154
154
  if (getContainerHeightOffSetY > eleOffsetTop) {
155
155
  componentShowStateRef.current = true
156
156
  setComponentShowState(true)
157
157
  }
158
158
  }
159
159
  }
160
160
  }
161
161
  return (
162
162
  (isH5AndJdShopView && global?.config?.needImageLazy !== false && !needShowHighVersion && !isAppStowShop) ? (
163
163
  <View
164
164
  ref={ componentLazyRef }
165
165
  className={classNames(
166
166
  imageStyle['d-app-lazy-image'],
167
167
  {
168
168
  [imageStyle['d-lazy-sku-image']]: isSkuImage,
169
169
  },
170
170
  {
171
171
  [imageStyle['d-hide-image-error']]: imageErrState,
172
172
  },
173
173
  {
174
174
  [imageStyle['d-load-completed']]: loadSuccess,
175
175
  },
176
176
  {
177
177
  'd-imag-rendering-crisp-edges':
178
178
  !taroJdBaseInfo.info.pageInfo.isVipShop &&
179
179
  imagRenderingSet,
180
180
  },
181
181
  'J_html5ImageBg',
182
182
  className,
183
183
  )}
184
184
  style={{
185
185
  ...style,
186
186
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
187
187
  }}
188
188
  {...otherOption}
189
189
  >
190
190
  {(componentShowState || lazyLoad === false) && <img
191
191
  src={getQualityImage(
192
192
  imgSrc,
193
193
  taroJdBaseInfo.info.pageInfo.isVipShop
194
194
  ? NetWorkTypeQuality['perfect']
195
195
  : NetWorkTypeQuality[getNetWorkType],
196
196
  )}
197
197
  onLoad={imageLoad.bind(this, imgSrc)}
198
198
  onError={imageError}
199
199
  />}
200
200
  </View>
201
201
  ) : (
202
202
  <Image
203
203
  style={{
204
204
  ...style,
205
205
  ...changeStyleIncludeWidthAndHeightAndBgColor(),
206
206
  }}
207
207
  className={classNames(
208
208
  imageStyle['d-lazy-image'],
209
209
  {
210
210
  [imageStyle['d-lazy-sku-image']]: isSkuImage,
211
211
  },
212
212
  {
213
213
  [imageStyle['d-hide-image-error']]: imageErrState,
214
214
  },
215
215
  {
216
216
  [imageStyle['d-load-completed']]: loadSuccess,
217
217
  },
218
218
  {
219
219
  'd-imag-rendering-crisp-edges': imagRenderingSet,
220
220
  },
221
221
  className,
222
222
  )}
223
223
  src={getQualityImage(
224
224
  imgSrc,
225
225
  NetWorkTypeQuality[getNetWorkType],
226
226
  )}
227
227
  lazyLoad={isChartH5 ? false : lazyLoad}
228
228
  onError={imageError}
229
229
  onLoad={imageLoad.bind(this, imgSrc)}
230
230
  {...otherOption}
231
231
  />
232
232
  )
233
233
  )
234
234
  lazyLoad: true,
235
235
  isSkuImage: false,
236
236
  hideErrorImage: false,
237
237
  imagRenderingSet: true,
238
238
  src: null,
239
239
  style: null,
240
240
  width: null,
241
241
  height: null,
242
242
  backgroundColor: null,
243
243
  className: null,
244
244
  errorSrc: null,
245
245
  onLoad: null,
246
246
  onError: null,
@@ -1 +1 @@
1
- import { NETWORK_DATA_TYPE } from '../../../common/const'
2
1
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '网络连接已断开',
3
2
  [NETWORK_DATA_TYPE.DATA_ERROR]: '数据加载失败',
4
3
  [NETWORK_DATA_TYPE.NO_DATA]: '你访问的内容飞到太空了',
5
4
  [NETWORK_DATA_TYPE.RISK]: '活动太火爆',
6
5
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '请检查您的网络设置',
7
6
  [NETWORK_DATA_TYPE.DATA_ERROR]: '请稍后重试',
8
7
  [NETWORK_DATA_TYPE.NO_DATA]: '',
9
8
  [NETWORK_DATA_TYPE.RISK]: '页面加载失败,请稍后再试',
10
9
  NETWORK_DATA_TYPE.NO_NET_WORK,
11
10
  NETWORK_DATA_TYPE.DATA_ERROR,
12
11
  NETWORK_DATA_TYPE.NO_DATA,
13
12
  NETWORK_DATA_TYPE.RISK,
14
13
  No_Data_Bmall:'no-data-bmall',
14
+ import { NETWORK_DATA_TYPE } from '../../../common/const'
15
15
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '网络连接已断开',
16
16
  [NETWORK_DATA_TYPE.DATA_ERROR]: '数据加载失败',
17
17
  [NETWORK_DATA_TYPE.NO_DATA]: '你访问的内容飞到太空了',
18
18
  [NETWORK_DATA_TYPE.RISK]: '活动太火爆',
19
19
  [NETWORK_DATA_TYPE.NO_NET_WORK]: '请检查您的网络设置',
20
20
  [NETWORK_DATA_TYPE.DATA_ERROR]: '请稍后重试',
21
21
  [NETWORK_DATA_TYPE.NO_DATA]: '',
22
22
  [NETWORK_DATA_TYPE.RISK]: '页面加载失败,请稍后再试',
23
23
  NETWORK_DATA_TYPE.NO_NET_WORK,
24
24
  NETWORK_DATA_TYPE.DATA_ERROR,
25
25
  NETWORK_DATA_TYPE.NO_DATA,
26
26
  NETWORK_DATA_TYPE.RISK,
27
27
  No_Data_Bmall:'no-data-bmall',
@@ -50,6 +50,10 @@
50
50
  .d-no-data-tip-1 {
51
51
  background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/152550/40/8432/21643/5fc9cae0E5391a506/523da679188ff687.png');
52
52
  }
53
+
54
+ .d-no-data-tip-2 {
55
+ background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/142705/35/17776/5911/5fd1e62dE4fbc2300/3ee1d4160db1dac6.png');
56
+ }
53
57
  .d-no-network-err-tip {
54
58
  background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/146556/1/17745/7493/5fd1e62dE86e86669/96f5c91befa8e991.png');
55
59
  }