flyLong/pc/src/components/Navside.vue

<template>
    <div :class="NavsideClass">
        <div class="logoContainer">
            <img src="../assets/img/nav/logo.png" height="40" width="180"/>
        </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"
                        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"
                                  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 {
                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'
            }
        },
        methods: {
            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);
            },
        },
        watch: {
            $route(to, from) {
                this.userLevelDeafult = to.meta.clmid
            },
        },
    }
</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: relative;
        float: left;
        line-height: 55px;
        left: 60px;
    }

    /*ipad only*/
    @media(min-width:1025px) and (max-width: 1366px){
        .userContainer {
            width: 80%;
        }

        .el-menu-item span {
            text-align: left;
            float: left;
            margin-left: 20px;
            line-height: 40px;
        }

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

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

        .el-menu-item i {
            left: 20px;
            padding: 0;
            margin: 0;
            float: left;
            line-height: 40px;
        }

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

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

        .el-menu-item, .el-submenu__title {
            height: 40px;
        }
    }
    @media(min-width:960px) and (max-width: 1024px){
        .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;
        }
        .el-menu-item i {
            /*left: 20px;*/
            /*padding: 0;*/
            /*margin: 0;*/
            /*float: left;*/
            /*line-height: 20px;*/
            display: none;
        }
        .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;
        }
    }

</style>