商城页开发

pages/mall/api/index.ts

+import request, { Response } from '~/api/request';
+
+export interface ListPageGoodsInfoParams {
+  "brandId"?: number,
+  "districtId"?: number,
+  "modelId"?: number,
+  "pageNo": number,
+  "pageSize": number,
+  "partsId"?: number,
+  "productCategoryId"?: number,
+  "qualityId"?: number
+}
+
+export interface Goods {
+  "createTime": string,
+  "directoryId": number,
+  "directoryName": string,
+  "goodsName": string,
+  "goodsOneLevelTypeName": string,
+  "goodsTwoLevelTypeName": string,
+  "id": number,
+  "imgUrl": string,
+  "isCoupons": number,
+  "status": number
+}
+
+export interface ListPageGoodsInfoResp {
+  "pageNo": 1,
+  "pageSize": 10,
+  "list": Array<Goods>,
+  "totalCount": 0,
+  "totalPage": 0
+}
+
+
+export default {
+  //web-商品信息-分页
+  listPageGoodsInfo: (params: ListPageGoodsInfoParams): Promise<Response<ListPageGoodsInfoResp>> => {
+    return request('/pms/webProductMall/listPageGoodsInfo', 'post', params)
+  }
+}
\ No newline at end of file

pages/mall/index.module.scss

+@import "~/styles/mixins.scss";
+
 .productList {
   .title {
     padding: 20px 10px 18px;
@@ -6,37 +8,47 @@
 
   .main {
     display: flex;
+    justify-content: space-between;
 
-    .ad {
+    .adList {
+      display: flex;
       flex-shrink: 0;
-      width: 260px;
-      height: 420px;
-      margin-left: 16px;
-      background-color: gray;
+      flex-direction: column;
+      gap: 12px;
+
+      .ad {
+        width: 270px;
+        height: 422px;
+        background-color: #d8d8d8;
+      }
     }
   }
 
   .listWrap {
     display: flex;
     flex-wrap: wrap;
-    margin-left: -14px;
+    gap: 12px;
+    height: fit-content;
 
     .item {
       cursor: pointer;
       width: 220px;
-      height: 326px;
+      height: 205px;
       background: #ffffff;
       border-radius: 6px;
-      margin-bottom: 15px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      padding-bottom: 18px;
-      margin-left: 14px;
+      padding: 19px 0 18px;
 
-      .img {
+      .imgBox {
         width: 100%;
-        height: 220px;
+        text-align: center;
+
+        .img {
+          width: 116px;
+          height: 116px;
+        }
       }
 
       .title {
@@ -45,17 +57,11 @@
         font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
         font-weight: bold;
         color: #333333;
-        line-height: 24px;
-        height: 48px;
-        display: -webkit-box; /* 使用弹性盒子布局 */
-        -webkit-line-clamp: 2; /* 显示行数 */
-        -webkit-box-orient: vertical; /* 垂直排列 */
-        overflow: hidden; /* 隐藏溢出部分 */
-        text-overflow: ellipsis; /* 使用省略号代替溢出部分 */
+        @include ellipsis(1);
       }
 
       .sellCount {
-        font-size: 14px;
+        font-size: 12px;
         font-family: MicrosoftYaHei;
         color: #ff552d;
         padding-left: 20px;

pages/mall/index.page.tsx

@@ -3,27 +3,39 @@ import { Button, 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 Image from "next/image";
 import Filter, { FilterResult } from "~/components/filter";
-import { FilterOptionResp, mallApi } from "~/components/filter/api";
+import api, { Goods } from "./api";
 
 // 此函数在构建时被调用
 export async function getServerSideProps() {
   return {
-    props: {
-    },
+    props: {},
   };
 }
 
-type Props = {
-};
+type Props = {};
 
 export default function Mall(props: Props) {
   const router = useRouter();
-  const [productList, setProductList] = useState(Array<{}>);
+  const [productList, setProductList] = useState(Array<Goods>);
+  const [filterResult, setFilterResult] = useState<FilterResult>({});
+
+  useEffect(() => {
+    api
+      .listPageGoodsInfo({
+        brandId: 1,
+        pageNo: 1,
+        pageSize: 10,
+      })
+      .then((res) => {
+        setProductList(res.result?.list || []);
+      });
+  }, []);
+
   const onFilterChange = (filterResult: FilterResult) => {
-    console.log('filterResult', filterResult)
-  }
+    console.log("filterResult", filterResult);
+  };
   return (
     <Layout>
       <div className="page" style={{ paddingTop: "18px" }}>
@@ -43,16 +55,25 @@ export default function Mall(props: Props) {
                     className={styles.item}
                     onClick={() => router.push("/mall/detail/1")}
                   >
-                    <Image alt="" src="" className={styles.img}></Image>
-                    <div className={styles.title}>
-                      入云龙ll 1550入云龙ll 1550入云龙ll 1550入云龙ll 1550
+                    <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}>半年售12987</div>
                   </li>
                 );
               })}
             </ul>
+            <div className={styles.adList}>
               <div className={styles.ad}></div>
+              <div className={styles.ad}></div>
+            </div>
           </div>
         </div>
       </div>