pb-sxp-ui 1.0.17 → 1.0.19

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

@@ -0,0 +1,163 @@
+import { __rest } from "tslib";
+import { css } from '@emotion/css';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import './index.less';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import arrow from './arrow.png';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const CommodityDetailDiro = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "index"]);
+    const [spread, setSpread] = useState(true);
+    const { sxpParameter } = useSxpDataSource();
+    const { popupDetailData, bffEventReport, isPreview, swiperRef, waterFallData } = useSxpDataSource();
+    const { jumpToWeb, productView } = useEventReport();
+    const scrollRef = useRef(null);
+    const touchRef = useRef(null);
+    const touchMoveRef = useRef(null);
+    const [stopSlide, setStopSlide] = useState(false);
+    const [isBottom, setIsBottom] = useState(false);
+    const [isTop, setIsTop] = useState(true);
+    const curTimeRef = useRef(null);
+    const data = isPost ? rec : popupDetailData;
+    const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
+    const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(data, product, cta, position);
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current, position);
+            }
+            window.location.href = window.getJointUtmLink(product.link);
+        }
+    };
+    useEffect(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+        }
+        else {
+            return '$7,000';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const width = isPreview ? 375 : window.innerWidth;
+    const handleClickCollapse = () => {
+        setSpread(!spread);
+    };
+    useEffect(() => {
+        var _a, _b;
+        console.log((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight, window.innerHeight);
+        if ((scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) && ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) > window.innerHeight) {
+            setStopSlide(true);
+        }
+    }, [scrollRef]);
+    useEffect(() => {
+        const handleScroll = () => {
+            if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+                const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+                const isBottom = scrollTop + clientHeight === scrollHeight;
+                if (isBottom) {
+                    setIsBottom(true);
+                }
+                else {
+                    setIsBottom(false);
+                }
+                if (scrollTop === 0) {
+                    setIsTop(true);
+                }
+                else {
+                    setIsTop(false);
+                }
+            }
+        };
+        if (scrollRef.current) {
+            scrollRef.current.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            if (scrollRef.current) {
+                scrollRef.current.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, [scrollRef]);
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        var _a, _b, _c, _d;
+        if (touchMoveRef.current) {
+            touchMoveRef.current = false;
+            const currentY = event.touches[0].clientY;
+            const diff = touchRef.current - currentY;
+            if (diff > 0 && (isBottom || !stopSlide)) {
+                (_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.slideNext();
+            }
+            else if (diff < 0 && (isTop || !stopSlide)) {
+                (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slidePrev();
+            }
+        }
+    };
+    return (React.createElement("div", { className: 'pb-commondityDiro' },
+        React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props, { onTouchStart: handleTouchStart, onTouchMove: (e) => {
+                e.stopPropagation();
+                handleTouchMove(e);
+            } }),
+            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
+                    delay: 3000
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                return (React.createElement(SwiperSlide, { key: src },
+                    React.createElement("div", { style: {
+                            overflow: 'hidden',
+                            width,
+                            height: width
+                        } },
+                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+            }))),
+            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
+                    position: 'relative',
+                    height: 0,
+                    width: '100%',
+                    paddingBottom: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("img", { className: css({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        objectFit: 'cover',
+                        width: '100%'
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+            React.createElement("div", { className: 'pb-commondityDiro-content' },
+                React.createElement("div", { className: 'pb-commondityDiro-content-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'MEDIUM LADY D-LITE BAG'),
+                React.createElement("div", { className: 'pb-commondityDiro-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (product === null || product === void 0 ? void 0 : product.collection) || 'Gold-Tone and White Butterfly Zodiac Embroidery'),
+                React.createElement("div", { className: 'pb-commondityDiro-content-scrollRef', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.itemId) }, (product === null || product === void 0 ? void 0 : product.itemId) ? `Reference: ${product === null || product === void 0 ? void 0 : product.itemId}` : 'Reference: M0565OESU_M01E'),
+                React.createElement("div", { className: 'pb-commondityDiro-content-line' }),
+                React.createElement("div", { className: 'pb-commondityDiro-content-price' }, priceText)),
+            React.createElement("div", { className: 'pb-commondityDiro-desc', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
+                React.createElement("div", { className: 'pb-commondityDiro-desc-collapse', onClick: handleClickCollapse },
+                    React.createElement("div", { className: 'pb-commondityDiro-desc-collapse-title' }, "DESCRIPTION"),
+                    React.createElement("img", { className: `pb-commondityDiro-desc-collapse-icon ${spread ? 'pb-commondityDiro-desc-collapse-iconActive' : ''}`, src: arrow, alt: '' })),
+                React.createElement("div", { className: 'pb-commondityDiro-desc-info', hidden: !spread }, (product === null || product === void 0 ? void 0 : product.info) ||
+                    'The Lady D-Lite bag combines classic elegance with House modernity. The style is fully embroidered with a gold-tone and white Butterfly Zodiac motif by Pietro Ruffo, showcasing a constellation enhanced by astrological signs and adorned with butterflies. A Christian Dior Paris signature adorns the front, while D.I.O.R. charms in pale gold-finish metal further enhance and highlight the silhouette. Featuring a wide, removable embroidered shoulder strap, the medium Lady D-Lite bag can be carried by hand or worn crossbody.')),
+            (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'pb-commondityDiro-h90' }),
+                React.createElement("div", { className: 'pb-commondityDiro-bottom' },
+                    React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiro-bottom-btn' }, (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'SHOP NOW')))))));
+};
+export default memo(CommodityDetailDiro);

package/es/materials/sxp/popup/CommodityDetailDiro/material.d.ts

@@ -0,0 +1,2 @@
+declare const CommodityDetailDiro: import("../../../../core/create").MaterialComponet<import(".").ICommodityDetailDiroProps>;
+export { CommodityDetailDiro };

package/es/materials/sxp/popup/CommodityDetailDiro/material.js

@@ -0,0 +1,16 @@
+import CommodityDetailDiroComponent from '.';
+import { createMaterial } from '../../../../core/create';
+const CommodityDetailDiro = createMaterial(CommodityDetailDiroComponent, {
+    displayName: '商品详情',
+    icon: '',
+    category: 'popup',
+    type: 'CommodityDetailDiro',
+    defaulSetting: {
+        props: {},
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+export { CommodityDetailDiro };

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

@@ -0,0 +1,35 @@
+import React, { CSSProperties } from 'react';
+import { IEditorContext } from '../../../../core/context/EditorContext';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+import './index.less';
+export interface ICommodityDetailDiroNewProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    onClick?: () => void;
+    schema?: IEditorContext['schema'];
+    isDefault?: boolean;
+    rec?: RecItemType;
+    viewTime?: any;
+    isPost?: boolean;
+    bottom_image?: string;
+    tipText?: {
+        foldText?: string;
+        unfoldText?: string;
+    };
+    swiper: {
+        dotsAlign: 'left' | 'center';
+        delay: number;
+    };
+    commodityStyles?: {
+        title: CSSProperties;
+        collection: CSSProperties;
+        price: CSSProperties;
+        taxInfo: CSSProperties;
+        info: CSSProperties;
+    };
+    buttonStyle?: CSSProperties;
+    index?: number;
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailDiroNewProps>;
+export default _default;

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

@@ -0,0 +1,134 @@
+import { __rest } from "tslib";
+import { css } from '@emotion/css';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import './index.less';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import Modal from '../../../../core/components/SxpPageRender/Modal';
+import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const CommodityDetailDiroNew = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
+    const [spread, setSpread] = useState(true);
+    const { sxpParameter } = useSxpDataSource();
+    const { popupDetailData, bffEventReport, isPreview, swiperRef, waterFallData } = useSxpDataSource();
+    const { jumpToWeb, productView } = useEventReport();
+    const scrollRef = useRef(null);
+    const touchRef = useRef(null);
+    const touchMoveRef = useRef(null);
+    const [stopSlide, setStopSlide] = useState(false);
+    const [isBottom, setIsBottom] = useState(false);
+    const [isTop, setIsTop] = useState(true);
+    const [showModal, setShowModal] = useState(false);
+    const curTimeRef = useRef(null);
+    const data = isPost ? rec : popupDetailData;
+    const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
+    const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(data, product, cta, position);
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current, position);
+            }
+            window.location.href = window.getJointUtmLink(product.link);
+        }
+    };
+    useEffect(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+        }
+        else {
+            return '£102,300.00';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const width = isPreview ? 375 : window.innerWidth;
+    const handleClickCollapse = () => {
+        setSpread(!spread);
+    };
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        var _a, _b, _c, _d;
+        if (touchMoveRef.current) {
+            touchMoveRef.current = false;
+            const currentY = event.touches[0].clientY;
+            const diff = touchRef.current - currentY;
+            if (diff > 0 && (isBottom || !stopSlide)) {
+                (_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.slideNext();
+            }
+            else if (diff < 0 && (isTop || !stopSlide)) {
+                (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slidePrev();
+            }
+        }
+    };
+    const productInfoText = ({ isPost }) => {
+        return (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, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
+                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy` })));
+    };
+    return (React.createElement("div", { className: 'pb-commondityDiroNew' },
+        React.createElement("div", Object.assign({ ref: scrollRef, className: css(Object.assign({}, style)) }, props),
+            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+                    clickable: true,
+                    bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
+                    clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
+                        ? 'commondityDiroNew-swiper-clickable-left'
+                        : 'commondityDiroNew-swiper-clickable-center'
+                }, loop: true, autoplay: {
+                    delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                return (React.createElement(SwiperSlide, { key: src },
+                    React.createElement("div", { style: {
+                            overflow: 'hidden',
+                            width,
+                            height: width
+                        } },
+                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+            }))),
+            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
+                    position: 'relative',
+                    height: 0,
+                    width: '100%',
+                    paddingBottom: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("img", { className: css({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        objectFit: 'cover',
+                        width: '100%'
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+            React.createElement("div", { className: 'pb-commondityDiroNew-content' },
+                React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                        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: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
+                productInfoText({ isPost }))),
+        React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
+};
+export default memo(CommodityDetailDiroNew);

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

@@ -0,0 +1,2 @@
+declare const CommodityDetailDiroNew: import("../../../../core/create").MaterialComponet<import(".").ICommodityDetailDiroNewProps>;
+export { CommodityDetailDiroNew };

package/es/materials/sxp/popup/CommodityDetailDiroNew/material.js

@@ -0,0 +1,61 @@
+import settingRender from './settingRender';
+import CommodityDetailDiroNewComponent from '.';
+import { createMaterial } from '../../../../core/create';
+const CommodityDetailDiroNew = createMaterial(CommodityDetailDiroNewComponent, {
+    displayName: '商品详情',
+    icon: '',
+    category: 'popup',
+    type: 'CommodityDetailDiroNew',
+    related: {
+        settingRender
+    },
+    defaulSetting: {
+        props: {
+            swiper: {
+                dotsAlign: 'left',
+                delay: 3
+            },
+            commodityStyles: {
+                price: {
+                    color: '#000',
+                    fontWeight: 'bold',
+                    fontSize: 13
+                },
+                title: {
+                    color: '#000',
+                    fontSize: 13
+                },
+                collection: {
+                    color: '#757575',
+                    fontSize: 13
+                },
+                info: {
+                    color: '#757575',
+                    fontSize: 13
+                },
+                taxInfo: {
+                    color: '#000',
+                    fontWeight: 'bold',
+                    fontSize: 13,
+                    textAlign: 'right'
+                }
+            },
+            buttonStyle: {
+                backgroundColor: '#000',
+                fontSize: 12,
+                height: 52,
+                fontWeight: 'bold',
+                textAlign: 'center',
+                color: '#fff',
+                borderRadius: 25,
+                marginTop: 16,
+                marginBottom: 16
+            }
+        },
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+export { CommodityDetailDiroNew };

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

@@ -0,0 +1,137 @@
+declare const _default: ({
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string[];
+        addonAfter?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        addonAfter: string;
+        label?: undefined;
+        options?: undefined;
+    })[];
+} | {
+    title: string;
+    child: {
+        name: string[];
+        type: string;
+        child: ({
+            label: string;
+            type: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            name: string[];
+            initialValue: string;
+            child?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: ({
+                type: string;
+                name: string[];
+                options?: undefined;
+                initialValue?: undefined;
+                addonAfter?: undefined;
+            } | {
+                type: string;
+                options: {
+                    label: string;
+                    value: string;
+                }[];
+                name: string[];
+                initialValue: string;
+                addonAfter?: undefined;
+            } | {
+                type: string;
+                addonAfter: string;
+                name: string[];
+                options?: undefined;
+                initialValue?: undefined;
+            })[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            label: string;
+            type: string;
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+            child?: undefined;
+        } | {
+            label: string;
+            type: string;
+            name: string[];
+            options?: undefined;
+            initialValue?: undefined;
+            child?: undefined;
+        })[];
+    }[];
+} | {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        name: string[];
+        initialValue: string;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            max: number;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            max: number;
+        })[];
+        name?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        label?: undefined;
+        initialValue?: undefined;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            initialValue: string;
+            options?: undefined;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            options: {
+                label: string;
+                value: string;
+            }[];
+            initialValue: string;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            initialValue?: undefined;
+            options?: undefined;
+        })[];
+        name?: undefined;
+        initialValue?: undefined;
+    })[];
+})[];
+export default _default;