hookehuyr

feat(router): 添加我的活动页面并清理重复路由

清理了重复的课程评价路由,并添加了新的“我的活动”页面路由,以支持用户查看个人活动记录
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-21 11:33:55
* @LastEditTime: 2025-03-21 12:08:30
* @FilePath: /mlaj/src/router/index.js
* @Description: 文件描述
*/
......@@ -15,24 +15,12 @@ const routes = [
meta: { title: '首页' },
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/courses',
name: 'Courses',
component: () => import('../views/courses/CoursesPage.vue'),
meta: { title: '课程列表' },
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/courses/:id',
name: 'CourseDetail',
component: () => import('../views/courses/CourseDetailPage.vue'),
......@@ -51,60 +39,30 @@ const routes = [
meta: { title: '个人中心' },
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/login',
name: 'Login',
component: () => import('../views/auth/LoginPage.vue'),
meta: { title: '登录' }
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/register',
name: 'Register',
component: () => import('../views/auth/RegisterPage.vue'),
meta: { title: '注册' }
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/forgotPwd',
name: 'ForgotPassword',
component: () => import('../views/auth/ForgotPasswordPage.vue'),
meta: { title: '忘记密码' }
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/activities',
name: 'Activities',
component: () => import('../views/activities/ActivitiesPage.vue'),
meta: { title: '活动列表' }
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/activities/:id',
name: 'ActivityDetail',
component: () => import('../views/activities/ActivityDetailPage.vue'),
......@@ -112,12 +70,6 @@ const routes = [
meta: { title: '活动详情' }
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
},
{
path: '/activities/:id/signup',
name: 'ActivitySignup',
component: () => import('../views/activities/ActivitySignupPage.vue'),
......@@ -126,10 +78,10 @@ const routes = [
}
},
{
path: '/courses/:id/reviews',
name: 'CourseReviews',
component: () => import('../views/courses/CourseReviewsPage.vue'),
meta: { title: '课程评价' }
path: '/profile/activities',
name: 'MyActivities',
component: () => import('../views/activities/MyActivitiesPage.vue'),
meta: { title: '我的活动' }
},
{
path: '/checkout',
......
<!--
* @Date: 2025-03-21 11:47:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-21 11:47:48
* @FilePath: /mlaj/src/views/activities/MyActivitiesPage.vue
* @Description: 文件描述
-->
<template>
<div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
<!-- 活动列表 -->
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
class="px-4 py-3 space-y-4"
>
<ActivityCard
v-for="activity in activities"
:key="activity.id"
:activity="activity"
/>
</van-list>
<!-- 无数据提示 -->
<div v-if="!loading && activities.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 ActivityCard from '@/components/ui/ActivityCard.vue'
import { activities as mockActivities } from '@/utils/mockData'
import { useTitle } from '@vueuse/core';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const router = useRouter()
const activities = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 10
// 加载活动数据
const onLoad = async () => {
try {
loading.value = true
// 模拟异步加载数据
await new Promise(resolve => setTimeout(resolve, 1000))
const start = (page.value - 1) * pageSize
const end = start + pageSize
const newActivities = mockActivities.slice(start, end)
activities.value.push(...newActivities)
if (newActivities.length < pageSize) {
finished.value = true
} else {
page.value += 1
}
} catch (error) {
console.error('加载活动数据失败:', error)
} finally {
loading.value = false
}
}
</script>