Skip to content

W
web
提交 bc12b1a3 作者: ZhangLingKun
操作

功能：课程列表

上级 4154b335
流水线 #8062 已失败 于阶段
in 34 秒
正在显示 包含 205 行增加 和 32 行删除
src/components/courseListItem/index.tsx
......@@ -77,6 +77,9 @@ const CourseListItemWrap = styled.div`
margin: 0 0.83rem 0.83rem 0;
cursor: pointer;
overflow: hidden;
&:hover {
filter: brightness(0.9);
}
&:nth-child(5n) {
margin-right: 0;
}
......
src/components/home-comp/home-tab/comp/tabView04.tsx
import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterDataType } from '@/api/interface';
import { GetPageHomeCategoriesType } from '@/api/interface/home';
import { SelectCurriculumClassifyType } from '@/api/interface/course';
import { CourseAPI } from '@/api/modules/course';
import { setGlobalData } from '@/store/module/globalData';
// 列表类型
type ListType = InterDataType<GetPageHomeCategoriesType>;
type ListType = Array<
InterDataType<SelectCurriculumClassifyType>[0] & {
children: InterDataType<SelectCurriculumClassifyType>;
}
>;
const TabView04 = () => {
// 导航钩子
const router = useRouter();
// store
const dispatch = useDispatch();
// 列表数据
const [tabList, setTabList] = useState<
Array<ListType[0] & { categoryList: ListType }>
>([]);
// 获取云享商城分类
const getListBrandInfo = async () => {
const res = await HomeAPI.getPageHomeCategories({
type: 3,
});
const [tabList, setTabList] = useState<ListType>([]);
// 获取执照培训分类
const getCategoryInfo = async () => {
const res = await CourseAPI.selectCurriculumClassify();
if (res && res.code === '200') {
setTabList([
{ id: 1, categoryName: '执照培训', categoryList: res.result },
]);
// console.log('获取云享商城分类 --->', res);
setTabList(
res.result
?.filter((i) => !i.twoCourseId)
?.map((i) => {
const children = res.result?.filter(
(k) => k.oneCourseId === i.oneCourseId && k.twoCourseId,
);
return {
...i,
children,
};
}),
);
}
};
// 跳转一级分类详情
const handleMain = (i: ListType[0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/course/${i?.oneCourseId}`).then();
};
// 跳转二级分类详情
const handleSecond = (i: ListType[0], n: ListType[0]['children'][0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/course/${i?.oneCourseId}/${n?.twoCourseId}`).then();
};
// 组件挂载
useEffect(() => {
getListBrandInfo().then();
getCategoryInfo().then();
}, []);
return (
<TabViewWrap className="animate__animated animate__fast animate__fadeIn">
{tabList.map((i, j) => (
<div key={j}>
<div className="tab-item align-start flex" key={j}>
<div className={'tab-little flex-start'}>
<div className="title-name">{i?.categoryName}</div>
{!!i.classifyUrl && (
<img src={i.classifyUrl} alt={i.name} className="title-image" />
)}
<Button
type={'link'}
className="title-name"
onClick={() => handleMain(i)}
>
{i.name}
</Button>
</div>
<div className="tab-list flex-start">
{i?.categoryList?.map((n, m) => (
<Button type={'link'} key={m} className="list-item">
{n?.categoryName}
{i.children?.map((n, m) => (
<Button
type={'link'}
key={m}
className="list-item"
onClick={() => handleSecond(i, n)}
>
{n.name}
</Button>
))}
</div>
......@@ -52,37 +100,63 @@ const TabView04 = () => {
const TabViewWrap = styled.div`
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0.79rem 1.58rem;
//background: lightyellow;
.tab-little {
.tab-item {
position: relative;
width: 100%;
box-sizing: border-box;
padding-bottom: 0.68rem;
margin-bottom: 0.48rem;
padding-bottom: 0.48rem;
border-bottom: 0.02rem solid #ededed;
margin-bottom: 0.5rem;
&:last-child {
border: none;
}
}
.tab-little {
position: relative;
box-sizing: border-box;
//padding-bottom: 0.68rem;
//border-bottom: 0.02rem solid #ededed;
//margin-bottom: 0.5rem;
.title-image {
width: 1.68rem;
height: 1.68rem;
margin-right: 0.5rem;
}
.title-name {
font-size: 0.75rem;
font-size: 0.78rem;
font-weight: 550;
color: #333333;
padding: 0;
}
}
.tab-list {
position: relative;
width: 100%;
flex-wrap: wrap;
margin-bottom: 1rem;
transform: translateX(-10px);
max-width: calc(100% - 6rem);
transform: translateY(0.86px);
//height: 1.58rem;
//overflow: hidden;
//margin-bottom: 1rem;
//transform: translateX(-10px);
.list-item {
color: #666666;
font-weight: 500;
padding-right: 0;
}
}
@media (prefers-color-scheme: dark) {
.tab-little {
.title-name {
color: #fff;
}
}
.tab-list {
.list-item {
color: #999;
}
}
}
`;
......
src/pages/course/[main]/[second].tsx 0 → 100644
import React from 'react';
import { InterDataType } from '@/api/interface';
import { SelectCurriculumClassifyType } from '@/api/interface/course';
import { CourseAPI } from '@/api/modules/course';
import CourseView from '@/pages/course/_view';
import { wrapper } from '@/store';
// 分类类型
type CategoryListType = Array<
InterDataType<SelectCurriculumClassifyType>[0] & {
children: InterDataType<SelectCurriculumClassifyType> | null;
}
>;
// 每次加载页面都会执行
export const getServerSideProps = wrapper.getServerSideProps(
(_store) => async () => {
// 分类数据
let categoryList: CategoryListType = [];
// 获取分类数据
const getCategoryInfo = async () => {
const res = await CourseAPI.selectCurriculumClassify();
if (res && res.code === '200') {
categoryList = res.result
?.filter((i) => !i.twoCourseId)
?.map((i) => {
const children = res.result?.filter(
(k) => k.oneCourseId === i.oneCourseId && k.twoCourseId,
);
return {
...i,
children: children?.length ? children : null,
};
});
}
};
// 依次获取接口数据
await (async () => {
await Promise.all([getCategoryInfo()]);
})();
return { props: { categoryList } };
},
);
const CourseSecondView: React.FC<{ categoryList: CategoryListType }> = (
props,
) => <CourseView {...props} />;
export default CourseSecondView;
src/pages/course/[main]/index.tsx 0 → 100644
import React from 'react';
import { InterDataType } from '@/api/interface';
import { SelectCurriculumClassifyType } from '@/api/interface/course';
import { CourseAPI } from '@/api/modules/course';
import CourseView from '@/pages/course/_view';
import { wrapper } from '@/store';
// 分类类型
type CategoryListType = Array<
InterDataType<SelectCurriculumClassifyType>[0] & {
children: InterDataType<SelectCurriculumClassifyType> | null;
}
>;
// 每次加载页面都会执行
export const getServerSideProps = wrapper.getServerSideProps(
(_store) => async () => {
// 分类数据
let categoryList: CategoryListType = [];
// 获取分类数据
const getCategoryInfo = async () => {
const res = await CourseAPI.selectCurriculumClassify();
if (res && res.code === '200') {
categoryList = res.result
?.filter((i) => !i.twoCourseId)
?.map((i) => {
const children = res.result?.filter(
(k) => k.oneCourseId === i.oneCourseId && k.twoCourseId,
);
return {
...i,
children: children?.length ? children : null,
};
});
}
};
// 依次获取接口数据
await (async () => {
await Promise.all([getCategoryInfo()]);
})();
return { props: { categoryList } };
},
);
const CourseMainView: React.FC<{ categoryList: CategoryListType }> = (
props,
) => <CourseView {...props} />;
export default CourseMainView;
src/pages/course/_view.tsx
......@@ -43,7 +43,7 @@ const CourseView: React.FC<{ categoryList: CategoryListType }> = (props) => {
// 分页数据
const [pagination, setPagination] = useState({
pageNo: 1,
pageSize: 18,
pageSize: 15,
totalCount: 0,
});
// 列表数据
......@@ -88,9 +88,9 @@ const CourseView: React.FC<{ categoryList: CategoryListType }> = (props) => {
};
// 组件挂载
useEffect(() => {
if (!props) return;
getCategoryList();
// console.log('组件挂载 --->', props);
}, []);
}, [props]);
return (
<LayoutView>
<CourseViewWrap>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论