修复：筛选二级下拉，四大模块部分优化

components/filter/api/index.ts

@@ -4,6 +4,7 @@ export interface FilterOptionResp {
   id: number;
   name?: string;
   appName?: string;
+  children?: FilterOptionResp[];
 }
 
 export interface RegionResp {
@@ -19,6 +20,7 @@ export interface InfoList {
   directoryId: number;
   name: string;
   icon: string;
+  children: InfoList[];
 }
 export interface TypesResp {
   directoryId: number;

components/filter/compoents/typeInfo/index.tsx

 import { useState, useEffect } from 'react';
 
 import { Space, Button, Collapse } from 'antd';
+import Image from 'next/image';
+
+import downArrowImg from '~/assets/images/down-arrow.png';
 
 import { FilterOptionResp, InfoList } from '../../api';
 import styles from '../../index.module.scss';
@@ -9,6 +12,10 @@ type Props = {
   onChange: (id: FilterOptionResp) => void;
   typeName: string;
   dataValue: InfoList[];
+  categoryMouseEnter: (item: FilterOptionResp) => void;
+  changeCurrentItemIndex: (index: number) => void;
+  currentItemIndex: number;
+  categoryMouseLeave: () => void;
 };
 
 export default function CategoryItem(props: Props) {
@@ -24,6 +31,18 @@ export default function CategoryItem(props: Props) {
       name: `${props.typeName}：${item.name}`,
     });
   };
+  const onMouseEnter = (item: FilterOptionResp, index: number) => {
+    if (item.children) {
+      props.changeCurrentItemIndex(index);
+    } else {
+      props.changeCurrentItemIndex(-1);
+    }
+    props.categoryMouseEnter({
+      id: item.id,
+      name: `${props.typeName}：${item.name}`,
+      children: item.children,
+    });
+  };
 
   const showCount = 9; // 展示数量
 
@@ -35,11 +54,31 @@ export default function CategoryItem(props: Props) {
           <Collapse.Panel
             header={
               <Space size={[40, 0]}>
-                {data.slice(0, showCount).map((item) => {
+                {data.slice(0, showCount).map((item, index) => {
                   return (
-                    <Button type='link' key={item.id} onClick={(e) => onClick(item)}>
+                    <div
+                      key={item.id}
+                      className={`${styles.filterItemContent} ${
+                        props.currentItemIndex === index ? styles.filterItemContentHover : ''
+                      }`}
+                      onMouseEnter={() => onMouseEnter(item, index)}
+                      onMouseLeave={props.categoryMouseLeave}
+                    >
+                      <Button type='link' onClick={(e) => onClick(item)}>
                         {item.name}
                       </Button>
+                      {item.children ? (
+                        <Image
+                          src={downArrowImg}
+                          className={styles.filterItemIcon}
+                          width={14}
+                          height={14}
+                          alt='展开图标'
+                        />
+                      ) : (
+                        ''
+                      )}
+                    </div>
                   );
                 })}
               </Space>

components/filter/index.module.scss

@@ -2,6 +2,7 @@
   padding: 0px 32px;
   background: #ffffff;
   border-radius: 6px;
+  position: relative;
 
   * {
     font-size: 12px !important;
@@ -21,7 +22,6 @@
     flex-shrink: 0;
     width: 80px;
     margin-right: 8px;
-    font-family: MicrosoftYaHei;
     color: rgba(153, 153, 153, 1);
     line-height: 26px;
     height: auto;
@@ -56,6 +56,22 @@
         padding: 0;
       }
     }
+    .filterItemContent{
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .filterItemIcon{
+        transform: rotateZ(180deg);
+        margin-left: 5px;
+        transition: transform 1s;
+      }
+      &:hover{
+        .filterItemIcon{
+          transform: rotateZ(0deg);
+          transition: transform 0.168s;
+        }
+      }
+    }
   }
 
   :global .ant-select-selector {
@@ -64,7 +80,6 @@
     .ant-select-selection-item,
     .ant-select-selection-placeholder {
       font-size: 16px;
-      font-family: MicrosoftYaHei;
       color: #3e4149;
     }
   }
@@ -75,7 +90,6 @@
 
   :global .ant-btn-link {
     font-size: 16px;
-    font-family: MicrosoftYaHei;
     color: #3e4149;
     padding: 0;
   }
@@ -84,3 +98,25 @@
     padding: 4px 9px;
   }
 }
+.filterCategorySecond{
+  position: absolute;
+  top: 26px;
+  left: 0;
+  width: 100%;
+  min-height: 60px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.08);
+  border: 1px solid #EBEBEB;
+  display: none;
+  z-index: 9999;
+}
+.filterCategorySecond:hover ~ .filterItem{
+  .filterItemContentHover{
+    .filterItemIcon{
+      transform: rotateZ(0deg)  !important;
+      transition: transform 0.168s  !important;
+    }
+  }
+
+}
+

components/filter/index.tsx

-import React, { useEffect, useState, forwardRef, useImperativeHandle, Ref } from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle, Ref, useRef } from 'react';
 
