功能：品牌商家列表

src/api/interface/mall.ts

@@ -295,3 +295,44 @@ export type BrandStoreListType = InterFunction<
     userAccountId: number;
   }[]
 >;
+// 查询品牌方的商品
+export type QueryBrandGoodsType = InterFunction<
+  { userAccountId: number },
+  {
+    categoryPrimaryId: number;
+    categorySubId: number;
+    createTime: string;
+    description: string;
+    goodsDetails: string;
+    goodsLabel: string;
+    goodsSpecList: Array<{
+      chooseType: number;
+      goodsSpecValuesList: Array<{
+        channelPrice: number;
+        goodsSpecId: number;
+        id: number;
+        partNo: string;
+        salePrice: number;
+        showPrice: number;
+        specValueImage: string;
+        specValueName: string;
+        stock: number;
+      }>;
+      id: number;
+      mallGoodsId: number;
+      must: number;
+      skuUnitId: number;
+      specName: string;
+    }>;
+    id: number;
+    labelShow: number;
+    resourcesList: Array<{
+      id: number;
+      type: number;
+      url: string;
+    }>;
+    shelfStatus: number;
+    tradeName: string;
+    userAccountId: number;
+  }[]
+>;

src/api/modules/mall.ts

@@ -7,6 +7,7 @@ import {
   LeaseTermInfoType,
   ListCompanyInfoByCoopIdType,
   BrandStoreListType,
+  QueryBrandGoodsType,
 } from '@/api/interface/mall';
 import request from '../request';
 
@@ -42,4 +43,8 @@ export class MallAPI {
   // 品牌店铺列表
   static brandStoreList: BrandStoreListType = (params) =>
     request.post('/pms/app/goods/brandStoreList', params);
+
+  // 查询品牌方的商品
+  static queryBrandGoods: QueryBrandGoodsType = (params) =>
+    request.get('/pms/app/goods/queryBrandGoods', { params });
 }

src/components/breadcrumb/index.tsx

@@ -78,7 +78,10 @@ const BreadcrumbView: React.FC = () => {
     {
       name: '服务网点',
       path: 'store',
-      children: [{ name: '全国网点', path: 'map' }],
+      children: [
+        { name: '全国网点', path: 'map' },
+        { name: '品牌商家', path: 'product' },
+      ],
     },
   ];
   // 转换路由

src/components/home-comp/home-brand/index.tsx

 import React, { useEffect, useState } from 'react';
 import { Button } from 'antd';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { ListCompanyInfoByCoopIdType } from '@/api/interface/home';
-import QrcodePopover from '@/components/qrcodePopover';
 
 // 列表类型
 type ListType = InterListType<ListCompanyInfoByCoopIdType>;
 
 const HomeBrandView = () => {
+  // 路由钩子
+  const router = useRouter();
   // 店铺列表
   const [companyList, setCompanyList] = useState<ListType>([]);
   // 获取店铺列表
@@ -29,38 +31,42 @@ const HomeBrandView = () => {
       // console.log('获取网点数据 --->', companyList.value)
     }
   };
+  // 跳转列表
+  const handleList = async () => {
+    await router.push('/store/product');
+  };
+  // 跳转详情
+  const handleDetail = async (item: ListType[0]) => {
+    await router.push(`/store/product/${item?.backUserAccountId}`);
+  };
   // 组件挂载
   useEffect(() => {
     getListCompanyInfo().then();
   }, []);
   return (
     <HomeBrandWrap>
-      <QrcodePopover path={'page-product/product-company/index'}>
-        <div className="brand-item">
-          <div className="item-icon">
-            <img
-              src="/assets/image/home/home-brand-all.png"
-              alt="全部品牌"
-              className="image"
-            />
-          </div>
+      <div className="brand-item cursor-pointer" onClick={handleList}>
+        <div className="item-icon">
+          <img
+            src="/assets/image/home/home-brand-all.png"
+            alt="全部品牌"
+            className="image"
+          />
         </div>
-      </QrcodePopover>
+      </div>
       {companyList?.map((i, j) => (
-        <QrcodePopover
+        <div
+          className="brand-item cursor-pointer"
+          onClick={() => handleDetail(i)}
           key={j}
-          path={'page-product/product-store/index'}
-          scene={`id=${Number(i?.backUserAccountId)}`}
         >
-          <div className="brand-item">
-            <div className="item-logo">
-              <img src={i.brandLogo} alt={i.brandName} className="image" />
-            </div>
-            <Button type={'link'} className="item-name text-ellipsis">
-              {i.brandName || i.companyName}
-            </Button>
+          <div className="item-logo">
+            <img src={i.brandLogo} alt={i.brandName} className="image" />
           </div>
-        </QrcodePopover>
+          <Button type={'link'} className="item-name text-ellipsis">
+            {i.brandName || i.companyName}
+          </Button>
+        </div>
       ))}
     </HomeBrandWrap>
   );

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

