| src/pages/robotaxi/home/index.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/robotaxi/home/index.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/robotaxi/pages/begin-route/index.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/robotaxi/pages/select-city/index.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/robotaxi/pages/select-city/index.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/robotaxi/pages/select-map-site/index.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/robotaxi/pages/site-search/index.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/robotaxi/pages/site-search/index.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/pages/robotaxi/home/index.less
@@ -137,87 +137,6 @@ overflow: hidden; position: relative; .origin-box { position: absolute; bottom: 72px; right: 32px; z-index: 102; .origin-icon { width: 88px; height: 88px; } } .position-box { position: absolute; bottom: 68px; left: 32px; z-index: 101; width: calc(100% - 64px); .is-operating-area { margin: 0 auto; margin-top: 20px; width: fit-content; line-height: 64px; font-size: 24px; font-weight: normal; letter-spacing: normal; color: #FFFFFF; border-radius: 200px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(40px); padding: 0 44px; } .is-maintain { margin-top: 20px; border-radius: 16px; background: rgba(255, 249, 226, 0.9); box-sizing: border-box; border: 1px solid #FFFFFF; backdrop-filter: blur(40px); box-shadow: 0px 4px 16px 0px rgba(84, 92, 143, 0.1); font-size: 24px; font-weight: normal; line-height: 64px; text-align: center; letter-spacing: normal; color: #F58900; padding: 0 24px; width: fit-content; } .visitor-stste { width: fit-content; margin-top: 20px; display: flex; align-items: center; border-radius: 16px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(40px); padding: 9px 24px; .visitor-stste-tip { font-size: 24px; font-weight: normal; line-height: 46px; letter-spacing: normal; color: #FFFFFF; } .visitor-stste-go { margin-left: 24px; font-size: 24px; font-weight: normal; line-height: 46px; letter-spacing: normal; color: #AFEA60; } } } .login-bar { position: fixed; left: 0; @@ -284,13 +203,98 @@ .content-box { width: 100%; // z-index: 100; position: absolute; left: 0; right: 0; bottom: 0; z-index: 100; background-color: transparent; overflow: hidden; margin-top: -52px; margin-top: 0; border-radius: 38px 38px 0 0; .content-box-top { padding-bottom: 24px; } .origin-box { position: absolute; top: -24px; right: 32px; z-index: 1; .origin-icon { width: 88px; height: 88px; } } .position-box { width: 100%; .is-operating-area { margin: 0 auto; // margin-top: 20px; width: fit-content; line-height: 64px; font-size: 24px; font-weight: normal; letter-spacing: normal; color: #FFFFFF; border-radius: 200px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(40px); padding: 0 44px; } .is-maintain { margin-top: 20px; border-radius: 16px; background: rgba(255, 249, 226, 0.9); box-sizing: border-box; border: 1px solid #FFFFFF; backdrop-filter: blur(40px); box-shadow: 0px 4px 16px 0px rgba(84, 92, 143, 0.1); font-size: 24px; font-weight: normal; line-height: 64px; text-align: center; letter-spacing: normal; color: #F58900; padding: 0 24px; width: fit-content; } .visitor-stste { width: fit-content; // margin-top: 20px; display: flex; align-items: center; border-radius: 16px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(40px); padding: 9px 24px; .visitor-stste-tip { font-size: 24px; font-weight: normal; line-height: 46px; letter-spacing: normal; color: #FFFFFF; } .visitor-stste-go { margin-left: 24px; font-size: 24px; font-weight: normal; line-height: 46px; letter-spacing: normal; color: #AFEA60; } } } .select-site { overflow: hidden; position: relative; padding: 32px; padding-top: 40px; src/pages/robotaxi/home/index.tsx
@@ -55,12 +55,14 @@ const [orderData, setOrderData] = useState<any>({}); // 订单数据 const [isLogin, setIsLogin] = useState(false); // 是否登录 const [boxHeight, setBoxHeight] = useState<number>(266); // 活动区域高度 const [boxHeight, setBoxHeight] = useState<number>(320); // 活动区域高度 const startY = useRef(0); // 拖动开始时的Y坐标 const startHeight = useRef(0); // 拖动开始时的高度 const fullHeight = useRef(0); // 活动区域最大高度 const minHeight = useRef(0); // 活动区域最小高度 const isDragging = useRef(false); // 是否正在拖动 const dragFrame = useRef<any>(null); const pendingHeight = useRef<number | null>(null); const shouldIgnoreRegionChange = useRef(false); // 是否忽略地图区域变化 const resetTimer = useRef<any>(null); // 自动归位定时器 const isReturningToOrigin = useRef(false); // 是否正在自动归位 @@ -415,18 +417,18 @@ setTimeout(() => { const query = Taro.createSelectorQuery(); // 获取内部内容容器的完整高度(不受父容器 overflow:hidden 影响) query.select('.select-site').boundingClientRect(rect => { query.select('.content-body').boundingClientRect(rect => { if (rect) { const contentHeight = rect.height; const baseHeight = 266; const baseHeight = 320; fullHeight.current = Math.max(contentHeight, baseHeight); minHeight.current = baseHeight; setBoxHeight(baseHeight); } else { // 兜底逻辑 minHeight.current = 266; fullHeight.current = 266; setBoxHeight(266); minHeight.current = 320; fullHeight.current = 320; setBoxHeight(320); } }).exec(); }, 500); @@ -714,6 +716,11 @@ isDragging.current = true; startY.current = e.touches[0].clientY; startHeight.current = typeof boxHeight === 'number' ? boxHeight : fullHeight.current; if (dragFrame.current) { clearTimeout(dragFrame.current); dragFrame.current = null; } pendingHeight.current = null; } const handleTouchMove = (e: any) => { @@ -724,11 +731,27 @@ if (newHeight < minHeight.current) newHeight = minHeight.current; if (newHeight > fullHeight.current) newHeight = fullHeight.current; setBoxHeight(newHeight); pendingHeight.current = newHeight; if (dragFrame.current) return; dragFrame.current = setTimeout(() => { if (pendingHeight.current !== null) { setBoxHeight(pendingHeight.current); } pendingHeight.current = null; dragFrame.current = null; }, 16); } const handleTouchEnd = () => { isDragging.current = false; if (dragFrame.current) { clearTimeout(dragFrame.current); dragFrame.current = null; } if (pendingHeight.current !== null) { setBoxHeight(pendingHeight.current); pendingHeight.current = null; } const movableRange = fullHeight.current - minHeight.current; if (typeof boxHeight === 'number' && boxHeight > minHeight.current + movableRange / 2) { setBoxHeight(fullHeight.current); @@ -803,6 +826,10 @@ } const toCoupon = () => { if (isLogin) { jumpTo({ url: '/pages/user/login?hideBack=1' }); return } if (Taro.getStorageSync('has_show_privicy_Robotaxi') !== 'true') { setShowPrivacy(true); return; @@ -813,6 +840,10 @@ } const toOrder = () => { if (isLogin) { jumpTo({ url: '/pages/user/login?hideBack=1' }); return } if (Taro.getStorageSync('has_show_privicy_Robotaxi') !== 'true') { setShowPrivacy(true); return; @@ -827,8 +858,30 @@ } // 查看运营区域 const handleViewOperatingArea = () => { if (!polygons || polygons.length === 0) { const handleViewOperatingArea = async () => { if (!selectedCity?.code) { Taro.showToast({ title: '此城市暂未开通运营区域', icon: 'none' }); return; } let nextPolygons = polygons; try { const res: any = await getGeofence({ cityCode: selectedCity.code }); if (res && Array.isArray(res)) { nextPolygons = formatGeofencePolygons(res); setPolygons(nextPolygons); } else { nextPolygons = []; setPolygons([]); } } catch (err) { nextPolygons = []; setPolygons([]); } if (!nextPolygons || nextPolygons.length === 0) { Taro.showToast({ title: '此城市暂未开通运营区域', icon: 'none' @@ -836,8 +889,7 @@ return; } const points = extractPointsFromPolygons(polygons); const points = extractPointsFromPolygons(nextPolygons); if (points.length > 0) { const mapCtx = Taro.createMapContext('map'); mapCtx.includePoints({ @@ -859,6 +911,14 @@ } } const getShowDomFlag = () => { const showPrivacyBox = Taro.getStorageSync('has_show_privicy_Robotaxi') != 'true' && !isLogin; const showLocationBox = isLocationAuthDenied; const showMaintainBox = isMaintain; const showOperatingBox = !isOperatingArea; return !(showPrivacyBox || showLocationBox || showMaintainBox || showOperatingBox); } return ( <View className="home-container"> <Map @@ -870,7 +930,7 @@ polygons={polygons} showLocation={!!longitude} onRegionChange={handleRegionChange} style={{ width: '100%', flex: 1 }} style={{ width: '100%', height: '80vh', flex: 'none' }} > {/* 选择城市 */} <View onClick={toSeleteCityPage} className="select-city"> @@ -909,91 +969,93 @@ <Image className={`pointer-icon ${bounce ? 'bounce' : ''}`} src={pointer} /> </View> } {/* 复位按钮 */} <View className="origin-box"> <Image onClick={toOrigin} className="origin-icon" src={originIcon} /> </View> <View className="position-box"> {/* 游客模式展示同意协议 */} { Taro.getStorageSync('has_show_privicy_Robotaxi') != 'true' && <View className="visitor-stste"> <View className="visitor-stste-tip">同意隐私协议体验更多约车体验</View> <View onClick={() => setShowPrivacy(true)} className="visitor-stste-go">去同意</View> </View> } {/* 未开启位置权限 */} { isLocationAuthDenied && <View className="visitor-stste"> <View className="visitor-stste-tip">未开启位置权限,开启后即可发布行程</View> <View onClick={handleOpenSetting} className="visitor-stste-go">去开启</View> </View> } {/* 系统维护 */} { isMaintain && <View className="is-maintain">系统维护中,预计今日11:00恢复服务</View> } {/* 查看运营区域 */} { !isOperatingArea && <View onClick={handleViewOperatingArea} className="is-operating-area">查看运营区域</View> } </View> </Map> {/* 是否登录 */} { isLogin && <View className={`login-bar ${isLogin ? '' : 'hide'}`}> <View className='text'>立即登录,即可体验Robotaxi行程服务</View> <View className='more' onClick={() => { jumpTo({ url: '/pages/user/login?hideBack=1' }); }} > <Button className='more-btn'>立即登录</Button> <Image src={`${CDN}/common/arrow-white-new.png`} className='more-icon'></Image> </View> </View> } {/* 选择站点 */} <View className="content-box" style={{ height: bannerList.length > 1 ? `${boxHeight}px` : `auto`, transition: isDragging.current ? 'none' : 'height 0.3s ease-out' }} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} catchMove onTouchStart={(e) => { e.stopPropagation(); handleTouchStart(e); }} onTouchMove={(e) => { e.stopPropagation(); handleTouchMove(e); }} onTouchEnd={(e) => { e.stopPropagation(); handleTouchEnd(); }} > <View className="select-site"> <Image className="site-top-bg" src='https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/cab0e5b2-0da0-4d2e-80e6-0fc2da8d2532.png' /> <View className="site-boarding-point"> {/* 起点 */} <View onClick={() => toSeleteSitePage('start', true)} className="now-site"> <View className="now-site-dot"></View> <View className="now-site-address"> <View className="now-site-address-content"> 从 <Text className="now-site-address-text"> {(!isOperatingArea || isAdsorbed) ? (currentSite.name || '请选择上车点') : '推荐上车点'} </Text> 出发 <View className="content-body"> <View className="content-box-top"> <View className="position-box"> {/* 占位 */} { getShowDomFlag() && <View style={{ height: '33px' }}></View> } {/* 游客模式展示同意协议 */} { (Taro.getStorageSync('has_show_privicy_Robotaxi') != 'true' && !isLogin) && <View className="visitor-stste"> <View className="visitor-stste-tip">同意隐私协议体验更多约车体验</View> <View onClick={() => setShowPrivacy(true)} className="visitor-stste-go">去同意</View> </View> <Image className="now-site-icon" src={rightIcon} /> </View> } {/* 未开启位置权限 */} { isLocationAuthDenied && <View className="visitor-stste"> <View className="visitor-stste-tip">未开启位置权限,开启后即可发布行程</View> <View onClick={handleOpenSetting} className="visitor-stste-go">去开启</View> </View> } {/* 系统维护 */} { isMaintain && <View className="is-maintain">系统维护中,预计今日11:00恢复服务</View> } {/* 查看运营区域 */} { !isOperatingArea && <View onClick={handleViewOperatingArea} className="is-operating-area">查看运营区域</View> } </View> {/* 终点 */} <View onClick={() => toSeleteSitePage('end')} className="to-site"> <View className="to-site-dot"></View> <View className="to-site-address"> <View className="to-site-text">你想去哪?</View> {/* <View onClick={(e) => { e.stopPropagation(); toBeginRoute() }} className="to-site-fast" >去:中国南方电网·3号门</View> */} </View> <View className="origin-box"> <Image onClick={toOrigin} className="origin-icon" src={originIcon} /> </View> </View> {/* 订单状态卡片 */} <View className="select-site"> <Image className="site-top-bg" src='https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/cab0e5b2-0da0-4d2e-80e6-0fc2da8d2532.png' /> <View className="site-boarding-point"> {/* 起点 */} <View onClick={() => toSeleteSitePage('start', true)} className="now-site"> <View className="now-site-dot"></View> <View className="now-site-address"> <View className="now-site-address-content"> 从 <Text className="now-site-address-text"> {(!isOperatingArea || isAdsorbed) ? (currentSite.name || '请选择上车点') : '推荐上车点'} </Text> 出发 </View> <Image className="now-site-icon" src={rightIcon} /> </View> </View> {/* 终点 */} <View onClick={() => toSeleteSitePage('end')} className="to-site"> <View className="to-site-dot"></View> <View className="to-site-address"> <View className="to-site-text">你想去哪?</View> {/* <View onClick={(e) => { e.stopPropagation(); toBeginRoute() }} className="to-site-fast" >去:中国南方电网·3号门</View> */} </View> </View> </View> {/* 订单状态卡片 */} { [2, 3, 4, 5, 6, 7, 8].includes(tripStatus) && <View className="order-status"> @@ -1038,7 +1100,23 @@ {/* 产品名 */} <View className="product-name">XPENG Robotaxi</View> </View> </View> </View> {/* 是否登录 */} { isLogin && <View className={`login-bar ${isLogin ? '' : 'hide'}`}> <View className='text'>立即登录,即可体验Robotaxi行程服务</View> <View className='more' onClick={() => { jumpTo({ url: '/pages/user/login?hideBack=1' }); }} > <Button className='more-btn'>立即登录</Button> <Image src={`${CDN}/common/arrow-white-new.png`} className='more-icon'></Image> </View> </View> } {/* 隐私政策弹窗 */} <PrivacyPopup show={showPrivacy} src/robotaxi/pages/begin-route/index.tsx
@@ -20,7 +20,6 @@ import originIcon from '../../../robotaxi/assets/origin-icon.png' import wsManager from '../../../utils/websocket'; import { getWalkingRoute, formatDurationToClock, formatDateTime, getStoredRoutePoints, clearOrderTripStorage } from '../../../utils/Robotaxi-public-method'; import lineRight from '../../../robotaxi/assets/line-right.png'; import { saveOrder, queryRouteAndFare, @@ -30,6 +29,8 @@ queryOrderRoute, } from '../../../robotaxi/api/begin-route'; import { getOrderDetail } from '../../../robotaxi/api/order'; import { checkOtp } from '../../../utils/tools'; import { jumpTo } from '../../../utils/jump'; export default function SelectMapSite() { const WAITING_TIMER_START_KEY = 'waitingTimerStartAt'; @@ -877,6 +878,11 @@ // 立即呼叫 const callImmediately = async () => { const otp = await checkOtp(false); if (!otp) { jumpTo({ url: '/pages/user/login?hideBack=1' }); return } if (!endSite.name) { Taro.showToast({ title: '请选择站点', src/robotaxi/pages/select-city/index.less
@@ -43,6 +43,71 @@ min-height: 0; } .skeleton { padding: 0 32px; gap: 48px; } .skeleton-service, .skeleton-non-operational { display: flex; flex-direction: column; gap: 24px; } .skeleton-title { width: 160px; height: 32px; border-radius: 8px; background: #F2F3F7; } .skeleton-chip-list { display: flex; flex-wrap: wrap; gap: 20px; } .skeleton-chip { width: 140px; height: 72px; border-radius: 12px; background: #F2F3F7; } .skeleton-line-group { display: flex; flex-direction: column; gap: 20px; } .skeleton-line { width: 100%; height: 28px; border-radius: 8px; background: #F2F3F7; } .skeleton-shortcut { position: fixed; top: 50%; right: 12px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 10px 0; background-color: rgba(255, 255, 255, 0.5); border-radius: 20px; } .skeleton-shortcut-item { width: 24px; height: 24px; border-radius: 6px; background: #F2F3F7; } .service-city-box { margin: 60px 32px 64px 32px; flex-shrink: 0; @@ -199,4 +264,4 @@ height: 400px; } } } } src/robotaxi/pages/select-city/index.tsx
@@ -13,6 +13,7 @@ const [filteredPendingList, setFilteredPendingList] = useState<any[]>([]); // 过滤后的开放城市列表 const [openCityList, setOpenCityList] = useState<any[]>([]); // 开放城市列表 const [searchResultList, setSearchResultList] = useState<any[]>([]); // 搜索结果列表 const [isLoading, setIsLoading] = useState(true); useEffect(() => { const city = Taro.getStorageSync('selectedCity'); @@ -21,6 +22,7 @@ } // 并行请求:获取开通城市列表和所有城市列表 setIsLoading(true); Promise.all([ getOpenCity(), getCityList({ isOpen: 0 }) // 0代表待开通 @@ -52,6 +54,8 @@ }).catch(err => { console.error('获取城市数据失败', err); }).finally(() => { setIsLoading(false); }); }, []) @@ -114,6 +118,34 @@ placeholderClass='placeholder-class' /> </View> { isLoading && <View className='city-content skeleton' aria-hidden='true'> <View className='skeleton-service'> <View className='skeleton-title'></View> <View className='skeleton-chip-list'> {Array.from({ length: 6 }).map((_, index) => ( <View className='skeleton-chip' key={index}></View> ))} </View> </View> <View className='skeleton-non-operational'> <View className='skeleton-title'></View> <View className='skeleton-line-group'> {Array.from({ length: 8 }).map((_, index) => ( <View className='skeleton-line' key={index}></View> ))} </View> </View> <View className='skeleton-shortcut'> {Array.from({ length: 6 }).map((_, index) => ( <View className='skeleton-shortcut-item' key={index}></View> ))} </View> </View> } {!isLoading && ( <> {/* 搜索前 */} { !searchValue && @@ -207,6 +239,8 @@ } </View> } </> )} </View> ) } src/robotaxi/pages/select-map-site/index.tsx
@@ -22,6 +22,8 @@ } from '../../../utils/Robotaxi-public-method'; import { getGeofence } from '../../api/home'; import { getOrderDistance } from '../../api/select-map-site'; import { checkOtp } from '../../../utils/tools'; import { jumpTo } from '../../../utils/jump'; export default function SelectMapSite() { @@ -73,7 +75,8 @@ cachedSite = Taro.getStorageSync('endSite'); } // 有缓存,优先使用缓存回显;否则使用当前定位 const hasCachedSite = !!(cachedSite && cachedSite.latitude && cachedSite.longitude); // 有缓存,优先使用缓存回显 if (cachedSite && cachedSite.latitude && cachedSite.longitude) { setLatitude(cachedSite.latitude); setLongitude(cachedSite.longitude); @@ -81,8 +84,6 @@ updateMapData(cachedSite.latitude, cachedSite.longitude).then(({ isInside }) => { setOutOfServiceRange(getOutOfServiceRange(isInside, cachedSite)); }); } else { getLocationInfo(); } fetchUserLocation(); @@ -106,13 +107,38 @@ if (res && Array.isArray(res)) { const newPolygons = formatGeofencePolygons(res); setPolygons(newPolygons); if (!hasCachedSite && res.length > 0 && res[0]?.points?.length > 0) { const firstPoint = res[0].points[0]; const lat = Number(firstPoint.lat); const lng = Number(firstPoint.lng); setLatitude(lat); setLongitude(lng); updateMapData(lat, lng).then(({ isInside }) => { setOutOfServiceRange(getOutOfServiceRange(isInside, {})); }); const mapCtx = Taro.createMapContext('map'); mapCtx.moveToLocation({ latitude: lat, longitude: lng, }); } else if (!hasCachedSite) { getLocationInfo(); } } else { setPolygons([]); if (!hasCachedSite) { getLocationInfo(); } } }).catch(err => { console.error('获取电子围栏失败', err); setPolygons([]); if (!hasCachedSite) { getLocationInfo(); } }); } else if (!hasCachedSite) { getLocationInfo(); } }, []); @@ -336,22 +362,23 @@ }); }, [pageType, userLatitude, userLongitude, latitude, longitude, selectedSite?.latitude, selectedSite?.longitude]); // useEffect(() => { // if (!polyline.length || !polyline[0]?.points?.length) return; // const mapCtx = Taro.createMapContext('map'); // mapCtx.includePoints({ // points: polyline[0].points, // padding: [80, 80, 200, 80] // }); // }, [polyline]); const toCoupon = () => { const toCoupon = async () => { const otp = await checkOtp(false); if (!otp) { jumpTo({ url: '/pages/user/login?hideBack=1' }); return } Taro.navigateTo({ url: '/robotaxi/pages/coupon/index', }) } const toOrder = () => { const toOrder = async () => { const otp = await checkOtp(false); if (!otp) { jumpTo({ url: '/pages/user/login?hideBack=1' }); return } Taro.navigateTo({ url: '/robotaxi/pages/order/index', }) src/robotaxi/pages/site-search/index.less
@@ -26,6 +26,24 @@ margin-right: 16px; } .search-input-box { flex: 1; display: flex; align-items: center; .cancel-icon-box { display: flex; align-items: center; justify-content: center; padding: 10px; .cancel-icon { width: 32px; height: 32px; } } } .end-icon { background: #8BB654; } src/robotaxi/pages/site-search/index.tsx
@@ -9,6 +9,7 @@ import { formatDistance, debounce } from '../../../utils/Robotaxi-public-method'; import { AMAP_KEY } from '../../../constants/api'; import amapFile from '../../../libs/amap-wx.130.js'; import { checkOtp } from '../../../utils/tools'; @@ -41,7 +42,7 @@ if (Array.isArray(availablePoints)) { const list = availablePoints.map(item => ({ ...item, distance: formatDistance(item.distance) distance: item.distance })); setNearbySiteList(list); } else { @@ -56,36 +57,41 @@ useEffect(() => { const { pageType: type, latitude: lat, longitude: lon, electronicAreaId } = router.params; checkOtp(false).then(otp => { if (otp) { if (lat && lon) { fetchNearbySites(Number(lat), Number(lon), electronicAreaId); const payload = { lat: Number(lat), lon: Number(lon) }; const handleSuccess = (res) => { if (Array.isArray(res)) { const list = res.map(item => ({ ...item, distance: item.distance })); setHistorySite(list); } }; if (type === 'start') { getStartPoints(payload).then(handleSuccess); } else if (type === 'end') { getEndPoints(payload).then(handleSuccess); } } } }); if (type) { setPageType(type); } if (lat && lon) { fetchNearbySites(Number(lat), Number(lon), electronicAreaId); const payload = { lat: Number(lat), lon: Number(lon) }; const handleSuccess = (res) => { if (Array.isArray(res)) { const list = res.map(item => ({ ...item, distance: formatDistance(item.distance) })); setHistorySite(list); } }; if (type === 'start') { getStartPoints(payload).then(handleSuccess); } else if (type === 'end') { getEndPoints(payload).then(handleSuccess); } } }, []) const searchSite = async (val?: string) => { setNonOperationalSite([]); const queryVal = val !== undefined ? val : searchValue; if (!queryVal) return; @@ -107,7 +113,7 @@ if (Array.isArray(availablePoints)) { const list = availablePoints.map(item => ({ ...item, distance: formatDistance(item.distance) distance: item.distance })); setSiteList(list); } else { @@ -209,6 +215,11 @@ } } const clearSearchValue = () => { setSearchValue(''); searchSite(''); } const recommendList = siteList.length > 0 ? siteList : nearbySiteList; @@ -217,12 +228,20 @@ {/* 搜索区域 */} <View className='search-card'> <View className={`search-icon ${pageType == 'end' ? 'end-icon' : ''}`}></View> <Input className='search-input' placeholder={pageType == 'start' ? '请输入上车点' : '请输入目的地'} value={searchValue} onInput={(e) => changeSearchValue(e)} onBlur={() => searchSite()} onConfirm={() => searchSite()} autoFocus ></Input> <View className='search-input-box'> <Input className='search-input' placeholder={pageType == 'start' ? '请输入上车点' : '请输入目的地'} value={searchValue} onInput={(e) => changeSearchValue(e)} onBlur={() => searchSite()} onConfirm={() => searchSite()} autoFocus /> { searchValue && <View onClick={clearSearchValue} className='cancel-icon-box'> <Image className='cancel-icon' src={require('../../assets/close-icon.png')} /> </View> } </View> <Image onClick={toSelectSite} className='clear-icon' src={map}></Image> </View> {/* 历史记录 */} @@ -239,7 +258,7 @@ <View className='history-name'>{item.name || '_'}</View> <View className='history-address-box'> <View className='history-address'>{item.address || '-'}</View> <View className='history-distance'>{item.distance}</View> <View className='history-distance'>{item.distance}km</View> </View> </View> </View>