pb-sxp-ui 1.3.8 → 1.4.0

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 (47) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +166 -56
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +166 -56
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.cjs +3 -3
  8. package/dist/index.min.cjs.map +1 -1
  9. package/dist/index.min.js +3 -3
  10. package/dist/index.min.js.map +1 -1
  11. package/dist/pb-ui.js +166 -56
  12. package/dist/pb-ui.js.map +1 -1
  13. package/dist/pb-ui.min.js +3 -3
  14. package/dist/pb-ui.min.js.map +1 -1
  15. package/es/core/components/SxpPageRender/PictureGroup/index.js +11 -1
  16. package/es/core/components/SxpPageRender/index.d.ts +2 -0
  17. package/es/core/components/SxpPageRender/index.js +9 -4
  18. package/es/core/context/SxpDataSourceProvider.d.ts +2 -1
  19. package/es/core/context/SxpDataSourceProvider.js +22 -15
  20. package/es/core/hooks/useEventReport.js +9 -16
  21. package/es/materials/sxp/popup/AppointForm/Form.js +1 -1
  22. package/es/materials/sxp/popup/AppointForm/index.js +31 -8
  23. package/es/materials/sxp/popup/CommodityDetail/index.d.ts +3 -0
  24. package/es/materials/sxp/popup/CommodityDetail/index.js +19 -5
  25. package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts +13 -0
  26. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +21 -0
  27. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +3 -0
  28. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +16 -2
  29. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +13 -0
  30. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +21 -0
  31. package/lib/core/components/SxpPageRender/PictureGroup/index.js +11 -1
  32. package/lib/core/components/SxpPageRender/index.d.ts +2 -0
  33. package/lib/core/components/SxpPageRender/index.js +9 -4
  34. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -1
  35. package/lib/core/context/SxpDataSourceProvider.js +22 -15
  36. package/lib/core/hooks/useEventReport.js +9 -16
  37. package/lib/materials/sxp/popup/AppointForm/Form.js +1 -1
  38. package/lib/materials/sxp/popup/AppointForm/index.js +30 -7
  39. package/lib/materials/sxp/popup/CommodityDetail/index.d.ts +3 -0
  40. package/lib/materials/sxp/popup/CommodityDetail/index.js +19 -5
  41. package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts +13 -0
  42. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +21 -0
  43. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +3 -0
  44. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +16 -2
  45. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +13 -0
  46. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +21 -0
  47. package/package.json +111 -111
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -32,10 +32,20 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
32
32
  return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
33
33
  clickable: true,
34
34
  bulletActiveClass: 'swipe-item-active-bullet'
35
- }, className: css(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
35
+ }, className: css(Object.assign(Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
36
36
  '.swiper-pagination': {
37
37
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
38
38
  }
39
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
40
+ '.swiper-pagination-bullet': {
41
+ backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
42
+ opacity: 1
43
+ }
44
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
45
+ '.swipe-item-active-bullet': {
46
+ backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
47
+ opacity: 1
48
+ }
39
49
  }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
40
50
  return (React.createElement(SwiperSlide, { key: index },
41
51
  React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -8,6 +8,8 @@ export type postConfigType = {
8
8
  bgWay?: '1' | '2';
9
9
  bgColor?: string;
10
10
  marginBottom?: number;
11
+ dotsActiveColor?: string;
12
+ dotsBgColor?: string;
11
13
  };
12
14
  export interface ISxpPageRenderProps {
13
15
  globalConfig?: {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -35,7 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
35
35
  const [isShowMore, setIsShowMore] = useState(false);
36
36
  const [isReload, setIsReload] = useState(new Date().getTime());
37
37
  const skipLinkRef = useRef(false);
38
- const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList } = useSxpDataSource();
38
+ const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData } = useSxpDataSource();
39
39
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
40
40
  const isShowFingerTip = useMemo(() => {
41
41
  return data.length > 0 && !loading && (getFeUserId() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -191,8 +191,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
191
191
  return null;
192
192
  }
193
193
  });
194
- return !waterFallData ? list.concat([{ loading: true }]) : list;
195
- }, [data, activeIndex, waterFallData, isEditor]);
194
+ return !waterFallData && !isNoMoreData ? list.concat([{ loading: true }]) : list;
195
+ }, [data, activeIndex, waterFallData, isEditor, isNoMoreData]);
196
196
  const renderLogo = useMemo(() => {
197
197
  var _a, _b, _c, _d;
198
198
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -506,9 +506,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
506
506
  return;
507
507
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
508
508
  if (!isLoadMore) {
509
+ let pageNum = 2;
509
510
  setIsLoadMore(true);
510
- loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
511
+ loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
512
+ var _a;
511
513
  setIsLoadMore(false);
514
+ if (res && ((_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
515
+ pageNum++;
516
+ }
512
517
  });
513
518
  }
514
519
  }
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -25,7 +25,7 @@ export interface ISxpDataSourceContext {
25
25
  }) => Promise<boolean>;
