商城页增加空数据展示优化

pages/mall/api/index.ts

@@ -35,7 +35,7 @@ export interface ListPageGoodsInfoResp {
 
 export default {
   //web-商品信息-分页
-  listPageGoodsInfo: (params: ListPageGoodsInfoParams): Promise<Response<ListPageGoodsInfoResp>> => {
-    return request('/pms/webProductMall/listPageGoodsInfo', 'post', params)
+  listPageGoodsInfo: (params: ListPageGoodsInfoParams, options = {}): Promise<Response<ListPageGoodsInfoResp>> => {
+    return request('/pms/webProductMall/listPageGoodsInfo', 'post', params, options)
   }
 }
\ No newline at end of file

pages/mall/index.module.scss

@@ -24,11 +24,15 @@
     }
   }
 
+  .listContent{
+    width: 100%;
+  }
+
   .listWrap {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
-    height: fit-content;
+    height: 856px;
 
     .item {
       cursor: pointer;

pages/mall/index.page.tsx

 import React, { useEffect, useState } from "react";
-import { Button, Pagination, Select, Space, Tag } from "antd";
+import { Button, Empty, Pagination, Select, Space, Tag } from "antd";
 import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import { useRouter } from "next/router";
@@ -25,23 +25,35 @@ export default function Mall(props: Props) {
     pageSize: 16,
   });
   const [count, setCount] = useState(0);
+  const [abort, setAbort] = useState<AbortController | null>(null);
+
+  useEffect(() => {
+    //中断前一次请求
+    abort?.abort();
+    setAbort(new AbortController());
+  }, [filterResult, pageParams]);
 
   useEffect(() => {
     api
-      .listPageGoodsInfo({
-        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,
-      })
+      .listPageGoodsInfo(
+        {
+          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,
+        },
+        {
+          signal: abort?.signal,
+        }
+      )
       .then((res) => {
         setProductList(res.result?.list || []);
         setCount(res.result?.totalCount);
       });
-  }, [filterResult, pageParams]);
+  }, [abort]);
 
   const onFilterChange = (filterResult: FilterResult) => {
     console.log("filterResult", filterResult);
@@ -52,8 +64,8 @@ export default function Mall(props: Props) {
     setPageParams({
       ...pageParams,
       pageNo: page,
-    })
-  }
+    });
+  };
   return (
     <Layout>
       <div className="page" style={{ paddingTop: "18px" }}>
@@ -65,36 +77,47 @@ export default function Mall(props: Props) {
         <div className={styles.productList}>
           <div className={styles.title}>四旋翼无人机</div>
           <div className={styles.main}>
-            <ul className={styles.listWrap}>
-              {productList.map((item, i) => {
-                return (
-                  <li
-                    key={i}
-                    className={styles.item}
-                    onClick={() => router.push("/mall/detail/1")}
-                  >
-                    <div className={styles.imgBox}>
-                      <Image
-                        alt=""
-                        src={item.imgUrl}
-                        className={styles.img}
-                        width={116}
-                        height={116}
-                      ></Image>
-                    </div>
-                    <div className={styles.title}>{item.goodsName}</div>
-                    <div className={styles.sellCount}>半年售{(Math.floor(Math.random() * 901) + 100).toFixed(0)}</div>
-                  </li>
-                );
-              })}
+            <div className={styles.listContent}>
+              <ul className={styles.listWrap}>
+                {productList.map((item, i) => {
+                  return (
+                    <li
+                      key={i}
+                      className={styles.item}
+                      onClick={() => router.push("/mall/detail/1")}
+                    >
+                      <div className={styles.imgBox}>
+                        <Image
+                          alt=""
+                          src={item.imgUrl}
+                          className={styles.img}
+                          width={116}
+                          height={116}
+                        ></Image>
+                      </div>
+                      <div className={styles.title}>{item.goodsName}</div>
+                      <div className={styles.sellCount}>
+                        半年售
+                        {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
+                      </div>
+                    </li>
+                  );
+                })}
+                {productList.length === 0 && (
+                  <Empty style={{ paddingTop: 20, width: '100%', textAlign: "center" }}></Empty>
+                )}
+              </ul>
               <Pagination
                 current={pageParams.pageNo}
                 showSizeChanger={false}
                 showQuickJumper
                 total={count}
                 onChange={onPageChange}
+                hideOnSinglePage={true}
+                style={{marginTop: 20}}
               />
-            </ul>
+            </div>
+
             <div className={styles.adList}>
               <div className={styles.ad}></div>
               <div className={styles.ad}></div>