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

完善团课相关页面交互，完成团课列表页基础后端交互。（后端连接至服务器，版本为DEV分支版本）

Browse Source
This commit is contained in:
liwentao
2026-06-13 17:11:36 +08:00
parent b345ceeb42
commit 96b8fd2534
16 changed files with 2760 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/components/index/CourseCard.vue
+273
View File
@@ -0,0 +1,273 @@
<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>
gym-manage-uniapp/components/index/PageHeader.vue
+114
View File
@@ -0,0 +1,114 @@
<template>
<view class="tab-page__header">
<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>
<view class="tab-page__title-wrap">
<text class="tab-page__title">{{ title }}</text>
<text class="tab-page__subtitle">{{ subtitle }}</text>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
title: {
type: String,
default: '课程'
},
subtitle: {
type: String,
default: '精品团课 · 私教 · 线上课'
},
showBack: {
type: Boolean,
default: false
}
})
const isAnimating = ref(false)
onMounted(() => {
if (props.showBack) {
isAnimating.value = true
}
})
function goBack() {
uni.navigateBack({
fail: () => {
uni.switchTab({
url: '/pages/index/index'
})
}
})
}
</script>
<style lang="scss" scoped>
.tab-page__header {
padding: 48rpx 32rpx 16rpx;
display: flex;
align-items: center;
position: relative;
}
.tab-page__back-btn {
width: 48rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
background: rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
opacity: 0;
transform: translateX(120rpx);
transition: none;
z-index: 1;
}
.tab-page__back-btn--animate {
animation: slideInFromRight 0.4s ease-out forwards;
}
@keyframes slideInFromRight {
0% {
opacity: 0;
transform: translateX(120rpx);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.tab-page__back-icon {
font-size: 36rpx;
color: $text-dark;
font-weight: bold;
line-height: 1;
}
.tab-page__title-wrap {
flex: 1;
position: relative;
z-index: 2;
}
.tab-page__title {
display: block;
font-size: 40rpx;
font-weight: $font-weight-bold;
color: $text-dark;
}
.tab-page__subtitle {
display: block;
margin-top: 8rpx;
font-size: 24rpx;
color: $text-muted;
}
</style>
gym-manage-uniapp/components/index/RecommendCourses.vue
+10 -193
View File
@@ -6,7 +6,7 @@
<!-- 区域标题 -->
<text class="section-title">推荐课程</text>
<!-- 查看更多按钮 -->
<view class="view-more">
<view class="view-more" @tap="goMore">
<text>查看更多</text>
<text class="arrow">
<uni-icons type="right" size="20" color="#8CA0B0"/>
@@ -19,57 +19,12 @@
<!-- 课程列表 -->
<view class="courses-list">
<!-- 课程卡片 -->
<view
<CourseCard
v-for="(course, index) in courses"
:key="course.id || index"
class="course-card"
>
<!-- 课程图片区域 -->
<view class="course-image">
<!-- 课程封面图片 -->
<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(course)">
<text>去参与</text>
</view>
</view>
</view>
:course="course"
@join="handleJoinCourse"
/>
</view>
</scroll-view>
</view>
@@ -78,6 +33,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { getGroupCoursePage } from '@/api/main.js'
import CourseCard from './CourseCard.vue'
// 测试开关：设置为 true 时使用假数据，false 时使用真实API数据
const USE_MOCK_DATA = true
@@ -181,6 +137,10 @@ const handleJoinCourse = (course) => {
}
onMounted(() => { fetchRecommendCourses() })
function goMore(){
uni.navigateTo({ url: '/pages/recommendCourses/index' })
}
</script>
<style lang="scss">
@@ -224,147 +184,4 @@ onMounted(() => { fetchRecommendCourses() })
display: inline-flex;
gap: 48rpx;
}
.course-card {
width: 320rpx;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
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: 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>