transportation-archives/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <div class="right-menu">
      <!-- 主题切换 -->
      <el-dropdown trigger="click">
        <div class="message-icon cart-main" style="cursor: pointer;">
          <span class="iconfont icon-zhuti" />
        </div>
        <el-dropdown-menu slot="dropdown" class="message-dropdown">
          <el-dropdown-item @click.native="changetheme('light')">
            浅色主题
            <i class="el-icon-check" :style="{display: themeValue === 'light'?'':'none'}" />
          </el-dropdown-item>
          <el-dropdown-item @click.native="changetheme('dark')">
            深色主题
            <i class="el-icon-check" :style="{display: themeValue === 'dark'?'':'none'}" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 借阅车 -->
      <router-link :to="{ path: '/user/cart'}">
        <!-- 借阅车 -小红点数量 -->
        <div class="message-icon cart-main">
          <span class="iconfont icon-jieyueche-ding" />
          <i v-if="cartCount.length > 0" class="message-num">{{ cartCount.length }}</i>
        </div>
      </router-link>
      <!-- 消息中心 -->
      <el-dropdown ref="messageDrop" class="message-center right-menu-item hover-effect" trigger="click">
        <!-- 消息中心 -小红点数量 -->
        <div class="message-icon" style="margin: 0 15px;">
          <span class="iconfont icon-xiaoxi" />
          <i v-if="messageAll.length > 0" class="message-num">{{ messageAll.length }}</i>
        </div>
        <el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px; padding: 17px 0 0 0;">
          <div style="display: flex; justify-content: space-between; padding: 0 20px; height: 40px; line-height: 40px; color: #A6ADB6; font-size: 14px; border-bottom: 1px solid #E6E8ED;">
            <h3 style="font-size: 16px; color: #0C0E1E;">消息</h3>
            <span style="cursor: pointer;" @click="handleAllRead">全部标记为已读</span>
          </div>
          <div style="max-height: 450px; overflow: hidden; padding: 10px 0; overflow-y: scroll;">
            <el-dropdown-item v-if="messageAll.length===0" class="message-list-item">
              <div style="text-align:center">暂无最新消息</div>
            </el-dropdown-item>
            <!-- 消息中心 - 列表 -->
            <el-dropdown-item v-for="(item,index) in messageAll" :key="index" class="message-list-item" style="padding: 0 14px;">
              <div class="messsage-item" @click="toMessage(item)">
                <span :class="setIconClass(item)" />
                <div class="message-top-cont">
                  <h4>{{ setNoticeTitle(item) }}</h4>
                  <p>{{ item.noticeContext }}</p>
                  <span>{{ item.createTime | parseTime }}</span>
                </div>
              </div>
            </el-dropdown-item>
            <div v-if="messageAll.length!==0" class="all-message-btn" @click="toAllMessage">查看全部<i class="iconfont icon-chakan" /></div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <div class="user-img-cover">
            <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg">
          </div>
          <div class="user-name">{{ user.username }}</div>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link :to="{ path: '/user/center', query: { activeIndex: 0 }}">
            <el-dropdown-item>
              个人中心
            </el-dropdown-item>
          </router-link>
          <router-link :to="{ path: '/user/center', query: { activeIndex: 1 }}">
            <el-dropdown-item>
              我的消息
            </el-dropdown-item>
          </router-link>
          <span style="display:block;" @click="open">
            <el-dropdown-item>
              退出登录
            </el-dropdown-item>
          </span>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from '@/layout/components/Sidebar/Logo'
import Avatar from '@/assets/images/avatar.png'
import { FetchReadedAll } from '@/api/system/new'
import store from '@/store'

