新增搜索课程和加载组件页面，签到页面添加遮罩防重复扫码，添加 request 便捷方法（get/post/put/delete）

2026-06-05 21:26:26 +08:00
parent 207a248b01
commit 823d626440
16 changed files with 2585 additions and 139 deletions
@@ -1,14 +1,15 @@
+<!-- components/TabBar.vue -->
 <template>
  <view class="tab-bar">
    <view
      v-for="(tab, index) in tabs"
      :key="tab.path"
-      :class="['tab-item', { active: currentIndex === index }]"
+      :class="['tab-item', { active: currentActiveIndex === index }]"
      hover-class="tab-item--hover"
      @tap.stop="onTabTap(index)"
    >
      <image
-        :src="currentIndex === index ? tab.iconActive : tab.icon"
+        :src="currentActiveIndex === index ? tab.iconActive : tab.icon"
        mode="aspectFit"
        class="tab-icon"
      />
@@ -18,7 +19,7 @@
 </template>

 <script setup>
-import { computed } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import {
  PAGE,
  TAB_ROUTES,
@@ -31,6 +32,76 @@ const props = defineProps({
  activeTab: { type: Number, default: -1 }
 })

+const emit = defineEmits(['update:active', 'tab-change'])
+
+// 当前激活的索引 - 默认从路由获取
+const currentActiveIndex = ref(-1)
+
+// 从路由获取当前激活的 tab
+function getActiveIndexFromRoute() {
+  const routePath = getCurrentRoutePath()
+  const index = getTabIndexByRoute(routePath)
+  console.log('从路由获取索引:', routePath, '->', index)
+  return index >= 0 ? index : 0
+}
+
+// 同步激活状态（高优先级：路由 > props）
+function syncActiveState() {
+  // 优先从路由获取（最准确）
+  const routeIndex = getActiveIndexFromRoute()
+  if (routeIndex >= 0) {
+    currentActiveIndex.value = routeIndex
+    return
+  }
+  
+  // 其次使用 props
+  if (props.active >= 0) {
+    currentActiveIndex.value = props.active
+  } else if (props.activeTab >= 0) {
+    currentActiveIndex.value = props.activeTab
+  } else {
+    currentActiveIndex.value = 0
+  }
+}
+
+// 监听路由变化（页面切换时自动同步）
+let routeWatcher = null
+
+onMounted(() => {
+  // 初始同步
+  syncActiveState()
+  
+  // 监听路由变化（App 端）
+  // #ifdef APP-PLUS
+  routeWatcher = plus.globalEvent.addEventListener('newintent', () => {
+    setTimeout(syncActiveState, 50)
+  })
+  // #endif
+  
+  // 监听页面显示（跨端通用）
+  uni.onAppRoute ? uni.onAppRoute(() => {
+    setTimeout(syncActiveState, 50)
+  }) : null
+})
+
+onBeforeUnmount(() => {
+  // 清理监听
+  // #ifdef APP-PLUS
+  if (routeWatcher) {
+    plus.globalEvent.removeEventListener('newintent', routeWatcher)
+  }
+  // #endif
+})
+
+// 监听 props 变化
+watch(() => props.active, () => {
+  // 只有当 props 主动变化且不是来自路由同步时才更新
+  const routeIndex = getActiveIndexFromRoute()
+  if (routeIndex !== currentActiveIndex.value) {
+    syncActiveState()
+  }
+})
+
 const tabs = [
  {
    path: PAGE.INDEX,
@@ -64,19 +135,51 @@ const tabs = [
  }
 ]

-const currentIndex = computed(() => {
-  if (props.active >= 0) return props.active
-  if (props.activeTab >= 0) return props.activeTab
-  return getTabIndexByRoute(getCurrentRoutePath())
-})
+let isSwitching = false

 function onTabTap(index) {
-  if (index === currentIndex.value) return
-  const path = TAB_ROUTES[index]
-  uni.reLaunch({
-    url: path,
-    fail: () => {
-      uni.showToast({ title: '页面跳转失败', icon: 'none' })
+  if (isSwitching) return
+  
+  const targetPath = TAB_ROUTES[index]
+  const currentPath = TAB_ROUTES[currentActiveIndex.value]
+  
+  if (targetPath === currentPath) return
+  
+  console.log('Tab 点击:', index, targetPath)
+  
+  // 1. 立即更新 UI 高亮
+  currentActiveIndex.value = index
+  
+  // 2. 通知父组件
+  emit('update:active', index)
+  emit('tab-change', index)
+  
+  // 3. 显示 loading（可选）
+  let timer = setTimeout(() => {
+    uni.showLoading({ title: '加载中...', mask: true })
+  }, 50)
+  
+  isSwitching = true
+  
+  // 4. 执行跳转
+  uni.switchTab({
+    url: targetPath,
+    success: () => {
+      console.log('switchTab 成功:', targetPath)
+    },
+    fail: (err) => {
+      console.error('switchTab 失败:', err)
+      // 降级
+      uni.reLaunch({ url: targetPath })
+    },
+    complete: () => {
+      clearTimeout(timer)
+      uni.hideLoading()
+      setTimeout(() => {
+        isSwitching = false
+        // 跳转完成后，再次同步确保高亮正确
+        syncActiveState()
+      }, 100)
    }
  })
 }
@@ -106,6 +209,11 @@ function onTabTap(index) {
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
+  transition: all 0.1s ease;
+}
+
+.tab-item:active {
+  transform: scale(0.95);
 }

 .tab-icon {
@@ -122,4 +230,4 @@ function onTabTap(index) {
  color: #f97316;
  font-weight: 600;
 }
-</style>
+</style>
@@ -23,9 +23,9 @@

 <script setup>

-const QEClick = () => {
+const QEClick = path => {
 	uni.navigateTo({
-		url:"/pages/checkIn/checkIn"
+		url:path
 	})
 }
 // 快捷入口数据列表
@@ -34,7 +34,8 @@ const entries = [
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
 		   title: '找课程',
 		   desc: '精品课程',
-		   accent: false
+		   accent: false,
+		   path: "/pages/searchCourse/searchCourse"
 	   },
 	  { 
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
@@ -21,7 +21,7 @@
        <!-- 课程卡片 -->
        <view
          v-for="(course, index) in courses"
-          :key="index"
+          :key="course.id || index"
          class="course-card"
        >
          <!-- 课程图片区域 -->
@@ -65,7 +65,7 @@
              <text>{{ course.participants }}人参与</text>
            </view>
            <!-- 去参与按钮 -->
-            <view class="join-btn">
+            <view class="join-btn" @click="handleJoinCourse(course)">
              <text>去参与</text>
            </view>
          </view>
@@ -76,36 +76,231 @@
 </template>

 <script setup>
+import { ref, onMounted } from 'vue'
+import { getGroupCoursePage } from '@/api/main.js'
+
 // 推荐课程数据列表
-const courses = [
-  {
-    image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-    tag: '限时免费',
-    tagType: 'free',
-    name: 'HIIT高强度燃脂',
-    duration: '30分钟',
-    level: '中级',
-    participants: '4587'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-    tag: '人气TOP',
-    tagType: 'hot',
-    name: '力量进阶训练',
-    duration: '45分钟',
-    level: '高级',
-    participants: '6231'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-    tag: '新课上线',
-    tagType: 'new',
-    name: '瑜伽·身心平衡',
-    duration: '60分钟',
-    level: '初级',
-    participants: '3210'
+const courses = ref([])
+
+// 课程类型映射（用于显示标签）
+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 '已结束'
+  }
+  // 高人气标签（参与人数超过最大人数的80%）
+  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'
+}
+
+// 计算课程时长（从startTime和endTime计算）
+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'
+  }
+  // 如果已经是完整URL直接返回，否则拼接基础路径
+  if (coverImage.startsWith('http')) {
+    return coverImage
+  }
+  // 这里需要根据您的实际图片基础路径配置
+  return `https://your-domain.com${coverImage}`
+}
+
+// 获取推荐课程（按最火排序，返回5条）
+const fetchRecommendCourses = async () => {
+  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 {
+      // 如果没有数据，使用提供的示例数据作为fallback
+      useFallbackData()
+    }
+  } catch (err) {
+    // console.error('获取推荐课程失败:', err)
+    // 使用提供的示例数据作为fallback
+    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: "/images/kickboxing.jpg",
+      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: "/images/yoga_flow.jpg",
+      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: "/images/hatha_yoga.jpg",
+      description: "基础哈他瑜伽，适合所有级别。距开始不足30分钟，已停止预约。"
+    },
+    {
+      id: "6",
+      courseName: "蜜桃臀塑造",
+      courseType: "3",
+      startTime: "2026-05-30T19:00:00",
+      endTime: "2026-05-30T20:00:00",
+      maxMembers: 10,
+      currentMembers: 8,
+      status: "2",
+      coverImage: "/images/glute.jpg",
+      description: "针对性训练臀部肌肉群，课程已于5月30日结束，无法预约。"
+    },
+    {
+      id: "7",
+      courseName: "午间冥想放松",
+      courseType: "1",
+      startTime: "2026-05-31T12:00:00",
+      endTime: "2026-05-31T13:00:00",
+      maxMembers: 15,
+      currentMembers: 6,
+      status: "2",
+      coverImage: "/images/meditation_noon.jpg",
+      description: "午间冥想课程，已于5月31日结束。"
+    }
+  ]
+
+  courses.value = fallbackContent.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 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}`
+  })
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchRecommendCourses()
+})
 </script>

 <style lang="scss">
@@ -206,6 +401,37 @@ const courses = [
  font-weight: 600;
  color: #ffffff;
  background: #f97316;
+  z-index: 2;
+  
+  /* 热门标签 */
+  &.hot {
+    background: #ef4444;
+  }
+  
+  /* 新课标签 */
+  &.new {
+    background: #10b981;
+  }
+  
+  /* 免费标签 */
+  &.free {
+    background: #3b82f6;
+  }
+  
+  /* 满员标签 */
+  &.full {
+    background: #64748b;
+  }
+  
+  /* 已结束标签 */
+  &.ended {
+    background: #94a3b8;
+  }
+  
+  /* 默认标签 */
+  &.default {
+    background: #f97316;
+  }
 }

 /* 课程信息区域样式 */
@@ -244,10 +470,10 @@ const courses = [
  font-size: 20rpx;
  image{
  	display: flex;
-  align-items: center;
-  	  width: 25rpx;
-  	  height: 25rpx;
-    }
+    align-items: center;
+  	width: 25rpx;
+  	height: 25rpx;
+  }
 }

 /* 课程底部区域样式 */
@@ -272,9 +498,9 @@ const courses = [
  font-size: 24rpx;
  image{
 	display: flex;
-align-items: center;
-	  width: 30rpx;
-	  height: 30rpx;
+    align-items: center;
+	width: 30rpx;
+	height: 30rpx;
  }
 }

@@ -288,4 +514,4 @@ align-items: center;
  font-weight: 600;
  color: #f97316;
 }
-</style>
+</style>