功能：商城店铺

src/api/index.ts

 import { CommonAPI } from './modules/common';
 import { FlyerAPI } from './modules/flyer';
 import { HomeAPI } from './modules/home';
+import { MallAPI } from './modules/mall';
+import { ServiceAPI } from './modules/service';
 import { UserAPI } from './modules/user';
 import { WalletAPI } from './modules/wallet';
 
-export { CommonAPI, HomeAPI, UserAPI, WalletAPI, FlyerAPI };
+export {
+  CommonAPI,
+  HomeAPI,
+  UserAPI,
+  WalletAPI,
+  FlyerAPI,
+  ServiceAPI,
+  MallAPI,
+};

src/api/interface/service.ts

@@ -218,3 +218,117 @@ export type GetCompanyInfoById = InterFunction<
     backUserId: number;
   }
 >;
+// 单位服务列表-小程序展示
+export type ListAPPCompanyInspectionPage = InterListFunction<
+  {
+    companyInfoId?: number;
+    industryTypeId?: number;
+    inspectionId?: number;
+    keyword?: string;
+  },
+  {
+    id: number;
+    companyInfoId: number;
+    serviceArea: string;
+    inspectionId: number;
+    inspectionTagId: number;
+    price: number;
+    priceRemark: string;
+    inspectionPriceUnitId: number;
+    detailPage: string;
+    saleState: number;
+    remark: null;
+    inspectionFirstImg: string;
+    industryTypeDTO: {
+      id: number;
+      typeName: string;
+      typeImg: null;
+      description: null;
+      saleState: null;
+      createTime: null;
+      inspectionDTOS: null;
+    };
+    inspectionDTO: {
+      id: number;
+      inspectionNo: string;
+      inspectionName: string;
+      industryTypeId: null;
+      inspectionImg: null;
+      inspectionDescription: null;
+      saleState: null;
+      caseImg: null;
+      caseVideo: null;
+      companyInspectionDTOS: null;
+    };
+    inspectionTagDTO: {
+      id: number;
+      tagName: string;
+      inspectionId: number;
+    };
+    inspectionFileDTOS: Array<{
+      id: number;
+      fileType: number;
+      first: number;
+      companyInspectionId: number;
+      fileUrl: string;
+    }>;
+    companyName: string;
+  }
+>;
+// 一级行业列表
+export type IndustryListPages = InterListFunction<
+  {
+    pageNo: number;
+    pageSize: number;
+    typeName?: string;
+    id?: number;
+  },
+  {
+    createTime: string;
+    description: string;
+    id: number;
+    inspectionDTOS: Array<{
+      caseImg: string;
+      caseVideo: string;
+      companyInspectionDTOS: Array<{
+        companyInfoId: number;
+        companyName: string;
+        detailPage: string;
+        id: number;
+        industryTypeDTO: {};
+        inspectionDTO: {};
+        inspectionFileDTOS: Array<{
+          companyInspectionId: number;
+          fileType: number;
+          fileUrl: string;
+          first: number;
+          id: number;
+        }>;
+        inspectionFirstImg: string;
+        inspectionId: number;
+        inspectionPriceUnitId: number;
+        inspectionTagDTO: {
+          id: number;
+          inspectionId: number;
+          tagName: string;
+        };
+        inspectionTagId: number;
+        price: number;
+        priceRemark: string;
+        remark: string;
+        saleState: number;
+        serviceArea: string;
+      }>;
+      id: number;
+      industryTypeId: number;
+      inspectionDescription: string;
+      inspectionImg: string;
+      inspectionName: string;
+      inspectionNo: string;
+      saleState: number;
+    }>;
+    saleState: number;
+    typeImg: string;
+    typeName: string;
+  }
+>;

src/api/modules/service.ts

@@ -3,6 +3,8 @@ import {
   GetCompanyInspectionById,
   GetIndustryListPagesType,
   GetListAPPCompanyInspectionPageType,
+  IndustryListPages,
+  ListAPPCompanyInspectionPage,
   ListInspectionPriceUnit,
 } from '@/api/interface/service';
 import request from '@/api/request';
@@ -31,4 +33,17 @@ export class ServiceAPI {
   // 单位查询
   static getCompanyInfoById: GetCompanyInfoById = (params) =>
     request.get('/userapp/company/getCompanyInfoById', { params });
+
+  // 单位服务列表-小程序展示
+  static listAPPCompanyInspectionPage: ListAPPCompanyInspectionPage = (
+    params,
+  ) =>
+    request.post(
+      '/pms/company-inspection/listAPPCompanyInspectionPage',
+      params,
+    );
+
+  // 一级行业列表
+  static IndustryListPages: IndustryListPages = (params) =>
+    request.post('/pms/industry/listPages', params);
 }

