hookehuyr

feat(router): 添加我的课程页面路由和组件

在路由配置中添加了 `/profile/courses` 路径,并创建了 `MyCoursesPage.vue` 组件,用于展示用户的课程列表。该组件使用了 `van-list` 实现分页加载功能,并提供了无数据时的提示界面。
......@@ -90,6 +90,12 @@ const routes = [
props: true,
meta: { title: '结账' }
},
{
path: '/profile/courses',
name: 'MyCourses',
component: () => import('../views/courses/MyCoursesPage.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">
<!-- 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.id" :course="course" />
</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>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CourseCard from '@/components/ui/CourseCard.vue';
import { courses as mockCourses } from '@/utils/mockData';
import { useTitle } from '@vueuse/core';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const courses = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 10
const onLoad = () => {
loading.value = true
// 模拟异步加载数据
setTimeout(() => {
const start = (page.value - 1) * pageSize
const end = start + pageSize
const newCourses = mockCourses.slice(start, end)
courses.value.push(...newCourses)
loading.value = false
if (courses.value.length >= mockCourses.length) {
finished.value = true
}
page.value++
}, 1000)
}
</script>