pb-sxp-ui 1.3.8 → 1.4.1

package/es/core/components/SxpPageRender/Modal/index.js

@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
 const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const touchRef = useRef(null);
     const fTouchRef = useRef(null);
     const touchMoveRef = useRef(null);
@@ -16,6 +16,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     const modalEleRef = useRef(null);
     const { globalConfig, popupDetailData } = useSxpDataSource();
     const { schema: _schema } = useEditor();
+    const [scrollTop, setScrollTop] = useState(15);
     useEffect(() => {
         const parentNode = document.getElementById('sxp-render');
         const node = document.getElementById('pb-modal');
@@ -123,11 +124,16 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 onTouchStart: handleTouchStart,
                 onTouchEnd: handleTouchEnd
             })),
-                React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
+                React.createElement("div", { className: 'modal-icon-wrapper', onClick: onClose, style: { top: scrollTop } },
                     React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: 'modal-icon' })),
-                React.createElement("div", { ref: ref, style: {
+                React.createElement("div", Object.assign({ ref: ref, style: {
                         height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
                         overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
-                    } }, children)))))), modalEleRef.current);
+                    } }, (((_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.enableFixedCloseButton) && {
+                    onScroll: (e) => {
+                        var _a;
+                        setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
+                    }
+                })), children)))))), modalEleRef.current);
 };
 export default memo(Modal);

package/es/core/components/SxpPageRender/PictureGroup/index.js

@@ -5,7 +5,7 @@ import Picture from './Picture';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { css } from '@emotion/css';
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
-    var _a, _b;
+    var _a;
     const ref = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -32,11 +32,17 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
     return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
             clickable: true,
             bulletActiveClass: 'swipe-item-active-bullet'
-        }, className: css(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
-            '.swiper-pagination': {
-                bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
+        }, className: css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && { bottom: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom })), { fontSize: '14px' }) }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
+            '.swiper-pagination-bullet': {
+                backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
+                opacity: 1
             }
-        }))), 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) => {
+        })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
+            '.swipe-item-active-bullet': {
+                backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
+                opacity: 1
+            }
+        }))), height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
         return (React.createElement(SwiperSlide, { key: index },
             React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
     })));

package/es/core/components/SxpPageRender/index.d.ts

@@ -8,6 +8,8 @@ export type postConfigType = {
     bgWay?: '1' | '2';
     bgColor?: string;
     marginBottom?: number;
+    dotsActiveColor?: string;
+    dotsBgColor?: string;
 };
 export interface ISxpPageRenderProps {
     globalConfig?: {
@@ -48,6 +50,7 @@ export interface ISxpPageRenderProps {
         enablePreview?: boolean;
         enableSwiperTip?: boolean;
         logoBar?: any;
+        textUnderlineOffset?: number;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/es/core/components/SxpPageRender/index.js

@@ -23,7 +23,7 @@ import Tagbar from './Tagbar';
 import { getFeUserId, getSlideSkipState } from '../../../core/utils/localStore';
 import { isEqual } from 'lodash';
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     const { schema } = useEditor();
@@ -35,7 +35,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isShowMore, setIsShowMore] = useState(false);
     const [isReload, setIsReload] = useState(new Date().getTime());
     const skipLinkRef = useRef(false);
-    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();
+    const [pageNum, setPageNum] = useState(2);
+    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();
     const { backMainFeed, productView, jumpToWeb } = useEventReport();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && (getFeUserId() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -191,8 +192,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     return null;
                 }
             });
-        return !waterFallData ? list.concat([{ loading: true }]) : list;
-    }, [data, activeIndex, waterFallData, isEditor]);
+        return !waterFallData && !isNoMoreData ? list.concat([{ loading: true }]) : list;
+    }, [data, activeIndex, waterFallData, isEditor, isNoMoreData]);
     const renderLogo = useMemo(() => {
         var _a, _b, _c, _d;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -477,8 +478,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         isReload,
         renderToggleButton
     ]);
