pb-sxp-ui 1.3.2 → 1.3.4
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.
- package/dist/index.cjs +59 -50
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +59 -50
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +59 -50
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/Modal/index.js +2 -3
- package/es/core/components/SxpPageRender/index.js +6 -2
- package/es/core/context/SxpDataSourceProvider.js +13 -7
- package/es/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
- package/es/materials/sxp/popup/CommodityDetail/index.js +15 -15
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +1 -0
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +19 -19
- package/es/materials/sxp/popup/Iframe/index.js +1 -1
- package/lib/core/components/SxpPageRender/Modal/index.js +2 -3
- package/lib/core/components/SxpPageRender/index.js +6 -2
- package/lib/core/context/SxpDataSourceProvider.js +13 -7
- package/lib/materials/sxp/popup/CommodityDetail/index.d.ts +1 -0
- package/lib/materials/sxp/popup/CommodityDetail/index.js +15 -15
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts +1 -0
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +19 -19
- package/lib/materials/sxp/popup/Iframe/index.js +1 -1
- package/package.json +1 -1
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
|
|
4
4
|
import { useEditor, useSxpDataSource } from '../../../../core/hooks';
|
5
5
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
6
6
|
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
|
7
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t
|
7
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
8
8
|
const touchRef = useRef(null);
|
9
9
|
const fTouchRef = useRef(null);
|
10
10
|
const touchMoveRef = useRef(null);
|
@@ -126,8 +126,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
|
|
126
126
|
React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
|
127
127
|
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' })),
|
128
128
|
React.createElement("div", { ref: ref, style: {
|
129
|
-
height:
|
130
|
-
((_w = (_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.popupBg) === null || _w === void 0 ? void 0 : _w.bottomMargin)) !== null && _x !== void 0 ? _x : 0,
|
129
|
+
height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
|
131
130
|
overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
|
132
131
|
} }, children)))))), modalEleRef.current);
|
133
132
|
};
|
@@ -354,7 +354,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
354
354
|
};
|
355
355
|
const handleScrollEvent = (swiper) => {
|
356
356
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
357
|
-
viewTime.current = new Date();
|
358
357
|
const item = data[swiper.previousIndex];
|
359
358
|
if (!item)
|
360
359
|
return;
|
@@ -392,6 +391,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
392
391
|
eventName: 'ProductView'
|
393
392
|
});
|
394
393
|
}
|
394
|
+
viewTime.current = new Date();
|
395
395
|
};
|
396
396
|
const handleReportProductView = (item) => {
|
397
397
|
var _a, _b, _c;
|
@@ -401,8 +401,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
401
401
|
};
|
402
402
|
useEffect(() => {
|
403
403
|
const item = data[activeIndex];
|
404
|
-
if (openHashtag)
|
404
|
+
if (openHashtag) {
|
405
405
|
handleReportProductView(item);
|
406
|
+
}
|
407
|
+
else {
|
408
|
+
viewTime.current = new Date();
|
409
|
+
}
|
406
410
|
}, [openHashtag, data, activeIndex]);
|
407
411
|
const handleViewImageStartEvent = (activeIndex) => {
|
408
412
|
var _a, _b, _c, _d, _e, _f;
|
@@ -108,9 +108,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
108
108
|
}
|
109
109
|
if (isEditor) {
|
110
110
|
let pageNum = 1;
|
111
|
-
query = Object.assign(Object.assign({}, query), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
|
112
|
-
if (!(query === null || query === void 0 ? void 0 : query.channel) || isInit.current)
|
113
|
-
return;
|
111
|
+
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] }));
|
112
|
+
if (!(query === null || query === void 0 ? void 0 : query.channel) || isInit.current) {
|
113
|
+
return undefined;
|
114
|
+
}
|
114
115
|
isInit.current = true;
|
115
116
|
let list = [];
|
116
117
|
let result = null;
|
@@ -121,6 +122,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
121
122
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
122
123
|
return undefined;
|
123
124
|
}
|
125
|
+
setLoading(false);
|
124
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));
|
125
127
|
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 : []);
|
126
128
|
if (isNotNullList) {
|
@@ -284,8 +286,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
284
286
|
bffGetTagList();
|
285
287
|
getRecommendVideos()
|
286
288
|
.then((data) => {
|
287
|
-
|
288
|
-
|
289
|
+
if (data) {
|
290
|
+
setRtcList(getFilterRecList(data));
|
291
|
+
setCacheRtcList(getFilterRecList(data));
|
292
|
+
}
|
289
293
|
})
|
290
294
|
.finally(() => {
|
291
295
|
bffEventReport({
|
@@ -304,8 +308,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
304
308
|
bffGetTagList();
|
305
309
|
getRecommendVideos()
|
306
310
|
.then((data) => {
|
307
|
-
|
308
|
-
|
311
|
+
if (data) {
|
312
|
+
setRtcList(getFilterRecList(data));
|
313
|
+
setCacheRtcList(getFilterRecList(data));
|
314
|
+
}
|
309
315
|
})
|
310
316
|
.finally(() => {
|
311
317
|
bffEventReport({
|
@@ -12,8 +12,8 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
|
|
12
12
|
import { setFontForText } from '../../../../core/utils/tool';
|
13
13
|
import CommodityGroup from '../../template/components/CommodityGroup';
|
14
14
|
const CommodityDetail = (_a) => {
|
15
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z
|
16
|
-
var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
|
15
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
16
|
+
var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel"]);
|
17
17
|
const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = useSxpDataSource();
|
18
18
|
const { jumpToWeb, productView } = useEventReport();
|
19
19
|
const curTimeRef = useRef(null);
|
@@ -133,18 +133,18 @@ const CommodityDetail = (_a) => {
|
|
133
133
|
};
|
134
134
|
return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
|
135
135
|
}, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
|
136
|
-
const iframeUrl =
|
136
|
+
const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
|
137
137
|
return (React.createElement(React.Fragment, null,
|
138
138
|
React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
|
139
139
|
React.createElement("div", { style: { position: 'relative' } },
|
140
|
-
product && ((
|
140
|
+
product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
|
141
141
|
clickable: true,
|
142
142
|
bulletActiveClass: 'swipe-item-active-bullet',
|
143
143
|
clickableClass: getDotsAlign
|
144
144
|
}, loop: true, autoplay: {
|
145
145
|
delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
|
146
146
|
}, ref: ref },
|
147
|
-
React.createElement(React.Fragment, null, (
|
147
|
+
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
148
|
var _a;
|
149
149
|
return (React.createElement(SwiperSlide, { key: src },
|
150
150
|
React.createElement("div", { style: {
|
@@ -160,7 +160,7 @@ const CommodityDetail = (_a) => {
|
|
160
160
|
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
161
161
|
}, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
|
162
162
|
})))),
|
163
|
-
!((
|
163
|
+
!((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (React.createElement("div", { className: css({
|
164
164
|
height,
|
165
165
|
width
|
166
166
|
}) },
|
@@ -168,7 +168,7 @@ const CommodityDetail = (_a) => {
|
|
168
168
|
objectFit: 'cover',
|
169
169
|
width: '100%',
|
170
170
|
height: '100%'
|
171
|
-
}), src: (
|
171
|
+
}), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
|
172
172
|
(iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
|
173
173
|
padding: '5px 10px',
|
174
174
|
display: 'flex',
|
@@ -180,8 +180,7 @@ const CommodityDetail = (_a) => {
|
|
180
180
|
background: '#fff',
|
181
181
|
borderRadius: '3px'
|
182
182
|
}, onClick: () => setShow3DModal(true) },
|
183
|
-
React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px'
|
184
|
-
React.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D")))),
|
183
|
+
React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px' })))),
|
185
184
|
renderCommodityGroup(),
|
186
185
|
React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
|
187
186
|
renderBtn(),
|
@@ -189,11 +188,12 @@ const CommodityDetail = (_a) => {
|
|
189
188
|
React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
|
190
189
|
renderBtn()),
|
191
190
|
React.createElement(Modal, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
|
192
|
-
React.createElement("
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
191
|
+
React.createElement("div", { style: { height: window.innerHeight } },
|
192
|
+
React.createElement("iframe", { src: iframeUrl, style: {
|
193
|
+
width: '100%',
|
194
|
+
height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
|
195
|
+
marginTop: '50px',
|
196
|
+
border: 'none'
|
197
|
+
} })))));
|
198
198
|
};
|
199
199
|
export default memo(CommodityDetail);
|
@@ -12,8 +12,8 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
|
|
12
12
|
import { setFontForText } from '../../../../core/utils/tool';
|
13
13
|
import CommodityGroup from '../../template/components/CommodityGroup';
|
14
14
|
const CommodityDetailDiroNew = (_a) => {
|
15
|
-
var _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
|
16
|
-
var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
|
15
|
+
var _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;
|
16
|
+
var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel"]);
|
17
17
|
const [spread, setSpread] = useState(true);
|
18
18
|
const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = useSxpDataSource();
|
19
19
|
const { jumpToWeb, productView } = useEventReport();
|
@@ -117,17 +117,17 @@ Made in Italy` })));
|
|
117
117
|
};
|
118
118
|
return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
|
119
119
|
}, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
|
120
|
-
const iframeUrl =
|
120
|
+
const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
|
121
121
|
return (React.createElement("div", { className: 'pb-commondityDiroNew' },
|
122
122
|
React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
|
123
123
|
React.createElement("div", { style: { position: 'relative' } },
|
124
|
-
product && ((
|
124
|
+
product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
|
125
125
|
clickable: true,
|
126
126
|
bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
|
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 }, (
|
130
|
+
}, ref: ref }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
|
131
131
|
var _a;
|
132
132
|
return (React.createElement(SwiperSlide, { key: src },
|
133
133
|
React.createElement("div", { style: {
|
@@ -143,7 +143,7 @@ Made in Italy` })));
|
|
143
143
|
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
144
144
|
}, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
|
145
145
|
}))),
|
146
|
-
!((
|
146
|
+
!((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (React.createElement("div", { className: css({
|
147
147
|
height,
|
148
148
|
width
|
149
149
|
}) },
|
@@ -151,7 +151,7 @@ Made in Italy` })));
|
|
151
151
|
objectFit: 'cover',
|
152
152
|
width: '100%',
|
153
153
|
height: '100%'
|
154
|
-
}), src: (
|
154
|
+
}), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
|
155
155
|
(iframeUrl || !product) && iframeIcon && (React.createElement("div", { style: {
|
156
156
|
padding: '5px 10px',
|
157
157
|
display: 'flex',
|
@@ -163,14 +163,13 @@ Made in Italy` })));
|
|
163
163
|
background: '#fff',
|
164
164
|
borderRadius: '3px'
|
165
165
|
}, onClick: () => setShow3DModal(true) },
|
166
|
-
React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px'
|
167
|
-
React.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D")))),
|
166
|
+
React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px' })))),
|
168
167
|
renderCommodityGroup(),
|
169
168
|
React.createElement("div", { className: 'pb-commondityDiroNew-content' },
|
170
169
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
|
171
170
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
|
172
171
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
|
173
|
-
__html: setFontForText((
|
172
|
+
__html: setFontForText((_0 = product === null || product === void 0 ? void 0 : product.title) !== null && _0 !== void 0 ? _0 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
|
174
173
|
} }),
|
175
174
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
|
176
175
|
__html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
|
@@ -180,20 +179,21 @@ Made in Italy` })));
|
|
180
179
|
__html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
|
181
180
|
} }),
|
182
181
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
|
183
|
-
__html: setFontForText((
|
182
|
+
__html: setFontForText((_1 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _1 !== void 0 ? _1 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
|
184
183
|
} }))),
|
185
|
-
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (
|
184
|
+
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_2 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _2 !== void 0 ? _2 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
|
186
185
|
React.createElement("span", { dangerouslySetInnerHTML: {
|
187
|
-
__html: setFontForText((
|
186
|
+
__html: setFontForText((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
|
188
187
|
} }))),
|
189
188
|
productInfoText({ isPost }))),
|
190
189
|
React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
|
191
190
|
React.createElement(Modal, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
|
192
|
-
React.createElement("
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
191
|
+
React.createElement("div", { style: { height: window.innerHeight } },
|
192
|
+
React.createElement("iframe", { src: iframeUrl, style: {
|
193
|
+
width: '100%',
|
194
|
+
height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
|
195
|
+
marginTop: '50px',
|
196
|
+
border: 'none'
|
197
|
+
} })))));
|
198
198
|
};
|
199
199
|
export default memo(CommodityDetailDiroNew);
|
@@ -8,7 +8,7 @@ const Iframe = (_a) => {
|
|
8
8
|
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
|
9
9
|
const { popupDetailData } = useSxpDataSource();
|
10
10
|
const iframeUrl = (_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark;
|
11
|
-
return (React.createElement("div", Object.assign({ className: `${css(Object.assign(Object.assign({}, style), { height: isTel ? 664 :
|
11
|
+
return (React.createElement("div", Object.assign({ className: `${css(Object.assign(Object.assign({}, style), { height: isTel ? 664 : window === null || window === void 0 ? void 0 : window.innerHeight }))}` }, props),
|
12
12
|
React.createElement("iframe", { src: iframeUrl, style: {
|
13
13
|
width: '100%',
|
14
14
|
height: 'calc(100% - 50px)',
|
@@ -7,7 +7,7 @@ const ReactDOM = tslib_1.__importStar(require("react-dom"));
|
|
7
7
|
const hooks_1 = require("../../../../core/hooks");
|
8
8
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
9
9
|
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t
|
10
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
11
11
|
const touchRef = (0, react_1.useRef)(null);
|
12
12
|
const fTouchRef = (0, react_1.useRef)(null);
|
13
13
|
const touchMoveRef = (0, react_1.useRef)(null);
|
@@ -129,8 +129,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
|
|
129
129
|
react_1.default.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
|
130
130
|
react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: 'modal-icon' })),
|
131
131
|
react_1.default.createElement("div", { ref: ref, style: {
|
132
|
-
height:
|
133
|
-
((_w = (_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.popupBg) === null || _w === void 0 ? void 0 : _w.bottomMargin)) !== null && _x !== void 0 ? _x : 0,
|
132
|
+
height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
|
134
133
|
overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
|
135
134
|
} }, children)))))), modalEleRef.current);
|
136
135
|
};
|
@@ -357,7 +357,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
357
357
|
};
|
358
358
|
const handleScrollEvent = (swiper) => {
|
359
359
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
360
|
-
viewTime.current = new Date();
|
361
360
|
const item = data[swiper.previousIndex];
|
362
361
|
if (!item)
|
363
362
|
return;
|
@@ -395,6 +394,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
395
394
|
eventName: 'ProductView'
|
396
395
|
});
|
397
396
|
}
|
397
|
+
viewTime.current = new Date();
|
398
398
|
};
|
399
399
|
const handleReportProductView = (item) => {
|
400
400
|
var _a, _b, _c;
|
@@ -404,8 +404,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
404
404
|
};
|
405
405
|
(0, react_1.useEffect)(() => {
|
406
406
|
const item = data[activeIndex];
|
407
|
-
if (openHashtag)
|
407
|
+
if (openHashtag) {
|
408
408
|
handleReportProductView(item);
|
409
|
+
}
|
410
|
+
else {
|
411
|
+
viewTime.current = new Date();
|
412
|
+
}
|
409
413
|
}, [openHashtag, data, activeIndex]);
|
410
414
|
const handleViewImageStartEvent = (activeIndex) => {
|
411
415
|
var _a, _b, _c, _d, _e, _f;
|
@@ -111,9 +111,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
111
111
|
}
|
112
112
|
if (isEditor) {
|
113
113
|
let pageNum = 1;
|
114
|
-
query = Object.assign(Object.assign({}, query), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
|
115
|
-
if (!(query === null || query === void 0 ? void 0 : query.channel) || isInit.current)
|
116
|
-
return;
|
114
|
+
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] }));
|
115
|
+
if (!(query === null || query === void 0 ? void 0 : query.channel) || isInit.current) {
|
116
|
+
return undefined;
|
117
|
+
}
|
117
118
|
isInit.current = true;
|
118
119
|
let list = [];
|
119
120
|
let result = null;
|
@@ -124,6 +125,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
124
125
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
125
126
|
return undefined;
|
126
127
|
}
|
128
|
+
setLoading(false);
|
127
129
|
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));
|
128
130
|
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 : []);
|
129
131
|
if (isNotNullList) {
|
@@ -287,8 +289,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
287
289
|
bffGetTagList();
|
288
290
|
getRecommendVideos()
|
289
291
|
.then((data) => {
|
290
|
-
|
291
|
-
|
292
|
+
if (data) {
|
293
|
+
setRtcList(getFilterRecList(data));
|
294
|
+
setCacheRtcList(getFilterRecList(data));
|
295
|
+
}
|
292
296
|
})
|
293
297
|
.finally(() => {
|
294
298
|
bffEventReport({
|
@@ -307,8 +311,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
307
311
|
bffGetTagList();
|
308
312
|
getRecommendVideos()
|
309
313
|
.then((data) => {
|
310
|
-
|
311
|
-
|
314
|
+
if (data) {
|
315
|
+
setRtcList(getFilterRecList(data));
|
316
|
+
setCacheRtcList(getFilterRecList(data));
|
317
|
+
}
|
312
318
|
})
|
313
319
|
.finally(() => {
|
314
320
|
bffEventReport({
|
@@ -14,8 +14,8 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
|
|
14
14
|
const tool_1 = require("../../../../core/utils/tool");
|
15
15
|
const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
|
16
16
|
const CommodityDetail = (_a) => {
|
17
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z
|
18
|
-
var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
|
17
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
18
|
+
var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel"]);
|
19
19
|
const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
|
20
20
|
const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
|
21
21
|
const curTimeRef = (0, react_1.useRef)(null);
|
@@ -135,18 +135,18 @@ const CommodityDetail = (_a) => {
|
|
135
135
|
};
|
136
136
|
return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
|
137
137
|
}, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
|
138
|
-
const iframeUrl =
|
138
|
+
const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
|
139
139
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
140
140
|
react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
|
141
141
|
react_1.default.createElement("div", { style: { position: 'relative' } },
|
142
|
-
product && ((
|
142
|
+
product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
|
143
143
|
clickable: true,
|
144
144
|
bulletActiveClass: 'swipe-item-active-bullet',
|
145
145
|
clickableClass: getDotsAlign
|
146
146
|
}, loop: true, autoplay: {
|
147
147
|
delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
|
148
148
|
}, ref: ref },
|
149
|
-
react_1.default.createElement(react_1.default.Fragment, null, (
|
149
|
+
react_1.default.createElement(react_1.default.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
|
150
150
|
var _a;
|
151
151
|
return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
|
152
152
|
react_1.default.createElement("div", { style: {
|
@@ -162,7 +162,7 @@ const CommodityDetail = (_a) => {
|
|
162
162
|
objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
|
163
163
|
}, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
|
164
164
|
})))),
|
165
|
-
!((
|
165
|
+
!((_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
|
166
166
|
height,
|
167
167
|
width
|
168
168
|
}) },
|
@@ -170,7 +170,7 @@ const CommodityDetail = (_a) => {
|
|
170
170
|
objectFit: 'cover',
|
171
171
|
width: '100%',
|
172
172
|
height: '100%'
|
173
|
-
}), src: (
|
173
|
+
}), src: (_z = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _z !== void 0 ? _z : bottom_image, alt: 'pdp image' }))),
|
174
174
|
(iframeUrl || !product) && iframeIcon && (react_1.default.createElement("div", { style: {
|
175
175
|
padding: '5px 10px',
|
176
176
|
display: 'flex',
|
@@ -182,8 +182,7 @@ const CommodityDetail = (_a) => {
|
|
182
182
|
background: '#fff',
|
183
183
|
borderRadius: '3px'
|
184
184
|
}, onClick: () => setShow3DModal(true) },
|
185
|
-
react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px'
|
186
|
-
react_1.default.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D")))),
|
185
|
+
react_1.default.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px' })))),
|
187
186
|
renderCommodityGroup(),
|
188
187
|
react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
|
189
188
|
renderBtn(),
|
@@ -191,11 +190,12 @@ const CommodityDetail = (_a) => {
|
|
191
190
|
react_1.default.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
|
192
191
|
renderBtn()),
|
193
192
|
react_1.default.createElement(Modal_1.default, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
|
194
|
-
react_1.default.createElement("
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
193
|
+
react_1.default.createElement("div", { style: { height: window.innerHeight } },
|
194
|
+
react_1.default.createElement("iframe", { src: iframeUrl, style: {
|
195
|
+
width: '100%',
|
196
|
+
height: isTel ? `${664 - 50}px` : `${window.innerHeight - 50}px`,
|
197
|
+
marginTop: '50px',
|
198
|
+
border: 'none'
|
199
|
+
} })))));
|
200
200
|
};
|
201
201
|
exports.default = (0, react_1.memo)(CommodityDetail);
|