26
26
  popupDetailData?: RecItemType;
27
27
  setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
28
- loadVideos?: (page: number) => Promise<void>;
28
+ loadVideos?: (page: number) => Promise<RecommendVideoResultType | undefined>;
29
29
  getRecommendVideos?: (query?: {
30
30
  maxSize?: number;
31
31
  defaultSize?: number;
@@ -82,6 +82,7 @@ export interface ISxpDataSourceContext {
82
82
  popupCurTimeRef?: any;
83
83
  checkCommodityIndexRef?: any;
84
84
  isEditor?: boolean;
85
+ isNoMoreData?: boolean;
85
86
  }
86
87
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
87
88
  export interface SxpDataSourceProviderProps {
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -37,6 +37,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
37
37
  const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
38
38
  const checkCommodityIndexRef = useRef(-1);
39
39
  const popupCurTimeRef = useRef(null);
40
+ const [isNoMoreData, setIsNoMoreData] = useState(false);
40
41
  const isShowConsent = useMemo(() => {
41
42
  var _a, _b, _c, _d;
42
43
  return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
@@ -93,7 +94,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
93
94
  .catch((err) => Promise.reject(err));
94
95
  }, [bffDataSource]);
95
96
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
96
- var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
97
+ var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
97
98
  query = Object.assign(Object.assign(Object.assign({ maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize, defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag }, ((query === null || query === void 0 ? void 0 : query.contentFilter) && { contentFilter: `[${query === null || query === void 0 ? void 0 : query.contentFilter}]` })), ((query === null || query === void 0 ? void 0 : query.productFilter) && { productFilter: `[${query === null || query === void 0 ? void 0 : query.productFilter}]` })), { pageNum: query === null || query === void 0 ? void 0 : query.pageNum });
98
99
  if (utmVal) {
99
100
  const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
@@ -103,9 +104,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
103
104
  })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
104
105
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
105
106
  }
106
- if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
107
- query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_j = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _j !== void 0 ? _j : 1 });
108
- }
109
107
  if (isEditor) {
110
108
  let pageNum = 1;
111
109
  query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
@@ -116,15 +114,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
116
114
  let list = [];
117
115
  let result = null;
118
116
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
119
- var _r, _s, _t, _u, _v, _w;
117
+ var _t, _u, _v, _w, _x, _y;
120
118
  query.pageNum = pageNum;
121
119
  result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
122
120
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
123
121
  return undefined;
124
122
  }
125
123
  setLoading(false);
126
- const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.every((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
127
124
  list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
125
+ const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
128
126
  if (isNotNullList) {
129
127
  pageNum = pageNum + 1;
130
128
  yield recurveRecList(query);
@@ -132,9 +130,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
132
130
  });
133
131
  yield recurveRecList(query);
134
132
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
135
- setCurReqInfo({ rtc: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.rtc, requestId: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.requestId });
133
+ setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
136
134
  return Object.assign(Object.assign({}, result.data), { recList: list });
137
135
  }
136
+ if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
137
+ query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
138
+ }
138
139
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
139
140
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
140
141
  return undefined;
@@ -144,19 +145,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
144
145
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
145
146
  let list = [];
146
147
  list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
148
+ const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
149
+ if (!isNotNullList) {
150
+ setIsNoMoreData(true);
151
+ }
147
152
  return Object.assign(Object.assign({}, result.data), { recList: list });
148
153
  }
149
154
  return result === null || result === void 0 ? void 0 : result.data;
150
155
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList]);
151
156
  const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
152
- var _x, _y, _z, _0;
157
+ var _z, _0, _1, _2;
153
158
  if (rtcList.length <= 0) {
154
159
  return;
155
160
  }
