import Taro from "@tarojs/taro";
|
import { View, Image } from "@tarojs/components";
|
import { formatCountdown } from '../../../../../utils/Robotaxi-public-method';
|
|
type Props = {
|
tripStatus: number;
|
waitMinutes: number | null;
|
durationDisplay: { value: string | number; unit: string };
|
isArriveSoon: boolean;
|
isPickupCountdownSoon: boolean;
|
pickupCountdownSeconds: number | null;
|
finishCountdownEnabled: boolean;
|
finishCountdownSeconds: number | null;
|
limitMinutes: number | null;
|
handleOpenCancelPopup?: (displayInfo: { durationDisplay: { value: string | number; unit: string }; waitMinutes: number | null }) => void;
|
};
|
|
export default function TripStatusHeader({
|
tripStatus,
|
waitMinutes,
|
durationDisplay,
|
isArriveSoon,
|
isPickupCountdownSoon,
|
pickupCountdownSeconds,
|
finishCountdownEnabled,
|
finishCountdownSeconds,
|
limitMinutes,
|
handleOpenCancelPopup
|
}: Props) {
|
// 标题行文案映射
|
const titleMap = {
|
3: <>预计<View className="time">{waitMinutes}</View>分钟内有车应答</>,
|
4: isArriveSoon
|
? <>即将到达</>
|
: <>车辆还有<View className="time">{durationDisplay.value}</View>{durationDisplay.unit}到达</>,
|
5: <>车辆已到达上车点<View className="time" style={isPickupCountdownSoon ? { color: '#E03434' } : undefined}>{pickupCountdownSeconds !== null ? formatCountdown(pickupCountdownSeconds) : '--:--'}</View></>,
|
6: <>预计<View className="time">{durationDisplay.value}</View>{durationDisplay.unit}抵达目的地</>,
|
7: (finishCountdownEnabled || finishCountdownSeconds !== null)
|
? <>已到达目的地<View className="time">{finishCountdownSeconds !== null ? formatCountdown(finishCountdownSeconds) : '--:--'}</View></>
|
: <>已到达目的地</>,
|
8: '行程已结束',
|
9: '支付成功'
|
}
|
|
// 说明文案映射
|
const descMap = {
|
3: { text: '正全力为您叫车中，请耐心等待...', className: 'calling-car-content-desc' },
|
4: limitMinutes ? { text: `此处限停${limitMinutes}分钟，请尽快前往上车点`, className: isArriveSoon ? 'calling-car-content-desc-red' : 'calling-car-content-warning' } : null,
|
5: { text: '此处限停，请在倒计时结束前到达上车点', className: 'calling-car-content-desc' },
|
6: { text: '行程已开始，请全程系好安全带', className: 'calling-car-content-desc' },
|
7: { text: '倒计时结束时车辆将自动驶离，请带好物品安全下车', className: 'calling-car-content-desc' },
|
8: { text: '订单待支付，请核对后完成支付', className: 'calling-car-content-desc' }
|
}
|
|
return (
|
<View className='calling-car-content'>
|
<View>
|
{titleMap[tripStatus] && (
|
<View className='calling-car-content-title'>{titleMap[tripStatus]}</View>
|
)}
|
{descMap[tripStatus] && (
|
<View style={{ paddingBottom: tripStatus === 3 ? '20px' : '0px' }} className={descMap[tripStatus]?.className}>{descMap[tripStatus]?.text}</View>
|
)}
|
</View>
|
{
|
[3, 4, 5].includes(tripStatus) &&
|
<View className="cancel-btn">
|
<Image onClick={() => handleOpenCancelPopup?.({ durationDisplay, waitMinutes })} src={require('../../../../assets/cancel-btn.png')} className="cancel" />
|
</View>
|
}
|
</View>
|
);
|
}
|
