商城页面完善

pages/mall/index.page.tsx

 import React, { useEffect, useState } from "react";
-import { Button, Select, Space, Tag } from "antd";
+import { Button, Pagination, Select, Space, Tag } from "antd";
 import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import Filter, { FilterResult } from "~/components/filter";
-import api, { Goods } from "./api";
+import api, { Goods, ListPageGoodsInfoParams } from "./api";
 
 // 此函数在构建时被调用
 export async function getServerSideProps() {
@@ -20,22 +20,40 @@ export default function Mall(props: Props) {
   const router = useRouter();
   const [productList, setProductList] = useState(Array<Goods>);
   const [filterResult, setFilterResult] = useState<FilterResult>({});
+  const [pageParams, setPageParams] = useState({
+    pageNo: 1,
+    pageSize: 16,
+  });
+  const [count, setCount] = useState(0);
 
   useEffect(() => {
     api
       .listPageGoodsInfo({
-        brandId: 1,
-        pageNo: 1,
-        pageSize: 10,
+        brandId: filterResult.brand?.id,
+        districtId: filterResult.region?.id,
+        modelId: filterResult.model?.id,
+        partsId: filterResult.part?.id,
+        productCategoryId: filterResult.category?.id,
+        qualityId: filterResult.quality?.id,
+        ...pageParams,
       })
       .then((res) => {
         setProductList(res.result?.list || []);
+        setCount(res.result?.totalCount);
       });
-  }, []);
+  }, [filterResult, pageParams]);
 
   const onFilterChange = (filterResult: FilterResult) => {
     console.log("filterResult", filterResult);
+    setFilterResult(filterResult);
   };
+
+  const onPageChange = (page: number, pageSize: number) => {
+    setPageParams({
+      ...pageParams,
+      pageNo: page,
+    })
+  }
   return (
     <Layout>
       <div className="page" style={{ paddingTop: "18px" }}>
@@ -65,10 +83,17 @@ export default function Mall(props: Props) {
                       ></Image>
                     </div>
                     <div className={styles.title}>{item.goodsName}</div>
-                    <div className={styles.sellCount}>半年售12987</div>
+                    <div className={styles.sellCount}>半年售{(Math.floor(Math.random() * 901) + 100).toFixed(0)}</div>
                   </li>
                 );
               })}
+              <Pagination
+                current={pageParams.pageNo}
+                showSizeChanger={false}
+                showQuickJumper
+                total={count}
+                onChange={onPageChange}
+              />
             </ul>
             <div className={styles.adList}>
               <div className={styles.ad}></div>