改-筛选组件filter功能

改-作业服务,设备租赁，产品商城-列表跳转自动选中,筛选功能修改

components/filter/api/index.ts

-import request, { Response } from "~/api/request";
+import request, { Response } from '~/api/request'
 
 export interface FilterOptionResp {
-  id: number;
-  name?: string;
-  appName?: string;
+  id: number
+  name?: string
+  appName?: string
 }
 
 export interface RegionResp {
-  childInfo: RegionResp[] | null;
-  id: number;
-  level: number;
-  name: string;
-  pid: number;
+  childInfo: RegionResp[] | null
+  id: number
+  level: number
+  name: string
+  pid: number
+}
+
+export interface InfoList {
+  id: number
+  directoryId: number
+  name: string
+  icon: string
+}
+export interface TypesResp {
+  directoryId: number
+  name: string
+  categoriesInfoListDTO: InfoList[]
 }
 
 export default {
   category: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/category");
+    return request('/pms/webProductMall/category')
   },
   categoryId: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/category");
+    return request('/pms/webDevice/category')
   },
   brand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/brand");
+    return request('/pms/webDevice/brand')
   },
   model: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/model");
+    return request('/pms/webDevice/model')
   },
   part: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/parts");
+    return request('/pms/webProductMall/parts')
   },
   quality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/quality");
+    return request('/pms/webProductMall/quality')
   },
   region: (): Promise<Response<Array<RegionResp>>> => {
-    return request("/pms/webDevice/getSecondDistrictInfo");
+    return request('/pms/webDevice/getSecondDistrictInfo')
   },
   industry: (): Promise<Response<Array<RegionResp>>> => {
-    return request("/release/work/listAllIndustry");
+    return request('/release/work/listAllIndustry')
   },
   appType: (): Promise<Response<Array<RegionResp>>> => {
-    return request("/release/work/listAllAppType");
+    return request('/release/work/listAllAppType')
   },
   deviceBrand: (): Promise<Response<Array<RegionResp>>> => {
-    return request("/pms/webDevice/deviceBrand");
+    return request('/pms/webDevice/deviceBrand')
   },
   deviceModel: (): Promise<Response<Array<RegionResp>>> => {
-    return request("/pms/webDevice/deviceModel");
+    return request('/pms/webDevice/deviceModel')
   },
-};
+  infoByType: (params: {
+    type: number
+  }): Promise<Response<Array<TypesResp>>> => {
+    return request('/pms/classify/queryCategoryInfoByType', 'get', params)
+  },
+}

components/filter/compoents/regionItem/index.tsx

