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

gym-manage-uniapp/components/index/PageHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="tab-page__header">
+  <view class="tab-page__header" :style="{ padding: `${statusBarHeight}rpx`, height: `${statusBarHeight + 80}rpx` }">
     <view v-if="showBack" :class="['tab-page__back-btn', { 'tab-page__back-btn--animate': isAnimating }]" @tap="goBack">
       <text class="tab-page__back-icon">‹</text>
     </view>
@@ -29,8 +29,11 @@ const props = defineProps({
 })
 
 const isAnimating = ref(false)
+const statusBarHeight = ref(20)
 
 onMounted(() => {
+  const sysInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = sysInfo.statusBarHeight || 20
   if (props.showBack) {
     isAnimating.value = true
   }
@@ -49,7 +52,7 @@ function goBack() {
 
 <style lang="scss" scoped>
 .tab-page__header {
-  padding: 48rpx 32rpx 16rpx;
+  padding: 0 32rpx;
   display: flex;
   align-items: center;
   position: relative;
@@ -89,7 +92,7 @@ function goBack() {
   font-size: 36rpx;
   color: $text-dark;
   font-weight: bold;
-  line-height: 1;
+  line-height: 28rpx;
 }
 
 .tab-page__title-wrap {

gym-manage-uniapp/components/index/QuickEntry.vue

@@ -4,24 +4,243 @@
       v-for="(item, index) in entries"
       :key="index"
       class="entry-item"
-	  @tap="QEClick(item.path)"
+	  @tap="handleEntryClick(item)"
     >
       <view :class="['entry-icon', { accent: item.accent }]">
         <image :src="item.icon" mode="aspectFit" class="icon-img" />
+        <view v-if="item.title === '消息' && hasUnread" class="badge-dot"></view>
       </view>
       <text class="entry-title">{{ item.title }}</text>
       <text class="entry-desc">{{ item.desc }}</text>
     </view>
+
+    <view v-if="showCheckInMenu" class="checkin-menu-overlay" @tap="showCheckInMenu = false">
+      <view class="checkin-menu" @tap.stop>
+        <view class="menu-item" @tap="handleStoreCheckIn">
+          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png" mode="aspectFit" class="menu-icon" />
+          <text class="menu-text">到店签到</text>
+        </view>
+        <view class="menu-item" @tap="handleGroupCourseCheckIn">
+          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png" mode="aspectFit" class="menu-icon" />
+          <text class="menu-text">团课签到</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
+import { ref, computed, onMounted } from 'vue'
+import { getUnreadMessageCount } from '@/api/main.js'
 
-const QEClick = path => {
-	uni.navigateTo({
-		url:path
-	})
+const unreadCount = ref(0)
+const showCheckInMenu = ref(false)
+const TEST_MODE = false
+
+// 是否有未读消息（用于显示红点）
+const hasUnread = computed(() => unreadCount.value > 0)
+
+const loadUnreadCount = async () => {
+  if (TEST_MODE) {
+    unreadCount.value = 3
+    return
+  }
+
+  const token = uni.getStorageSync('token')
+  if (!token) {
+    console.log('[QuickEntry] token 不存在，跳过请求')
+    unreadCount.value = 0
+    return
+  }
+
+  try {
+    const userId = uni.getStorageSync('userId') || 1
+    console.log('[QuickEntry] 请求未读消息数量, userId:', userId)
+    const res = await getUnreadMessageCount(userId)
+    console.log('[QuickEntry] 未读消息数量响应数据:', res)
+    console.log('[QuickEntry] 响应完整类型:', typeof res, Object.prototype.toString.call(res))
+    
+    let count = 0
+    // 兼容多种响应格式
+    if (typeof res === 'number') {
+      count = res
+      console.log('[QuickEntry] 使用直接数字格式')
+    } else if (typeof res === 'string' && res.trim() !== '') {
+      // 处理字符串数字，如 "20"
+      count = parseInt(res, 10)
+      console.log('[QuickEntry] 使用字符串转数字格式:', count)
+    } else if (res !== null && typeof res === 'object') {
+      if (typeof res.count === 'number') {
+        count = res.count
+        console.log('[QuickEntry] 使用 res.count')
+      } else if (res.data !== undefined) {
+        if (typeof res.data === 'number') {
+          count = res.data
+          console.log('[QuickEntry] 使用 res.data')
+        } else if (typeof res.data?.count === 'number') {
+          count = res.data.count
+          console.log('[QuickEntry] 使用 res.data.count')
+        } else if (Array.isArray(res.data?.content)) {
+          count = res.data.content.length
+          console.log('[QuickEntry] 使用 res.data.content.length')
+        } else if (Array.isArray(res.content)) {
+          count = res.content.length
+          console.log('[QuickEntry] 使用 res.content.length')
+        } else if (typeof res.data?.total === 'number') {
+          count = res.data.total
+          console.log('[QuickEntry] 使用 res.data.total')
+        } else if (typeof res.total === 'number') {
+          count = res.total
+          console.log('[QuickEntry] 使用 res.total')
+        }
+      } else if (Array.isArray(res.content)) {
+        count = res.content.length
+        console.log('[QuickEntry] 使用 res.content.length')
+      } else if (typeof res.total === 'number') {
+        count = res.total
+        console.log('[QuickEntry] 使用 res.total')
+      }
+    } else {
+      console.log('[QuickEntry] 无法解析响应格式，res:', res)
+    }
+    
+    unreadCount.value = count
+    uni.setStorageSync('unreadMessageCount', count)
+    console.log('[QuickEntry] 最终未读数量:', count, 'hasUnread:', hasUnread.value)
+  } catch (e) {
+    console.error('[QuickEntry] 获取未读消息数失败:', e)
+    try {
+      const count = uni.getStorageSync('unreadMessageCount')
+      unreadCount.value = count || 0
+    } catch (e2) {
+      unreadCount.value = 0
+    }
+  }
 }
+
+const handleEntryClick = (item) => {
+  if (item.title === '消息' || item.title === '健身数据') {
+    if (TEST_MODE) {
+      uni.showLoading({
+        title: '加载中...',
+        mask: true
+      })
+      setTimeout(() => {
+        uni.hideLoading()
+        if (item.isTabBar) {
+          uni.switchTab({ url: item.path })
+        } else {
+          uni.navigateTo({ url: item.path })
+        }
+      }, 300)
+      return
+    }
+
+    const token = uni.getStorageSync('token')
+    if (!token) {
+      uni.showModal({
+        title: '请登录',
+        content: '是否跳转到登录页面？',
+        confirmText: '确定',
+        cancelText: '取消',
+        confirmColor: '#FF6B35',
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateTo({
+              url: '/pages/login/login'
+            })
+          }
+        }
+      })
+      return
+    }
+    
+    uni.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    setTimeout(() => {
+      uni.hideLoading()
+      if (item.title === '消息') {
+        uni.navigateTo({
+          url: `${item.path}?unreadCount=${unreadCount.value}`
+        })
+      } else if (item.isTabBar) {
+        uni.switchTab({ url: item.path })
+      } else {
+        uni.navigateTo({ url: item.path })
+      }
+    }, 300)
+  } else if (item.title === '签到') {
+    const token = uni.getStorageSync('token')
+    if (!token) {
+      uni.showModal({
+        title: '请登录',
+        content: '是否跳转到登录页面？',
+        confirmText: '确定',
+        cancelText: '取消',
+        confirmColor: '#FF6B35',
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateTo({
+              url: '/pages/login/login'
+            })
+          }
+        }
+      })
+      return
+    }
+    showCheckInMenu.value = !showCheckInMenu.value
+  } else if (item.path) {
+    // tabbar 页面使用 switchTab
+    if (item.isTabBar) {
+      uni.switchTab({
+        url: item.path
+      })
+    } else {
+      uni.navigateTo({
+        url: item.path
+      })
+    }
+  }
+}
+
+const handleStoreCheckIn = () => {
+  showCheckInMenu.value = false
+  uni.navigateTo({
+    url: '/pages/checkIn/checkIn'
+  })
+}
+
+const handleGroupCourseCheckIn = () => {
+  showCheckInMenu.value = false
+  uni.scanCode({
+    onlyFromCamera: true,
+    success: (res) => {
+      console.log('扫码结果:', res)
+      uni.showToast({
+        title: '扫码成功',
+        icon: 'success'
+      })
+    },
+    fail: (err) => {
+      console.error('扫码失败:', err)
+      uni.showToast({
+        title: '扫码失败',
+        icon: 'none'
+      })
+    }
+  })
+}
+
+onMounted(() => {
+  loadUnreadCount()
+})
+
+uni.$on('pageShow', () => {
+  loadUnreadCount()
+})
+
 const entries = [
 		{ 
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
@@ -34,19 +253,23 @@ const entries = [
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
 		  title: '训练计划',
 		  desc: '个性定制',
-		  accent: true
+		  accent: true,
+		  path: "/pages/train/index",
+		  isTabBar: true
 	  },
 	  {
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
 		  title: '健身数据',
 		  desc: '记录分析',
-		  accent: false
+		  accent: false,
+		  path: "/pages/memberInfo/bodyTestTrend"
 	  },
 	  {
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
 		  title: '消息',
 		  desc: '通知消息',
-		  accent: true
+		  accent: true,
+		  path: "/pages/message/index"
 	  },
 	  {
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
@@ -91,6 +314,20 @@ const entries = [
   justify-content: center;
   margin-bottom: 16rpx;
   box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.35);
+  position: relative;
+}
+
+.badge-dot {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  width: 16rpx;
+  height: 16rpx;
+  background: linear-gradient(135deg, #FF4757, #FF2D55);
+  border-radius: 50%;
+  box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.5);
+  z-index: 99;
+  animation: pulse 2s infinite;
 }
 
 .icon-img {
@@ -113,4 +350,93 @@ const entries = [
   font-size: 22rpx;
   color: var(--tabbar-text-inactive);
 }
+
+.checkin-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding-top: 280rpx;
+  padding-right: 60rpx;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.checkin-menu {
+  position: absolute;
+  right: 0;
+  top: 140rpx;
+  background: white;
+  border-radius: 24rpx;
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+  padding: 16rpx;
+  min-width: 320rpx;
+  animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -24rpx;
+    right: 60rpx;
+    width: 0;
+    height: 0;
+    border-left: 24rpx solid transparent;
+    border-right: 24rpx solid transparent;
+    border-bottom: 24rpx solid white;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-40rpx) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  border-radius: 16rpx;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: rgba(0, 0, 0, 0.04);
+    transform: scale(0.98);
+  }
+  
+  & + .menu-item {
+    margin-top: 8rpx;
+  }
+}
+
+.menu-icon {
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 20rpx;
+}
+
+.menu-text {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #2D4A5A;
+}
 </style>

gym-manage-uniapp/components/index/RecommendCourses.vue

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

gym-manage-uniapp/components/index/TodayRecommend.vue

@@ -6,7 +6,7 @@
       <!-- 区域标题 -->
       <text class="section-title">今日推荐</text>
       <!-- 查看更多按钮 -->
-      <view class="view-more">
+      <view class="view-more" @click="handleViewMore">
         <text>查看更多</text>
         <text class="arrow">
 			<uni-icons type="right" size="20" color="#8CA0B0"></uni-icons>
@@ -50,6 +50,10 @@
 </template>
 
 <script setup>
+const handleViewMore = () => {
+  uni.navigateTo({ url: '/pages/discover/index' })
+}
+
 // 今日推荐数据列表
 const recommends = [
   {