fix: 修复站点选择页面显示与交互问题

hejianhao

2026-02-28 a2fad406cb356929d8021faa3f133a18ae0b1b73

fix: 修复站点选择页面显示与交互问题

- 移除 begin-route 页面多余的多段线样式属性
- 限制 site-search 页面非运营站点显示数量
- 为 select-map-site 页面工具提示增加内边距
- 将乘客须知内容改用 RichText 组件渲染以支持富文本
- 优化 select-map-site 页面逻辑，增加服务范围判断与提示
- 将站点列表改用 ScrollView 以支持滚动

 src/robotaxi/pages/begin-route/components/passenger-notice.tsx

@@ -1,5 +1,5 @@
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { View, Text, Image, RichText } from '@tarojs/components';
import { useEffect, useState } from 'react';
import './css-folder/passenger-notice.less'
import { getPrivacyContent } from '../../../api/home';
@@ -54,7 +54,9 @@
            <View className='passenger-mask'></View>
            <View className='passenger-content' animation={animationData}>
                <View className='passenger-content-title'>乘车需知</View>
                <View className='passenger-content-desc'>{noticeContent}</View>
                <View className='passenger-content-desc'>
                    <RichText nodes={noticeContent} />
                </View>
                <View onClick={() => setChecked(!checked)} className='passenger-content-checkbox'>
                    {
                        checked ?
@@ -73,4 +75,4 @@
            </View>
        </View>
    )
}
}

 src/robotaxi/pages/begin-route/index.tsx

@@ -603,8 +603,6 @@
          width: 6,
          dottedLine: true,
          arrowLine: true,
          arrowIconPath: lineRight,
          borderColor: '#FFFFFF',
        });
      }
      setPolyline(lines);

 src/robotaxi/pages/select-map-site/index.less

@@ -64,6 +64,7 @@
            min-width: 155px;
            text-align: center;
            width: fit-content;
            padding: 0 15px 0 3px;

            .toolTip-bg-text {
                font-size: 22px;
@@ -253,4 +254,4 @@
            color: #FFFFFF;
        }
    }
}
}

 src/robotaxi/pages/select-map-site/index.tsx

@@ -1,6 +1,6 @@
import Taro from "@tarojs/taro"
import { useEffect, useState } from 'react';
import { View, Map, Text, Image } from '@tarojs/components';
import { View, Map, Text, Image, ScrollView } from '@tarojs/components';
import './index.less';

import CustomerServicePopup from '../../components/customer-service';
@@ -43,8 +43,18 @@
  const [polyline, setPolyline] = useState<any[]>([]);
  const [userLongitude, setUserLongitude] = useState<number | null>(null);
  const [userLatitude, setUserLatitude] = useState<number | null>(null);
  const [outOfServiceRange, setOutOfServiceRange] = useState(false);

  const router = Taro.useRouter();

  const getOutOfServiceRange = (inside: boolean, site: any) => {
    const cachedStartSite = Taro.getStorageSync('startSite');
    const cachedEndSite = Taro.getStorageSync('endSite');
    const isCrossArea = (pageType === 'start'
      ? (cachedEndSite?.electronicAreaId && site?.electronicAreaId && cachedEndSite.electronicAreaId !== site.electronicAreaId)
      : (cachedStartSite?.electronicAreaId && site?.electronicAreaId && cachedStartSite.electronicAreaId !== site.electronicAreaId));
    return !inside || isCrossArea;
  };

  // 页面初始化
  useEffect(() => {
@@ -68,7 +78,9 @@
      setLatitude(cachedSite.latitude);
      setLongitude(cachedSite.longitude);
      setSelectedSite(cachedSite);
      updateMapData(cachedSite.latitude, cachedSite.longitude);
      updateMapData(cachedSite.latitude, cachedSite.longitude).then(({ isInside }) => {
        setOutOfServiceRange(getOutOfServiceRange(isInside, cachedSite));
      });
    } else {
      getLocationInfo();
    }
@@ -115,13 +127,19 @@
    return { isInside, newMarkers, sites };
  }

  useEffect(() => {
    setOutOfServiceRange(getOutOfServiceRange(isOperatingArea, selectedSite));
  }, [isOperatingArea, pageType, selectedSite?.electronicAreaId]);

  // 获取用户位置信息
  const getLocationInfo = () => {
    Taro.getLocation({ type: 'gcj02' })
      .then(res => {
        setLatitude(res.latitude);
        setLongitude(res.longitude);
        updateMapData(res.latitude, res.longitude);
        updateMapData(res.latitude, res.longitude).then(({ isInside }) => {
          setOutOfServiceRange(getOutOfServiceRange(isInside, selectedSite));
        });
      })
  }

@@ -157,7 +175,7 @@
          success: async (res) => {
            const { latitude: lat, longitude: lng } = res;

            const { newMarkers } = await updateMapData(lat, lng);
            const { newMarkers, isInside } = await updateMapData(lat, lng);

            const { targetMarker, minDistance } = findNearestMarker(lat, lng, newMarkers);

@@ -169,12 +187,16 @@
                longitude: targetMarker.longitude,
              });
              setSelectedSite(targetMarker);
              setOutOfServiceRange(getOutOfServiceRange(isInside, targetMarker));
              setLatitude(targetMarker.latitude);
              setLongitude(targetMarker.longitude);
              setShowToolTip(true);
            } else {
              setSelectedSite({});
              setOutOfServiceRange(getOutOfServiceRange(isInside, {}));
              setLatitude(lat);
              setLongitude(lng);
              setShowToolTip(true);
            }
          }
        });
@@ -363,16 +385,15 @@
        </View>
        {/* 指针 */}
        <View className="pointer-box">
          {(showToolTip && selectedSite.name) && (
          {((showToolTip && selectedSite.name) || outOfServiceRange) && (
            <View className="toolTip">
              {
                selectedSite.time &&
              {(outOfServiceRange || selectedSite.time) && (
                <View className="toolTip-bg">
                  <Text className="toolTip-bg-text">限停{selectedSite.time}分钟</Text>
                  <Text className="toolTip-bg-text">{outOfServiceRange ? `超出${pageType == 'end' ? '下车' : '上车'}点服务范围` : `限停${selectedSite.time}分钟`}</Text>
                </View>
              }
              )}
              <View className="toolTip-txt">
                <View className="toolTip-txt-content">{selectedSite.name}</View>
                <View className="toolTip-txt-content">{outOfServiceRange ? `请拖动至${pageType == 'end' ? '下车' : '上车'}点` : selectedSite.name}</View>
              </View>
            </View>
          )}
@@ -398,13 +419,13 @@
                    nearbySites.length > 0 &&
                    <View className="limit-tip">点击其他选项或紫色原点，可更改下/上车点</View>
                  }
                  <View className="site-list">
                  <ScrollView className="site-list" scrollY>
                    {
                      nearbySites.map((item, index) => (
                        <View onClick={() => changeChildrenSite(item)} key={index} className={`site-name ${selectedSite.name == item.name && 'site-active'}`}>{item.name}</View>
                      ))
                    }
                  </View>
                  </ScrollView>
                  <View onClick={confirmSite} className="site-confirm">{pageType === 'start' ? '确认上车站点' : '确认目的地站点'}</View>
                </View>
              }

 src/robotaxi/pages/site-search/index.tsx

@@ -100,7 +100,7 @@
                distance: formatDistance(item.distance)
              }
            });
            setNonOperationalSite(list);
            setNonOperationalSite(list.slice(0, MAX_SHOW_COUNT));
          }
        },
        fail: (info) => {