完善团课推荐页面

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' })
 }

gym-manage-uniapp/components/recommendCourses/RecommendCourseCard.vue

@@ -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>