156
161
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
157
- const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_x = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _x === void 0 ? void 0 : _x.itemId) && { productFilter: (_y = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _y === void 0 ? void 0 : _y.itemId })), (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _z === void 0 ? void 0 : _z.itemId) && { contentFilter: (_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _0 === void 0 ? void 0 : _0.itemId })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
162
+ const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: (_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: (_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
158
163
  setRtcList(rtcList.concat(getFilterRecList(data)));
159
164
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
165
+ return data;
160
166
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
161
167
  const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
162
168
  if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
@@ -196,7 +202,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
196
202
  eventName,
197
203
  actionSource,
198
204
  eventSourceUrl,
199
- userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
205
+ userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
200
206
  },
201
207
  type: 'beacon'
202
208
  });
@@ -214,17 +220,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
214
220
  return res === null || res === void 0 ? void 0 : res.success;
215
221
  }), [bffFetch]);
216
222
  const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
217
- var _1, _2, _3, _4, _5;
223
+ var _3, _4, _5, _6, _7;
218
224
  if (!utmVal || !isShowTag)
219
225
  return;
220
226
  try {
221
- const val = (_3 = (_2 = (_1 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _1 === void 0 ? void 0 : _1.filter((val) => {
227
+ const val = (_5 = (_4 = (_3 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _3 === void 0 ? void 0 : _3.filter((val) => {
222
228
  var _a, _b;
223
229
  const key = val.split('=')[0];
224
230
  return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
225
- })) === null || _2 === void 0 ? void 0 : _2.join('&')) !== null && _3 !== void 0 ? _3 : '';
231
+ })) === null || _4 === void 0 ? void 0 : _4.join('&')) !== null && _5 !== void 0 ? _5 : '';
226
232
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
227
- setTagList((_5 = (_4 = result === null || result === void 0 ? void 0 : result.data) === null || _4 === void 0 ? void 0 : _4.tags) !== null && _5 !== void 0 ? _5 : []);
233
+ setTagList((_7 = (_6 = result === null || result === void 0 ? void 0 : result.data) === null || _6 === void 0 ? void 0 : _6.tags) !== null && _7 !== void 0 ? _7 : []);
228
234
  }
229
235
  catch (e) {
230
236
  console.log('e', e);
@@ -371,7 +377,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
371
377
  globalConfig,
372
378
  popupCurTimeRef,
373
379
  checkCommodityIndexRef,
374
- isEditor
380
+ isEditor,
381
+ isNoMoreData
375
382
  } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
376
383
  rtcList,
377
384
  mutateLike: bffMutateLike,
package/es/core/hooks/useEventReport.js CHANGED
@@ -4,7 +4,7 @@ import { DEFAULT_TAG } from '../context/SxpDataSourceProvider';
4
4
  export function useEventReport() {
5
5
  const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
6
6
  const jumpToWeb = useCallback((data, product, cta, position, traceInfo) => {
7
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
8
8
  let fromKName = '';
9
9
  if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
10
10
  fromKName = 'pdpPage';
@@ -22,22 +22,15 @@ export function useEventReport() {
22
22
  fromKName = 'productPage';
23
23
  }
24
24
  const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = data === null || data === void 0 ? void 0 : data.product) === null || _q === void 0 ? void 0 : _q.tags;
25
+ let contentFormat = null;
26
+ if ((_r = data === null || data === void 0 ? void 0 : data.video) === null || _r === void 0 ? void 0 : _r.url) {
27
+ contentFormat = 'video';
28
+ }
29
+ else if (((_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && ((_u = (_t = data === null || data === void 0 ? void 0 : data.video) === null || _t === void 0 ? void 0 : _t.imgUrls) === null || _u === void 0 ? void 0 : _u.length)) {
30
+ contentFormat = 'image';
31
+ }
25
32
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
26
- eventInfo: {
27
- eventSubject: 'jumpToWeb',
28
- eventDescription: 'User jumped to website',
29
- productId: (_r = product === null || product === void 0 ? void 0 : product.itemId) !== null && _r !== void 0 ? _r : '',
30
- productName: (_s = product === null || product === void 0 ? void 0 : product.title) !== null && _s !== void 0 ? _s : '',
31
- price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
32
- productCollection: (_t = product === null || product === void 0 ? void 0 : product.collection) !== null && _t !== void 0 ? _t : '',
33
- fromKName,
34
- fromKPage: location === null || location === void 0 ? void 0 : location.href,
35
- contentTags: contentTags ? JSON.stringify(contentTags) : '',
36
- position: position + '',
37
- contentId: (_v = (_u = data === null || data === void 0 ? void 0 : data.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
38
- ctatId: (_w = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _w !== void 0 ? _w : '',
39
- traceInfo: (_9 = (_6 = (_4 = (_0 = (_x = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _x !== void 0 ? _x : (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProduct) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = data === null || data === void 0 ? void 0 : data.video) === null || _1 === void 0 ? void 0 : _1.bindProducts) === null || _2 === void 0 ? void 0 : _2[0]) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_5 = data === null || data === void 0 ? void 0 : data.product) === null || _5 === void 0 ? void 0 : _5.traceInfo) !== null && _6 !== void 0 ? _6 : (_8 = (_7 = data === null || data === void 0 ? void 0 : data.video) === null || _7 === void 0 ? void 0 : _7.bindCta) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : ''
40
- }
33
+ eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
41
34
  });
42
35
  }, [bffEventReport, popupDetailData, isFromHashtag]);
43
36
  const productView = useCallback((data, product, cta, viewTime, position) => {
package/es/materials/sxp/popup/AppointForm/Form.js CHANGED
@@ -3,6 +3,6 @@ import React from 'react';
3
3
  const Form = ({ layout, columns, onChange }) => {
4
4
  return (React.createElement(React.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (React.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
5
5
  layout !== 'inline' && React.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
6
- (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange: onChange })))))))));
6
+ (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange })))))))));
7
7
  };
