flyLong/pc/src/components/Navside.vue

<template>
    <div class="Navside">
        <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: '',
                userLevel: 0,
                userLevelDeafult: "",
            }
        },
        props: ['isCollapse'],
        mounted() {
            this.userLevelDeafult = this.$route.meta.clmid;
            this.getTableQuery();
            this.getManagerSelfQuery();

        },
        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 = 3;
                                break;
                        }
                        localStorage.shopId = json.Rs.ShopId;
                        this.panelSelect(json.Rs.ShopId);
                    } else {
                        if(json.Code == 1010){
                            that.$message.error(json.Memo);
                            that.$router.push({path: '/login', query: {status: 1}});
                            return false
                        }else{
                            that.$message.error(json.Memo);
                        }
                    }
                })
            },
            // 获取所属店铺
            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);
                    }
                })
            },
            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;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        /*overflow-y: scroll;*/
        overflow-y: hidden;
        background-color: #fff;
        z-index: 4444;
    }

    .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;
    }

    /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;
    }

</style>