sportCms/src/components/Navside.vue

<template>
    <div :class="NavsideClass">
        <div class="logoContainer">
            <img src="../assets/img/nav/logo.png" height="40" width="180" />
            <i :class="[{ 'el-icon-s-unfold left_hide_icon': left_panel_state }, { 'el-icon-s-fold left_show_icon': !left_panel_state }]"
                @click="left_hide"></i>
        </div>
        <div class="userContainer">
            <!-- <img src="../assets/img/nav/head.png" height="51" width="51" /> -->
            <!-- <span>{{ ShopName }}</span>
            <em>{{ userLevelText }}</em>-->
        </div>
        <el-row :class="[{ 'shortnav': isCollapse }, { 'longNav': !isCollapse }]">
            <el-col :span="24">
                <el-menu :default-active="userLevelDeafult" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" @select="handleSelect" :collapse="isCollapse" background-color="#ffffff"
                    text-color="#777777" active-text-color="#fff"
                    
                    router>
                    <el-menu-item :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs"
                    popper-append-to-body="false"
                        v-if="nav.show == userLevel">
                        <i :class="nav.icon"></i>
                        <span slot="title">{{ nav.clmname }}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import Navs from '../api/Navs';
    import {
        ManagerSelfQuery,
        ShopListQuery
    } from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                isCollapse: document.body.clientWidth < 1366,
                left_panel_state: true,
                wildState: 0,
                navs: [],
                ShopName: '',
                userLevelText: '',
                NavsideClass: 'Navside',
                userLevel: 0,
                userLevelDeafult: "",
            }
        },
        // props: ['isCollapse'],
        mounted() {
            this.userLevelDeafult = this.$route.meta.clmid;
            this.getTableQuery();
            this.getManagerSelfQuery();
            if (document.body.clientWidth < 1024) {
                this.NavsideClass = 'NavsideShort'
            } else {
                this.NavsideClass = 'Navside'
            }
        },
        watch: {
            $route(to, from) {
            },
        },
        methods: {
            //            隐藏左侧和显示
            left_hide: function () {
                let that = this;
                that.left_panel_state = !that.left_panel_state;
                that.isCollapse = !that.isCollapse;
                this.$emit('lefthide');

                // if (!that.left_panel_state) {
                //     this.$emit('left_hide_func');
                // } else {
                //     this.$emit('right_hide_func');
                // }
            },
            handleSelect(i, s, t) {
                // this.$emit('TabsAdd', i);//触发事件
            },
            getTableQuery() {
                // 菜单
                this.navs = Navs;
            },
            getManagerSelfQuery() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ManagerSelfQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.userLevelText = json.Rs.Role.Name;
                        // 1 会员 2 系统 3 店铺 4 教练
                        switch (parseInt(json.Rs.Role.Id)) {
                            case 1:
                                that.userLevel = 1;
                                break;
                            case 2:
                                that.userLevel = 2;
                                break;
                            case 3:
                                that.userLevel = 3;
                                break;
                            case 4:
                                that.userLevel = 4;
                                break;
                        }
                        localStorage.shopId = json.Rs.ShopId;
                        this.panelSelect(json.Rs.ShopId);
                    } else {
                        if (json.Code == 1010) {
                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
                            that.$router.push({ path: '/login', query: { status: 1 } });
                            return false
                        } else {
                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
                        }
                    }
                })
            },
            // 获取所属店铺
            panelSelect(ShopId) {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ShopListQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        json.Rs.map(function (item) {
                            if (item.ShopID == ShopId) {
                                that.ShopName = item.ShopName;
                            }
                        })
                    } else {
                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                    }
                })
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
        },
    }
