refactor(release-route): 调整下单确认栏布局，优化优惠展示

hejianhao

2026-05-14 072f73bbf44bdfee0f5e6998bcafec9e4be9b716

refactor(release-route): 调整下单确认栏布局，优化优惠展示

重构组件JSX结构，调整优惠栏排版层级
新增优惠说明文案，优化优惠信息UI展示
移除原价金额展示区域
整理LESS样式文件，提升代码可维护性

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

@@ -300,11 +300,56 @@
        box-sizing: border-box;
        padding: 24px 38px 62px 32px;
        background: #FEFEFF;

        .discount-amount {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 32px 8px 24px;
            background: #FFF3E6;

            .discount-amount-text {
                border-radius: 6px;
                background: rgba(245, 137, 0, 0.06);
                box-sizing: border-box;
                border: 1px solid rgba(245, 137, 0, 0.2);
                line-height: 30px;
                text-align: center;
                padding: 0px 6px;
                font-size: 16px;
                font-weight: 500;
                color: #F58900;
            }

            .discount-amount-desc {
                margin-left: 10px;
                font-size: 24px;
                line-height: 40px;
                letter-spacing: normal;
                color: #F58900;
            }

            .discount-amount-num {
                margin-right: 4px;
                font-size: 24px;
                font-weight: 500;
                line-height: 40px;
                letter-spacing: normal;
                color: #F58900;
            }

            .change-coupon-icon {
                width: 24px;
                height: 24px;
            }
        }

        .confirm-btn-box-content {
        display: flex;
        justify-content: space-between;
            align-items: center;

        .money-box {
            margin-top: 8px;

            .route-operate-free {
                margin-top: 20px;
@@ -336,58 +381,6 @@
                    color: rgba(0, 0, 0, 0.9);
                }
            }

            .route-content-bottom {

                &-right {
                    margin-left: 30px;
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .discount-amount {
                        display: flex;
                        align-items: center;

                        .discount-amount-text {
                            border-radius: 6px;
                            background: rgba(245, 137, 0, 0.06);
                            box-sizing: border-box;
                            border: 1px solid rgba(245, 137, 0, 0.2);
                            line-height: 30px;
                            text-align: center;
                            padding: 0px 6px;
                            font-size: 16px;
                            font-weight: 500;
                            color: #F58900;
                        }

                        .discount-amount-num {
                            margin-left: 8px;
                            font-size: 20px;
                            font-weight: 500;
                            line-height: 20px;
                            letter-spacing: normal;
                            color: #F58900;
                        }

                        .change-coupon-icon {
                            width: 24px;
                            height: 24px;
                        }
                    }

                    .original-fare {

                        font-size: 24px;
                        font-weight: normal;
                        line-height: 41px;
                        letter-spacing: normal;
                        text-decoration: line-through;
                        color: rgba(0, 0, 0, 0.4);
                    }
                }
            }
        }

        .confirm-btn-wrapper {
@@ -420,3 +413,4 @@
        }
    }
}
}

 src/robotaxi/pages/begin-route/components/release-route.tsx

@@ -226,6 +226,20 @@
                    </View>
                </View>
                <View className="confirm-btn-box">
                    {
                        isOperateFree ? null : fareEstimate.discountAmount > 0 &&
                            <View className="discount-amount" onClick={onOpenCouponSelect}>
                                <View>
                                    <View className="discount-amount-text">最佳优惠</View>
                                    <View className="discount-amount-desc" >已为您选择最佳优惠</View>
                                </View>
                                <View>
                                    <View className="discount-amount-num">{fareEstimate.discountAmount}元</View>
                                    <Image className="change-coupon-icon" src={changeCouponIcon} />
                                </View>
                            </View>
                    }
                    <View className="confirm-btn-box-content">
                    <View className="money-box">
                        {isOperateFree ? (
                            <View className="route-operate-free">载客测试免费</View>
@@ -237,23 +251,6 @@
                                元
                            </View>
                        )}

                        {isOperateFree ? null :
                            <View className="route-content-bottom-right">
                                {
                                    fareEstimate.discountAmount > 0 &&
                                    <View className="discount-amount" onClick={onOpenCouponSelect}>
                                        <View className="discount-amount-text">最佳优惠</View>
                                        <View className="discount-amount-num">{fareEstimate.discountAmount}元</View>
                                        <Image className="change-coupon-icon" src={changeCouponIcon} />
                                    </View>
                                }
                                {
                                    fareEstimate.originalFareStr > 0 &&
                                    <View className="original-fare">{fareEstimate.originalFareStr || '-'}元</View>
                                }
                            </View>
                        }
                    </View>
                    <View className="confirm-btn-wrapper">
                        <View onClick={() => !isCallDisabled && callImmediately()} className="confirm-btn">立即呼叫</View>
@@ -262,5 +259,6 @@
                </View>
            </View>
        </View>
        </View>
    )
}