import { View, Text } from '@tarojs/components';
|
import { TripStatus } from '../../../constants/trip-status';
|
import { ensureSimulationOrderId } from '../dev/order-flow-simulator';
|
|
type Props = {
|
/** 当前页面订单 ID（为空时自动生成）。 */
|
orderId: string;
|
/** 设置页面订单 ID。 */
|
setOrderId: (orderId: string) => void;
|
/** 设置行程状态。 */
|
setTripStatus: (status: TripStatus) => void;
|
/** 绑定 socket 业务监听。 */
|
bindSocketListeners: () => void;
|
};
|
|
/**
|
* 转场动效调试面板（仅 dev 构建可见）。
|
*
|
* ## 用途
|
* 提供「呼叫中(3)→派单成功(4)」和「送驾中(6)→行程结束(8)/待评价(9)」两个关键转场的独立调试入口，
|
* 固定在地图上方，始终可见，方便反复验证转场动效。
|
*
|
* ## 使用方法
|
* 1. 点击「呼叫中(3)」/「派单成功(4)」/「送驾中(6)」/「行程结束(8)」直接跳到指定态。
|
* 2. 点击「重放转场」自动执行序列：先设前一态 → 400ms 后设后一态，稳定触发转场动效。
|
* 3. 点击「去评价」执行 送驾中(6) → 400ms → 待评价(9)，用于验证内部免费订单
|
* 行程结束后跳过待支付、直接进入评价态的转场。
|
* 4. 打开页面前需先清缓存，避免被 redirectTo 首页。
|
*/
|
export default function DebugTransitionPanel(props: Props) {
|
if (process.env.NODE_ENV === 'production') {
|
return null;
|
}
|
|
/** 生成或复用订单 ID。 */
|
const resolveOrderId = (): string => {
|
const existing = String(props.orderId || '').trim();
|
if (existing) {
|
return existing;
|
}
|
return `SIM-${Date.now()}`;
|
};
|
|
const prepOrder = () => {
|
props.bindSocketListeners();
|
const orderId = resolveOrderId();
|
ensureSimulationOrderId(orderId);
|
props.setOrderId(orderId);
|
};
|
|
/** 呼叫中(3) */
|
const handleSetCallingCar = () => {
|
prepOrder();
|
props.setTripStatus(TripStatus.CallingCar);
|
};
|
|
/** 派单成功(4) */
|
const handleSetVehicleApproaching = () => {
|
prepOrder();
|
props.setTripStatus(TripStatus.VehicleApproaching);
|
};
|
|
/** 重放 呼叫中→派单成功：3 → 400ms → 4 */
|
const handleReplayCallingToDispatch = () => {
|
prepOrder();
|
props.setTripStatus(TripStatus.CallingCar);
|
setTimeout(() => {
|
props.setTripStatus(TripStatus.VehicleApproaching);
|
}, 400);
|
};
|
|
/** 送驾中(6) */
|
const handleSetInService = () => {
|
prepOrder();
|
props.setTripStatus(TripStatus.InService);
|
};
|
|
/** 行程结束(8) */
|
const handleSetTripFinished = () => {
|
prepOrder();
|
props.setTripStatus(TripStatus.TripFinished);
|
};
|
|
/**
|
* 重放 送驾中→待评价：6 → 400ms → 9。
|
*
|
* 用于测试内部免费订单（无需支付）行程结束后直接进入待评价态的转场，
|
* 跳过 行程结束(8) 待支付中间态。
|
*/
|
const handleReplayInServiceToEvaluate = () => {
|
prepOrder();
|
props.setTripStatus(TripStatus.InService);
|
setTimeout(() => {
|
props.setTripStatus(TripStatus.PaymentSuccess);
|
}, 400);
|
};
|
|
const btn = (bg: string) =>
|
({
|
flex: 1,
|
textAlign: 'center' as const,
|
padding: '7px 0',
|
margin: '0 3px',
|
background: bg,
|
color: '#fff',
|
fontSize: '12px',
|
borderRadius: '6px',
|
} as const);
|
|
return (
|
<View
|
catchMove
|
style={{
|
position: 'fixed',
|
left: '8px',
|
right: '8px',
|
top: '8px',
|
zIndex: 9998,
|
padding: '8px 10px',
|
background: 'rgba(20,20,20,0.88)',
|
color: '#fff',
|
borderRadius: '10px',
|
boxShadow: '0 2px 12px rgba(0,0,0,0.35)',
|
}}
|
>
|
{/* 呼叫派单转场 */}
|
<View
|
style={{
|
fontSize: '11px',
|
lineHeight: '1.5',
|
marginBottom: '4px',
|
opacity: 0.85,
|
}}
|
>
|
<Text style={{ fontWeight: 'bold' }}>呼叫派单转场（呼叫中 → 派单成功）</Text>
|
</View>
|
<View style={{ display: 'flex', marginBottom: '6px' }}>
|
<View onClick={handleSetCallingCar} style={btn('#4b9fd6')}>
|
呼叫中(3)
|
</View>
|
<View onClick={handleSetVehicleApproaching} style={btn('#36b37e')}>
|
派单成功(4)
|
</View>
|
<View onClick={handleReplayCallingToDispatch} style={btn('#ff7a45')}>
|
重放转场
|
</View>
|
</View>
|
|
{/* 送驾到达转场 */}
|
<View
|
style={{
|
fontSize: '11px',
|
lineHeight: '1.5',
|
marginBottom: '4px',
|
opacity: 0.85,
|
}}
|
>
|
<Text style={{ fontWeight: 'bold' }}>送驾到达转场（送驾中 → 行程结束 / 待评价）</Text>
|
</View>
|
<View style={{ display: 'flex' }}>
|
<View onClick={handleSetInService} style={btn('#4b9fd6')}>
|
送驾中(6)
|
</View>
|
<View onClick={handleSetTripFinished} style={btn('#36b37e')}>
|
行程结束(8)
|
</View>
|
<View onClick={handleReplayInServiceToEvaluate} style={btn('#ff7a45')}>
|
去评价
|
</View>
|
</View>
|
</View>
|
);
|
}
|
