zjk
2026-07-29 429208957f30ab9eedc5533a81aaa284048d09f5
src/robotaxi/pages/begin-route/components/cancel-popup.tsx
@@ -23,8 +23,21 @@
    onConfirm?: () => void;
}
// 占位动画图片地址:优先加载 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';
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);
    // 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 || '-';
@@ -91,11 +104,13 @@
            <View className='cancel-mask'></View>
            <View className='cancel-content' animation={animationData}>
                <View className='cancel-box'>
                    <Image onClick={closePopup} className='cancel-icon' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/close-icon.png" />
                    <Image onClick={closePopup} className='cancel-icon' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/close-icon.png" />
                </View>
                <View className='cancel-tip-box'>
                    <View className='cancel-tip-box-title'>{STATUS_MAP[cancelType].title}</View>
                    <View className={`cancel-tip-box-desc ${cancelType === 4 && 'color1'}`}>{STATUS_MAP[cancelType].tip}</View>
                    <View className='cancel-tip-box-title'>{STATUS_MAP[cancelType]?.title}</View>
                    {
                        STATUS_MAP[cancelType]?.tip && <View className={`cancel-tip-box-desc ${cancelType === 4 && 'color1'}`}>{STATUS_MAP[cancelType].tip}</View>
                    }
                </View>
                {
                    [4, 5].includes(cancelType) ?
@@ -108,6 +123,7 @@
                                </View>
                                <View className='cancel-site-box-content'>
                                    <View>{startSiteName}</View>
                                    <View className='cancel-site-box-divider'></View>
                                    <View>{endSiteName}</View>
                                </View>
                            </View>
@@ -116,10 +132,14 @@
                            </View>
                        </View>
                        :
                        <View className='cancel-btn-box'>
                            <Image className='cancel-btn-cancel' onClick={onConfirm} src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/submit-cancel-btn.png' />
                            <View className='cancel-btn-again wait-btn' onClick={onClose}>再等等</View>
                        </View>
                        <>
                            {/* 占位动画:优先 webp,加载失败回退 png */}
                            <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>
                            </View>
                        </>
                }
            </View>
        </View>