import { View, Map, Text, Image, ScrollView } from '@tarojs/components';
|
import CustomerServicePopup from '../../../components/customer-service';
|
import TipPopup from '../components/tip-popup';
|
import { formatTripDistance, formatTripDurationFromSeconds } from '../../../../utils/Robotaxi-public-method';
|
|
type Deps = {
|
longitude: number | null;
|
latitude: number | null;
|
mapScale: number;
|
markers: any[];
|
mapPolylines: any[];
|
polygons: any[];
|
handleRegionChange: (e: any) => void;
|
handleMarkerTap: (e: any) => void;
|
toBack: () => void;
|
backIcon: string;
|
openService: () => void;
|
toCoupon: () => void;
|
personalCenter: string;
|
coupon: string;
|
contactService: string;
|
nearbyLoading: boolean;
|
isAndroid: boolean;
|
waitingRadarSrc: string;
|
showToolTip: boolean;
|
selectedSite: any;
|
selectionMode: 'point' | 'station';
|
selectedStation: any;
|
stationSiteList: any[];
|
outOfServiceRange: boolean;
|
tooltipBgSrc: string;
|
pageType: string;
|
bounce: boolean;
|
pointer: string;
|
toOrigin: () => void;
|
originIcon: string;
|
walkingDuration: number | null;
|
walkingDistance: number | null;
|
nearbySites: any[];
|
handleCollect: (e: any) => void;
|
changeStationSite: (site: any) => void;
|
activeStar: string;
|
noStar: string;
|
confirmSite: () => void;
|
showCustomerService: boolean;
|
handleCloseCustomerService: () => void;
|
showTipPopup: boolean;
|
handleCloseTipPopup: () => void;
|
tipType: string;
|
toPersonalCenter: () => void;
|
};
|
|
/**
|
* 选点页视图组件：仅负责渲染地图与页面 UI，不包含业务状态编排。
|
*/
|
export default function SelectMapSiteView(deps: Deps) {
|
return (
|
<View className="home-container">
|
<Map
|
id="map"
|
longitude={deps.longitude}
|
latitude={deps.latitude}
|
scale={deps.mapScale}
|
markers={deps.markers.map((m) => ({ ...m, title: '', name: '' }))}
|
polyline={deps.mapPolylines}
|
polygons={deps.polygons}
|
showLocation={!!deps.longitude}
|
onRegionChange={deps.handleRegionChange}
|
onMarkerTap={deps.handleMarkerTap}
|
style={{ width: '100%', height: '100%' }}
|
>
|
{/* 返回 */}
|
<View onClick={deps.toBack} className="select-city">
|
<Image className="select-city-icon" src={deps.backIcon} />
|
</View>
|
{/* 地图浮层入口 */}
|
<View className="map-entry">
|
<Image onClick={deps.toPersonalCenter} className="map-entry-icon" src={deps.personalCenter} />
|
<View className="split-line"></View>
|
<Image onClick={deps.openService} className="map-entry-icon" src={deps.contactService} />
|
<View className="split-line"></View>
|
<Image onClick={deps.toCoupon} className="map-entry-icon" src={deps.coupon} />
|
</View>
|
{deps.nearbyLoading && deps.isAndroid && (
|
<Image className="waiting-radar-img" src={deps.waitingRadarSrc} />
|
)}
|
{/* 指针 */}
|
<View className="pointer-box">
|
{deps.nearbyLoading && !deps.isAndroid && (
|
<Image className="waiting-radar" src={deps.waitingRadarSrc} />
|
)}
|
{((deps.showToolTip && deps.selectedSite.name) || deps.outOfServiceRange) && (
|
<View className="toolTip">
|
{(deps.outOfServiceRange || deps.selectedSite.time) && (
|
<View className="toolTip-bg" style={{ backgroundImage: `url(${deps.tooltipBgSrc})` }}>
|
<Text className="toolTip-bg-text">
|
{deps.outOfServiceRange ? '不在运营区' : `限停${deps.selectedSite.time}分钟`}
|
</Text>
|
</View>
|
)}
|
<View className="toolTip-txt">
|
<View className="toolTip-txt-content">
|
{deps.outOfServiceRange ? `请拖动至${deps.pageType == 'end' ? '下车' : '上车'}点` : deps.selectedSite.name}
|
</View>
|
</View>
|
</View>
|
)}
|
<Image
|
className={`pointer-icon ${deps.bounce ? 'bounce' : ''}`}
|
src={deps.pointer}
|
/>
|
</View>
|
<View className="container">
|
<View className="container-inner">
|
{/* 复位按钮 */}
|
<View className="origin-box">
|
<Image onClick={deps.toOrigin} className="origin-icon" src={deps.originIcon} />
|
</View>
|
<View catchMove onClick={(e) => e.stopPropagation()}>
|
{/* 确认站点 */}
|
<View className="content-box">
|
<View className="content-box-item">
|
<View className='content-box-item-title'>
|
<View className="content-title">{deps.selectionMode === 'station' ? deps.selectedStation?.name : (deps.pageType === 'start' ? '确认上车站点' : '确认目的地')}</View>
|
{deps.pageType === 'start' && deps.walkingDuration !== null && deps.walkingDistance !== null && (
|
<View className="limit-tip">
|
从当前位置出发步行{formatTripDurationFromSeconds(deps.walkingDuration)}（{formatTripDistance(deps.walkingDistance)}）上车
|
</View>
|
)}
|
{(deps.nearbySites.length > 0 && deps.pageType === 'end') && (
|
<View className="limit-tip">点击其他选项或紫色原点，可更改{deps.pageType === 'start' ? '上车' : '下车'}点</View>
|
)}
|
</View>
|
{deps.selectionMode === 'station' && (
|
<Image
|
onClick={deps.handleCollect}
|
className='collect-icon'
|
src={deps.selectedStation?.isCollect ? deps.activeStar : deps.noStar}
|
/>
|
)}
|
</View>
|
<View className='site-list-wrap'>
|
<ScrollView
|
className="site-list"
|
scrollY
|
enhanced
|
showScrollbar={true}
|
>
|
<View className='site-list-inner'>
|
{deps.selectionMode === 'station' ? (
|
deps.stationSiteList.length > 0 ? deps.stationSiteList.map((item) => (
|
<View
|
key={item.id || item.pointId || `${item.latitude}_${item.longitude}`}
|
className={`site-item ${String(item.id || item.pointId || '') === String(deps.selectedSite?.id || deps.selectedSite?.pointId || '') ? 'site-active' : ''}`}
|
onClick={() => deps.changeStationSite(item)}
|
>
|
<View>{item.name}</View>
|
</View>
|
)) : <View className="no-service">当前场站暂无可选站点</View>
|
) : deps.selectedSite.name ? (
|
<View className='site-item site-active'>
|
<View>{deps.selectedSite.name}</View>
|
{deps.selectionMode === 'point' && (
|
<Image onClick={deps.handleCollect} className='collect-icon' src={deps.selectedSite.isCollect === 1 ? deps.activeStar : deps.noStar} />
|
)}
|
</View>
|
) : (
|
<View className="no-service">超出服务范围，请在运营区内选择</View>
|
)}
|
</View>
|
</ScrollView>
|
</View>
|
<View onClick={deps.confirmSite} className={`site-confirm ${deps.selectedSite.name ? '' : 'no-confirm'}`}>
|
{deps.pageType === 'start' ? '确认上车站点' : '确认目的地站点'}
|
</View>
|
</View>
|
</View>
|
</View>
|
</View>
|
</Map>
|
{/* 客服弹窗 */}
|
<CustomerServicePopup
|
show={deps.showCustomerService}
|
onClose={deps.handleCloseCustomerService}
|
/>
|
{/* 提示弹窗 */}
|
<TipPopup
|
show={deps.showTipPopup}
|
onClose={deps.handleCloseTipPopup}
|
tipType={deps.tipType}
|
/>
|
</View>
|
);
|
}
|