-    return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-        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: () => {
+    return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { textUnderlineOffset: `${(_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) !== null && _a !== void 0 ? _a : 0}px` } },
+        waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_f = (_e = (_d = (_c = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.item) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagTitle), { color: '#fff' }), onClose: () => {
                 const isEq = isEqual(rtcList, cacheRtcList);
                 if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
                     setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
@@ -489,7 +490,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
                 top: minusHeight
             } }),
-        isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _f !== void 0 ? _f : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
+        isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _g !== void 0 ? _g : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
         React.createElement(Swiper, { style: {
                 marginTop: tagHeight
             }, ref: swiperRef, onSlideChange: () => {
@@ -507,8 +508,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
                     if (!isLoadMore) {
                         setIsLoadMore(true);
-                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
+                            var _a;
                             setIsLoadMore(false);
+                            if (res && ((_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                                setPageNum((pageNum + 1));
+                            }
                         });
                     }
                 }
@@ -516,6 +521,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
             renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
             renderView),
-        React.createElement(WaterFall, Object.assign({}, (_j = (_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props))));
+        React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
 };
 export default SxpPageRender;

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -25,7 +25,7 @@ export interface ISxpDataSourceContext {
     }) => Promise<boolean>;
     popupDetailData?: RecItemType;
     setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
-    loadVideos?: (page: number) => Promise<void>;
+    loadVideos?: (page: number) => Promise<RecommendVideoResultType | undefined>;
     getRecommendVideos?: (query?: {
         maxSize?: number;
         defaultSize?: number;
@@ -82,6 +82,7 @@ export interface ISxpDataSourceContext {
     popupCurTimeRef?: any;
     checkCommodityIndexRef?: any;
     isEditor?: boolean;
+    isNoMoreData?: boolean;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {

package/es/core/context/SxpDataSourceProvider.js

@@ -37,6 +37,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
     const checkCommodityIndexRef = useRef(-1);
     const popupCurTimeRef = useRef(null);
+    const [isNoMoreData, setIsNoMoreData] = useState(false);
     const isShowConsent = useMemo(() => {
         var _a, _b, _c, _d;
         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
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         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 });
         if (utmVal) {
             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
             })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
-        if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
-            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 });
-        }
         if (isEditor) {
             let pageNum = 1;
             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
             let list = [];
             let result = null;
             const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
-                var _r, _s, _t, _u, _v, _w;
+                var _t, _u, _v, _w, _x, _y;
                 query.pageNum = pageNum;
                 result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
                 if (!(result === null || result === void 0 ? void 0 : result.success)) {
                     return undefined;
                 }
                 setLoading(false);
-                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));
                 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 : []);
+                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));
                 if (isNotNullList) {
                     pageNum = pageNum + 1;
                     yield recurveRecList(query);
@@ -132,9 +130,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             });
             yield recurveRecList(query);
             if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
-                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 });
+                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 });
             return Object.assign(Object.assign({}, result.data), { recList: list });
         }
+        if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
+            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 });
+        }
         const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
         if (!(result === null || result === void 0 ? void 0 : result.success)) {
             return undefined;
@@ -144,19 +145,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
             let list = [];
             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 : []);
+            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));
+            if (!isNotNullList) {
+                setIsNoMoreData(true);
+            }
             return Object.assign(Object.assign({}, result.data), { recList: list });
         }
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList]);
     const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
-        var _x, _y, _z, _0;
+        var _z, _0, _1, _2;
         if (rtcList.length <= 0) {
             return;
         }
         const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
-        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 })));
+        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 })));
         setRtcList(rtcList.concat(getFilterRecList(data)));
         setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
+        return data;
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
         if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
@@ -196,7 +202,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
                 eventName,
                 actionSource,
                 eventSourceUrl,
-                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 : '' })
+                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 : '' })
             },
             type: 'beacon'
         });
