OnlineEducation-student-front/src/views/portal/components/Header.vue

<template>
	<!-- //根据平台不同传不同参 0后台（管理员）1老师 2学生   eduIdentity
	{{userInfo.eduIdentity}}
	管理员 -->
	<div v-if="userInfo.eduIdentity == 2" class="fcbc">
		<div class="headerBtn">
			<div style="width: 120px; background-color: brown"></div>
			<a-menu v-model:selectedKeys="current" mode="horizontal">
				<a-menu-item key="portal/resourceCenter">资源中心</a-menu-item>
				<a-menu-item key="portal/courseCenter">课程中心</a-menu-item>
				<a-menu-item key="portal/resourceManagement">课程详情</a-menu-item>
				<a-sub-menu key="myList">
					<template #title>我的</template>
					<a-menu-item key="student/paper">我的考试</a-menu-item>
					<a-menu-item key="portal/courseManagement">我的作业</a-menu-item>
					<a-menu-item key="exm/questionnaireManagement">调查问卷</a-menu-item>
					<a-menu-item key="exm/questionnaireManagement">课程收藏</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</div>
		<div class="header-right">
			<a-dropdown v-if="userInfo">
				<div class="cur flc">
					<a-avatar :src="userInfo.avatar">
						<template #icon><UserOutlined /></template>
					</a-avatar>
					<div class="ml-2">{{ userInfo.name }}</div>
				</div>
				<template #overlay>
					<a-menu>
						<a-menu-item key="1" @click="jump('/')">个人中心</a-menu-item>
						<a-menu-item key="2" @click="jump('/forum')">论坛</a-menu-item>
						<a-menu-item key="3" @click="jump('/')">站内信</a-menu-item>
						<a-menu-item key="4" @click="jump('/')">课程公告</a-menu-item>
						<a-menu-item key="5" @click="jump('/')">学习足迹</a-menu-item>
						<a-menu-item key="6" @click="jump('/slogin')">登录</a-menu-item>
						<a-menu-item key="7" @click="jump('/')">密码找回</a-menu-item>
						<a-menu-item key="8" @click="outLogin()">退出登陆</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
			<div class="flc" v-if="!userInfo">
				<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
				<div class="ml-2 cur" @click="jump('/slogin')">登录</div>
			</div>
		</div>
	</div>
	<div class="line"></div>
</template>

<script setup>
	import { createVNode } from 'vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { Modal } from 'ant-design-vue'
	import loginApi from '@/api/auth/loginApi'
	import { message } from 'ant-design-vue'
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const current = ref([route.path.slice(1)]) // 默认选中“资源中心”
	import tool from '@/utils/tool'
	const emit = defineEmits(['onChangeCurrent'])
	const userInfo = tool.data.get('USER_INFO')
	watch(
		() => current.value,
		(newVal, oldVal) => {
			if (newVal != oldVal) {
				emit('onChangeCurrent', newVal)
			}
		}
	)
	const jump = (url) => {
		router.push({
			path: url
		})
	}
	const outLogin = () => {
		Modal.confirm({
			title: '提示',
			content: '确认退出当前用户？',
			icon: createVNode(ExclamationCircleOutlined),
			maskClosable: false,
			onOk() {
				// 取得缓存中的token
				const token = tool.data.get('TOKEN')
				const param = {
					token: token
				}
				message.loading('退出中...', 1)
				loginApi
					.logout(param)
					.then(() => {
						// 清理掉个人的一些信息
						tool.data.remove('TOKEN')
						tool.data.remove('USER_INFO')
						tool.data.remove('MENU')
						tool.data.remove('PERMISSIONS')
						tool.cookie.remove('Token')
						router.replace({ path: '/slogin' })
					})
					.catch(() => {
						tool.data.clear()
						router.replace({ path: '/slogin' })
						location.reload()
					})
			},
			onCancel() {}
		})
	}
</script>

<style scoped lang="less">
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50px;
	}
	.headerBtn {
		display: flex;
		padding-left: 10%;
		flex: 1;
		:deep(.ant-menu-horizontal) {
			line-height: 55px;
		}
	}
	.header-right {
		display: flex;
		align-items: center;
		margin-right: 20%;
	}
	.fcbc {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	.flc {
		display: flex;
		align-items: center;
	}
	.cur {
		cursor: pointer;
	}
	.line {
		width: 100%;
		height: 0.25px;
		background-color: #00000013;
	}
</style>