功能：新闻列表

src/pages/news/comp/_newsListItem.tsx

+import React from 'react';
+import styled from 'styled-components';
+import { InterListType } from '@/api/interface';
+import { ListNewsType } from '@/api/interface/home';
+
+// 详情类型
+type DetailType = InterListType<ListNewsType>[0];
+
+const NewsListItem: React.FC<{ detail: DetailType }> = ({ detail }) => {
+  return (
+    <NewsListWrap>
+      <img
+        className="item-image"
+        src={detail?.surfaceImg}
+        alt={detail?.newsTitle}
+      />
+      <div className="item-content">
+        <div className="title">{detail?.newsTitle}</div>
+        <div className="desc two-line-ellipsis">
+          {detail?.newsContents?.match(/(?<=>)[^<>]+(?=<)/g)}
+        </div>
+        <div className="tips flex">
+          <div className="text text-ellipsis" title={detail?.newsAuthor}>
+            作者：{detail?.newsAuthor}
+          </div>
+          <div className="text text-ellipsis" title={detail?.origin}>
+            来源：{detail?.origin}
+          </div>
+        </div>
+      </div>
+    </NewsListWrap>
+  );
+};
+
+export default NewsListItem;
+// 样式
+const NewsListWrap = styled.div`
+  position: relative;
+  width: 86%;
+  //width: 100%;
+  box-sizing: border-box;
+  margin: 0 auto 0.83rem;
+  min-height: 9.17rem;
+  background: #ffffff;
+  box-shadow: 0 0.17rem 1rem 0 rgba(102, 120, 192, 0.11);
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 0.83rem;
+  cursor: pointer;
+  .item-image {
+    width: 13.33rem;
+    height: 7.5rem;
+    border-radius: 0.25rem;
+    object-fit: cover;
+    margin-right: 1.67rem;
+  }
+  .item-content {
+    position: relative;
+    width: calc(100% - 15rem);
+    min-height: 7.5rem;
+    box-sizing: border-box;
+    .title {
+      font-weight: bold;
+      font-size: 16px;
+      margin-bottom: 0.5rem;
+      &:hover {
+        color: #ff552d;
+      }
+    }
+    .desc {
+      color: #666;
+      margin-bottom: 0.83rem;
+    }
+    .tips {
+      .text {
+        width: 6.8rem;
+      }
+      .text:not(:last-child) {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+`;

src/pages/news/comp/_newsSwiper.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FieldTimeOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Carousel } from 'antd';
 import styled from 'styled-components';
+import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { ListNewsType } from '@/api/interface/home';
 
 // 新闻列表类型
 type ListType = InterListType<ListNewsType>;
 
