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="nav-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="nav-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" @click="onClickCustomer('在线咨询')">
            <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
          </div>
          <div class="info-item" @click="onClickCustomer('客服热线')">
            <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
          </div>
        </div>
      </el-popover>
      <el-popover
        popper-class="nav-popover"
        ref="navMessage"
        placement="bottom"
        trigger="hover"
        :visible-arrow="false"
      >
        <div class="nav-message-group">
          <div class="message-header">
            <div class="title">
              消息中心 <span>（<span class="highlight-text">{{messageCount}}</span> 条未读）</span>
            </div>
            <JyIcon @click="closeMessagePopover" name="close"></JyIcon>
          </div>
          <div class="message-group" v-if="messageList.length">
            <div
              v-for="(message, index) in messageList"
              :key="index"
              class="message-item"
              @click="onClickMessage(message)"
            >
              <el-badge :isDot="!message.read" class="message-icon">
                <img :src="message.icon" alt="icon">
              </el-badge>
              <div class="message-content">
                <div class="message-content--header">
                  <div class="message-content--title ellipsis">
                    {{message.title}}
                  </div>
                  <div class="message-content--time">
                    {{message.time}}
                  </div>
                </div>
                <div class="message-content--content">
                  {{message.content}}
                </div>
              </div>
            </div>
          </div>
          <empty-tip v-else tip="暂未接收到信息"></empty-tip>
          <button @click="onClickMessageAll">查看全部</button>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import NavbarItem from './components/item'
import { mapActions, mapGetters, mapState } from 'vuex'
import EmptyTip from '../Empty'

export default {
  name: 'header-navbar',
  components: {
    [NavbarItem.name]: NavbarItem,
    [EmptyTip.name]: EmptyTip
  },
  created () {
    /**
     *
     * TODO 获取用户数据、消息数据 待优化至应用层处理
     */
    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.getMessageInfo()
  },
  data () {
    return {
      home: process.env.VUE_APP_BASE_SITE,
      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'
    ]),
    ...mapGetters('work-bench/navbar', [
      'messageList'
    ]),
  },
  methods: {
    ...mapActions('work-bench', [
      'getPower',
      'getUserSimpleInfo',
      'setSignOut',
      'getMessageCount',
      'getMessages',
      'setClickMessage',
      'setReadMessage'
    ]),
    /**
     * 获取消息数据
     */
    getMessageInfo () {
      this.getMessageCount().then(() => {
        this.navs.find(v => v.label === '消息中心').badge = this.messageCount
        /**
         * 对外提供未读消息条数更新事件
         */
        this.$BRACE.$emit('update-message-count', this.messageCount)
      })
      this.getMessages()
    },
    /**
     * 点击退出登录
     */
    onClickOut () {
      this.setSignOut()
    },
    /**
     * 点击选中导航 Item
     */
    onSelectNav (nav) {
      switch (nav.label) {
        case '消息中心': {
          this.goSiteMessage()
          break
        }
        case '前往官网': {
          this.goSiteHome()
          break
        }
      }
    },
    /**
     * 前往消息中心页面
     */
    goSiteMessage () {
      this.$BRACE.$emit({
        fKey: 'goSiteMessage',
        spareFn: (link) => this.$BRACE.methods.open({
          route: { link }
        })
      }, '/swordfish/frontPage/messageCenter/sess/index')
    },
    /**
     * 前往官网首页
     */
    goSiteHome () {
      this.$BRACE.$emit({
        fKey: 'goSiteHome',
        spareFn: (link) => this.$BRACE.methods.open({
          route: { link }
        })
      }, this.home)
    },
    /**
     * 关闭消息中心 popover
     */
    closeMessagePopover () {
      this.$refs.navMessage.doClose()
    },
    /**
     * 点击消息 Item, 设置已读、打开消息详情
     * @param message
     */
    onClickMessage (message) {
      this.setClickMessage({
        id: message.origin.msgLogId
      })
      if (message.read) {
        if (message.link) {
          location.href = message.link
        }
      } else {
        /**
         * 对外提供消息更新事件
         */
        const params = {
          id: message.origin.id,
          type: message.origin.msg_type
        }
        this.$BRACE.$emit('read-message', {
          type: 'start',
          params
        })
        this.setReadMessage(params).then(() => {
          this.$BRACE.$emit('read-message', {
            type: 'success',
            params
          })
          if (message.link) {
            location.href = message.link
          } else {
            this.getMessageInfo()
          }
        }).catch(e => {
          this.$BRACE.$emit('read-message', {
            type: 'error',
            params
          })
        })
      }
    },
    /**
     * 关闭消息中心
     */
    onClickMessageAll () {
      this.closeMessagePopover()
      this.onSelectNav({
        label: '消息中心'
      })
    },
    /**
     *  点击客服 Item
     * @param type - 类型
     */
    onClickCustomer (type) {
      this.$BRACE.$emit('click-nav-customer', type)
    }
  }
}
</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;
}
.nav-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;
        border-radius: unset;
        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;
    }
  }
}
.nav-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;
  }
}
.nav-message-group {
  width: 400px;
  .message-header {
    @extend .flex-horizontal;
    padding: 16px 24px;
    font-size: 16px;
    color: #1D1D1D;
    line-height: 24px;
    box-shadow: inset 0px -1px 0px 1px rgba(0,0,0,0.0500);
    .title {
      flex: 1;
    }
    span {
      font-size: 14px;
      color: #686868;
      &.highlight-text {
        color: #2ABED1;
      }
    }
    .icon-close {
      font-size: 20px;
      cursor: pointer;
      color: #AAAAAA;
      &:hover {
        color: #2cb7ca;
      }
    }
  }
  .message-group {
    flex: 1;
    max-height: 263px;
    overflow-y: scroll;
  }
  .message-item {
    @extend .flex-horizontal;
    width: 100%;
    padding: 12px 24px;
    box-sizing: border-box;
    border-bottom: 1px solid #ECECEC;
    cursor: pointer;
    &:last-child {
      border-bottom: unset;
    }
    &:hover {
      background-color: #f5f6f7;
    }
  }
  .message-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    img {
      border-radius: 50%;
      overflow: hidden;
    }
    border: 1px solid rgba(0,0,0,0.0500);
    margin-right: 12px;
    .el-badge__content.is-fixed.is-dot {
      right: 8px;
      top: 2px;
    }
  }
  .message-content {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: column;
    &--header {
      @extend .flex-horizontal;
      flex: 1;
      justify-content: space-between;
    }
    &--content {
      margin-top: 4px;
      font-size: 13px;
      color: #686868;
      line-height: 20px;
    }
    &--title {
      font-size: 14px;
      color: #1D1D1D;
      line-height: 22px;
    }
    &--time {
      font-size: 12px;
      color: #999999;
      line-height: 18px;
    }
  }
  button {
    background-color: transparent;
    border-top: 1px solid #ECECEC;
    width: 100%;
    font-size: 16px;
    color: #1D1D1D;
    line-height: 56px;
    cursor: pointer;
    &:hover {
      color: #2ABED1FF;
    }
  }
}
.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>