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

This commit is contained in:
2026-06-13 17:11:36 +08:00
parent b345ceeb42
commit 96b8fd2534
16 changed files with 2760 additions and 384 deletions
@@ -47,9 +47,19 @@
</view>
<!-- 课程时长 -->
<view class="course-duration">
<uni-icons type="time" size="14" color="#8A99B4" />
<text>{{ formatDuration(course.startTime, course.endTime) }}</text>
<view class="course-tags">
<view class="tag-item duration-tag">
<uni-icons type="time" size="14" color="#8A99B4" />
<text>{{ formatDuration(course.startTime, course.endTime) }}</text>
</view>
<view
v-for="label in courseTypeLabels"
:key="label.id"
class="tag-item type-tag"
:style="{ background: `${label.color}15`, color: label.color }"
>
<text>{{ label.labelName }}</text>
</view>
</view>
</view>
@@ -109,6 +119,10 @@ const props = defineProps({
course: {
type: Object,
required: true
},
courseTypeLabels: {
type: Array,
default: () => []
}
})
@@ -150,9 +164,29 @@ const formatTime = (dateStr) => {
const formatDuration = (startStr, endStr) => {
if (!startStr || !endStr) return ''
const start = new Date(startStr)
const end = new Date(endStr)
const minutes = Math.floor((end.getTime() - start.getTime()) / 60000)
if (isNaN(start.getTime()) || isNaN(end.getTime())) {
console.warn(`[CourseCard] 无效的时间格式: startTime=${startStr}, endTime=${endStr}`)
return ''
}
const diffMs = end.getTime() - start.getTime()
if (diffMs <= 0) {
console.warn(`[CourseCard] 结束时间小于或等于开始时间: startTime=${startStr}, endTime=${endStr}`)
return ''
}
const maxDurationMinutes = 24 * 60
const minutes = Math.floor(diffMs / 60000)
if (minutes > maxDurationMinutes) {
console.warn(`[CourseCard] 课程时长超过24小时,已修正: ${minutes}分钟 -> ${maxDurationMinutes}分钟`)
return `${maxDurationMinutes}分钟以上`
}
return `${minutes}分钟`
}
@@ -340,19 +374,35 @@ const handleBooking = () => {
flex: 1;
}
/* 课程时长 */
.course-duration {
/* 课程标签区域 */
.course-tags {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
}
/* 标签项 */
.tag-item {
display: inline-flex;
align-items: center;
gap: 8rpx;
gap: 6rpx;
padding: 10rpx 20rpx;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border-radius: 20rpx;
font-size: 24rpx;
color: #3B82F6;
font-weight: 500;
}
/* 时长标签 */
.duration-tag {
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
color: #3B82F6;
}
/* 类型标签 */
.type-tag {
font-weight: 600;
}
/* 卡片底部区域 */
.card-footer {
padding: 24rpx 32rpx 28rpx;