hookehuyr

feat(profile): 新增我的收藏页面并集成Vant组件

添加我的收藏页面,支持展示收藏的课程和活动。使用Vant的Tab和Tabs组件实现分类切换,并通过VanList实现分页加载功能。
......@@ -23,5 +23,7 @@ declare module 'vue' {
SummerCampCard: typeof import('./components/ui/SummerCampCard.vue')['default']
VanList: typeof import('vant/es')['List']
VanRate: typeof import('vant/es')['Rate']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
}
}
......
......@@ -96,6 +96,12 @@ const routes = [
component: () => import('../views/courses/MyCoursesPage.vue'),
meta: { title: '我的课程' }
},
{
path: '/profile/favorites',
name: 'MyFavorites',
component: () => import('../views/profile/MyFavoritesPage.vue'),
meta: { title: '我的收藏' }
},
]
const router = createRouter({
......
<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>