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

<template>
	<div >
		<!-- 主要内容区域 -->
		<div style="width: 100%; display: flex">
			<div class="sidebar-menu" style="width: 15%; background: white">
				<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: 88%">
				<component :is="currentComponent"></component>
			</div>
		</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 lang="less" 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>