1

src/api/modules/course.ts

@@ -544,11 +544,71 @@ export class CourseApi {
   }
 
   // 报名课程
-  static enrollCourse(courseId: number): Promise<ApiResponse<{
+  static async enrollCourse(courseId: string): Promise<ApiResponse<{
-    enrollmentId: number
+    success: boolean
     message: string
+    result?: any
   }>> {
-    return ApiRequest.post(`/courses/${courseId}/enroll`)
+    try {
+      console.log('🔍 报名课程，课程ID:', courseId)
+      console.log('🔍 API请求URL: /biz/course/' + courseId + '/enroll')
+
+      const response = await ApiRequest.post<any>(`/biz/course/${courseId}/enroll`)
+      console.log('🔍 报名API响应:', response)
+
+      // 处理后端响应格式
+      if (response.data && typeof response.data === 'object') {
+        // 如果响应包含success字段，使用标准格式
+        if ('success' in response.data) {
+          return {
+            code: response.data.code || 0,
+            message: response.data.message || '报名成功',
+            data: {
+              success: response.data.success || false,
+              message: response.data.message || '',
+              result: response.data
+            }
+          }
+        }
+      }
+
+      // 默认返回成功状态
+      return {
+        code: 0,
+        message: '报名成功',
+        data: {
+          success: true,
+          message: '报名成功',
+          result: null
+        }
+      }
+    } catch (error: any) {
+      console.error('❌ 课程报名失败:', error)
+
+      // 如果是401错误，说明未登录
+      if (error.response?.status === 401) {
+        return {
+          code: 401,
+          message: '请先登录',
+          data: {
+            success: false,
+            message: '请先登录',
+            result: null
+          }
+        }
+      }
+
+      // 其他错误
+      return {
+        code: error.response?.status || 500,
+        message: error.message || '报名失败',
+        data: {
+          success: false,
+          message: error.message || '报名失败',
+          result: null
+        }
+      }
+    }
   }
 
   // 取消报名
@@ -556,6 +616,81 @@ export class CourseApi {
     return ApiRequest.delete(`/courses/${courseId}/enroll`)
   }
 
+  // 检查课程报名状态
+  static async checkEnrollmentStatus(courseId: string): Promise<ApiResponse<{
+    result: boolean
+    message?: string
+  }>> {
+    try {
+      console.log('🔍 检查课程报名状态，课程ID:', courseId)
+      console.log('🔍 API请求URL: /biz/course/' + courseId + '/is_enrolled')
+
+      const response = await ApiRequest.get<any>(`/biz/course/${courseId}/is_enrolled`)
+      console.log('🔍 报名状态API响应:', response)
+
+      // 处理后端响应格式
+      if (response.data && typeof response.data === 'object') {
+        // 如果响应包含success字段，使用标准格式
+        if ('success' in response.data) {
+          return {
+            code: response.data.code || 0,
+            message: response.data.message || '',
+            data: {
+              result: response.data.result || false,
+              message: response.data.message
+            }
+          }
+        }
+
+        // 如果直接返回result字段
+        if ('result' in response.data) {
+          return {
+            code: 0,
+            message: '查询成功',
+            data: {
+              result: response.data.result || false,
+              message: response.data.message
+            }
+          }
+        }
+      }
+
+      // 默认返回未报名状态
+      return {
+        code: 0,
+        message: '查询成功',
+        data: {
+          result: false,
+          message: '未报名'
+        }
+      }
+    } catch (error: any) {
+      console.error('❌ 检查课程报名状态失败:', error)
+
+      // 如果是401错误，说明未登录
+      if (error.response?.status === 401) {
+        return {
+          code: 401,
+          message: '请先登录',
+          data: {
+            result: false,
+            message: '请先登录'
+          }
+        }
+      }
+
+      // 其他错误，默认返回未报名状态
+      return {
+        code: error.response?.status || 500,
+        message: error.message || '查询失败',
+        data: {
+          result: false,
+          message: error.message || '查询失败'
+        }
+      }
+    }
+  }
+
   // 获取课程章节列表
   static async getCourseSections(courseId: string): Promise<ApiResponse<CourseSectionListResponse>> {
     try {

src/views/CourseDetail.vue

@@ -1300,26 +1300,48 @@ const confirmEnrollment = async () => {
   try {
     enrollmentLoading.value = true
 
-    // 模拟API调用
+    console.log('开始报名课程，课程ID:', courseId.value)
-    await new Promise(resolve => setTimeout(resolve, 1000))
 
-    // 报名成功
+    // 调用报名API
-    isEnrolled.value = true
+    const response = await CourseApi.enrollCourse(String(courseId.value))
-    enrollConfirmVisible.value = false
-    enrollSuccessVisible.value = true
 
-    // 2秒后跳转到已报名状态的课程详情页面并刷新
+    if (response.code === 0 && response.data && response.data.success) {
-    setTimeout(() => {
+      // 检查是否是已经报名的情况
-      enrollSuccessVisible.value = false
+      if (response.data.result && typeof response.data.result === 'object' && response.data.result.code === 'already_enrolled') {
-      // 跳转到已报名状态页面
+        // 用户已经报名，直接跳转到已报名页面
-      router.push(`/course/${courseId.value}/enrolled`).then(() => {
+        console.log('用户已经报名该课程，直接跳转到已报名页面')
-        // 手动刷新页面
+        isEnrolled.value = true
-        window.location.reload();
+        enrollConfirmVisible.value = false
-      })
+        router.push(`/course/${courseId.value}/enrolled`)
-    }, 2000)
+        return
+      }
 
-  } catch (error) {
+      // 新报名成功
+      console.log('报名成功:', response.data.message)
+      isEnrolled.value = true
+      enrollConfirmVisible.value = false
+      enrollSuccessVisible.value = true
+
+      // 2秒后跳转到已报名状态的课程详情页面并刷新
+      setTimeout(() => {
+        enrollSuccessVisible.value = false
+        // 跳转到已报名状态页面
+        router.push(`/course/${courseId.value}/enrolled`).then(() => {
+          // 手动刷新页面
+          window.location.reload();
+        })
+      }, 2000)
+    } else {
+      // 报名失败
+      const errorMessage = response.data?.message || response.message || '报名失败'
+      console.error('报名失败:', errorMessage)
+      alert('报名失败：' + errorMessage)
+    }
+
+  } catch (error: any) {
     console.error('报名失败:', error)
+    const errorMessage = error.response?.data?.message || error.message || '网络错误，请稍后重试'
+    alert('报名失败：' + errorMessage)
   } finally {
     enrollmentLoading.value = false
   }
@@ -1330,6 +1352,30 @@ const cancelEnrollment = () => {
   enrollConfirmVisible.value = false
 }
 
+// 检查用户报名状态
+const checkUserEnrollmentStatus = async () => {
+  if (!userStore.isLoggedIn) {
+    isEnrolled.value = false
+    return
+  }
+
+  try {
+    console.log('检查用户报名状态，课程ID:', courseId.value)
+    const response = await CourseApi.checkEnrollmentStatus(String(courseId.value))
+
+    if (response.code === 0 && response.data) {
+      isEnrolled.value = response.data.result
+      console.log('用户报名状态:', isEnrolled.value ? '已报名' : '未报名')
+    } else {
+      console.warn('检查报名状态失败:', response.message)
+      isEnrolled.value = false
+    }
+  } catch (error) {
+    console.error('检查报名状态时发生错误:', error)
+    isEnrolled.value = false
+  }
+}
+
 // 处理未报名用户点击
 const handleUnregisteredClick = (section: CourseSection) => {
   console.log('未报名用户点击课程:', section.name)
@@ -1374,13 +1420,14 @@ const initializeMockState = () => {
     userStore.token = 'mock-token'
   }
 
-  // 模拟用户未报名状态，可以测试完整的报名流程
+  // 不再强制设置报名状态，而是通过API检查真实状态
-  isEnrolled.value = false  // false=未报名状态，true=已报名状态
+  // isEnrolled.value = false  // 注释掉强制设置
 }
 
-onMounted(() => {
+onMounted(async () => {
   console.log('课程详情页加载完成，课程ID:', courseId.value)
   initializeMockState()  // 初始化模拟状态
+  await checkUserEnrollmentStatus()  // 检查用户报名状态
   loadCourseDetail()
   loadCourseSections() // 启用章节接口调用
   loadCourseInstructors() // 启用讲师接口调用

src/views/Courses.vue

@@ -162,8 +162,10 @@ import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Course, CourseCategory, CourseSubject, CourseDifficulty } from '@/api/types'
 import { CourseApi } from '@/api'
+import { useUserStore } from '@/stores/user'
 
 const router = useRouter()
+const userStore = useUserStore()
 
 // 课程数据和加载状态
 const courses = ref<Course[]>([])
@@ -419,11 +421,51 @@ const getCourseInstructors = (course: Course) => {
 }
 
 // 跳转到课程详情页
-const goToCourseDetail = (course: Course) => {
+const goToCourseDetail = async (course: Course) => {
-  router.push({
+  try {
-    name: 'CourseDetail',
+    // 检查用户是否已登录
-    params: { id: course.id }
+    if (!userStore.isLoggedIn) {
-  })
+      console.log('用户未登录，跳转到课程详情页')
+      router.push({
+        name: 'CourseDetail',
+        params: { id: course.id }
+      })
+      return
+    }
+
+    console.log('检查课程报名状态，课程ID:', course.id)
+
+    // 调用报名状态检查接口
+    const response = await CourseApi.checkEnrollmentStatus(String(course.id))
+
+    if ((response.code === 0 || response.code === 200) && response.data) {
+      const isEnrolled = response.data.result
+
+      if (isEnrolled) {
+        // 已报名，跳转到已报名页面
+        console.log('用户已报名，跳转到已报名页面')
+        router.push(`/course/${course.id}/enrolled`)
+      } else {
+        // 未报名，跳转到课程详情页
+        console.log('用户未报名，跳转到课程详情页')
+        router.push(`/course/${course.id}`)
+      }
+    } else {
+      // 查询失败，默认跳转到课程详情页
+      console.warn('查询报名状态失败，跳转到课程详情页')
+      router.push({
+        name: 'CourseDetail',
+        params: { id: course.id }
+      })
+    }
+  } catch (error) {
+    console.error('检查报名状态时发生错误:', error)
+    // 发生错误时，默认跳转到课程详情页
+    router.push({
+      name: 'CourseDetail',
+      params: { id: course.id }
+    })
+  }
 }
 
 // 选择排序方式

src/views/Home.vue

@@ -521,12 +521,12 @@
 
 <script setup lang="ts">
 import { onMounted, computed, ref } from 'vue'
-
-
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useCourseStore } from '@/stores/course'
+import { useUserStore } from '@/stores/user'
 import { useAuth } from '@/composables/useAuth'
+import { CourseApi } from '@/api'
 import LoginModal from '@/components/auth/LoginModal.vue'
 import RegisterModal from '@/components/auth/RegisterModal.vue'
 // import { getPopularCourses } from '@/data/mockCourses'
@@ -534,6 +534,7 @@ import RegisterModal from '@/components/auth/RegisterModal.vue'
 const { t, locale } = useI18n()
 const router = useRouter()
 const courseStore = useCourseStore()
+const userStore = useUserStore()
 const { loginModalVisible, registerModalVisible, handleAuthSuccess } = useAuth()
 
 // 控制广告显示状态
@@ -720,8 +721,42 @@ const partners = computed(() => [
 // ])
 
 // 跳转到课程详情页面
-const goToCourseDetail = (courseId: string) => {
+const goToCourseDetail = async (courseId: string) => {
-  router.push(`/course/${courseId}`)
+  try {
+    // 检查用户是否已登录
+    if (!userStore.isLoggedIn) {
+      console.log('用户未登录，跳转到课程详情页')
+      router.push(`/course/${courseId}`)
+      return
+    }
+
+    console.log('检查课程报名状态，课程ID:', courseId)
+
+    // 调用报名状态检查接口
+    const response = await CourseApi.checkEnrollmentStatus(String(courseId))
+
+    if ((response.code === 0 || response.code === 200) && response.data) {
+      const isEnrolled = response.data.result
+
+      if (isEnrolled) {
+        // 已报名，跳转到已报名页面
+        console.log('用户已报名，跳转到已报名页面')
+        router.push(`/course/${courseId}/enrolled`)
+      } else {
+        // 未报名，跳转到课程详情页
+        console.log('用户未报名，跳转到课程详情页')
+        router.push(`/course/${courseId}`)
+      }
+    } else {
+      // 查询失败，默认跳转到课程详情页
+      console.warn('查询报名状态失败，跳转到课程详情页')
+      router.push(`/course/${courseId}`)
+    }
+  } catch (error) {
+    console.error('检查报名状态时发生错误:', error)
+    // 发生错误时，默认跳转到课程详情页
+    router.push(`/course/${courseId}`)
+  }
 }
 
 // 处理课程报名 - 跳转到课程详情页面

src/views/TeacherDetail.vue

@@ -128,9 +128,12 @@ const toggleFollow = () => {
 }
 import { useRouter } from 'vue-router'
 import type { Course } from '@/api/types'
+import { CourseApi } from '@/api'
+import { useUserStore } from '@/stores/user'
 // import { mockCourses } from '@/data/mockCourses'
 
 const router = useRouter()
+const userStore = useUserStore()
 
 // 课程数据和加载状态
 const courses = ref<Course[]>([])
@@ -556,11 +559,51 @@ const getCourseTitle = (course: Course) => {
 }
 
 // 跳转到课程详情页
-const goToCourseDetail = (course: Course) => {
+const goToCourseDetail = async (course: Course) => {
-  router.push({
+  try {
-    name: 'CourseDetail',
+    // 检查用户是否已登录
-    params: { id: course.id }
+    if (!userStore.isLoggedIn) {
-  })
+      console.log('用户未登录，跳转到课程详情页')
+      router.push({
+        name: 'CourseDetail',
+        params: { id: course.id }
+      })
+      return
+    }
+
+    console.log('检查课程报名状态，课程ID:', course.id)
+
+    // 调用报名状态检查接口
+    const response = await CourseApi.checkEnrollmentStatus(String(course.id))
+
+    if ((response.code === 0 || response.code === 200) && response.data) {
+      const isEnrolled = response.data.result
+
+      if (isEnrolled) {
+        // 已报名，跳转到已报名页面
+        console.log('用户已报名，跳转到已报名页面')
+        router.push(`/course/${course.id}/enrolled`)
+      } else {
+        // 未报名，跳转到课程详情页
+        console.log('用户未报名，跳转到课程详情页')
+        router.push(`/course/${course.id}`)
+      }
+    } else {
+      // 查询失败，默认跳转到课程详情页
+      console.warn('查询报名状态失败，跳转到课程详情页')
+      router.push({
+        name: 'CourseDetail',
+        params: { id: course.id }
+      })
+    }
+  } catch (error) {
+    console.error('检查报名状态时发生错误:', error)
+    // 发生错误时，默认跳转到课程详情页
+    router.push({
+      name: 'CourseDetail',
+      params: { id: course.id }
+    })
+  }
 }
 
 // 组件挂载时加载数据