web/packages/work-bench-frame/packages/components/Navbar/index.vue

<template>
  <div class="navbar-group">
    <div class="logo">
      <img :src="logo" alt="logo" @click="goSiteHome">
    </div>
    <div class="navbar-content-group">
      <!--   头部搜索模块   -->
      <navbar-search class="search-module"></navbar-search>
      <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>
        <!--    提供自定义用户信息插槽    -->
        <slot name="nav-user-info" v-bind:info="userInfo"></slot>
        <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>

  </div>
</template>

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

export default {
  name: 'header-navbar',
  components: {
    NavbarSearch,
    [NavbarItem.name]: NavbarItem,
    [NavbarSearch.name]: NavbarSearch,
    [EmptyTip.name]: EmptyTip
  },
  data () {
    return {
      home: process.env.VUE_APP_BASE_SITE,
      logo: process.env.VUE_APP_BASE_LOGO,
      navs: [
        {
          label: '前往官网',
          icon: 'icon-houtui'
        },
        {
          label: '消息中心',
          icon: 'icon-a-Property1gongzuozhuomianProperty2xiaoxizhongxinProperty3grey',
          badge: 0,
          plugin: 'navMessage'
        },
        {
          label: '客服',
          icon: 'icon-kefu_xian',
          svg: true,
          plugin: 'navCustomer'
        }
      ]
    }
  },
  computed: {
    ...mapState('work-bench/navbar', [
      'messageCount'
    ]),
    ...mapGetters('work-bench/user', [
      'hasExclusiveCustomer',
      'exclusiveCustomerInfo',
      'userInfo'
    ]),
    ...mapGetters('work-bench/navbar', [
      'messageList'
    ]),
    // 获取是否启用自定义顶部导航用户信息自定义
    ...mapGetters('work-bench', [
      'useCustomStatus'
    ])
  },
  created () {
    // 判断是否配置启用自定义用户信息模块，提供默认配置
    if (!this.useCustomStatus?.['nav-user-info']) {
      this.navs.push({
        label: '',
        icon: 'https://www.jianyu360.cn/common-module/public/image/auto.png',
        plugin: 'navInfo',
        class: 'nav-user-info'
      })
    }
    /**
     *
     * TODO 获取用户数据、消息数据 待优化至应用层处理
     */
    this.getPower()
    this.getUserSimpleInfo().then(() => {
      const userInfo = this.navs.find(v => v.plugin === 'navInfo')
      if (userInfo) {
        userInfo.label = this.userInfo.name || this.userInfo.phone
        userInfo.icon = this.userInfo.avatar
      }
    })
    this.getMessageInfo()
  },
  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: debounce(async function (message) {
      await 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
        })
        await 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
          })
        })
      }
    }, 300),
    /**
     * 关闭消息中心
     */
    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-width: 100%;
    max-height: 263px;
    overflow-y: scroll;
  }

  .message-item {
    @extend .flex-horizontal;
    align-items: flex-start;
    width: 100%;
    max-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 {
    width: 316px;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: column;

    &--header {
      @extend .flex-horizontal;
      width: 100%;
      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 {
      flex-shrink: 0;
      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: 50;
  @extend .flex-horizontal;
  justify-content: space-between;
  min-height: 64px;
  min-width: 800px;
  padding: 0 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;
    cursor: pointer;

    img {
      height: 100%;
    }
  }

  .navbar-content-group {
    @extend .flex-horizontal;
    flex: 1;
    justify-content: space-between;

    .search-module {
      margin-left: 82px;
      margin-right: 16px;
      flex: 1;
      max-width: 440px;
    }
  }

  .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>