用点击事件 操作组件显示信息

 

<template>
    <div>
        <nav class="topNav">
            <div class="navList">
                <a :class="{navItem:true , navItemOn:orderType == 0}" @click="clickEvent(0)">全部</a>
                <a :class="{navItem:true , navItemOn:orderType == 1}" @click="clickEvent(1)">待付款</a>
                <a :class="{navItem:true , navItemOn:orderType == 2}" @click="clickEvent(2)">待发货</a>
                <a :class="{navItem:true , navItemOn:orderType == 3}" @click="clickEvent(3)">已完成</a>
                <a :class="{navItem:true , navItemOn:orderType == 4}" @click="clickEvent(4)">已评价</a>
                <a :class="{navItem:true , navItemOn:orderType == 5}" @click="clickEvent(5)">已取消</a>
            </div>
        </nav>
        <div class="orderList">
            <merchantInem
                    :orderType="orderType"
            ></merchantInem>
        </div>
    </div>
</template>

<script>
    import merchantInem from "./merchantInem"
    import baseModule from "../../baseModule";
    export default {
        name: "merchantOrder",
        extends: baseModule,
        components: {
            merchantInem
        },
        data() {
            return {
                orderType: 0,//用户点击的按钮 信息//0全部订单。1.待付款。2.待发货。3.已完成。4.已评价  5.已取消
            }
        },
        methods: {
            /**
             * intro:跟随用户点击事件调用接口
             * authors: hanqing
             * dateTime: 2019/7/19
             * modification-authors:
             * description:跟随用户点击事件调用接口
             * param:///用户点击的按钮 信息//0全部订单。1.待付款。2.待发货。3.已完成。4.已评价  5.已取消
             * return:
             */
            clickEvent(num) {
                this.orderType = num;
                //0全部订单。1.待付款。2.待发货。3.已完成。4.已评价  5.已取消
                switch (num) {
                    case 0:
                        console.log("全部");
                        this.selectUserOrderList('');//0全部订单
                        break;
                    case 1:
                        console.log("待付款");
                        this.selectUserOrderList('');//待付款
                        break;
                    case 2:
                        console.log("待发货");
                        this.selectUserOrderList('');//待发货
                        break;
                    case 3:
                        console.log("已完成");
                        this.selectUserOrderList('');//已完成
                        break;
                    case 4:
                        console.log("已评价");
                        this.selectUserOrderList('');//已评价
                        break;
                    case 5:
                        console.log("已取消");
                        this.selectUserOrderList('');//已取消
                        break;
                }
            },
            /**
             * intro:调用接口
             * authors: hanqing
             * dateTime: 2019/7/18
             * modification-authors:
             * description: 接受传过来的参数 调用对应的接口
             * param: ac 订单的接口名 //0全部订单。1.待付款。2.待发货。3.已完成。4.已评价  5. 已取消
             *      0全部订单。1.待付款。2.待发货。3.已完成。4.已评价  5.已取消
             * return:
             */
            selectUserOrderList(ac) {
                this.getAjaxData("book", ac, {
                    page_index:1,
                    page_context:10,
                }, (data) => {
                    console.log(data)
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .topNav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background-color: #fff;
        padding: 0 6px;
        box-sizing: border-box;
        z-index: 88;
    }

    .navList {
        display: flex;
        font-size: 13px;
        color: #020e24;
        letter-spacing: 0.33px;
        justify-content: space-between;
    }

    .navItem {
        position: relative;
        white-space: nowrap;
        padding: 11px 10px;
        z-index: 8;
    }

    .navItemOn {
        background: linear-gradient(to right, #ff7e33, #ffdd3e) no-repeat;
        background-position: 11px 24px;
        background-size: calc(100% - 22px) 4px;
    }

    .orderList {
        margin-top: 40px;
        background-color: #fff;
    }
</style>