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

<template>
	<!-- //根据平台不同传不同参 0后台（管理员）1老师 2学生   eduIdentity
	{{userInfo.eduIdentity}}
	管理员 -->
	<div class="fcc headerBox">
		<div class="fcbc box-width">
			<div class="headerBtn">
				<a-menu v-model:selectedKeys="current" mode="horizontal" @click="menuSelect">
					<a-menu-item key="student/resourceCenter">资源中心</a-menu-item>
					<a-menu-item key="student/courseCenter">课程中心</a-menu-item>
					<a-sub-menu key="myList">
						<template #title>我的</template>
						<a-menu-item key="student/paper/1">我的任务</a-menu-item>
						<a-menu-item key="student/paper/2">章节测验</a-menu-item>
						<a-menu-item key="student/paper/3">调查问卷</a-menu-item>
						<a-menu-item key="student/paper/4">我的作业</a-menu-item>
						<a-menu-item key="student/classCollect">课程收藏</a-menu-item>
					</a-sub-menu>
				</a-menu>
			</div>
			<div class="header-right">
				<headerIcon></headerIcon>
				<a-dropdown v-if="userInfo" class="mr-4">
					<div class="cur flc">
						<a-avatar :src="userInfo.avatar">
							<template #icon><UserOutlined /></template>
						</a-avatar>
						<div class="ml-2 mr-1">{{ userInfo.name }}</div>
						<DownOutlined />
					</div>
					<template #overlay>
						<a-menu v-model:selectedKeys="current" @click="menuSelect">
							<a-menu-item key="userInfo">个人资料</a-menu-item>
							<a-menu-item key="1" v-if="forumType">
								<router-link :to="{ path: '/forum' }" target="_blank">论坛</router-link>
							</a-menu-item>
							<a-menu-item key="inSsiteMessage">站内信</a-menu-item>
							<a-menu-item key="classNotice">课程公告</a-menu-item>
							<a-menu-item key="learningFootprint">课程足迹</a-menu-item>
							<a-menu-item key="resourceFootprint">资源足迹</a-menu-item>
							<a-menu-item key="passwordRetrieve">密码找回</a-menu-item>
							<a-menu-item key="activate">激活</a-menu-item>
							<a-menu-item key="1" @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>
</template>

<script setup>
	import { createVNode } from 'vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import loginApi from '@/api/auth/loginApi'
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import tool from '@/utils/tool'
	import headerIcon from './headerIcon.vue'
	import { globalStore } from '@/store'
	import { Modal, message } from 'ant-design-vue'
	const router = useRouter()
	const route = useRoute()
	const current = ref([route.path.slice(1)]) // 默认选中“资源中心”
	const emit = defineEmits(['onChangeCurrent'])
	const store = globalStore()
	const forumType = computed((e) => (tool.dictList('FORUM_TYPE')[0]?.value == 1 ? true : false))
	const userInfo = computed(() => {
		return store.userInfo
	})

	watch(
		route,
		(newValue) => {
			current.value = []
			nextTick(() => {
				current.value = [newValue.path.slice(1)]
				if (newValue.path == '/student/resourceDetails') {
					current.value = ['student/resourceCenter']
				}
				if (newValue.path == '/student/classCentre') {
					current.value = ['student/courseCenter']
				}
			})
		},
		{ immediate: true, deep: true }
	)
	const menuSelect = (obj) => {
		if (obj.key != '1') {
			const pathLength = obj.keyPath.length
			const path = '/' + obj.keyPath[pathLength - 1]
			router.push({ path })
			current.value = obj.selectedKeys
		}
	}
	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')
						Modal.destroyAll();
						router.replace({ path: '/slogin' })
					})
					.catch(() => {
						tool.data.clear()
						router.replace({ path: '/slogin' })
						location.reload()
					})
			},
			onCancel() {}
		})
	}
</script>

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