H5/xp-robotaxi-miniprogram.git

			@@ -2,17 +2,18 @@
			import { View, Text, Image } from '@tarojs/components';
			import { useEffect, useState } from 'react';
			import './css-folder/cancel-popup.less'
			import SiteRouteCard from '../../../components/site-route-card';
			import { formatRemainingDurationDisplay } from '../../../utils/format';
			import {
			clearOrderTripStorage
			} from '../../../../utils/Robotaxi-public-method'
			import { TripStatus } from '../../../constants/trip-status';
			import { TripStatus, CancelType } from '../../../constants/trip-status';
			import useBottomPopupAnimation from './hooks/use-bottom-popup-animation';


			type Props = {
			show?: boolean;
			cancelType?: number;
			cancelType?: CancelType;
			startSite?: any;
			endSite?: any;
			waitMinutes?: number;
			@@ -27,7 +28,7 @@
			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) {
			export default function CancelPopup({ show = false, cancelType = CancelType.CallingCar, startSite, endSite, waitMinutes, tripStatus, routeDurationSeconds, discountAmount, onClose, onConfirm }: Props) {
			const { visible, animationData } = useBottomPopupAnimation(show);
			// 占位动画当前使用的图片地址，默认 webp，加载失败时回退到 png
			const [animationSrc, setAnimationSrc] = useState(CANCEL_ANIMATION_WEBP);
			@@ -51,42 +52,46 @@

			// 不同取消阶段对应的文案配置
			const STATUS_MAP = {
			1: {
			[CancelType.CallingCar]: {
			title: `${waitMinutesValue}分钟内预计有车，确定取消吗？`,
			tip: discountAmountValue > 0 ? `本单限时优惠${discountAmountValue}元，重新叫车可能等待更久` : '',
			},
			2: {
			[CancelType.VehicleApproaching]: {
			title: tripStatus === TripStatus.VehicleApproaching
			? `车辆还有${approachingDurationDisplay.value}${approachingDurationDisplay.unit}到达，确定取消吗`
			: `车辆还有${waitMinutesValue}分钟到达，确定取消吗`,
			tip: discountAmountValue > 0 ? `本单限时优惠${discountAmountValue}元，重新叫车可能等待更久` : '',
			},
			3: {
			[CancelType.VehicleArrivedPickup]: {
			title: '车辆已到达，确定取消吗？',
			tip: '车辆到达情况下取消可能会被限制发单',
			},
			4: {
			[CancelType.OrderCanceled]: {
			title: '订单已取消',
			tip: '已为您取消订单，期待您下次体验',
			},
			5: {
			[CancelType.NoAvailableVehicle]: {
			title: '附近没有空余车辆，已为您取消订单',
			tip: '当前运力紧张，建议您稍后重新发起订单',
			},
			6: {
			[CancelType.Redispatching]: {
			title: '正在为您重新派车中...',
			tip: '当前车辆无法继续服务',
			},
			[CancelType.InService]: {
			title: `预计${approachingDurationDisplay.value}${approachingDurationDisplay.unit}到达目的地，确认取消吗？`,
			tip: '',
			},
			}

			// 关闭弹窗时按类型执行对应流程
			const closePopup = () => {
			if (cancelType == 5) {
			if (cancelType == CancelType.NoAvailableVehicle) {
			onConfirm?.();
			onClose?.();
			return
			}
			if (cancelType == 4) {
			if (cancelType == CancelType.OrderCanceled) {
			Taro.reLaunch({
			url: '/pages/robotaxi/home/index',
			})
			@@ -109,37 +114,32 @@
			<View className='cancel-tip-box'>
			<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>
			STATUS_MAP[cancelType]?.tip && <View className={`cancel-tip-box-desc ${cancelType === CancelType.OrderCanceled && 'color1'}`}>{STATUS_MAP[cancelType].tip}</View>
			}
			</View>
			{
			[4, 5].includes(cancelType) ?
			<View>
			<View className='cancel-site-box'>
			<View className='cancel-site-box-icon'>
			<View className='cancel-site-box-icon-start'></View>
			<Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/dotted-line.png" />
			<View className='cancel-site-box-icon-end'></View>
			</View>
			<View className='cancel-site-box-content'>
			<View className='cancel-site-box-content-name'>{startSiteName}</View>
			<View className='cancel-site-box-divider'></View>
			<View className='cancel-site-box-content-name'>{endSiteName}</View>
			</View>
			</View>
			<View className='cancel-btn-box'>
			<View className='cancel-btn-again' onClick={onConfirm}>再来一单</View>
			</View>
			[CancelType.OrderCanceled, CancelType.NoAvailableVehicle].includes(cancelType) ?
			<View>
			<SiteRouteCard
			className='cancel-site-box'
			sites={[
			{ name: startSiteName },
			{ name: endSiteName }
			]}
			/>
			<View className='cancel-btn-box'>
			<View className='cancel-btn-again' onClick={onConfirm}>再来一单</View>
			</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>
			:
			<>
			{/* 占位动画：优先 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>