【制作侧部导航栏，并添加消息提示】

整体：

提示：这里简述项目相关背景：

<template>
  <el-aside width="auto" :class="isCollapse?'menu-collapsed':'menu-expanded'">
  顶部头像/图片
  导航栏
  </el-aside>
</template>

---

顶部图片/头像：

提示：放置两个大小不同的图片，展开侧部导航栏时切换成大图片展示，否则显示小的，绑定changeCollapse点击事件

<div class="manager_name">
  <img v-if="!isCollapse" src="@/assets/images/130x52.png" class="home_img" @click="changeCollapse"/>
  <img v-else src="@/assets/images/52x52.png" style="width: 36px; height: 36px" class="home_img" @click="changeCollapse"/>
</div>

return中定义  isCollapse: false,
...
changeCollapse() {
      this.isCollapse = !this.isCollapse;
    },

---

导航栏部分：

提示：

<!--导航菜单-->
    <el-menu background-color="#304156"
             text-color="rgb(230, 230, 230)"
             active-text-color="rgb(64, 158, 255)"
             :default-active="activeIndex" unique-opened @select="handleSelect" router 	:collapse="isCollapse">
      <template v-for="item of $router.options.routes" v-if="!item.meta.hidden && (item.meta.accessType&userType)>0">
        <el-submenu :index="item.name" v-if="item.children">
          <template slot="title">
            <i :class="item.iconCls"/>
            {{ item.name }}
             </template>
          <el-menu-item v-for="child of item.children" :index="child.path" :key="child.path" :route="child"
                        v-if="!child.meta.hidden && (child.meta.accessType&userType)>0">
            {{ child.name }}
            </el-menu-item>
        </el-submenu>

---

添加提示功能

在return中定义变量等

return{
 isCollapse: false,
      activeIndex: '',
      userType: 0,
      lastReqTime: new Date(),
      msgCount: {}
      }

提示：
1.给下拉框（一级）右上角添加红色消息提示（统计管理、设备管理、个人中心）
2.没有消息时不显示红点is-dot
msgCount:消息数量
abnormalOrderCount：“异常订单”字段
item：[统计管理、设备管理、商品管理、账户管理、扶贫服务、消息管理、个人中心]
v-if=“msgCount.abnormalOrderCount>0&&item.name==‘统计管理’”：如果异常订单数大于0，且一级下拉列表为统计管理，则显示消息提示红点

<el-badge is-dot class="badge_first" v-if="msgCount.abnormalOrderCount>0&&item.name=='统计管理'"></el-badge>
<el-badge is-dot class="badge_first" v-if="(msgCount.faultDeviceCount>0||msgCount.offlineDeviceCount>0)&&item.name=='设备管理'"></el-badge>
<el-badge is-dot class="badge_first" v-if="msgCount.withdrawAccountApplyCount>0&&item.name=='个人中心'"></el-badge>

1.给二级添加带数字加的红色消息提示（统计管理【订单统计】、设备管理【设备列表、设备故障】、个人中心【商户资金】）

<el-badge class="badge_second" :value="msgCount.abnormalOrderCount" :max="99"
                      v-if="msgCount.abnormalOrderCount>0&&child.name=='订单统计'">
            </el-badge>
            <el-badge class="badge_second" :value="msgCount.faultDeviceCount" :max="99"
                      v-if="msgCount.faultDeviceCount>0&&child.name=='设备故障'">
            </el-badge>
            <el-badge class="badge_second" :value="msgCount.offlineDeviceCount" :max="99"
                      v-if="msgCount.offlineDeviceCount>0&&child.name=='设备列表'">
            </el-badge>
            <el-badge class="badge_second" :value="msgCount.withdrawAccountApplyCount" :max="99"
                      v-if="msgCount.withdrawAccountApplyCount>0&&child.name=='商户资金'">
            </el-badge>

methods{
 handleSelect: function (index) {
      this.activeIndex = index;
    },
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
    },
     getNewMsgOnce() {
      this.lastReqTime = new Date();
      const that = this;
      this.get('franchiseeMessages/statistics').then((res) => {
        console.log(res)
        if (res.errorCode == 0) {
          that.msgCount = res.data;
        } else {
          that.$message.error(res.message);
        }
      });
    },
    getNewMsg() {
      const seconds = ((new Date()) - this.lastReqTime) / 1000;
      if (seconds < 120) {
        return false;
      }
      this.getNewMsgOnce();
    },

mounted() {
    this.getNewMsgOnce();
    EventBus.$on('getNewMsg', () => {
      this.getNewMsgOnce();
    });
 }