功能：租赁列表

src/api/interface/home.ts

@@ -677,3 +677,65 @@ export type ForumListType = InterItemFunction<
     };
   }[]
 >;
+// 租赁商品列表
+export type LeaseGoodsListType = InterListFunction<
+  {
+    modelInfoId?: number;
+    brandInfoId?: number;
+    districtCode?: string;
+    productTypeId?: number;
+    shelfStatus?: number;
+    tradeName?: string;
+    userAccountId?: number;
+  },
+  {
+    id: number;
+    tradeName: string;
+    sellingPoint: string;
+    level: null;
+    shelfStatus: number;
+    productTypeId: number;
+    brandInfoId: null;
+    deviceModeId: null;
+    productParam: string;
+    resourcesList: Array<{
+      id: number;
+      url: string;
+      type: number;
+    }>;
+    specAttrList: null;
+    priceStock: Array<{
+      id: null;
+      productSpec: null;
+      cashPledge: number;
+      threeDaysRental: number;
+      sevenDaysRental: number;
+      thirtyDaysRental: null;
+      ninetyDaysRental: null;
+      maxDaysRental: null;
+      skuImage: null;
+      stock: number;
+      stockOut: null;
+    }>;
+    productDetails: null;
+    minLeaseTerm: number;
+    maxLeaseTerm: null;
+    leasePartsList: null;
+    shipAddress: null;
+    returnAddress: null;
+    logisticsCompany: null;
+    modeOfDelivery: null;
+    showPrice: number;
+    createTime: string;
+    userAccountId: number;
+    cashPledgeRange: string;
+    rentalRange: string;
+    stock: number;
+    districtCode: null;
+    productTypeName: null;
+    brandName: null;
+    deviceModeName: null;
+    modeOfDeliveryInfo: null;
+    companyName: string;
+  }
+>;

src/api/modules/home.ts

