| | |
| | | */ |
| | | export default function SeatHvArea({ tripStatus, orderId, pageDidShowVersion = 0, hasPreviousOrder = false, active = true }: Props) { |
| | | const [seats, setSeats] = useState<SeatHvItem[]>([]); |
| | | // 座椅状态查询是否已出结果(成功或失败)。未出结果前整块透明,避免先闪「不可用」再切成可用 |
| | | const [queried, setQueried] = useState(false); |
| | | // 座舱背景图是否加载完成(用于背景渐现;一旦加载过就不再重置,重开面板直接显示) |
| | | const [bgLoaded, setBgLoaded] = useState(false); |
| | | // 正在下发的按钮标识 `${position}:${kind}`(该按钮显示 loading,其余按钮置灰防重复),空串表示无 |
| | | const [applyingKey, setApplyingKey] = useState(''); |
| | | const querySeqRef = useRef(0); |
| | |
| | | } |
| | | const list: SeatHvItem[] = Array.isArray(res?.seats) ? res.seats : []; |
| | | setSeats(list); |
| | | setQueried(true); |
| | | }).catch(() => { |
| | | if (querySeqRef.current !== snapshotSeq) { |
| | | return; |
| | | } |
| | | setSeats([]); |
| | | setQueried(true); |
| | | }); |
| | | }, [active, tripStatus, orderId, pageDidShowVersion, hasPreviousOrder]); |
| | | |
| | |
| | | } |
| | | }; |
| | | |
| | | // 查询未出结果:整块透明占位(只占据区域高度、不画任何内容),避免先闪一下「不可用」 |
| | | if (!queried) { |
| | | return <View className='seat-hv-area'></View>; |
| | | } |
| | | |
| | | if (!hasSeats) { |
| | | return <View className='seat-hv-empty'>{NO_SEAT_TIP}</View>; |
| | | } |
| | | |
| | | return ( |
| | | <View className='seat-hv-area'> |
| | | <Image className='seat-hv-bg' src={SEAT_BG_URL} mode='widthFix' /> |
| | | <Image |
| | | className={`seat-hv-bg${bgLoaded ? ' is-loaded' : ''}`} |
| | | src={SEAT_BG_URL} |
| | | mode='widthFix' |
| | | onLoad={() => setBgLoaded(true)} |
| | | onError={() => setBgLoaded(true)} |
| | | /> |
| | | <View className='seat-hv-list'> |
| | | {seats.map((seat) => { |
| | | const showVentilation = seat.ventilationLevels > 0; |