novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化会员信息模块及首页组件，清理冗余图片资源

Browse Source
This commit is contained in:
future
2026-06-07 22:41:55 +08:00
parent be7eabdbb1
commit 51bdf15613
111 changed files with 667 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/components/index/RecommendCourses.vue
+52 -208
View File
@@ -9,7 +9,7 @@
<view class="view-more">
<text>查看更多</text>
<text class="arrow">
<uni-icons type="right" size="20" color="#94a3b8"/>
<uni-icons type="right" size="20" color="#8CA0B0"/>
</text>
</view>
</view>
@@ -94,41 +94,21 @@ const getCourseTypeName = (type) => {
// 根据课程信息获取标签文本
const getTag = (course) => {
// 满员标签
if (course.currentMembers >= course.maxMembers) {
return '已满员'
}
// 已结束的课程
if (course.status === '2') {
return '已结束'
}
// 高人气标签（参与人数超过最大人数的80%）
if (course.currentMembers / course.maxMembers >= 0.8) {
return '热门'
}
// 课程类型标签
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'
}
// 默认样式
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)
@@ -137,9 +117,8 @@ const calculateDuration = (startTime, endTime) => {
return `${durationMinutes}分钟`
}
// 获取课程难度（基于课程类型和描述简单判断）
// 获取课程难度
const getCourseLevel = (course) => {
// 可以根据实际需求调整逻辑
if (course.courseType === '2') return '中级'
if (course.courseType === '3') return '高级'
if (course.courseType === '1') return '初级'
@@ -148,169 +127,61 @@ const getCourseLevel = (course) => {
// 处理图片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
}
// 这里需要根据您的实际图片基础路径配置
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}`
}
// 获取推荐课程（按最火排序，返回5条）
// 获取推荐课程
const fetchRecommendCourses = async () => {
try {
const res = await getGroupCoursePage({
page: 0,
size: 5,
sort: 'current_members', // 按参与人数排序
order: 'desc' // 降序，即最火的在前
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 || '未知课程',
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
level: getCourseLevel(course), participants: course.currentMembers || 0, rawData: course
}))
} else {
// 如果没有数据，使用提供的示例数据作为fallback
useFallbackData()
}
} catch (err) {
// console.error('获取推荐课程失败:', err)
// 使用提供的示例数据作为fallback
useFallbackData()
}
} else { useFallbackData() }
} catch (err) { 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日结束。"
}
{ 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: "基础瑜伽" },
{ 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: "臀部训练" },
{ 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: "冥想" }
]
courses.value = fallbackContent.map(course => ({
id: course.id,
image: getImageUrl(course.coverImage),
tag: getTag(course),
tagType: getTagType(course),
name: course.courseName || '未知课程',
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
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}`
})
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()
})
onMounted(() => { fetchRecommendCourses() })
</script>
<style lang="scss">
/* 推荐课程容器样式 */
.recommend-courses {
padding: 0 24rpx;
margin-bottom: 32rpx;
position: relative;
z-index: 1;
}
/* 区域标题栏样式 */
.section-header {
display: flex;
justify-content: space-between;
@@ -318,50 +189,46 @@ onMounted(() => {
margin-bottom: 24rpx;
}
/* 区域标题样式 */
.section-title {
font-size: 34rpx;
font-weight: 700;
color: #1a202c;
color: #2D4A5A;
}
/* 查看更多按钮样式 */
.view-more {
display: flex;
align-items: center;
gap: 4rpx;
font-size: 26rpx;
color: #94a3b8;
color: #8AABBB;
}
/* 箭头图标样式 */
.arrow {
font-size: 32rpx;
}
/* 课程横向滚动容器样式 */
.courses-scroll {
white-space: nowrap;
}
/* 课程列表样式 */
.courses-list {
display: inline-flex;
gap: 48rpx;
}
/* 课程卡片样式 */
.course-card {
width: 320rpx;
background: #ffffff;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
box-shadow: 0 8rpx 28rpx rgba(120, 185, 215, 0.18);
border: 1rpx solid rgba(255, 255, 255, 0.6);
display: inline-block;
vertical-align: top;
}
/* 课程图片区域样式 */
.course-image {
height: 280rpx;
position: relative;
@@ -371,7 +238,6 @@ onMounted(() => {
padding: 20rpx;
}
/* 课程封面图片样式 */
.img {
position: absolute;
left: 0;
@@ -380,17 +246,15 @@ onMounted(() => {
height: 100%;
}
/* 图片渐变遮罩样式 */
.course-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
background: linear-gradient(to top, rgba(45, 74, 90, 0.7) 0%, transparent 60%);
}
/* 课程标签样式 */
.course-tag {
position: absolute;
top: 16rpx;
@@ -400,47 +264,33 @@ onMounted(() => {
font-size: 20rpx;
font-weight: 600;
color: #ffffff;
background: #f97316;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
z-index: 2;
/* 热门标签 */
&.hot {
background: #ef4444;
background: linear-gradient(135deg, #6BA8C0, #8CC5D5);
}
/* 新课标签 */
&.new {
background: #10b981;
background: linear-gradient(135deg, #6DB5C8, #90CEDD);
}
/* 免费标签 */
&.free {
background: #3b82f6;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
}
/* 满员标签 */
&.full {
background: #64748b;
background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
}
/* 已结束标签 */
&.ended {
background: #94a3b8;
background: linear-gradient(135deg, #B0C0CC, #C4D2DC);
}
/* 默认标签 */
&.default {
background: #f97316;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
}
}
/* 课程信息区域样式 */
.course-info {
position: relative;
z-index: 2;
}
/* 课程名称样式 */
.course-name {
display: block;
font-size: 28rpx;
@@ -449,14 +299,12 @@ onMounted(() => {
margin-bottom: 8rpx;
}
/* 课程元信息容器样式 */
.course-meta {
display: flex;
gap: 16rpx;
align-items: center;
}
/* 课程元信息项样式 */
.meta-item {
display: flex;
align-items: end;
@@ -465,7 +313,6 @@ onMounted(() => {
color: rgba(255, 255, 255, 0.8);
}
/* 元信息图标样式 */
.meta-icon {
font-size: 20rpx;
image{
@@ -476,7 +323,6 @@ onMounted(() => {
}
}
/* 课程底部区域样式 */
.course-footer {
padding: 16rpx 10rpx;
display: flex;
@@ -484,16 +330,14 @@ onMounted(() => {
align-items: center;
}
/* 参与人数信息样式 */
.participants {
display: flex;
align-items: center;
gap: 6rpx;
font-size: 22rpx;
color: #94a3b8;
color: #8AABBB;
}
/* 火热图标样式 */
.fire-icon {
font-size: 24rpx;
image{
@@ -504,14 +348,14 @@ onMounted(() => {
}
}
/* 去参与按钮样式 */
.join-btn {
padding: 12rpx 28rpx;
background: transparent;
border: 2rpx solid #f97316;
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
border: none;
border-radius: 9999rpx;
font-size: 22rpx;
font-weight: 600;
color: #f97316;
color: #ffffff;
box-shadow: 0 6rpx 16rpx rgba(122, 181, 204, 0.35);
}
</style>