OnlineEducation-teacher-front/src/views/myResources/personalResources/index.vue

<template>
	<div style="overflow-y: auto; display: flex">
		<!-- 主要内容区域 -->
		<div style="flex: 1; margin-left: 0px">
			<a-layout>
				<Header @onChangeCurrent="onChangeCurrent" />
				<div style="width: 90%; margin-left: 5%; display: flex">
					<div class="sidebar-menu">
						<ul>
							<li
								v-for="item in menuItems"
								:class="{ active: activeKey === item.key }"
								:key="item.key"
								@click="handleClick(item)"
							>
								<component :is="item.icon" />
								<!-- <AliwangwangOutlined /> -->
								{{ item.label }}
							</li>
						</ul>
					</div>
					<div style="width: 90%">
						<component :is="currentComponent"></component>
					</div>
				</div>
			</a-layout>
			<Footer />
		</div>
	</div>
</template>

<script setup>
	import Header from '@/views/portal/components/Header.vue'
	import Footer from '@/views/portal/components/Footer.vue'
	import myResources from '../myResources.vue'
	import { ref, reactive, computed, onMounted, defineAsyncComponent } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import {
		HomeOutlined,
		FolderOutlined,
		StarOutlined,
		BookOutlined,
		QuestionCircleOutlined,
		BankOutlined,
		SolutionOutlined,
		ScheduleOutlined
	} from '@ant-design/icons-vue'
	const router = useRouter()
	const route = useRoute()

	const indexType = ref('resources') // 默认选中“我的主页”
	const activeKey = ref('resources') // 当前选中项
	const itemData = ref({})
	const VideoDetailsRef = ref(null)
	const selectedKeys = ref(['resources'])
	const openKeys = ref(['resources'])

	const menuItems = ref([
		{
			key: 'home',
			icon: HomeOutlined,
			label: '我的主页',
			title: '我的主页'
		},
		{
			key: 'resources',
			icon: FolderOutlined,
			label: '我的资源',
			title: '我的资源'
		},
		{
			key: 'favorites',
			icon: StarOutlined,
			label: '我的收藏',
			title: '我的收藏'
		},
		{
			key: 'albums',
			icon: BookOutlined,
			label: '我的课程专辑',
			title: '我的课程专辑'
		},
		{
			key: 'questionBank',
			icon: QuestionCircleOutlined,
			label: '我的题库',
			title: '我的题库'
		},
		{
			key: 'classroom',
			icon: BankOutlined,
			label: '我的教室',
			title: '我的教室'
		},
		{
			key: 'courses',
			label: '我的课程',
			icon: SolutionOutlined,
			title: '我的课程'
		},
		{
			key: 'tasks',
			label: '我的任务',
			icon: ScheduleOutlined,
			title: '我的任务'
		}
	])

	const handleClick = (e) => {
		selectedKeys.value = [e.key]
		activeKey.value = e.key
		indexType.value = e.key
	}

	const currentComponent = computed(() => {
		// if (indexType.value !== 'resources') {
		// 	return false
		// }
		switch (indexType.value) {
			// case 'home':
			// 	return defineAsyncComponent(() => import('@/views/myResources/personalResources/Home.vue'))
			case 'resources':
				return myResources
			case 'favorites':
				return defineAsyncComponent(() => import('@/views/myFavorites/index.vue'))
			// case 'albums':
			// 	return defineAsyncComponent(() => import('@/views/myResources/personalResources/Albums.vue'))
			// case 'questionBank':
			// 	return defineAsyncComponent(() => import('@/views/myResources/personalResources/QuestionBank.vue'))
			// case 'classroom':
			// 	return defineAsyncComponent(() => import('@/views/myResources/personalResources/Classroom.vue'))
			// case 'courses':
			// 	return defineAsyncComponent(() => import('@/views/myResources/personalResources/Courses.vue'))
			// case 'tasks':
			// 	return defineAsyncComponent(() => import('@/views/myResources/personalResources/Tasks.vue'))
			default:
				return myResources
		}
	})

	const handlerItemSidebar = (item) => {
		// emit('handlerItemSidebar', item)
	}

	const onChangeCurrent = (current) => {
		indexType.value = current
		router.push({
			path: '/' + current
		})
	}

	const setData = (item) => {
		getData(item)
	}

	const getData = (item) => {
		detail({ id: item.id })
			.then((res) => {
				if (res.code == 200) {
					itemData.value = res.data
				}
			})
			.catch((err) => {})
	}

	onMounted(() => {
		const id = route.query.id
		if (id != undefined && id != '') {
			addViewCount({ id: id })
			getData({ id: id })
		}
	})

	defineExpose({
		setData
	})
</script>

<style scoped>
	.a-menu {
		width: 256px;
		height: 600px;
		background-color: #fff;
		border-right: 1px solid #e8e8e8;
	}

	.content {
		border: 1px solid #00000011;
		/* 灰色细边框 */
	}

	.scroll-container {
		height: 100vh;
		overflow-y: auto;
	}
	.sidebar-menu {
		flex: 1;
		background-color: #ffff;
		color: #0000007c;
	}

	.sidebar-menu ul {
		list-style-type: none;
		padding: 0;
	}

	.sidebar-menu li {
		padding: 10px;
		cursor: pointer;
	}

	.sidebar-menu li:hover {
		background-color: #e6f7ff;
		color: #ccc;
	}
	.active {
		color: #ffff;
		background-color: #1073cff7;
	}
</style>