+import { Button } from 'antd';
 import { useRouter } from 'next/router';
 
 import api, { FilterOptionResp, TypesResp, InfoList } from './api';
@@ -29,6 +30,7 @@ type Props = {
 };
 
 const Filter = (props: Props, ref: Ref<any>) => {
+  const categorySecondRef = useRef<any>();
   const router = useRouter();
   useImperativeHandle(ref, () => ({
     clearRouter,
@@ -68,8 +70,6 @@ const Filter = (props: Props, ref: Ref<any>) => {
   };
   const onDel = (key: string | number) => {
     clearRouter();
-    // console.log(key);
-
     if (Object.prototype.toString.call(key) === '[object String]') {
       // @ts-ignore
       delete result[key];
@@ -88,6 +88,52 @@ const Filter = (props: Props, ref: Ref<any>) => {
   };
   const routerList = ['/jobServices', '/equipmentLeasing', '/flyingHandService', '/mall'];
   const [typeInfo, setTypeInfo] = useState<Array<TypesResp> | null>();
+  const [currentItemIndex, setCurrentItemIndex] = useState<number>(-1); // 当前移入的下标
+  const [categoryObj, setCategoryObj] = useState<FilterOptionResp>();
+
+  // 分类移入
+  const categoryMouseEnter = (item: FilterOptionResp) => {
+    if (item.children) {
+      setCategoryObj(item);
+      categorySecondRef.current.style.display = 'block';
+      if (typeInfo) {
+        const index: number = typeInfo.findIndex((v) =>
+          v.categoriesInfoListDTO.some((i) => i.id === item.id),
+        );
+        categorySecondRef.current.style.top = `${(index + 1) * 26}px`;
+      }
+    } else {
+      categorySecondRef.current.style.display = 'none';
+    }
+  };
+  // 分类移出
+  const categoryMouseLeave = () => {
+    categorySecondRef.current.style.display = 'none';
+  };
+  // 二级菜单移入
+  const categorySecondMouseEnter = () => {
+    if (currentItemIndex !== -1) {
+      categorySecondRef.current.style.display = 'block';
+    }
+  };
+  // 二级菜单移出
+  const onMouseLeave = () => {
+    setCurrentItemIndex(-1);
+    categorySecondRef.current.style.display = 'none';
+  };
+  // 修改移入的下标
+  const changeCurrentItemIndex = (index: number) => {
+    setCurrentItemIndex(index);
+  };
+  // 二级分类选中
+  const categorySecondSelect = (v: FilterOptionResp) => {
+    const obj = JSON.parse(JSON.stringify(categoryObj));
+    if (obj?.children) {
+      obj.children = obj.children.filter((item: FilterOptionResp) => item.id === v.id);
+      obj.name += `/${v.name}`;
+      onChange(obj, 'categoryId');
+    }
+  };
   useEffect(() => {
     if (routerList.indexOf(router.pathname) > -1) {
       (async () => {
@@ -132,7 +178,20 @@ const Filter = (props: Props, ref: Ref<any>) => {
           ></RegionItem>
         </div>
       )}
-      <div className={styles.filterWrap}>
+      <div className={styles.filterWrap} onMouseLeave={onMouseLeave}>
+        <div
+          className={styles.filterCategorySecond}
+          ref={categorySecondRef}
+          onMouseLeave={onMouseLeave}
+          onMouseEnter={categorySecondMouseEnter}
+        >
+          {categoryObj?.children &&
+            categoryObj?.children.map((v) => (
+              <Button type='link' key={v.id} onClick={() => categorySecondSelect(v)}>
+                {v.name}
+              </Button>
+            ))}
+        </div>
         {typeInfo?.length &&
           typeInfo?.map((item) => (
             <TypeInfo
@@ -140,6 +199,10 @@ const Filter = (props: Props, ref: Ref<any>) => {
               typeName={item.name}
               dataValue={item.categoriesInfoListDTO}
               onChange={(e: FilterOptionResp) => onChange(e, 'categoryId')}
+              categoryMouseEnter={categoryMouseEnter}
+              changeCurrentItemIndex={changeCurrentItemIndex}
+              currentItemIndex={currentItemIndex}
+              categoryMouseLeave={categoryMouseLeave}
             ></TypeInfo>
           ))}
         {props.showResultItem && <ResultItem data={result} onDel={onDel}></ResultItem>}

components/wxCodeModal/index.tsx

-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 
 import { Modal, ModalProps, Image } from 'antd';
 
-import api from '~/api';
-
 import { Box } from './styled';
 
-const WxCodeModal: FC<ModalProps> = ({ open, onCancel }) => {
-  const [wxCodeImg, setWxCodeImg] = useState<string>('');
-  const getWXCode = () => {
-    api.listBannerImg('WX_CODE').then(({ result }) => {
-      if (result) {
-        setWxCodeImg(result[0].bannerImg);
-      }
-    });
-  };
-  useEffect(() => {
-    getWXCode();
-  }, []);
+interface SelfProps {
+  wxCodeImg: string;
+}
+
+const WxCodeModal: FC<ModalProps & SelfProps> = ({ open, onCancel, wxCodeImg }) => {
   return (
     <Modal open={open} onCancel={onCancel} width={400} footer={null}>
       <Box>

pages/equipmentLeasing/index.page.tsx

@@ -113,7 +113,9 @@ export default function EquipmentLeasing(props: Props) {
       ...pageParams,
       pageNo: 1,
     });
-    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
+    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) =>
+      item.children ? item.children[0].id : item.id,
+    );
     setFilterResult(adapterFilterResult);
   };
   const getPropagandaCenter = () => {
@@ -140,11 +142,7 @@ export default function EquipmentLeasing(props: Props) {
   return (
     <Layout>
       <Box>
-        <Filter
-          types={['地域', '设备品牌', '设备型号']}
-          showResultItem
-          onChange={onFilterChange}
-        ></Filter>
+        <Filter types={['设备品牌', '设备型号']} showResultItem onChange={onFilterChange}></Filter>
         <div style={{ paddingTop: 13 }}>
           <ContentBox
             boxIndex={5}

pages/home/waterfallFlowBody/api/index.ts

@@ -177,7 +177,7 @@ export const listNewsApi = {
 };
 
 export interface HomeCategoriesType {
-  type: 1 | 2 | 3 | 4;
+  type: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface ResHomeCategoriesType {
   id: number;

pages/home/waterfallFlowBody/index.tsx

@@ -12,6 +12,7 @@ import api, { AllType, NewsPageType, NewsTenderType, listNewsApi } from './api';
 import Map from './components/map';
 import RotationChart from './components/rotationChart';
 import { Box } from './styled';
+import commonApi from '~/api';
 
 interface ColumnsType {
   title: string;
@@ -21,47 +22,6 @@ interface ColumnsType {
 export default function WaterfallFlowBody() {
   const router = useRouter();
 
-  const [list] = useState([
-    '中国人寿',
-    '中国平安',
-    '中国人保',
-    '太平洋保险',
-    '新华保险',
-    '中国太平',
-    '泰康保险',
-    '华夏保险',
-    '阳光保险',
-    '富德生命人寿',
-    '中邮人寿',
-    '前海人寿',
-    '百年人寿',
-    '国华人寿',
-    '工银安盛人寿',
-    '恒大人寿',
-    '君康人寿',
-    '友邦保险',
-    '建信人寿',
-    '大家人寿',
-    '农银人寿',
-    '中信保城人寿',
-    '合众人寿',
-  ]);
-  const [list2, setList2] = useState([
-    '天目将PAAS平台',
-    '天目将公安平台',
-    '天目将应急平台',
-    '天目将城管平台',
-    '天目将电力平台',
-    '天目将石油平台',
-    'SESP-U1无人机仿真软件',
-    '云享飞服务号',
-    '无人机商城',
-    '云飞手',
-    '云仓',
-    '云享飞',
-    '科比特智教',
-  ]);
-
   const columns = [
     {
       title: '无人机出租',
@@ -73,7 +33,7 @@ export default function WaterfallFlowBody() {
     },
     {
       title: '无人机保险',
-      router: '',
+      router: '/mall',
     },
     {
       title: '无人机培训',
@@ -85,7 +45,7 @@ export default function WaterfallFlowBody() {
     },
     {
       title: '无人机工具软件',
-      router: '',
+      router: '/mall',
     },
   ];
 
@@ -94,6 +54,7 @@ export default function WaterfallFlowBody() {
   const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
   const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
   const [wxCodeShow, setWXCodeShow] = useState<boolean>(false);
+  const [wxCodeImg, setWxCodeImg] = useState<string>('');
 
   const onMoreChange = (value: { value: string; label: number }, index: number, option: []) => {
     const [item] = option.filter((item: any) => item.name === value.value);
@@ -106,22 +67,24 @@ export default function WaterfallFlowBody() {
       const res4 = await api.HomeCategories({ type: 4 }); // 无人机销售
       const res1 = await api.HomeCategories({ type: 1 }); // 无人机出租
       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, categoryName: item, value: index };
-      });
-      const list2Option = JSON.parse(JSON.stringify(list2)).map((item: string, index: number) => {
-        return { id: index, categoryName: item, value: index };
-      });
-      const optionList = [
+      const res5 = await api.HomeCategories({ type: 5 }); // 无人机保险
+      const res6 = await api.HomeCategories({ type: 6 }); // 无人机软件
+      const optionList: any = [
+        res2.result,
+        res4.result,
+        res5.result,
+        res3.result,
+        res1.result,
+        res6.result,
+      ];
+      const listValue: any = [
         res2.result,
         res4.result,
-        listOption,
+        res5.result,
         res3.result,
         res1.result,
-        list2Option,
+        res6.result,
       ];
-      const listValue: any = [res2.result, res4.result, [], res3.result, res1.result, []];
       setLeftDomList(
         columns.map((item, index) => {
           if (index < 3) {
@@ -144,10 +107,11 @@ export default function WaterfallFlowBody() {
       setRightTopDomList(rightDom(res7.result?.list!));
       setRightBottomDomList(rightDom2(res8.result?.list!));
     })();
+    getWXCode();
   }, []);
 
   const routerPath = (index: number, item?: AllType) => {
-    if (item && (index === 0 || index === 1 || index === 3 || index === 4)) {
+    if (item) {
       router.push({
         pathname: columns[index].router,
         query: {
@@ -155,39 +119,11 @@ export default function WaterfallFlowBody() {
           name: item.categoryName,
         },
       });
-    } else {
-      router.push({
-        pathname: columns[index].router,
-      });
     }
   };
 
   const handleTenderApply = () => {
     setWXCodeShow(true);
-    // if (item.apply) return;
-    // if (userInfo) {
-    //   let res = await listNewsApi.tenderApply({
-    //     tenderInfoId: item.id,
-    //     tenderNewsId: item.tenderNewsId,
-    //     userAccountId: userInfo.id,
-    //   });
-    //   try {
-    //     if (res.code === '200') {
-    //       message.success('申请成功');
-    //       let res8 = await listNewsApi.listNewTenderInfo({
-    //         pageNo: 1,
-    //         pageSize: 6,
-    //       });
-    //       setRightBottomDomList(rightDom2(res8.result?.list!));
-    //     } else {
-    //       message.error(res.message);
-    //     }
-    //   } catch (e) {
-    //     console.log(e);
-    //   }
-    // } else {
-    //   setNeedLogin(true);
-    // }
   };
   const wxCodeModalCancel = () => {
     setWXCodeShow(false);
@@ -225,29 +161,7 @@ export default function WaterfallFlowBody() {
         </div>
         <div className='item-body'>
           <Space size={[15, 0]} wrap>
-            {index === 2
-              ? list.map((item, index) => (
-                  <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' : ''
-                    }`}
-                  >
-                    {item}
-                  </div>
-                ))
-              : resultList[index]?.map((item, indexer) => {
+            {resultList[index]?.map((item, indexer) => {
               return (
                 <div
                   key={item.categoryName}
@@ -330,7 +244,13 @@ export default function WaterfallFlowBody() {
       </div>
     );
   };
-
+  const getWXCode = () => {
+    commonApi.listBannerImg('WX_CODE').then(({ result }) => {
+      if (result) {
+        setWxCodeImg(result[0].bannerImg);
+      }
+    });
+  };
   return (
     <Box>
       <ContentBox
@@ -350,7 +270,7 @@ export default function WaterfallFlowBody() {
           ],
         }}
       />
-      <WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} />
+      <WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} wxCodeImg={wxCodeImg} />
     </Box>
   );
 }

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

@@ -7,8 +7,9 @@ import moment from 'moment';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
-import { RegionResp } from '~/components/filter/api';
+import commonApi from '~/api';
 import Layout from '~/components/layout';
+import WxCodeModal from '~/components/wxCodeModal';
 import { UserContext } from '~/lib/userProvider';
 
 import api, { ListPageJobInfoResp } from './api';
@@ -25,22 +26,12 @@ export default function JobServicesDetail() {
 
   const [detail, setDetail] = useState<ListPageJobInfoResp | null>();
   const [sale, setSale] = useState<string | null>();
-  const onChange = (key: string) => {
-    console.log(key);
-  };
-
   const items: TabsProps['items'] = [
     {
       key: '1',
       label: `团队介绍`,
       children: (
         <div className='teamIntroduction'>
-          {/* <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/> */}
-          {/* <img
-            style={{ width: '100%' }}
-            src={detail?.teamPoster ? detail?.teamPoster : ''}
-            alt="error"
-          /> */}
           {detail?.serviceIntroduction ? (
             <div dangerouslySetInnerHTML={{ __html: detail?.serviceIntroduction }}></div>
           ) : null}
@@ -75,17 +66,13 @@ export default function JobServicesDetail() {
   const [formDate] = Form.useForm();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
   const [isAddressMapShow, setIsAddressMapShow] = useState(false);
   const [addressContent, setAddressContent] = useState<any>();
+  const [wxCodeImg, setWxCodeImg] = useState<string>('');
+  const [wxCodeModalShow, setWxCodeModalShow] = useState<boolean>(false);
 
   useEffect(() => {
-    api.region().then((res) => {
-      console.log(res);
-      console.log(res?.result?.map((item) => item.childInfo).flat());
-
-      setProvinceList(res?.result || []);
-    });
+    getWXCode();
   }, []);
   const disabledDate: RangePickerProps['disabledDate'] = (current) => {
     return current && current < moment().endOf('day');
@@ -151,6 +138,20 @@ export default function JobServicesDetail() {
     setIsModalOpen(false);
     formDate.resetFields();
   };
+  // 在线沟通-二维码
+  const showWxCodeModalClick = () => {
+    setWxCodeModalShow(true);
+  };
+  const getWXCode = () => {
+    commonApi.listBannerImg('WX_CODE').then(({ result }) => {
+      if (result) {
+        setWxCodeImg(result[1]?.bannerImg);
+      }
+    });
+  };
+  const wxCodeModalCancel = () => {
+    setWxCodeModalShow(false);
+  };
 
   return (
     <Layout>
@@ -167,15 +168,20 @@ export default function JobServicesDetail() {
                 <span className='content'>飞手需通过认证培训才可作业</span>
               </div>
               <div className='more'>
-                <div className='tab filst'>测绘场景榜第1名</div>
+                {/* <div className='tab filst'>测绘场景榜第1名</div> */}
                 <div className='tab'>7x24小时服务</div>
-                <div className='tab'>{`月售${sale}`}</div>
+                {/* <div className='tab'>{`月售${sale}`}</div> */}
               </div>
             </div>
             <div className='right-bottom'>
               <div className='bottom-btn'>
-                <Button className='btn-left' size='small' type='primary'>
-                  电话沟通
+                <Button
+                  className='btn-left'
+                  size='small'
+                  type='primary'
+                  onClick={showWxCodeModalClick}
+                >
+                  在线沟通
                 </Button>
                 <Button onClick={appointmentNow} className='btn-right' size='small' type='primary'>
                   立即预约
@@ -184,7 +190,7 @@ export default function JobServicesDetail() {
             </div>
           </div>
         </div>
-        <Tabs className='tabs' defaultActiveKey='1' items={items} onChange={onChange} />
+        <Tabs className='tabs' defaultActiveKey='1' items={items} />
 
         <Modal
           wrapClassName='reservation'
@@ -292,6 +298,11 @@ export default function JobServicesDetail() {
             />
           </Modal>
         ) : null}
+        <WxCodeModal
+          wxCodeImg={wxCodeImg}
+          open={wxCodeModalShow}
+          onCancel={wxCodeModalCancel}
+        ></WxCodeModal>
       </Box>
     </Layout>
   );

pages/jobServices/index.page.tsx

@@ -120,7 +120,9 @@ export default function JobServices() {
       ...pageParams,
       pageNo: 1,
     });
-    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
+    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) =>
+      item.children ? item.children[0].id : item.id,
+    );
     setFilterResult(adapterFilterResult);
   };
 
@@ -138,7 +140,7 @@ export default function JobServices() {
   return (
     <Layout>
       <Box>
-        <Filter types={['地域', '行业', '应用']} showResultItem onChange={onFilterChange}></Filter>
+        <Filter types={['行业', '应用']} showResultItem onChange={onFilterChange}></Filter>
         <div style={{ marginTop: 10 }}>
           <ContentBox
             boxIndex={2}

pages/mall/api/index.ts

@@ -13,6 +13,7 @@ export interface Goods {
   goodsName: string;
   images: string;
   price?: any;
+  description: string;
 }
 
 export interface DeviceListResp {

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

@@ -24,6 +24,9 @@ import { UserContext } from '~/lib/userProvider';
 
 import api, { GetLeaseGoodsDetailResp } from './api';
 import IntentionModal from './components/intentionModal';
+import WxCodeModal from '~/components/wxCodeModal';
+import wxCodeModal from '~/components/wxCodeModal';
+import commonApi from '~/api';
 
 export default function MallDetail() {
   const { userInfo, setNeedLogin } = useContext(UserContext);
@@ -33,7 +36,8 @@ export default function MallDetail() {
   const [detail, setDetail] = useState<GetLeaseGoodsDetailResp | null>(null); // 详情数据
   const [intentionModalOpen, setIntentionModalOpen] = useState(false); // 意向弹窗
   const [productImg, setProductImg] = useState(''); // 展示的商品图
-
+  const [wxCodeModalShow, setWXCodeModalShow] = useState<boolean>(false);
+  const [wxCodeImg, setWxCodeImg] = useState<string>('');
   // 打开意向modal
   const openIntentionModal = () => {
     if (userInfo) {
@@ -72,6 +76,7 @@ export default function MallDetail() {
             setWareSkuList(List);
           }
         });
+      getWXCode();
     }
   }, [id]);
 
@@ -79,6 +84,22 @@ export default function MallDetail() {
   const [isorderForGoods, setIsorderForGoods] = useState(false);
   const [wareSkuList, setWareSkuList] = useState<any>();
   const [mallDetail, setMallDetail] = useState<any>();
+
+  //商城-客服二维码
+  const showWxCodeClick = () => {
+    setWXCodeModalShow(true);
+  };
+  const getWXCode = () => {
+    commonApi.listBannerImg('WX_CODE').then(({ result }) => {
+      if (result) {
+        setWxCodeImg(result[2].bannerImg);
+      }
+    });
+  };
+
+  const wxCodeModalCancel = () => {
+    setWXCodeModalShow(false);
+  };
   return (
     <Layout>
       {/* 意向弹窗 */}
@@ -201,38 +222,41 @@ export default function MallDetail() {
                 </Row>
               </Space>
               <Space size={12} style={{ marginTop: 123 }}>
-                <Button className={styles.btn1} onClick={openIntentionModal}>
-                  加入购物车
+                {/*<Button className={styles.btn1} onClick={openIntentionModal}>*/}
+                {/*  加入购物车*/}
+                {/*</Button>*/}
+                <Button className={styles.btn1} onClick={showWxCodeClick}>
+                  在线沟通
                 </Button>
                 <Button className={styles.btn2} type='primary' onClick={openIntentionModal}>
                   提交意向
                 </Button>
-                <Space size={20} style={{ marginLeft: 19 }}>
-                  <div style={{ textAlign: 'center', cursor: 'pointer' }}>
-                    <Image
-                      alt=''
-                      src={require('./assets/phone.png')}
-                      width={20}
-                      height={20}
-                    ></Image>
-                    <div className={styles.font5} style={{ marginTop: 5 }}>
-                      电话
-                    </div>
-                  </div>
-                  <div style={{ textAlign: 'center', cursor: 'pointer' }}>
-                    <Badge count={55} size='small'>
-                      <Image
-                        alt=''
-                        src={require('./assets/car.png')}
-                        width={20}
-                        height={20}
-                      ></Image>
-                    </Badge>
-                    <div className={styles.font5} style={{ marginTop: 5 }}>
-                      购物车
-                    </div>
-                  </div>
-                </Space>
+                {/*<Space size={20} style={{ marginLeft: 19 }}>*/}
+                {/*  <div style={{ textAlign: 'center', cursor: 'pointer' }}>*/}
+                {/*    <Image*/}
+                {/*      alt=''*/}
+                {/*      src={require('./assets/phone.png')}*/}
+                {/*      width={20}*/}
+                {/*      height={20}*/}
+                {/*    ></Image>*/}
+                {/*    <div className={styles.font5} style={{ marginTop: 5 }}>*/}
+                {/*      电话*/}
+                {/*    </div>*/}
+                {/*  </div>*/}
+                {/*  <div style={{ textAlign: 'center', cursor: 'pointer' }}>*/}
+                {/*    <Badge count={55} size='small'>*/}
+                {/*      <Image*/}
+                {/*        alt=''*/}
+                {/*        src={require('./assets/car.png')}*/}
+                {/*        width={20}*/}
+                {/*        height={20}*/}
+                {/*      ></Image>*/}
+                {/*    </Badge>*/}
+                {/*    <div className={styles.font5} style={{ marginTop: 5 }}>*/}
+                {/*      购物车*/}
+                {/*    </div>*/}
+                {/*  </div>*/}
+                {/*</Space>*/}
               </Space>
             </Space>
           </Space>
@@ -253,6 +277,8 @@ export default function MallDetail() {
           mallDetail={mallDetail}
         />
       )}
+      {/*客服二维码弹窗*/}
+      <WxCodeModal wxCodeImg={wxCodeImg} open={wxCodeModalShow} onCancel={wxCodeModalCancel} />
     </Layout>
   );
 }

pages/mall/index.module.scss

@@ -56,20 +56,28 @@
       }
 
       .title {
-        padding: 0 18px;
+        margin-left: 14px;
         font-size: 15px;
-        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
         font-weight: bold;
         color: #333333;
         @include ellipsis(1);
       }
-
-      .sellCount {
+      .info{
+        display: flex;
+        align-items: center;
+        margin:0 14px;
         font-size: 12px;
-        font-family: MicrosoftYaHei;
-        color: #ff552d;
-        padding-left: 20px;
+        font-weight: 400;
+        color: #8F8F8F;
+        .desc{
+          flex: 1;
+          margin-right: 10px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
       }
+
+    }
   }
 }

pages/mall/index.page.tsx

@@ -77,7 +77,9 @@ export default function Mall(props: Props) {
       ...pageParams,
       pageNo: 1,
     });
-    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
+    adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) =>
+      item.children ? item.children[0].id : item.id,
+    );
     setFilterResult(adapterFilterResult);
   };
 
@@ -90,7 +92,7 @@ export default function Mall(props: Props) {
   return (
     <Layout>
       <div className='page' style={{ paddingTop: '18px' }}>
-        <Filter types={['地域']} showResultItem onChange={onFilterChange}></Filter>
+        <Filter types={[]} showResultItem onChange={onFilterChange}></Filter>
 
         <div className={styles.productList}>
           <div className={styles.main}>
@@ -114,10 +116,13 @@ export default function Mall(props: Props) {
                           ></Image>
                         </div>
                         <div className={styles.title}>{item.goodsName}</div>
+                        <div className={styles.info}>
+                          <div className={styles.desc}>{item.description}</div>
                           <div className={styles.sellCount}>
-                          半年售
+                            已售
                             {(Math.floor(Math.random() * 901) + 100).toFixed(0)}
                           </div>
+                        </div>
                       </li>
                     );
                   })}

pages/projectInfo/index.page.tsx

@@ -51,6 +51,7 @@ export default function ProjectInfo() {
 
   const [region, setRegion] = useState<Array<RegionResp>>([]);
   const [params, setParams] = useState<Params | null>({});
+  const [wxCodeImg, setWxCodeImg] = useState<string>('');
   const [wxCodeShow, setWXCodeShow] = useState<boolean>(false);
 
   useEffect(() => {
@@ -69,8 +70,15 @@ export default function ProjectInfo() {
       }
       setRegion(temp1);
     });
+    getWXCode();
   }, []);
-
+  const getWXCode = () => {
+    commonApi.listBannerImg('WX_CODE').then(({ result }) => {
+      if (result) {
+        setWxCodeImg(result[0].bannerImg);
+      }
+    });
+  };
   const onRegionChange = (value: Array<string>, list: Array<RegionResp>) => {
     console.log(value);
     const params1: Params = {
@@ -91,7 +99,6 @@ export default function ProjectInfo() {
   };
 
   const onDateChange: DatePickerProps['onChange'] = (date, dateString) => {
-    console.log(date, dateString);
     setParams({
       ...params,
       date: dateString || undefined,
@@ -137,7 +144,7 @@ export default function ProjectInfo() {
           />
         </div>
       </div>
-      <WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} />
+      <WxCodeModal open={wxCodeShow} onCancel={wxCodeModalCancel} wxCodeImg={wxCodeImg} />
     </Layout>
   );
 }