功能：课程列表

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

+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

+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>