menduner/src/layout/company/navBar.vue

<template>
  <div>
    <v-toolbar class="banner font-size-14 pl-0" density="compact" style="height: 50px;">
      <div class="innerBox d-flex justify-space-between">
        <div class="nav-logo" @click="handleLogoClick">
          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" contain width="90" height="35"></v-img>
        </div>
        
        <div class="d-flex user-nav align-center">
          <!-- 企业logo、企业名称 -->
          <div class="d-flex align-center cursor-pointer px-4" :class="{'active-route': route.path.includes('/recruit/enterprise/entInfoSetting')}">
            <v-img @click="enterpriseClick(2)" rounded contain class="enterprise-logo" width="40" height="40" :src="baseInfo?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" ></v-img>
            <span @click="enterpriseClick(1)" class="ml-3">{{ formatName(baseInfo?.enterpriseAnotherName || baseInfo?.enterpriseName) }}</span>
            <div v-if="baseInfo?.vipFlag && Date.now() < baseInfo?.vipExpireDate" >
              <svg-icon name="vip" size="25" class="ml-2"></svg-icon>
            </div>
          </div>

          <v-chip class="ml-4 mr-8" label color="primary" size="small" variant="flat" @click="handleLogout(false)">我要求职</v-chip>

          <v-chip
            color="primary"
            class="cursor-pointer"
            label
            size="small"
            @click="router.push('/recruit/enterprise/tradingOrder?key=tab_recharge')"
            >
            剩余M豆
            <strong class="ml-3">{{ enterpriseUserAccount?.balance ? enterpriseUserAccount?.balance / 100 : 0 }}个</strong>
          </v-chip>

          <!-- 头像用户名 -->
          <div class="d-flex align-center mx-4" v-if="showBall">
            <v-menu open-on-hover>
              <template v-slot:activator="{ props }">
                <div 
                  class="d-flex align-center cursor-pointer px-4" 
                  v-bind="props" 
                  :class="{'active-route': route.path.includes('/recruit/enterprise/staffInfoSetting')}"
                  @click="router.push('/recruit/enterprise/staffInfoSetting')"
                >
                  <v-avatar>
                    <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-img>
                  </v-avatar>
                  <div class="ml-2">{{ formatName(baseInfo?.name ?? baseInfo?.phone) }}</div>
                </div>
              </template>

              <v-list>
                <v-list-item v-for="(item, index) in items" :key="index" @click="item.change">
                  <template v-slot:prepend>
                    <v-icon :icon="item.icon"></v-icon>
                  </template>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>

          <!-- 语言切换 -->
          <!-- <v-menu>
            <template v-slot:activator="{ props }">
              <v-btn
                class="ml-3"
                color="primary"
                size="small"
                icon="mdi-translate"
                v-bind="props"
              >
              </v-btn>
            </template>
            <v-list density="compact">
              <v-list-item
                v-for="item in localeStore.localeMap"
                :key="item.name"
                :value="item.lang"
                :active="localeStore.currentLocale.lang === item.lang"
                @click="handleChangeLocale(item)"
              >
                <v-list-item-title>{{ item.name }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu> -->

          <!-- 消息通知 -->
          <MessageNotification path="/recruit/enterprise/chatTools"></MessageNotification>
        </div>
      </div>
    </v-toolbar>
  </div>
</template>

<script setup>
defineOptions({ name: 'personal-navbar' })
import { ref, onMounted, computed } from 'vue'
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/user'; const userStore = useUserStore()
// import { useLocaleStore } from '@/store/locale'; const localeStore = useLocaleStore()
import { useRouter, useRoute } from 'vue-router'; const router = useRouter(); const route = useRoute()
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
import MessageNotification from '../message.vue'
import { getUserAvatar } from '@/utils/avatar'
import { formatName } from '@/utils/getText'
// import { logoutToken } from '@/api/common'

defineProps({
  sticky: {
    type: Boolean,
    default: true
  }
})

const showBall = ref(false)

const handleLogoClick = () => { window.open('/recruitHome') } // 点击logo

const enterpriseClick = (tabKey = 1) => {
  const path = '/recruit/enterprise/entInfoSetting'
  router.push({ path, query: { tabKey } })
}

// 退出登录、切换求职者
const handleLogout = async (exit = true) => {
  if (exit) await userStore.userLogout(2)
  router.push({ path: '/recruitHome' })
}

// 我要求职
// const handleRecruit = async () => {
//   // 没有登录个人的则直接清除企业缓存后跳转登录页
//   if (!getToken()) {
//     await userStore.userLogout(2)
//     router.push({ path: '/login' })
//     return
//   }

//   // 有登录个人账号时则清除企业登录缓存后跳转到求职者首页
// 	await logoutToken(getToken(1))
// 	const isChangeRole = localStorage.getItem('enterpriseId')
// 	if (isChangeRole) {
// 		const perAccountData = JSON.parse(localStorage.getItem('perAccountInfo'))
// 		localStorage.setItem('accountInfo', JSON.stringify(perAccountData))
// 	} else localStorage.removeItem('accountInfo')
	
// 	// 清除企业相关缓存信息
// 	const enterpriseLocalStorage = ['ENT_REFRESH_TOKEN', 'ENT_ACCESS_TOKEN', 'entBaseInfo', 'isAdmin', 'enterpriseUserAccount', 'entUpdatePassword', 'emailLoginInfo', 'enterpriseStore', 'enterpriseId']
// 	enterpriseLocalStorage.forEach(e => localStorage.removeItem(e))

// 	router.push('/')
// }

const menuList = ref([
  { title: t('setting.editPassword'), icon: 'mdi-shield-lock-open-outline', key: 'editPassword', change: () => router.push({ path: '/recruit/enterprise/staffChangePassword' }) },
  { title: t('setting.logOut'), icon: 'mdi-logout', change: handleLogout }
])
const items = computed(() => {
  return menuList.value.filter(item => !item.hidden)
})

onMounted(() => {
  if (getToken(1)) {
    showBall.value = true
  }
})

// 企业logo、用户基本信息
let baseInfo = ref(JSON.parse(localStorage.getItem('entBaseInfo')) || {})
let enterpriseUserAccount = ref(JSON.parse(localStorage.getItem('enterpriseUserAccount')) || {}) // 账户信息

userStore.$subscribe((mutation, state) => {
  if (Object.keys(state.entBaseInfo).length) baseInfo.value = state.entBaseInfo
  if (Object.keys(state.enterpriseUserAccount).length) enterpriseUserAccount.value = state.enterpriseUserAccount
})

// 语言切换
// const handleChangeLocale = (item) => {
//   localeStore.setCurrentLocale(item)
//   location.reload()
// }

</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 50px;
  z-index: var(--zIndex-nav) !important;
  color: #0E100F;
  background-color: #fff;
  padding-left: 0px;
  height: 50px;
  font-size: 15px;
  border-bottom: 1px solid #e8e6e6;
}
.innerBox {
  position: relative;
  width: 100%;
  align-items: center;
  padding: 0 30px;
}
.nav-logo {
  float: left;
  cursor: pointer;
  margin-bottom: 1px;
}
.nav {
  font-size: 0;
  float: left;
  margin-left: 50px;
  height: 49px;
  line-height: 49px;
}
.user-nav {
  color: var(--color-333);
  font-size: 15px;
}
.enterprise-logo {
  border: 1px solid #E1E4E9;
  border-radius: 4px;
}
.active-route {
  color: #00B760;
  font-weight: 700;
  border-bottom: 4px solid #00B760;
  background-color: #e5f8ef;
  height: 50px;
}
:deep(.v-toolbar__content) {
  height: 50px !important;
}
:deep(.v-chip.v-chip--size-small) {
  height: 30px !important;
}
</style>