This commit is contained in:
parent
4fda0ecdef
commit
9db19fa02a
|
|
@ -39,28 +39,27 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
|||
}, [data]);
|
||||
return { categories, isLoading }
|
||||
}
|
||||
// 修改useGetName中的查询条件
|
||||
|
||||
// 不同分类跳转
|
||||
function useFetchCoursesByCategory(category: string) {
|
||||
const isAll = category === '全部';
|
||||
const { data, isLoading}:{data:CourseDto[],isLoading:boolean} = api.post.findMany.useQuery({
|
||||
where: isAll?{}:{
|
||||
const { data, isLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
|
||||
where: isAll ? {} : {
|
||||
terms: {
|
||||
some: {
|
||||
name:category
|
||||
name: category
|
||||
},
|
||||
},
|
||||
},
|
||||
take: 8,
|
||||
include:{
|
||||
terms:true
|
||||
include: {
|
||||
terms: true
|
||||
}
|
||||
});
|
||||
|
||||
return { data, isLoading};
|
||||
return { data, isLoading };
|
||||
}
|
||||
|
||||
// 不同分类跳转
|
||||
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
|
|
@ -80,7 +79,7 @@ interface CoursesSectionProps {
|
|||
title: string;
|
||||
description: string;
|
||||
courses: Course[];
|
||||
isLoading:boolean
|
||||
isLoading: boolean
|
||||
initialVisibleCoursesCount?: number;
|
||||
}
|
||||
|
||||
|
|
@ -98,38 +97,15 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
})
|
||||
const { data ,isLoading : isDataLoading} = useFetchCoursesByCategory(selectedCategory);
|
||||
useEffect(()=>{
|
||||
const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
|
||||
useEffect(() => {
|
||||
console.log('data:', data)
|
||||
})
|
||||
// const { data } = api.post.findMany.useQuery({
|
||||
// where: {}, // 必选参数
|
||||
// include: { // 关联查询
|
||||
// instructors: true
|
||||
// },
|
||||
// orderBy: { // 排序规则
|
||||
// createdAt: 'desc'
|
||||
// },
|
||||
// take: 8
|
||||
// })
|
||||
// useEffect(() => {
|
||||
// // 添加空值保护
|
||||
// if (data && data.length > 0) {
|
||||
// console.log('有效数据:', data)
|
||||
// // 执行后续操作
|
||||
// } else {
|
||||
// console.log('无数据或加载中')
|
||||
// }
|
||||
// }, [data])
|
||||
// const formatted = data?.map(course => ({
|
||||
// id: course.id,
|
||||
// title: course.title
|
||||
// }));
|
||||
const handleClick = (course: CourseDto) => {
|
||||
navigate(`/course/${course.id}/detail`);
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
console.log('data:', data)
|
||||
})
|
||||
const filteredCourses = useMemo(() => {
|
||||
|
|
@ -168,29 +144,24 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>全部</Tag>
|
||||
{gateGory.categories.length === 0 && (
|
||||
<Empty
|
||||
description="暂无课程分类"
|
||||
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
||||
/>
|
||||
)}:{
|
||||
gateGory.categories.map((category) => (
|
||||
<Tag
|
||||
key={category}
|
||||
color={selectedCategory === category ? 'blue' : 'default'}
|
||||
onClick={() => {
|
||||
setSelectedCategory(category)
|
||||
console.log(category)
|
||||
}}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
{gateGory.categories.map((category) => (
|
||||
<Tag
|
||||
key={category}
|
||||
color={selectedCategory === category ? 'blue' : 'default'}
|
||||
onClick={() => {
|
||||
setSelectedCategory(category)
|
||||
console.log(category)
|
||||
}}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
|
||||
>
|
||||
{category}
|
||||
</Tag>
|
||||
))
|
||||
>
|
||||
{category}
|
||||
</Tag>
|
||||
|
||||
))
|
||||
}
|
||||
|
||||
</>
|
||||
|
|
@ -199,7 +170,11 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{displayedCourses?.map((course) => (
|
||||
{displayedCourses.length=== 0 ? (
|
||||
<div className="col-span-full">
|
||||
<Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
|
||||
</div>
|
||||
) : displayedCourses?.map((course) => (
|
||||
<Card
|
||||
onClick={() => handleClick(course)}
|
||||
key={course.id}
|
||||
|
|
@ -249,7 +224,6 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="ml-2 flex items-center flex-grow">
|
||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300">
|
||||
{/* {course.} */}
|
||||
</Text>
|
||||
</div>
|
||||
<span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
|
||||
|
|
@ -287,7 +261,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue