hookehuyr

feat(课程): 添加课程组合列表接口并优化课程列表页面

添加获取课程组合列表的API接口
将课程列表页面从分页加载改为一次性加载
根据接口返回数据动态设置显示模式
/*
* @Date: 2025-04-15 09:32:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-16 11:34:00
* @LastEditTime: 2025-10-21 16:37:51
* @FilePath: /mlaj/src/api/course.js
* @Description: 课程模块相关接口
*/
......@@ -11,6 +11,7 @@ const Api = {
GET_COURSE_LIST: '/srv/?a=schedule&t=list',
GET_COURSE_DETAIL: '/srv/?a=schedule&t=detail',
GET_SCHEDULE_COURSE: '/srv/?a=schedule&t=course',
GET_SCHEDULE_COMBINATION_LIST: '/srv/?a=schedule&t=combination_list',
GET_GROUP_COMMENT_LIST: '/srv/?a=group_comment_list',
GROUP_COMMENT_ADD: '/srv/?a=group_comment_add',
GROUP_COMMENT_EDIT: '/srv/?a=group_comment_edit',
......@@ -45,6 +46,13 @@ export const getCourseDetailAPI = (params) => fn(fetch.get(Api.GET_COURSE_DETAIL
export const getScheduleCourseAPI = (params) => fn(fetch.get(Api.GET_SCHEDULE_COURSE, params))
/**
* @description: 获取课程组合列表
* @param: id 课程 ID
* @return: data: [{ id, title, price, original_price, feature, highlights, count, cover}]
*/
export const getScheduleCombinationListAPI = (params) => fn(fetch.get(Api.GET_SCHEDULE_COMBINATION_LIST, params))
/**
* @description: 获取课程评论列表
* @param: i 课程 ID
* @param: schedule_id 章节ID,非必须,在课程章节内查询时需要
......
<!--
* @Date: 2025-03-21 14:31:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-05-21 16:57:36
* @LastEditTime: 2025-10-21 17:12:13
* @FilePath: /mlaj/src/views/courses/CourseListQRPage.vue
* @Description: 课程列表页面 - 支持列表和卡片两种显示模式
-->
......@@ -10,13 +10,10 @@
<div class="pb-16">
<!-- Course List -->
<div class="px-4">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多课程了"
@load="onLoad"
class="space-y-4"
>
<div v-if="loading" class="flex justify-center py-8">
<van-loading size="24px">加载中...</van-loading>
</div>
<div v-else class="space-y-4">
<!-- 根据type参数显示不同组件 -->
<template v-if="displayType === 'card'">
<CourseImageCard v-for="course in courses" :key="course.id" :course="course" />
......@@ -24,7 +21,7 @@
<template v-else>
<CourseCard v-for="course in courses" :key="course.id" :course="course" />
</template>
</van-list>
</div>
</div>
</div>
</AppLayout>
......@@ -37,45 +34,45 @@ import AppLayout from '@/components/layout/AppLayout.vue';
import CourseCard from '@/components/ui/CourseCard.vue';
import CourseImageCard from '@/components/ui/CourseImageCard.vue';
// 导入接口
import { getCourseListAPI } from "@/api/course";
import { List } from 'vant';
import { getScheduleCombinationListAPI } from "@/api/course";
const $route = useRoute();
const courses = ref([]);
const loading = ref(false);
const finished = ref(false);
const limit = ref(5);
const page = ref(0);
// 根据URL参数确定显示类型
const displayType = computed(() => {
return $route.query.type || 'list'; // 默认为list模式
});
// 显示类型,默认列表模式
const displayType = ref('list');
// 获取URL参数中的ID
const courseId = computed(() => {
return $route.query.id || '';
});
// Load more courses
const onLoad = async () => {
const nextPage = page.value;
const params = {
limit: limit.value,
page: nextPage
};
// 加载课程数据
const loadCourses = async () => {
loading.value = true;
const params = {};
// 如果有ID参数,添加到请求中
if (courseId.value) {
params.id = courseId.value;
}
const res = await getCourseListAPI(params);
if (res.code) {
courses.value = [...courses.value, ...res.data];
finished.value = res.data.length < limit.value;
page.value = nextPage + 1;
try {
const res = await getScheduleCombinationListAPI(params);
if (res.code) {
courses.value = res.data.group_list;
displayType.value = res.data.display_mode;
}
} catch (error) {
console.error('加载课程失败:', error);
} finally {
loading.value = false;
}
loading.value = false;
};
// 页面挂载时加载数据
onMounted(() => {
loadCourses();
});
</script>
......