hi-ucs/front/src/views/home/components/header.vue

<template>
  <div
    class="home-header"
    :class="[
      select !== 'home' || scrollTop > 500 ? 'white' : '',
      props.showView === 'algorithm-details' ? 'blue' : '',
    ]"
  >
    <div class="name">城市云脑能力管理中心</div>
    <div
      v-for="item in navList"
      :key="item.key"
      @click="jumpPage(item)"
      class="nav"
      :class="item.key == select ? 'select' : ''"
    >
      {{ item.name }}
    </div>
    <a-badge :count="sgcNum">
      <svg
        t="1650455446850"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2069"
        width="0.4rem"
        height="0.4rem"
        @click="goToSgc"
      >
        <path
          d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z"
          :fill="props.showView === 'algorithm-details' ? '#fff' : '#1296db'"
          p-id="2070"
        ></path>
      </svg>
      <!-- <a-avatar shape="square" size="large" /> -->
    </a-badge>
    <a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
      <svg
        t="1654051054113"
        class="icon2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2187"
        width="0.35rem"
        height="0.35rem"
      >
        <path
          d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z"
          :fill="props.showView === 'algorithm-details' ? '#fff' : '#1296db'"
          p-id="2188"
        ></path>
      </svg>
      <!-- <a-avatar shape="square" size="large" /> -->
    </a-badge>
    <div class="mynotice" v-show="mynoticeFlag">
      <a-list item-layout="horizontal" :data-source="mynoticeData">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta description="">
              <template #title>
                <a-tooltip placement="left">
                  <template #title>{{ item.content }}</template>
                  <a>{{ item.title }}</a>
                </a-tooltip>
                <a-button type="primary" ghost @click="read(item)">
                  设为已读
                </a-button>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="info">
      <i class="img"></i>
      <a-tooltip placement="bottom">
        <template #title>
          <span>{{ user.username }}</span>
        </template>
        <span class="name">{{ user.username }}</span>
      </a-tooltip>
      <span @click="logout" class="out">退出</span>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
  import { recordRoute } from '@/config'
  import { useRoute, useRouter } from 'vue-router'
  import { getUser, mynotice, mynoticeRead } from '@/api/home'
  import { useStore } from 'vuex'
  import { getSgcTotal } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  const store = useStore()
  const router = useRouter()
  const route = useRoute()
  const navList = ref([
    { name: '共享门户', key: 'home' },
    { name: '能力集市', key: 'DetailsPageconetent' },
    { name: '能力统计', key: 'abilityStatistics' },
    { name: '开发指南', key: 'developmentGuide' },
    { name: '需求中心', key: 'demandCenter' },
    { name: '个人中心', key: 'personalCenter' },
    { name: '后台管理', key: 'houtaiguanli' },
  ])
  const user = ref({})
  const select = ref(router.currentRoute.value.name)
  const mynoticeFlag = ref(false)
  const mynoticeData = ref([])
  const props = defineProps({
    showView: { type: String, default: '' },
  })
  // 获取用户信息
  getUser().then((res) => {
    user.value = res.data.data
    console.log('user===============>', user.value)
  })
  // 退出登录
  const logout = async () => {
    await store.dispatch('user/logout')
    window.sessionStorage.setItem('visits', JSON.stringify([]))
    if (recordRoute) {
      const fullPath = route.fullPath
      router.push(`/login?redirect=${fullPath}`)
    } else {
      router.push('/login')
    }
  }
  // 跳转页面
  const jumpPage = (item) => {
    console.log(item)
    select.value = item.key
    switch (item.name) {
      case '个人中心':
        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
        router.push({
          path: '/personalCenter',
        })
        break
      case '能力统计':
        router.push({
          path: '/abilityStatistics',
        })
        break
      case '能力集市':
        router.push({
          path: '/DetailsPageconetent',
          query: {
            select: '',
          },
        })
        break
      case '开发指南':
        router.push({
          path: '/developmentGuide',
        })
        break
      case '需求中心':
        router.push({
          path: '/demandCenter',
        })
        break
      case '后台管理':
        window.open(window.SITE_CONFIG.backUrl + '/#/bscatalogue-bscatalogue')
        window.reload('http://15.2.21.238:9797')
        break
      default:
        router.push('/home')
        break
    }
  }
  const scrollTop = ref(0)
  window.onscroll = function () {
    //为了保证兼容性，这里取两个值，哪个有值取哪一个
    //scrollTop就是触发滚轮事件时滚轮的高度
    scrollTop.value =
      document.documentElement.scrollTop || document.body.scrollTop
    // console.log('滚动距离' + scrollTop.value)
  }
  mybus.on('getSgcNum', () => {
    getSgcTotal().then((res) => {
      sgcNum.value = res.data.data.count
      console.log('申购车总数========================>', res.data.data.count)
    })
  })

  const sgcNum = ref(0)
  const goToSgc = () => {
    window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
    router.push('/personalCenter')
  }
  onBeforeUnmount(() => {
    console.log('卸载getSgcNum========================>')
    mybus.off('getSgcNum')
  })
  const mynoticeNum = ref(0)
  // 我的消息
  const getMynotice = () => {
    mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
      console.log('我的消息', res.data.data)
      mynoticeNum.value = res.data.data.total
      mynoticeData.value = res.data.data.list
    })
  }
  const read = (item) => {
    mynoticeRead(item.id).then((res) => {
      console.log('已读', res)
      getMynotice()
    })
  }
  onMounted(() => {
    getSgcTotal().then((res) => {
      console.log('初始化========================>', res.data.data.count)
      sgcNum.value = res.data.data.count
    })
    getMynotice()
    const mynoticeDom = document.querySelector('.icon2')
    const mynotice = document.querySelector('.mynotice')
    if (mynoticeDom) {
      mynoticeDom.addEventListener('mouseover', () => {
        mynoticeFlag.value = true
        document.documentElement.style.overflow = 'hidden'
      })
      mynoticeDom.addEventListener('mouseout', () => {
        mynoticeFlag.value = false
        document.documentElement.style.overflow = 'scroll'
      })
    }
    if (mynotice) {
      mynotice.addEventListener('mouseover', () => {
        mynoticeFlag.value = true
        document.documentElement.style.overflow = 'hidden'
      })
      mynotice.addEventListener('mouseout', () => {
        mynoticeFlag.value = false
        document.documentElement.style.overflow = 'scroll'
      })
    }
    mybus.on('getSgcNum', () => {
      getSgcTotal().then((res) => {
        sgcNum.value = res.data.data.count
        console.log('申购车总数========================>', res.data.data.count)
      })
    })
  })
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'header-typeface';
    src: url('~@/assets/newHome/font/header-typeface.ttf');
  }
  .home-header {
    height: 0.64rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.9rem;
    background-color: rgba(0, 0, 25, 0.7);
    position: fixed;
    z-index: 1000;
    top: 0;
    div {
      color: #fff;
      font-size: 0.16rem;
    }
    .name {
      font-size: 0.22rem;
      font-family: header-typeface;
      margin-right: 0.2rem;
    }
    .nav {
      width: 1.2rem;
      height: 0.64rem;
      line-height: 0.64rem;
      text-align: center;
    }
    .nav:hover {
      background: #0058e1;
      color: #fff;
      cursor: pointer;
    }
    .select {
      background: #0058e1;
      color: #fff !important;
    }
    .info {
      width: 2rem;
      margin-left: 0.2rem;
      display: flex;
      justify-content: center;
      .img {
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 0.1rem;
        background: url('~@/assets/newHome/user.png') no-repeat;
        background-size: 100%;
      }
      span {
        height: 0.3rem;
        line-height: 0.3rem;
        margin-left: 0.08rem;
        margin-right: 0.06rem;
        font-size: 0.16rem;
      }
      .name {
        max-width: 0.75rem;
        overflow: hidden;
      }
      .out {
        cursor: pointer;
        padding: 0 0.16rem;
        border-left: 0.01rem solid #666;
      }
    }
  }
  .white {
    background-color: #fff;
    .name {
      color: #0058e1;
    }
    .nav {
      color: #000;
    }
    .info {
      span {
        color: #000;
      }
    }
  }
  .blue {
    position: absolute;
    background: linear-gradient(
      to right,
      rgba(15, 90, 253, 0.8),
      rgba(36, 25, 248, 0.8)
    );
    .name {
      color: #fff;
    }
    .nav {
      color: #fff;
    }
    .nav:hover {
      background: #fff;
      color: #0058e1;
    }
    .info {
      span {
        color: #fff;
      }
    }
  }
  .mynotice {
    width: 2.5rem;
    height: 3rem;
    background: #eee;
    border-radius: 0.05rem;
    position: absolute;
    top: 0.45rem;
    right: 3.1rem;
    overflow-y: scroll;
  }
  .mynotice::-webkit-scrollbar {
    display: none;
  }
  :deep(.ant-list-item) {
    border-bottom: 0.01rem solid #ccc;
  }
  :deep(.ant-list-item-meta-title) {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 0.05rem;
    a {
      width: 1.5rem;
      // 超出显示...
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    button {
      width: 0.7rem;
      height: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 0.1rem;
      }
    }
  }
</style>
<style>
  html::-webkit-scrollbar {
    display: none;
  }
</style>