课程中心切换章节

src/views/portal/components/Header.vue

@@ -1,44 +1,50 @@
 <template>
-	<div>
-		<!-- //根据平台不同传不同参 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-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="forum" @click="jump('/forum')">论坛</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="slogin" @click="jump('/slogin')">登录</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 cur" @click="slogin">登录</div>
+	<!-- //根据平台不同传不同参 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-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">个人中心</a-menu-item>
+						<a-menu-item key="2" @click="jump('/forum')">论坛</a-menu-item>
+						<a-menu-item key="3">站内信</a-menu-item>
+						<a-menu-item key="4">课程公告</a-menu-item>
+						<a-menu-item key="5">学习足迹</a-menu-item>
+						<a-menu-item key="6" @click="jump('/slogin')">登录</a-menu-item>
+						<a-menu-item key="7">密码找回</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 class="line"></div>
 	</div>
+	<div class="line"></div>
 </template>
 
 <script setup>
@@ -63,50 +69,43 @@
 			}
 		}
 	)
-	const slogin = () => {
-		router.push({
-			path: '/slogin'
-		})
-	}
 	const jump = (url) => {
 		router.push({
 			path: url
 		})
 	}
-	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() {}
-			})
-		}
+	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>
 
@@ -137,6 +136,10 @@
 		align-items: center;
 		background-color: #fff;
 	}
+	.flc {
+		display: flex;
+		align-items: center;
+	}
 	.cur {
 		cursor: pointer;
 	}

src/views/student/classCentre/index.vue

@@ -4,7 +4,13 @@
 			<div class="classTitle">
 				<div>{{ classDetail.courseName }}</div>
 			</div>
-			<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
+			<a-menu
+				v-model:openKeys="openKeys"
+				v-model:selectedKeys="selectedKeys"
+				theme="dark"
+				mode="inline"
+				@click="menuClick"
+			>
 				<template v-for="(item, idx) in classTimeList" :key="item.id">
 					<template v-if="!item.classHours">
 						<a-menu-item :key="item.id" v-for="(item, idx) in classTimeList">
@@ -65,11 +71,11 @@
 					</video>
 					<rightMenu :idsObj="idsObj" :dataList="classTimeData" ref="rightNenuRef" @videoSpeed="videoSpeed"></rightMenu>
 				</a-card>
-				<div style="display: flex;justify-content: center;">
-					<a-card :bordered="false" class="mt-2" style="max-width: 1200px">
+				<div style="display: flex; justify-content: center">
+					<a-card :bordered="false" class="mt-2" style="width: 1200px">
 						<a-tabs v-model:activeKey="tabsActiveKey">
 							<a-tab-pane key="1" tab="讲义">
-								<div style="height: 900px;">
+								<div style="height: 900px">
 									<vue-office-pdf :src="itemObj.url" style="width: 100%; height: 100%" />
 								</div>
 							</a-tab-pane>
@@ -142,17 +148,20 @@
 				classTimeList.value = data
 				selectedKeys.value = [data[0]?.classHours[0].id]
 				if (selectedKeys.value[0]) {
-					classCentre.courseTimeDetail({ id: selectedKeys.value[0] }).then((data) => {
-						classTimeData.value = data.courseRelates.map((r) => {
-							return {
-								...r,
-								url: sysConfig.FILE_URL + r.url
-							}
-						})
-						videoRef.value.src = classTimeData.value.filter((r) => r.funcType == 1)[0]?.url
-					})
+					menuClick()
+				}
+			})
+		})
+	}
+	const menuClick = (e) => {
+		classCentre.courseTimeDetail({ id: e?.key ? e.key : selectedKeys.value[0] }).then((data) => {
+			classTimeData.value = data.courseRelates.map((r) => {
+				return {
+					...r,
+					url: sysConfig.FILE_URL + r.url
 				}
 			})
+			videoRef.value.src = classTimeData.value.filter((r) => r.funcType == 1)[0]?.url
 		})
 	}
 	getClassData()
@@ -166,7 +175,6 @@
 	})
 	const danmuObj = computed(() => {
 		let item = classTimeData.value.length > 0 ? classTimeData.value.filter((r) => r.funcType == 3)[0] : { url: '' }
-		console.log('🚀 ~ item:', item)
 		if (item?.url) {
 			GetSrtInfo(item.url)
 		}