<template>
|
<!--
|
作者：luoyiming
|
时间：2019-10-24
|
描述：后台系统左侧菜单
|
-->
|
<div class="left-menu-wrapper">
|
<!--主菜单-->
|
<div class="menu-wrapper">
|
<div class="home-login">
|
<div :class="active_menu != null ? 'home-icon' : 'home-icon router-link-active'" @click="choseMenu(null)">
|
<span class="icon iconfont icon-tubiaozhizuomoban-"></span>
|
</div>
|
</div>
|
<div class="d-c-c">
|
<span class="p-10-0 blue fb tc">{{baseInfo.agent_name ||''}}</span>
|
</div>
|
<div class="nav-wrapper">
|
<div class="first-menu-content">
|
<ul class="nav-ul">
|
<li :class="active_menu == index ? 'menu-item router-link-active' : 'menu-item'" v-for="(item, index) in menuList" :key="index" @click="choseMenu(item)">
|
<div class="item-box">
|
<span :class="'icon iconfont menu-item-icon ' + item.icon"></span>
|
<span>{{ item.name }}</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<!--子菜单-->
|
<div class="child-menu-wrapper">
|
<div class="child-menu right-animation">
|
<ul v-if="active_menu != null">
|
<li
|
:class="active_child == index ? 'router-link router-link-active' : 'router-link'"
|
v-for="(item, index) in menuList[active_menu]['children']"
|
:key="index"
|
@click="choseMenu(item)"
|
>
|
<span class="name">{{ item.name }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import bus from '@/utils/eventBus';
|
import AuthApi from '@/api/index.js';
|
import { delCookie, getCookie } from '@/utils/base.js';
|
export default {
|
components: {},
|
data() {
|
return {
|
baseInfo: {
|
agent_name:''
|
},
|
/*选中的菜单*/
|
active_menu: null,
|
/*子菜单选择*/
|
active_child: 0,
|
/*菜单数据*/
|
menuList: [
|
// {
|
// name: '代理商',
|
// icon: 'icon-huiyuan',
|
// path: '/agent',
|
// children: [
|
// {
|
// name: '代理商列表',
|
// icon: null,
|
// path: '/agent/Index'
|
// }
|
// ]
|
// },
|
{
|
name: '客户管理',
|
icon: 'icon-huiyuan',
|
path: '/client',
|
children: [
|
{
|
name: '客户列表',
|
icon: null,
|
path: '/client/Index'
|
}
|
]
|
},
|
// {
|
// name: '门店',
|
// icon: 'icon-zhuye',
|
// path: '/store',
|
// children: [
|
// {
|
// name: '门店',
|
// icon: null,
|
// path: '/store/Index'
|
// }
|
// ]
|
// },
|
{
|
name: '钱包',
|
icon: 'icon-huiyuan',
|
path: '/balance',
|
children: [
|
{
|
name: '钱包',
|
icon: null,
|
path: '/balance/Index'
|
}
|
]
|
},
|
{
|
name: '密码',
|
icon: 'icon-authority1',
|
path: '/password',
|
children: [
|
{
|
name: '修改密码',
|
icon: null,
|
path: '/password/Index'
|
}
|
]
|
}
|
]
|
};
|
},
|
//inject: ['baseInfo'],
|
created() {
|
/*页面加载判断哪个菜单*/
|
this.selectMenu(this.$route);
|
//this.baseInfo= getCookie('baseInfo');
|
this.getBaseInof();
|
},
|
watch: {
|
//监听路由
|
$route(to, from) {
|
const toDepth = to.path.split('/').length;
|
const fromDepth = from.path.split('/').length;
|
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
|
this.selectMenu(to);
|
}
|
},
|
methods: {
|
getBaseInof() {
|
let self=this;
|
AuthApi.getUserInfo({}, true)
|
.then(res => {
|
self.baseInfo=res.data.agent;
|
//setCookie('baseInfo', res.data.agent);
|
})
|
.catch(error => {
|
|
});
|
},
|
/*菜单*/
|
selectMenu(to) {
|
let menu_name = '首页';
|
let menupath = '/' + to.path.split('/')[1];
|
for (let i = 0; i < this.menuList.length; i++) {
|
/*判断主菜单选择*/
|
if (menupath == this.menuList[i]['path']) {
|
menu_name = this.menuList[i]['name'];
|
this.active_menu = i;
|
/*判断子菜单选择*/
|
let path = to.path;
|
if (this.menuList[i]['children']) {
|
let childs = this.menuList[i]['children'];
|
for (let c = 0; c < childs.length; c++) {
|
if (path == childs[c]['path']) {
|
menu_name = childs[c]['name'];
|
this.active_child = c;
|
break;
|
} else {
|
this.active_child = 0;
|
}
|
}
|
}
|
break;
|
} else {
|
this.active_menu = null;
|
}
|
}
|
this.$emit('selectMenu', this.active_menu);
|
bus.$emit('MenuName', menu_name);
|
},
|
|
/*点击菜单跳转*/
|
choseMenu(item) {
|
if (item != null) {
|
let path = item.path;
|
this.$router.push(path);
|
} else {
|
this.$router.push('/');
|
}
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.home-login .icon-tubiaozhizuomoban-{
|
color: #3a8ee6;
|
font-size: 28px;
|
}
|
.menu-item-icon.icon.iconfont{
|
font-size: 20px;
|
}
|
.menu-item .item-box{
|
display: flex;
|
}
|
</style>
|
