128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<div class="navbar">
|
|
<Hamburger></Hamburger>
|
|
<Breadcrumb></Breadcrumb>
|
|
<div class="right-bar">
|
|
<bell-socket/>
|
|
<div class="user-box">
|
|
<div>
|
|
<img :src="userInfo.avatar" alt="" @click.stop="handleVisitedP">
|
|
<span>{{userInfo.userName}}</span>
|
|
</div>
|
|
<div class="person" v-if="visitedP">
|
|
<ul>
|
|
<li @click="handleToAuth">个人中心</li>
|
|
<li @click="handleLogout">退出登录</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useRouter} from 'vue-router';
|
|
import Breadcrumb from './Breadcrumb.vue';
|
|
import Hamburger from './Hamburger.vue';
|
|
import {useAuthStore} from '@/stores/userstore.js'
|
|
import BellSocket from "./BellSocket.vue";
|
|
import {getUserInfo} from "../../api/login";
|
|
import {usePermisstionStroe} from '@/stores/permisstion'
|
|
|
|
const authStore = useAuthStore()
|
|
const permisstionStore = usePermisstionStroe()
|
|
const userInfo = ref({})
|
|
const visitedP = ref(false)
|
|
const router = useRouter()
|
|
onMounted(() => {
|
|
setUserInfo()
|
|
document.addEventListener('click', nullBlockClick)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener('click', nullBlockClick)
|
|
})
|
|
const setUserInfo = () => {
|
|
getUserInfo().then(res=>{
|
|
userInfo.value = res.data.user
|
|
})
|
|
}
|
|
const nullBlockClick = () => {
|
|
visitedP.value = false
|
|
}
|
|
const handleVisitedP = () => {
|
|
visitedP.value = !visitedP.value
|
|
}
|
|
|
|
const handleToAuth = () => {
|
|
visitedP.value = !visitedP.value
|
|
router.push('/auth')
|
|
}
|
|
const handleLogout = () => {
|
|
visitedP.value = !visitedP.value
|
|
authStore.userLogout()
|
|
permisstionStore.removeMenu()
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar {
|
|
height: 65px;
|
|
padding: 0 15px 0 0;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
.right-bar {
|
|
margin-left: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.user-box{
|
|
margin-left: 10px;
|
|
position: relative;
|
|
>div:first-child{
|
|
display:flex;
|
|
align-items: center;
|
|
>span{
|
|
margin-left: 5px;
|
|
}
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: 1px solid #418DFF;
|
|
}
|
|
}
|
|
|
|
|
|
.person {
|
|
position: absolute;
|
|
width: 80px;
|
|
right: 0;
|
|
z-index: 300;
|
|
bottom: -70px;
|
|
padding: 10px 5px;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
box-shadow: 2px 2px 2px 1px rgb(171, 167, 167);
|
|
|
|
li {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: #79bbff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|