feat(share-trip): 优化分享行程上车点到达页展示

zjk

2026-06-15 feca6d387d67699abfcebe3e8a41606453ab160b

feat(share-trip): 优化分享行程上车点到达页展示

 src/robotaxi/pages/share-trip/components/share-trip-view.tsx

@@ -42,6 +42,7 @@
}: Props) {
  const hasRouteDuration = typeof routeDuration === 'number' && Number.isFinite(routeDuration);
  const durationDisplay = hasRouteDuration ? formatDurationDisplay(routeDuration) : null; // 预计耗时展示文案
  const shouldShowEndPointRow = tripData?.tripStatus !== TripStatus.VehicleArrivedPickup; // 到达上车点阶段与 begin-route 对齐，隐藏终点信息

  if (isExpired) {
    return (
@@ -76,95 +77,97 @@
        style={{ width: '100%', height: '87vh' }}
      >
        {renderMapOverlays()}
        <View className='container'>
          <View
            className={`share-contact ${showReminder ? 'has-tip' : ''}`}
            onClick={handleContactService}
          >
            <Image className='share-contact-icon' src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/contact-service.png' />
          </View>
          <View className='container-inner'>
            <View catchMove onClick={(event) => event.stopPropagation()}>
              <View className='calling-car'>
                <Image
                  className='calling-car-bg'
                  src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/site-top-bg-20260507.png'
                />
                <View className='calling-car-head'>
                  {tripData?.tripStatus === TripStatus.VehicleApproaching && (
                    <View className='calling-car-head-title'>
                      {durationDisplay ? (
                        <>
                          车辆还有
                          <View className='calling-car-head-title-eta'>{durationDisplay.value}</View>
                          {durationDisplay.unit}到达上车点
                        </>
                      ) : (
                        '车辆正在前往上车点'
                      )}
                    </View>
                  )}
                  {tripData?.tripStatus === TripStatus.VehicleArrivedPickup && (
                    <View className='calling-car-head-title'>车辆已到达上车点</View>
                  )}
                  {tripData?.tripStatus === TripStatus.InService && (
                    <View className='calling-car-head-title'>
                      {/* 预计
                      <View className='calling-car-head-title-eta'>{durationDisplay.value}</View>
                      {durationDisplay.unit}抵达目的地 */}
                      乘客已上车，正在前往目的地
                    </View>
                  )}
                  {tripData?.tripStatus >= TripStatus.ArrivedDestination && (
                    <View className='calling-car-head-title'>已到达目的地</View>
                  )}
                </View>
                <View className='car-card'>
                  <View className='car-card-detail'>
                    <View>
                      <View className='car-card-detail-num'>{tripData?.plateNumber || '--'}</View>
                      <View className='car-card-detail-color'>
                        {tripData?.vehicleColor || '--'}
                        {/* <View className='car-card-detail-color-line'></View>
                        车身编码: {tripData?.vehicleCode || '--'} */}
                      </View>
                    </View>
                    {tripData?.vehiclePictures && (
                      <Image
                        className='car-card-detail-img'
                        src={
                          safeParse(tripData?.vehiclePictures, {})?.url
                          || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png'
                        }
                      />
      </Map>
      <View className='container'>
        <View
          className={`share-contact ${showReminder ? 'has-tip' : ''}`}
          onClick={handleContactService}
        >
          <Image className='share-contact-icon' src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/contact-service.png' />
        </View>
        <View className='container-inner'>
          <View catchMove onClick={(event) => event.stopPropagation()}>
            <View className='calling-car'>
              <Image
                className='calling-car-bg'
                src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/site-top-bg-20260507.png'
              />
              <View className='calling-car-head'>
                {tripData?.tripStatus === TripStatus.VehicleApproaching && (
                  <View className='calling-car-head-title'>
                    {durationDisplay ? (
                      <>
                        车辆还有
                        <View className='calling-car-head-title-eta'>{durationDisplay.value}</View>
                        {durationDisplay.unit}到达上车点
                      </>
                    ) : (
                      '车辆正在前往上车点'
                    )}
                  </View>
                  <View className='car-card-line'></View>
                  <View className='car-card-temp'>
                    <View className='car-card-temp-list'>
                      <Image className='car-card-temp-img' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/share-line.png" />
                      <View className='car-card-temp-row'>
                        <View className='car-card-temp-row-left'>
                          <View className='dot start'></View>
                          <View
                            className={`car-card-temp-title ${
                              tripData?.tripStatus === TripStatus.InService
                              || tripData?.tripStatus >= TripStatus.ArrivedDestination
                                ? 'disabled-text'
                                : ''
                            }`}
                          >
                            起点：{tripData?.startPointName}
                          </View>
                )}
                {tripData?.tripStatus === TripStatus.VehicleArrivedPickup && (
                  <View className='calling-car-head-title'>车辆已到达上车点</View>
                )}
                {tripData?.tripStatus === TripStatus.InService && (
                  <View className='calling-car-head-title'>
                    {/* 预计
                    <View className='calling-car-head-title-eta'>{durationDisplay.value}</View>
                    {durationDisplay.unit}抵达目的地 */}
                    乘客已上车，正在前往目的地
                  </View>
                )}
                {tripData?.tripStatus >= TripStatus.ArrivedDestination && (
                  <View className='calling-car-head-title'>已到达目的地</View>
                )}
              </View>
              <View className='car-card'>
                <View className='car-card-detail'>
                  <View>
                    <View className='car-card-detail-num'>{tripData?.plateNumber || '--'}</View>
                    <View className='car-card-detail-color'>
                      {tripData?.vehicleColor || '--'}
                      {/* <View className='car-card-detail-color-line'></View>
                      车身编码: {tripData?.vehicleCode || '--'} */}
                    </View>
                  </View>
                  {tripData?.vehiclePictures && (
                    <Image
                      className='car-card-detail-img'
                      src={
                        safeParse(tripData?.vehiclePictures, {})?.url
                        || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png'
                      }
                    />
                  )}
                </View>
                <View className='car-card-line'></View>
                <View className='car-card-temp'>
                  <View className='car-card-temp-list'>
                    <Image className='car-card-temp-img' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/share-line.png" />
                    <View className='car-card-temp-row'>
                      <View className='car-card-temp-row-left'>
                        <View className='dot start'></View>
                        <View
                          className={`car-card-temp-title ${
                            tripData?.tripStatus === TripStatus.InService
                            || tripData?.tripStatus >= TripStatus.ArrivedDestination
                              ? 'disabled-text'
                              : ''
                          }`}
                        >
                          起点：{tripData?.startPointName}
                        </View>
                        {(tripData?.tripStatus === TripStatus.InService
                          || tripData?.tripStatus >= TripStatus.ArrivedDestination)
                        && tripData?.boardingTime && (
                          <View className='car-card-temp-time disabled-text'>
                            {tripData.boardingTime} 上车
                          </View>
                        )}
                      </View>
                      {(tripData?.tripStatus === TripStatus.InService
                        || tripData?.tripStatus >= TripStatus.ArrivedDestination)
                      && tripData?.boardingTime && (
                        <View className='car-card-temp-time disabled-text'>
                          {tripData.boardingTime} 上车
                        </View>
                      )}
                    </View>
                    {shouldShowEndPointRow && (
                      <View className='car-card-temp-row' style={{ marginTop: '12px' }}>
                        <View className='car-card-temp-row-left'>
                          <View className='dot end'></View>
@@ -185,14 +188,14 @@
                          </View>
                        )}
                      </View>
                    </View>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </Map>
      </View>
    </View>
  );
}

 src/robotaxi/pages/share-trip/hooks/use-map-viewport.ts

@@ -519,10 +519,15 @@
        if (deps.statusRule.viewport !== "order_detail") {
            return;
        }
        if (completedOrderDetailViewportKeyRef.current) {
        const { pickupSite, dropoffSite } = resolveViewportSites();
        const nextKey = buildOrderDetailRouteSignature(deps.routePoints, pickupSite, dropoffSite);
        if (completedOrderDetailViewportKeyRef.current === nextKey) {
            return;
        }
        const { pickupSite, dropoffSite } = resolveViewportSites();
        if (completedOrderDetailViewportKeyRef.current && completedOrderDetailViewportKeyRef.current.split('|')[0] !== "0" && deps.routePoints.length > 0) {
            return;
        }

        const points: ViewportPoint[] = [];
        const pickupPoint = buildSiteViewportPoint(pickupSite);
        const dropoffPoint = buildSiteViewportPoint(dropoffSite);
@@ -538,7 +543,6 @@
        if (points.length === 0) {
            return;
        }
        const nextKey = buildOrderDetailRouteSignature(deps.routePoints, pickupSite, dropoffSite);
        completedOrderDetailViewportKeyRef.current = nextKey;
        if (orderDetailSyncTimerRef.current) {
            clearTimeout(orderDetailSyncTimerRef.current);

 src/robotaxi/pages/share-trip/index.less

@@ -89,7 +89,7 @@

.share-contact {
  position: absolute;
  bottom: calc(100% + 28px);
  bottom: calc(100% + 16px);
  right: 24px;
  display: flex;
  align-items: center;
@@ -103,7 +103,7 @@
  transition: bottom 0.3s ease; /* 可选，平滑过渡效果 */

  &.has-tip {
    bottom: calc(100% + 74px + 28px); /* tip-box 向上偏移了 74px */
    bottom: calc(100% + 16px);
  }

  .share-contact-icon {

 src/robotaxi/pages/share-trip/index.tsx

@@ -69,7 +69,7 @@
    [TripStatus.Publishing]: { showPickup: true, showDropoff: false, showCar: false, showRoute: false, showWalking: false, viewport: 'pickup', translateCar: false },
    [TripStatus.CallingCar]: { showPickup: true, showDropoff: false, showCar: false, showRoute: false, showWalking: false, viewport: 'pickup', translateCar: false },
    [TripStatus.VehicleApproaching]: { showPickup: true, showDropoff: false, showCar: true, showRoute: true, showWalking: false, viewport: 'route', translateCar: true },
    [TripStatus.VehicleArrivedPickup]: { showPickup: true, showDropoff: true, showCar: true, showRoute: false, showWalking: false, viewport: 'car_user', translateCar: true },
    [TripStatus.VehicleArrivedPickup]: { showPickup: true, showDropoff: false, showCar: true, showRoute: false, showWalking: false, viewport: 'car_user', translateCar: true },
    [TripStatus.InService]: { showPickup: false, showDropoff: true, showCar: true, showRoute: true, showWalking: false, viewport: 'route', translateCar: true },
    [TripStatus.ArrivedDestination]: { showPickup: false, showDropoff: true, showCar: false, showRoute: true, showWalking: false, viewport: 'order_detail', translateCar: false },
    [TripStatus.TripFinished]: { showPickup: true, showDropoff: true, showCar: false, showRoute: true, showWalking: false, viewport: 'order_detail', translateCar: false },

 src/utils/Robotaxi-public-method.ts

@@ -1099,6 +1099,12 @@
    case 9:
    case 10:
      return 9;
    case 11:
      return 9;
    case 12:
      return 9;
    case 13:
      return 9;
    default:
      return 0;
  }