@@ -214,17 +220,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _1, _2, _3, _4, _5;
+        var _3, _4, _5, _6, _7;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_3 = (_2 = (_1 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _1 === void 0 ? void 0 : _1.filter((val) => {
+            const val = (_5 = (_4 = (_3 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _3 === void 0 ? void 0 : _3.filter((val) => {
                 var _a, _b;
                 const key = val.split('=')[0];
                 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);
-            })) === null || _2 === void 0 ? void 0 : _2.join('&')) !== null && _3 !== void 0 ? _3 : '';
+            })) === null || _4 === void 0 ? void 0 : _4.join('&')) !== null && _5 !== void 0 ? _5 : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            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 : []);
+            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 : []);
         }
         catch (e) {
             console.log('e', e);
@@ -371,7 +377,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             globalConfig,
             popupCurTimeRef,
             checkCommodityIndexRef,
-            isEditor
+            isEditor,
+            isNoMoreData
         } }, 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({
         rtcList,
         mutateLike: bffMutateLike,

package/es/core/hooks/useEventReport.js

@@ -4,7 +4,7 @@ import { DEFAULT_TAG } from '../context/SxpDataSourceProvider';
 export function useEventReport() {
     const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
     const jumpToWeb = useCallback((data, product, cta, position, traceInfo) => {
-        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;
+        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;
         let fromKName = '';
         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))) {
             fromKName = 'pdpPage';
@@ -22,22 +22,15 @@ export function useEventReport() {
             fromKName = 'productPage';
         }
         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;
+        let contentFormat = null;
+        if ((_r = data === null || data === void 0 ? void 0 : data.video) === null || _r === void 0 ? void 0 : _r.url) {
+            contentFormat = 'video';
+        }
+        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)) {
+            contentFormat = 'image';
+        }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'jumpToWeb',
-                eventDescription: 'User jumped to website',
-                productId: (_r = product === null || product === void 0 ? void 0 : product.itemId) !== null && _r !== void 0 ? _r : '',
-                productName: (_s = product === null || product === void 0 ? void 0 : product.title) !== null && _s !== void 0 ? _s : '',
-                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                productCollection: (_t = product === null || product === void 0 ? void 0 : product.collection) !== null && _t !== void 0 ? _t : '',
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: contentTags ? JSON.stringify(contentTags) : '',
-                position: position + '',
-                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 : '',
-                ctatId: (_w = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _w !== void 0 ? _w : '',
-                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 : ''
-            }
+            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 }))
         });
     }, [bffEventReport, popupDetailData, isFromHashtag]);
     const productView = useCallback((data, product, cta, viewTime, position) => {

package/es/materials/sxp/popup/AppointForm/Form.js

@@ -3,6 +3,6 @@ import React from 'react';
 const Form = ({ layout, columns, onChange }) => {
     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' } },
         layout !== 'inline' && React.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
-        (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 })))))))));
+        (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 })))))))));
 };
 export default memo(Form);

package/es/materials/sxp/popup/AppointForm/index.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
 import { css } from '@emotion/css';
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { cloneDeep, debounce } from 'lodash';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
@@ -8,10 +8,13 @@ import { useEventReport } from '../../../../core/hooks/useEventReport';
 import { setFontForText } from '../../../../core/utils/tool';
 import Form from './Form';
 const AppointForm = (_a) => {
+    var _b, _c;
     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"]);
     const { submitForm, popupDetailData } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
     const [loading, setLoading] = useState(false);
+    const [formData, setFormData] = useState({});
+    const [marginTop, setMarginTop] = useState(0);
     const defaultColumns = useMemo(() => [
         {
             title: '',
@@ -38,7 +41,7 @@ const AppointForm = (_a) => {
             key: '4'
         }
     ], []);
-    const [formData, setFormData] = useState({});
+    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);
     const columnsData = useMemo(() => {
         return cloneDeep(columns) || defaultColumns;
     }, [columns, defaultColumns]);
@@ -47,17 +50,17 @@ const AppointForm = (_a) => {
         setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
     }, [formData]);
     const handleSubmit = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f;
+        var _d, _e, _f, _g, _h;
         const vals = formData;
         if (!vals)
             return;
-        const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
+        const arr = (_e = (_d = Object.keys(vals)) === null || _d === void 0 ? void 0 : _d.map((key) => {
             var _a;
             return ({
                 name: key,
                 value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
             });
-        })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+        })) === null || _e === void 0 ? void 0 : _e.filter((item) => item === null || item === void 0 ? void 0 : item.value);
         if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
             return;
         setLoading(true);
