feat(后备箱): 添加后备箱状态显示与切换功能

hejianhao

2026-03-23 1df4e3a34e722db1ab31fad697fedd5ff49c3c1e

feat(后备箱): 添加后备箱状态显示与切换功能

- 从订单接口获取后备箱初始状态并传递给组件
- 修改后备箱按钮为切换模式，支持打开/关闭状态切换
- 更新后备箱按钮样式，区分开启和关闭状态
- 同步更新到达页面和行程页面的后备箱控制逻辑

 src/robotaxi/pages/begin-route/components/calling-car.tsx

@@ -56,6 +56,7 @@
        plateNumber?: string; // 车牌号
    };
    orderId?: string; // 订单ID
    orderTrunkStatus?: boolean; // 后备箱状态
}

export default function CallingCar({
@@ -77,10 +78,11 @@
    routeDurationSeconds,
    finishCountdownEnabled = false,
    vehicleInfo,
    orderId
    orderId,
    orderTrunkStatus,
}: Props) {

    const [trunkStatus, setTrunkStatus] = useState(false); // 后备箱状态
    const [trunkStatus, setTrunkStatus] = useState(orderTrunkStatus); // 后备箱状态
    const [lockStatus, setLockStatus] = useState(false); // 锁车状态
    const [tempStatus, setTempStatus] = useState<number | null>(); // 温度状态
    const [activeIndex, setActiveIndex] = useState(0) // 默认选中"很满意"
@@ -481,6 +483,7 @@
                    title: '打开成功',
                    icon: 'none'
                });
                onSuccess?.();
            }
            if (doorType === 'door') {
                Taro.showToast({
@@ -600,9 +603,14 @@
                    {
                        tripStatus == 5 &&
                        <View className="car-card-arrive">
                            <View className="car-card-arrive-item" onClick={() => handleUnlock('trunk', () => setTrunkStatus(true))}>
                                <Image className="car-card-arrive-item-img" src={require('../../../assets/trunk-close.png')} />
                                <View className="car-card-arrive-item-text">打开后备箱</View>
                            <View className={`car-card-arrive-item ${trunkStatus && 'close-btn-item'}`} onClick={() => handleUnlock('trunk', () => setTrunkStatus((prev) => !prev))}>
                                {
                                    trunkStatus ?
                                        <Image className="car-card-arrive-item-img" src={require('../../../assets/trunk-open.png')} />
                                        :
                                        <Image className="car-card-arrive-item-img" src={require('../../../assets/trunk-close.png')} />
                                }
                                <View className="car-card-arrive-item-text">{trunkStatus ? '关闭后备箱' : '打开后备箱'}</View>
                            </View>
                            <View className="car-card-arrive-item" onClick={() => handleUnlock('door', () => setLockStatus(true))}>
                                <Image className="car-card-arrive-item-img" src={require('../../../assets/lock-close.png')} />
@@ -757,9 +765,14 @@
                    <View className="car-card-reach-text">点击按钮开车门</View>
                    <Image className='car-card-reach-img' src='https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/f4a18c3f-a2db-45e6-8967-1510355b5e3b.webp' />
                    <View className="car-card-reach-btn">
                        <View className="car-card-reach-btn-item" onClick={() => handleUnlock('trunk', () => setTrunkStatus(true))}>
                            <Image className="car-card-reach-btn-item-img" src={require('../../../assets/trunk-close.png')} />
                            <View className="car-card-reach-btn-item-text">打开后备箱</View>
                        <View className={`car-card-reach-btn-item ${trunkStatus && 'close-btn-item'}`} onClick={() => handleUnlock('trunk', () => setTrunkStatus((prev) => !prev))}>
                            {
                                trunkStatus ?
                                    <Image className="car-card-reach-btn-item-img" src={require('../../../assets/trunk-open.png')} />
                                    :
                                    <Image className="car-card-reach-btn-item-img" src={require('../../../assets/trunk-close.png')} />
                            }
                            <View className="car-card-reach-btn-item-text">{trunkStatus ? '关闭后备箱' : '打开后备箱'}</View>
                        </View>
                        <View className="car-card-reach-btn-item" onClick={handleOpenOverRoutePopup}>
                            <Image className="car-card-reach-btn-item-img" src={require('../../../assets/over-gps-icon.png')} />

 src/robotaxi/pages/begin-route/components/css-folder/calling-car.less

@@ -30,7 +30,7 @@
            align-items: center;

            .time {
                

                margin: 0 4px;
                font-size: 40px;
                line-height: 40px;
@@ -87,7 +87,7 @@
            justify-content: space-between;

            &-num {
                

                font-size: 48px;
                line-height: 64px;
                letter-spacing: normal;
@@ -172,23 +172,10 @@
                &:first-child {
                    position: relative;
                    border-radius: 16px;
                    background: linear-gradient(110deg, rgba(132, 117, 255, 0.2) 0%, rgba(125, 214, 255, 0.2) 99%);
                    background: #FFFFFF;
                    box-sizing: border-box;
                    border: 2px solid rgba(0, 0, 0, 0.15);

                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        border-radius: 16px;
                        padding: 1px;
                        background: linear-gradient(180deg, #AAA8FF -10%, rgba(41, 159, 255, 0.0469) 108%, rgba(0, 0, 0, 0) 108%);
                        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                        -webkit-mask-composite: xor;
                        mask-composite: exclude;
                        pointer-events: none;
                    }
                }

                &:last-child {
@@ -216,7 +203,7 @@
                    align-items: center;

                    view:nth-child(1) {
                        

                        font-size: 48px;
                        line-height: 40px;
                        letter-spacing: normal;
@@ -232,7 +219,7 @@
                    }

                    view:nth-child(3) {
                        

                        font-size: 28px;
                        line-height: 36px;
                        letter-spacing: normal;
@@ -377,7 +364,7 @@
        padding-top: 22px;

        &-text {
            

            font-size: 28px;
            line-height: 44px;
            letter-spacing: normal;
@@ -486,4 +473,26 @@
            }
        }
    }
}

.close-btn-item {
    position: relative;
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(132, 117, 255, 0.2) 0%, rgba(125, 214, 255, 0.2) 99%);

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(180deg, #AAA8FF -10%, rgba(41, 159, 255, 0.0469) 108%, rgba(0, 0, 0, 0) 108%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}

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

@@ -110,6 +110,7 @@
  const [distanceConfig, setDistanceConfig] = useState<any>({});
  const [mapScale, setMapScale] = useState(14);
  const [showLocationFlag, setShowLocationFlag] = useState(true);
  const [trunkStatus, setTrunkStatus] = useState(false);

  const markersRef = useRef<any[]>([]);
  const tripStatusRef = useRef(tripStatus); // 行程状态引用
@@ -1457,6 +1458,7 @@
          if (!res) {
            return;
          }
          setTrunkStatus(res.trunkStatus == 2 ? false : true);
          const nextStartSite = {
            id: res.startPointId || '',
            name: res.startPointName || '',
@@ -2159,6 +2161,7 @@
                  estimatedWaitMinutes={fareEstimate?.waitingTime}
                  routeDurationSeconds={routeDuration}
                  onToggleDetailFade={handleToggleDetailFade}
                  orderTrunkStatus={trunkStatus}
                />
              }
            </View>