menduner/src/layout/company/navBar.vue

<template>
  <div>
    <v-toolbar
      class="banner"
      density="compact"
      style="padding-left: 0px;height: 50px;font-size: 14px;"
    >
      <div class="innerBox d-flex justify-space-between">
        <div>
          <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
            <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
          </div>
        </div>
        
        <div class="d-flex user-nav align-center">
          <div class="d-flex align-center cursor-pointer">
            <v-img @click="enterpriseClick(2)" rounded 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">{{ baseInfo?.enterpriseAnotherName || baseInfo?.enterpriseName || '--' }}</span>
          </div>
          <div class="line"></div>
          <div class="ml-3 cursor-pointer" @click="handleLogout">我要求职</div>
          <div class="line"></div>
          <div class="d-flex align-center ml-6">
            <div class="cursor-pointer" @click="router.push({ path: '/recruit/enterprise/memberCenter/myPoints' })">{{ $t('enterprise.account.accountBalances') }}：{{ enterpriseUserAccount?.balance || 0 }}元</div>
            <div class="ml-5 cursor-pointer" @click="router.push({ path: '/recruit/enterprise/memberCenter/myPoints' })">{{ $t('enterprise.account.remainingPoints') }}：{{ enterpriseUserAccount?.point || 0 }}点</div>
          </div>
          <div class="line"></div>
          
          <!-- 头像用户名 -->
          <div class="d-flex align-center" v-if="showBall">
            <v-menu open-on-hover>
              <template v-slot:activator="{ props }">
                <div class="d-flex ml-5 pl-2 align-center cursor-pointer" v-bind="props">
                  <v-avatar>
                    <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-img>
                  </v-avatar>
                  <div class="ml-2">{{ baseInfo?.name ?? $t('sys.tourist') }}</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> -->

          <!-- <v-btn size="small" icon="mdi-bell-outline" @click="router.push('/recruit/enterprise/communication')"></v-btn> -->
          <MessageNotification path="/recruit/enterprise/communication"></MessageNotification>
        </div>
      </div>
    </v-toolbar>
    <CtDialog :visible="show" title="请选择要切换的公司账号" :footer="true" widthType="2" @close="show = false" @submit="handleToAnotherEnterpriseSubmit">
      <v-radio-group v-model="radios">
        <v-radio v-for="item in enterpriseList" :key="item.enterpriseId" color="primary" :label="item.enterpriseName" :value="item.enterpriseId"></v-radio>
      </v-radio-group>
    </CtDialog>
  </div>
</template>

<script setup>
import {
  getUserBindEnterpriseList,
  getUserRegisterEnterpriseApply
} from '@/api/personal/user'
import { computed, ref, onMounted } 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 } from 'vue-router'; const router = useRouter()
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
import MessageNotification from '../message.vue'
import { getUserAvatar } from '@/utils/avatar'
defineOptions({ name: 'personal-navbar' })

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

const showBall = ref(false)

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

const handleLogoClick = () => { router.push({ path: '/recruit/enterprise'}) }

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

// 退出登录
const handleLogout = async () => {
  await userStore.userLogout(2)
  router.push({ path: '/login' })
}
const enterpriseList = ref([])

const menuList = ref([
  { title: t('enterprise.account.myAccount'), icon: 'mdi-account', change: () => router.push({ path: '/recruit/enterprise/memberCenter/myPoints' }) },
  { title: t('vipPackage.purchasePackage'), icon: 'mdi-gift-outline', change: () => window.open('/recruit/enterprise/purchasePackage') },
  { title: t('enterprise.personalInformationSettings'), icon: 'mdi-account-cog', change: () => router.push({ path: '/recruit/enterprise/informationSettings' }) },
  { title: t('setting.switchToOtherCompany'), icon: 'mdi-home-switch', hidden: enterpriseList.value?.length < 2, change: () => handleSwitchToAnotherEnterprise },
  { title: t('enterprise.registeringNewEnterprise'), icon: 'mdi-home-plus-outline', change: () => handleRegisteringNewEnterprise },
  // { title: t('setting.switchToJobSeeker'), icon: 'mdi-swap-horizontal', change: handleLogout },
  { title: t('setting.logOut'), icon: 'mdi-logout', change: handleLogout }
])
const items = computed(() => {
  return menuList.value.filter(item => !item.hidden)
})

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

userStore.$subscribe((mutation, state) => {
  baseInfo.value = state.baseInfo
  enterpriseUserAccount.value = state.enterpriseUserAccount
})

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

// 企业相关操作
const show = ref(false)
const radios = ref(null)

// 注册新企业
const handleRegisteringNewEnterprise = async () => {
  const data = await getUserRegisterEnterpriseApply()
  const bool = data && Object.keys(data).length // 已经有数据说明已经申请过了
  const path = bool ? '/recruit/enterprise/register/inReview' : '/recruit/enterprise/register'
  router.push({ path })
}

// 切换其他企业
const handleSwitchToAnotherEnterprise = async () => {
  if (enterpriseList.value?.length) {
    if (enterpriseList.value.length > 1) {
      show.value = true
      radios.value = enterpriseList.value[0].enterpriseId
    } else {
      // 只有一个企业不能切换  只能再注册新的一个
      handleRegisteringNewEnterprise()
    }
  }
}
// 手动切换企业提交
const handleToAnotherEnterpriseSubmit = async () => { 
  // 获取企业账号令牌以及企业用户个人信息
  await userStore.changeRole(radios.value) // enterpriseId
  // router.push({ path: '/recruit/enterprise' })
  localStorage.setItem('loginType', 'enterprise')
  window.location.href = '/recruit/enterprise'
}

const test = ref(false)
// 企业列表
const getEnterpriseListData = async () => {
  if (!test.value) return
  const data = await getUserBindEnterpriseList() // 申请通过才有数据，否则空数组
  enterpriseList.value = data || []
}
getEnterpriseListData()
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 50px;
  z-index: var(--zIndex-nav) !important;
  color: #fff;
  background-color: var(--color-d5e6e8);
  padding-left: 0px;
  height: 50px;
  font-size: 15px;
  .left {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
  }
}
.hover:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.03);
}
.innerBox {
  position: relative;
  width: 100%;
  align-items: center;
  padding: 0 30px;
}
.nav-logo {
  float: left;
}
.nav {
  font-size: 0;
  float: left;
  margin-left: 50px;
  height: 49px;
  line-height: 49px;
}
.user-nav {
  color: var(--v-primary-base);
}
.line {
  width: 1px;
  height: 20px;
  background-color: #fff;
  margin: 0 10px;
  margin: 8px 0 0 29px;
}
</style>