fix(modify-destination-review): 完善确认按钮的禁用状态处理

hejianhao

2026-06-01 4932ab617367e7261fbe86ff6d28d21bd6d40da2

fix(modify-destination-review): 完善确认按钮的禁用状态处理

新增路线数据必填校验逻辑，添加禁用按钮的渐变背景样式，更新按钮文案与遮罩显示时机以适配加载与提交场景

 src/robotaxi/pages/begin-route/components/css-folder/modify-destination-review.less

@@ -199,6 +199,11 @@
    color: #ffffff;
  }

  &-confirm-disabled {
    background: linear-gradient(102deg, #c8cde0 0%, #dce1ef 102%);
    color: rgba(255, 255, 255, 0.92);
  }

  &-confirm-wrapper {
    position: relative;
    flex-shrink: 0;

 src/robotaxi/pages/begin-route/components/modify-destination-review.tsx

@@ -39,6 +39,10 @@
  const [boxHeightPx, setBoxHeightPx] = useState<number | null>(null); // 容器高度（px）
  const selectedRoute = routeOptions?.[selectedRouteIndex]; // 当前选中的改终点路线
  const isOperateFree = Number(selectedRoute?.operateFree) === 1; // 当前路线是否为载客测试免费
  const selectedRouteId = selectedRoute?.route?.routeID || selectedRoute?.pathFingerprint || ''; // 当前路线唯一标识，未就绪时禁止确认修改
  const selectedRoutePlanRule = selectedRoute?.primaryRoutePlanRule || ''; // 当前路线规划策略，后端改终点接口必填
  const navigationSnapshotId = selectedRoute?.snapshotId || ''; // 当前路线导航快照 ID，后端改终点接口必填
  const isConfirmDisabled = isConfirmingModifyDestination || !selectedRouteId || !selectedRoutePlanRule || !navigationSnapshotId; // 路线数据未加载完成或提交中时按钮禁用

  const isDragging = useRef(false);
  const startY = useRef(0);
@@ -233,15 +237,15 @@
              </View>
              <View className='modify-destination-review-confirm-wrapper'>
                <View
                  className='modify-destination-review-confirm'
                  className={`modify-destination-review-confirm${isConfirmDisabled ? ' modify-destination-review-confirm-disabled' : ''}`}
                  onClick={() => {
                    if (isConfirmingModifyDestination) return;
                    if (isConfirmDisabled) return;
                    onConfirm();
                  }}
                >
                  {isConfirmingModifyDestination ? '确认中...' : '确认修改'}
                  {isConfirmingModifyDestination ? '确认中...' : (isConfirmDisabled ? '路线加载中...' : '确认修改')}
                </View>
                {isConfirmingModifyDestination && <View className='modify-destination-review-confirm-mask' />}
                {isConfirmDisabled && <View className='modify-destination-review-confirm-mask' />}
              </View>
            </View>
          </View>