@@ -66,8 +69,8 @@ const AppointForm = (_a) => {
         if (res) {
             if (isExternalLink) {
                 const data = popupDetailData;
-                const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
-                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;
+                const product = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+                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;
                 const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
                 jumpToWeb(data, product, cta, position);
             }
@@ -77,11 +80,31 @@ const AppointForm = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }), 1000);
+    useEffect(() => {
+        const handleScroll = () => {
+            var _a, _b;
+            const userAgent = navigator.userAgent;
+            const isAndroid = userAgent.toLowerCase().includes('android');
+            if (!isAndroid)
+                return;
+            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);
+            if (resizeHeight < originalHeight) {
+                setMarginTop(50);
+            }
+            else {
+                setMarginTop(0);
+            }
+        };
+        window.addEventListener('resize', handleScroll);
+        return () => {
+            window.removeEventListener('resize', handleScroll);
+        };
+    }, []);
     return (React.createElement("div", { className: 'pb-appoint-form' },
         React.createElement("div", { className: `pb-appoint-form-title ${css(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
                 __html: setFontForText(title, textStyle)
             } }),
-        React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
+        React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { marginTop })) }, props),
             React.createElement("div", { className: 'pb-appoint-form-container' },
                 React.createElement(Form, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
         React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },

package/es/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -21,6 +21,9 @@ export interface ICommodityDetailProps {
         dotsAlign: 'left' | 'center' | 'right';
         delay: number;
         translateY?: number;
+        dotsBgColor?: string;
+        dotsActiveColor?: string;
+        dotsMarginBottom?: number;
     };
     commodityStyles?: {
         title: CSSProperties;

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -91,10 +91,10 @@ const CommodityDetail = (_a) => {
                     __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)
                 } }),
             React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
-                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
-            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
-            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
-            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
+                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
+            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
+            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
+            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
             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 }))));
     };
     const renderBtn = () => {
@@ -143,7 +143,17 @@ const CommodityDetail = (_a) => {
                         clickableClass: getDotsAlign
                     }, loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    }, ref: ref },
+                    }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                        '.swiper-pagination-bullet': {
+                            backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
+                            opacity: 1
+                        }
+                    })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
+                        '.swipe-item-active-bullet': {
+                            backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
+                            opacity: 1
+                        }
+                    }))) },
                     React.createElement(React.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
                         var _a;
                         return (React.createElement(SwiperSlide, { key: src },

package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -232,5 +232,18 @@ declare const _default: ({
         name: string[];
         text?: undefined;
     })[];
+} | {
+    title: string;
+    child: ({
+        label: string;
+        name: string[];
+        type: string;
+        addonAfter?: undefined;
+    } | {
+        label: string;
+        name: string[];
+        type: string;
+        addonAfter: string;
+    })[];
 })[];
 export default _default;

package/es/materials/sxp/popup/CommodityDetail/settingRender.js

@@ -326,5 +326,36 @@ export default [
                 name: ['props', 'iframeBgColor']
             }
         ]
+    },
+    {
+        title: '轮播指示器',
+        child: [
+            {
+                label: '背景色',
+                name: ['props', 'swiper', 'dotsBgColor'],
+                type: 'Color'
+            },
+            {
+                label: '选中色',
+                name: ['props', 'swiper', 'dotsActiveColor'],
+                type: 'Color'
+            },
+            {
+                label: '底边距',
+                name: ['props', 'swiper', 'dotsMarginBottom'],
+                type: 'Number',
+                addonAfter: 'px'
+            }
+        ]
+    },
+    {
+        title: '关闭按钮',
+        child: [
+            {
+                label: '跟随弹窗滚动',
+                type: 'Switch',
+                name: ['props', 'enableFixedCloseButton']
+            }
+        ]
     }
 ];

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts

@@ -21,6 +21,9 @@ export interface ICommodityDetailDiroNewProps {
         dotsAlign: 'left' | 'center' | 'right';
         delay: number;
         translateY?: number;
+        dotsBgColor?: string;
+        dotsActiveColor?: string;
+        dotsMarginBottom?: number;
     };
     commodityStyles?: {
         title: CSSProperties;