export default {
  inject: ['reload'],
  components: {
    Logo
  },
  data() {
    return {
      Avatar: Avatar,
      defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
      themeValue: localStorage.getItem('themeValue') ? localStorage.getItem('themeValue') : 'light'
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'device',
      'user',
      'baseApi',
      'cartCount',
      'messageAll'
    ]),
    show: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  created() {
    // store.dispatch('initborrowCar').then(() => {})
    store.dispatch('initMySystemNotice').then(() => { })
    if (!localStorage.getItem('themeValue')) {
      this.changetheme('light')
    } else {
      this.changetheme(localStorage.getItem('themeValue'))
    }
  },
  methods: {
    setIconClass(item) {
      if (item.noticeType === 1) {
        return 'message-type-title type-title1'
      } else if (item.noticeType === 2) {
        return 'message-type-title type-title2'
      } else if (item.noticeType === 3) {
        return 'message-type-title type-title3'
      } else if (item.noticeType === 4) {
        if (item.noticeContext.includes('到期')) {
          return 'message-type-title type-title5'
        } else if (item.noticeContext.includes('逾期')) {
          return 'message-type-title type-title4'
        }
      }
    },
    setNoticeTitle(item) {
      switch (item.noticeType) {
        case 1 :
          return '系统通知'
        case 2 :
          return '有流程达到'
        case 3:
          return '流程完成提醒'
        case 4:
          if (item.noticeContext.includes('到期')) {
            return '赋权到期提醒'
          } else if (item.noticeContext.includes('逾期')) {
            return '赋权逾期提醒'
          }
          return '赋权提醒'
      }
    },
    // 全部已读
    async handleAllRead() {
      if (this.messageAll.length === 0) {
        this.$message({ message: '暂无需要处理得未读消息', type: 'error', offset: 8 })
      } else {
        const params = {
          'newsType': null
        }
        FetchReadedAll(params).then(res => {
          if (res) {
            store.dispatch('initMySystemNotice').then(() => {})
            if (this.$route.path.includes('user/center') || this.$route.path.includes('system/notifyManage')) {
              this.reload()
            }
          }
        })
      }
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    toMessage(item) {
      this.$router.push({ path: '/user/center', query: { activeIndex: 1, noticeType: item.noticeType }})
      this.reload()
    },
    toAllMessage() {
      this.$router.push({ path: '/user/center', query: { activeIndex: 1, noticeType: 1 }})
      this.reload()
      this.$refs.messageDrop.hide()
    },
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()
        localStorage.clear()
      })
    },
    handleClose(done) {
      done()
    },
    changetheme(theme) {
      this.themeValue = theme
      window.document.documentElement.setAttribute('data-theme', theme)
      localStorage.setItem('themeValue', theme)
    }

  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: $headerHeight;
  overflow: hidden;
  position: relative;
  @include shadow-set;
  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    display: flex;
    line-height: 64px;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
      &.hover-effect {
        cursor: pointer;
        transition: background .3s;
        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
    .message-center{
      margin-right: 40px;

    }

    .message-icon{
      position: relative;
      .icon-xiaoxi{
        font-size: 20px;
        @include icon_color;
      }
      .message-num{
        position: absolute;
        top: 12px;
        right: -8px;
        display: block;
        width: 20px;
        height: 20px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        background-color: #F91832;
        color: #fff;
      }
    }

    .avatar-container {
      margin-right: 40px;
      .avatar-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        @include icon_color;
        .user-img-cover{
          width: 24px;
          height: 24px;
        }
        .user-avatar {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          // border: 1px solid red;
          cursor: pointer;
        }
        .user-name{
          margin: 0 37px 0 8px;
          flex: 1;
          font-size: 14px;
        }
        .el-icon-caret-bottom {
          cursor: pointer;
          font-size: 14px;
        }
      }
    }
  }
}
.cart-main{
  cursor: pointer;
  span{
    display: block;
    padding: 0 15px;
  }
  & :hover{
    background-color: rgba(249,249,249,1);
  }
  & .message-num{
    right: 6px !important;
  }
}
.icon-jieyueche-ding{
  font-size: 20px;
  @include icon_color;
}
.icon-zhuti{
  font-size: 22px;
  @include icon_color;
}
::v-deep .el-dropdown-menu__item.is-active {
  color: #409EFF;
  background-color: red;
}

.message-type-title{
  width: 32px;
  height: auto;
  margin-right: 12px;
  margin-bottom: 0;
  &.type-title1{
    background-size: 33px 33px;
  }
  &.type-title2{
    background-size: 33px 33px;
  }
  &.type-title3{
    background-size: 33px 33px;
  }
  &.type-title4{
    background-size: 33px 33px;
  }
  &.type-title5{
    background-size: 33px 33px;
  }
}
.message-top-cont{
  position: relative;
  color: #A6ADB6;
  flex: 1;
  font-size: 12px;
  & h4{
    color: #545B65;
    font-size: 14px;
  }
  & span{
    position: absolute;
    right: 0;
    top: 0;
  }
}

.all-message-btn{
  font-size: 14px;
  color: #545B65;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #E6E8ED;
  margin-top: 12px;
  cursor: pointer;
  i{
    font-size: 12px;
    padding-left: 10px;
    color: #888D94;
  }
}
</style>