教师端功能

src/views/Home.vue

@@ -90,7 +90,7 @@
               <div class="course-meta">
                 <span class="course-students">{{ course.studentsCount }}{{ t('home.popularCourses.studentsEnrolled')
                   }}</span>
-                <button class="enroll-btn" @click="handleEnrollCourse(course.id)">{{ t('home.popularCourses.enroll')
+                <button class="enroll-btn" @click.stop="handleEnrollCourse(course.id, $event)">{{ t('home.popularCourses.enroll')
                   }}</button>
               </div>
             </div>
@@ -520,23 +520,90 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, computed, ref } from 'vue'
+import { computed, ref, onMounted } 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 { enrollCourseExample } from '@/api/examples/usage'
+import { CourseApi } from '@/api/modules/course'
+
 // import { getPopularCourses } from '@/data/mockCourses'
 
 const { t, locale } = useI18n()
 const router = useRouter()
 const courseStore = useCourseStore()
+// @ts-ignore
 const userStore = useUserStore()
 const { loginModalVisible, registerModalVisible, handleAuthSuccess } = useAuth()
 
+// 跳转到课程详情页面
+const goToCourseDetail = async (courseId: string) => {
+  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}`)
+  }
+}
+
+// 处理课程报名
+const handleEnrollCourse = (courseId: string | number, event?: Event) => {
+  // 阻止事件冒泡，避免触发卡片点击事件
+  if (event) {
+    event.stopPropagation()
+  }
+  enrollCourseExample(Number(courseId))
+}
+
+// 显示问题反馈模态框
+const showIssueModal = () => {
+  // 跳转到帮助中心并刷新
+  router.push('/help-center').then(() => {
+    window.location.reload();
+  })
+}
+
+// 返回顶部
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
 // 控制广告显示状态
 const showAdvertisement = ref(true)
 
@@ -655,7 +722,8 @@ const aiCards = computed(() => [
 ])
 
 // 合作伙伴数据
-const partners = computed(() => [
+// 注释掉未使用的变量
+/* const partners = computed(() => [
   {
     id: 1,
     name: '云南师范大学',
@@ -686,7 +754,7 @@ const partners = computed(() => [
     name: '德宏师范学院',
     logo: '/logo/德宏师范.jpg'
   }
-])
+]) */
 
 // 精选评论数据
 // const featuredReviews = computed(() => [
@@ -720,65 +788,7 @@ const partners = computed(() => [
 //   }
 // ])
 
-// 跳转到课程详情页面
+// 这里的函数已移至前面定义，避免重复声明
-const goToCourseDetail = async (courseId: string) => {
-  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}`)
-  }
-}
-
-// 处理课程报名 - 跳转到课程详情页面
-const handleEnrollCourse = (courseId: string) => {
-  // 跳转到课程详情页面，在那里进行登录状态判断和报名
-  router.push(`/course/${courseId}`)
-}
-
-// 滚动到顶部
-const scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth'
-  })
-}
-
-const showIssueModal = () => {
-  // 跳转到帮助中心并刷新
-  router.push('/help-center').then(() => {
-    window.location.reload();
-  })
-}
 
 onMounted(async () => {
   await courseStore.fetchCourses()