src/components/breadcrumb/index.tsx

@@ -81,6 +81,7 @@ const BreadcrumbView: React.FC = () => {
       children: [
         { name: '全国网点', path: 'map' },
         { name: '品牌商家', path: 'product' },
+        { name: '飞手团队', path: 'service' },
       ],
     },
   ];

src/components/product-comp/product-store/index.tsx

 import React from 'react';
 import { PhoneOutlined, ShopOutlined } from '@ant-design/icons';
 import { Button, Rate } from 'antd';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { InterDataType } from '@/api/interface';
 import {
@@ -14,7 +15,15 @@ type DetailType = InterDataType<AppMallGoodsDetails>;
 type StoreType = InterDataType<GetCompanyInfoByBUId>;
 const ProductStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
   store,
+  detail,
 }) => {
+  // 路由钩子
+  const router = useRouter();
+  // 跳转店铺详情
+  const handleDetail = () => {
+    // console.log('店铺详情 ===>', store);
+    router.push(`/store/product/${detail?.userAccountId}`).then();
+  };
   return (
     <ProductStoreWrap>
       <div className="store-card flex-start">
@@ -43,15 +52,10 @@ const ProductStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
         <div className="item-value">{store?.phoneNum || '18626051369'}</div>
       </div>
       <div className="store-action flex-start">
-        <QrcodePopover
-          path="page-service/service-store/index"
-          scene={`id=${Number(store?.id)}`}
-        >
-          <Button className="action-item flex-start">
-            <ShopOutlined style={{ color: '#FF552D' }} />
-            <div className="text">进店逛逛</div>
-          </Button>
-        </QrcodePopover>
+        <Button className="action-item flex-start" onClick={handleDetail}>
+          <ShopOutlined style={{ color: '#FF552D' }} />
+          <div className="text">进店逛逛</div>
+        </Button>
         <QrcodePopover
           path="page-service/service-store/index"
           scene={`id=${Number(store?.id)}`}

src/components/service-detail/comp/detail-store/index.tsx

 import React from 'react';
 import { PhoneOutlined, ShopOutlined } from '@ant-design/icons';
 import { Button, Rate } from 'antd';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { InterDataType } from '@/api/interface';
 import {
@@ -17,6 +18,12 @@ type StoreType = InterDataType<GetCompanyInfoById>;
 const ServiceStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
   store,
 }) => {
+  // 路由钩子
+  const router = useRouter();
+  // 跳转店铺详情
+  const handleDetail = () => {
+    router.push(`/store/service/${store?.id}`).then();
+  };
   return (
     <ServiceStoreWrap>
       <div className="store-card flex-start">
@@ -49,7 +56,7 @@ const ServiceStoreView: React.FC<{ detail: DetailType; store: StoreType }> = ({
           path="page-service/service-store/index"
           scene={`id=${Number(store?.id)}`}
         >
-          <Button className="action-item flex-start">
+          <Button className="action-item flex-start" onClick={handleDetail}>
             <ShopOutlined style={{ color: '#FF552D' }} />
             <div className="text">进店逛逛</div>
           </Button>

src/pages/store/service/[id].tsx

+import React, { useEffect, useState } from 'react';
+import { Empty, Rate } from 'antd';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { ServiceAPI } from '@/api';
+import { InterDataType, InterListType } from '@/api/interface';
+import {
+  GetCompanyInfoById,
+  ListAPPCompanyInspectionPage,
+} from '@/api/interface/service';
+import BreadcrumbView from '@/components/breadcrumb';
+import CategorySelectView, { CategoryType } from '@/components/categorySelect';
+import LayoutView from '@/components/layout';
+import ProductListView from '@/components/productList';
+import ServiceItemView from '@/components/serviceItem';
+
+// 详情类型
+type DetailType = InterDataType<GetCompanyInfoById>;
+// 服务列表
+type ListType = InterListType<ListAPPCompanyInspectionPage>;
+
+const StoreServicePage = () => {
+  // 路由钩子
+  const router = useRouter();
+  // 分类列表
+  const [categoryList, setCategoryList] = useState<CategoryType>([]);
+  // 店铺详情
+  const [storeDetail, setStoreDetail] = useState<DetailType>();
+  // 服务列表
+  const [serviceList, setServiceList] = useState<ListType>();
+  // 筛选过后的服务列表
+  const [serviceSelectList, setServiceSelectList] = useState<ListType>();
+  // 分页数据
+  const [pagination, setPagination] = useState({
+    pageNo: 1,
+    pageSize: 18,
+    totalCount: 0,
+  });
+  // 获取店铺详情
+  const getCompanyInfo = async () => {
+    const res = await ServiceAPI.getCompanyInfoById({
+      id: Number(router?.query?.id),
+    });
+    if (res && res.code === '200') {
+      setStoreDetail(res.result);
+      // console.log('获取店铺详情 --->', res.result);
+    }
+  };
+  // 获取店铺服务列表
+  const getCompanyServiceList = async () => {
+    const res = await ServiceAPI.listAPPCompanyInspectionPage({
+      companyInfoId: Number(router?.query?.id),
+      pageNo: 1,
+      pageSize: 9999,
+    });
+    if (res && res.code === '200') {
+      setServiceList(res.result?.list);
+      // console.log('获取店铺服务列表 --->', res.result?.list);
+    }
+  };
+  // 获取分类列表
+  const getIndustryListPages = async () => {
+    const res = await ServiceAPI.IndustryListPages({
+      pageNo: 1,
+      pageSize: 9999,
+    });
+    if (res && res.code === '200') {
+      setCategoryList(
+        res.result?.list?.map((i) => ({
+          label: i?.typeName,
+          value: i?.id,
+          children: i?.inspectionDTOS?.map((j) => ({
+            label: j?.inspectionName,
+            value: j?.id,
+          })),
+        })),
+      );
+      // console.log('获取分类列表 --->', res.result?.list);
+    }
+  };
+  // 选择监听
+  const handleSelect = (e: { main?: number; second?: number[] }) => {
+    const list = serviceList?.filter(
+      (i) => e.second?.includes(i?.inspectionDTO?.id),
+    );
+    setServiceSelectList(list);
+    setPagination({
+      ...pagination,
+      pageNo: 1,
+      totalCount: list?.length || 0,
+    });
+    // console.log('选择监听 --->', e, list);
+  };
+  // 翻页回调
+  const handlePageChange = (pageNo: number, pageSize: number) => {
+    setPagination({ ...pagination, pageNo, pageSize });
+  };
+  // 组件挂载
+  useEffect(() => {
+    if (!router?.query?.id) return;
+    getCompanyInfo().then();
+    getCompanyServiceList().then();
+  }, [router?.query]);
+  // 商品列表监听
+  useEffect(() => {
+    if (!serviceList) return;
+    getIndustryListPages().then();
+  }, [serviceList]);
+  return (
+    <LayoutView>
+      <StoreServiceWrap>
+        {/* 面包屑 */}
+        <BreadcrumbView />
+        <div className="detail-head flex w-full justify-start align-middle">
+          <div className="head-image">
+            <img
+              className="image"
+              src={storeDetail?.brandLogo}
+              alt={storeDetail?.companyName}
+            />
+          </div>
+          <div className="head-content">
+            <div className="content-title">{storeDetail?.companyName}</div>
+            <div className="content-star flex">
+              <div className="label">星级服务</div>
+              <div className="star">
+                <Rate
+                  disabled
+                  defaultValue={Number(storeDetail?.score) || 4}
+                  className="text-xs text-primary"
+                />
+              </div>
+            </div>
+            <div className="content-type">{storeDetail?.content}</div>
+          </div>
+        </div>
+        {/* 类型筛选 */}
+        <CategorySelectView list={categoryList} onSelect={handleSelect} />
+        {/* 产品列表 */}
+        <ProductListView pagination={pagination} onChange={handlePageChange}>
+          {serviceSelectList?.length ? (
+            serviceSelectList?.map((i, j) => (
+              <ServiceItemView key={j} detail={i as any} />
+            ))
+          ) : (
+            <div className="list-empty flex-center">
+              <Empty />
+            </div>
+          )}
+        </ProductListView>
+      </StoreServiceWrap>
+    </LayoutView>
+  );
+};
+
+export default StoreServicePage;
+// 样式
+const StoreServiceWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 1rem 0 0 0;
+  margin: 0 auto;
+  .detail-head {
+    margin-bottom: 1rem;
+    .head-content {
+      max-width: calc(100% - 10rem);
+    }
+    .head-image {
+      position: relative;
+      width: 3.5rem;
+      height: 3.5rem;
+      margin-right: 0.75rem;
+      .image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .head-content {
+      .content-title {
+        font-weight: bold;
+        margin-bottom: 0.25rem;
+      }
+      .content-star {
+        margin-bottom: 0.25rem;
+        .label {
+          margin-right: 0.5rem;
+          background: #fff2ee;
+          border-radius: 0.1rem;
+          border: 0.02rem solid #ff6242;
+          font-weight: 400;
+          font-size: 0.65rem;
+          color: #ff522f;
+          box-sizing: border-box;
+          padding: 0 0.25rem;
+        }
+      }
+      .content-type {
+        font-weight: 400;
+        font-size: 0.75rem;
+        color: #666666;
+      }
+    }
+  }
+`;