完善团课相关页面交互，完成团课列表页基础后端交互。（后端连接至服务器，版本为DEV分支版本）

gym-manage-uniapp/pages/course/index.vue

@@ -3,10 +3,7 @@
   <!-- 滚动内容区域 -->
   <scroll-view scroll-y="false" class="scroll-container">
     <view class="tab-page">
-      <view class="tab-page__header">
-        <text class="tab-page__title">课程</text>
-        <text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
-      </view>
+      <PageHeader title="课程" subtitle="精品团课 · 私教 · 线上课" />
 
       <!-- 骨架屏 -->
       <view v-if="loading" class="skeleton-container">
@@ -44,6 +41,7 @@
 	import { ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 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'
 
@@ -136,25 +134,10 @@ function goMyCourses() {
   padding-bottom: 160rpx;
   position: relative;
   z-index: 2;
+  background: #F5F7FA;
 }
 
-.tab-page__header {
-  padding: 48rpx 32rpx 16rpx;
-}
 
-.tab-page__title {
-  display: block;
-  font-size: 40rpx;
-  font-weight: $font-weight-bold;
-  color: $text-dark;
-}
-
-.tab-page__subtitle {
-  display: block;
-  margin-top: 8rpx;
-  font-size: 24rpx;
-  color: $text-muted;
-}
 
 .tab-page__actions {
   display: flex;

gym-manage-uniapp/pages/groupCourse/detail.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="course-detail-page">
-		<!-- 顶部导航 -->
-		<MemberInfoSubNav :title="course.courseName || '课程详情'" @back="goBack" />
+		<!-- 页面头部 -->
+		<PageHeader title="课程详情" subtitle="团课预约" :show-back="true" />
 		
 		<!-- 骨架屏 -->
 		<view v-if="loading" class="skeleton">
@@ -102,6 +102,27 @@
 						<text class="meta-text">{{ course.location }}</text>
 					</view>
 				</view>
+				
+				<!-- 课程标签 -->
+				<view class="course-tags">
+					<view class="tags-label">
+						<uni-icons type="tag" size="20" color="#8A99B4" />
+						<text>课程标签</text>
+					</view>
+					<view class="tags-list">
+						<view 
+							v-for="label in courseLabels" 
+							:key="label.id" 
+							class="tag-item"
+							:style="{ background: `${label.color}15`, color: label.color }"
+						>
+							<text>{{ label.labelName }}</text>
+						</view>
+						<view v-if="courseLabels.length === 0" class="no-tags">
+							<text>暂无标签</text>
+						</view>
+					</view>
+				</view>
 			</view>
 			
 			<!-- 课程详情卡片 -->
@@ -138,39 +159,6 @@
 					</view>
 					<text class="info-value">ID: {{ course.coachId }}</text>
 				</view>
-				<view class="info-row">
-					<view class="info-label">
-						<uni-icons type="credit-card" size="24" color="#5E6F8D" />
-						<text>支付方式</text>
-					</view>
-					<view class="payment-options">
-						<view 
-							v-if="course.storedValueAmount > 0" 
-							:class="['payment-item', { active: selectedPayment === 'storedValue' || (!selectedPayment && course.pointCardAmount === 0) }]"
-							@click="selectPayment('storedValue')"
-						>
-							<text class="payment-label">储值卡</text>
-							<text class="payment-value">¥{{ course.storedValueAmount }}</text>
-							<view v-if="selectedPayment === 'storedValue' || (!selectedPayment && course.pointCardAmount === 0)" class="payment-check">
-								<uni-icons type="checkmark" size="20" color="#ffffff" />
-							</view>
-						</view>
-						<view 
-							v-if="course.pointCardAmount > 0" 
-							:class="['payment-item', { active: selectedPayment === 'pointCard' || (!selectedPayment && course.storedValueAmount === 0) }]"
-							@click="selectPayment('pointCard')"
-						>
-							<text class="payment-label">次卡</text>
-							<text class="payment-value">{{ course.pointCardAmount }}次</text>
-							<view v-if="selectedPayment === 'pointCard' || (!selectedPayment && course.storedValueAmount === 0)" class="payment-check">
-								<uni-icons type="checkmark" size="20" color="#ffffff" />
-							</view>
-						</view>
-						<view v-if="course.storedValueAmount === 0 && course.pointCardAmount === 0" class="payment-item free">
-							<text class="payment-value">免费</text>
-						</view>
-					</view>
-				</view>
 			</view>
 			
 			<!-- 预约须知 -->
@@ -201,16 +189,40 @@
 			
 			<!-- 底部操作栏 -->
 			<view class="bottom-bar">
-				<view class="price-display">
-					<text v-if="selectedPrice.type === 'storedValue'" class="price">
-						<text class="currency">¥</text>{{ selectedPrice.amount }}
-					</text>
-					<text v-else-if="selectedPrice.type === 'pointCard'" class="price points">
-						<uni-icons type="shop" size="20" color="#FF6B35" />
-						<text>{{ selectedPrice.amount }}次</text>
-					</text>
-					<text v-else class="price free">免费</text>
+				<!-- 左侧：支付方式选择（包含价格） -->
+				<view v-if="hasMultiplePayment" class="payment-card">
+					<!-- 左侧：滑块支付选择 -->
+					<view class="payment-slider" @click="togglePayment">
+						<view class="slider-bg" :class="{ right: selectedPayment === 'pointCard' }"></view>
+						<view class="tab-item" :class="{ active: selectedPayment === 'storedValue' }">
+							<text class="tab-label">储值卡</text>
+						</view>
+						<view class="tab-item" :class="{ active: selectedPayment === 'pointCard' }">
+							<text class="tab-label">次卡</text>
+						</view>
+					</view>
+					<!-- 右侧：当前选中价格 -->
+					<view class="payment-price">
+						<text class="price" :class="selectedPrice.type">
+							<text class="currency">¥</text><text class="amount">{{ course.storedValueAmount }}</text>
+							<text class="point-text"><text class="point-icon">⚡</text>{{ course.pointCardAmount }}次</text>
+						</text>
+					</view>
 				</view>
+				
+				<!-- 免费课程或单一支付方式 -->
+				<view v-else class="price-display">
+					<text v-if="course.storedValueAmount === 0 && course.pointCardAmount === 0" class="price free">免费</text>
+					<text v-else-if="course.storedValueAmount > 0" class="price">
+						<text class="currency">¥</text>{{ course.storedValueAmount }}
+					</text>
+					<text v-else class="price">
+						<text class="point-icon">⚡</text>
+						<text>{{ course.pointCardAmount }}次</text>
+					</text>
+				</view>
+				
+				<!-- 右侧：预约按钮 -->
 				<view :class="['booking-btn', { disabled: !canBook }]" @click="handleBooking">
 					<text>{{ canBook ? '立即预约' : (course.currentMembers >= course.maxMembers ? '已满员' : statusText) }}</text>
 				</view>
@@ -222,7 +234,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { groupCourseService } from '@/request_api/groupCourse.mock.js'
-import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
+import PageHeader from '@/components/index/PageHeader.vue'
 
 // 加载状态
 const loading = ref(true)
@@ -245,8 +257,8 @@ const course = ref({
 	storedValueAmount: 0
 })
 
-// 选中的支付方式 ('storedValue' | 'pointCard' | 'free')
-const selectedPayment = ref('')
+// 课程标签数据
+const courseLabels = ref([])
 
 // 课程状态文本
 const statusText = computed(() => {
@@ -296,6 +308,9 @@ const hasMultiplePayment = computed(() => {
 	return course.value.storedValueAmount > 0 && course.value.pointCardAmount > 0
 })
 
+// 当前选中的支付方式
+const selectedPayment = ref('storedValue')
+
 // 当前选中的支付方式价格显示
 const selectedPrice = computed(() => {
 	if (selectedPayment.value === 'storedValue') {
@@ -313,11 +328,16 @@ const selectedPrice = computed(() => {
 	return { type: 'free', amount: 0 }
 })
 
-// 选择支付方式
+// 选择/切换支付方式
 const selectPayment = (type) => {
 	selectedPayment.value = type
 }
 
+// 切换支付方式（滑块点击）
+const togglePayment = () => {
+	selectedPayment.value = selectedPayment.value === 'storedValue' ? 'pointCard' : 'storedValue'
+}
+
 // 格式化日期
 const formatDate = (dateStr) => {
 	if (!dateStr) return ''
@@ -348,11 +368,6 @@ const formatDuration = (startStr, endStr) => {
 	return `${minutes}分钟`
 }
 
-// 返回上一页
-const goBack = () => {
-	uni.navigateBack()
-}
-
 // 预约处理
 const handleBooking = () => {
 	if (!canBook.value) return
@@ -393,6 +408,9 @@ const fetchCourseDetail = async (id) => {
 		const result = await groupCourseService.getDetail(id)
 		course.value = result
 		console.log('[detail.vue] 课程详情获取成功:', course.value)
+		
+		// 获取课程类型标签
+		await fetchCourseLabels(course.value.courseType)
 	} catch (error) {
 		console.error('[detail.vue] 获取课程详情失败:', error)
 		uni.showToast({
@@ -404,6 +422,19 @@ const fetchCourseDetail = async (id) => {
 	}
 }
 
+// 获取课程标签
+const fetchCourseLabels = async (courseType) => {
+	try {
+		const result = await groupCourseService.getLabelsByCourseType(courseType)
+		if (result.code === 0) {
+			courseLabels.value = result.data
+		}
+		console.log('[detail.vue] 课程标签获取成功:', courseLabels.value)
+	} catch (error) {
+		console.error('[detail.vue] 获取课程标签失败:', error)
+	}
+}
+
 // 页面挂载时获取课程详情
 onMounted(() => {
 	const pages = getCurrentPages()
@@ -550,6 +581,42 @@ onMounted(() => {
 	flex: 1;
 }
 
+/* 课程标签 */
+.course-tags {
+	margin-top: 24rpx;
+	padding-top: 24rpx;
+	border-top: 1rpx solid #F3F4F6;
+}
+
+.tags-label {
+	display: flex;
+	align-items: center;
+	gap: 8rpx;
+	font-size: 26rpx;
+	color: #6B7280;
+	margin-bottom: 16rpx;
+}
+
+.tags-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12rpx;
+}
+
+.tag-item {
+	display: inline-flex;
+	align-items: center;
+	padding: 10rpx 24rpx;
+	border-radius: 24rpx;
+	font-size: 24rpx;
+	font-weight: 500;
+}
+
+.no-tags {
+	font-size: 24rpx;
+	color: #9CA3AF;
+}
+
 /* 详情卡片 */
 .detail-card {
 	background: #ffffff;
@@ -719,43 +786,162 @@ onMounted(() => {
 	left: 0;
 	right: 0;
 	background: #ffffff;
-	padding: 20rpx 24rpx;
-	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-	display: flex;
-	align-items: center;
-	gap: 24rpx;
+	padding: 16rpx 24rpx;
+	padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
+	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
 	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
 	z-index: 100;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
 }
 
+/* 支付卡片（包含选择器和价格） */
+.payment-card {
+	display: flex;
+	align-items: center;
+	background: linear-gradient(135deg, #FFF7F5 0%, #FFF0EC 100%);
+	border-radius: 52rpx;
+	padding: 8rpx;
+	height: 88rpx;
+	flex: 1;
+	min-width: 0;
+	border: 2rpx solid rgba(255, 107, 53, 0.15);
+}
+
+/* 支付滑块选择器 */
+.payment-slider {
+	display: flex;
+	align-items: center;
+	background: #F5F7FA;
+	border-radius: 44rpx;
+	padding: 6rpx;
+	position: relative;
+	overflow: hidden;
+	flex: 1;
+	height: 72rpx;
+}
+
+/* 滑动背景指示器 */
+.payment-slider .slider-bg {
+	position: absolute;
+	top: 6rpx;
+	left: 6rpx;
+	width: calc(50% - 6rpx);
+	height: calc(100% - 12rpx);
+	background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
+	border-radius: 38rpx;
+	box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
+	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	z-index: 0;
+}
+
+.payment-slider .slider-bg.right {
+	transform: translateX(100%);
+}
+
+.payment-slider .tab-item {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	border-radius: 38rpx;
+	transition: all 0.3s ease;
+	position: relative;
+	z-index: 1;
+}
+
+.payment-slider .tab-item.active .tab-label {
+	color: #ffffff;
+}
+
+.payment-slider .tab-label {
+	font-size: 24rpx;
+	font-weight: 600;
+	color: #6B7280;
+	transition: color 0.3s ease;
+}
+
+/* 支付卡片中的价格 */
+.payment-price {
+	min-width: 140rpx;
+	padding: 0 16rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.payment-price .price {
+	font-size: 34rpx;
+	font-weight: 700;
+	color: #FF6B35;
+	display: flex;
+	align-items: baseline;
+	gap: 4rpx;
+	white-space: nowrap;
+	justify-content: center;
+}
+
+.payment-price .price .currency,
+.payment-price .price .amount,
+.payment-price .price .point-text {
+	display: none;
+}
+
+.payment-price .price.storedValue .currency,
+.payment-price .price.storedValue .amount {
+	display: inline;
+}
+
+.payment-price .price.pointCard .point-text {
+	display: inline;
+}
+
+.payment-price .currency {
+	font-size: 22rpx;
+	font-weight: 600;
+}
+
+.payment-price .point-icon {
+	font-size: 22rpx;
+}
+
+/* 价格展示（单一支付方式或免费） */
 .price-display {
 	flex: 1;
-	padding-left: 20rpx;
-	
-	.price {
-		font-size: 40rpx;
-		font-weight: 700;
-		color: #FF6B35;
-		display: flex;
-		align-items: baseline;
-		gap: 4rpx;
-		
-		.currency {
-			font-size: 26rpx;
-			font-weight: 600;
-		}
-		
-		&.points {
-			gap: 8rpx;
-		}
-		
-		&.free {
-			color: #10B981;
-		}
-	}
+	display: flex;
+	align-items: center;
+	padding-left: 8rpx;
 }
 
+.price-display .price {
+	font-size: 40rpx;
+	font-weight: 700;
+	display: flex;
+	align-items: baseline;
+	gap: 4rpx;
+}
+
+.price-display .price.free {
+	color: #10B981;
+}
+
+.price-display .price:not(.free) {
+	color: #FF6B35;
+}
+
+.price-display .currency {
+	font-size: 26rpx;
+	font-weight: 600;
+}
+
+.price-display .point-icon {
+	font-size: 26rpx;
+}
+
+/* 预约按钮 */
 .booking-btn {
 	padding: 24rpx 64rpx;
 	background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
@@ -764,18 +950,13 @@ onMounted(() => {
 	font-weight: 600;
 	color: #ffffff;
 	box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	
-	&:active {
-		transform: scale(0.97);
-		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);
-	}
-	
-	&.disabled {
-		background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
-		color: #9CA3AF;
-		box-shadow: none;
-	}
+	flex-shrink: 0;
+}
+
+.booking-btn.disabled {
+	background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);
+	color: #ffffff;
+	box-shadow: none;
 }
 
 /* 骨架屏样式 */

gym-manage-uniapp/pages/groupCourse/list.vue

@@ -1,5 +1,8 @@
 <template>
 	<view class="group-course-page">
+		<!-- 页面头部 -->
+		<PageHeader title="团课" subtitle="精品团课 · 专业教练 · 小班教学" :show-back="true" />
+		
 		<!-- 搜索区域 -->
 		<view class="search-section">
 			<!-- 搜索框组件 -->
@@ -39,6 +42,7 @@
 				v-for="course in filteredCourseList" 
 				:key="course.id" 
 				:course="course"
+				:courseTypeLabels="getCourseLabels(course)"
 				@booking="handleBooking"
 				@detail="goDetail"
 			></GroupCourseCard>
@@ -66,14 +70,16 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import TabBar from '@/components/TabBar.vue'
 import GroupCourseCard from '@/components/groupCourse/CourseCard.vue'
 import SearchBar from '@/components/groupCourse/SearchBar.vue'
 import FilterSection from '@/components/groupCourse/FilterSection.vue'
 import TimePeriodSelector from '@/components/groupCourse/TimePeriodSelector.vue'
 import TimeRangePicker from '@/components/groupCourse/TimeRangePicker.vue'
+import PageHeader from '@/components/index/PageHeader.vue'
 import { useGroupCourseList } from '@/composables/useGroupCourseList.js'
+import { getTypeLabels } from '@/api/groupCourse.js'
 
 // 组件引用
 const searchBarRef = ref(null)
@@ -81,6 +87,9 @@ const filterSectionRef = ref(null)
 const timePeriodRef = ref(null)
 const timeRangePickerRef = ref(null)
 
+// 课程类型标签缓存
+const courseTypeLabelsCache = ref({})
+
 // 使用组合式函数
 const {
 	// 状态
@@ -111,9 +120,11 @@ const {
 } = useGroupCourseList()
 
 // 组件挂载时调用接口获取团课列表
-onMounted(() => {
+onMounted(async () => {
 	console.log('[list.vue] 页面组件已挂载，开始获取团课列表')
-	fetchCourseList()
+	await fetchCourseList()
+	// 获取所有团课的类型标签
+	await fetchAllCourseTypeLabels()
 	console.log('[list.vue] 可用的搜索参数获取方法:')
 	console.log('  - searchBarRef.getSearchParams()')
 	console.log('  - filterSectionRef.getFilterParams()')
@@ -122,6 +133,27 @@ onMounted(() => {
 	console.log('  - getAllSearchParams() 获取所有参数')
 })
 
+const fetchAllCourseTypeLabels = async () => {
+	const courseTypes = [...new Set(filteredCourseList.value.map(c => c.courseType))]
+	for (const type of courseTypes) {
+		if (!courseTypeLabelsCache.value[type]) {
+			try {
+				const result = await getTypeLabels(type)
+				if (result) {
+					courseTypeLabelsCache.value[type] = result
+				}
+			} catch (error) {
+				console.error(`[list.vue] 获取类型标签失败，type=${type}`, error)
+			}
+		}
+	}
+}
+
+// 根据课程获取对应的标签
+const getCourseLabels = (course) => {
+	return courseTypeLabelsCache.value[course.courseType] || []
+}
+
 // 暴露方法供外部调用
 defineExpose({
 	getAllSearchParams: () => getAllSearchParams(searchBarRef.value, filterSectionRef.value, timePeriodRef.value, timeRangePickerRef.value),
@@ -151,7 +183,7 @@ defineExpose({
 
 /* 课程列表 */
 .course-list {
-	height: calc(100vh - 380rpx);
+	height: calc(100vh - 480rpx);
 	padding: 24rpx 24rpx;
 	padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
 	padding-bottom: calc(160rpx + env(safe-area-inset-bottom));

gym-manage-uniapp/pages/recommendCourses/index.vue

@@ -0,0 +1,252 @@
+<!-- pages/recommendCourses/index.vue -->
+<template>
+  <!-- 页面容器 -->
+  <view class="recommend-page">
+    <!-- 页面标题 -->
+    <PageHeader title="推荐课程" subtitle="精选热门团课，等你来练" :show-back="true" />
+
+    <!-- 骨架屏 -->
+    <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>
+    </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>
+      
+      <!-- 空状态 -->
+      <view v-if="!loading && courses.length === 0" class="empty-state">
+        <text class="empty-text">暂无推荐课程</text>
+      </view>
+      
+      <!-- 底部占位 -->
+      <view class="bottom-placeholder"></view>
+    </scroll-view>
+  </view>
+</template>
+
+<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'
+
+// 课程列表数据
+const courses = ref([])
+// 加载状态
+const loading = ref(true)
+
+// 课程类型映射（用于显示标签）
+const getCourseTypeName = (type) => {
+  const typeMap = {
+    '1': '瑜伽',
+    '2': '搏击',
+    '3': '塑形'
+  }
+  return typeMap[type] || '课程'
+}
+
+// 根据课程信息获取标签文本
+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 () => {
+  loading.value = true
+  
+  try {
+    // 使用 mock API 获取数据
+    const res = await groupCourseMockApi.getList({
+      pageNum: 1,
+      pageSize: 20
+    })
+    
+    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))
+    }
+  } catch (err) {
+    console.error('获取推荐课程失败', err)
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理参与课程点击
+const handleJoinCourse = (course) => {
+  if (course.rawData.status === '2') {
+    uni.showToast({ title: '课程已结束', icon: 'none' })
+    return
+  }
+  if (course.rawData.status === '1') {
+    uni.showToast({ title: '课程已取消', icon: 'none' })
+    return
+  }
+  if (course.rawData.currentMembers >= course.rawData.maxMembers) {
+    uni.showToast({ title: '课程已满员', icon: 'none' })
+    return
+  }
+  
+  // 跳转到课程详情页
+  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${course.id}` })
+}
+
+onMounted(() => {
+  fetchRecommendCourses()
+})
+</script>
+
+<style lang="scss" scoped>
+.recommend-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #E3F2FD 0%, #F5F5F5 100%);
+}
+
+.courses-container {
+  height: calc(100vh - 160rpx);
+  padding: 32rpx 0;
+}
+
+.courses-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24rpx;
+  justify-content: center;
+  
+  // 两列网格布局，适度缩小卡片宽度
+  > * {
+    flex: 0 0 calc(45% - 12rpx);
+    margin-bottom: 0;
+  }
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120rpx 0;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #8CA0B0;
+}
+
+.bottom-placeholder {
+  height: 40rpx;
+}
+
+/* 骨架屏样式 */
+.skeleton-container {
+  padding: 32rpx 24rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.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);
+}
+
+.skeleton-img {
+  width: 100%;
+  height: 280rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-text {
+  height: 32rpx;
+  margin: 20rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 8rpx;
+}
+
+.skeleton-text-short {
+  height: 24rpx;
+  margin: 0 20rpx 20rpx;
+  width: 60%;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 8rpx;
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>