menduner/src/layout/personal/navBar.vue

<template>
  <div>
    <v-toolbar
      class="banner"
      density="compact"
    >
      <div class="innerBox d-flex align-center">
        <div class="nav-logo" @click="router.push('/recruitHome')">
          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" contain width="90" height="35"></v-img>
        </div>
          
        <div class="menuList default-width">
          <div v-for="val in navList" :key="val.name" :class="{'active-route': menuActive(val)}">
            <template v-if="val.children">
              <defineListPage v-bind="$attrs" :title="val.title" :list="val.children" @emitClick="handleClick" :closeOnContentClick="true"></defineListPage>
            </template>
            <template v-else>
              <span 
                class="cursor-pointer menuList-first-title"
                @click.stop="handleClick(val, val.title === '首页' ? false : true)">
                {{ val.title }}
              </span>
            </template>
          </div>
        </div>
        
        <div class="d-flex align-center position-absolute" style="right: 30px;">
          <div class="btns d-flex align-center" v-if="!isLogin && showLoginBtn">
            <v-btn color="primary" style="color: #fff !important; background-color: #00B760;" to="/login">{{ t('login.loginOrRegister') }}</v-btn>
          </div>
          
          <!-- 头像用户名 -->
          <div class="d-flex align-center color-333" v-if="isLogin">
            <v-menu open-on-hover>
              <template v-slot:activator="{ props }">
                <div class="d-flex align-center cursor-pointer px-4" :class="{'active-route': route.path.includes('/recruit/personal/personalCenter'), 'vipBox': vip}" v-bind="props" @click="handleToPersonalCenter">
                  <div class="position-relative d-flex align-center">
                    <v-avatar class="avatar">
                      <v-img alt="" :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" ></v-img>
                    </v-avatar>
                    <div v-if="vip" style="position: absolute; right: -9px; bottom: -13px;" @click.stop="router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')">
                      <svg-icon name="huangguan1" size="25"></svg-icon>
                    </div>
                  </div>
                  <div class="ml-3 font-size-15 userName">
                    {{ baseInfo?.name || userInfo.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>

            <v-chip
              class="mx-4 cursor-pointer"
              color="#008bb7"
              label
              size="small"
              @click="router.push({ path: paths[6] })"
              >
              积分
              <strong class="ml-3">{{ userAccount?.point || 0 }}</strong>
            </v-chip>
            <v-chip
              color="primary"
              class="cursor-pointer"
              label
              size="small"
              @click="router.push({ path: paths[6] })"
              >
              现金
              <strong class="ml-3">{{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}</strong>
            </v-chip>
          </div>

          <!-- 语言切换 -->
          <!-- <v-menu>
            <template v-slot:activator="{ props }">
              <v-btn
                class="ml-3"
                color="primary"
                icon="mdi-translate"
                size="small"
                v-bind="props"
              >
              </v-btn>
            </template>
            <v-list density="compact" color="primary">
              <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> -->
          <div class="d-flex align-center ml-4" v-if="showBall">
            <message-notification v-if="showBall" :path="paths[3]"></message-notification>
          </div>
          <div v-if="isLogin" class="d-flex align-center ml-4 cursor-pointer">
            <v-chip v-if="showTeacherLogin" label size="small" color="primary" variant="flat" @click="handleSwitchTeacher">切换为老师</v-chip>
            <v-chip v-else label color="primary" size="small" variant="flat" @click="handleSwitchEnterprise">我要招聘</v-chip>
          </div>
        </div>
      </div>
    </v-toolbar>

    <CtDialog :visible="show" title="请选择要切换的公司账号" :footer="true" widthType="2" @close="show = false" @submit="switchSubmit">
      <v-radio-group v-model="radios" :hide-details="true">
        <v-radio v-for="item in enterpriseList" :key="item.enterpriseId" color="primary" :label="formatName(item.enterpriseName)" :value="item.enterpriseId"></v-radio>
      </v-radio-group>
      <div class="text-end pr-5 pt-5">
        <span class="color-error cursor-pointer border-bottom-error" @click="newRegistering">{{ btnType ? '都不是我要的？去注册新企业' : '查看申请进度' }}</span>
      </div>
    </CtDialog>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { getToken, getRefreshToken } from '@/utils/auth'
import { useUserStore } from '@/store/user'
// import { useLocaleStore } from '@/store/locale'
import { useI18n } from '@/hooks/web/useI18n'
import CtDialog from '@/components/CtDialog'
import { useRoute } from 'vue-router'; const route = useRoute()
import { useRouter } from 'vue-router'; const router = useRouter()
import { getUserBindEnterpriseList, getUserRegisterEnterpriseApply } from '@/api/personal/user'
import MessageNotification from '../message.vue'
import { getUserAvatar } from '@/utils/avatar'
import defineListPage from '@/views/entrances/navBar/components/defineListPage'
import { formatName } from '@/utils/getText'
import { getSchoolInformation } from '@/api/school'

defineOptions({ name: 'personal-navbar' })

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

const showBall = ref(false)
const showTeacherLogin = ref(false)
const isSchool = localStorage.getItem('isSchool') ? true : false

// 获取老师注册信息
const schoolInfo = ref({})
const getSchoolInfo = async () => {
  const data = await getSchoolInformation()
  if (data && Object.keys(data).length > 0) {
    schoolInfo.value = data
    showTeacherLogin.value = isSchool ? false : true
  }
}

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

    await getSchoolInfo()
  }
})

