整合api请求、添加购买会员卡页面、登陆页面

2026-06-23 22:17:53 +08:00
parent 1c547a717e
commit 8d8c823616
70 changed files with 7666 additions and 2656 deletions
@@ -6,7 +6,7 @@
      <!-- 区域标题 -->
      <text class="section-title">推荐课程</text>
      <!-- 查看更多按钮 -->
-      <view class="view-more" @tap="goMore">
+      <view class="view-more" @click="handleViewMore">
        <text>查看更多</text>
        <text class="arrow">
 			<uni-icons type="right" size="20" color="#8CA0B0"/>
@@ -19,28 +19,68 @@
      <!-- 课程列表 -->
      <view class="courses-list">
        <!-- 课程卡片 -->
-        <CourseCard
-          v-for="(course, index) in displayCourses"
+        <view
+          v-for="(course, index) in courses"
          :key="course.id || index"
-          :course="course"
-          @join="handleJoinCourse"
-        />
+          class="course-card"
+        >
+          <!-- 课程图片区域 -->
+          <view class="course-image">
+            <!-- 课程封面图片 -->
+            <image :src="course.image" mode="aspectFill" class="img" />
+            <!-- 图片渐变遮罩 -->
+            <view class="course-overlay"></view>
+            <!-- 差几人提示（右上角） -->
+            <text v-if="course.remainingSlots > 0" class="remaining-slots">差{{ course.remainingSlots }}人</text>
+            <!-- 课程信息区域 -->
+            <view class="course-info">
+              <!-- 课程名称 -->
+              <text class="course-name">{{ course.name }}</text>
+              <!-- 课程元信息（时长、难度） -->
+              <view class="course-meta">
+                <view class="meta-left">
+                  <!-- 时长信息 -->
+                  <view class="meta-item time-tag">
+                    <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png" class="meta-icon" />
+                    <text>{{ course.duration }}</text>
+                  </view>
+                  <!-- 难度信息 -->
+                  <view class="meta-item level-tag">
+                    <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png" class="meta-icon" />
+                    <text>{{ course.level }}</text>
+                  </view>
+                </view>
+                <!-- 课程标签 -->
+                <view class="meta-item course-type-tag">
+                  <text :class="['tag', course.tagType]">{{ course.tag }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- 课程底部区域 -->
+          <view class="course-footer">
+            <!-- 参与人数信息 -->
+            <view class="participants">
+              <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png" class="fire-icon" />
+              <text>{{ course.participants }}人参与</text>
+            </view>
+            <!-- 去参与按钮 -->
+            <view class="join-btn" @click="handleJoinCourse(course)">
+              <text>去参与</text>
+            </view>
+          </view>
+        </view>
      </view>
    </scroll-view>
  </view>
 </template>

 <script setup>
-import { computed } from 'vue'
-import CourseCard from './CourseCard.vue'
+import { ref, onMounted } from 'vue'
+import { getGroupCoursePage } from '@/api/main.js'

-// 接收父组件传递的数据
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({ list: [] })
-  }
-})
+// 推荐课程数据列表
+const courses = ref([])

 // 课程类型映射（用于显示标签）
 const getCourseTypeName = (type) => {
@@ -54,16 +94,12 @@ const getCourseTypeName = (type) => {

 // 根据课程信息获取标签文本
 const getTag = (course) => {
-  if (course.currentMembers >= course.maxMembers) return '已满员'
-  if (course.status === '2') 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.currentMembers / course.maxMembers >= 0.8) return 'hot'
  return 'default'
 }
@@ -73,7 +109,9 @@ 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))
+  const diffMs = end - start
+  if (diffMs <= 0) return ''
+  const durationMinutes = Math.floor(diffMs / (1000 * 60))
  return `${durationMinutes}分钟`
 }

@@ -92,31 +130,51 @@ const getImageUrl = (coverImage) => {
  return `https://your-domain.com${coverImage}`
 }

