功能：品牌商家列表

src/api/interface/mall.ts

-import { InterDataType, InterFunction } from '@/api/interface';
+import {
+  InterDataType,
+  InterFunction,
+  InterListFunction,
+} from '@/api/interface';
 
 // 小程序分类信息--含一二级分类
 export type GetAppCategoryInfo = InterFunction<
@@ -216,3 +220,78 @@ export type LeaseTermInfoType = InterFunction<
   any,
   { id: number; leaseDate: string }[]
 >;
+// 合作商家列表-根据合作标签id获取
+export type ListCompanyInfoByCoopIdType = InterListFunction<
+  {
+    coopId?: number;
+    lat?: number;
+    lon?: number;
+    // pageNo: number;
+    // pageSize: number;
+  },
+  {
+    address: string;
+    brandLogo: string;
+    brandName: string;
+    companyName: string;
+    companyType: number;
+    companyUserName: string;
+    content: string;
+    creditCode: string;
+    fullName: string;
+    id: number;
+    lat: number;
+    leader: number;
+    licenseImg: string;
+    lon: number;
+    phoneNum: number;
+    remark: string;
+    score: string;
+    userAccountId: number;
+    backImg: string;
+    city: string;
+    distance: number;
+    district: string;
+    province: string;
+    backUserAccountId: number;
+  }
+>;
+// 品牌店铺列表
+export type BrandStoreListType = InterFunction<
+  number[],
+  {
+    mallGoodsVOList: Array<{
+      categoryPrimaryId: number;
+      categorySubId: number;
+      createTime: string;
+      description: string;
+      goodsDetails: string;
+      goodsLabel: string;
+      id: number;
+      labelShow: number;
+      priceStock: Array<{
+        channelPrice: number;
+        id: number;
+        productSpec: string;
+        salePrice: number;
+        skuImage: string;
+        skuNo: string;
+        stock: number;
+      }>;
+      resourcesList: Array<{
+        id: number;
+        type: number;
+        url: string;
+      }>;
+      shelfStatus: number;
+      specAttrList: Array<{
+        id: number;
+        specName: string;
+        specValuesList: Array<null>;
+      }>;
+      tradeName: string;
+      userAccountId: number;
+    }>;
+    userAccountId: number;
+  }[]
+>;

src/api/modules/mall.ts

@@ -5,6 +5,8 @@ import {
   GetCompanyInfoByBUId,
   LeaseGoodsDetailsType,
   LeaseTermInfoType,
+  ListCompanyInfoByCoopIdType,
+  BrandStoreListType,
 } from '@/api/interface/mall';
 import request from '../request';
 
@@ -32,4 +34,12 @@ export class MallAPI {
   //  租赁-商品-租期信息
   static getLeaseTermInfo: LeaseTermInfoType = () =>
     request.post('/pms/lease/goods/getLeaseTermInfo');
+
+  // 合作商家列表-根据合作标签id获取
+  static listCompanyInfoByCoopId: ListCompanyInfoByCoopIdType = (params) =>
+    request.get('/userapp/cooperation/listCompanyInfoByCoopId', { params });
+
+  // 品牌店铺列表
+  static brandStoreList: BrandStoreListType = (params) =>
+    request.post('/pms/app/goods/brandStoreList', params);
 }

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

 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterDataType } from '@/api/interface';
 import { RecommendGoodsType } from '@/api/interface/home';
+import { setGlobalData } from '@/store/module/globalData';
 
 // 列表类型
 type ListType = InterDataType<RecommendGoodsType>;
