有些导航是循环出来的，有些不是，因为有些是会员身份才显示，有很多判断，就分了循环和不循环
这样的：
image.png
image.png
image.png
image.png
image.png
完整代码
<template>
<div>
<div class="left-nav">
<div class="nav-wrapper1 g-pb-25">
<p class="seller-center">
<router-link to="home">
<em class="font_family icon-fuwuzhongxin g-c-88"></em>
<span class="g-fz-16 g-c-ff g-ml-10">卖家中心</span>
</router-link>
</p>
<!--销售管理-->
<div class="nav-box" v-if="isSpotVip">
<a class="nav-link picInfo g-of-h" @click="nav.closeSellNav = !nav.closeSellNav">
<span class="g-c-c1 g-f-l">销售管理</span>
<em :class="{ rotateServeIcon:!nav.closeSellNav }" class="font_family icon-down-line g-f-r g-c-88 g-fz-12"></em>
</a>
<div class="animate-nav" :class="{ autoHeight: nav.closeSellNav}">
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="orderManagement">订货单</router-link>
</div>
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="salesReport">销售报表</router-link>
</div>
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="tradingRuleSetting">交易规则设置</router-link>
</div>
</div>
</div>
<div class="nav-box" v-if="icbaoMember">
<a class="nav-link picInfo g-of-h" @click="nav.closeReleaseNav = !nav.closeReleaseNav">
<span class="g-c-c1 g-f-l">发布商品</span>
<em :class="{ rotateServeIcon:!nav.closeReleaseNav }"
class="font_family icon-down-line g-f-r g-c-88 g-fz-12"></em>
</a>
<div class="animate-nav" :class="{ autoHeight: nav.closeReleaseNav}">
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="singleUpload">单条发布</router-link>
</div>
<div v-if="companyType == 210" class="sub-nav">
<router-link class="g-c-88 sub-link" to="uploadStock">批量上传</router-link>
</div>
</div>
</div>
<div class="nav-box">
<a class="nav-link picInfo g-of-h" @click="nav.closeProMangeNav = !nav.closeProMangeNav">
<span class="g-c-c1 g-f-l">商品管理</span>
<em :class="{ rotateServeIcon:!nav.closeProMangeNav }" class="font_family icon-down-line g-f-r g-c-88 g-fz-12"></em>
</a>
<div class="animate-nav" :class="{ autoHeight: nav.closeProMangeNav}">
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="stock">商品库</router-link>
</div>
<div v-if="icbaoMember" class="sub-nav">
<router-link class="g-c-88 sub-link" to="batchAlter">批量修改</router-link>
</div>
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="uploadRecord">{{ uploadRecordTxt }}</router-link>
</div>
</div>
</div>
<div class="nav-box" v-for="(nav,index) in menuList" :key="index">
<a class="nav-link picInfo g-of-h" @click="showSubMenu(nav)">
<span class="g-c-c1 g-f-l">{{ nav.name }}</span>
<em :class="{ rotateIcon:nav.flag }" class="font_family icon-top-line g-f-r g-c-88 g-fz-12"></em>
</a>
<div class="animate-for-list" :class="{ autoHeight:nav.flag}" :style="{ maxHeight:nav.navHeight }">
<div class="sub-nav" v-for="(sub,index) in nav.sublist" :key="index">
<router-link class="g-c-88 sub-link" :to="{ name:sub.routerPath }">{{ sub.name }}</router-link>
</div>
</div>
</div>
</div>
<!--我的钱包-->
<div class="nav-wrapper2 g-pb-20">
<p style="padding-left: 13px;margin-top: 24px;"><em class="font_family icon-wodeqianbao g-c-88"></em><span
class="g-fz-16 g-c-ff g-ml-10">我的钱包</span></p>
<div class="nav-box g-mt-5">
<div class="sub-nav">
<router-link class="g-c-88 sub-link pl-link" to="balanceManagement">余额管理</router-link>
</div>
<div class="sub-nav">
<router-link class="g-c-88 sub-link pl-link" to="paymentsRecords">收支明细</router-link>
</div>
</div>
</div>
<!--应用服务-->
<div class="nav-wrapper3 g-pb-25">
<p style="padding-left: 13px;margin-top: 24px;"><em class="font_family icon-yingyongfuwu g-c-88"></em><span
class="g-fz-16 g-c-ff g-ml-10">应用服务</span></p>
<div class="nav-box">
<!-- 一键搬家-->
<div v-if="icbaoMember || isSpotVip">
<a class="nav-link picInfo g-of-h" @click="nav.closeServeNav = !nav.closeServeNav">
<span class="g-c-c1 g-f-l">一键搬家</span>
<em :class="{ rotateIcon:!nav.closeServeNav }" class="font_family icon-down-line g-f-r g-c-88 g-fz-12"></em>
</a>
<div class="animate-move-house" :class="{ autoHeight: nav.closeServeNav}">
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="proMoveHouse">建立搬家任务</router-link>
</div>
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="libraryOfGoods">搬家商品库</router-link>
</div>
<div class="sub-nav">
<router-link class="g-c-88 sub-link" to="moveRecord">搬家记录</router-link>
</div>
</div>
</div>
<div class="sub-nav" :class="{ mt5: !icbaoMember && !isSpotVip}">
<router-link class="g-c-c1 sub-link" to="signboard" style="padding-left: 36px;">招财宝</router-link>
</div>
</div>
</div>
<!--账号管理-->
<div class="nav-wrapper4 g-pb-10">
<p style="padding-left: 13px;margin-top: 24px;"><em class="font_family icon-maijiazhongxin g-c-88"></em><span
class="g-fz-16 g-c-ff g-ml-10">账号管理</span></p>
<div class="nav-box g-mt-5">
<div class="sub-nav">
<router-link class="g-c-88 sub-link pl-link" to="changeInfo">密码管理</router-link>
</div>
</div>
</div>
</div>
<div class="picBox">
<img src="@/assets/img/deal/jiaoyi.png" alt="">
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: "navBar",
computed: {
...mapState(['isSpotVip', 'icbaoMember', 'companyType']),
uploadRecordTxt() {
if (this.companyType == 210) {
return '批量发布记录'
} else {
return '发布记录'
}
}
},
data() {
return {
nav: {
closeSellNav: true,
closeReleaseNav: true,
closeProMangeNav: true,
closeServeNav: true,
},
menuList: [
{
name: '配单管理',
navHeight: '54px',
//用于状态判定
flag: true,
//二级菜单
sublist: [
{name: 'BOM订单', routerPath: 'bomOrder'},
{name: 'BOM数据统计', routerPath: 'bomDataStatistics'}
]
},
{
name: '我的店铺',
navHeight: '112px',
//用于状态判定
flag: true,
//二级菜单
sublist: [
{name: '基本信息', routerPath: 'basicSetting'},
{name: '公司资料', routerPath: 'companyInfo'},
{name: '联系方式', routerPath: 'contact'},
{name: '图片/广告', routerPath: 'uploadAmage'},
]
},
],
myWallet:['balanceManagement','paymentsRecords'],// 我的钱包导航
loopRouterArr: [
{
id: 0,
routerName:['bomOrder','bomDetail','quotePrice','quotationDetail','bomDataStatistics'],// 配单管理导航
},
{
id: 1,
routerName:['basicSetting','companyInfo','contact','uploadAmage','bindPhone'],// 我的店铺导航
},
],
routerArr: [
{
nav:'closeSellNav',
routerName:['orderManagement','orderDetail','salesReport','tradingRuleSetting'],// 销售管理导航
},
{
nav:'closeReleaseNav',
routerName:['singleUpload','uploadStock'],// 发布商品导航
},
{
nav:'closeProMangeNav',
routerName:['stock','batchAlter','uploadRecord'],// 商品管理导航
},
{
nav:'closeServeNav',
routerName:['proMoveHouse','libraryOfGoods','batchChangeInfo','moveRecord'],// 应用服务导航
}
]
}
},
mounted() {
this.init()
},
watch: {
'$route': {
immediate: true,
async handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.init()
}
}
},
},
methods: {
// 刷新页面，导航保持原有状态
init() {
let { name } = this.$route
// 没有循环的导航
this.initNav(name)
// 循环出来的导航
this.loopNavInit(name)
},
initNav(name) {
for (const i in this.routerArr) {
if (this.routerArr[i].routerName.includes(name)) {
this.nav[this.routerArr[i].nav] = false
}
}
},
loopNavInit(name) {
for (const i in this.loopRouterArr) {
if (this.loopRouterArr[i].routerName.includes(name)) {
this.menuList[this.loopRouterArr[i].id].flag = false
}
}
},
showSubMenu(list) {
list.flag = !list.flag
}
}
}
</script>
<style scoped>
/*左边导航*/
.left-nav {
width: 180px;
background-color: #272730;
padding-top: 30px;
}
.sub-nav {
width: 180px;
height: 28px;
line-height: 28px;
}
.sub-link:hover {
background-color: #373744;
border-left: 4px solid #373744;
}
.seller-center {
padding-left: 13px;
}
.seller-center:hover em {
color: #fff;
}
.mt5 {
margin-top: 5px;
}
.picInfo {
width: 180px;
padding-left: 40px;
height: 28px;
line-height: 28px;
margin-top: 5px;
padding-right: 15px;
}
.sub-link {
padding-left: 51px;
}
.pl-link {
padding-left: 35px;
}
.nav-link, .sub-link {
display: inline-block;
width: 180px;
height: 28px;
border-left: 4px solid #272730;
}
.nav-wrapper2, .nav-wrapper3, .nav-wrapper4 {
border-top: 1px solid #565656;
}
.animate-nav, .animate-move-house {
max-height: 84px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.animate-for-list {
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.autoHeight {
max-height: 0 !important;
opacity: 0 !important;
}
.icon-down-line, .icon-top-line {
transition: transform 0.5s;
}
.rotateIcon {
transform: rotate(180deg);
}
.rotateServeIcon {
transform: rotate(-180deg);
}
/*导航底部广告*/
.picBox {
width: 180px;
height: 120px;
margin-top: 10px;
}
.picBox img {
width: 180px;
height: 120px;
}
.router-link-active {
background-color: #373744;
border-left: 4px solid #e5242b;
}
.router-link-active:hover {
background-color: #373744;
border-left: 4px solid #e5242b;
}
</style>
网友评论