-const NewsSwiperView: React.FC<{ list: ListType }> = ({ list }) => {
+const NewsSwiperView = () => {
+  // 新闻列表
+  const [newsList, setNewsList] = useState<ListType>([]);
+  // 热点资讯列表
+  const getListNews = async () => {
+    const res = await HomeAPI.getListNews({
+      pageNo: 1,
+      pageSize: 10,
+      isHot: 1,
+    });
+    if (res && res.code === '200') {
+      setNewsList(res.result.list || []);
+    }
+  };
+  // 组件挂载
+  useEffect(() => {
+    getListNews().then();
+  }, []);
   return (
     <NewsSwiperWrap>
       <Carousel autoplay={true}>
-        {list
-          ?.filter((i) => i.isHot)
-          ?.map((i, j) => (
-            <div className="swiper-view" key={j}>
-              <div className="swiper-item">
-                <img
-                  className="item-image"
-                  src={i?.surfaceImg}
-                  alt={i.newsTitle}
-                />
-                <div className="item-content">
-                  <div className="content-head">
-                    <div className="top">
-                      <VerticalAlignTopOutlined />
-                      <span className="text">置顶</span>
-                    </div>
-                    <div className="time">
-                      <FieldTimeOutlined />
-                      <span className="text">{i?.createTime}</span>
-                    </div>
+        {newsList?.map((i, j) => (
+          <div className="swiper-view" key={j}>
+            <div className="swiper-item">
+              <img
+                className="item-image"
+                src={i?.surfaceImg}
+                alt={i.newsTitle}
+              />
+              <div className="item-content">
+                <div className="content-head">
+                  <div className="top">
+                    <VerticalAlignTopOutlined />
+                    <span className="text">置顶</span>
                   </div>
-                  <div className="content-title">{i?.newsTitle}</div>
-                  <div className="content-desc two-line-ellipsis">
-                    {i?.newsContents?.match(/(?<=>)[^<>]+(?=<)/g)}
+                  <div className="time">
+                    <FieldTimeOutlined />
+                    <span className="text">{i?.createTime}</span>
                   </div>
                 </div>
+                <div className="content-title">{i?.newsTitle}</div>
+                <div className="content-desc two-line-ellipsis">
+                  {i?.newsContents?.match(/(?<=>)[^<>]+(?=<)/g)}
+                </div>
               </div>
             </div>
-          ))}
+          </div>
+        ))}
       </Carousel>
     </NewsSwiperWrap>
   );
@@ -51,6 +67,7 @@ export default NewsSwiperView;
 const NewsSwiperWrap = styled.div`
   position: relative;
   width: 86%;
+  //width: 100%;
   box-sizing: border-box;
   margin: 0 auto;
   .swiper-view {

src/pages/news/index.tsx

 import React, { useEffect, useState } from 'react';
+import { Empty, Tabs, TabsProps } from 'antd';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { ListNewsType } from '@/api/interface/home';
 import BreadcrumbView from '@/components/breadcrumb';
 import LayoutView from '@/components/layout';
+import ProductListView from '@/components/productList';
+import NewsListItem from '@/pages/news/comp/_newsListItem';
 import NewsSwiperView from '@/pages/news/comp/_newsSwiper';
 
 // 新闻列表类型
 type NewsListType = InterListType<ListNewsType>;
+// tab列表
+const items: TabsProps['items'] = [
+  {
+    key: '1',
+    label: '热点新闻',
+  },
+  {
+    key: '2',
+    label: '招标快讯',
+  },
+];
 
 const NewsListView = () => {
+  // tab栏切换
+  const [tabIndex, setTabIndex] = useState('1');
   // 新闻列表
   const [newsList, setNewsList] = useState<NewsListType>([]);
   // 分页数据
   const [pagination, setPagination] = useState({
     pageNo: 1,
-    pageSize: 18,
+    pageSize: 5,
+    totalPage: 0,
     totalCount: 0,
   });
   // 热点资讯列表
-  const getListNews = async () => {
+  const getListNews = async (data?: { pageNo?: number; pageSize?: number }) => {
     const res = await HomeAPI.getListNews({
       pageNo: pagination.pageNo,
       pageSize: pagination.pageSize,
+      ...data,
     });
     if (res && res.code === '200') {
-      const { list, pageNo, pageSize, totalCount } = res.result;
+      const { list, pageNo, pageSize, totalPage, totalCount } = res.result;
       setPagination({
         pageNo,
         pageSize,
+        totalPage,
         totalCount,
       });
-      setNewsList(list);
+      // setNewsList((prevList) => [...prevList, ...(list || [])]);
+      pagination.pageNo = pageNo;
+      pagination.totalPage = totalPage;
+      setNewsList(list || []);
     }
   };
+  // tab栏切换监听
+  const handleTabChange: TabsProps['onChange'] = async (e) => {
+    setTabIndex(e);
+    pagination.pageNo = 1;
+    setNewsList([]);
+    if (e === '1') {
+      await getListNews({ pageNo: 1 });
+    }
+  };
+  // 添加 handleReachBottom 函数
+  const handlePageChange = async (pageNo: number, pageSize: number) => {
+    await getListNews({ pageNo, pageSize });
+  };
   // 组件挂载
   useEffect(() => {
     getListNews().then();
@@ -45,7 +80,28 @@ const NewsListView = () => {
         {/* 面包屑 */}
         <BreadcrumbView />
         {/* 轮播图 */}
-        <NewsSwiperView list={newsList} />
+        <NewsSwiperView />
+        {/* 文章类型 */}
+        <div className="news-tab">
+          <Tabs
+            defaultActiveKey={tabIndex}
+            items={items}
+            size={'large'}
+            onChange={handleTabChange}
+          />
+        </div>
+        {/* 文章列表 */}
+        <div className="news-list">
+          <ProductListView pagination={pagination} onChange={handlePageChange}>
+            {newsList?.length ? (
+              newsList?.map((i, j) => <NewsListItem key={j} detail={i} />)
+            ) : (
+              <div className="list-empty flex-center">
+                <Empty />
+              </div>
+            )}
+          </ProductListView>
+        </div>
       </NewsListWrap>
     </LayoutView>
   );
@@ -59,4 +115,12 @@ const NewsListWrap = styled.div`
   box-sizing: border-box;
   padding: 2rem 0 0 0;
   margin: 0 auto;
+  .news-tab {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: translateY(-0.5rem);
+  }
 `;