const { t } = useI18n()
// const localeStore = useLocaleStore()
const userStore = useUserStore()

const paths = [ // 有选中样式-路由列表
  '/recruitHome', // 0
  '/recruit/personal/position', // 1
  '/recruit/personal/company', // 2
  '/recruit/personal/message', // 3
  '/recruit/personal/myWallet', // 4
  '/recruit/personal/personalCenter', // 5
  '/recruit/personal/personalCenter/wallet', // 6
]

const navList = ref([
  { title: '首页', path: '/recruitHome' },
  { title: '门墩儿招聘', path: '/recruit/personal/recommend', dealActive: true },
  { title: '门墩儿猎头', path: '/headhunting' },
  { title: '门墩儿商城', path: '/pointsExchange', isEdit: true },
  { title: '火苗儿校企', path: '/flameLogin' },
  { title: '了解门墩儿', path: '/about' }
])

const mode = import.meta.env.VITE_NODE_ENV
console.log(import.meta.env.VITE_NODE_ENV, '当前环境变量===========')

const mall = navList.value.find(item => item.isEdit)
// 区分生产环境展示地址
mall.path = mode === 'production' ? '/pointsExchange' : '/mall'

const handleClick = (e, status) => {
  if (!e.path) return
  if (status) window.open(e.path)
  else router.push(e.path)
}

// 左侧菜单选中状态
const position = [
  '/recruit/personal/recommend',
  '/recruit/personal/position',
  '/recruit/personal/company',
  '/recruit/personal/jobFair',
  '/recruit/personal/company/details',
  '/recruit/personal/position/details'
]
const menuActive = (val) => {
  let path
  position.forEach(e => {
    if (route.path.indexOf(e) !== -1) path = e
  })
  return val.dealActive ? position.indexOf(path) !== -1 : (route.path === val.path || route.path.includes(val.path))
}

const vip = computed(() => {
  return new Date().getTime() < userStore.userInfo?.vipExpireDate
})

const show = ref(false)
const radios = ref(null)
const enterpriseList = ref([])
// 切换为招聘者
const handleSwitchEnterprise = async () => {
  await getApplyInfo() // 查询申请信息（注册进度）
  const data = await getUserBindEnterpriseList() // 申请通过才有数据，否则空数组
  enterpriseList.value = data || []
  if (data?.length) {
    radios.value = data[0].enterpriseId
    show.value = true
  } else {
    // router.push('recruit/enterpriseRegister')
    newRegistering() // 既没有存在的企业 又没有申请数据 》 进入注册页面
  }
}

