menduner/src/layout/personal/navBar.vue

<template>
  <div>
    <div
      class="banner"
      density="compact"
      style="padding-left: 0px;height: 50px;font-size: 14px;"
    >
      <div class="innerBox">
        <div class="nav-logo">
          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
        </div>
        <div class="nav-city">
          <p class="nav-city-box">
            <v-icon color="primary">mdi-map-marker</v-icon>
            <span class="nav-city-selected">广州</span>
            <span class="switchover-city nav-city-selected">[切换城市]</span>
          </p>
        </div>
        <div class="nav">
          <ul>
            <li v-for="k in list" :key="k.text" class="mt-1">
              <a :href="k.path" style="font-size: 14px;">{{ k.text }}</a>
            </li>
          </ul>
        </div>
        <div class="user-nav" v-if="!getToken()">
          <div class="btns">
            <span class="nav-resume-tools">
              <a href="">我要找工作</a>
              <a href="">我要招聘</a>
            </span>
            <v-btn class="half-button" color="primary" size="small" @click="handleLogin">登录/注册</v-btn>
          </div>
        </div>
        <div v-else class="d-flex user-nav">
          <span style="cursor: pointer;">消息</span>
          <v-menu open-on-hover>
            <template v-slot:activator="{ props }">
              <div class="d-flex ml-5 align-center" v-bind="props">
                <v-avatar>
                  <v-img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
                </v-avatar>
                <div class="ml-2">游客</div>
              </div>
            </template>

            <v-list>
              <v-list-item v-for="(item, index) in items" :key="index" @click="item.change">
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
      </div>
    </div>
    <Dialog :visible="show" :footer="true" title="企业注册" widthType="1" @close="show = false">
      <enterpriseRegister ref="enterpriseRegisterRef"></enterpriseRegister>
    </Dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getToken } from '@/utils/auth'
import { userLocaleStore } from '@/store/user'
defineOptions({ name: 'personal-navbar' })
import Dialog from '@/components/CtDialog'
import enterpriseRegister from '@/views/enterprise/components/register.vue'
defineProps({
  sticky: {
    type: Boolean,
    default: true
  }
})
const list = ref([
  { text: '首页', path: '/home' },
  { text: '职位', path: '' },
  { text: '公司', path: '' }
])

import { useRouter } from 'vue-router'
const router = useRouter()

const userType = ref(1) // 0企业用户、1个人用户
const show = ref(false)
const changeRole = () => {
  if (userType.value) {
    show.value = true
  } else {
    router.push({ path: '/' })
  }
}

// 退出登录
const userStore = userLocaleStore()
const handleLogout = async () => {
  // try {
    await userStore.userLogout()
    router.push({ path: '/login' })
  // } catch (error) {
  //   console.log(error, 'error')
  // }
}

const items = ref([
  { title: '账号设置', change: () => router.push({ path: '/personalAccount/accountBinding' }) },
  { title: '切换为招聘者', change: changeRole },
  { title: '退出登录', change: handleLogout }
])

const handleLogin = () => {
  router.push({ path: '/login' })
}

</script>

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