web/packages/components/Navbar/index.vue

<template>
  <div class="navbar-group">
    <div class="logo">
      <img :src="logo" alt="logo">
    </div>
    <div class="nav-group">
      <div
        class="nav-item"
        :class="nav.class"
        v-for="(nav, index) in navs"
        :key="index"
        @click="onSelectNav(nav)"
      >
        <template  v-if="nav.plugin">
          <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-popover:[nav.plugin]></navbar-item>
        </template>
        <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-else></navbar-item>
      </div>
      <el-popover
        popper-class="nav-popover"
        ref="navInfo"
        placement="bottom"
        trigger="hover"
        :visible-arrow="false"
      >
        <div class="user-info-group">
          <navbar-item :nav="{ icon: userInfo.avatar }" mode="vertical">
            <div class="info-group">
              <span v-if="userInfo.name">{{userInfo.name}}</span>
              <span v-if="userInfo.phone">{{userInfo.phone}}</span>
            </div>
          </navbar-item>
          <button @click="onClickOut">退出登录</button>
        </div>
      </el-popover>
      <el-popover
        popper-class="nav-popover"
        ref="navCustomer"
        placement="bottom"
        trigger="hover"
        :visible-arrow="false"
      >
        <div class="custom-info-group">
          <div class="info-item" v-if="hasExclusiveCustomer">
            <div class="after-tag-box recommend-tag">推荐</div>
            <navbar-item :nav="{ label: '专属客服：' + exclusiveCustomerInfo.name, icon: 'icon-weixin_line' }"></navbar-item>
            <navbar-item
              class="qrcode-group"
              :nav="{
                label: '微信扫一扫',
                icon: exclusiveCustomerInfo.qrcode
              }"
              mode="vertical"
            >
            </navbar-item>
          </div>
          <div class="info-item">
            <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
          </div>
          <div class="info-item">
            <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import NavbarItem from './components/item'
import { mapActions, mapGetters, mapState } from 'vuex'
export default {
  name: 'header-navbar',
  components: {
    NavbarItem,
    [NavbarItem.name]: NavbarItem
  },
  created () {
    this.getPower()
    this.getUserSimpleInfo().then(() => {
      const userInfo = this.navs.find(v => v.plugin === 'navInfo')
      userInfo.label = this.userInfo.name || this.userInfo.phone
      userInfo.icon = this.userInfo.avatar
    })
    this.getMessageCount().then(() => {
      this.navs.find(v => v.label === '消息中心').badge = this.messageCount
    })
  },
  data () {
    return {
      home: 'https://jybx-webtest.jydev.jianyu360.com',
      logo: 'https://cdn-ali.jianyu360.com/images/swordfish/sf_01_new.png',
      navs: [
        {
          label: '前往官网',
          icon: 'icon-houtui'
        },
        {
          label: '消息中心',
          icon: 'icon-a-Property1gongzuozhuomianProperty2xiaoxizhongxinProperty3grey',
          badge: 0
          // plugin: 'navMessage'
        },
        {
          label: '客服',
          icon: 'icon-kefu_xian',
          svg: true,
          plugin: 'navCustomer'
        },
        {
          label: '',
          icon: 'https://www.jianyu360.cn/common-module/public/image/auto.png',
          plugin: 'navInfo',
          class: 'nav-user-info'
        }
      ]
    }
  },
  computed: {
    ...mapState('work-bench/navbar', [
      'messageCount'
    ]),
    ...mapGetters('work-bench/user', [
      'hasExclusiveCustomer',
      'exclusiveCustomerInfo',
      'userInfo'
    ])
  },
  methods: {
    ...mapActions('work-bench', [
      'getPower',
      'getUserSimpleInfo',
      'setSignOut',
      'getMessageCount'
    ]),
    onClickOut () {
      this.setSignOut()
      document.cookie = 'userid_secure=;expires=-1;path=/'
      this.goSiteHome()
    },
    onSelectNav (nav) {
      console.log(nav, 'xxx')
      switch (nav.label) {
        case '消息中心': {
          this.$router.push({
            name: 'page',
            query: {
              link: 'https://jybx-webtest.jydev.jianyu360.com/swordfish/frontPage/messageCenter/sess/index'
            }
          })
          break
        }
        case '前往官网': {
          this.goSiteHome()
          break
        }
      }
    },
    goSiteHome () {
      location.href = this.home
    }
  }
}
</script>
<style lang="scss">
.flex-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-popover {
  &.el-popper[x-placement^=bottom] {
    margin-top: 20px;
  }
  padding: 0;
  border: none;
  background: #FFFFFF;
  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1000), 0px 8px 10px 1px rgba(0,0,0,0.0600), 0px 3px 14px 2px rgba(0,0,0,0.0500);
  border-radius: 8px;
  overflow: hidden;
}
.custom-info-group {
  min-width: 229px;
  .info-item {
    position: relative;
    padding: 12px 16px;
    .after-tag-box {
      position: absolute;
      right: 0;
      top: 16px;
    }
    .qrcode-group {
      padding-bottom: 4px;
      .img-icon {
        width: 90px;
        height: 90px;
        margin-right: 0;
      }
      span {
        margin-left: 0;
      }
    }
    span {
      margin-left: 4px;
      font-size: 14px;
      color: #686868;
      line-height: 22px;
    }
    & + .info-item {
      border-top: 1px solid #ECECEC;
    }
  }
}
.user-info-group {
  width: 150px;
  padding-top: 18px;
  .info-group {
    width: 100%;
    @extend .flex-vertical;
    padding: 0 16px 8px 18px;
    box-sizing: border-box;
    span {
      width: 100%;
      text-align: center;
      display: inline-block;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
  }
  button {
    width: 100%;
    height: 34px;
    background: #F5F6F7;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #686868;
    cursor: pointer;
  }
}
.recommend-tag {
  position: relative;
  @extend .flex-horizontal;
  display: inline-flex;
  height: 20px;
  padding-left: 16px;
  padding-right: 8px;
  background: linear-gradient(136deg, #FF9F40 0%, #FF3A20 100%);
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
  &::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -8px;
    background: #fff;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    border-radius: 2px;
  }
}
</style>
<style scoped lang="scss">
.flex-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.navbar-group {
  position: relative;
  z-index: 2;
  @extend .flex-horizontal;
  justify-content: space-between;
  padding: 16px 36px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.0800);

  .nav-user-info {
    ::v-deep .navbar-item--label {
      max-width: 118px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
  }

  .logo {
    display: inline-block;
    width: auto;
    height: 32px;
    img {
      height: 100%;
    }
  }

  .nav-group {
    @extend .flex-horizontal;
    font-size: 16px;
    font-weight: 400;
    color: #1D1D1D;
    line-height: 24px;
    .nav-item {
      height: 32px;
    }
    .nav-item + .nav-item {
      margin-left: 48px;
    }
  }
}
</style>