129 lines
2.9 KiB
Vue
129 lines
2.9 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 @click.stop="handleVisitedP">欢迎回来，{{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{
|
||
cursor: pointer;
|
||
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>
|