-import { Space, Select } from "antd";
-import { useEffect, useState } from "react";
-import styles from "../../index.module.scss";
-import api, { RegionResp } from "../../api";
+import { Space, Select } from 'antd'
+import { useEffect, useState } from 'react'
+import styles from '../../index.module.scss'
+import api, { RegionResp } from '../../api'
 
 type Props = {
-  onChange: (item: RegionResp) => void;
-};
+  onChange: (item: RegionResp) => void
+}
 
 export default function RegionItem(props: Props) {
-  const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
-  const [cityList, setCityList] = useState<RegionResp[]>([]);
+  const [provinceList, setProvinceList] = useState<RegionResp[]>([])
+  const [cityList, setCityList] = useState<RegionResp[]>([])
   const [selectCity, setSelectCity] = useState<number>()
   useEffect(() => {
     api.region().then((res) => {
-      setProvinceList(res?.result || []);
-    });
-  }, []);
+      setProvinceList(res?.result || [])
+    })
+  }, [])
 
   const onProvinceChange = (value: number, item: any) => {
-    console.log("省", value, item);
-    setCityList(item.childInfo || []);
-    setSelectCity(undefined);
-    props.onChange(item);
-  };
+    console.log('省', value, item)
+    setCityList(item.childInfo || [])
+    setSelectCity(undefined)
+    props.onChange(item)
+  }
 
   const onCityChange = (value: number, item: any) => {
-    console.log("市", value);
-    setSelectCity(value);
-    props.onChange(item);
-  };
+    console.log('市', value)
+    setSelectCity(value)
+    props.onChange(item)
+  }
   return (
     <div className={styles.filterItem}>
       <div className={styles.filterItemTitle}>地域：</div>
@@ -44,7 +44,7 @@ export default function RegionItem(props: Props) {
                 ...item,
                 value: item.id,
                 label: item.name,
-              };
+              }
             })}
           />
           {/* <Select
@@ -64,5 +64,5 @@ export default function RegionItem(props: Props) {
         </Space>
       </div>
     </div>
-  );
+  )
 }

components/filter/compoents/resultItem/index.tsx

-import { Space, Tag } from "antd";
-import { FilterResult } from "../..";
-import styles from "../../index.module.scss";
-
+import { Space, Tag } from 'antd'
+import { FilterResult } from '../..'
+import styles from '../../index.module.scss'
+import { InfoList } from '../../api'
 type Props = {
-  data: FilterResult;
-  onDel: (key: string) => void;
-};
-export default function ResultItem({data, onDel}: Props) {
+  data: FilterResult
+  onDel: (key: string | number) => void
+}
+export default function ResultItem({ data, onDel }: Props) {
   return (
     <div className={styles.filterItem}>
       <div className={styles.filterItemTitle}>已选：</div>
       <div className={styles.filterItemMain}>
         <Space size={10}>
-          {data &&
-            Object.keys(data).map((key) => {
-              //@ts-ignore
-              let item = data[key];
+          {data.provinceId && (
+            // Object.keys(data).map((key) => {
+            //   //@ts-ignore
+            //   let item = data[key]
+            //   return (
+            //     <Tag
+            //       closable
+            //       onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            //         onDel(key)
+            //       }}
+            //       key={key}
+            //     >
+            //       {item?.name}
+            //     </Tag>
+            //   )
+            // })
+            <Tag
+              closable
+              onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                onDel('provinceId')
+              }}
+              key={data.provinceId.id}
+            >
+              {data.provinceId.name}
+            </Tag>
+          )}
+          {data.categoryId &&
+            data.categoryId.map((item: InfoList, index) => {
               return (
                 <Tag
                   closable
                   onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                    onDel(key);
+                    onDel(item.id)
                   }}
-                  key={key}
+                  key={item.name}
                 >
                   {item?.name}
                 </Tag>
-              );
+              )
             })}
         </Space>
       </div>
     </div>
-  );
+  )
 }

components/filter/compoents/typeInfo/index.tsx

+import { Space, Button, Select, Collapse } from 'antd'
+import styles from '../../index.module.scss'
+import api, { FilterOptionResp, InfoList } from '../../api'
+import { useState, useEffect } from 'react'
+
+type Props = {
+  onChange: (id: FilterOptionResp) => void
+  typeName: string
+  dataValue: InfoList[]
+}
+
+export default function CategoryItem(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([])
+
+  useEffect(() => {
+    setData(props.dataValue || [])
+  }, [])
+
+  const onClick = (item: FilterOptionResp) => {
+    props.onChange({
+      id: item.id,
+      name: `${props.typeName}：` + item.name,
+    })
+  }
+
+  return (
+    <div className={styles.filterItem}>
+      <div className={styles.filterItemTitle}>{props.typeName}：</div>
+      <div
+        className={`${styles.filterItemMain} ${
+          data.length <= 10 && styles.disabled
+        }`}
+      >
+        <Collapse ghost collapsible="icon" expandIconPosition="end">
+          <Collapse.Panel
+            header={
+              <Space size={40}>
+                {data.slice(0, 10).map((item) => {
+                  return (
+                    <Button
+                      type="link"
+                      key={item.id}
+                      onClick={(e) => onClick(item)}
+                    >
+                      {item.name}
+                    </Button>
+                  )
+                })}
+              </Space>
+            }
+            key="1"
+          >
+            <Space size={40}>
+              {data.slice(10).map((item) => {
+                return (
+                  <Button
+                    type="link"
+                    key={item.id}
+                    onClick={(e) => onClick(item)}
+                  >
+                    {item.name}
+                  </Button>
+                )
+              })}
+            </Space>
+          </Collapse.Panel>
+        </Collapse>
+      </div>
+    </div>
+  )
+}

components/filter/index.tsx

-import CategoryItem from "./compoents/categoryItem";
-import Category from "./compoents/category";
-import { FilterOptionResp, RegionResp } from "./api";
-import ResultItem from "./compoents/resultItem";
-import RegionItem from "./compoents/regionItem";
-import styles from "./index.module.scss";
-import React, { useEffect, useState, forwardRef, useImperativeHandle, Ref } from "react";
-import { useRouter } from "next/router";
-import BrandItem from "./compoents/brandItem";
-import ModelItem from "./compoents/modelItem";
-import PartItem from "./compoents/partItem";
-import QualityItem from "./compoents/qualityItem";
-import Industry from "./compoents/industry";
-import AppType from "./compoents/appType";
-import DeviceBrand from "./compoents/deviceBrand";
-import DeviceModel from "./compoents/deviceModel";
+import CategoryItem from './compoents/categoryItem'
+import Category from './compoents/category'
+import { FilterOptionResp, RegionResp } from './api'
+import ResultItem from './compoents/resultItem'
+import RegionItem from './compoents/regionItem'
+import styles from './index.module.scss'
+import React, {
+  useEffect,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+} from 'react'
+import { useRouter } from 'next/router'
+import BrandItem from './compoents/brandItem'
+import ModelItem from './compoents/modelItem'
+import PartItem from './compoents/partItem'
+import QualityItem from './compoents/qualityItem'
+import Industry from './compoents/industry'
+import AppType from './compoents/appType'
+import DeviceBrand from './compoents/deviceBrand'
+import DeviceModel from './compoents/deviceModel'
+import TypeInfo from './compoents/typeInfo'
+import api, { TypesResp, InfoList } from './api'
 
 export type AdapterResult = {
-  brandId?: number;
-  districtId?: number;
-  modelId?: number;
-  partsId?: number;
-  productCategoryId?: number;
-  qualityId?: number;
-  industryId?: number;
-  appTypeId?: number;
-  categoryId?: number;
-};
+  // brandId?: number
+  // districtId?: number
+  // modelId?: number
+  // partsId?: number
+  // productCategoryId?: number
+  // qualityId?: number
+  // industryId?: number
+  // appTypeId?: number
+  categoryId?: any[]
+  provinceId?: number
+}
 
 export type FilterResult = {
-  region?: RegionResp;
-  brand?: FilterOptionResp;
-  category?: FilterOptionResp;
-  part?: FilterOptionResp;
-  model?: FilterOptionResp;
-  quality?: FilterOptionResp;
-  industryId?: FilterOptionResp;
-  appTypeId?: FilterOptionResp;
-  categoryId?: FilterOptionResp;
-};
+  // region?: RegionResp
+  // brand?: FilterOptionResp
+  // category?: FilterOptionResp
+  // part?: FilterOptionResp
+  // model?: FilterOptionResp
+  // quality?: FilterOptionResp
+  // industryId?: FilterOptionResp
+  // appTypeId?: FilterOptionResp
+  categoryId?: InfoList[]
+  provinceId?: FilterOptionResp
+}
 
 type itemType =
-  | "类目"
-  | "地域"
-  | "品牌"
-  | "部件"
-  | "型号"
-  | "成色"
-  | "行业"
-  | "应用"
-  | "设备品牌"
-  | "设备型号"
-  | "设备类目";
+  | '类目'
+  | '地域'
+  | '品牌'
+  | '部件'
+  | '型号'
+  | '成色'
+  | '行业'
+  | '应用'
+  | '设备品牌'
+  | '设备型号'
+  | '设备类目'
 
 type Props = {
-  types: itemType[]; //需要包含的筛选条件项
-  showResultItem: Boolean; //显示结果栏
+  types: itemType[] //需要包含的筛选条件项
+  showResultItem: Boolean //显示结果栏
   onChange: (
     filterResult: FilterResult,
     adapterFilterResult: AdapterResult //适配器,直接用于接口请求
-  ) => void; //筛选条件更改事件
-};
+  ) => void //筛选条件更改事件
+}
 
-const idArr = [
-  "brandId",
-  "categoryId",
-  "modelId",
-  "partsId",
-  "productCategoryId",
-  "qualityId",
-  "industryId",
-  "appTypeId",
-];
-const nameArr: any = {
-  brandId: {
-    type: "brandId",
-    typeObj: "brand",
-    typeName: "品牌：",
-  },
-  // districtId: {
-  //   type:"districtId",
-  //   typeObj:"region",
-  //   typeName:"地域：",
-  // },
-  modelId: {
-    type: "modelId",
-    typeObj: "model",
-    typeName: "型号：",
-  },
-  partsId: {
-    type: "partsId",
-    typeObj: "part",
-    typeName: "部件：",
-  },
-  productCategoryId: {
-    type: "productCategoryId",
-    typeObj: "category",
-    typeName: "类目：",
-  },
-  qualityId: {
-    type: "qualityId",
-    typeObj: "quality",
-    typeName: "成色：",
-  },
-  industryId: {
-    type: "industryId",
-    typeObj: "industryId",
-    typeName: "行业：",
-  },
-  appTypeId: {
-    type: "appTypeId",
-    typeObj: "appTypeId",
-    typeName: "应用：",
-  },
-  categoryId: {
-    type: "categoryId",
-    typeObj: "categoryId",
-    typeName: "类目：",
-  },
-};
+// const idArr = [
+//   'brandId',
+//   'categoryId',
+//   'modelId',
+//   'partsId',
+//   'productCategoryId',
+//   'qualityId',
+//   'industryId',
+//   'appTypeId',
+// ]
+// const nameArr: any = {
+//   brandId: {
+//     type: 'brandId',
+//     typeObj: 'brand',
+//     typeName: '品牌：',
+//   },
+//   // districtId: {
+//   //   type:"districtId",
+//   //   typeObj:"region",
+//   //   typeName:"地域：",
+//   // },
+//   modelId: {
+//     type: 'modelId',
+//     typeObj: 'model',
+//     typeName: '型号：',
+//   },
+//   partsId: {
+//     type: 'partsId',
+//     typeObj: 'part',
+//     typeName: '部件：',
+//   },
+//   productCategoryId: {
+//     type: 'productCategoryId',
+//     typeObj: 'category',
+//     typeName: '类目：',
+//   },
+//   qualityId: {
+//     type: 'qualityId',
+//     typeObj: 'quality',
+//     typeName: '成色：',
+//   },
+//   industryId: {
+//     type: 'industryId',
+//     typeObj: 'industryId',
+//     typeName: '行业：',
+//   },
+//   appTypeId: {
+//     type: 'appTypeId',
+//     typeObj: 'appTypeId',
+//     typeName: '应用：',
+//   },
+//   categoryId: {
+//     type: 'categoryId',
+//     typeObj: 'categoryId',
+//     typeName: '类目：',
+//   },
+// }
 
 const Filter = (props: Props, ref: Ref<any>) => {
-  const router = useRouter();
+  const router = useRouter()
   useImperativeHandle(ref, () => ({
-    idArr: idArr,
     clearRouter: clearRouter,
-  }));
-  const [result, setResult] = useState<FilterResult>({});
+  }))
+  const [result, setResult] = useState<FilterResult>({})
 
   const onChange = (item: FilterOptionResp, type: string) => {
-    clearRouter();
-    let data: { [key: string]: FilterOptionResp } = {};
-    data[type] = item;
+    console.log(type)
 
-    setResult({ ...result, ...data });
-  };
+    clearRouter()
+    let data: { [key: string]: FilterOptionResp[] | FilterOptionResp } = {}
+    if (type === 'categoryId') {
+      if (result.categoryId) {
+        data[type] = [...result.categoryId, item]
+      } else {
+        data[type] = [item]
+      }
+    } else {
+      data[type] = item
+    }
+    console.log({ ...result, ...data })
+    // Array.from(new Set(data))
+    // setResult({ ...result, ...data })
+    setResult((props) => {
+      return { ...props, ...data }
+    })
+  }
 
   useEffect(() => {
     props.onChange(result, {
-      brandId: result.brand?.id,
-      districtId: result.region?.id,
-      modelId: result.model?.id,
-      partsId: result.part?.id,
-      productCategoryId: result.category?.id,
-      qualityId: result.quality?.id,
-      industryId: result.industryId?.id,
-      appTypeId: result.appTypeId?.id,
-      categoryId: result.categoryId?.id,
-    });
-  }, [result]);
+      // brandId: result.brand?.id,
+      // districtId: result.region?.id,
+      // modelId: result.model?.id,
+      // partsId: result.part?.id,
+      // productCategoryId: result.category?.id,
+      // qualityId: result.quality?.id,
+      // industryId: result.industryId?.id,
+      // appTypeId: result.appTypeId?.id,
+      categoryId: result.categoryId,
+      provinceId: result.provinceId?.id,
+    })
+  }, [result])
 
-  useEffect(() => {
-    let queryVal = JSON.parse(JSON.stringify(router.query));
+  const clearRouter = () => {
     if (Object.keys(router.query).length) {
-      for (const key in queryVal) {
-        if (idArr.includes(key)) {
-          onChange(
-            { id: queryVal[key], name: nameArr[key].typeName + queryVal.name },
-            nameArr[key].typeObj
-          );
-        }
-      }
+      router.query = {}
+      router.replace(router.pathname)
     }
-  }, [router]);
+  }
+  const onDel = (key: string | number) => {
+    clearRouter()
+    console.log(key)
 
-  const clearRouter = () => {
-    if (Object.keys(router.query).length) {
-      router.query = {};
-      router.replace(router.pathname);
+    if (Object.prototype.toString.call(key) === '[object String]') {
+      //@ts-ignore
+      delete result[key]
+    } else {
+      if (result.categoryId?.length! === 1) {
+        result.categoryId = undefined
+      } else if (result.categoryId?.length! >= 2) {
+        result.categoryId?.map((item, index) => {
+          if (item.id === key) {
+            result.categoryId?.splice(index, 1)
+          }
+        })
+      }
     }
-  };
-  const onDel = (key: string) => {
-    clearRouter();
-    //@ts-ignore
-    delete result[key];
     setResult({
       ...result,
-    });
-  };
+    })
+  }
+  const routerList = [
+    '/jobServices',
+    '/equipmentLeasing',
+    '/flyingHandService',
+    '/mall',
+  ]
+  const [typeInfo, setTypeInfo] = useState<Array<TypesResp> | null>()
+  useEffect(() => {
+    if (routerList.indexOf(router.pathname) > -1) {
+      ;(async () => {
+        const res = await api.infoByType({
+          type: routerList.indexOf(router.pathname) + 1,
+        })
+        setTypeInfo(res.result)
+        //首页跳转自定筛选选中
+        let queryVal = JSON.parse(JSON.stringify(router.query))
+        if (Object.keys(router.query).length) {
+          //获取类型的id
+          const idOfType = res.result
+            ?.map((item) => item.categoriesInfoListDTO)
+            .flat()
+            .filter(
+              (item) => item && item.id === Number(queryVal['categoryId'])
+            )[0]?.directoryId
+          //获取类型的名称然后拼接
+          const TypeName = res.result?.filter(
+            (item) => item.directoryId === idOfType
+          )[0]?.name
+
+          onChange(
+            {
+              id: Number(queryVal['categoryId']),
+              name: `${
+                TypeName ? TypeName + '：' + queryVal.name : queryVal.name
+              }`,
+            },
+            'categoryId'
+          )
+        }
+      })()
+    }
+  }, [router])
+
   return (
     <>
-      {props.types.includes("地域") && (
+      {props.types.includes('地域') && (
         <div
           className={styles.filterWrap}
           style={{
@@ -187,68 +254,78 @@ const Filter = (props: Props, ref: Ref<any>) => {
           }}
         >
           <RegionItem
-            onChange={(item: FilterOptionResp) => onChange(item, "region")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'provinceId')}
           ></RegionItem>
         </div>
       )}
       <div className={styles.filterWrap}>
-        {props.types.includes("品牌") && (
+        {/* {props.types.includes('品牌') && (
           <BrandItem
-            onChange={(item: FilterOptionResp) => onChange(item, "brand")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'brand')}
           ></BrandItem>
         )}
-        {props.types.includes("设备品牌") && (
+        {props.types.includes('设备品牌') && (
           <DeviceBrand
-            onChange={(item: FilterOptionResp) => onChange(item, "brand")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'brand')}
           ></DeviceBrand>
         )}
-        {props.types.includes("类目") && (
+        {props.types.includes('类目') && (
           <CategoryItem
-            onChange={(item: FilterOptionResp) => onChange(item, "category")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'category')}
           ></CategoryItem>
         )}
-        {props.types.includes("设备类目") && (
+        {props.types.includes('设备类目') && (
           <Category
-            onChange={(item: FilterOptionResp) => onChange(item, "categoryId")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'categoryId')}
           ></Category>
         )}
-        {props.types.includes("部件") && (
+        {props.types.includes('部件') && (
           <PartItem
-            onChange={(item: FilterOptionResp) => onChange(item, "part")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'part')}
           ></PartItem>
         )}
-        {props.types.includes("型号") && (
+        {props.types.includes('型号') && (
           <ModelItem
-            onChange={(item: FilterOptionResp) => onChange(item, "model")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'model')}
           ></ModelItem>
         )}
-        {props.types.includes("设备型号") && (
+        {props.types.includes('设备型号') && (
           <DeviceModel
-            onChange={(item: FilterOptionResp) => onChange(item, "model")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'model')}
           ></DeviceModel>
         )}
-        {props.types.includes("成色") && (
+        {props.types.includes('成色') && (
           <QualityItem
-            onChange={(item: FilterOptionResp) => onChange(item, "quality")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'quality')}
           ></QualityItem>
         )}
-        {props.types.includes("行业") && (
+        {props.types.includes('行业') && (
           <Industry
-            onChange={(item: FilterOptionResp) => onChange(item, "industryId")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'industryId')}
           ></Industry>
         )}
-        {props.types.includes("应用") && (
+        {props.types.includes('应用') && (
           <AppType
-            onChange={(item: FilterOptionResp) => onChange(item, "appTypeId")}
+            onChange={(item: FilterOptionResp) => onChange(item, 'appTypeId')}
           ></AppType>
-        )}
+        )} */}
 
