传值

被选中是红色，没被选中是灰色

.tab_default {
        width: 25%;
        display: inline-block;
        text-align: center;
        line-height: 110rpx;
        color: #7B7B7B;
        font-size: 30rpx;
    }

    .tab_selete {
        width: 25%;
        display: inline-block;
        text-align: center;
        line-height: 110rpx;
        color: #FD3025;
        font-size: 30rpx;
    }

<div :class="type*1==0? 'tab_selete':'tab_default'" @click="type=0">
                <div>全部</div>
            </div>
            <div :class="type*1==1? 'tab_selete':'tab_default'" @click="type=1">
                <div>待付款</div>
            </div>
            <div :class="type*1==2? 'tab_selete':'tab_default'" @click="type=2">
                <div>待收货</div>
            </div>
            <div :class="type*1==3? 'tab_selete':'tab_default'" @click="type=3">
                <div>待评价</div>
            </div>

将type值传给data->this.query

export default {
        
        data() {
            return {
                type: -1, //类型  0：全部    1：待付款   2：待发货   3：待收货
            }
        },
        onLoad(data) {
            this.query = data
        },
        onShow() {
            if (this.type == -1) {
                this.type = this.query.type ? this.query.type : 0;
                this.query.type = 0;
            }
        },
    
    }

我的界面点击按钮进入订单详情界面

    <div class="my_order_quanbu" @click="allOrders">
                    <div style="color: #999999;font-size: 26rpx;">全部
订单</div>
                    <image src="/static/icon/icon_back@2x.png" class="my_order_img" mode=""></image>
                </div>

// 全部订单
            allOrders() {
                this.$router.push({
                    path: "/my/order/orderList",
                    query: {
                        type: 0
                    }
                });
            },

捕获.PNG 捕获s.PNG