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,123 +300,117 @@
        box-sizing: border-box;
        padding: 24px 38px 62px 32px;
        background: #FEFEFF;
        display: flex;
        justify-content: space-between;

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

            .route-operate-free {
                margin-top: 20px;
                font-size: 28px;
                line-height: 40px;
            .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;
            }

            .route-content-top-money {
                display: flex;
                align-items: center;
            .discount-amount-desc {
                margin-left: 10px;
                font-size: 24px;
                line-height: 40px;
                letter-spacing: normal;
                color: rgba(0, 0, 0, 0.9);
                color: #F58900;
            }

                .tip-icon {
                    width: 22px;
                    height: 22px;
                    flex-shrink: 0;
                    margin-right: 4px;
            .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 {

                .route-operate-free {
                    margin-top: 20px;
                    font-size: 28px;
                    line-height: 40px;
                    color: #F58900;
                }

                .money-num {
                    margin: 0 4px;
                    font-size: 48px;
                .route-content-top-money {
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    line-height: 40px;
                    letter-spacing: normal;
                    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;
                        }
                    .tip-icon {
                        width: 22px;
                        height: 22px;
                        flex-shrink: 0;
                        margin-right: 4px;
                    }

                    .original-fare {

                        font-size: 24px;
                        font-weight: normal;
                        line-height: 41px;
                    .money-num {
                        margin: 0 4px;
                        font-size: 48px;
                        line-height: 40px;
                        letter-spacing: normal;
                        text-decoration: line-through;
                        color: rgba(0, 0, 0, 0.4);
                        color: rgba(0, 0, 0, 0.9);
                    }
                }
            }
        }

        .confirm-btn-wrapper {
            width: 296px;
            position: relative;
            height: 94px;
        }
            .confirm-btn-wrapper {
                width: 296px;
                position: relative;
                height: 94px;
            }

        .confirm-btn {
            width: 296px;
            height: 94px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            background: linear-gradient(102deg, #8475FF 0%, #7DD6FF 102%);
            font-size: 28px;
            letter-spacing: normal;
            color: #FFFFFF;
        }
            .confirm-btn {
                width: 296px;
                height: 94px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                background: linear-gradient(102deg, #8475FF 0%, #7DD6FF 102%);
                font-size: 28px;
                letter-spacing: normal;
                color: #FFFFFF;
            }

        .confirm-btn-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.4);
            .confirm-btn-mask {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 20px;
                background: rgba(255, 255, 255, 0.4);
            }
        }
    }
}

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

@@ -226,38 +226,36 @@
                    </View>
                </View>
                <View className="confirm-btn-box">
                    <View className="money-box">
                        {isOperateFree ? (
                            <View className="route-operate-free">载客测试免费</View>
                        ) : (
                            <View className="route-content-top-money" onClick={() => toPriceDescription()} >
                                <Image className="tip-icon" src={tipDefaultIcon} />
                                预估
                                <Text className="money-num">{fareEstimate.finalFareStr || '-'}</Text>
                                元
                    {
                        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>
                        )}

                        {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>
                        {isCallDisabled && <View className="confirm-btn-mask" />}
                    }
                    <View className="confirm-btn-box-content">
                        <View className="money-box">
                            {isOperateFree ? (
                                <View className="route-operate-free">载客测试免费</View>
                            ) : (
                                <View className="route-content-top-money" onClick={() => toPriceDescription()} >
                                    <Image className="tip-icon" src={tipDefaultIcon} />
                                    预估
                                    <Text className="money-num">{fareEstimate.finalFareStr || '-'}</Text>
                                    元
                                </View>
                            )}
                        </View>
                        <View className="confirm-btn-wrapper">
                            <View onClick={() => !isCallDisabled && callImmediately()} className="confirm-btn">立即呼叫</View>
                            {isCallDisabled && <View className="confirm-btn-mask" />}
                        </View>
                    </View>
                </View>
            </View>