@@ -11,6 +13,8 @@ type ListType = InterDataType<RecommendGoodsType>;
 const HomeProductView = () => {
   // 路由钩子
   const router = useRouter();
+  // store
+  const dispatch = useDispatch();
   // 推荐商品列表
   const [recommendGoodsList, setRecommendGoodsList] = useState<
     ListType[0]['mallGoodsList']
@@ -38,6 +42,11 @@ const HomeProductView = () => {
   };
   // 跳转详情
   const handleDetail = (item: ListType[0]['mallGoodsList'][0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
     router.push(`/mall/product/${item.id}`).then();
   };
   // 组件挂载

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

+import React from 'react';
+import { Button, Rate } from 'antd';
+import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
+import { InterDataType, InterListType } from '@/api/interface';
+import {
+  BrandStoreListType,
+  ListCompanyInfoByCoopIdType,
+} from '@/api/interface/mall';
+import { setGlobalData } from '@/store/module/globalData';
+
+// 详情类型
+type DetailType = InterListType<ListCompanyInfoByCoopIdType>[0];
+// 商品列表
+type StoreType = InterDataType<BrandStoreListType>;
+
+const StoreProductItem: React.FC<{
+  detail: DetailType & { mallGoodsVOList: StoreType[0]['mallGoodsVOList'] };
+}> = ({ detail }) => {
+  // 路由钩子
+  const router = useRouter();
+  // store
+  const dispatch = useDispatch();
+  // 跳转商品
+  const handleProductDetail = (data: StoreType[0]['mallGoodsVOList'][0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
+    router.push(`/mall/product/${data?.id}`).then();
+  };
+  return (
+    <StoreProductWrap>
+      <div className="item-head">
+        <img
+          src={`${
+            detail?.brandLogo || detail?.backImg
+          }?x-oss-process=image/quality,q_25`}
+          alt={detail?.companyName}
+          className="head-img"
+        />
+        <div className="head-content">
+          <div className="name">{detail?.companyName}</div>
+          <div className="star">
+            <Rate
+              disabled
+              defaultValue={Number(detail?.score) || 4}
+              className="text-xs text-primary"
+            />
+            <div className="type">无人机厂家</div>
+          </div>
+        </div>
+        <Button type="primary" shape="round" className="head-action">
+          进店
+        </Button>
+      </div>
+      <div className="item-media flex w-3/4 flex-wrap items-start justify-start">
+        {detail?.mallGoodsVOList?.length
+          ? detail?.mallGoodsVOList?.map((i, j) => (
+              <div
+                className={'image'}
+                key={j}
+                onClick={() => handleProductDetail(i)}
+              >
+                <img
+                  className={'img'}
+                  src={`${i?.resourcesList?.find((v) => v.type === 0)
+                    ?.url}?x-oss-process=image/quality,Q_50`}
+                  alt="图片"
+                />
+              </div>
+            ))
+          : undefined}
+      </div>
+    </StoreProductWrap>
+  );
+};
+
+export default StoreProductItem;
+// 样式
+const StoreProductWrap = styled.div`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 0.02rem solid #e3e3e3;
+  padding: 1rem;
+  .item-head {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    .head-img {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+      margin-right: 0.5rem;
+    }
+    .head-content {
+      .name {
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 0.25rem;
+      }
+      .star {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .type {
+          margin-left: 1rem;
+          font-size: 10px;
+          color: #999;
+        }
+      }
+    }
+    .head-action {
+      position: absolute;
+      top: 0;
+      right: 0.5rem;
+    }
+  }
+  .item-media {
+    .image {
+      width: calc((100% - 0.67rem * 3) / 4);
+      height: 8.6rem;
+      margin: 0 0.67rem 0.67rem 0;
+      border-radius: 0.5rem;
+      overflow: hidden;
+      .img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+`;

src/pages/store/product/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Empty, Segmented } from 'antd';
+import styled from 'styled-components';
+import { InterDataType, InterListType, InterReqType } from '@/api/interface';
+import {
+  BrandStoreListType,
+  ListCompanyInfoByCoopIdType,
+} from '@/api/interface/mall';
+import { MallAPI } from '@/api/modules/mall';
+import LayoutView from '@/components/layout';
+import ProductListView from '@/components/productList';
+import StoreProductItem from '@/pages/store/product/comp/_storeProductItem';
+
+// 列表类型
+type ListType = InterListType<ListCompanyInfoByCoopIdType>;
+// 请求类型
+type ReqType = InterReqType<ListCompanyInfoByCoopIdType>;
+// 商品列表
+type StoreType = InterDataType<BrandStoreListType>;
+
+// 任务列表筛选
+const actionList = [
+  { label: '综合顺序', value: 0, data: {} },
+  { label: '销量优先', value: 1, data: {} },
+  { label: '好评优先', value: 2, data: {} },
+];
+const StoreProductListPage = () => {
+  // 分页数据
+  const [pagination, setPagination] = useState({
+    pageNo: 1,
+    pageSize: 10,
+    totalCount: 0,
+    totalPage: 0,
+  });
+  // 商家列表
+  const [companyList, setCompanyList] =
+    useState<
+      Array<ListType[0] & { mallGoodsVOList: StoreType[0]['mallGoodsVOList'] }>
+    >();
+  // 获取商家列表
+  const getListCompanyInfoByCoopId = async (data?: ReqType) => {
+    const res = await MallAPI.listCompanyInfoByCoopId({
+      coopId: 1,
+      lat: 30,
+      lon: 120,
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      ...data,
+    });
+    if (res && res.code === '200') {
+      const { list, pageNo, totalPage, totalCount } = res.result;
+      setPagination({
+        ...pagination,
+        pageNo,
+        totalPage,
+        totalCount,
+      });
+      // 获取所有店铺的id
+      const companyIdList = list?.map((i) => i.backUserAccountId) || [];
+      // const companyList = [57]
+      // 如果没有id则不请求
+      if (companyIdList.length <= 0) return;
+      // 获取店铺商品列表
+      const productList = await MallAPI.brandStoreList(companyIdList);
+      // 将商品列表添加到品牌列表中
+      const brandList = list?.map((i) => ({
+        ...i,
+        mallGoodsVOList:
+          productList?.result?.find(
+            (n) => n.userAccountId === i.backUserAccountId,
+          )?.mallGoodsVOList || [],
+      }));
+      setCompanyList(brandList || []);
+      // // 将科比特提前到第一个
+      // const kbt = companyBrandList.value?.filter((i) => i.companyName.includes('科比特'))
+      // const other = companyBrandList.value?.filter((i) => !i.companyName.includes('科比特'))
+      // // 合并数据
+      // companyBrandList.value = [...kbt, ...other]
+    }
+  };
+  // 翻页事件
+  const handlePageChange = async (pageNo: number, pageSize: number) => {
+    await getListCompanyInfoByCoopId({ pageNo, pageSize });
+  };
+  // 组件挂载
+  useEffect(() => {
+    getListCompanyInfoByCoopId().then();
+  }, []);
+  return (
+    <LayoutView contentTitle={'全部品牌'}>
+      <StoreProductListWrap>
+        <div className="tab">
+          <Segmented
+            options={actionList?.map((i) => i?.label)}
+            size="large"
+            defaultValue={'附近'}
+            // onChange={handleSelectAction}
+          />
+        </div>
+        <ProductListView pagination={pagination} onChange={handlePageChange}>
+          {companyList?.length ? (
+            companyList?.map((i, j) => <StoreProductItem key={j} detail={i} />)
+          ) : (
+            <div className="list-empty flex-center">
+              <Empty />
+            </div>
+          )}
+        </ProductListView>
+      </StoreProductListWrap>
+    </LayoutView>
+  );
+};
+
+export default StoreProductListPage;
+// 样式
+const StoreProductListWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 1rem 0 0 0;
+  margin: 0 auto;
+  .tab {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+  }
+`;