gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

精品课

Browse Source
This commit is contained in:
haomingming
2025-08-25 14:17:06 +08:00
parent 979c332454
commit 0de0b6732b
22 changed files with 3392 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_course/my_courses/my_courses.vue
+121 -17
View File
@@ -4,7 +4,7 @@
<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-content">
<view class="nav-left" @click="goBack">
<uni-icons type="arrowleft" size="24" color="#FF4757"></uni-icons>
<uni-icons type="left" size="24" color="#FF4757"></uni-icons>
</view>
<view class="nav-title">我的课程</view>
<view class="nav-right" @click="goSearch">
@@ -28,26 +28,38 @@
<!-- 课程列表 -->
<view class="course-list">
<view class="course-item" v-for="(course, index) in currentCourseList" :key="course.id" @click="goCourseDetail(course)">
<view class="course-left">
<image :src="course.image" mode="aspectFill" class="course-image"></image>
</view>
<view class="course-right">
<text class="course-title">{{ course.title }}</text>
<view class="course-meta">
<text class="meta-text">{{ course.lessonCount }}节</text>
<text class="meta-separator">•</text>
<text class="meta-text">{{ course.status }}</text>
<text class="meta-separator">•</text>
<text class="meta-text">已学{{ course.learnedCount }}节</text>
<!-- 有课程数据时显示课程列表 -->
<view v-if="currentCourseList.length > 0">
<view class="course-item" v-for="(course, index) in currentCourseList" :key="course.id" @click="goCourseDetail(course)">
<view class="course-left">
<image :src="course.image" mode="aspectFill" class="course-image"></image>
</view>
<view class="course-tags" v-if="course.tags && course.tags.length > 0">
<view class="tag-item" v-for="tag in course.tags" :key="tag.id">
<text class="tag-text">{{ tag.text }}</text>
<view class="course-right">
<text class="course-title">{{ course.title }}</text>
<view class="course-meta">
<text class="meta-text">{{ course.lessonCount }}节</text>
<text class="meta-separator">•</text>
<text class="meta-text">{{ course.status }}</text>
<text class="meta-separator">•</text>
<text class="meta-text">已学{{ course.learnedCount }}节</text>
</view>
<view class="course-tags" v-if="course.tags && course.tags.length > 0">
<view class="tag-item" v-for="tag in course.tags" :key="tag.id">
<text class="tag-text">{{ tag.text }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 空状态显示 -->
<view v-else class="empty-state">
<view class="empty-icon">
<uni-icons type="book" size="80" color="#E0E0E0"></uni-icons>
</view>
<text class="empty-title">{{ getEmptyTitle() }}</text>
<text class="empty-desc">{{ getEmptyDesc() }}</text>
</view>
</view>
<!-- 订单记录浮动按钮 -->
@@ -77,6 +89,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import course_api from "@/api/course_api.js"
// 响应式数据
const statusBarHeight = ref(0)
@@ -170,12 +183,14 @@ const getSystemInfo = () => {
const switchTab = (tab) => {
activeTab.value = tab
console.log('切换到标签:', tab)
// 切换标签页后重新获取对应的课程数据
getMyCourses()
}
const goCourseDetail = (course) => {
console.log('进入课程详情:', course.title)
uni.navigateTo({
url: '/pages_course/course_detail/course_detail'
url: '/pages_course/course_detail/course_detail?id=' + course.id
})
}
@@ -208,9 +223,73 @@ const goMyCourses = () => {
console.log('当前已在我的课程页面')
}
// 获取空状态标题
const getEmptyTitle = () => {
if (activeTab.value === 'learning') {
return '暂无学习中的课程'
} else if (activeTab.value === 'completed') {
return '暂无已完成的课程'
}
return '暂无课程'
}
// 获取空状态描述
const getEmptyDesc = () => {
if (activeTab.value === 'learning') {
return '快去购买课程开始学习吧'
} else if (activeTab.value === 'completed') {
return '继续学习，完成更多课程'
}
return '快去探索更多课程吧'
}
const getMyCourses = () => {
// 根据activeTab确定state参数
let state = 1 // 默认学习中
if (activeTab.value === 'completed') {
state = 2 // 已学完
}
course_api.listMyExcellencourse(state, 1).then(res => {
console.log('API返回数据:', res)
if (res.code === 200 && res.data && res.data.list) {
// 将API数据转换为课程列表格式
const apiCourseList = res.data.list.map(item => ({
id: item.excellencourse_id,
title: item.excellencourse_title,
lessonCount: item.excellencourse_video_num,
status: item.excellencourse_upload_num === item.excellencourse_video_num ? '已完结' : '更新中',
learnedCount: item.study_num,
image: item.excellencourse_index_img || '/static/icon_home_my_patient.png',
tags: item.special_type_name ? [{ id: Date.now(), text: item.special_type_name }] : []
}))
// 根据当前标签页更新对应的课程列表
if (activeTab.value === 'learning') {
courseList.value.learning = apiCourseList
} else if (activeTab.value === 'completed') {
courseList.value.completed = apiCourseList
}
} else {
console.error('获取课程列表失败:', res.msg)
uni.showToast({
title: res.msg || '获取课程列表失败',
icon: 'none'
})
}
}).catch(err => {
console.error('API调用失败:', err)
uni.showToast({
title: '获取课程列表失败',
icon: 'none'
})
})
}
// 生命周期
onMounted(() => {
getSystemInfo()
getMyCourses()
})
</script>
@@ -369,6 +448,31 @@ onMounted(() => {
}
}
// 空状态样式
.empty-state {
padding: 120rpx 0;
text-align: center;
.empty-icon {
margin-bottom: 32rpx;
}
.empty-title {
display: block;
font-size: 32rpx;
color: #999;
font-weight: 500;
margin-bottom: 16rpx;
}
.empty-desc {
display: block;
font-size: 26rpx;
color: #ccc;
line-height: 1.4;
}
}
// 订单记录浮动按钮
.floating-order {
position: fixed;