-// 将原始课程数据转换为卡片需要的格式
-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
-  }))
-})
+// 获取推荐课程
+const fetchRecommendCourses = async () => {
+  try {
+    const res = await getGroupCoursePage({
+      page: 0, size: 10, sort: 'current_members', order: 'desc'
+    }, { cache: true, cacheTime: 5 * 60 * 1000 })
+    if (res && res.content && Array.isArray(res.content)) {
+      // 筛选掉已结束和已满员的课程
+      const filteredCourses = res.content.filter(course => {
+        return course.status !== '2' && course.currentMembers < course.maxMembers
+      })
+      
+      // 只取前5个符合条件的课程
+      courses.value = filteredCourses.slice(0, 5).map(course => {
+        const remainingSlots = course.maxMembers - course.currentMembers
+        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,
+          remainingSlots: remainingSlots,
+          rawData: course
+        }
+      })
+    }
+  } catch (err) {
+    console.error('获取推荐课程失败:', err)
+  }
+}

 const handleJoinCourse = (course) => {
  if (course.rawData.status === '2') { uni.showToast({ title: '课程已结束', icon: 'none' }); return }
  if (course.rawData.currentMembers >= course.rawData.maxMembers) { uni.showToast({ title: '课程已满员', icon: 'none' }); return }
-  uni.navigateTo({ url: `/pages/course/detail?id=${course.id}` })
+  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${course.id}` })
 }

-function goMore(){
-	uni.navigateTo({ url: '/pages/recommendCourses/index' })
+const handleViewMore = () => {
+  uni.navigateTo({ url: '/pages/recommendCourses/index' })
 }
+
+onMounted(() => { fetchRecommendCourses() })
 </script>

 <style lang="scss">
@@ -158,6 +216,190 @@ function goMore(){

 .courses-list {
  display: inline-flex;
-  gap: 48rpx;
+  gap: 24rpx;
+  padding-right: 24rpx;
+}
+
+.course-card {
+  width: 338rpx;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 28rpx var(--shadow-blue-light);
+  border: 1rpx solid rgba(255, 255, 255, 0.6);
+  display: inline-block;
+  vertical-align: top;
+}
+
+.course-image {
+  height: 260rpx;
+  position: relative;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+}
+
+.course-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(to top, rgba(45, 74, 90, 0.7) 0%, transparent 60%);
+}
+
+.remaining-slots {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 10rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #FF6B35, #FF8F66);
+  z-index: 3;
+}
+
+.course-tag {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 10rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
+  z-index: 2;
+  &.hot {
+    background: linear-gradient(135deg, #6BA8C0, #8CC5D5);
+  }
+  &.new {
+    background: linear-gradient(135deg, #6DB5C8, #90CEDD);
+  }
+  &.free {
+    background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
+  }
+  &.full {
+    background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
+  }
+  &.ended {
+    background: linear-gradient(135deg, #B0C0CC, #C4D2DC);
+  }
+  &.default {
+    background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
+  }
+}
+
+.course-info {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16rpx 20rpx;
+  z-index: 2;
+}
+
+.course-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.course-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.meta-left {
+  display: flex;
+  gap: 8rpx;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.9);
+  padding: 6rpx 10rpx;
+  border-radius: 6rpx;
+  background: rgba(255, 255, 255, 0.2);
+  line-height: 1;
+  .meta-icon {
+	vertical-align: middle;
+  }
+}
+
+.time-tag {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.level-tag {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.course-type-tag {
+  background: transparent !important;
+  padding: 0 !important;
+  .tag {
+    padding: 4rpx 10rpx;
+    border-radius: 6rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    background: linear-gradient(135deg, #FF8F66, #FFB088);
+    color: #ffffff;
+    &.hot {
+      background: linear-gradient(135deg, #FF6B35, #FF8F66);
+    }
+  }
+}
+
+.meta-icon {
+  width: 22rpx;
+  height: 22rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.course-footer {
+  padding: 16rpx 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.participants {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  font-size: 22rpx;
+  color: var(--tabbar-text-inactive);
+}
+
+.fire-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.join-btn {
+  padding: 12rpx 28rpx;
+  background: rgba(130, 220, 130, 0.9);
+  border: none;
+  border-radius: 9999rpx;
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #ffffff;
+  box-shadow: 0 6rpx 16rpx rgba(130, 220, 130, 0.35);
 }
 </style>