MyCoursesPage.vue
2.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!--
* @Date: 2025-03-21 12:17:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-12 16:38:14
* @FilePath: /mlaj/src/views/courses/MyCoursesPage.vue
* @Description: 文件描述
-->
<template>
<AppLayout>
<div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
<!-- Course List -->
<van-list
v-model:loading="loading"
:finished="finished"
finished-text=""
@load="onLoad"
class="px-4 py-3 space-y-4"
>
<CourseCard v-for="course in courses" :key="course.good_id" :course="course" :linkTo="`/studyCourse/${course.good_id}`" />
</van-list>
<!-- 无数据提示 -->
<div v-if="!loading && courses.length === 0" class="flex flex-col items-center justify-center py-12">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<p class="mt-4 text-gray-500">暂无课程记录</p>
</div>
</div>
</AppLayout>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CourseCard from '@/components/ui/CourseCard.vue';
import { useTitle } from '@vueuse/core';
import AppLayout from "@/components/layout/AppLayout.vue";
// 导入接口
import { getOrderListAPI } from '@/api/order'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const courses = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(0)
const limit = ref(10)
const onLoad = async () => {
const nextPage = page.value
try {
const res = await getOrderListAPI({
limit: limit.value,
page: nextPage,
status: 'PAY', // 只获取已支付的订单
approval_status: 'ENABLE' // 只获取已审核的订单
})
if (res.code) {
// 从订单中提取所有课程信息
const newCourses = res.data.reduce((acc, order) => {
if (order.details && Array.isArray(order.details)) {
const coursesWithTitle = order.details.map(detail => ({
...detail,
title: detail.product_name
}))
acc.push(...coursesWithTitle)
}
return acc
}, [])
courses.value = [...courses.value, ...newCourses]
finished.value = newCourses.length < limit.value
page.value = nextPage + 1
}
} catch (error) {
console.error('获取课程列表失败:', error)
}
loading.value = false
}
</script>