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

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));