hookehuyr

refactor(views): 将MyCoursesPage和MyFavoritesPage封装到AppLayout中

为了提高代码的可维护性和一致性,将MyCoursesPage和MyFavoritesPage的页面内容封装到AppLayout组件中。这样可以统一页面的布局结构,减少重复代码。
<!--
* @Date: 2025-03-21 12:17:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-18 17:30:15
* @LastEditTime: 2025-05-12 09:30:50
* @FilePath: /mlaj/src/views/courses/MyCoursesPage.vue
* @Description: 文件描述
-->
<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.good_id" :course="course" :linkTo="`/studyCourse/${course.good_id}`" />
</van-list>
<AppLayout>
<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.good_id" :course="course" :linkTo="`/studyCourse/${course.good_id}`" />
</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 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>
</div>
</AppLayout>
</template>
<script setup>
......@@ -33,6 +35,7 @@ import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CourseCard from '@/components/ui/CourseCard.vue';
import { useTitle } from '@vueuse/core';
import AppLayout from "@/components/layout/AppLayout.vue";
// 导入接口
import { getOrderListAPI } from '@/api/order'
......
<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>
<AppLayout>
<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>
<!-- 无数据提示 -->
<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>
<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 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>
</div>
</AppLayout>
</template>
<script setup>
......@@ -54,6 +56,7 @@ 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 AppLayout from "@/components/layout/AppLayout.vue";
// 导入接口
import { getGroupFavoriteListAPI } from '@/api/favorite';
......