+        {typeInfo?.length &&
+          typeInfo?.map((item) => (
+            <TypeInfo
+              typeName={item.name}
+              dataValue={item.categoriesInfoListDTO}
+              onChange={(item: FilterOptionResp) =>
+                onChange(item, 'categoryId')
+              }
+            ></TypeInfo>
+          ))}
         {props.showResultItem && (
           <ResultItem data={result} onDel={onDel}></ResultItem>
         )}
       </div>
     </>
-  );
-};
+  )
+}
 
-export default forwardRef(Filter);
+export default forwardRef(Filter)

pages/equipmentLeasing/detail/[id].page.tsx

@@ -52,12 +52,10 @@ export default function EquipmentLeasingDetail() {
       api
         .listDetailDeviceInfo({
           goodsId: id,
+          type: 1,
         })
         .then((res) => {
           setDetail(res.result || null)
-          console.log(
-            res.result?.goodsSpec.map((item) => item.productSpecList).flat()
-          )
           const wareList = res.result?.goodsSpec.map(
             (item) => item.productSpecList
           )
@@ -70,6 +68,7 @@ export default function EquipmentLeasingDetail() {
   }, [id])
 
   //租赁弹框
+  const [visible, setVisible] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalDateOpen, setIsModalDateOpen] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -77,7 +76,7 @@ export default function EquipmentLeasingDetail() {
   const [form] = Form.useForm()
   const [formDate] = Form.useForm()
   const tagsData = [
-    { label: '3-7天', disable: false },
+    { label: '1-7天', disable: false },
     { label: '8-15天', disable: false },
     { label: '16-30天', disable: false },
     { label: '30天以上', disable: false },
@@ -92,7 +91,7 @@ export default function EquipmentLeasingDetail() {
       if (wareSkuList?.length) {
         setSelectedTags(wareSkuList[0].id)
         form.setFieldValue('id', wareSkuList[0].id)
-        setSelectedTagsData('3-7天')
+        setSelectedTagsData('1-7天')
         form.setFieldValue('date', '3-7天')
       }
     } else {
@@ -152,7 +151,6 @@ export default function EquipmentLeasingDetail() {
       const nextWareSkuList = checked
         ? tag
         : wareSkuList?.filter((t) => t.id !== tag)[0].id
-      console.log('You are interested in: ', nextWareSkuList)
       setSelectedTags(nextWareSkuList)
       form.setFieldValue('id', tag)
     }
@@ -167,7 +165,6 @@ export default function EquipmentLeasingDetail() {
       const nextSelectedTags = checked
         ? tag
         : tagsData.filter((t) => t.label !== tag)[0].label
-      console.log('You are interested in: ', nextSelectedTags)
       setSelectedTagsData(nextSelectedTags)
       form.setFieldValue('date', tag)
     }
@@ -274,6 +271,7 @@ export default function EquipmentLeasingDetail() {
             onOk={handleOk}
             onCancel={handleCancel}
             getContainer={false}
+            maskClosable={false}
             footer={[
               <Button
                 style={{ width: '100%', height: 44 }}
@@ -287,11 +285,29 @@ export default function EquipmentLeasingDetail() {
             ]}
           >
             <div className="title">
-              <div className="left"></div>
+              <div className="left">
+                <AImage
+                  preview={{ visible: false }}
+                  src={detail?.images[0].imgUrl}
+                  onClick={() => setVisible(true)}
+                />
+                <div style={{ display: 'none' }}>
+                  <AImage.PreviewGroup
+                    preview={{
+                      visible,
+                      onVisibleChange: (vis) => setVisible(vis),
+                    }}
+                  >
+                    {detail?.images.map((item) => (
+                      <AImage src={item.imgUrl} />
+                    ))}
+                  </AImage.PreviewGroup>
+                </div>
+              </div>
               <div className="right">
                 <div className="top">
                   <span className="tag">¥</span>
-                  <span className="money">{detail?.price}</span>
+                  <span className="money">{detail?.price || 0}</span>
                   <span className="unit">/天</span>
                 </div>
                 <div className="bottom">渠道免押金</div>
@@ -301,7 +317,7 @@ export default function EquipmentLeasingDetail() {
               form={form}
               layout="vertical"
               name="application"
-              initialValues={{ modifier: 'public' }}
+              initialValues={{ num: 1 }}
               className="form-data"
             >
               <Form.Item
@@ -349,16 +365,10 @@ export default function EquipmentLeasingDetail() {
               <div className="num-box">
                 <div className="num-left">
                   <div className="label">租赁数量</div>
-                  <div className="inventory">库存9件</div>
                 </div>
                 <div className="num-right">
                   <Form.Item style={{ flex: 1, marginRight: 16 }} name="num">
-                    <InputNumber
-                      min={1}
-                      max={10}
-                      defaultValue={1}
-                      onChange={onChangeNum}
-                    />
+                    <InputNumber min={1} max={10} onChange={onChangeNum} />
                   </Form.Item>
                 </div>
               </div>
@@ -371,6 +381,7 @@ export default function EquipmentLeasingDetail() {
             onOk={handleOkDate}
             onCancel={handleCancel}
             getContainer={false}
+            maskClosable={false}
             width={420}
             footer={[
               <Button
@@ -412,8 +423,8 @@ export default function EquipmentLeasingDetail() {
             <div className="bottom-item">
               <div className="label">租金合计</div>
               <div className="price">
-                <div className="left">¥700</div>
-                <div className="right">(日均175)</div>
+                <div className="left">¥{detail?.price! * days! || 0}</div>
+                {/* <div className="right">(日均175)</div> */}
               </div>
             </div>
           </Modal>
@@ -424,6 +435,9 @@ export default function EquipmentLeasingDetail() {
           shopDetail={shopDetail}
           days={days}
           detailData={detail}
+          wareSkuList={wareSkuList?.filter(
+            (item) => item.id === form.getFieldValue('id')
+          )}
         />
       )}
     </Layout>

pages/equipmentLeasing/detail/api/index.tsx

@@ -2,6 +2,11 @@ import request, { Response } from '~/api/request'
 
 export interface GetWebDeviceDetailParams {
   goodsId: number
+  type: 1
+}
+export interface GetLeaseGoodsParams {
+  leaseTerm: number //租赁时限：（输入0：1-7天、输入1：8-15天、输入2：16-30天、输入3：30天以上）
+  productSpecId: number
 }
 
 export interface WareImgsType {
@@ -9,7 +14,20 @@ export interface WareImgsType {
   imgUrl: string
   imgType: number
 }
+export interface PriceType {
+  id: number
+  cooperationTag: number
+  price: number
+  productSpecId: number
+  leaseTerm: number
+}
 
+export interface GetLeaseGoodsResult {
+  productSpecId: number
+  type: number | null
+  leaseTerm: number
+  specPrice: PriceType
+}
 export interface GetWebDeviceDetailResult {
   id: number
   images: {
@@ -85,4 +103,10 @@ export default {
   ): Promise<Response<number>> => {
     return request('/pms/appDevice/update', 'post', params)
   },
+  //web-设备租赁-详情-获取设备商品规格价格详情
+  GoodsPriceDetail: (
+    params: GetLeaseGoodsParams
+  ): Promise<Response<GetLeaseGoodsResult>> => {
+    return request('/pms/product/mall/getLeaseGoodsPriceDetail', 'get', params)
+  },
 }

pages/equipmentLeasing/detail/components/orderForGoods/api/index.tsx

@@ -40,9 +40,10 @@ export interface UserAddress {
   type: number
 }
 
-export interface GetWebDeviceWareSkuById {
+export interface GetOrderForGoods {
   balance: number
   nickName: string
+  orderNo: string
 }
 
 export default {
@@ -53,7 +54,13 @@ export default {
   //web-设备租赁-下单
   FeignAddLease: (
     params: GetWebDeviceDetailParams
-  ): Promise<Response<GetWebDeviceWareSkuById[]>> => {
-    return request('/pms/appDevice/listWareSkuById', 'post', params)
+  ): Promise<Response<GetOrderForGoods>> => {
+    return request('/oms/RentalOrders/feignAddLease', 'post', params)
+  },
+  //web-设备租赁-订单支付
+  OrderPayment: (params: {
+    orderNo: string
+  }): Promise<Response<GetOrderForGoods>> => {
+    return request(`/payment/repocash/orderPayment`, 'get', params)
   },
 }

pages/equipmentLeasing/detail/components/orderForGoods/index.tsx

-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { OrderForGoodsBox } from './styled'
 import type { FormInstance, RadioChangeEvent } from 'antd'
-import { Button, Radio, Space, Input, message } from 'antd'
-import api, { UserAddress } from './api'
+import { Button, Radio, Space, Input, message, Modal, Image } from 'antd'
+import api, { UserAddress, GetOrderForGoods } from './api'
 import moment from 'moment'
 import { ShopDetail } from '../../[id].page'
-import { GetWebDeviceDetailResult } from '../../api'
+import { GetWebDeviceDetailResult, GetWebDeviceWareSkuById } from '../../api'
+import { UserContext } from '~/lib/userProvider'
 const { TextArea } = Input
 
 interface PropsBox {
@@ -13,14 +14,17 @@ interface PropsBox {
   detailData?: GetWebDeviceDetailResult | null
   days?: number
   shopDetail?: ShopDetail
+  wareSkuList?: GetWebDeviceWareSkuById[]
 }
 
 export default function OrderForGoods(props: PropsBox) {
-  const { setIsorderForGoods, shopDetail, days, detailData } = props
+  const { setIsorderForGoods, shopDetail, days, detailData, wareSkuList } =
+    props
   const [value, setValue] = useState(1)
   const [areaValue, setAreaValue] = useState<string>()
   const [list, setList] = useState<Array<UserAddress> | null>()
   const [detail, setDetail] = useState<ShopDetail>()
+
   const onChange = (e: RadioChangeEvent) => {
     console.log('radio checked', e.target.value)
     setValue(e.target.value)
@@ -29,20 +33,10 @@ export default function OrderForGoods(props: PropsBox) {
     setValue(index)
   }
   const detailSumbit = () => {
-    message.success('提交成功')
-    console.log(shopDetail)
-    console.log(list![value])
-    console.log(areaValue)
-    console.log(detailData)
-
-    console.log(list![value].takeAddress)
-    console.log(list![value].takeRegion)
-    console.log(list![value].takeName)
-    console.log(Number(list![value].takePhone))
-
-    if (detailData && shopDetail && list) {
+    if (detailData && shopDetail && list && wareSkuList) {
       const pushList = {
-        actualPay: shopDetail.num * detailData.price!,
+        // actualPay: shopDetail.num * detailData.price!,
+        actualPay: 100,
         deposit: 0,
         endDate: moment(new Date(shopDetail.dateDetail[1])).format(
           'YYYY-MM-DD'
@@ -54,12 +48,14 @@ export default function OrderForGoods(props: PropsBox) {
           takeName: list[value].takeName,
           takePhone: Number(list[value].takePhone),
         },
-        rentPrice: shopDetail.num * detailData.price!,
-        returnDate: moment(new Date(shopDetail.dateDetail[1])).format(
-          'YYYY-MM-DD'
-        ),
-        shouldPay: shopDetail.num * detailData.price!,
-        specsId: shopDetail.id,
+        // rentPrice: shopDetail.num * detailData.price!,
+        rentPrice: 100,
+        returnDate: moment(
+          new Date(shopDetail.dateDetail[1]).getTime() + 864e5
+        ).format('YYYY-MM-DD'),
+        // shouldPay: shopDetail.num * detailData.price!,
+        shouldPay: 100,
+        specsId: wareSkuList[0].productSpec,
         startDate: moment(new Date(shopDetail.dateDetail[0]!)).format(
           'YYYY-MM-DD'
         ),
@@ -73,10 +69,15 @@ export default function OrderForGoods(props: PropsBox) {
       }
 
       api.FeignAddLease(pushList).then((res) => {
-        console.log(res)
+        if (res.code === '200') {
+          message.success('提交成功')
+          setPaymentDetail(res.result)
+          setIsPaymentOpen(true)
+        } else {
+          message.error(res.message)
+        }
       })
     }
-    // setIsorderForGoods(false)
   }
 
   useEffect(() => {
@@ -100,6 +101,39 @@ export default function OrderForGoods(props: PropsBox) {
       setDetail(shopDetail)
     }
   }, [])
+
+  //图片预览
+  const [visible, setVisible] = useState(false)
+
+  //付款
+  const { userInfo } = useContext(UserContext)
+  const [loading, setLoading] = useState(false)
+  const [isPaymentOpen, setIsPaymentOpen] = useState(false)
+  const [paymentDetail, setPaymentDetail] = useState<GetOrderForGoods | null>()
+  const handleCancel = () => {
+    setIsPaymentOpen(false)
+  }
+  const handleOkPayment = () => {
+    setLoading(true)
+    if (paymentDetail?.orderNo) {
+      const date = new FormData()
+      api.OrderPayment({ orderNo: paymentDetail?.orderNo }).then((res) => {
+        if (res.code === '200') {
+          message.success('付款成功')
+          setLoading(false)
+          setIsorderForGoods(false)
+          handleCancel()
+        } else {
+          message.error(res.message)
+          setLoading(false)
+        }
+      })
+    } else {
+      message.error('出错了')
+      setLoading(false)
+    }
+  }
+
   return (
     <OrderForGoodsBox>
       <div className="address">
@@ -162,21 +196,33 @@ export default function OrderForGoods(props: PropsBox) {
           </div>
           <div className="table-body">
             <div className="body-item article" style={{ width: 290 }}>
-              <div className="image"></div>
-              <div className="right">
-                <div className="top">
-                  智多星航电版智多星航电版智多星航电版智多
-                </div>
-                <div className="bottom">
-                  商品简介商品简介商品简介商品简介商品简介
+              <div className="image">
+                <Image
+                  preview={{ visible: false }}
+                  src={wareSkuList![0].specImage}
+                  onClick={() => setVisible(true)}
+                />
+                <div style={{ display: 'none' }}>
+                  <Image.PreviewGroup
+                    preview={{
+                      visible,
+                      onVisibleChange: (vis) => setVisible(vis),
+                    }}
+                  >
+                    <Image src={wareSkuList![0].specImage} />
+                  </Image.PreviewGroup>
                 </div>
               </div>
+              <div className="right">
+                <div className="top">{wareSkuList![0].specName}</div>
+                <div className="bottom">{wareSkuList![0].versionDesc}</div>
+              </div>
             </div>
             <div className="body-item" style={{ width: 130 }}>
-              800.00/天
+              {detailData?.price || 0}
             </div>
             <div className="body-item" style={{ width: 130 }}>
-              1
+              {shopDetail?.num || 1}
             </div>
             <div className="body-item lease-term" style={{ width: 300 }}>
               {moment(new Date(shopDetail?.dateDetail[0]!)).format(
@@ -188,7 +234,7 @@ export default function OrderForGoods(props: PropsBox) {
               )}
             </div>
             <div className="body-item total-price" style={{ width: 135 }}>
-              800.00
+              {detailData?.price! * shopDetail?.num! || 0}
             </div>
           </div>
         </div>
@@ -210,14 +256,14 @@ export default function OrderForGoods(props: PropsBox) {
               <div className="label">运费：</div>
               <div className="value">邮寄到付,由客户自己承担</div>
             </div>
-            <div className="price">200.00</div>
+            <div className="price">0.00</div>
           </div>
           <div className="bottom">
             <div className="font">
               <div className="label">押金：</div>
               <div className="value">渠道商可免押金</div>
             </div>
-            <div className="price">1000.00</div>
+            <div className="price">0.00</div>
           </div>
         </div>
       </div>
@@ -230,9 +276,9 @@ export default function OrderForGoods(props: PropsBox) {
             </div>
             <div className="bottom">
               <div className="value">寄送至</div>
-              <div className="value-content">
-                广东省深圳市南山区国际创谷6栋国际创谷6
-              </div>
+              {list ? (
+                <div className="value-content">{list![value].takeAddress}</div>
+              ) : null}
             </div>
           </div>
           <div className="detail-sumbit">
@@ -242,6 +288,31 @@ export default function OrderForGoods(props: PropsBox) {
           </div>
         </div>
       </div>
+
+      <Modal
+        wrapClassName="Payment"
+        open={isPaymentOpen}
+        onOk={handleOkPayment}
+        onCancel={handleCancel}
+        getContainer={false}
+        maskClosable={false}
+        width={420}
+        footer={[
+          <Button
+            style={{ width: '100%', height: 44 }}
+            key="submit"
+            type="primary"
+            loading={loading}
+            onClick={handleOkPayment}
+          >
+            立即付款
+          </Button>,
+        ]}
+      >
+        <div className="title">￥{detailData?.price! * days!}</div>
+        <div>云享飞账号： {userInfo?.uid}</div>
+        <div>付款方式： 可用(￥{paymentDetail?.balance})</div>
+      </Modal>
     </OrderForGoodsBox>
   )
 }

pages/equipmentLeasing/detail/components/orderForGoods/styled.tsx

@@ -300,4 +300,13 @@ export const OrderForGoodsBox = styled.div`
       }
     }
   }
+  .Payment {
+    .title {
+      text-align: center;
+      font-size: 26px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #ff552d;
+    }
+  }
 `

pages/equipmentLeasing/detail/styled.tsx

@@ -234,12 +234,6 @@ export const Box = styled.div`
             color: #121212;
             margin-right: 5px;
           }
-          .inventory {
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #acacac;
-          }
         }
       }
     }

pages/equipmentLeasing/index.page.tsx

@@ -19,7 +19,6 @@ type Props = {}
 
 export default function EquipmentLeasing(props: Props) {
   const router = useRouter()
-  const filter = useRef<any>()
   const [productList, setProductList] = useState(
     Array<{ element: JSX.Element }>
   )
@@ -85,12 +84,9 @@ export default function EquipmentLeasing(props: Props) {
   //端口列表请求
   useEffect(() => {
     let queryVal = JSON.parse(JSON.stringify(router.query))
-    const idArr = filter.current.idArr
     let rs
-    for (const key in queryVal) {
-      if (idArr.includes(key)) {
-        rs = { [key]: router.query[key] }
-      }
+    if (Object.keys(queryVal).length) {
+      rs = { categoryId: [Number(queryVal['categoryId'])] }
     }
     api
       .listPageDeviceInfo(
@@ -118,6 +114,9 @@ export default function EquipmentLeasing(props: Props) {
     adapterFilterResult: AdapterResult
   ) => {
     console.log('filterResult', filterResult, adapterFilterResult)
+    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
+      (item) => item.id
+    )
     setFilterResult(adapterFilterResult)
   }
 
@@ -133,13 +132,8 @@ export default function EquipmentLeasing(props: Props) {
 
   useEffect(() => {
     let queryVal = JSON.parse(JSON.stringify(router.query))
-    if (router.query) {
-      const idArr = filter.current.idArr
-      for (const key in queryVal) {
-        if (idArr.includes(key)) {
-          setFilterResult({ [key]: router.query[key] })
-        }
-      }
+    if (Object.keys(router.query).length) {
+      setFilterResult({ categoryId: [Number(queryVal['categoryId'])] })
     }
   }, [router])
 
@@ -150,7 +144,6 @@ export default function EquipmentLeasing(props: Props) {
           types={['地域', '设备品牌', '设备型号']}
           showResultItem
           onChange={onFilterChange}
-          ref={filter}
         ></Filter>
         <div style={{ paddingTop: 13 }}>
           <ContentBox

pages/flyingHandService/api/index.tsx

-import request, { Response } from '~/api/request';
-
+import request, { Response } from '~/api/request'
+import { TypesResp } from '~/components/filter/api'
 export interface ListPageFlyingInfoParams {
-  pageNo: number,
-  pageSize: number,
-  flightSkillsId?:number,
-  licenseId?:number,
-  regionId?:number
+  pageNo: number
+  pageSize: number
+  flightSkillsId?: number
+  licenseId?: number
+  regionId?: number
 }
 
 export interface Flying {
-  id: number,
-  price: number,
-  supplierName: string,
-  curriculumName: string,
-  free: 0 | 1,
-  curriculumDesc: string,
+  id: number
+  price: number
+  supplierName: string
+  curriculumName: string
+  free: 0 | 1
+  curriculumDesc: string
   videoUrl: string
 }
 
 export interface ListPageFlyingInfoResp {
-  pageNo: 1,
-  pageSize: 10,
-  list: Array<Flying>,
-  totalCount: 0,
+  pageNo: 1
+  pageSize: 10
+  list: Array<Flying>
+  totalCount: 0
   totalPage: 0
 }
 
-
 export interface SkillsType {
-  type: string;
-  id: number,
-  skillsName: string,
-  label:string | number,
-  value:string | number
+  type: string
+  id: number
+  skillsName: string
+  label: string | number
+  value: string | number
 }
 
 export interface RegionResp {
-  childInfo: RegionResp[] | null,
-  id: number,
-  level: number,
-  name: string,
+  childInfo: RegionResp[] | null
+  id: number
+  level: number
+  name: string
   pid: number
 }
 
 export interface PilotRegistrationParams {
-  city?: number,
-  drivingLicense?: number,
-  industryAppAuth?: Array<number>,
-  province?: number,
-  remark?: string,
-  telephone?: string,
-  uavLicenseLevelOne?: number,
+  city?: number
+  drivingLicense?: number
+  industryAppAuth?: Array<number>
+  province?: number
+  remark?: string
+  telephone?: string
+  uavLicenseLevelOne?: number
   uavLicenseLevelTwo?: number
 }
 
 export default {
-  //web-作业服务-分页
-  listPageJobServicesInfo: (params: ListPageFlyingInfoParams): Promise<Response<ListPageFlyingInfoResp>> => {
-    return request('/release/curriculum/queryCurriculumInfoList', 'post', params)
+  //web-飞手培训-分页
+  listPageJobServicesInfo: (
+    params: ListPageFlyingInfoParams
+  ): Promise<Response<ListPageFlyingInfoResp>> => {
+    return request(
+      '/release/curriculum/queryCurriculumInfoList',
+      'post',
+      params
+    )
   },
   region: (): Promise<Response<Array<RegionResp>>> => {
-    return request('/pms/webDevice/getSecondDistrictInfo');
+    return request('/pms/webDevice/getSecondDistrictInfo')
   },
   PilotLicense: (): Promise<Response<Array<RegionResp>>> => {
-    return request('/release/curriculum/getDronePilotLicense');
+    return request('/release/curriculum/getDronePilotLicense')
   },
   IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
-    return request('/release/curriculum/getIndustryFlightSkills');
+    return request('/release/curriculum/getIndustryFlightSkills')
   },
-  PilotRegistrations: (params:PilotRegistrationParams): Promise<Response<Array<SkillsType>>> => {
-    return request('/release/curriculum/pilotRegistration',"post",params);
+  PilotRegistrations: (
+    params: PilotRegistrationParams
+  ): Promise<Response<Array<SkillsType>>> => {
+    return request('/release/curriculum/pilotRegistration', 'post', params)
   },
-}
\ No newline at end of file
+  FlightSkills: (params: { type: 3 }): Promise<Response<Array<TypesResp>>> => {
+    return request('/pms/classify/queryCategoryInfoByType', 'get', params)
+  },
+}

pages/flyingHandService/index.page.tsx

@@ -20,10 +20,10 @@ import { UserContext } from '~/lib/userProvider'
 import { phoneNumber } from '~/lib/validateUtils'
 import api, { Flying, RegionResp, SkillsType } from './api'
 import { Box } from './styled'
+import { TypesResp } from '~/components/filter/api'
 interface FilterInfoParams {
-  regionId?: number
-  flightSkillsId?: number
-  licenseId?: number
+  provinceId?: number
+  categoryId?: any[]
 }
 
 export default function FlyingHandService() {
@@ -45,8 +45,10 @@ export default function FlyingHandService() {
   )
   const [skills, setSkills] = useState(Array<RegionResp>)
   const [skillsDefault, setSkillsDefault] = useState<Array<number>>()
-  const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>)
+  const [flightSkillsList, setFlightSkillsList] = useState<Array<SkillsType>>()
   const [flightDefault, setFlightDefault] = useState<number | null>()
+  const [selectOption, setSelectOption] = useState<Array<TypesResp> | null>()
+  const [selectDefault, setSelectDefault] = useState<number | null>()
   const leftDom = (item: Flying) => {
     return (
       <div
@@ -153,36 +155,59 @@ export default function FlyingHandService() {
     }
   }
 
-  const onProvinceChange = (value: number) => {
+  const onSelectChange = (value: number, item: TypesResp) => {
     clearRouter()
+    console.log(value)
+
     if (value) {
-      setFlightDefault(value)
+      setSelectDefault(value)
     } else {
-      setFlightDefault(null)
+      setSelectDefault(undefined)
     }
     setFilterParams((props) => {
+      if (props?.categoryId && value) {
+        return {
+          ...props,
+          categoryId: [...props.categoryId, Number(value)],
+        }
+      }
       return {
         ...props,
-        licenseId: Number(value),
+        categoryId: value ? [Number(value)] : undefined,
       }
     })
   }
 
-  const onChange = (value: any) => {
+  const onProvinceChange = (value: number) => {
     clearRouter()
     if (value) {
-      setSkillsDefault([value])
+      setFlightDefault(value)
     } else {
-      setSkillsDefault([])
+      setFlightDefault(undefined)
     }
     setFilterParams((props) => {
       return {
         ...props,
-        flightSkillsId: (value && value[value.length - 1]) || undefined,
+        licenseId: Number(value),
       }
     })
   }
 
+  // const onChange = (value: any) => {
+  //   clearRouter()
+  //   if (value) {
+  //     setSkillsDefault([value])
+  //   } else {
+  //     setSkillsDefault([])
+  //   }
+  //   setFilterParams((props) => {
+  //     return {
+  //       ...props,
+  //       flightSkillsId: (value && value[value.length - 1]) || undefined,
+  //     }
+  //   })
+  // }
+
   const onChangeRegion = (value: any) => {
     clearRouter()
     // setFilterParams((props) => {
@@ -194,7 +219,7 @@ export default function FlyingHandService() {
     setFilterParams((props) => {
       return {
         ...props,
-        regionId: value || undefined,
+        provinceId: value || undefined,
       }
     })
   }
@@ -208,16 +233,21 @@ export default function FlyingHandService() {
     api.region().then((res) => {
       setSecondDistrictInfo(res.result || [])
     })
-    api.PilotLicense().then((res) => {
-      setSkills(res.result || [])
-    })
-    api.IndustryFlightSkills().then((res) => {
-      const list = res.result?.map((item) => {
-        item.label = item.skillsName
-        item.value = item.id
-        return item
-      })
-      setFlightSkillsList(list || [])
+    // api.PilotLicense().then((res) => {
+    //   setSkills(res.result || [])
+    // })
+    // api.IndustryFlightSkills().then((res) => {
+    //   const list = res.result?.map((item) => {
+    //     item.label = item.skillsName
+    //     item.value = item.id
+    //     return item
+    //   })
+    //   setFlightSkillsList(list || [])
+    // })
+    api.FlightSkills({ type: 3 }).then((res) => {
+      console.log(res)
+
+      setSelectOption(res.result)
     })
   }, [])
 
@@ -324,7 +354,7 @@ export default function FlyingHandService() {
                 fieldNames={{ value: 'id', label: 'name' }}
                 allowClear
               />
-              <Cascader
+              {/* <Cascader
                 allowClear
                 placeholder="考证"
                 bordered={false}
@@ -339,19 +369,21 @@ export default function FlyingHandService() {
                 onChange={(value) => onChange(value)}
                 changeOnSelect
                 value={skillsDefault}
-              />
-              <Select
-                className="selectItem"
-                bordered={false}
-                popupMatchSelectWidth={false}
-                placeholder="技能"
-                size="large"
-                onChange={(value) => onProvinceChange(value)}
-                options={flightSkillsList}
-                fieldNames={{ value: 'id', label: 'skillsName' }}
-                allowClear
-                value={flightDefault}
-              />
+              /> */}
+              {selectOption?.map((item) => (
+                <Select
+                  key={item.directoryId}
+                  className="selectItem"
+                  bordered={false}
+                  popupMatchSelectWidth={false}
+                  placeholder={item.name}
+                  size="large"
+                  onChange={(value) => onSelectChange(value, item)}
+                  options={item.categoriesInfoListDTO}
+                  fieldNames={{ value: 'id', label: 'name' }}
+                  allowClear
+                />
+              ))}
             </Space>
           </div>
           <Button

pages/home/waterfallFlowBody/api/index.ts

-import request, { Response } from "~/api/request";
+import request, { Response } from '~/api/request'
 
 export interface AllType {
-  type?: string;
-  id?: number;
-  name?: string;
-  appName?: string;
-  createTime?: string;
-  industryIcon?: string;
-  shortName?: null;
-  industryType?: null;
-  propagate1?: string;
-  propagate2?: string;
-  image?: string;
-  video?: string;
-  newsTitle?: string;
-  newsAuthor?: string;
-  userAccountId?: number;
-  surfaceImg?: string;
-  newsContents?: string;
-  updateTime?: string | null;
-  tenderNewsId?: number;
-  tenderInfoNo?: string;
-  tenderContent?: string;
-  tenderPrice?: number;
-  apply?: number;
-  skillsName?: string;
+  categoryName: string
+  id: number
 }
 
 export interface FilterOptionResp {
-  type: string;
-  id: number;
-  name: string;
+  type: string
+  id: number
+  name: string
 }
 
 export interface RegionResp {
-  childInfo: RegionResp[] | null;
-  id: number;
-  level: number;
-  name: string;
-  pid: number;
+  childInfo: RegionResp[] | null
+  id: number
+  level: number
+  name: string
+  pid: number
 }
 
 export const equipmentLeasingApi = {
   deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/deviceBrand");
+    return request('/pms/webDevice/deviceBrand')
   },
   // deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
   //   return request("/pms/webDevice/category");
   // },
   deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/deviceModel");
+    return request('/pms/webDevice/deviceModel')
   },
-};
+}
 
 export interface AppType {
-  id: number;
-  name: string;
-  appName: string;
-  createTime: string;
-  type: string;
+  id: number
+  name: string
+  appName: string
+  createTime: string
+  type: string
 }
 
 export interface IndustryType {
-  id: number;
-  industryIcon: string;
-  name: string;
-  shortName: string;
-  industryType: string;
-  propagate1: string;
-  propagate2: string;
-  image: string;
-  video: string;
-  type: string;
-  appName: string;
+  id: number
+  industryIcon: string
+  name: string
+  shortName: string
+  industryType: string
+  propagate1: string
+  propagate2: string
+  image: string
+  video: string
+  type: string
+  appName: string
 }
 
 export const jobServicesApi = {
   listAllAppType: (): Promise<Response<Array<AppType>>> => {
-    return request("/release/work/listAllAppType");
+    return request('/release/work/listAllAppType')
   },
   listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
-    return request("/release/work/listAllIndustry");
+    return request('/release/work/listAllIndustry')
   },
-};
+}
 
 export const mallApi = {
   listAllBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/brand");
+    return request('/pms/webDevice/brand')
   },
   listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/category");
+    return request('/pms/webProductMall/category')
   },
   listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/parts");
+    return request('/pms/webProductMall/parts')
   },
   listAllModel: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webDevice/model");
+    return request('/pms/webDevice/model')
   },
   listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/quality");
+    return request('/pms/webProductMall/quality')
   },
-};
+}
 
 export interface SkillsType {
-  name: string;
-  type: string;
-  id: number;
-  skillsName: string;
-  licenseType:string
+  name: string
+  type: string
+  id: number
+  skillsName: string
+  licenseType: string
 }
 
 export const flightSkillsApi = {
   IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
-    return request("/release/curriculum/getIndustryFlightSkills");
+    return request('/release/curriculum/getIndustryFlightSkills')
   },
   InDronePilotLicense: (): Promise<Response<Array<SkillsType>>> => {
-    return request("/release/curriculum/getDronePilotLicense");
+    return request('/release/curriculum/getDronePilotLicense')
   },
-};
+}
 
 export interface NewsPageType {
-  id: number;
-  newsTitle: string;
-  newsAuthor: string;
-  userAccountId: number;
-  surfaceImg: string;
-  newsContents: string;
-  createTime: string;
-  updateTime: string | null;
+  id: number
+  newsTitle: string
+  newsAuthor: string
+  userAccountId: number
+  surfaceImg: string
+  newsContents: string
+  createTime: string
+  updateTime: string | null
 }
 
 export interface NewsTenderType {
-  id: number;
-  tenderNewsId: number;
-  tenderInfoNo: string;
-  tenderContent: string;
-  tenderPrice: number;
-  createTime: string;
-  apply: number;
+  id: number
+  tenderNewsId: number
+  tenderInfoNo: string
+  tenderContent: string
+  tenderPrice: number
+  createTime: string
+  apply: number
 }
 
 export interface ListPageNewsInfoResp {
-  pageNo: number;
-  pageSize: number;
-  list: Array<NewsPageType>;
-  totalCount: number;
-  totalPage: number;
+  pageNo: number
+  pageSize: number
+  list: Array<NewsPageType>
+  totalCount: number
+  totalPage: number
 }
 
 export interface ListTenderNewsInfoResp {
-  pageNo: number;
-  pageSize: number;
-  list: Array<NewsTenderType>;
-  totalCount: number;
-  totalPage: number;
+  pageNo: number
+  pageSize: number
+  list: Array<NewsTenderType>
+  totalCount: number
+  totalPage: number
 }
 
 interface ListPageNewsInfoParams {
-  pageNo: number;
-  pageSize: number;
-  cityCode?: number;
-  date?: string;
-  districtCode?: number;
-  provinceCode?: number;
+  pageNo: number
+  pageSize: number
+  cityCode?: number
+  date?: string
+  districtCode?: number
+  provinceCode?: number
 }
 
 interface ListTenderNewsInfoParams {
-  pageNo: number;
-  pageSize: number;
-  cityCode?: number;
-  date?: string;
-  districtCode?: number;
-  provinceCode?: number;
+  pageNo: number
+  pageSize: number
+  cityCode?: number
+  date?: string
+  districtCode?: number
+  provinceCode?: number
 }
 
-export interface TenderApplyType{
-  tenderInfoId: number,
-  tenderNewsId: number,
+export interface TenderApplyType {
+  tenderInfoId: number
+  tenderNewsId: number
   userAccountId: number
 }
 
@@ -185,16 +163,33 @@ export const listNewsApi = {
   listNewsPage: (
     params: ListPageNewsInfoParams
   ): Promise<Response<ListPageNewsInfoResp>> => {
-    return request("/release/industry-news/listNewsPage", "post", params);
+    return request('/release/industry-news/listNewsPage', 'post', params)
   },
   //招标列表
   listNewTenderInfo: (
     params: ListTenderNewsInfoParams
   ): Promise<Response<ListTenderNewsInfoResp>> => {
-    return request("/release/tender/listNewTenderInfo", "post", params);
+    return request('/release/tender/listNewTenderInfo', 'post', params)
   },
   //web-招标-合作申请提交
   tenderApply: (params: TenderApplyType): Promise<Response<number>> => {
     return request('/release/tender/apply', 'post', params)
-  }
+  },
+}
+
+export interface HomeCategoriesType {
+  type: 1 | 2 | 3 | 4
+}
+export interface ResHomeCategoriesType {
+  id: number
+  categoryName: string
+}
+
+export default {
+  //新闻列表
+  HomeCategories: (
+    params: HomeCategoriesType
+  ): Promise<Response<ResHomeCategoriesType>> => {
+    return request('/pms/product/mall/getPageHomeCategories', 'get', params)
+  },
 }

pages/home/waterfallFlowBody/index.tsx

@@ -7,7 +7,16 @@ import RotationChart from './components/rotationChart'
 import { Box } from './styled'
 
 import { UserContext } from '~/lib/userProvider'
-import { AllType, NewsPageType, NewsTenderType, equipmentLeasingApi, flightSkillsApi, jobServicesApi, listNewsApi, mallApi } from './api'
+import api, {
+  AllType,
+  NewsPageType,
+  NewsTenderType,
+  equipmentLeasingApi,
+  flightSkillsApi,
+  jobServicesApi,
+  listNewsApi,
+  mallApi,
+} from './api'
 
 interface ColumnsType {
   title: string
@@ -41,38 +50,54 @@ export default function WaterfallFlowBody() {
     '大家人寿',
     '农银人寿',
     '中信保城人寿',
-    '合众人寿'
+    '合众人寿',
+  ])
+  const [list2, setList2] = useState([
+    '天目将PAAS平台',
+    '天目将公安平台',
+    '天目将应急平台',
+    '天目将城管平台',
+    '天目将电力平台',
+    '天目将石油平台',
+    'SESP-U1无人机仿真软件',
+    '云享飞服务号',
+    '无人机商城',
+    '云飞手',
+    '云仓',
+    '云享飞',
+    '科比特智教',
   ])
-  const [list2, setList2] = useState(['天目将PAAS平台', '天目将公安平台', '天目将应急平台', '天目将城管平台', '天目将电力平台', '天目将石油平台', 'SESP-U1无人机仿真软件', '云享飞服务号', '无人机商城', '云飞手', '云仓', '云享飞', '科比特智教'])
 
   const columns = [
     {
       title: '无人机出租',
-      router: '/equipmentLeasing'
+      router: '/equipmentLeasing',
     },
     {
       title: '无人机销售',
-      router: '/mall'
+      router: '/mall',
     },
     {
       title: '无人机保险',
-      router: ''
+      router: '',
     },
     {
       title: '无人机培训',
-      router: 'flyingHandService'
+      router: 'flyingHandService',
     },
     {
       title: '无人机服务',
-      router: '/jobServices'
+      router: '/jobServices',
     },
     {
       title: '无人机工具软件',
-      router: ''
-    }
+      router: '',
+    },
   ]
 
-  const [leftDomList, setLeftDomList] = useState(Array<{ element: JSX.Element; type?: string }>)
+  const [leftDomList, setLeftDomList] = useState(
+    Array<{ element: JSX.Element; type?: string }>
+  )
 
   const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>()
   const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>()
@@ -80,106 +105,179 @@ export default function WaterfallFlowBody() {
   const { deviceBrand, deviceModel } = equipmentLeasingApi
   const eqApiTypeList = ['brandId', 'categoryId', 'modelId']
 
-  const { listAllModel, listAllBrand, listAllCategory, listAllParts, listAllQuality } = mallApi
-  const mallApiTypeList = ['brandId', 'productCategoryId', 'partsId', 'modelId', 'qualityId']
+  const {
+    listAllModel,
+    listAllBrand,
+    listAllCategory,
+    listAllParts,
+    listAllQuality,
+  } = mallApi
+  const mallApiTypeList = [
+    'brandId',
+    'productCategoryId',
+    'partsId',
+    'modelId',
+    'qualityId',
+  ]
   const { IndustryFlightSkills, InDronePilotLicense } = flightSkillsApi
   const flightApiTypeList = ['licenseId', 'flightSkillsId']
 
   const { listAllIndustry, listAllAppType } = jobServicesApi
   const jobApiTypeList = ['industryId', 'appTypeId']
 
-  const onMoreChange = (value: { value: string; label: number }, index: number, option: []) => {
+  const onMoreChange = (
+    value: { value: string; label: number },
+    index: number,
+    option: []
+  ) => {
     const [item] = option.filter((item: any) => item.name === value.value)
     routerPath(index, item)
   }
 
-  useEffect(() => {
-    ;(async () => {
-      let res1 = await Promise.all([deviceBrand(), deviceModel()])
-      let res2 = await Promise.all([listAllBrand(), listAllCategory(), listAllParts(), listAllModel(), listAllQuality()])
-      let res3 = await Promise.all([IndustryFlightSkills(), InDronePilotLicense()])
-      let res4 = await Promise.all([listAllIndustry(), listAllAppType()])
-      //  let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
-      //  let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
+  // useEffect(() => {
+  //   ;(async () => {
+  //     let res1 = await Promise.all([deviceBrand(), deviceModel()])
+  //     let res2 = await Promise.all([listAllBrand(), listAllCategory(), listAllParts(), listAllModel(), listAllQuality()])
+  //     let res3 = await Promise.all([IndustryFlightSkills(), InDronePilotLicense()])
+  //     let res4 = await Promise.all([listAllIndustry(), listAllAppType()])
+  //     //  let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
+  //     //  let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
 
-      const resValuelist1 = res1
-        .map((item, index) => {
-          if (item.code === '200') {
-            return item.result?.map(it => {
-              it.type = eqApiTypeList[index]
-              return it
-            })
-          }
-          return {}
-        })
-        .flat()
+  //     const resValuelist1 = res1
+  //       .map((item, index) => {
+  //         if (item.code === '200') {
+  //           return item.result?.map(it => {
+  //             it.type = eqApiTypeList[index]
+  //             return it
+  //           })
+  //         }
+  //         return {}
+  //       })
+  //       .flat()
 
-      const resValuelist2 = res2
-        .map((item, index) => {
-          if (item.code === '200') {
-            return item.result?.map(it => {
-              it.type = mallApiTypeList[index]
-              return it
-            })
-          }
-          return {}
-        })
-        .flat()
-      const resValuelist3 = res3
-        .map((item, index) => {
-          if (item.code === '200') {
-            return item.result?.map(it => {
-              it.type = flightApiTypeList[index]
-              it.name = it.name || it.skillsName || it.licenseType
-              return it
-            })
-          }
-          return {}
-        })
-        .flat()
-      const resValuelist4 = res4
-        .map((item, index) => {
-          if (item.code === '200') {
-            return item.result?.map(it => {
-              it.type = jobApiTypeList[index]
-              it.name = it.name || it.appName
-              return it
-            })
-          }
-          return {}
-        })
-        .flat()
+  //     const resValuelist2 = res2
+  //       .map((item, index) => {
+  //         if (item.code === '200') {
+  //           return item.result?.map(it => {
+  //             it.type = mallApiTypeList[index]
+  //             return it
+  //           })
+  //         }
+  //         return {}
+  //       })
+  //       .flat()
+  //     const resValuelist3 = res3
+  //       .map((item, index) => {
+  //         if (item.code === '200') {
+  //           return item.result?.map(it => {
+  //             it.type = flightApiTypeList[index]
+  //             it.name = it.name || it.skillsName || it.licenseType
+  //             return it
+  //           })
+  //         }
+  //         return {}
+  //       })
+  //       .flat()
+  //     const resValuelist4 = res4
+  //       .map((item, index) => {
+  //         if (item.code === '200') {
+  //           return item.result?.map(it => {
+  //             it.type = jobApiTypeList[index]
+  //             it.name = it.name || it.appName
+  //             return it
+  //           })
+  //         }
+  //         return {}
+  //       })
+  //       .flat()
 
-      let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 })
-      let res8 = await listNewsApi.listNewTenderInfo({
-        pageNo: 1,
-        pageSize: 6
-      })
-      const listValue: any = [resValuelist1, resValuelist2, [], resValuelist3, resValuelist4, []]
-      const listOption = JSON.parse(JSON.stringify(list)).map((item: string, index: number) => {
-        return { id: index, name: item, value: index }
-      })
-      const list2Option = JSON.parse(JSON.stringify(list2)).map((item: string, index: number) => {
-        return { id: index, name: item, value: index }
-      })
+  //     let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 })
+  //     let res8 = await listNewsApi.listNewTenderInfo({
+  //       pageNo: 1,
+  //       pageSize: 6
+  //     })
+  //     const listValue: any = [resValuelist1, resValuelist2, [], resValuelist3, resValuelist4, []]
+  //     const listOption = JSON.parse(JSON.stringify(list)).map((item: string, index: number) => {
+  //       return { id: index, name: item, value: index }
+  //     })
+  //     const list2Option = JSON.parse(JSON.stringify(list2)).map((item: string, index: number) => {
+  //       return { id: index, name: item, value: index }
+  //     })
+
+  //     const optionList = [resValuelist1, resValuelist2, listOption, resValuelist3, resValuelist4, list2Option]
+
+  //     setLeftDomList(
+  //       columns.map((item, index) => {
+  //         if (index < 3) {
+  //           return {
+  //             element: leftDom(item, index, listValue, optionList[index]),
+  //             type: 'left'
+  //           }
+  //         }
+  //         return {
+  //           element: leftDom(item, index, listValue, optionList[index]),
+  //           type: 'right'
+  //         }
+  //       })
+  //     )
 
-      const optionList = [resValuelist1, resValuelist2, listOption, resValuelist3, resValuelist4, list2Option]
+  //     setRightTopDomList(rightDom(res7.result?.list!))
+  //     setRightBottomDomList(rightDom2(res8.result?.list!))
+  //   })()
+  // }, [])
 
+  useEffect(() => {
+    ;(async () => {
+      const res1 = await api.HomeCategories({ type: 1 }) //无人机出租
+      const res4 = await api.HomeCategories({ type: 4 }) //无人机销售
+      const res2 = await api.HomeCategories({ type: 2 }) //无人机培训
+      const res3 = await api.HomeCategories({ type: 3 }) //无人机服务
+      console.log(res1, res2, res3, res4)
+      const listOption = JSON.parse(JSON.stringify(list)).map(
+        (item: string, index: number) => {
+          return { id: index, name: item, value: index }
+        }
+      )
+      const list2Option = JSON.parse(JSON.stringify(list2)).map(
+        (item: string, index: number) => {
+          return { id: index, name: item, value: index }
+        }
+      )
+      const optionList = [
+        res1.result,
+        res4.result,
+        listOption,
+        res2.result,
+        res3.result,
+        list2Option,
+      ]
+      const listValue: any = [
+        res1.result,
+        res4.result,
+        [],
+        res3.result,
+        res2.result,
+        [],
+      ]
       setLeftDomList(
         columns.map((item, index) => {
           if (index < 3) {
             return {
               element: leftDom(item, index, listValue, optionList[index]),
-              type: 'left'
+              type: 'left',
             }
           }
           return {
             element: leftDom(item, index, listValue, optionList[index]),
-            type: 'right'
+            type: 'right',
           }
         })
       )
-
+      let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 })
+      let res8 = await listNewsApi.listNewTenderInfo({
+        pageNo: 1,
+        pageSize: 6,
+      })
       setRightTopDomList(rightDom(res7.result?.list!))
       setRightBottomDomList(rightDom2(res8.result?.list!))
     })()
@@ -189,11 +287,14 @@ export default function WaterfallFlowBody() {
     if (item && (index === 0 || index === 1 || index === 3 || index === 4)) {
       router.push({
         pathname: columns[index].router,
-        query: { [item?.type!]: item?.id!, name: item?.name || item?.appName || item?.skillsName }
+        query: {
+          categoryId: item.id,
+          name: item.categoryName,
+        },
       })
     } else {
       router.push({
-        pathname: columns[index].router
+        pathname: columns[index].router,
       })
     }
   }
@@ -204,14 +305,14 @@ export default function WaterfallFlowBody() {
       let res = await listNewsApi.tenderApply({
         tenderInfoId: item.id,
         tenderNewsId: item.tenderNewsId,
-        userAccountId: userInfo.id
+        userAccountId: userInfo.id,
       })
       try {
         if (res.code === '200') {
           message.success('申请成功')
           let res8 = await listNewsApi.listNewTenderInfo({
             pageNo: 1,
-            pageSize: 6
+            pageSize: 6,
           })
           setRightBottomDomList(rightDom2(res8.result?.list!))
         } else {
@@ -225,7 +326,12 @@ export default function WaterfallFlowBody() {
     }
   }
 
-  const leftDom = (item: ColumnsType, index: number, resultList: Array<Array<AllType>>, option: []) => {
+  const leftDom = (
+    item: ColumnsType,
+    index: number,
+    resultList: Array<Array<AllType>>,
+    option: []
+  ) => {
     return (
       <div key={item.title} className="item">
         <div className="item-title">
@@ -239,13 +345,13 @@ export default function WaterfallFlowBody() {
               className="select-box"
               placeholder="筛选"
               labelInValue
-              onChange={value => onMoreChange(value, index, option)}
+              onChange={(value) => onMoreChange(value, index, option)}
               bordered={false}
               dropdownMatchSelectWidth={false}
               options={option}
               fieldNames={{
-                value: 'name',
-                label: 'name'
+                value: 'categoryName',
+                label: 'categoryName',
               }}
             />
           </div>
@@ -254,20 +360,38 @@ export default function WaterfallFlowBody() {
           <Space size={[15, 0]} wrap>
             {index === 2
               ? list.map((item, index) => (
-                  <div key={item} className={`item-bubble ${index === 0 || index === 1 || index === 2 ? 'active' : ''}`}>
+                  <div
+                    key={item}
+                    className={`item-bubble ${
+                      index === 0 || index === 1 || index === 2 ? 'active' : ''
+                    }`}
+                  >
                     {item}
                   </div>
                 ))
               : index === 5
               ? list2.map((item, index) => (
-                  <div key={item} className={`item-bubble ${index === 0 || index === 1 || index === 2 ? 'active' : ''}`}>
+                  <div
+                    key={item}
+                    className={`item-bubble ${
+                      index === 0 || index === 1 || index === 2 ? 'active' : ''
+                    }`}
+                  >
                     {item}
                   </div>
                 ))
               : resultList[index].map((item, indexer) => {
                   return (
-                    <div key={item?.name || item?.appName || item?.skillsName} className={`item-bubble ${indexer === 0 || indexer === 1 || indexer === 2 ? 'active' : ''}`} onClick={() => routerPath(index, item)}>
-                      {item?.name || item?.appName || item?.skillsName}
+                    <div
+                      key={item.categoryName}
+                      className={`item-bubble ${
+                        indexer === 0 || indexer === 1 || indexer === 2
+                          ? 'active'
+                          : ''
+                      }`}
+                      onClick={() => routerPath(index, item)}
+                    >
+                      {item.categoryName}
                     </div>
                   )
                 })}
@@ -282,14 +406,27 @@ export default function WaterfallFlowBody() {
     return (
       <div key={1009} className="right-box-item right-item">
         <div className="title">
-          <div className="title-label" onClick={() => router.push('/projectInfo')}>
+          <div
+            className="title-label"
+            onClick={() => router.push('/projectInfo')}
+          >
             行业新闻
           </div>
         </div>
         <div className="body">
           {list?.map((item, index) => (
-            <div key={item.id} className="body-item" onClick={() => router.push(`/projectInfo/newsArticle/${item.id}`)}>
-              <div className={`item-ranking ${index === 0 ? 'one' : ''} ${index === 1 ? 'two' : ''} ${index === 2 ? 'san' : ''}`}>{index + 1}</div>
+            <div
+              key={item.id}
+              className="body-item"
+              onClick={() => router.push(`/projectInfo/newsArticle/${item.id}`)}
+            >
+              <div
+                className={`item-ranking ${index === 0 ? 'one' : ''} ${
+                  index === 1 ? 'two' : ''
+                } ${index === 2 ? 'san' : ''}`}
+              >
+                {index + 1}
+              </div>
               <div className="item-label" title={item.newsTitle}>
                 {item.newsTitle}
               </div>
@@ -306,18 +443,24 @@ export default function WaterfallFlowBody() {
       <div key={1008} className="right-box-item right-item-second">
         <div className="item-box">
           <div className="title">
-            <div className="title-label" onClick={() => router.push('/projectInfo')}>
+            <div
+              className="title-label"
+              onClick={() => router.push('/projectInfo')}
+            >
               招标快讯
             </div>
           </div>
           <div className="body">
-            {list?.map(item => (
+            {list?.map((item) => (
               <div key={item.id} className="body-item">
                 <div className="item-label" title={item.tenderContent}>
                   {item.tenderContent}
                   <div className="label-bottom">{item.tenderPrice}</div>
                 </div>
-                <div className={`item-right ${item.apply ? 'apply' : ''}`} onClick={() => handleTenderApply(item)}>
+                <div
+                  className={`item-right ${item.apply ? 'apply' : ''}`}
+                  onClick={() => handleTenderApply(item)}
+                >
                   <div className="left">{`${item.tenderPrice}W`}</div>
                   {item.apply ? (
                     <div className="right">已申请</div>
@@ -341,13 +484,20 @@ export default function WaterfallFlowBody() {
         boxIndex={1} //分为左右两列，每列一个,从上而下
         leftcontentstyle={{
           width: '806px',
-          margin: { top: 0, right: '10px', bottom: '10px', left: 0 }
+          margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
         }}
         leftWaterfallDom={{
-          columns: [{ noFor: true, element: <RotationChart key={45645645} /> }, ...leftDomList]
+          columns: [
+            { noFor: true, element: <RotationChart key={45645645} /> },
+            ...leftDomList,
+          ],
         }}
         rightRenderDom={{
-          columns: [{ element: <Map key={1001} /> }, { element: rightTopDomList as JSX.Element }, { element: rightBottomDomList as JSX.Element }]
+          columns: [
+            { element: <Map key={1001} /> },
+            { element: rightTopDomList as JSX.Element },
+            { element: rightBottomDomList as JSX.Element },
+          ],
         }}
       />
     </Box>

pages/jobServices/index.page.tsx

-import React, { useEffect, useState , useRef } from "react";
-import { Box } from "./styled";
-import { Pagination } from "antd";
-import Layout from "~/components/layout";
-import ContentBox from "~/components/contentBox";
-import { useRouter } from "next/router";
-import Filter, { FilterResult, AdapterResult } from "~/components/filter";
-import api, { Job } from "./api";
-import Image from "next/image";
+import React, { useEffect, useState, useRef } from 'react'
+import { Box } from './styled'
+import { Pagination } from 'antd'
+import Layout from '~/components/layout'
+import ContentBox from '~/components/contentBox'
+import { useRouter } from 'next/router'
+import Filter, { FilterResult, AdapterResult } from '~/components/filter'
+import api, { Job } from './api'
+import Image from 'next/image'
 // 此函数在构建时被调用
 export async function getServerSideProps() {
   return {
     props: {},
-  };
+  }
 }
 
 interface ImageListType {}
 
 export default function JobServices() {
-  const router = useRouter();
-  const filter = useRef<any>()
+  const router = useRouter()
   const [list, setList] = useState([
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-2(1).jpg",
+    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-2(1).jpg',
     // "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
-  ]);
+  ])
   const [productList, setProductList] = useState(
     Array<{ element: JSX.Element }>
-  );
+  )
   const [rightDomList, setRightDomList] = useState(
     Array<{ element: JSX.Element }>
-  );
+  )
   const leftDom = (item: Job) => {
     return (
       <div
@@ -43,7 +42,7 @@ export default function JobServices() {
               {/* <div className="com">{item.teamName}</div> */}
             </div>
             <div className="value-right">
-              <span className="money">¥{item.price}</span>{" "}
+              <span className="money">¥{item.price}</span>{' '}
               <span className="unit">/平</span>
             </div>
           </div>
@@ -56,49 +55,46 @@ export default function JobServices() {
           <div className="com">{item.teamName}</div>
         </div>
       </div>
-    );
-  };
+    )
+  }
 
   const rightDom = (item: string) => {
     return (
       <div className="right-box-item advertisement" key={item}>
         <Image src={item} alt="error" width={260} height={420} />
       </div>
-    );
-  };
+    )
+  }
 
-  const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
+  const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
 
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
     pageSize: 14,
-  }); //分页器对象
+  }) //分页器对象
 
-  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 onPageChange = (page: number, pageSize: number) => {
     setPageParams({
       ...pageParams,
       pageNo: page,
-    });
-  };
+    })
+  }
 
   useEffect(() => {
     //中断前一次列表请求
-    abort?.abort();
-    setAbort(new AbortController());
-  }, [filterResult, pageParams]);
+    abort?.abort()
+    setAbort(new AbortController())
+  }, [filterResult, pageParams])
 
   //端口列表请求
   useEffect(() => {
-    let queryVal = JSON.parse(JSON.stringify(router.query));
-    const idArr = filter.current.idArr
+    let queryVal = JSON.parse(JSON.stringify(router.query))
     let rs
-    for (const key in queryVal) {
-      if (idArr.includes(key)) {
-        rs = {[key]:router.query[key]}
-      } 
+    if (Object.keys(queryVal).length) {
+      rs = { categoryId: [Number(queryVal['categoryId'])] }
     }
     api
       .listPageJobServicesInfo(
@@ -114,49 +110,46 @@ export default function JobServices() {
       .then((res) => {
         setProductList(
           res.result?.list?.map((item) => {
-            return { element: leftDom(item) };
+            return { element: leftDom(item) }
           }) || []
-        );
-        setCount(res.result?.totalCount || 0);
-      });
-  }, [abort]);
+        )
+        setCount(res.result?.totalCount || 0)
+      })
+  }, [abort])
 
   const onFilterChange = (
     filterResult: FilterResult,
     adapterFilterResult: AdapterResult
   ) => {
-    console.log("filterResult", filterResult, adapterFilterResult);
-    setFilterResult(adapterFilterResult);
-  };
+    console.log('filterResult', filterResult, adapterFilterResult)
+    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
+      (item) => item.id
+    )
+    setFilterResult(adapterFilterResult)
+  }
 
   useEffect(() => {
     setRightDomList(
       list.map((item) => {
-        return { element: rightDom(item) };
+        return { element: rightDom(item) }
       })
-    );
-  }, []);
+    )
+  }, [])
 
   useEffect(() => {
-    let queryVal = JSON.parse(JSON.stringify(router.query));
-    if (router.query) {
-      const idArr = filter.current.idArr
-      for (const key in queryVal) {
-        if (idArr.includes(key)) {
-          setFilterResult({ [key]:router.query[key] });
-        } 
-      }
+    let queryVal = JSON.parse(JSON.stringify(router.query))
+    if (Object.keys(router.query).length) {
+      setFilterResult({ categoryId: [Number(queryVal['categoryId'])] })
     }
-  }, [router]);
+  }, [router])
 
   return (
     <Layout>
       <Box>
         <Filter
-          types={["地域", "行业", "应用"]}
+          types={['地域', '行业', '应用']}
           showResultItem
           onChange={onFilterChange}
-          ref={filter}
         ></Filter>
         <div style={{ marginTop: 10 }}>
           <ContentBox
@@ -179,12 +172,12 @@ export default function JobServices() {
             }}
             rightRenderDom={{ columns: rightDomList }}
             leftcontentstyle={{
-              width: "924px",
-              margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
+              width: '924px',
+              margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
             }}
           />
         </div>
       </Box>
     </Layout>
-  );
+  )
 }

pages/mall/api/index.ts

-import request, { Response } from '~/api/request';
+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
+  pageNo: number
+  pageSize: number
+  categoryId?: any[]
+  provinceId?: number
+  type: 0
 }
 
 export interface Goods {
-  "createTime": string,
-  "directoryId": number,
-  "directoryName": string,
-  "goodsName": string,
-  "goodsOneLevelTypeName": string,
-  "goodsTwoLevelTypeName": string,
-  "id": number,
-  "imgUrl": string,
-  "isCoupons": number,
-  "status": number
+  goodsName: string
+  id: number
+  images: string
+  price: number | null
 }
 
 export interface ListPageGoodsInfoResp {
-  "pageNo": 1,
-  "pageSize": 10,
-  "list": Array<Goods>,
-  "totalCount": 0,
-  "totalPage": 0
+  pageNo: 1
+  pageSize: 10
+  list: Array<Goods>
+  totalCount: 0
+  totalPage: 0
 }
 
 export interface Ad {
-  id: number;
-  imageUrl: string;
+  id: number
+  imageUrl: string
 }
 
 export default {
   //web-商品信息-分页
-  listPageGoodsInfo: (params: ListPageGoodsInfoParams, options = {}): Promise<Response<ListPageGoodsInfoResp>> => {
-    return request('/pms/webProductMall/listPageGoodsInfo', 'post', params, options)
+  listPageGoodsInfo: (
+    params: ListPageGoodsInfoParams,
+    options = {}
+  ): Promise<Response<ListPageGoodsInfoResp>> => {
+    return request('/pms/product/mall/deviceList', '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 { Empty, Pagination, Image, Spin } from "antd";
-import Layout from "~/components/layout";
-import styles from "./index.module.scss";
-import { useRouter } from "next/router";
-import Filter, { AdapterResult, FilterResult } from "~/components/filter";
-import api, { Ad, Goods, ListPageGoodsInfoParams } from "./api";
-import errImg from "~/assets/errImg";
+import React, { useEffect, useState } from 'react'
+import { Empty, Pagination, Image, Spin } from 'antd'
+import Layout from '~/components/layout'
+import styles from './index.module.scss'
+import { useRouter } from 'next/router'
+import Filter, { AdapterResult, FilterResult } from '~/components/filter'
+import api, { Ad, Goods, ListPageGoodsInfoParams } from './api'
+import errImg from '~/assets/errImg'
 
 // 此函数在构建时被调用
 export async function getServerSideProps() {
   return {
     props: {},
-  };
+  }
 }
 
-type Props = {};
+type Props = {}
 
 export default function Mall(props: Props) {
-  const router = useRouter();
-  const [productList, setProductList] = useState<Array<Goods>>([]); //商品列表
-  const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
-  const [pageParams, setPageParams] = useState({
+  const router = useRouter()
+  const [productList, setProductList] = useState<Array<Goods>>([]) //商品列表
+  const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
+  const [pageParams, setPageParams] = useState<{
+    pageNo: number
+    pageSize: number
+    type: 0
+  }>({
     pageNo: 1,
     pageSize: 15,
-  }); //分页器对象
-  const [count, setCount] = useState(0); //商品总数
-  const [abort, setAbort] = useState<AbortController | null>(null); //请求中断对你
-  const [adList, setAdList] = useState<Array<Ad>>([]); //广告列表
-  const [loading, setLoading] = useState(false);
+    type: 0,
+  }) //分页器对象
+  const [count, setCount] = useState(0) //商品总数
+  const [abort, setAbort] = useState<AbortController | null>(null) //请求中断对你
+  const [adList, setAdList] = useState<Array<Ad>>([]) //广告列表
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     //中断前一次列表请求
-    abort?.abort();
-    setAbort(new AbortController());
-  }, [filterResult, pageParams]);
+    abort?.abort()
+    setAbort(new AbortController())
+  }, [filterResult, pageParams])
 
   //端口列表请求
   useEffect(() => {
     if (!abort) {
-      return;
+      return
     }
-    setLoading(true);
+    setLoading(true)
     api
       .listPageGoodsInfo(
         {
@@ -52,38 +57,41 @@ export default function Mall(props: Props) {
         }
       )
       .then((res) => {
-        setProductList(res.result?.list || []);
-        setCount(res.result?.totalCount || 0);
-        setLoading(false);
-      });
-  }, [abort]);
+        setProductList(res.result?.list || [])
+        setCount(res.result?.totalCount || 0)
+        setLoading(false)
+      })
+  }, [abort])
 
   //广告请求
   useEffect(() => {
     api.ad().then((res) => {
-      setAdList(res.result || []);
-    });
-  }, []);
+      setAdList(res.result || [])
+    })
+  }, [])
 
   const onFilterChange = (
     filterResult: FilterResult,
     adapterFilterResult: AdapterResult
   ) => {
-    console.log("filterResult", filterResult, adapterFilterResult);
-    setFilterResult(adapterFilterResult);
-  };
+    console.log('filterResult', filterResult, adapterFilterResult)
+    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
+      (item) => item.id
+    )
+    setFilterResult(adapterFilterResult)
+  }
 
   const onPageChange = (page: number, pageSize: number) => {
     setPageParams({
       ...pageParams,
       pageNo: page,
-    });
-  };
+    })
+  }
   return (
     <Layout>
-      <div className="page" style={{ paddingTop: "18px" }}>
+      <div className="page" style={{ paddingTop: '18px' }}>
         <Filter
-          types={["类目", "地域", "品牌", "部件",/*  "型号", "成色" */]}
+          types={['类目', '地域', '品牌', '部件' /*  "型号", "成色" */]}
           showResultItem
           onChange={onFilterChange}
         ></Filter>
@@ -97,12 +105,12 @@ export default function Mall(props: Props) {
                     <li
                       key={i}
                       className={styles.item}
-                      onClick={() => router.push("/mall/detail/" + item.id)}
+                      onClick={() => router.push('/mall/detail/' + item.id)}
                     >
                       <div className={styles.imgBox}>
                         <Image
                           alt=""
-                          src={item.imgUrl}
+                          src={item.images}
                           className={styles.img}
                           width={116}
                           height={116}
@@ -115,14 +123,14 @@ export default function Mall(props: Props) {
                         {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
                       </div>
                     </li>
-                  );
+                  )
                 })}
                 {productList.length === 0 && (
                   <Empty
                     style={{
                       paddingTop: 20,
-                      width: "100%",
-                      textAlign: "center",
+                      width: '100%',
+                      textAlign: 'center',
                     }}
                   ></Empty>
                 )}
@@ -153,12 +161,12 @@ export default function Mall(props: Props) {
                     preview={false}
                     fallback={errImg}
                   ></Image>
-                );
+                )
               })}
             </div>
           </div>
         </div>
       </div>
     </Layout>
-  );
+  )
 }