// 切换提交
const switchSubmit = async () => {
  localStorage.setItem('enterpriseId', radios.value)
  localStorage.setItem('emailLoginInfo', "false") // 先清空企业邮箱信息，避免求职切换招聘有邮箱登录信息遗留导致使用邮箱信息

  // 跳转企业路由 且验证是否已完善必填基本信息
  window.location.href = '/enterpriseVerification'
}

const btnType = ref(0)
// 查看用户是否有在申请中的数据
const getApplyInfo = async () => {
  const data = await getUserRegisterEnterpriseApply()
  localStorage.setItem('userApplyInfo', JSON.stringify(data))
  const status = data?.status || null // 有数据说明有申请

  // 0: 有等待审核的数据或者审核不通过的数据 >查看申请进度
  // 1: 没有正在审核的数据 >注册新企业
  btnType.value = (status === '0' || status === '2') ? 0 : 1
}

// 注册/查看申请进度
const loading1 = ref(false)
const newRegistering = () => {
  loading1.value = true
  const path = btnType.value ? '/recruit/entRegister' : '/recruit/entRegister/inReview'
  router.replace({ path })
}

// 跳转老师页面
const statusList = [
  { status: '0', path: '/register/school/inReview', key: 'registerSchoolInfo' }, // 审核中
  { status: '1', path: '/recruit/teacher/studentList/index', key: 'schoolInfo' }, // 审核通过
  { status: '2', path: '/register/school/inReview', key: 'registerSchoolInfo' }, // 审核不通过
]
const handleSwitchTeacher = () => {
  const obj = statusList.find(item => item.status === schoolInfo.value?.authStatus)
  if (!obj || !schoolInfo.value) return
  localStorage.setItem(obj.key, JSON.stringify(schoolInfo.value))
  router.push({ path: obj.path })
}

const handleToPersonalCenter = () => {
  router.push({ path: paths[5] })
}

// 退出登录
const handleLogout = async () => {
  await userStore.userLogout(1)
  showBall.value = false
  if (route.path === '/recruitHome') location.reload()
  else router.push({ path: '/recruitHome' })
}

const items = ref([
  { title: t('setting.personalCenter'), icon: 'mdi-account-circle-outline', change: handleToPersonalCenter },
  { title: t('setting.editPassword'), icon: 'mdi-shield-lock-open-outline',  change: () => router.push({ path: '/recruit/personal/personalCenter/accountSettings' }) },
  { title: t('setting.logOut'), icon: 'mdi-logout', change: handleLogout }
])

let baseInfo = ref(JSON.parse(localStorage.getItem('baseInfo')) || {}) // 人才信息
let userInfo = ref(JSON.parse(localStorage.getItem('userInfo')) || {})
let userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息

const isLogin = ref(Boolean(getRefreshToken(2)))
const updatePage = () => {
  baseInfo.value = JSON.parse(localStorage.getItem('baseInfo')) || {}
  userInfo.value = JSON.parse(localStorage.getItem('userInfo')) || {}
  userAccount.value = JSON.parse(localStorage.getItem('userAccount')) || {}
  isLogin.value = Boolean(getRefreshToken(2))
}

userStore.$subscribe((mutation, state) => {
  if (Object.keys(state.baseInfo).length) baseInfo.value = state.baseInfo
  if (state.userInfo && Object.keys(state.userInfo).length) userInfo.value = state?.userInfo
  if (Object.keys(state.userAccount).length) userAccount.value = state.userAccount
  if (state.token) showBall.value = true
  updatePage()
})

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

<style lang="scss" scoped>
@import '@/styles/personal/navBar.scss'
</style>