hookehuyr

refactor(courses): 移除未使用的搜索和模糊处理函数,优化搜索逻辑

移除CoursesPage.vue中未使用的handleSearch和handleBlur函数,简化代码结构。在CourseListPage.vue中引入防抖函数优化搜索性能,并统一处理搜索操作,提升代码可维护性。
<!--
* @Date: 2025-03-21 14:31:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-15 14:24:16
* @LastEditTime: 2025-05-21 16:57:36
* @FilePath: /mlaj/src/views/courses/CourseListPage.vue
* @Description: 文件描述
-->
......@@ -39,6 +39,7 @@ import { courses as mockCourses } from '@/utils/mockData';
// 导入接口
import { getCourseListAPI } from "@/api/course";
import { List } from 'vant';
import { useDebounceFn } from '@vueuse/core';
const $route = useRoute();
const courses = ref([]);
......@@ -48,35 +49,35 @@ const limit = ref(5);
const page = ref(0);
const keyword = ref('');
// 搜索课程列表
const searchCourses = async () => {
const res = await getCourseListAPI({ limit: limit.value, page: 0, keyword: keyword.value });
// 防抖处理的搜索课程列表
const debouncedSearch = useDebounceFn(async (searchKeyword) => {
const res = await getCourseListAPI({ limit: limit.value, page: 0, keyword: searchKeyword });
if (res.code) {
courses.value = res.data;
finished.value = res.data.length < limit.value;
page.value = 1;
}
}, 300);
// 统一处理搜索操作
const handleSearch = (newKeyword) => {
if (keyword.value !== newKeyword) {
keyword.value = newKeyword;
debouncedSearch(newKeyword);
}
};
// 监听路由参数变化
// watchEffect(() => {
// const queryKeyword = $route.query.keyword;
// if (keyword.value !== queryKeyword) {
// keyword.value = queryKeyword || '';
// searchCourses();
// }
// });
// Search handler
// const handleSearch = (query) => {
// keyword.value = query;
// searchCourses();
// };
watchEffect(() => {
const queryKeyword = $route.query.keyword;
if (queryKeyword !== undefined) {
handleSearch(queryKeyword || '');
}
});
// Blur handler
const handleBlur = (query) => {
keyword.value = query;
searchCourses();
handleSearch(query);
};
// Load more courses
......
......@@ -3,7 +3,7 @@
<div class="pb-16">
<!-- Search Bar -->
<div class="pb-2">
<SearchBar placeholder="搜索" @search="handleSearch" @blur="handleBlur" :isCoursePage="true" />
<SearchBar placeholder="搜索" :isCoursePage="true" />
</div>
<!-- Featured Course Banner -->
......@@ -107,17 +107,6 @@ const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
// Search handler
const handleSearch = (query) => {
console.log("Searching for:", query);
// Would implement actual search logic here
};
// Blur handler
const handleBlur = (query) => {
// 实际项目中这里会调用搜索API
console.log('Searching for:', query);
};
// Current time for the countdown timer
const todayDate = new Date();
const formattedTime = featuredCourse.liveTime.split(":");
......