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

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,10 +25,18 @@ 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({
+      .listPageGoodsInfo(
+        {
           brandId: filterResult.brand?.id,
           districtId: filterResult.region?.id,
           modelId: filterResult.model?.id,
@@ -36,12 +44,16 @@ export default function Mall(props: Props) {
           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,6 +77,7 @@ export default function Mall(props: Props) {
         <div className={styles.productList}>
           <div className={styles.title}>四旋翼无人机</div>
           <div className={styles.main}>
+            <div className={styles.listContent}>
               <ul className={styles.listWrap}>
                 {productList.map((item, i) => {
                   return (
@@ -83,18 +96,28 @@ export default function Mall(props: Props) {
                         ></Image>
                       </div>
                       <div className={styles.title}>{item.goodsName}</div>
-                    <div className={styles.sellCount}>半年售{(Math.floor(Math.random() * 901) + 100).toFixed(0)}</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>