pb-sxp-ui 1.3.7 → 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/dist/index.cjs +177 -63
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +177 -63
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +177 -63
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/PictureGroup/index.js +11 -1
  14. package/es/core/components/SxpPageRender/WaterFall/index.js +3 -12
  15. package/es/core/components/SxpPageRender/index.d.ts +2 -0
  16. package/es/core/components/SxpPageRender/index.js +14 -4
  17. package/es/core/context/SxpDataSourceProvider.d.ts +2 -1
  18. package/es/core/context/SxpDataSourceProvider.js +22 -15
  19. package/es/core/hooks/useEventReport.js +9 -16
  20. package/es/materials/sxp/popup/AppointForm/Form.js +1 -1
  21. package/es/materials/sxp/popup/AppointForm/index.js +31 -8
  22. package/es/materials/sxp/popup/CommodityDetail/index.d.ts +3 -0
  23. package/es/materials/sxp/popup/CommodityDetail/index.js +15 -1
  24. package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts +13 -0
  25. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +21 -0
  26. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +3 -0
  27. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +15 -1
  28. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +13 -0
  29. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +21 -0
  30. package/lib/core/components/SxpPageRender/PictureGroup/index.js +11 -1
  31. package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -12
  32. package/lib/core/components/SxpPageRender/index.d.ts +2 -0
  33. package/lib/core/components/SxpPageRender/index.js +14 -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 +15 -1
  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 +15 -1
  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 +1 -1
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/WaterFall/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
2
2
  import * as ReactDOM from 'react-dom';
3
3
  import './index.less';
4
- import { isEqual } from 'lodash';
5
4
  import Navbar from '../Navbar';
6
5
  import WaterfallList from './WaterfallList';
7
6
  import left from './left.png';
@@ -28,21 +27,13 @@ const WaterFall = (props) => {
28
27
  }
29
28
  }, []);
30
29
  const handleClose = () => {
31
- const isEq = isEqual(rtcList, cacheRtcList);
32
- if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
33
- setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
34
- }
30
+ var _a, _b;
35
31
  backMainFeed('branch', selectTag, undefined, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
36
32
  reportTagsView();
37
33
  setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
38
34
  setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
39
- setTimeout(() => {
40
- var _a, _b;
41
- if (!isEq) {
42
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(cacheActiveIndex, 0, false);
43
- }
44
- setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
45
- }, 0);
35
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(cacheActiveIndex, 0, false);
36
+ setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
46
37
  };
47
38
  const [recData, setRecData] = useState();
48
39
  useEffect(() => {
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
@@ -21,6 +21,7 @@ import { useEventReport } from '../../../core/hooks/useEventReport';
21
21
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
22
22
  import Tagbar from './Tagbar';
23
23
  import { getFeUserId, getSlideSkipState } from '../../../core/utils/localStore';
24
+ import { isEqual } from 'lodash';
24
25
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
25
26
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
26
27
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -34,7 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
34
35
  const [isShowMore, setIsShowMore] = useState(false);
35
36
  const [isReload, setIsReload] = useState(new Date().getTime());
36
37
  const skipLinkRef = useRef(false);
37
- const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor } = 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();
38
39
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
39
40
  const isShowFingerTip = useMemo(() => {
40
41
  return data.length > 0 && !loading && (getFeUserId() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -190,8 +191,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
190
191
  return null;
191
192
  }
192
193
  });
193
- return !waterFallData ? list.concat([{ loading: true }]) : list;
194
- }, [data, activeIndex, waterFallData, isEditor]);
194
+ return !waterFallData && !isNoMoreData ? list.concat([{ loading: true }]) : list;
195
+ }, [data, activeIndex, waterFallData, isEditor, isNoMoreData]);
195
196
  const renderLogo = useMemo(() => {
196
197
  var _a, _b, _c, _d;
197
198
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -478,6 +479,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
478
479
  ]);
479
480
  return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
480
481
  waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === 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.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
482
+ const isEq = isEqual(rtcList, cacheRtcList);
483
+ if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
484
+ setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
485
+ }
481
486
  setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
482
487
  } })),
483
488
  renderLogo,
@@ -501,9 +506,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
501
506
  return;
502
507
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
503
508
  if (!isLoadMore) {
509
+ let pageNum = 2;
504
510
  setIsLoadMore(true);
505
- 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;
506
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
+ }
507
517
  });
508
518
  }
509
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
@@ -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
@@ -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 })));