8
8
  export default memo(Form);
package/es/materials/sxp/popup/AppointForm/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __awaiter, __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
- import React, { memo, useCallback, useMemo, useState } from 'react';
3
+ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
4
4
  import { cloneDeep, debounce } from 'lodash';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  import './index.less';
@@ -8,10 +8,13 @@ import { useEventReport } from '../../../../core/hooks/useEventReport';
8
8
  import { setFontForText } from '../../../../core/utils/tool';
9
9
  import Form from './Form';
10
10
  const AppointForm = (_a) => {
11
+ var _b, _c;
11
12
  var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType = 'inline', isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
12
13
  const { submitForm, popupDetailData } = useSxpDataSource();
13
14
  const { jumpToWeb } = useEventReport();
14
15
  const [loading, setLoading] = useState(false);
16
+ const [formData, setFormData] = useState({});
17
+ const [marginTop, setMarginTop] = useState(0);
15
18
  const defaultColumns = useMemo(() => [
16
19
  {
17
20
  title: '',
@@ -38,7 +41,7 @@ const AppointForm = (_a) => {
38
41
  key: '4'
39
42
  }
40
43
  ], []);
41
- const [formData, setFormData] = useState({});
44
+ const originalHeight = ((_b = document === null || document === void 0 ? void 0 : document.documentElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || ((_c = document === null || document === void 0 ? void 0 : document.body) === null || _c === void 0 ? void 0 : _c.clientHeight);
42
45
  const columnsData = useMemo(() => {
43
46
  return cloneDeep(columns) || defaultColumns;
44
47
  }, [columns, defaultColumns]);
@@ -47,17 +50,17 @@ const AppointForm = (_a) => {
47
50
  setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
48
51
  }, [formData]);
49
52
  const handleSubmit = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
50
- var _b, _c, _d, _e, _f;
53
+ var _d, _e, _f, _g, _h;
51
54
  const vals = formData;
52
55
  if (!vals)
53
56
  return;
54
- const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
57
+ const arr = (_e = (_d = Object.keys(vals)) === null || _d === void 0 ? void 0 : _d.map((key) => {
55
58
  var _a;
56
59
  return ({
57
60
  name: key,
58
61
  value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
59
62
  });
60
- })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
63
+ })) === null || _e === void 0 ? void 0 : _e.filter((item) => item === null || item === void 0 ? void 0 : item.value);
61
64
  if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
62
65
  return;
63
66
  setLoading(true);
@@ -66,8 +69,8 @@ const AppointForm = (_a) => {
66
69
  if (res) {
67
70
  if (isExternalLink) {
68
71
  const data = popupDetailData;
69
- const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
70
- const cta = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta;
72
+ const product = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
73
+ const cta = (_h = (_g = data === null || data === void 0 ? void 0 : data.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.bindCta;
71
74
  const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
72
75
  jumpToWeb(data, product, cta, position);
73
76
  }
@@ -77,11 +80,31 @@ const AppointForm = (_a) => {
77
80
  onClick === null || onClick === void 0 ? void 0 : onClick();
78
81
  }
79
82
  }), 1000);
83
+ useEffect(() => {
84
+ const handleScroll = () => {
85
+ var _a, _b;
86
+ const userAgent = navigator.userAgent;
87
+ const isAndroid = userAgent.toLowerCase().includes('android');
88
+ if (!isAndroid)
89
+ return;
90
+ const resizeHeight = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || ((_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight);
91
+ if (resizeHeight < originalHeight) {
92
+ setMarginTop(50);
93
+ }
94
+ else {
95
+ setMarginTop(0);
96
+ }
97
+ };
98
+ window.addEventListener('resize', handleScroll);
99
+ return () => {
100
+ window.removeEventListener('resize', handleScroll);
101
+ };
102
+ }, []);
80
103
  return (React.createElement("div", { className: 'pb-appoint-form' },
81
104
  React.createElement("div", { className: `pb-appoint-form-title ${css(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
82
105
  __html: setFontForText(title, textStyle)
83
106
  } }),
84
- React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
107
+ React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { marginTop })) }, props),
85
108
  React.createElement("div", { className: 'pb-appoint-form-container' },
86
109
  React.createElement(Form, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
87
110
  React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
package/es/materials/sxp/popup/CommodityDetail/index.d.ts CHANGED
@@ -21,6 +21,9 @@ export interface ICommodityDetailProps {
21
21
  dotsAlign: 'left' | 'center' | 'right';
22
22
  delay: number;
23
23
  translateY?: number;
24
+ dotsBgColor?: string;
25
+ dotsActiveColor?: string;
26
+ dotsMarginBottom?: number;
24
27
  };
25
28
  commodityStyles?: {
26
29
  title: CSSProperties;
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -91,10 +91,10 @@ const CommodityDetail = (_a) => {
91
91
  __html: setFontForText((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
92
92
  } }),
93
93
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
94
- React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
95
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
96
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
97
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
94
+ React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
95
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
96
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
97
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
98
98
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
99
99
  };
100
100
  const renderBtn = () => {
@@ -143,7 +143,21 @@ const CommodityDetail = (_a) => {
143
143
  clickableClass: getDotsAlign
144
144
  }, loop: true, autoplay: {
145
145
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
146
- }, ref: ref },
146
+ }, ref: ref, className: css(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
147
+ '.swiper-pagination': {
148
+ bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
149
+ }
150
+ })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
151
+ '.swiper-pagination-bullet': {
152
+ backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
153
+ opacity: 1
154
+ }
155
+ })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
156
+ '.swipe-item-active-bullet': {
157
+ backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
158
+ opacity: 1
159
+ }
160
+ }))) },
147
161
  React.createElement(React.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
148
162
  var _a;
149
163
  return (React.createElement(SwiperSlide, { key: src },
package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts CHANGED
@@ -232,5 +232,18 @@ declare const _default: ({
232
232
  name: string[];
233
233
  text?: undefined;
234
234
  })[];
235
+ } | {
236
+ title: string;
237
+ child: ({
238
+ label: string;
239
+ name: string[];
240
+ type: string;
241
+ addonAfter?: undefined;
242
+ } | {
243
+ label: string;
244
+ name: string[];
245
+ type: string;
246
+ addonAfter: string;
247
+ })[];
235
248
  })[];
236
249
  export default _default;
package/es/materials/sxp/popup/CommodityDetail/settingRender.js CHANGED
@@ -326,5 +326,26 @@ export default [
326
326
  name: ['props', 'iframeBgColor']
327
327
  }
328
328
  ]
329
+ },
330
+ {
331
+ title: '轮播指示器',
332
+ child: [
333
+ {
334
+ label: '背景色',
335
+ name: ['props', 'swiper', 'dotsBgColor'],
336
+ type: 'Color'
337
+ },
338
+ {
339
+ label: '选中色',
340
+ name: ['props', 'swiper', 'dotsActiveColor'],
341
+ type: 'Color'
342
+ },
343
+ {
344
+ label: '底边距',
345
+ name: ['props', 'swiper', 'dotsMarginBottom'],
346
+ type: 'Number',
347
+ addonAfter: 'px'
348
+ }
349
+ ]
329
350
  }
330
351
  ];
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts CHANGED
@@ -21,6 +21,9 @@ export interface ICommodityDetailDiroNewProps {
21
21
  dotsAlign: 'left' | 'center' | 'right';
22
22
  delay: number;
23
23
  translateY?: number;
24
+ dotsBgColor?: string;
25
+ dotsActiveColor?: string;
26
+ dotsMarginBottom?: number;
24
27
  };
25
28
  commodityStyles?: {
26
29
  title: CSSProperties;
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -85,7 +85,7 @@ const CommodityDetailDiroNew = (_a) => {
85
85
  const productInfoText = ({ isPost }) => {
86
86
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
87
87
  React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
88
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
88
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
89
89
  Made in Italy` })));
90
90
  };
91
91
  const getStyle = useCallback((style) => {
@@ -127,7 +127,21 @@ Made in Italy` })));
127
127
  clickableClass: getDotsAlign
128
128
  }, loop: true, autoplay: {
129
129
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
130
- }, ref: ref }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
130
+ }, ref: ref, className: css(Object.assign(Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && {
131
+ '.swiper-pagination': {
132
+ bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom
133
+ }
134
+ })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
135
+ '.swiper-pagination-bullet': {
136
+ backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
137
+ opacity: 1
138
+ }
139
+ })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
140
+ '.swipe-item-active-bullet': {
141
+ backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
142
+ opacity: 1
143
+ }
144
+ }))) }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
131
145
  var _a;
132
146
  return (React.createElement(SwiperSlide, { key: src },
133
147
  React.createElement("div", { style: {
package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts CHANGED
@@ -220,5 +220,18 @@ declare const _default: ({
220
220
  name: string[];
221
221
  text?: undefined;
222
222
  })[];
223
+ } | {
224
+ title: string;
225
+ child: ({
226
+ label: string;
227
+ name: string[];
228
+ type: string;
229
+ addonAfter?: undefined;
230
+ } | {
231
+ label: string;
232
+ name: string[];
233
+ type: string;
234
+ addonAfter: string;
235
+ })[];
223
236
  })[];
224
237
  export default _default;
package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js CHANGED
@@ -309,5 +309,26 @@ export default [
309
309
  name: ['props', 'iframeBgColor']
310
310
  }
311
311
  ]
312
+ },
313
+ {
314
+ title: '轮播指示器',
315
+ child: [
316
+ {
317
+ label: '背景色',
318
+ name: ['props', 'swiper', 'dotsBgColor'],
319
+ type: 'Color'
320
+ },
321
+ {
322
+ label: '选中色',
323
+ name: ['props', 'swiper', 'dotsActiveColor'],
324
+ type: 'Color'
325
+ },
326
+ {
327
+ label: '底边距',
328
+ name: ['props', 'swiper', 'dotsMarginBottom'],
329
+ type: 'Number',
330
+ addonAfter: 'px'
331
+ }
332
+ ]
312
333
  }
313
334
  ];
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -35,10 +35,20 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
35
35
  return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
36
36
  clickable: true,
37
37
  bulletActiveClass: 'swipe-item-active-bullet'
38
- }, className: (0, css_1.css)(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
38
+ }, className: (0, css_1.css)(Object.assign(Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
39
39
  '.swiper-pagination': {
40
40
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
41
41
  }
42
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
43
+ '.swiper-pagination-bullet': {
44
+ backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
45
+ opacity: 1
46
+ }
47
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
48
+ '.swipe-item-active-bullet': {
49
+ backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
50
+ opacity: 1
51
+ }
42
52
  }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
43
53
  return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
44
54
  react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -8,6 +8,8 @@ export type postConfigType = {
8
8
  bgWay?: '1' | '2';
9
9
  bgColor?: string;
10
10
  marginBottom?: number;
11
+ dotsActiveColor?: string;
12
+ dotsBgColor?: string;
11
13
  };
12
14
  export interface ISxpPageRenderProps {
13
15
  globalConfig?: {