MyFavoritesPage.vue
4.44 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
<div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
<!-- 分类切换 -->
<div class="px-4 py-3">
<van-tabs v-model:active="activeTab" @click-tab="onClickTab" sticky swipeable title-active-color="#4caf50" color="#4caf50">
<van-tab title="课程" name="courses">
<van-list
v-model:loading="coursesLoading"
:finished="coursesFinished"
finished-text="没有更多了"
@load="onCoursesLoad"
class="space-y-4 mt-4"
>
<CourseCard v-for="course in favoriteCourses" :key="course.id" :course="course" />
</van-list>
<!-- 无数据提示 -->
<div v-if="!coursesLoading && favoriteCourses.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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<p class="mt-4 text-gray-500">暂无收藏课程</p>
</div>
</van-tab>
<van-tab title="活动" name="activities">
<!--<van-list
v-model:loading="activitiesLoading"
:finished="activitiesFinished"
finished-text="没有更多了"
@load="onActivitiesLoad"
class="space-y-4 mt-4"
>
<ActivityCard v-for="activity in favoriteActivities" :key="activity.id" :activity="activity" />
</van-list>
<!~~ 无数据提示 ~~>
<div v-if="!activitiesLoading && favoriteActivities.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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<p class="mt-4 text-gray-500">暂无收藏活动</p>
</div>-->
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CourseCard from '@/components/ui/CourseCard.vue';
import ActivityCard from '@/components/ui/ActivityCard.vue';
import { courses as mockCourses, activities as mockActivities } from '@/utils/mockData';
import { useTitle } from '@vueuse/core';
// 导入接口
import { getGroupFavoriteListAPI } from '@/api/favorite';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
// 页面状态
const activeTab = ref('courses');
const favoriteCourses = ref([]);
const favoriteActivities = ref([]);
// 课程列表加载状态
const coursesLoading = ref(false);
const coursesFinished = ref(false);
const coursePage = ref(0);
const courseLimit = ref(5);
// 活动列表加载状态
const activitiesLoading = ref(false);
const activitiesFinished = ref(false);
const activitiesPage = ref(1);
const activitiesPageSize = 10;
// 加载收藏课程
const onCoursesLoad = async () => {
const nextPage = coursePage.value;
const res = await getGroupFavoriteListAPI({ limit: courseLimit.value, page: nextPage });
if (res.code) {
favoriteCourses.value = [...favoriteCourses.value, ...res.data];
coursesFinished.value = res.data.length < courseLimit.value;
coursePage.value = nextPage + 1;
}
coursesLoading.value = false;
};
// 加载收藏活动
// const onActivitiesLoad = () => {
// activitiesLoading.value = true;
// // 模拟异步加载
// setTimeout(() => {
// const start = (activitiesPage.value - 1) * activitiesPageSize;
// const end = start + activitiesPageSize;
// const newActivities = mockActivities.slice(start, end);
// favoriteActivities.value.push(...newActivities);
// activitiesLoading.value = false;
// if (newActivities.length < activitiesPageSize) {
// activitiesFinished.value = true;
// } else {
// activitiesPage.value += 1;
// }
// }, 1000);
// };
// 切换标签页
const onClickTab = ({ name, title }) => {
if (name === 'activities') {
location.href = 'http://www.baidu.com'
}
};
</script>