feat:取消弹窗加上占位图片

fuqj

2026-07-31 d5b0e1f69dbd585dd22ac9a9fedef1764c6eedd4

feat:取消弹窗加上占位图片

 src/robotaxi/pages/begin-route/components/cancel-popup.tsx

@@ -24,20 +24,20 @@
}

// 占位动画图片地址：优先加载 webp，加载失败回退 png
// const CANCEL_ANIMATION_WEBP = 'https://xps01.xiaopeng.com/content/commomother/2026/07-09/14-45-520155-955631373.png?x-oss-process=image/format,webp';
// const CANCEL_ANIMATION_PNG = 'https://xps01.xiaopeng.com/content/commomother/2026/07-09/14-45-520155-955631373.png';
const CANCEL_ANIMATION_WEBP = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/cancel-img20260731.png?x-oss-process=image/format,webp';
const CANCEL_ANIMATION_PNG = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/cancel-img20260731.png';

export default function CancelPopup({ show = false, cancelType = 1, startSite, endSite, waitMinutes, tripStatus, routeDurationSeconds, discountAmount, onClose, onConfirm }: Props) {
    const { visible, animationData } = useBottomPopupAnimation(show);
    // 占位动画当前使用的图片地址，默认 webp，加载失败时回退到 png
    // const [animationSrc, setAnimationSrc] = useState(CANCEL_ANIMATION_WEBP);
    const [animationSrc, setAnimationSrc] = useState(CANCEL_ANIMATION_WEBP);

    // // webp 加载失败时回退到 png
    // const handleAnimationError = () => {
    //     if (animationSrc !== CANCEL_ANIMATION_PNG) {
    //         setAnimationSrc(CANCEL_ANIMATION_PNG);
    //     }
    // };
    // webp 加载失败时回退到 png
    const handleAnimationError = () => {
        if (animationSrc !== CANCEL_ANIMATION_PNG) {
            setAnimationSrc(CANCEL_ANIMATION_PNG);
        }
    };
    const cachedStartSite = startSite || Taro.getStorageSync('startSite') || {};
    const cachedEndSite = endSite || Taro.getStorageSync('endSite') || {};
    const startSiteName = cachedStartSite?.name || cachedStartSite?.address || '-';
@@ -134,8 +134,7 @@
                        :
                        <>
                            {/* 占位动画：优先 webp，加载失败回退 png */}
                            {/* <Image className='cancel-animation' src={animationSrc} onError={handleAnimationError} /> */}
                            <View className='default-empty' />
                            <Image className='cancel-animation' src={animationSrc} onError={handleAnimationError} />
                            <View className='cancel-btn-box'>
                                <View  className=' cancel-btn-cancel' onClick={onConfirm}>确认取消</View>
                                <View className='cancel-btn-again wait-btn' onClick={onClose}>再等等</View>

 src/robotaxi/pages/begin-route/components/css-folder/cancel-popup.less

@@ -117,9 +117,7 @@
            height: 262px;
            margin-top: 48px;
        }
      .default-empty {
        height: 142px;
      }

        .cancel-btn-box {
            display: flex;
            margin-top: 48px;