1364 lines
47 KiB
Vue
1364 lines
47 KiB
Vue
<template>
|
||
<view class="course-list-container">
|
||
<!-- 顶部header -->
|
||
<view class="top-header">
|
||
<view class="header-left">
|
||
<text class="app-title">课程</text>
|
||
</view>
|
||
<view class="header-right">
|
||
<view class="avatar-wrapper" @click="goToProfile">
|
||
<image
|
||
v-if="userInfo.avatar"
|
||
:src="userInfo.avatar"
|
||
class="avatar"
|
||
mode="aspectFill"
|
||
/>
|
||
<view v-else class="avatar-placeholder">
|
||
<text class="avatar-text">{{ (userInfo.realName || userInfo.username || 'U').charAt(0) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选区域 -->
|
||
<view class="filter-section">
|
||
<view class="filter-row">
|
||
<picker
|
||
:key="`subject-picker-${subjectPickerKey}`"
|
||
mode="selector"
|
||
:range="subjectPickerOptions"
|
||
range-key="label"
|
||
:value="selectedSubjectIndex"
|
||
@change="onSubjectChange"
|
||
>
|
||
<view class="filter-item">
|
||
<text class="filter-label">学科</text>
|
||
<text class="filter-value">{{ selectedSubjectName || '全部' }}</text>
|
||
<text class="filter-icon">▼</text>
|
||
</view>
|
||
</picker>
|
||
<picker
|
||
mode="selector"
|
||
:range="courseUnitPickerOptions"
|
||
range-key="label"
|
||
:value="selectedCourseUnitIndex"
|
||
@change="onCourseUnitChange"
|
||
>
|
||
<view class="filter-item">
|
||
<text class="filter-label">课程单元</text>
|
||
<text class="filter-value">{{ selectedCourseUnitName || '全部' }}</text>
|
||
<text class="filter-icon">▼</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日历/日程部分 -->
|
||
<view class="calendar-section">
|
||
<view class="week-days">
|
||
<view
|
||
v-for="(day, index) in weekDays"
|
||
:key="index"
|
||
class="day-item"
|
||
:class="{ today: day.isToday }"
|
||
>
|
||
<text class="day-name">{{ day.name }}</text>
|
||
<view class="day-date" :class="{ 'date-today': day.isToday }">
|
||
<text v-if="!day.isToday" class="date-text">{{ day.date }}</text>
|
||
<text v-else class="today-text">今</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="calendar-info">
|
||
<view class="today-course-count">
|
||
<text class="count-label">今日共</text>
|
||
<text class="count-number">{{ todayCourseCount }}</text>
|
||
<text class="count-label">节课</text>
|
||
</view>
|
||
<text class="calendar-link" @click="toggleCalendar">
|
||
{{ showCalendar ? '收起日历' : '展开日历' }}
|
||
<text class="calendar-arrow" :class="{ 'arrow-up': showCalendar }">›</text>
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 展开的日历 -->
|
||
<view class="calendar-expanded" :class="{ 'expanded': showCalendar }">
|
||
<view class="calendar-wrapper" v-if="showCalendar">
|
||
<u-calendar
|
||
:key="calendarKey"
|
||
:show="true"
|
||
mode="date"
|
||
:formatter="calendarFormatter"
|
||
pageInline
|
||
:showConfirm="false"
|
||
:closeOnClickOverlay="false"
|
||
></u-calendar>
|
||
</view>
|
||
|
||
<!-- 课程时间列表 -->
|
||
<view class="course-time-list" v-if="showCalendar && courseTimeList.length > 0">
|
||
<view class="time-list-title">课程时间安排</view>
|
||
<view
|
||
v-for="(item, index) in courseTimeList"
|
||
:key="index"
|
||
class="time-item"
|
||
>
|
||
<view class="time-item-header">
|
||
<text class="time-course-name">{{ item.courseName }}</text>
|
||
<text class="time-status" :class="'status-' + item.status">{{ getStatusTextByStatus(item.status) }}</text>
|
||
</view>
|
||
<view class="time-item-info" v-if="item.startTime">
|
||
<text class="time-label">开始时间：</text>
|
||
<text class="time-value">{{ formatDateTime(item.startTime) }}</text>
|
||
</view>
|
||
<view class="time-item-info" v-if="item.endTime">
|
||
<text class="time-label">结束时间：</text>
|
||
<text class="time-value">{{ formatDateTime(item.endTime) }}</text>
|
||
</view>
|
||
<view class="time-item-info" v-if="!item.startTime && !item.endTime">
|
||
<text class="time-label">时间安排：</text>
|
||
<text class="time-value">进行中（无具体时间）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="showCalendar" class="no-course-time">
|
||
<text class="no-time-text">暂无课程时间安排</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 课程列表 -->
|
||
<view v-if="filteredCourseList.length === 0" class="empty-wrapper">
|
||
<view class="empty-illustration">
|
||
<text class="empty-icon">💻</text>
|
||
</view>
|
||
<text class="empty-text">暂无课程</text>
|
||
</view>
|
||
|
||
<view v-else class="course-list">
|
||
<view
|
||
v-for="course in filteredCourseList"
|
||
:key="course.id"
|
||
class="course-item"
|
||
@click="goToCourseDetail(course)"
|
||
>
|
||
<view class="course-header">
|
||
<view class="course-title-wrapper">
|
||
<text class="course-name">{{ course.courseName }}</text>
|
||
<text class="course-subject" v-if="course.subjectName">{{ course.subjectName }}</text>
|
||
</view>
|
||
<text class="course-status" :class="getStatusClass(course)">{{ getStatusText(course) }}</text>
|
||
</view>
|
||
<text class="course-desc">{{ course.description || '暂无描述' }}</text>
|
||
|
||
<!-- 学习进度信息 -->
|
||
<view class="course-progress" v-if="course.learningRecord">
|
||
<view class="progress-bar">
|
||
<view class="progress-fill" :style="{ width: (course.learningRecord.progress || 0) + '%' }"></view>
|
||
</view>
|
||
<view class="progress-info">
|
||
<text class="progress-text">学习进度：{{ course.learningRecord.progress || 0 }}%</text>
|
||
<text class="progress-time" v-if="course.learningRecord.totalDuration">
|
||
已学习：{{ formatDuration(course.learningRecord.totalDuration) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import request from '@/utils/request.js'
|
||
import { getMyCourses } from '@/api/study/course.js'
|
||
import { getMyRecords } from '@/api/study/learningRecord.js'
|
||
import { listSubject } from '@/api/study/subject.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
courseList: [],
|
||
filteredCourseList: [],
|
||
loading: false,
|
||
weekDays: [],
|
||
todayCourseCount: 0,
|
||
showCalendar: false, // 日历展开状态
|
||
courseTimeList: [], // 课程时间列表
|
||
calendarKey: 0, // 用于强制刷新日历组件
|
||
// 学科相关
|
||
subjectList: [],
|
||
selectedSubjectId: null,
|
||
selectedSubjectName: '',
|
||
// 课程单元相关（课程状态筛选）
|
||
courseUnitOptions: [
|
||
{ value: 'all', label: '全部' },
|
||
{ value: 'active', label: '进行中' },
|
||
{ value: 'pending', label: '未开始' },
|
||
{ value: 'ended', label: '已结束' }
|
||
],
|
||
selectedCourseUnit: 'all',
|
||
selectedCourseUnitName: '全部',
|
||
selectedSubjectIndex: 0,
|
||
selectedCourseUnitIndex: 0,
|
||
// 用于强制重新渲染 picker 的 key
|
||
subjectPickerKey: 0,
|
||
hasLoadedOnce: false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters('auth', ['userInfo']),
|
||
subjectPickerOptions() {
|
||
// 确保返回正确的数据格式
|
||
const options = [
|
||
{ value: null, label: '全部' }
|
||
]
|
||
|
||
// 如果学科列表存在且不为空，添加学科选项
|
||
if (this.subjectList && Array.isArray(this.subjectList) && this.subjectList.length > 0) {
|
||
const subjectOptions = this.subjectList
|
||
.filter(subject => subject && subject.id && subject.subjectName)
|
||
.map(subject => ({
|
||
value: subject.id,
|
||
label: subject.subjectName
|
||
}))
|
||
options.push(...subjectOptions)
|
||
}
|
||
|
||
return options
|
||
},
|
||
courseUnitPickerOptions() {
|
||
return this.courseUnitOptions
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initWeekDays()
|
||
this.loadSubjectList()
|
||
this.loadCourseList(true)
|
||
},
|
||
onShow() {
|
||
// 每次显示时刷新列表（确保进度是最新的）
|
||
if (this.hasLoadedOnce) {
|
||
this.loadCourseList()
|
||
}
|
||
// 通知底部导航栏更新
|
||
uni.$emit('tabbar-update')
|
||
},
|
||
methods: {
|
||
initWeekDays() {
|
||
const days = ['一', '二', '三', '四', '五', '六', '日']
|
||
const today = new Date()
|
||
const dayOfWeek = today.getDay() === 0 ? 7 : today.getDay() // 转换为周一到周日 1-7
|
||
const startOfWeek = new Date(today)
|
||
startOfWeek.setDate(today.getDate() - (dayOfWeek - 1))
|
||
|
||
this.weekDays = days.map((name, index) => {
|
||
const date = new Date(startOfWeek)
|
||
date.setDate(startOfWeek.getDate() + index)
|
||
const dateNum = date.getDate()
|
||
const isToday = date.toDateString() === today.toDateString()
|
||
|
||
return {
|
||
name,
|
||
date: dateNum,
|
||
isToday
|
||
}
|
||
})
|
||
},
|
||
|
||
async loadSubjectList() {
|
||
try {
|
||
const response = await listSubject()
|
||
console.log('学科列表接口响应:', response)
|
||
if (response.code === 200) {
|
||
// 确保数据正确赋值
|
||
const subjectData = response.data || []
|
||
// 使用 Vue.set 或直接赋值来触发响应式更新
|
||
this.subjectList = [...subjectData] // 创建新数组确保响应式更新
|
||
console.log('学科列表数据:', this.subjectList)
|
||
console.log('学科下拉选项:', this.subjectPickerOptions)
|
||
console.log('学科下拉选项数量:', this.subjectPickerOptions.length)
|
||
|
||
// 使用 $nextTick 确保 DOM 更新完成后再更新 key 强制重新渲染
|
||
this.$nextTick(() => {
|
||
console.log('DOM 更新完成，学科下拉选项:', this.subjectPickerOptions)
|
||
// 更新 key 强制重新渲染 picker 组件
|
||
this.subjectPickerKey++
|
||
})
|
||
} else {
|
||
console.error('学科列表接口返回错误:', response)
|
||
uni.showToast({
|
||
title: response.msg || '加载学科列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('加载学科列表失败:', error)
|
||
uni.showToast({
|
||
title: '加载学科列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
async loadCourseList(showSkeleton = false) {
|
||
const shouldShowSkeleton = showSkeleton || !this.hasLoadedOnce
|
||
if (shouldShowSkeleton) {
|
||
this.loading = true
|
||
}
|
||
try {
|
||
// 构建请求参数
|
||
const params = {}
|
||
if (this.selectedSubjectId) {
|
||
params.subjectId = this.selectedSubjectId
|
||
}
|
||
if (this.selectedCourseUnit !== 'all') {
|
||
params.courseUnit = this.selectedCourseUnit
|
||
}
|
||
|
||
// 使用学员端课程列表接口：GET /study/course/my-courses
|
||
// 如果有筛选参数，使用 request.get；否则使用封装的 API
|
||
const response = Object.keys(params).length > 0
|
||
? await request.get('/study/course/my-courses', params)
|
||
: await getMyCourses()
|
||
console.log('课程列表响应:', response)
|
||
|
||
if (response.code === 200) {
|
||
const courses = response.data || []
|
||
console.log('课程数据:', courses)
|
||
// 输出完整的课程数据结构，包括所有字段
|
||
console.log('课程数据详细信息:', courses.map(c => ({
|
||
id: c.id,
|
||
courseName: c.courseName,
|
||
startTime: c.startTime,
|
||
endTime: c.endTime,
|
||
createTime: c.createTime,
|
||
updateTime: c.updateTime,
|
||
status: c.status,
|
||
allFields: Object.keys(c)
|
||
})))
|
||
|
||
// 获取学习记录
|
||
const learningRecordsResponse = await getMyRecords()
|
||
const learningRecords = learningRecordsResponse.code === 200 ? (learningRecordsResponse.data || []) : []
|
||
console.log('学习记录:', learningRecords)
|
||
|
||
// 将学习记录关联到课程
|
||
const processedCourses = courses.map(course => {
|
||
const record = learningRecords.find(r => r.courseId === course.id)
|
||
return {
|
||
...course,
|
||
learningRecord: record || null
|
||
}
|
||
})
|
||
|
||
console.log('处理后的课程列表:', processedCourses)
|
||
|
||
// 使用 Vue.set 或直接赋值确保响应式更新
|
||
this.courseList = processedCourses
|
||
// 应用搜索和筛选
|
||
this.applyFilter()
|
||
|
||
// 计算今日课程数（今天有课的课程，包括进行中的课程）
|
||
const today = new Date()
|
||
today.setHours(0, 0, 0, 0)
|
||
|
||
this.todayCourseCount = processedCourses.filter(course => {
|
||
// 如果课程状态是进行中，且没有明确的时间信息，也算今天有课
|
||
const courseStatus = this.getCourseStatus(course)
|
||
if (courseStatus === 'active' && !course.startTime && !course.endTime) {
|
||
return true
|
||
}
|
||
|
||
// 如果有开始时间，按时间范围判断
|
||
if (course.startTime) {
|
||
const startDate = new Date(course.startTime)
|
||
startDate.setHours(0, 0, 0, 0)
|
||
|
||
// 如果课程有结束时间
|
||
if (course.endTime) {
|
||
const endDate = new Date(course.endTime)
|
||
endDate.setHours(0, 0, 0, 0)
|
||
// 今天在课程时间范围内（开始时间 <= 今天 <= 结束时间）
|
||
return startDate.getTime() <= today.getTime() && endDate.getTime() >= today.getTime()
|
||
} else {
|
||
// 如果没有结束时间，只要开始时间 <= 今天就算今天有课
|
||
return startDate.getTime() <= today.getTime()
|
||
}
|
||
}
|
||
|
||
return false
|
||
}).length
|
||
|
||
console.log('今日课程数计算:', {
|
||
today: today.toISOString(),
|
||
totalCourses: processedCourses.length,
|
||
todayCount: this.todayCourseCount,
|
||
coursesWithTime: processedCourses.filter(c => c.startTime).map(c => ({
|
||
name: c.courseName,
|
||
startTime: c.startTime,
|
||
endTime: c.endTime,
|
||
startDate: c.startTime ? new Date(c.startTime).toISOString() : null
|
||
}))
|
||
})
|
||
|
||
// 如果日历已展开，更新课程时间列表并刷新日历
|
||
if (this.showCalendar) {
|
||
this.$nextTick(() => {
|
||
this.loadCourseTimeList()
|
||
// 强制刷新日历组件，确保标记正确显示
|
||
this.calendarKey++
|
||
})
|
||
}
|
||
} else {
|
||
console.error('课程列表接口返回错误:', response)
|
||
uni.showToast({
|
||
title: response.msg || '加载失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('加载课程列表失败:', error)
|
||
uni.showToast({
|
||
title: error.message || '加载失败',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
if (shouldShowSkeleton) {
|
||
this.loading = false
|
||
}
|
||
this.hasLoadedOnce = true
|
||
}
|
||
},
|
||
|
||
applyFilter() {
|
||
let filtered = [...this.courseList]
|
||
|
||
// 按学科筛选
|
||
if (this.selectedSubjectId) {
|
||
filtered = filtered.filter(course => {
|
||
return course.subjectId === this.selectedSubjectId
|
||
})
|
||
}
|
||
|
||
// 按课程状态筛选
|
||
if (this.selectedCourseUnit !== 'all') {
|
||
filtered = filtered.filter(course => {
|
||
const status = this.getCourseStatus(course)
|
||
return status === this.selectedCourseUnit
|
||
})
|
||
}
|
||
|
||
this.filteredCourseList = filtered
|
||
},
|
||
|
||
onSubjectChange(e) {
|
||
const index = e.detail.value
|
||
const selected = this.subjectPickerOptions[index]
|
||
this.selectedSubjectIndex = index
|
||
this.selectedSubjectId = selected.value
|
||
this.selectedSubjectName = selected.value ? selected.label : ''
|
||
// 应用筛选（包括搜索）
|
||
this.applyFilter()
|
||
},
|
||
|
||
onCourseUnitChange(e) {
|
||
const index = e.detail.value
|
||
const selected = this.courseUnitPickerOptions[index]
|
||
this.selectedCourseUnitIndex = index
|
||
this.selectedCourseUnit = selected.value
|
||
this.selectedCourseUnitName = selected.label
|
||
// 应用筛选（包括搜索）
|
||
this.applyFilter()
|
||
},
|
||
|
||
goToProfile() {
|
||
uni.switchTab({
|
||
url: '/pages/profile/profile'
|
||
})
|
||
},
|
||
|
||
toggleCalendar() {
|
||
this.showCalendar = !this.showCalendar
|
||
if (this.showCalendar) {
|
||
// 确保课程列表已加载后再加载时间列表
|
||
this.$nextTick(() => {
|
||
this.loadCourseTimeList()
|
||
// 强制刷新日历组件，确保标记正确显示
|
||
this.calendarKey++
|
||
})
|
||
}
|
||
},
|
||
|
||
// 加载课程时间列表
|
||
loadCourseTimeList() {
|
||
// 从课程列表中提取所有课程（包括没有明确时间的进行中课程）
|
||
this.courseTimeList = this.courseList
|
||
.map(course => {
|
||
const courseStatus = this.getCourseStatus(course)
|
||
// 如果课程有开始时间，或者状态是进行中，都显示
|
||
if (course.startTime || courseStatus === 'active') {
|
||
return {
|
||
courseName: course.courseName,
|
||
startTime: course.startTime,
|
||
endTime: course.endTime,
|
||
status: courseStatus
|
||
}
|
||
}
|
||
return null
|
||
})
|
||
.filter(item => item !== null)
|
||
.sort((a, b) => {
|
||
// 按开始时间排序，没有开始时间的排在后面
|
||
if (!a.startTime && !b.startTime) return 0
|
||
if (!a.startTime) return 1
|
||
if (!b.startTime) return -1
|
||
return new Date(a.startTime) - new Date(b.startTime)
|
||
})
|
||
console.log('课程时间列表:', this.courseTimeList)
|
||
console.log('课程列表原始数据:', this.courseList.map(c => ({
|
||
name: c.courseName,
|
||
startTime: c.startTime,
|
||
endTime: c.endTime,
|
||
status: this.getCourseStatus(c)
|
||
})))
|
||
console.log('所有课程数量:', this.courseList.length)
|
||
console.log('所有课程完整信息:', this.courseList.map(c => ({
|
||
id: c.id,
|
||
courseName: c.courseName,
|
||
startTime: c.startTime,
|
||
endTime: c.endTime,
|
||
createTime: c.createTime,
|
||
updateTime: c.updateTime,
|
||
status: c.status,
|
||
allFields: Object.keys(c)
|
||
})))
|
||
},
|
||
|
||
// 日历格式化器（标记有课程的日期）
|
||
calendarFormatter(day) {
|
||
// 直接从课程列表检查，确保数据是最新的
|
||
const dayDate = new Date(day.date)
|
||
dayDate.setHours(0, 0, 0, 0)
|
||
const today = new Date()
|
||
today.setHours(0, 0, 0, 0)
|
||
|
||
// 检查该日期是否有课程（包括开始日期和结束日期之间的所有日期）
|
||
const hasCourse = this.courseList.some(course => {
|
||
// 如果课程有开始时间，按时间范围判断
|
||
if (course.startTime) {
|
||
const startDate = new Date(course.startTime)
|
||
startDate.setHours(0, 0, 0, 0)
|
||
|
||
// 如果只有开始时间，只标记开始日期
|
||
if (!course.endTime) {
|
||
const isMatch = startDate.getTime() === dayDate.getTime()
|
||
if (isMatch) {
|
||
console.log('标记课程日期（只有开始时间）:', {
|
||
courseName: course.courseName,
|
||
startTime: course.startTime,
|
||
startDate: startDate.toISOString(),
|
||
dayDate: dayDate.toISOString()
|
||
})
|
||
}
|
||
return isMatch
|
||
}
|
||
|
||
// 如果有结束时间，标记从开始到结束的所有日期
|
||
const endDate = new Date(course.endTime)
|
||
endDate.setHours(0, 0, 0, 0)
|
||
|
||
const isInRange = dayDate.getTime() >= startDate.getTime() && dayDate.getTime() <= endDate.getTime()
|
||
if (isInRange) {
|
||
console.log('标记课程日期（时间范围）:', {
|
||
courseName: course.courseName,
|
||
startTime: course.startTime,
|
||
endTime: course.endTime,
|
||
startDate: startDate.toISOString(),
|
||
endDate: endDate.toISOString(),
|
||
dayDate: dayDate.toISOString()
|
||
})
|
||
}
|
||
return isInRange
|
||
}
|
||
|
||
// 如果课程没有明确的时间信息，根据状态判断
|
||
if (!course.startTime && !course.endTime) {
|
||
const courseStatus = this.getCourseStatus(course)
|
||
if (courseStatus === 'active') {
|
||
// 对于进行中的课程，如果没有明确时间，只标记今天
|
||
return dayDate.getTime() === today.getTime()
|
||
} else if (courseStatus === 'pending') {
|
||
// 对于未开始的课程，如果没有明确时间，可能是长期课程，标记今天和未来
|
||
return dayDate.getTime() >= today.getTime()
|
||
}
|
||
}
|
||
|
||
return false
|
||
})
|
||
|
||
if (hasCourse) {
|
||
day.bottomInfo = '有课'
|
||
day.dot = true
|
||
}
|
||
return day
|
||
},
|
||
|
||
// 格式化日期时间
|
||
formatDateTime(dateTime) {
|
||
if (!dateTime) return ''
|
||
const date = new Date(dateTime)
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
const hour = date.getHours().toString().padStart(2, '0')
|
||
const minute = date.getMinutes().toString().padStart(2, '0')
|
||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||
},
|
||
|
||
getCourseStatus(course) {
|
||
// 如果课程出现在列表中，说明已经分配，即使status是0，也应该允许查看
|
||
// 主要根据时间来判断状态
|
||
const now = new Date()
|
||
|
||
// 如果课程明确被禁用（status是'2'或2），则显示禁用
|
||
if (course.status === '2' || course.status === 2) {
|
||
return 'disabled'
|
||
}
|
||
|
||
// 根据时间判断状态
|
||
if (course.startTime && new Date(course.startTime) > now) {
|
||
return 'pending'
|
||
}
|
||
if (course.endTime && new Date(course.endTime) < now) {
|
||
return 'ended'
|
||
}
|
||
|
||
// 如果status是0或null，但时间有效，显示为active（因为已经在列表中，说明已分配）
|
||
return 'active'
|
||
},
|
||
|
||
goToCourseDetail(course) {
|
||
uni.navigateTo({
|
||
url: `/pages/course/detail?id=${course.id}`
|
||
})
|
||
},
|
||
getStatusText(course) {
|
||
const status = this.getCourseStatus(course)
|
||
return this.getStatusTextByStatus(status)
|
||
},
|
||
|
||
getStatusTextByStatus(status) {
|
||
const statusMap = {
|
||
'active': '进行中',
|
||
'pending': '未开始',
|
||
'ended': '已结束',
|
||
'disabled': '已禁用'
|
||
}
|
||
return statusMap[status] || '未知'
|
||
},
|
||
getStatusClass(course) {
|
||
const status = this.getCourseStatus(course)
|
||
return `status-${status}`
|
||
},
|
||
formatDuration(seconds) {
|
||
if (!seconds) return '0分钟'
|
||
const hours = Math.floor(seconds / 3600)
|
||
const minutes = Math.floor((seconds % 3600) / 60)
|
||
if (hours > 0) {
|
||
return `${hours}小时${minutes}分钟`
|
||
}
|
||
return `${minutes}分钟`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.course-list-container {
|
||
width: 100%;
|
||
padding: 0;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
padding-bottom: 120rpx; // 为底部导航栏留出空间
|
||
box-sizing: border-box;
|
||
|
||
@media (min-width: 768px) {
|
||
padding-bottom: 140rpx;
|
||
}
|
||
}
|
||
|
||
// 顶部header
|
||
.top-header {
|
||
background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
padding-top: calc(var(--status-bar-height) + 20rpx);
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 20rpx 40rpx;
|
||
padding-top: calc(var(--status-bar-height) + 20rpx);
|
||
}
|
||
|
||
.header-left {
|
||
flex: 1;
|
||
|
||
.app-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar-wrapper {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
@media (min-width: 768px) {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
|
||
.avatar-text {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 日历/日程部分
|
||
.calendar-section {
|
||
background: #fff;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 30rpx 40rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.week-days {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.day-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.day-name {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
.day-date {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
|
||
@media (min-width: 768px) {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.date-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
&.date-today {
|
||
background: rgb(55 140 224);
|
||
|
||
.today-text {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.today {
|
||
.day-name {
|
||
color: rgb(55 140 224);
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.calendar-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.today-course-count {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8rpx;
|
||
|
||
.count-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.count-number {
|
||
font-size: 32rpx;
|
||
color: rgb(55 140 224);
|
||
font-weight: bold;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.calendar-link {
|
||
font-size: 26rpx;
|
||
color: rgb(55 140 224);
|
||
font-weight: 500;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.calendar-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.calendar-arrow {
|
||
font-size: 32rpx;
|
||
transition: transform 0.3s;
|
||
display: inline-block;
|
||
|
||
&.arrow-up {
|
||
transform: rotate(-90deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.calendar-expanded {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out;
|
||
border-top: 0 solid #f0f0f0;
|
||
|
||
&.expanded {
|
||
max-height: 2000rpx;
|
||
margin-top: 30rpx;
|
||
padding-top: 30rpx;
|
||
border-top-width: 1rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-top: 24rpx;
|
||
padding-top: 24rpx;
|
||
}
|
||
}
|
||
|
||
.calendar-wrapper {
|
||
width: 100%;
|
||
|
||
// 覆盖 u-calendar 的弹窗样式，确保内联显示
|
||
:deep(.u-calendar) {
|
||
position: relative !important;
|
||
transform: none !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:deep(.u-popup) {
|
||
position: relative !important;
|
||
display: block !important;
|
||
}
|
||
|
||
:deep(.u-popup__content) {
|
||
position: relative !important;
|
||
transform: none !important;
|
||
}
|
||
}
|
||
|
||
.course-time-list {
|
||
margin-top: 30rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.time-list-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 24rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.time-item {
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 28rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.time-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.time-course-name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
flex: 1;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.time-status {
|
||
font-size: 22rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
font-weight: 500;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 20rpx;
|
||
padding: 6rpx 14rpx;
|
||
}
|
||
|
||
&.status-active {
|
||
background: #e6f7ff;
|
||
color: rgb(55 140 224);
|
||
}
|
||
|
||
&.status-pending {
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
}
|
||
|
||
&.status-ended {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-item-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
font-size: 26rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 24rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.time-label {
|
||
color: #666;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.time-value {
|
||
color: #1a1a1a;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-course-time {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 80rpx 0;
|
||
}
|
||
|
||
.no-time-text {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 150rpx 0;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 200rpx 0;
|
||
}
|
||
|
||
.empty-illustration {
|
||
margin-bottom: 40rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 120rpx;
|
||
opacity: 0.3;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-section {
|
||
background: #fff;
|
||
padding: 20rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 20rpx 40rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.filter-item {
|
||
flex: 0 0 calc((100% - 20rpx) / 2);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 28rpx;
|
||
background: #f5f7fa;
|
||
border-radius: 16rpx;
|
||
transition: background-color 0.2s;
|
||
min-height: 88rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
flex: 0 0 calc((100% - 30rpx) / 2);
|
||
padding: 28rpx 36rpx;
|
||
border-radius: 20rpx;
|
||
min-height: 96rpx;
|
||
}
|
||
|
||
&:active {
|
||
background: #e8eef5;
|
||
}
|
||
|
||
.filter-label {
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
margin-right: 16rpx;
|
||
font-weight: 500;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 32rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.filter-value {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #1a1a1a;
|
||
font-weight: 500;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.filter-icon {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-left: 16rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 26rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.course-list {
|
||
padding: 20rpx 30rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 20rpx 40rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.course-item {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 36rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
||
@media (min-width: 768px) {
|
||
padding: 40rpx;
|
||
margin-bottom: 0;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.course-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 16rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.course-title-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.course-name {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
line-height: 1.4;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
|
||
.course-subject {
|
||
font-size: 24rpx;
|
||
color: rgb(55 140 224);
|
||
background: rgba(55, 140, 224, 0.1);
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
align-self: flex-start;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 22rpx;
|
||
padding: 6rpx 14rpx;
|
||
}
|
||
}
|
||
|
||
.course-status {
|
||
font-size: 22rpx;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-weight: 500;
|
||
margin-left: 16rpx;
|
||
flex-shrink: 0;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 24rpx;
|
||
padding: 8rpx 20rpx;
|
||
}
|
||
|
||
&.status-active {
|
||
background: #e6f7ff;
|
||
color: rgb(55 140 224);
|
||
}
|
||
|
||
&.status-pending {
|
||
background: #fff7e6;
|
||
color: #fa8c16;
|
||
}
|
||
|
||
&.status-ended {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
|
||
&.status-disabled {
|
||
background: #fff1f0;
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.course-desc {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 24rpx;
|
||
line-height: 1.5;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 30rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
.course-progress {
|
||
margin-top: 24rpx;
|
||
padding-top: 24rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
|
||
@media (min-width: 768px) {
|
||
margin-top: 32rpx;
|
||
padding-top: 32rpx;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 10rpx;
|
||
background: #f0f0f0;
|
||
border-radius: 5rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 16rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
height: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
|
||
transition: width 0.3s;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
|
||
@media (min-width: 768px) {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.progress-text {
|
||
color: #1a1a1a;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.progress-time {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|