完善团课推荐页面

gym-manage-uniapp/components/index/RecommendCourses.vue

@@ -20,7 +20,7 @@
       <view class="courses-list">
         <!-- 课程卡片 -->
         <CourseCard
-          v-for="(course, index) in courses"
+          v-for="(course, index) in displayCourses"
           :key="course.id || index"
           :course="course"
           @join="handleJoinCourse"
@@ -31,15 +31,16 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { getGroupCoursePage } from '@/api/main.js'
+import { computed } from 'vue'
 import CourseCard from './CourseCard.vue'
 
-// 测试开关：设置为 true 时使用假数据，false 时使用真实API数据
-const USE_MOCK_DATA = true
-
-// 推荐课程数据列表
-const courses = ref([])
+// 接收父组件传递的数据
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({ list: [] })
+  }
+})
 
 // 课程类型映射（用于显示标签）
 const getCourseTypeName = (type) => {
@@ -91,44 +92,21 @@ const getImageUrl = (coverImage) => {
   return `https://your-domain.com${coverImage}`
 }
 
-// 获取推荐课程
-const fetchRecommendCourses = async () => {
-  // 如果测试开关打开，直接使用假数据
-  if (USE_MOCK_DATA) {
-    useFallbackData()
-    return
-  }
-  
-  try {
-    const res = await getGroupCoursePage({
-      page: 0, size: 5, sort: 'current_members', order: 'desc'
-    }, { cache: true, cacheTime: 5 * 60 * 1000 })
-    if (res && res.content && Array.isArray(res.content)) {
-      courses.value = res.content.map(course => ({
-        id: course.id, image: getImageUrl(course.coverImage), tag: getTag(course),
-        tagType: getTagType(course), name: course.courseName || '未知课程',
-        duration: calculateDuration(course.startTime, course.endTime),
-        level: getCourseLevel(course), participants: course.currentMembers || 0, rawData: course
-      }))
-    } else { useFallbackData() }
-  } catch (err) { useFallbackData() }
-}
-
-const useFallbackData = () => {
-  const fallbackContent = [
-    { id: "3", courseName: "燃脂搏击", courseType: "2", startTime: "2026-06-10T18:30:00", endTime: "2026-06-10T19:30:00", maxMembers: 20, currentMembers: 20, status: "0", coverImage: "https://picsum.photos/id/100/800/600", description: "高强度间歇训练" },
-    { id: "2", courseName: "清晨流瑜伽", courseType: "1", startTime: "2026-06-12T09:00:00", endTime: "2026-06-12T10:30:00", maxMembers: 15, currentMembers: 5, status: "0", coverImage: "https://picsum.photos/id/101/800/600", description: "流畅体式" },
-    { id: "4", courseName: "哈他瑜伽", courseType: "1", startTime: "2026-06-01T15:20:00", endTime: "2026-06-01T16:50:00", maxMembers: 12, currentMembers: 3, status: "0", coverImage: "https://picsum.photos/id/102/800/600", description: "基础瑜伽" },
-    { id: "6", courseName: "蜜桃臀塑造", courseType: "3", startTime: "2026-05-30T19:00:00", endTime: "2026-05-30T20:00:00", maxMembers: 10, currentMembers: 8, status: "2", coverImage: "https://picsum.photos/id/103/800/600", description: "臀部训练" },
-    { id: "7", courseName: "午间冥想放松", courseType: "1", startTime: "2026-05-31T12:00:00", endTime: "2026-05-31T13:00:00", maxMembers: 15, currentMembers: 6, status: "2", coverImage: "https://picsum.photos/id/104/800/600", description: "冥想" }
-  ]
-  courses.value = fallbackContent.map(course => ({
-    id: course.id, image: getImageUrl(course.coverImage), tag: getTag(course),
-    tagType: getTagType(course), name: course.courseName || '未知课程',
+// 将原始课程数据转换为卡片需要的格式
+const displayCourses = computed(() => {
+  const list = props.data?.list || []
+  return list.map(course => ({
+    id: course.id,
+    image: getImageUrl(course.coverImage),
+    tag: getTag(course),
+    tagType: getTagType(course),
+    name: course.courseName || '未知课程',
     duration: calculateDuration(course.startTime, course.endTime),
-    level: getCourseLevel(course), participants: course.currentMembers || 0, rawData: course
+    level: getCourseLevel(course),
+    participants: course.currentMembers || 0,
+    rawData: course
   }))
-}
+})
 
 const handleJoinCourse = (course) => {
   if (course.rawData.status === '2') { uni.showToast({ title: '课程已结束', icon: 'none' }); return }
@@ -136,8 +114,6 @@ const handleJoinCourse = (course) => {
   uni.navigateTo({ url: `/pages/course/detail?id=${course.id}` })
 }
 
-onMounted(() => { fetchRecommendCourses() })
-
 function goMore(){
 	uni.navigateTo({ url: '/pages/recommendCourses/index' })
 }