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

<template>
  <!-- 课程卡片 -->
  <view class="course-card" :style="cardStyle">
    <!-- 课程图片区域 -->
    <view class="course-image" :style="imageStyle">
      <!-- 课程封面图片 -->
      <image :src="course.image" mode="aspectFill" class="img" />
      <!-- 图片渐变遮罩 -->
      <view class="course-overlay"></view>
      <!-- 课程标签 -->
      <text :class="['course-tag', course.tagType]">{{ course.tag }}</text>
      <!-- 课程信息区域 -->
      <view class="course-info">
        <!-- 课程名称 -->
        <text class="course-name">{{ course.name }}</text>
        <!-- 课程元信息（时长、难度） -->
        <view class="course-meta">
          <!-- 时长信息 -->
          <view class="meta-item">
            <text class="meta-icon">
              <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png"/>
            </text>
            <text>{{ course.duration }}</text>
          </view>
          <!-- 难度信息 -->
          <view class="meta-item">
            <text class="meta-icon">
              <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png"/>
            </text>
            <text>{{ course.level }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 课程底部区域 -->
    <view class="course-footer">
      <!-- 参与人数信息 -->
      <view class="participants">
        <text class="fire-icon">
          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png"/>
        </text>
        <text>{{ course.participants }}人参与</text>
      </view>
      <!-- 去参与按钮 -->
      <view class="join-btn" @click="handleJoinCourse">
        <text>去参与</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, computed } from 'vue'

// 定义 props
const props = defineProps({
  course: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      image: '',
      tag: '',
      tagType: 'default',
      name: '',
      duration: '',
      level: '',
      participants: 0,
      rawData: null
    })
  },
  width: {
    type: [Number, String],
    default: 320,
    description: '卡片宽度，单位 rpx'
  },
  height: {
    type: [Number, String],
    default: null,
    description: '卡片高度，单位 rpx，不传则自适应'
  },
  imageHeight: {
    type: [Number, String],
    default: 280,
    description: '图片区域高度，单位 rpx'
  },
  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.height) {
    style.height = typeof props.height === 'number' ? `${props.height}rpx` : props.height
  }
  
  if (props.borderRadius) {
    style.borderRadius = typeof props.borderRadius === 'number' ? `${props.borderRadius}rpx` : props.borderRadius
  }
  
  return style
})

// 计算图片区域样式
const imageStyle = computed(() => {
  const style = {}
  
  if (props.imageHeight) {
    style.height = typeof props.imageHeight === 'number' ? `${props.imageHeight}rpx` : props.imageHeight
  }
  
  return style
})

// 处理参与课程点击
const handleJoinCourse = () => {
  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${props.course.id}` })
}
</script>

<style lang="scss">
.course-card {
  min-width: 320rpx;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-height: 400rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 28rpx var(--shadow-blue-light);
  border: 1rpx solid rgba(255, 255, 255, 0.6);
  display: block;
}

.course-image {
  min-height: 280rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20rpx;
}

.img {
  position: absolute;
  left: 0;
  top: 0;
  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%);
}

.course-tag {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  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: relative;
  z-index: 2;
}

.course-name {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.course-meta {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: end;
  gap: 6rpx;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
}

.meta-icon {
  font-size: 20rpx;
  image{
  	display: flex;
    align-items: center;
  	width: 25rpx;
  	height: 25rpx;
  }
}

.course-footer {
  padding: 16rpx 10rpx;
  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 {
  font-size: 24rpx;
  image{
	display: flex;
    align-items: center;
	width: 30rpx;
	height: 30rpx;
  }
}

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