</script>
<style scoped>
    /*注释*/
    .Navside {
        width: 100%;
        /* height: 910px; */
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        overflow-y: scroll;
        /*overflow-y: hidden;*/
        background-color: #fff;
        z-index: 4444;
    }

    .NavsideShort {
        width: 100%;
        height: 100%;
        /*height: 710px;*/
        overflow: hidden;
        display: block;
        margin: 0 auto;
        /*overflow-y: scroll;*/
        overflow-y: scroll;
        background-color: #fff;
        z-index: 4444;
    }

    .Navside::-webkit-scrollbar {
        /*滚动条整体样式*/

        width: 3px;
        /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;
    }

    .Navside::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/

        border-radius: 3px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #f5f5f5;
    }

    .Navside::-webkit-scrollbar-track {
        /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 3px;

        background: #f5f5f5;
    }

    .NavsideShort::-webkit-scrollbar {
        /*滚动条整体样式*/

        width: 3px;
        /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;
    }

    .NavsideShort::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/

        border-radius: 3px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #f5f5f5;
    }

    .NavsideShort::-webkit-scrollbar-track {
        /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 3px;

        background: #f5f5f5;
    }

    .logoContainer {
        width: 256px;
        height: 72px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #3799ff;
    }

    .logoContainer img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 1px;
    }

    .userContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 16px;
        padding-top: 19px;
        padding-bottom: 19px;
        border-bottom: 1px solid #f0f2f5;
        background: #fff;
    }

    .userContainer img {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 16px;
    }

    .userContainer span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #565656;
        font-size: 16px;
    }

    .userContainer em {
        width: 125px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #e75296;
        border-radius: 250px;
        font-style: normal;
        margin-top: 8px;
        font-size: 16px;
    }

    /deep/ .el-menu {
        border: none;
    }

    /deep/ .el-menu-item {}

    /deep/ .el-menu-item span {
        text-align: left;
        float: left;
        margin-left: 70px;
    }

    /deep/ .el-menu-item.is-active {
        background-color: #3799ff !important;
        color: #fff !important;
    }

    /deep/ .el-menu-item:hover {
        background-color: #3799ff !important;
        color: #fff !important;
    }

    /deep/ .el-menu-item:hover i {
        color: #fff !important;
    }

    /deep/ .el-menu-item i {
        position: inherit;
        float: left;
        line-height: 25px;
        margin-top: 15px;
        left: 60px;
    }

    @media (min-width: 960px) and (max-width: 1367px) {
        .left_hide_icon {
            width: 20px;
            height: 20px;
            margin-top: 8px;
            float: left;
            margin-left: 10px;
            cursor: pointer;
            color: #badcff;
            font-size: 22px;
            /*background: url("../assets/img/header/right.png")top center no-repeat;*/
        }

        /*.left_hide_icon:hover {*/
        /*    background: #ccc;*/
        /*    color: #fff;*/
        /*}*/

        .left_show_icon {
            width: 20px;
            height: 20px;
            margin-top: 8px;
            float: left;
            margin-left: 10px;
            cursor: pointer;
            color: #badcff;
            font-size: 22px;
            /*background: url("../assets/img/header/left.png")top center no-repeat;*/
        }

        .logoContainer {
            height: 40px;
        }

        .el-container.is-vertical {
            left: 60px;
        }

        .el-menu-item span {
            text-align: left;
            float: left;
            margin-left: 5px;
            line-height: 20px;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
        }

        .userContainer em {
            width: 100%;
            overflow: hidden;
            display: block;
            margin: 0 auto;
            font-size: 12px;
        }

        .el-menu-item {
            padding: 0 !important;
            margin: 0;
        }

        /deep/ .el-tooltip {
            padding: 0 !important;
        }

        .userContainer span {
            font-size: 12px;
        }

        .el-menu-item,
        .el-submenu__title {
            height: 30px;
            line-height: 30px;
        }

        .userContainer img {
            display: none;
        }

        /deep/ .el-tooltip i {
            float: left;
            left: 10px;
            line-height: 30px;
        }

        /deep/ .el-menu-item i {
            position: inherit;
            float: left;
            margin-top: 3px;
            left: 10px;
        }
    }
</style>