完善团课推荐页面

2026-06-15 18:03:42 +08:00
parent 4e69185c48
commit d7961694f9
5 changed files with 540 additions and 174 deletions
@@ -91,6 +91,14 @@ export function getMemberBookings(memberId, options = {}) {
  return request.get(`/groupCourse/bookings/member/${memberId}`, {}, options)
 }

+export function getActiveRecommendCourses(options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
+  return request.get('/groupCourse/recommend/active', {}, options)
+}
+
+export function getGroupCourseRecommendList(params = {}, options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
+  return request.get('/groupCourse/recommend/list', params, options)
+}
+
 export default {
  getGroupCourseList,
  getGroupCoursePage,
@@ -106,5 +114,7 @@ export default {
  getTypeLabels,
  bookGroupCourse,
  cancelBooking,
-  getMemberBookings
+  getMemberBookings,
+  getActiveRecommendCourses,
+  getGroupCourseRecommendList
 }
@@ -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' })
 }
@@ -0,0 +1,371 @@
+<template>
+  <!-- 推荐团课卡片 -->
+  <view class="recommend-card" :style="cardStyle">
+    <!-- 卡片头部：推荐信息 -->
+    <view class="card-header">
+      <text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
+      <text class="recommend-content">{{ recommend.recommendContent }}</text>
+      <view class="recommend-reason" v-if="recommend.recommendReason">
+        <text class="reason-label">推荐理由：</text>
+        <text class="reason-text">{{ recommend.recommendReason }}</text>
+      </view>
+    </view>
+    
+    <!-- 分割线 -->
+    <view class="divider"></view>
+    
+    <!-- 卡片主体：团课信息 -->
+    <view class="card-body">
+      <!-- 团课封面 -->
+      <view class="course-image-wrapper">
+        <image :src="courseImage" mode="aspectFill" class="course-image" />
+        <view class="image-overlay"></view>
+      </view>
+      
+      <!-- 团课详情 -->
+      <view class="course-info">
+        <text class="course-name">{{ courseName }}</text>
+        
+        <!-- 课程标签 -->
+        <view class="course-tags">
+          <text :class="['course-tag', tagType]">{{ tagText }}</text>
+          <text class="course-type">{{ courseTypeName }}</text>
+        </view>
+        
+        <!-- 课程时间 -->
+        <view class="course-time" v-if="courseStartTime">
+          <text class="time-icon">📅</text>
+          <text class="time-text">{{ formattedTime }}</text>
+        </view>
+        
+        <!-- 地点 -->
+        <view class="course-location" v-if="courseLocation">
+          <text class="location-icon">📍</text>
+          <text class="location-text">{{ courseLocation }}</text>
+        </view>
+        
+        <!-- 参与人数 -->
+        <view class="course-members">
+          <text class="members-icon">🔥</text>
+          <text class="members-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
+        </view>
+        
+        <!-- 课程描述 -->
+        <text class="course-description" v-if="courseDescription">{{ courseDescription }}</text>
+      </view>
+    </view>
+    
+    <!-- 卡片底部：操作按钮 -->
+    <view class="card-footer">
+      <view class="action-btn" @click="handleJoinCourse">
+        <text>立即预约</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  recommend: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  width: {
+    type: [Number, String],
+    default: '100%',
+    description: '卡片宽度'
+  },
+  borderRadius: {
+    type: [Number, String],
+    default: 24,
+    description: '卡片圆角，单位 rpx'
+  }
+})
+
+// 计算卡片样式
+const cardStyle = computed(() => {
+  const style = {}
+  if (props.width) {
+    style.width = typeof props.width === 'number' ? `${props.width}rpx` : props.width
+  }
+  if (props.borderRadius) {
+    style.borderRadius = typeof props.borderRadius === 'number' ? `${props.borderRadius}rpx` : props.borderRadius
+  }
+  return style
+})
+
+// 团课信息
+const courseName = computed(() => props.recommend.groupCourse?.courseName || '未知课程')
+const courseStartTime = computed(() => props.recommend.groupCourse?.startTime)
+const courseEndTime = computed(() => props.recommend.groupCourse?.endTime)
+const courseMaxMembers = computed(() => props.recommend.groupCourse?.maxMembers)
+const courseCurrentMembers = computed(() => props.recommend.groupCourse?.currentMembers)
+const courseLocation = computed(() => props.recommend.groupCourse?.location)
+const courseDescription = computed(() => props.recommend.groupCourse?.description)
+const courseId = computed(() => props.recommend.groupCourse?.id)
+
+// 课程封面图片
+const courseImage = computed(() => {
+  const coverImage = props.recommend.groupCourse?.coverImage
+  if (!coverImage) return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
+  if (coverImage.startsWith('http')) return coverImage
+  return `https://your-domain.com${coverImage}`
+})
+
+// 课程类型映射
+const courseTypeName = computed(() => {
+  const typeMap = {
+    1: '瑜伽',
+    2: '搏击',
+    3: '塑形'
+  }
+  return typeMap[props.recommend.groupCourse?.courseType] || '课程'
+})
+
+// 课程标签文本
+const tagText = computed(() => {
+  const current = courseCurrentMembers.value || 0
+  const max = courseMaxMembers.value || 0
+  if (current >= max) return '已满员'
+  if (props.recommend.groupCourse?.status === 2) return '已结束'
+  if (props.recommend.groupCourse?.status === 1) return '已取消'
+  if (max > 0 && current / max >= 0.8) return '热门'
+  return '推荐'
+})
+
+// 课程标签类型
+const tagType = computed(() => {
+  const current = courseCurrentMembers.value || 0
+  const max = courseMaxMembers.value || 0
+  if (current >= max) return 'full'
+  if (props.recommend.groupCourse?.status === 2) return 'ended'
+  if (props.recommend.groupCourse?.status === 1) return 'ended'
+  if (max > 0 && current / max >= 0.8) return 'hot'
+  return 'default'
+})
+
+// 格式化课程时间
+const formattedTime = computed(() => {
+  if (!courseStartTime.value) return ''
+  const start = new Date(courseStartTime.value)
+  const date = `${start.getMonth() + 1}月${start.getDate()}日`
+  const time = `${String(start.getHours()).padStart(2, '0')}:${String(start.getMinutes()).padStart(2, '0')}`
+  
+  if (courseEndTime.value) {
+    const end = new Date(courseEndTime.value)
+    const endTime = `${String(end.getHours()).padStart(2, '0')}:${String(end.getMinutes()).padStart(2, '0')}`
+    return `${date} ${time}-${endTime}`
+  }
+  
+  return `${date} ${time}`
+})
+
+// 处理预约课程点击
+const handleJoinCourse = () => {
+  if (props.recommend.groupCourse?.status === 2) {
+    uni.showToast({ title: '课程已结束', icon: 'none' })
+    return
+  }
+  if (props.recommend.groupCourse?.status === 1) {
+    uni.showToast({ title: '课程已取消', icon: 'none' })
+    return
+  }
+  const current = courseCurrentMembers.value || 0
+  const max = courseMaxMembers.value || 0
+  if (current >= max) {
+    uni.showToast({ title: '课程已满员', icon: 'none' })
+    return
+  }
+  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${courseId.value}` })
+}
+</script>
+
+<style lang="scss">
+.recommend-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 32rpx rgba(45, 74, 90, 0.1);
+  border: 1rpx solid rgba(124, 181, 204, 0.2);
+  margin-bottom: 24rpx;
+}
+
+// 卡片头部
+.card-header {
+  padding: 24rpx;
+  background: linear-gradient(135deg, rgba(124, 181, 204, 0.1), rgba(156, 207, 223, 0.05));
+}
+
+.recommend-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #2D4A5A;
+  margin-bottom: 12rpx;
+  display: block;
+}
+
+.recommend-content {
+  display: block;
+  font-size: 26rpx;
+  color: #5A7A8A;
+  line-height: 1.6;
+  margin-bottom: 12rpx;
+}
+
+.recommend-reason {
+  display: flex;
+  align-items: flex-start;
+  gap: 8rpx;
+}
+
+.reason-label {
+  font-size: 24rpx;
+  color: #8CA0B0;
+  flex-shrink: 0;
+}
+
+.reason-text {
+  font-size: 24rpx;
+  color: #6A8A9A;
+  line-height: 1.5;
+}
+
+// 分割线
+.divider {
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, rgba(124, 181, 204, 0.3), transparent);
+  margin: 0 24rpx;
+}
+
+// 卡片主体
+.card-body {
+  padding: 24rpx;
+  display: flex;
+  gap: 24rpx;
+}
+
+.course-image-wrapper {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.course-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(to top, rgba(45, 74, 90, 0.4) 0%, transparent 50%);
+}
+
+// 团课详情
+.course-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.course-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #2D4A5A;
+}
+
+.course-tags {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.course-tag {
+  padding: 6rpx 16rpx;
+  border-radius: 10rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #7CB5CC, #9CCFDF);
+  &.hot {
+    background: linear-gradient(135deg, #FF8C69, #FFA07A);
+  }
+  &.full {
+    background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
+  }
+  &.ended {
+    background: linear-gradient(135deg, #C0CCD0, #D0D8DC);
+  }
+}
+
+.course-type {
+  font-size: 22rpx;
+  color: #8CA0B0;
+}
+
+.course-time,
+.course-location,
+.course-members {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.time-icon,
+.location-icon,
+.members-icon {
+  font-size: 24rpx;
+}
+
+.time-text,
+.location-text,
+.members-text {
+  font-size: 24rpx;
+  color: #5A7A8A;
+}
+
+.course-description {
+  font-size: 24rpx;
+  color: #8CA0B0;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+// 卡片底部
+.card-footer {
+  padding: 16rpx 24rpx 24rpx;
+}
+
+.action-btn {
+  width: 100%;
+  height: 80rpx;
+  background: linear-gradient(135deg, #82DC82, #66CC66);
+  border-radius: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(130, 220, 130, 0.35);
+  
+  text {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #ffffff;
+  }
+}
+</style>
@@ -44,6 +44,7 @@ import RecommendCourses from '@/components/index/RecommendCourses.vue'
 import PageHeader from '@/components/index/PageHeader.vue'
 import TabBar from '@/components/TabBar.vue'
 import { PAGE, navigateToPage } from '@/common/constants/routes.js'
+import { getActiveRecommendCourses } from '@/api/groupCourse.js'

 const loading = ref(true)
 const courseData = ref(null)
@@ -53,41 +54,71 @@ function loadFromCache() {
  try {
    const cached = uni.getStorageSync('course_cache')
    if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
+      console.log('[Course Page] 从缓存加载数据，缓存时间:', new Date(cached.time).toLocaleString())
      courseData.value = cached.data
      loading.value = false
      return true
    }
  } catch (e) {
-    console.error('读取缓存失败', e)
+    console.error('[Course Page] 读取缓存失败', e)
  }
+  console.log('[Course Page] 缓存不存在或已过期，准备从网络加载')
  return false
 }

 // 从网络加载数据
 async function loadFromNetwork() {
  loading.value = true
+  console.log('[Course Page] 开始从后端获取团课推荐数据...')
  
  try {
-    // 模拟 API 请求
-    const res = await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({ code: 0, data: { list: [] } })
-      }, 500)
-    })
+    // 获取启用的团课推荐列表（按优先级从高到低排序）
+    console.log('[Course Page] 发起 API 请求: GET /groupCourse/recommend/active')
+    const res = await getActiveRecommendCourses()
+    
+    console.log('[Course Page] API 响应数据:', res)
+    
+    if (res && Array.isArray(res)) {
+      console.log('[Course Page] 获取到', res.length, '条团课推荐数据')
+      
+      // 取优先级最高的5个团课
+      const top5Courses = res.slice(0, 5).map(recommend => ({
+        id: recommend.groupCourse.id,
+        courseName: recommend.groupCourse.courseName,
+        courseType: recommend.groupCourse.courseType,
+        startTime: recommend.groupCourse.startTime,
+        endTime: recommend.groupCourse.endTime,
+        maxMembers: recommend.groupCourse.maxMembers,
+        currentMembers: recommend.groupCourse.currentMembers,
+        status: recommend.groupCourse.status,
+        coverImage: recommend.groupCourse.coverImage,
+        description: recommend.groupCourse.description,
+        recommendTitle: recommend.recommendTitle,
+        recommendContent: recommend.recommendContent,
+        recommendReason: recommend.recommendReason,
+        priority: recommend.priority
+      }))
+      
+      console.log('[Course Page] 筛选出前5个优先级最高的团课:', top5Courses)
+      courseData.value = { list: top5Courses }
      
-    if (res.code === 0) {
-      courseData.value = res.data
      // 更新缓存
      uni.setStorageSync('course_cache', {
-        data: res.data,
+        data: courseData.value,
        time: Date.now()
      })
+      console.log('[Course Page] 数据已缓存')
+    } else {
+      console.log('[Course Page] API 响应为空或格式不正确')
+      courseData.value = { list: [] }
    }
  } catch (err) {
-    console.error('加载失败', err)
+    console.error('[Course Page] 加载失败:', err)
    uni.showToast({ title: '加载失败', icon: 'none' })
+    courseData.value = { list: [] }
  } finally {
    loading.value = false
+    console.log('[Course Page] 数据加载完成，loading:', loading.value)
  }
 }

@@ -113,8 +144,8 @@ onLoad(() => {
 })

 onShow(() => {
-  // 每次显示时确保加载完成
-  if (loading.value && !courseData.value) {
+  // 每次显示时尝试刷新数据（后台静默更新）
+  if (!loading.value) {
    loadFromNetwork()
  }
 })
@@ -8,25 +8,30 @@
    <!-- 骨架屏 -->
    <view v-if="loading" class="skeleton-container">
      <view class="skeleton-card" v-for="i in 3" :key="i">
-        <view class="skeleton-img"></view>
-        <view class="skeleton-text"></view>
-        <view class="skeleton-text-short"></view>
+        <view class="skeleton-header"></view>
+        <view class="skeleton-body">
+          <view class="skeleton-img"></view>
+          <view class="skeleton-text-group">
+            <view class="skeleton-text"></view>
+            <view class="skeleton-text-short"></view>
+          </view>
+        </view>
      </view>
    </view>

-    <!-- 课程列表 -->
+    <!-- 推荐课程列表 -->
    <scroll-view v-else class="courses-container" scroll-y="true">
-      <view class="courses-grid">
-        <CourseCard
-          v-for="course in courses"
-          :key="course.id"
-          :course="course"
-          @join="handleJoinCourse"
+      <view class="courses-list">
+        <RecommendCourseCard
+          v-for="recommend in recommendCourses"
+          :key="recommend.id"
+          :recommend="recommend"
+          @click="handleCardClick(recommend)"
        />
      </view>
      
      <!-- 空状态 -->
-      <view v-if="!loading && courses.length === 0" class="empty-state">
+      <view v-if="!loading && recommendCourses.length === 0" class="empty-state">
        <text class="empty-text">暂无推荐课程</text>
      </view>
      
@@ -38,123 +43,108 @@

 <script setup>
 import { ref, onMounted } from 'vue'
-import CourseCard from '@/components/index/CourseCard.vue'
 import PageHeader from '@/components/index/PageHeader.vue'
-import { groupCourseMockApi } from '@/request_api/groupCourse.mock.js'
+import RecommendCourseCard from '@/components/recommendCourses/RecommendCourseCard.vue'
+import { getGroupCourseRecommendList } from '@/api/groupCourse.js'

-// 课程列表数据
-const courses = ref([])
+// 推荐课程列表数据
+const recommendCourses = ref([])
 // 加载状态
 const loading = ref(true)

-// 课程类型映射（用于显示标签）
-const getCourseTypeName = (type) => {
-  const typeMap = {
-    '1': '瑜伽',
-    '2': '搏击',
-    '3': '塑形'
+// 从缓存加载数据
+function loadFromCache() {
+  try {
+    const cached = uni.getStorageSync('recommend_courses_cache')
+    if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
+      recommendCourses.value = cached.data
+      loading.value = false
+      return true
+    }
+  } catch (e) {
+    console.error('[Recommend Courses Page] 读取缓存失败', e)
  }
-  return typeMap[type] || '课程'
+  return false
 }

-// 根据课程信息获取标签文本
-const getTag = (course) => {
-  if (course.currentMembers >= course.maxMembers) return '已满员'
-  if (course.status === '2') return '已结束'
-  if (course.status === '1') return '已取消'
-  if (course.currentMembers / course.maxMembers >= 0.8) return '热门'
-  return getCourseTypeName(course.courseType)
-}
-
-// 根据课程信息获取标签样式类型
-const getTagType = (course) => {
-  if (course.currentMembers >= course.maxMembers) return 'full'
-  if (course.status === '2') return 'ended'
-  if (course.status === '1') return 'ended'
-  if (course.currentMembers / course.maxMembers >= 0.8) return 'hot'
-  return 'default'
-}
-
-// 计算课程时长
-const calculateDuration = (startTime, endTime) => {
-  if (!startTime || !endTime) return '60分钟'
-  const start = new Date(startTime)
-  const end = new Date(endTime)
-  const durationMinutes = Math.floor((end - start) / (1000 * 60))
-  return `${durationMinutes}分钟`
-}
-
-// 获取课程难度
-const getCourseLevel = (course) => {
-  if (course.courseType === '2') return '中级'
-  if (course.courseType === '3') return '高级'
-  if (course.courseType === '1') return '初级'
-  return '初级'
-}
-
-// 处理图片URL
-const getImageUrl = (coverImage) => {
-  if (!coverImage) return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
-  if (coverImage.startsWith('http')) return coverImage
-  return `https://your-domain.com${coverImage}`
-}
-
-// 转换课程数据格式
-const transformCourseData = (course) => {
-  return {
-    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
-  }
-}
-
-// 获取推荐课程
-const fetchRecommendCourses = async () => {
+// 从网络加载数据
+async function loadFromNetwork() {
  loading.value = true
+  console.log('[Recommend Courses Page] 开始从后端获取团课推荐列表...')
  
  try {
-    // 使用 mock API 获取数据
-    const res = await groupCourseMockApi.getList({
-      pageNum: 1,
-      pageSize: 20
+    // 调用获取所有团课推荐接口
+    console.log('[Recommend Courses Page] 发起 API 请求: GET /groupCourse/recommend/list')
+    const res = await getGroupCourseRecommendList({
+      sortBy: 'priority',
+      sortOrder: 'desc'
    })
    
-    if (res && res.data && res.data.list) {
-      // 按参与人数排序，推荐热门课程
-      const sortedList = res.data.list.sort((a, b) => b.currentMembers - a.currentMembers)
-      courses.value = sortedList.map(course => transformCourseData(course))
+    console.log('[Recommend Courses Page] API 响应数据:', res)
+    
+    if (res && Array.isArray(res)) {
+      recommendCourses.value = res
+      console.log('[Recommend Courses Page] 获取到', res.length, '条推荐课程数据')
+      
+      // 更新缓存
+      uni.setStorageSync('recommend_courses_cache', {
+        data: res,
+        time: Date.now()
+      })
+    } else {
+      console.log('[Recommend Courses Page] API 响应为空或格式不正确')
+      recommendCourses.value = []
    }
  } catch (err) {
-    console.error('获取推荐课程失败', err)
+    console.error('[Recommend Courses Page] 加载失败:', err)
    uni.showToast({ title: '加载失败', icon: 'none' })
+    recommendCourses.value = []
  } finally {
    loading.value = false
+    console.log('[Recommend Courses Page] 数据加载完成，loading:', loading.value)
  }
 }

-// 处理参与课程点击
-const handleJoinCourse = (course) => {
-  if (course.rawData.status === '2') {
+// 获取推荐课程列表
+async function fetchRecommendCourses() {
+  // 优先从缓存加载
+  const hasCache = loadFromCache()
+  if (!hasCache) {
+    // 从网络加载
+    await loadFromNetwork()
+  } else {
+    // 后台静默更新
+    setTimeout(() => {
+      loadFromNetwork()
+    }, 100)
+  }
+}
+
+// 处理卡片点击
+const handleCardClick = (recommend) => {
+  if (!recommend.groupCourse) {
+    uni.showToast({ title: '课程信息不完整', icon: 'none' })
+    return
+  }
+  
+  const status = recommend.groupCourse.status
+  if (status === 2) {
    uni.showToast({ title: '课程已结束', icon: 'none' })
    return
  }
-  if (course.rawData.status === '1') {
+  if (status === 1) {
    uni.showToast({ title: '课程已取消', icon: 'none' })
    return
  }
-  if (course.rawData.currentMembers >= course.rawData.maxMembers) {
+  const current = recommend.groupCourse.currentMembers || 0
+  const max = recommend.groupCourse.maxMembers || 0
+  if (current >= max) {
    uni.showToast({ title: '课程已满员', icon: 'none' })
    return
  }
  
  // 跳转到课程详情页
-  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${course.id}` })
+  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${recommend.groupCourse.id}` })
 }

 onMounted(() => {
@@ -165,25 +155,16 @@ onMounted(() => {
 <style lang="scss" scoped>
 .recommend-page {
  min-height: 100vh;
-  background: linear-gradient(180deg, #E3F2FD 0%, #F5F5F5 100%);
+  background: #F5F7FA;
 }

 .courses-container {
  height: calc(100vh - 160rpx);
-  padding: 32rpx 0;
+  padding: 0;
 }

-.courses-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24rpx;
-  justify-content: center;
-  
-  // 两列网格布局，适度缩小卡片宽度
-  > * {
-    flex: 0 0 calc(45% - 12rpx);
-    margin-bottom: 0;
-  }
+.courses-list {
+  padding: 0 24rpx;
 }

 .empty-state {
@@ -204,18 +185,15 @@ onMounted(() => {

 /* 骨架屏样式 */
 .skeleton-container {
-  padding: 32rpx 24rpx;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20rpx;
+  padding: 0 24rpx;
 }

 .skeleton-card {
-  flex: 0 0 calc(50% - 10rpx);
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 28rpx rgba(45, 74, 90, 0.08);
+  margin-bottom: 24rpx;
 }

 .skeleton-img {