Merge branch 'master' of ssh://git.mmcuav.cn:8222/root/sharefly-web-nextjs into caoyun

api/request.ts

@@ -18,7 +18,7 @@ export default function request(url: string, method: String = 'get', data?: any)
           params.append(key, data[key]);
         })
 
-        url += params;
+        url += '?' + params;
       }
       break;
 

components/filter/api/index.ts

@@ -5,51 +5,15 @@ export interface FilterOptionResp {
   name: string
 }
 
-export default {
-  category: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/category');
-  },
-  brand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/brand');
-  },
-  model: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/model');
-  },
-  part: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/parts');
-  },
-  quality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/quality');
-  },
-  region: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/getSecondDistrictInfo');
-  },
-}
-
-//商城接口
-export const mallApi = {
-  category: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/category');
-  },
-  brand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/brand');
-  },
-  model: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/model');
-  },
-  part: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/parts');
-  },
-  quality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/quality');
-  },
-  region: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/getSecondDistrictInfo');
-  },
+export interface RegionResp {
+  "childInfo": RegionResp[] | null,
+  "id": number,
+  "level": number,
+  "name": string,
+  "pid": number
 }
 
-//设备租赁接口
-export const leasingApi = {
+export default {
   category: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request('/pms/webProductMall/category');
   },
@@ -65,7 +29,7 @@ export const leasingApi = {
   quality: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request('/pms/webProductMall/quality');
   },
-  region: (): Promise<Response<Array<FilterOptionResp>>> => {
+  region: (): Promise<Response<Array<RegionResp>>> => {
     return request('/pms/webDevice/getSecondDistrictInfo');
   },
 }
\ No newline at end of file

components/filter/compoents/regionItem/index.tsx

-import { Space, Select } from 'antd';
-import { useEffect, useState } from 'react';
-import styles from '../../index.module.scss';
-import api from '../../api';
+import { Space, Select } from "antd";
+import { useEffect, useState } from "react";
+import styles from "../../index.module.scss";
+import api, { RegionResp } from "../../api";
 
-export default function RegionItem(){
-  const [productList, setProductList] = useState(Array<{}>);
+type Props = {
+  onChange: (item: RegionResp) => void;
+};
 
+export default function RegionItem(props: Props) {
+  const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
+  const [cityList, setCityList] = useState<RegionResp[]>([]);
   useEffect(() => {
-    setProductList([{}, {}, {}, {}, {}, {}]);
+    api.region().then((res) => {
+      setProvinceList(res?.result || []);
+    });
   }, []);
 
-  const onProvinceChange = (value: string) => {
-    console.log("省", value);
+  const onProvinceChange = (value: number, item: any) => {
+    console.log("省", value, item);
+    setCityList(item.childInfo || []);
+    props.onChange(item);
   };
 
-  const onCityChange = (value: string) => {
+  const onCityChange = (value: number, item: any) => {
     console.log("市", value);
+    props.onChange(item);
   };
   return (
     <div className={styles.filterItem}>
@@ -27,27 +36,29 @@ export default function RegionItem(){
             popupMatchSelectWidth={false}
             placeholder="选择省"
             onChange={onProvinceChange}
-            options={[
-              { value: "jack", label: "Jack" },
-              { value: "lucy", label: "Lucy" },
-              { value: "Yiminghe", label: "yiminghe" },
-              { value: "disabled", label: "Disabled", disabled: true },
-            ]}
+            options={provinceList.map((item) => {
+              return {
+                ...item,
+                value: item.id,
+                label: item.name,
+              };
+            })}
           />
           <Select
             bordered={false}
             popupMatchSelectWidth={false}
             placeholder="选择市"
             onChange={onCityChange}
-            options={[
-              { value: "jack", label: "Jack" },
-              { value: "lucy", label: "Lucy" },
-              { value: "Yiminghe", label: "yiminghe" },
-              { value: "disabled", label: "Disabled", disabled: true },
-            ]}
+            options={cityList.map((item) => {
+              return {
+                ...item,
+                value: item.id,
+                label: item.name,
+              };
+            })}
           />
         </Space>
       </div>
     </div>
-  ); 
+  );
 }

components/filter/index.tsx

@@ -47,7 +47,9 @@ export default function Filter(props: Props) {
             marginBottom: 18,
           }}
         >
-          <RegionItem></RegionItem>
+          <RegionItem
+            onChange={(item: FilterOptionResp) => onChange(item, "region")}
+          ></RegionItem>
         </div>
       )}
       <div className={styles.filterWrap}>

next.config.js

@@ -19,6 +19,18 @@ const nextConfig = {
       },
     ];
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "http",
+        hostname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
   pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
 };
 

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,21 +57,15 @@
         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;
       }
     }
   }
-}
+}
\ No newline at end of file

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.ad}></div>
+            <div className={styles.adList}>
+              <div className={styles.ad}></div>
+              <div className={styles.ad}></div>
+            </div>
           </div>
         </div>
       </div>