+import React, { useEffect, useState } from 'react';
+import { Empty, Rate } from 'antd';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterDataType } from '@/api/interface';
+import {
+  GetCompanyInfoByBUId,
+  QueryBrandGoodsType,
+} from '@/api/interface/mall';
+import { MallAPI } from '@/api/modules/mall';
+import BreadcrumbView from '@/components/breadcrumb';
+import CategorySelectView, { CategoryType } from '@/components/categorySelect';
+import LayoutView from '@/components/layout';
+import ProductItemView from '@/components/productItem';
+import ProductListView from '@/components/productList';
+
+// 详情类型
+type DetailType = InterDataType<GetCompanyInfoByBUId>;
+// 商品列表类型
+type GoodsInfoListType = InterDataType<QueryBrandGoodsType>;
+
+const StoreProductDetailPage = () => {
+  // 路由钩子
+  const router = useRouter();
+  // 分类列表
+  const [categoryList, setCategoryList] = useState<CategoryType>([]);
+  // 店铺详情
+  const [storeDetail, setStoreDetail] = useState<DetailType>();
+  // 获取店铺详情
+  const getCompanyInfoByBUId = async () => {
+    const res = await MallAPI.getCompanyInfoByBUId({
+      backUserAccountId: Number(router?.query?.id),
+    });
+    if (res && res.code === '200') {
+      setStoreDetail(res.result);
+      // console.log('获取店铺详情 ===>', res);
+    }
+  };
+  // 商品列表
+  const [goodsInfoList, setGoodsInfoList] = useState<GoodsInfoListType>();
+  // 筛选过后的商品列表
+  const [goodsSelectList, setGoodsSelectList] = useState<GoodsInfoListType>();
+  // 分页数据
+  const [pagination, setPagination] = useState({
+    pageNo: 1,
+    pageSize: 18,
+    totalCount: 0,
+  });
+  // 获取品牌商的商品
+  const getQueryBrandGoods = async () => {
+    const res = await MallAPI.queryBrandGoods({
+      userAccountId: Number(router?.query?.id),
+    });
+    if (res && res.code === '200') {
+      setGoodsInfoList(res.result);
+      // console.log('商品列表 ===>', res.result);
+    }
+  };
+  // 获取各个目录及分类信息
+  const getAppCategoryInfo = async () => {
+    const res = await HomeAPI.appCategoryInfo({
+      type: 4,
+    });
+    if (res && res.code === '200') {
+      const mainIds = goodsInfoList?.map((i) => i?.categoryPrimaryId);
+      setCategoryList(
+        res.result
+          ?.map((i) => ({
+            value: i.id,
+            label: i.name,
+            children: i.subDTOList?.map((n) => ({
+              value: n.id,
+              label: n.name,
+            })),
+          }))
+          ?.filter((i) => mainIds?.includes(i?.value)),
+      );
+      // console.log('获取各个目录及分类信息 ===>', res.result);
+    }
+  };
+  // 选择监听
+  const handleSelect = (e: { main?: number; second?: number[] }) => {
+    const list = goodsInfoList?.filter(
+      (i) => e.second?.includes(i?.categorySubId),
+    );
+    setGoodsSelectList(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;
+    getCompanyInfoByBUId().then();
+    getQueryBrandGoods().then();
+  }, [router?.query]);
+  // 商品列表监听
+  useEffect(() => {
+    if (!goodsInfoList) return;
+    getAppCategoryInfo().then();
+  }, [goodsInfoList]);
+  return (
+    <LayoutView>
+      <StoreProductDetailWrap>
+        {/* 面包屑 */}
+        <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}>
+          {goodsSelectList?.length ? (
+            goodsSelectList?.map((i, j) => (
+              <ProductItemView key={j} detail={i as any} />
+            ))
+          ) : (
+            <div className="list-empty flex-center">
+              <Empty />
+            </div>
+          )}
+        </ProductListView>
+      </StoreProductDetailWrap>
+    </LayoutView>
+  );
+};
+
+export default StoreProductDetailPage;
+// 样式
+const StoreProductDetailWrap = 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;
+      }
+    }
+  }
+`;

src/pages/store/product/comp/_storeProductItem.tsx

@@ -31,9 +31,13 @@ const StoreProductItem: React.FC<{
     );
     router.push(`/mall/product/${data?.id}`).then();
   };
+  // 跳转详情
+  const handleStoreDetail = async () => {
+    await router.push(`/store/product/${detail?.backUserAccountId}`);
+  };
   return (
     <StoreProductWrap>
-      <div className="item-head">
+      <div className="item-head cursor-pointer" onClick={handleStoreDetail}>
         <img
           src={`${
             detail?.brandLogo || detail?.backImg