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

<template>
	<div>
		<!-- //根据平台不同传不同参0后台（管理员）1老师2学生   eduIdentity
		{{userInfo.eduIdentity}}
		管理员 -->
		<div v-if="userInfo.eduIdentity == 0" style="display: flex; width: 100vw; justify-content: space-between; align-items: center">
			<div style="display: flex; padding-left: 10%">
				<div style="width: 120px; height: 55px; background-color: brown" />
				<a-menu v-model:selectedKeys="current" mode="horizontal" theme="light" style="line-height: 55px">
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">资源管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">全院课程</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">全院开课</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">数据挖掘</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">镜像控制台</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">专业</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">院系</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">组织机构</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">后台管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">资源任务分配</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">统计分析</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">论坛</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">站内信</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">公告发布</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">管理员登录</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">密码找回</a-menu-item>
				</a-menu>
			</div>

			<div class="header-right">
				<div style="display: flex">
					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
					<div style="width: 5px"></div>
					<span style="font-size: 12px; color: #00000083">登录</span>
				</div>
				<div style="width: 20px"></div>
				<div style="display: flex">
					<span style="font-size: 12px; color: #00000083">注册</span>
				</div>
			</div>
		</div>
		<div v-if="userInfo.eduIdentity == 1" style="display: flex; width: 100vw; justify-content: space-between; align-items: center">
			<div style="display: flex; padding-left: 10%">
				<div style="width: 120px; height: 55px; background-color: brown" />
				<a-menu v-model:selectedKeys="current" mode="horizontal" theme="light" style="line-height: 55px">
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceCenter">资源中心</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/personalResources">个人资源</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">课程管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">问答管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">班级管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">考试管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">问卷管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">试题管理</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">统计分析</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">个人中心</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">论坛</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">站内信</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">课程公告发布</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">登录</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">密码找回</a-menu-item>
				</a-menu>
			</div>

			<div class="header-right">
				<div style="display: flex">
					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
					<div style="width: 5px"></div>
					<span style="font-size: 12px; color: #00000083">登录</span>
				</div>
				<div style="width: 20px"></div>
				<div style="display: flex">
					<span style="font-size: 12px; color: #00000083">注册</span>
				</div>
			</div>
		</div>
		<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="portal/personalResources">我的考试</a-menu-item>
						<a-menu-item key="portal/courseManagement">我的作业</a-menu-item>
						<a-menu-item key="portal/courseManagement">调查问卷</a-menu-item>
					</a-sub-menu>
				</a-menu>
			</div>
			<div class="header-right">
				<a-dropdown>
					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
					<template #overlay>
						<a-menu>
							<a-menu-item key="portal/courseManagement">个人中心</a-menu-item>
							<a-menu-item key="portal/courseManagement">论坛</a-menu-item>
							<a-menu-item key="portal/courseManagement">站内信</a-menu-item>
							<a-menu-item key="portal/courseManagement">课程公告</a-menu-item>
							<a-menu-item key="portal/personalResources">学习足迹</a-menu-item>
							<a-menu-item key="portal/courseManagement">登录</a-menu-item>
							<a-menu-item key="portal/courseManagement">密码找回</a-menu-item>
							<a-menu-item key="outLogin" @click="handleUser('outLogin')">退出登陆</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
				<div class="ml-2" @click="slogin">登录</div>
				<div class="ml-2">注册</div>
			</div>
		</div>
		<div class="line" style=""></div>
	</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 slogin = () =>{
		router.push({
			path: '/slogin'
		})
	}
	const handleUser = (key) => {
		if (key === '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;
	}
	
	.line {
		width: 100%;
		height: 0.25px;
		background-color: #00000013;
	}
</style>