import Taro from "@tarojs/taro";
|
import { View, Image } from "@tarojs/components";
|
import { useState, useEffect } from "react";
|
import { formatMoney, getTypeLabel, formatTripDistance, formatNumber, formatTripDurationFromSeconds } from '../../../../../utils/Robotaxi-public-method';
|
|
type Props = {
|
tripStatus: number;
|
fareBreakdown: any;
|
orderId?: string;
|
resetDetailVersion?: number;
|
onToggleDetailFade?: (expanded: boolean, hasFare: boolean) => void;
|
handlePay?: () => void;
|
};
|
|
export default function FareDetailCard({
|
tripStatus,
|
fareBreakdown,
|
orderId,
|
resetDetailVersion,
|
onToggleDetailFade,
|
handlePay
|
}: Props) {
|
const [showDetail, setShowDetail] = useState(false); // 费用明细展开状态
|
|
// 外部重置版本变化时收起明细
|
useEffect(() => {
|
if (typeof resetDetailVersion === 'number') {
|
setShowDetail(false);
|
}
|
}, [resetDetailVersion]);
|
|
// 跳转费用说明页
|
const toMoneyDetail = () => {
|
Taro.navigateTo({
|
url: `/robotaxi/pages/expense-description/index?orderId=${orderId}`
|
});
|
};
|
|
// 切换明细面板并同步地图淡化状态
|
const handleToggleDetail = () => {
|
const next = !showDetail;
|
setShowDetail(next);
|
const hasFare = !!fareBreakdown && (
|
Number(fareBreakdown?.orderMoney) > 0 ||
|
(Array.isArray(fareBreakdown?.start) && fareBreakdown.start.length > 0) ||
|
(Array.isArray(fareBreakdown?.mileage) && fareBreakdown.mileage.length > 0) ||
|
(Array.isArray(fareBreakdown?.duration) && fareBreakdown.duration.length > 0) ||
|
(Array.isArray(fareBreakdown?.longDistance) && fareBreakdown.longDistance.length > 0) ||
|
Number(fareBreakdown?.couponMoney) > 0 ||
|
Number(fareBreakdown?.redPacketMoney) > 0
|
);
|
if (typeof onToggleDetailFade === 'function') {
|
onToggleDetailFade(next, hasFare);
|
}
|
};
|
|
if (![8, 9].includes(tripStatus)) {
|
return null;
|
}
|
|
return (
|
<View className="car-card-end">
|
<View className="car-card-line" style="margin:24px 0;"></View>
|
<View className="car-card-end-particulars">
|
<View className="car-card-end-particulars-money">
|
<View>{formatMoney(
|
(fareBreakdown?.orderMoney - fareBreakdown?.redPacketMoney - fareBreakdown?.couponMoney) <= 0
|
? 0 : (fareBreakdown?.orderMoney - fareBreakdown?.redPacketMoney - fareBreakdown?.couponMoney))}</View>
|
<View>元</View>
|
{
|
fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney > 0 &&
|
<View>{formatMoney(fareBreakdown?.orderMoney)}元</View>
|
}
|
{
|
fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney > 0 &&
|
<View>已优惠{formatMoney(fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney)}元</View>
|
}
|
</View>
|
<View className="car-card-end-particulars-view" onClick={handleToggleDetail}>
|
<View>{showDetail ? '收起明细' : '查看明细'}</View>
|
<Image style={{ transform: showDetail ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }} src={require('../../../../assets/ccc-icon-right.png')} />
|
</View>
|
</View>
|
<View className={`particulars-detail ${showDetail ? 'expand' : ''}`}>
|
{
|
Number(fareBreakdown?.orderMoney) > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>订单总额</View>
|
<View>{formatMoney(fareBreakdown?.orderMoney)}元</View>
|
</View>
|
</View>
|
}
|
{Array.isArray(fareBreakdown?.start) && fareBreakdown.start.length > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>起步价</View>
|
<View>{formatMoney(fareBreakdown.start.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
|
</View>
|
{fareBreakdown.start.filter((item: any) => item?.money || item?.time).map((item: any, index: number) => (
|
<View key={`start-${index}`} className="particulars-detail-item-content">
|
<View>{item?.time || '--'}</View>
|
<View>{formatMoney(item?.money)}元</View>
|
</View>
|
))}
|
</View>
|
}
|
{Array.isArray(fareBreakdown?.mileage) && fareBreakdown.mileage.length > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>里程费</View>
|
<View>{formatMoney(fareBreakdown.mileage.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
|
</View>
|
{fareBreakdown.mileage.filter((item: any) => item?.money || item?.mileage).map((item: any, index: number) => (
|
<View key={`mileage-${index}`} className="particulars-detail-item-content">
|
<View>{getTypeLabel(item?.type)}（{formatTripDistance(item?.mileage)}）</View>
|
<View>{formatMoney(item?.money)}元</View>
|
</View>
|
))}
|
</View>
|
}
|
{Array.isArray(fareBreakdown?.duration) && fareBreakdown.duration.length > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>时长费</View>
|
<View>{formatMoney(fareBreakdown.duration.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
|
</View>
|
{fareBreakdown.duration.filter((item: any) => item?.money || item?.duration).map((item: any, index: number) => (
|
<View key={`duration-${index}`} className="particulars-detail-item-content">
|
<View>{getTypeLabel(item?.type)}（{formatNumber(item?.duration, 0)}分钟）</View>
|
<View>{formatMoney(item?.money)}元</View>
|
</View>
|
))}
|
</View>
|
}
|
{Array.isArray(fareBreakdown?.longDistance) && fareBreakdown.longDistance.length > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>远途费</View>
|
<View>{formatMoney(fareBreakdown.longDistance.reduce((sum: number, item: any) => sum + (Number(item?.money) || 0), 0))}元</View>
|
</View>
|
</View>
|
}
|
{Number(fareBreakdown?.redPacketMoney) > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>红包</View>
|
<View className="color1">-{formatMoney(fareBreakdown?.redPacketMoney)}元</View>
|
</View>
|
</View>
|
}
|
{Number(fareBreakdown?.couponMoney) > 0 &&
|
<View className="particulars-detail-item">
|
<View className="particulars-detail-item-title">
|
<View>优惠券</View>
|
<View className="color1">-{formatMoney(fareBreakdown?.couponMoney)}元</View>
|
</View>
|
</View>
|
}
|
</View>
|
<View className="car-card-end-cost">
|
<View className="car-card-end-cost-money">
|
全程{formatTripDistance(fareBreakdown?.kilometer)}｜{formatTripDurationFromSeconds(fareBreakdown?.time)}
|
</View>
|
<View onClick={toMoneyDetail} className="car-card-end-cost-view">
|
<View>费用说明</View>
|
<Image src={require('../../../../assets/ccc-icon-right.png')} />
|
</View>
|
</View>
|
{
|
tripStatus === 8 &&
|
<View onClick={handlePay} className="car-card-end-pay">立即支付</View>
|
}
|
</View>
|
);
|
}
|
