改-设备租赁-筛选组件

pages/equipmentLeasing/index.tsx

 import React, { useEffect, useState } from "react";
-import {Box} from './styled';
+import { useRouter } from "next/router";
 import { Button, Select, Space, Tag } from "antd";
+import {Box} from './styled';
 import Layout from "~/components/layout";
 import ContentBox from '~/components/contentBox';
-import { useRouter } from "next/router";
+import Filter, { FilterResult } from "~/components/filter";
+import { FilterOptionResp } from "~/components/filter/api";
+
+// 此函数在构建时被调用
+export async function getStaticProps() {
+  //获取筛选数据，进行静态渲染
+  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 EquipmentLeasing() {
+export default function EquipmentLeasing(props:Props) {
   const router = useRouter();
 
   const leftDom = <div className='item' onClick={() => router.push('/equipmentLeasing/detail/1')}>
@@ -25,148 +57,23 @@ export default function EquipmentLeasing() {
 
   </div>
 
-  const [productList, setProductList] = useState(Array<{}>);
-
-  useEffect(() => {
-    setProductList([{}, {}, {}, {}, {}, {}]);
-  }, []);
-
-  const onProvinceChange = (value: string) => {
-    console.log("省", value);
-  };
-
-  const onCityChange = (value: string) => {
-    console.log("市", value);
-  };
-
-  const onMoreChange = (value: string) => {
-    console.log("更多", value);
-  };
-
-  const onCloseTag = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    console.log("删除", e);
-  };
+  const onFilterChange = (filterResult: FilterResult) => {
+    console.log('filterResult', filterResult)
+  }
 
   return  (
     <Layout>
       <Box>
-      <div className="filter-wrap" style={{ marginBottom: "11px" }}>
-          <div className="filter-item">
-            <div className="filter-item__title">地域：</div>
-            <div className="filter-item-main">
-              <Space size={40}>
-                <Select
-                  bordered={false}
-                  dropdownMatchSelectWidth={false}
-                  placeholder="选择省"
-                  onChange={onProvinceChange}
-                  options={[
-                    { value: "jack", label: "Jack" },
-                    { value: "lucy", label: "Lucy" },
-                    { value: "Yiminghe", label: "yiminghe" },
-                    { value: "disabled", label: "Disabled", disabled: true },
-                  ]}
-                />
-                <Select
-                  bordered={false}
-                  dropdownMatchSelectWidth={false}
-                  placeholder="选择市"
-                  onChange={onCityChange}
-                  options={[
-                    { value: "jack", label: "Jack" },
-                    { value: "lucy", label: "Lucy" },
-                    { value: "Yiminghe", label: "yiminghe" },
-                    { value: "disabled", label: "Disabled", disabled: true },
-                  ]}
-                />
-              </Space>
-            </div>
-          </div>
-        </div>
-        <div className="filter-wrap" style={{marginBottom:24}}>
-          <div className="filter-item">
-            <div className="filter-item__title">类目：</div>
-            <div className="filter-item-main">
-              <Space size={40}>
-                <Button type="link">不限</Button>
-                <Button type="link">无人机</Button>
-                <Button type="link">挂载</Button>
-                <Button type="link">地面站</Button>
-              </Space>
-              <Select
-                placeholder="更多"
-                onChange={onMoreChange}
-                bordered={false}
-                dropdownMatchSelectWidth={false}
-                options={[
-                  { value: "jack", label: "Jack" },
-                  { value: "lucy", label: "Lucy" },
-                  { value: "Yiminghe", label: "yiminghe" },
-                  { value: "disabled", label: "Disabled", disabled: true },
-                ]}
-              />
-            </div>
-          </div>
-          <div className="filter-item">
-            <div className="filter-item__title">品牌：</div>
-            <div className="filter-item-main">
-              <Space size={40}>
-                <Button type="link">不限</Button>
-                <Button type="link">无人机</Button>
-                <Button type="link">挂载</Button>
-                <Button type="link">地面站</Button>
-              </Space>
-              <Select
-                placeholder="更多"
-                onChange={onMoreChange}
-                bordered={false}
-                dropdownMatchSelectWidth={false}
-                options={[
-                  { value: "jack", label: "Jack" },
-                  { value: "lucy", label: "Lucy" },
-                  { value: "Yiminghe", label: "yiminghe" },
-                  { value: "disabled", label: "Disabled", disabled: true },
-                ]}
-              />
-            </div>
-          </div>
-          <div className="filter-item">
-            <div className="filter-item__title">型号：</div>
-            <div className="filter-item-main">
-              <Space size={40}>
-                <Button type="link">不限</Button>
-                <Button type="link">无人机</Button>
-                <Button type="link">挂载</Button>
-                <Button type="link">地面站</Button>
-              </Space>
-              <Select
-                placeholder="更多"
-                onChange={onMoreChange}
-                bordered={false}
-                dropdownMatchSelectWidth={false}
-                options={[
-                  { value: "jack", label: "Jack" },
-                  { value: "lucy", label: "Lucy" },
-                  { value: "Yiminghe", label: "yiminghe" },
-                  { value: "disabled", label: "Disabled", disabled: true },
-                ]}
-              />
-            </div>
-          </div>
-          <div className="filter-item">
-            <div className="filter-item__title">已选：</div>
-            <div className="filter-item-main">
-              <Space size={10}>
-                <Tag closable onClose={onCloseTag}>
-                  无人机
-                </Tag>
-                <Tag closable onClose={onCloseTag}>
-                  无人机
-                </Tag>
-              </Space>
-            </div>
-          </div>
-        </div>
+        <Filter
+          types={["类目", "地域", "品牌", "部件", "型号", "成色"]}
+          showResultItem
+          brandData={props.brandData}
+          categoryData={props.categoryData}
+          partData={props.partData}
+          modelData={props.modelData}
+          qualityData={props.qualityData}
+          onChange={onFilterChange}
+        ></Filter>
         <ContentBox boxIndex={4} leftContentStyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:[{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom},{element:leftDom}]}} rightRenderDom={{columns:[{element:rightDom},{element:rightDom}]}}/>
       </Box>
     </Layout>