| | |
| | | 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 || '-'; |
| | |
| | | <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) ? |
| | |
| | | </View> |
| | | <View className='cancel-site-box-content'> |
| | | <View>{startSiteName}</View> |
| | | <View className='cancel-site-box-divider'></View> |
| | | <View>{endSiteName}</View> |
| | | </View> |
| | | </View> |
| | |
| | | </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> |