filter组件改为前端渲染，简化使用方式

components/filter/api/index.ts

@@ -4,6 +4,28 @@ export interface FilterOptionResp {
   id: number,
   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>>> => {

components/filter/compoents/brandItem/index.tsx

 import { Space, Button, Select } from 'antd';
 import styles from '../../index.module.scss';
-import { FilterOptionResp } from "../../api";
+import api, { FilterOptionResp } from "../../api";
+import { useEffect, useState } from "react";
 
 type Props = {
-  data: Array<FilterOptionResp>;
   onChange: (id: FilterOptionResp) => void;
 };
 
 export default function BrandItem(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([])
+
+  useEffect(() => {
+    api.brand().then(res => {
+      setData(res?.result || []);
+    });
+  }, [])
+
   const onClick = (item: FilterOptionResp) => {
     props.onChange({
       id: item.id,
@@ -21,7 +29,7 @@ export default function BrandItem(props: Props) {
       <div className={styles.filterItemMain}>
         <Space size={40}>
           {
-            props?.data?.map(item => {
+            data.map(item => {
               return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
             })
           }

components/filter/compoents/categoryItem/index.tsx

 import { Space, Button, Select } from 'antd';
 import styles from '../../index.module.scss';
-import { FilterOptionResp } from "../../api";
+import api, { FilterOptionResp } from "../../api";
+import { useState, useEffect } from 'react';
 
 type Props = {
-  data: Array<FilterOptionResp>;
   onChange: (id: FilterOptionResp) => void;
 };
 
 export default function CategoryItem(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([]);
+
+  useEffect(() => {
+    api.category().then((res) => {
+      setData(res?.result || []);
+    });
+  }, []);
+
   const onClick = (item: FilterOptionResp) => {
     props.onChange({
       id: item.id,
@@ -21,7 +29,7 @@ export default function CategoryItem(props: Props) {
       <div className={styles.filterItemMain}>
         <Space size={40}>
           {
-            props?.data?.map(item => {
+            data.map(item => {
               return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
             })
           }

components/filter/compoents/modelItem/index.tsx

 import { Space, Button, Select } from 'antd';
 import styles from '../../index.module.scss';
-import { FilterOptionResp } from "../../api";
+import api, { FilterOptionResp } from "../../api";
+import { useEffect, useState } from 'react';
 
 type Props = {
-  data: Array<FilterOptionResp>;
   onChange: (id: FilterOptionResp) => void;
 };
 
 export default function ModelItem(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([]);
+
+  useEffect(() => {
+    api.model().then((res) => {
+      setData(res?.result || []);
+    });
+  }, []);
+
   const onClick = (item: FilterOptionResp) => {
     props.onChange({
       id: item.id,
@@ -21,7 +29,7 @@ export default function ModelItem(props: Props) {
       <div className={styles.filterItemMain}>
         <Space size={40}>
           {
-            props?.data?.map(item => {
+            data?.map(item => {
               return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
             })
           }

components/filter/compoents/partItem/index.tsx

 import { Space, Button, Select } from 'antd';
 import styles from '../../index.module.scss';
-import { FilterOptionResp } from "../../api";
+import api, { FilterOptionResp } from "../../api";
+import { useState, useEffect } from 'react';
 
 type Props = {
-  data: Array<FilterOptionResp>;
   onChange: (id: FilterOptionResp) => void;
 };
 
 export default function PartItem(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([]);
+
+  useEffect(() => {
+    api.part().then((res) => {
+      setData(res?.result || []);
+    });
+  }, []);
+
   const onClick = (item: FilterOptionResp) => {
     props.onChange({
       id: item.id,
@@ -20,7 +28,7 @@ export default function PartItem(props: Props) {
       <div className={styles.filterItemTitle}>部件：</div>
       <div className={styles.filterItemMain}>
         <Space size={40}>
-          {props?.data?.map((item) => {
+          {data?.map((item) => {
             return (
               <Button type="link" key={item.id} onClick={(e) => onClick(item)}>
                 {item.name}

components/filter/compoents/qualityItem/index.tsx

 import { Space, Button, Select } from 'antd';
 import styles from '../../index.module.scss';
-import { FilterOptionResp } from "../../api";
+import api, { FilterOptionResp } from "../../api";
+import { useState, useEffect } from 'react';
 
 type Props = {
-  data: Array<FilterOptionResp>;
   onChange: (id: FilterOptionResp) => void;
 };
 
 export default function QualityItem(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([]);
+
+  useEffect(() => {
+    api.quality().then((res) => {
+      setData(res?.result || []);
+    });
+  }, []);
+
   const onClick = (item: FilterOptionResp) => {
     props.onChange({
       id: item.id,
@@ -20,7 +28,7 @@ export default function QualityItem(props: Props) {
       <div className={styles.filterItemTitle}>成色：</div>
       <div className={styles.filterItemMain}>
         <Space size={40}>
-          {props?.data?.map((item) => {
+          {data?.map((item) => {
             return (
               <Button type="link" key={item.id} onClick={(e) => onClick(item)}>
                 {item.name}

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';
 
 export default function RegionItem(){
   const [productList, setProductList] = useState(Array<{}>);

components/filter/index.tsx

@@ -18,12 +18,6 @@ type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色";
 type Props = {
   types: [itemType, itemType, itemType, itemType, itemType, itemType];    //需要包含的筛选条件项
   showResultItem: Boolean; //显示结果栏
-  categoryData?: Array<FilterOptionResp>;
-  regionData?: Array<FilterOptionResp>;
-  brandData?: Array<FilterOptionResp>;
-  modelData?: Array<FilterOptionResp>;
-  partData?: Array<FilterOptionResp>;
-  qualityData?: Array<FilterOptionResp>;
   onChange: (filterResult: FilterResult) => void; //筛选条件更改事件
 };
 export default function Filter(props: Props) {
@@ -59,31 +53,26 @@ export default function Filter(props: Props) {
       <div className={styles.filterWrap}>
         {props.types.includes("品牌") && (
           <BrandItem
-            data={props.brandData || []}
             onChange={(item: FilterOptionResp) => onChange(item, "brand")}
           ></BrandItem>
         )}
         {props.types.includes("类目") && (
           <CategoryItem
-            data={props.categoryData || []}
             onChange={(item: FilterOptionResp) => onChange(item, "category")}
           ></CategoryItem>
         )}
         {props.types.includes("部件") && (
           <PartItem
-            data={props.partData || []}
             onChange={(item: FilterOptionResp) => onChange(item, "part")}
           ></PartItem>
         )}
         {props.types.includes("型号") && (
           <ModelItem
-            data={props.modelData || []}
             onChange={(item: FilterOptionResp) => onChange(item, "model")}
           ></ModelItem>
         )}
         {props.types.includes("成色") && (
           <QualityItem
-            data={props.qualityData || []}
             onChange={(item: FilterOptionResp) => onChange(item, "quality")}
           ></QualityItem>
         )}

pages/mall/index.page.tsx

@@ -9,32 +9,13 @@ import { FilterOptionResp, mallApi } from "~/components/filter/api";
 
 // 此函数在构建时被调用
 export async function getServerSideProps() {
-  //获取筛选数据，进行静态渲染
-  const brand = Filter.mallApi.brand();
-  const category = Filter.mallApi.category();
-  const model = Filter.mallApi.model();
-  const part = Filter.mallApi.part();
-  const quality = Filter.mallApi.quality();
-
-  const res = await Promise.all([brand, category, part, model, quality]);
-
   return {
     props: {
-      brandData: res[0].result || [],
-      categoryData: res[1].result || [],
-      partData: res[2].result || [],
-      modelData: res[3].result || [],
-      qualityData: res[4].result || [],
     },
   };
 }
 
 type Props = {
-  brandData: Array<FilterOptionResp>;
-  categoryData: Array<FilterOptionResp>;
-  partData: Array<FilterOptionResp>;
-  modelData: Array<FilterOptionResp>;
-  qualityData: Array<FilterOptionResp>;
 };
 
 export default function Mall(props: Props) {
@@ -49,11 +30,6 @@ export default function Mall(props: Props) {
         <Filter
           types={["类目", "地域", "品牌", "部件", "型号", "成色"]}
           showResultItem
-          brandData={props.brandData}
-          categoryData={props.categoryData}
-          partData={props.partData}
-          modelData={props.modelData}
-          qualityData={props.qualityData}
           onChange={onFilterChange}
         ></Filter>
         <div className={styles.productList}>