完善团课推荐页面
This commit is contained in:
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<!-- 推荐团课卡片 -->
|
||||
<view class="recommend-card" :style="cardStyle">
|
||||
<!-- 卡片头部：推荐信息 -->
|
||||
<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">
|
||||
<view class="action-btn" @click="handleJoinCourse">
|
||||
<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 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>
|
||||
Reference in New Issue
Block a user