381 lines
9.4 KiB
Vue
381 lines
9.4 KiB
Vue
<template>
|
||
<!-- 推荐团课卡片 -->
|
||
<view class="recommend-card" :style="cardStyle" @click="handleCardClick">
|
||
<!-- 卡片头部：推荐信息 -->
|
||
<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" @click.stop="handleJoinCourse">
|
||
<view class="action-btn">
|
||
<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 handleCardClick = () => {
|
||
if (!props.recommend.groupCourse) {
|
||
uni.showToast({ title: '课程信息不完整', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({ url: `/pages/groupCourse/detail?id=${courseId.value}` })
|
||
}
|
||
|
||
// 处理预约课程点击
|
||
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>
|