对接商城广告

pages/mall/api/index.ts

@@ -32,10 +32,18 @@ export interface ListPageGoodsInfoResp {
   "totalPage": 0
 }
 
+export interface Ad {
+  id: number;
+  imageUrl: string;
+}
 
 export default {
   //web-商品信息-分页
   listPageGoodsInfo: (params: ListPageGoodsInfoParams, options = {}): Promise<Response<ListPageGoodsInfoResp>> => {
     return request('/pms/webProductMall/listPageGoodsInfo', 'post', params, options)
+  },
+  //产品商城广告位
+  ad: (): Promise<Response<Array<Ad>>> => {
+    return request('/pms/webProductMall/ad')
   }
 }
\ No newline at end of file

pages/mall/index.page.tsx

 import React, { useEffect, useState } from "react";
-import { Button, Empty, Pagination, Select, Space, Tag } from "antd";
+import { Empty, Pagination, Image } 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, { AdapterResult, FilterResult } from "~/components/filter";
-import api, { Goods, ListPageGoodsInfoParams } from "./api";
+import api, { Ad, Goods, ListPageGoodsInfoParams } from "./api";
 
 // 此函数在构建时被调用
 export async function getServerSideProps() {
@@ -18,21 +17,23 @@ type Props = {};
 
 export default function Mall(props: Props) {
   const router = useRouter();
-  const [productList, setProductList] = useState<Array<Goods>>([]);
-  const [filterResult, setFilterResult] = useState<AdapterResult>({});
+  const [productList, setProductList] = useState<Array<Goods>>([]); //商品列表
+  const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
     pageSize: 16,
-  });
-  const [count, setCount] = useState(0);
-  const [abort, setAbort] = useState<AbortController | null>(null);
+  }); //分页器对象
+  const [count, setCount] = useState(0); //商品总数
+  const [abort, setAbort] = useState<AbortController | null>(null); //请求中断对你
+  const [adList, setAdList] = useState<Array<Ad>>([]); //广告列表
 
   useEffect(() => {
-    //中断前一次请求
+    //中断前一次列表请求
     abort?.abort();
     setAbort(new AbortController());
   }, [filterResult, pageParams]);
 
+  //端口列表请求
   useEffect(() => {
     api
       .listPageGoodsInfo(
@@ -50,7 +51,17 @@ export default function Mall(props: Props) {
       });
   }, [abort]);
 
-  const onFilterChange = (filterResult: FilterResult, adapterFilterResult: AdapterResult) => {
+  //广告请求
+  useEffect(() => {
+    api.ad().then((res) => {
+      setAdList(res.result || []);
+    });
+  }, []);
+
+  const onFilterChange = (
+    filterResult: FilterResult,
+    adapterFilterResult: AdapterResult
+  ) => {
     console.log("filterResult", filterResult, adapterFilterResult);
     setFilterResult(adapterFilterResult);
   };
@@ -79,7 +90,7 @@ export default function Mall(props: Props) {
                     <li
                       key={i}
                       className={styles.item}
-                      onClick={() => router.push("/mall/detail/1")}
+                      onClick={() => router.push("/mall/detail/" + item.id)}
                     >
                       <div className={styles.imgBox}>
                         <Image
@@ -88,6 +99,7 @@ export default function Mall(props: Props) {
                           className={styles.img}
                           width={116}
                           height={116}
+                          preview={false}
                         ></Image>
                       </div>
                       <div className={styles.title}>{item.goodsName}</div>
@@ -99,7 +111,13 @@ export default function Mall(props: Props) {
                   );
                 })}
                 {productList.length === 0 && (
-                  <Empty style={{ paddingTop: 20, width: '100%', textAlign: "center" }}></Empty>
+                  <Empty
+                    style={{
+                      paddingTop: 20,
+                      width: "100%",
+                      textAlign: "center",
+                    }}
+                  ></Empty>
                 )}
               </ul>
               <Pagination
@@ -109,13 +127,23 @@ export default function Mall(props: Props) {
                 total={count}
                 onChange={onPageChange}
                 hideOnSinglePage={true}
-                style={{marginTop: 20}}
+                style={{ marginTop: 20 }}
               />
             </div>
 
             <div className={styles.adList}>
-              <div className={styles.ad}></div>
-              <div className={styles.ad}></div>
+              {adList.map((item) => {
+                return (
+                  <Image
+                    key={item.id}
+                    className={styles.ad}
+                    src={item.imageUrl}
+                    width="270"
+                    height="270"
+                    preview={false}
+                  ></Image>
+                );
+              })}
             </div>
           </div>
         </div>