MyFavoritesPage.vue
4.24 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
<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" 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';
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(1);
const coursePageSize = 10;
// 活动列表加载状态
const activitiesLoading = ref(false);
const activitiesFinished = ref(false);
const activitiesPage = ref(1);
const activitiesPageSize = 10;
// 加载收藏课程
const onCoursesLoad = () => {
coursesLoading.value = true;
// 模拟异步加载
setTimeout(() => {
const start = (coursePage.value - 1) * coursePageSize;
const end = start + coursePageSize;
const newCourses = mockCourses.slice(start, end);
favoriteCourses.value.push(...newCourses);
coursesLoading.value = false;
if (newCourses.length < coursePageSize) {
coursesFinished.value = true;
} else {
coursePage.value += 1;
}
}, 1000);
};
// 加载收藏活动
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);
};
</script>