@@ -6,6 +6,7 @@ import {
   GetAppGambitListType,
   GetPageHomeCategoriesType,
   IndustryListPagesType,
+  LeaseGoodsListType,
   ListBannerImgType,
   ListBrandInfoType,
   ListCompanyInfoByCoopIdType,
@@ -76,4 +77,8 @@ export class HomeAPI {
   // 论坛列表
   static getForumList1: ForumListType = (params) =>
     request.get('/release/dynamic/dynamicList1', { params });
+
+  // 类型列表
+  static leaseGoodsList: LeaseGoodsListType = (params) =>
+    request.post('/pms/app/lease/leaseGoodsList', params);
 }

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

@@ -83,7 +83,7 @@ const HomeServiceWrap = styled.div`
   width: 100%;
   min-height: 16.75rem;
   box-sizing: border-box;
-  //padding-bottom: 2rem;
+  padding-bottom: 2rem;
   .service-tab {
     position: relative;
     width: 100%;

src/components/rentListItem/index.tsx

+import React from 'react';
+import { PropertySafetyFilled, ShoppingCartOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/router';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { InterListType } from '@/api/interface';
+import { LeaseGoodsListType } from '@/api/interface/home';
+import { GlobalDataState } from '@/store/module/globalData';
+
+// 商品详情类型
+type GoodsInfoListType = InterListType<LeaseGoodsListType>[0];
+
+const RentListItemView: React.FC<{
+  detail: GoodsInfoListType;
+}> = ({ detail }) => {
+  // 路由钩子
+  const router = useRouter();
+  // globalData
+  const globalData = useSelector(
+    (state: any) => state.globalData,
+  ) as GlobalDataState;
+  // 跳转商品详情
+  const handleDetail = () => {
+    // router.push(`/service/detail/${detail?.id}`).then();
+  };
+  // 获取商品的单位
+  // const getPriceUnit = () => {
+  //   const unit = globalData?.priceUnitList?.find(
+  //     (i) => i.id === detail?.inspectionPriceUnitId,
+  //   );
+  //   return unit?.unitName || '次';
+  // };
+  return (
+    <ProductItemWrap onClick={handleDetail}>
+      <div className="product-image">
+        <img
+          className="image"
+          src={`${detail?.resourcesList?.at(0)
+            ?.url}?x-oss-process=image/quality,q_10`}
+          alt="图片"
+        />
+      </div>
+      <div className="product-title">{detail?.tradeName}</div>
+      <div className="product-desc text-ellipsis">{detail?.sellingPoint}</div>
+      <div className="product-desc flex-between">
+        {/* <div className="money"> */}
+        {/*  {detail?.price ? ( */}
+        {/*    <> */}
+        {/*      <span className="label">￥</span> */}
+        {/*      <span */}
+        {/*        className="num" */}
+        {/*        title={`${formatMoney(detail?.price)}元起每${getPriceUnit()}`} */}
+        {/*      > */}
+        {/*        {formatMoney(detail?.price)} */}
+        {/*      </span> */}
+        {/*      <div */}
+        {/*        className="unit text-ellipsis" */}
+        {/*        title={`${formatMoney(detail?.price)}元起每${getPriceUnit()}`} */}
+        {/*      > */}
+        {/*        起/{getPriceUnit()} */}
+        {/*      </div> */}
+        {/*    </> */}
+        {/*  ) : ( */}
+        {/*    <span className="label">咨询报价</span> */}
+        {/*  )} */}
+        {/* </div> */}
+        {/* <div className="text text-ellipsis"> */}
+        {/*  成交{Math.floor(detail.id * 3.14)}件 */}
+        {/* </div> */}
+      </div>
+      <div className="product-store flex-start">
+        <PropertySafetyFilled style={{ color: '#FF552D' }} />
+        <div className="title text-ellipsis" title={detail?.companyName}>
+          {detail?.companyName}
+        </div>
+      </div>
+      <div className="product-cart">
+        <ShoppingCartOutlined style={{ color: '#ffffff', fontSize: '16px' }} />
+      </div>
+    </ProductItemWrap>
+  );
+};
+
+export default RentListItemView;
+const ProductItemWrap = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: calc((100% - (0.83rem * 5)) / 6);
+  height: 16rem;
+  border: 0.02rem solid #e3e3e3;
+  margin: 0 0.83rem 0.83rem 0;
+  padding: 0.67rem;
+  cursor: pointer;
+  &:nth-child(6n) {
+    margin-right: 0;
+  }
+  &:active,
+  &:hover {
+    background: #fff9f6;
+    border: 0.04rem solid #ff7a3e;
+  }
+  .product-image {
+    position: relative;
+    width: 100%;
+    height: 8rem;
+    box-sizing: border-box;
+    margin-bottom: 0.5rem;
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .product-title {
+    width: 100%;
+    font-size: 13px;
+    font-weight: 500;
+    color: #333333;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    margin-bottom: 0.33rem;
+    max-height: 2rem;
+  }
+  .product-desc {
+    position: relative;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 400;
+    color: #999999;
+    margin-bottom: 0.1rem;
+    align-items: baseline;
+    .label {
+      width: 60%;
+    }
+    .text {
+      width: 40%;
+      text-align: right;
+    }
+    .money {
+      font-size: 16px;
+      font-weight: 500;
+      color: #ff1b1b;
+      .label {
+        font-size: 12px;
+        font-weight: bold;
+      }
+      .num {
+        max-width: 60%;
+      }
+      .unit {
+        margin-left: 0.68rem;
+        font-size: 10px;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
+  }
+  .product-store {
+    position: absolute;
+    left: 0.67rem;
+    bottom: 0.67rem;
+    .title {
+      width: 6rem;
+      font-size: 12px;
+      font-weight: 400;
+      color: #666666;
+      margin-left: 0.25rem;
+    }
+  }
+  .product-cart {
+    position: absolute;
+    right: 0.67rem;
+    bottom: 0.67rem;
+    width: 2rem;
+    height: 2rem;
+    background: #ff8b2e;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:active,
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+`;

src/components/service-comp/index.tsx

@@ -69,9 +69,15 @@ const ServiceView: React.FC<{
   // 分类筛选
   const handleSelect = async (e: { main?: number; second?: number[] }) => {
     if (e.second?.length && e.second?.length > 1) {
-      await getListAPPCompanyInspectionPage({ industryTypeId: e?.main });
+      await getListAPPCompanyInspectionPage({
+        industryTypeId: e?.main,
+        pageNo: 1,
+      });
     } else {
-      await getListAPPCompanyInspectionPage({ inspectionId: e?.second?.[0] });
+      await getListAPPCompanyInspectionPage({
+        inspectionId: e?.second?.[0],
+        pageNo: 1,
+      });
     }
   };
   // 翻页回调

src/pages/rent/_view.tsx

+import React, { useEffect, useState } from 'react';
+import { Empty } from 'antd';
+import styled from 'styled-components';
+import { HomeAPI } from '@/api';
+import { InterListType, InterReqType } from '@/api/interface';
+import { LeaseGoodsListType, ListBrandInfoType } from '@/api/interface/home';
+import BreadcrumbView from '@/components/breadcrumb';
+import CategorySelectView, { CategoryType } from '@/components/categorySelect';
+import LayoutView from '@/components/layout';
+import ProductListView from '@/components/productList';
+import RentListItem from '@/components/rentListItem';
+
+// 分类列表类型
+type CategoryListType = InterListType<ListBrandInfoType>;
+// 列表类型
+type ListType = InterListType<LeaseGoodsListType>;
+// 请求参数类型
+type ReqType = InterReqType<LeaseGoodsListType>;
+
+const RentView: React.FC<{
+  categoryList: CategoryListType;
+}> = (props) => {
+  // 分类列表
+  const [categoryList, setCategoryList] = useState<CategoryType>([]);
+  // 转换分类列表
+  const getCategoryList = () => {
+    setCategoryList(
+      props?.categoryList?.map((i) => ({
+        value: i.id,
+        label: i.brandName,
+        children: i.modeInfoList?.map((n) => ({
+          value: n.id,
+          label: n.modeName,
+        })),
+      })),
+    );
+  };
+  // 分页数据
+  const [pagination, setPagination] = useState({
+    pageNo: 1,
+    pageSize: 18,
+    totalCount: 0,
+  });
+  // 列表数据
+  const [dataList, setDataList] = useState<ListType>([]);
+  // 获取商品列表
+  const getLeaseGoodsList = async (data: ReqType) => {
+    const res = await HomeAPI.leaseGoodsList({
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      ...data,
+    });
+    if (res && res.code === '200') {
+      console.log('获取商品列表 --->', res);
+      const { list, totalCount, pageNo, pageSize } = res.result;
+      setDataList(list || []);
+      setPagination({
+        ...pagination,
+        totalCount,
+        pageNo,
+        pageSize,
+      });
+    }
+  };
+  // 分类筛选
+  const handleSelect = async (e: { main?: number; second?: number[] }) => {
+    if (e.second?.length && e.second?.length > 1) {
+      await getLeaseGoodsList({
+        brandInfoId: e?.main,
+        pageNo: 1,
+      });
+    } else {
+      await getLeaseGoodsList({
+        modelInfoId: e?.second?.[0],
+        pageNo: 1,
+      });
+    }
+  };
+  // 翻页回调
+  const handlePageChange = async (pageNo: number, pageSize: number) => {
+    await getLeaseGoodsList({ pageNo, pageSize });
+  };
+  // 组件挂载
+  useEffect(() => {
+    if (!props) return;
+    getCategoryList();
+  }, [props]);
+  return (
+    <LayoutView placeholder={true}>
+      <RentViewWrap>
+        {/* 面包屑 */}
+        <BreadcrumbView />
+        {/* 类型筛选 */}
+        <CategorySelectView
+          list={categoryList}
+          isMultiple={false}
+          onSelect={handleSelect}
+        />
+        {/* 产品列表 */}
+        <ProductListView pagination={pagination} onChange={handlePageChange}>
+          {dataList?.length ? (
+            dataList?.map((i, j) => <RentListItem key={j} detail={i} />)
+          ) : (
+            <div className="list-empty flex-center">
+              <Empty />
+            </div>
+          )}
+        </ProductListView>
+      </RentViewWrap>
+    </LayoutView>
+  );
+};
+
+export default RentView;
+// 样式
+const RentViewWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 2rem 0 0 0;
+  margin: 0 auto;
+`;

src/pages/rent/index.tsx

+import React from 'react';
+import { HomeAPI } from '@/api';
+import { InterListType } from '@/api/interface';
+import { ListBrandInfoType } from '@/api/interface/home';
+import RentView from '@/pages/rent/_view';
+
+// 分类列表类型
+type CategoryListType = InterListType<ListBrandInfoType>;
+// 每次加载页面都会执行
+export async function getServerSideProps() {
+  // 分类数据
+  let categoryList: CategoryListType = [];
+  // 获取各个目录及分类信息
+  const getCategoryInfo = async () => {
+    const res = await HomeAPI.getListBrandInfo({
+      pageNo: 1,
+      pageSize: 999,
+    });
+    if (res && res.code === '200') {
+      categoryList = res.result?.list || [];
+    }
+  };
+  // 依次获取接口数据
+  await (async () => {
+    await getCategoryInfo();
+  })();
+  return { props: { categoryList } };
+}
+const RentPageView: React.FC<{
+  categoryList: CategoryListType;
+}> = (props) => <RentView {...props} />;
+
+export default RentPageView;