web-学习任务

schoolNewsWeb/src/views/course/components/CourseDetail.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="course-detail">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
+    <!-- 返回按钮（可选） -->
+    <div v-if="showBackButton" class="back-header">
+      <el-button @click="handleBack" :icon="ArrowLeft">{{ backButtonText }}</el-button>
     </div>
 
     <!-- 加载中 -->
@@ -202,11 +202,20 @@ import type { CourseVO, LearningRecord } from '@/types';
 import { CollectionType } from '@/types';
 import { FILE_DOWNLOAD_URL } from '@/config';
 
+defineOptions({
+  name: 'CourseDetail'
+});
+
 interface Props {
   courseId: string;
+  showBackButton?: boolean;
+  backButtonText?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  showBackButton: false,
+  backButtonText: '返回'
+});
 
 const emit = defineEmits<{
   'back': [];
@@ -215,7 +224,9 @@ const emit = defineEmits<{
 
 const router = useRouter();
 const store = useStore();
-const authStore = computed(() => store.state.auth);
+
+// 从 store 获取用户信息
+const userInfo = computed(() => store.getters['auth/user']);
 
 const loading = ref(false);
 const enrolling = ref(false);
@@ -278,11 +289,11 @@ async function loadCourseDetail() {
 
 // 检查收藏状态
 async function checkCollectionStatus() {
-  if (!authStore.value.userInfo?.userID) return;
+  if (!userInfo.value?.id) return;
   
   try {
     const res = await userCollectionApi.isCollected(
-      authStore.value.userInfo.userID,
+      userInfo.value.id,
       CollectionType.COURSE,
       props.courseId
     );
@@ -296,11 +307,11 @@ async function checkCollectionStatus() {
 
 // 加载学习进度
 async function loadLearningProgress() {
-  if (!authStore.value.userInfo?.userID) return;
+  if (!userInfo.value?.id) return;
   
   try {
     const res = await learningRecordApi.getRecordList({
-      userID: authStore.value.userInfo.userID,
+      userID: userInfo.value.id,
       resourceType: 2, // 课程类型
       resourceID: props.courseId
     });
@@ -316,7 +327,7 @@ async function loadLearningProgress() {
 
 // 处理收藏
 async function handleCollect() {
-  if (!authStore.value.userInfo?.userID) {
+  if (!userInfo.value?.id) {
     ElMessage.warning('请先登录');
     router.push('/login');
     return;
@@ -326,7 +337,7 @@ async function handleCollect() {
     if (isCollected.value) {
       // 取消收藏
       const res = await userCollectionApi.removeCollection(
-        authStore.value.userInfo.userID,
+        userInfo.value.id,
         CollectionType.COURSE,
         props.courseId
       );
@@ -337,7 +348,7 @@ async function handleCollect() {
     } else {
       // 添加收藏
       const res = await userCollectionApi.addCollection({
-        userID: authStore.value.userInfo.userID,
+        userID: userInfo.value.id,
         collectionType: CollectionType.COURSE,
         collectionID: props.courseId
       });
@@ -354,7 +365,7 @@ async function handleCollect() {
 
 // 开始学习
 async function handleStartLearning() {
-  if (!authStore.value.userInfo?.userID) {
+  if (!userInfo.value?.id) {
     ElMessage.warning('请先登录');
     router.push('/login');
     return;
@@ -371,7 +382,7 @@ async function handleStartLearning() {
     if (!isEnrolled.value) {
       await courseApi.incrementLearnCount(props.courseId);
       await learningRecordApi.createRecord({
-        userID: authStore.value.userInfo.userID,
+        userID: userInfo.value.id,
         resourceType: 2, // 课程
         resourceID: props.courseId,
         progress: 0,
@@ -393,7 +404,7 @@ async function handleStartLearning() {
 
 // 点击节点
 function handleNodeClick(chapterIndex: number, nodeIndex: number) {
-  if (!authStore.value.userInfo?.userID) {
+  if (!userInfo.value?.id) {
     ElMessage.warning('请先登录');
     router.push('/login');
     return;
@@ -428,13 +439,11 @@ function formatDuration(minutes?: number): string {
   padding-bottom: 60px;
 }
 
-.page-header {
+.back-header {
   padding: 16px 24px;
   background: #fff;
   border-bottom: 1px solid #e4e7ed;
-  position: sticky;
-  top: 0;
-  z-index: 10;
+  margin-bottom: 0;
 }
 
 .loading {