功能：首页租赁跳转

src/components/home-comp/home-tab/comp/tabView03.tsx

 import React, { useEffect, useState } from 'react';
 import { Button } from 'antd';
+import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { ListBrandInfoType } from '@/api/interface/home';
+import { setGlobalData } from '@/store/module/globalData';
 
 // 列表类型
 type ListType = InterListType<ListBrandInfoType>;
 
 const TabView03 = () => {
+  // 导航钩子
+  const router = useRouter();
+  // store
+  const dispatch = useDispatch();
   // 列表数据
   const [tabList, setTabList] = useState<ListType>([]);
   // 获取云享商城分类
@@ -22,6 +29,24 @@ const TabView03 = () => {
       // console.log('获取云享商城分类 --->', res);
     }
   };
+  // 跳转一级分类详情
+  const handleMain = (i: ListType[0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
+    router.push(`/rent/${i?.id}`).then();
+  };
+  // 跳转二级分类详情
+  const handleSecond = (i: ListType[0], n: ListType[0]['modeInfoList'][0]) => {
+    dispatch(
+      setGlobalData({
+        loadingSpinnerVisible: true,
+      }),
+    );
+    router.push(`/rent/${i?.id}/${n?.id}`).then();
+  };
   // 组件挂载
   useEffect(() => {
     getListBrandInfo().then();
@@ -31,11 +56,18 @@ const TabView03 = () => {
       {tabList.map((i, j) => (
         <div key={j}>
           <div className={'tab-little flex-start'}>
-            <div className="title-name">{i.brandName}</div>
+            <div className="title-name" onClick={() => handleMain(i)}>
+              {i.brandName}
+            </div>
           </div>
           <div className="tab-list flex-start">
             {i.modeInfoList?.map((n, m) => (
-              <Button type={'link'} key={m} className="list-item">
+              <Button
+                type={'link'}
+                key={m}
+                className="list-item"
+                onClick={() => handleSecond(i, n)}
+              >
                 {n.modeName}
               </Button>
             ))}

src/components/rentListItem/index.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { InterListType } from '@/api/interface';
 import { LeaseGoodsListType } from '@/api/interface/home';
 import { GlobalDataState } from '@/store/module/globalData';
+import { formatMoney } from '@/utils/money';
 
 // 商品详情类型
 type GoodsInfoListType = InterListType<LeaseGoodsListType>[0];
@@ -23,13 +24,6 @@ const RentListItemView: React.FC<{
   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">
@@ -43,30 +37,30 @@ const RentListItemView: React.FC<{
       <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 className="money">
+          {detail?.showPrice ? (
+            <>
+              <span className="label">￥</span>
+              <span
+                className="num"
+                title={`${formatMoney(detail?.showPrice)}元起每天`}
+              >
+                {formatMoney(detail?.showPrice)}
+              </span>
+              <span
+                className="unit text-ellipsis"
+                title={`${formatMoney(detail?.showPrice)}元起每天`}
+              >
+                起/天
+              </span>
+            </>
+          ) : (
+            <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' }} />
@@ -86,7 +80,7 @@ const ProductItemWrap = styled.div`
   position: relative;
   box-sizing: border-box;
   width: calc((100% - (0.83rem * 5)) / 6);
-  height: 16rem;
+  height: 16.5rem;
   border: 0.02rem solid #e3e3e3;
   margin: 0 0.83rem 0.83rem 0;
   padding: 0.67rem;
@@ -120,7 +114,7 @@ const ProductItemWrap = styled.div`
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
-    margin-bottom: 0.33rem;
+    //margin-bottom: 0.33rem;
     max-height: 2rem;
   }
   .product-desc {
@@ -129,7 +123,7 @@ const ProductItemWrap = styled.div`
     font-size: 12px;
     font-weight: 400;
     color: #999999;
-    margin-bottom: 0.1rem;
+    //margin-bottom: 0.1rem;
     align-items: baseline;
     .label {
       width: 60%;

src/pages/rent/[main]/[second].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';
+import { wrapper } from '@/store';
+
+// 分类列表类型
+type CategoryListType = InterListType<ListBrandInfoType>;
+// 每次加载页面都会执行
+export const getServerSideProps = wrapper.getServerSideProps(
+  (_store) => async () => {
+    // 分类数据
+    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 Promise.all([getCategoryInfo()]);
+    })();
+    return { props: { categoryList } };
+  },
+);
+const RentSecondView: React.FC<{
+  categoryList: CategoryListType;
+}> = (props) => <RentView {...props} />;
+
+export default RentSecondView;

src/pages/rent/[main]/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';
+import { wrapper } from '@/store';
+
+// 分类列表类型
+type CategoryListType = InterListType<ListBrandInfoType>;
+// 每次加载页面都会执行
+export const getServerSideProps = wrapper.getServerSideProps(
+  (_store) => async () => {
+    // 分类数据
+    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 Promise.all([getCategoryInfo()]);
+    })();
+    return { props: { categoryList } };
+  },
+);
+const RentMainView: React.FC<{
+  categoryList: CategoryListType;
+}> = (props) => <RentView {...props} />;
+
+export default RentMainView;

src/pages/rent/index.tsx

@@ -3,11 +3,13 @@ import { HomeAPI } from '@/api';
 import { InterListType } from '@/api/interface';
 import { ListBrandInfoType } from '@/api/interface/home';
 import RentView from '@/pages/rent/_view';
+import { wrapper } from '@/store';
 
 // 分类列表类型
 type CategoryListType = InterListType<ListBrandInfoType>;
 // 每次加载页面都会执行
-export async function getServerSideProps() {
+export const getServerSideProps = wrapper.getServerSideProps(
+  (_store) => async () => {
     // 分类数据
     let categoryList: CategoryListType = [];
     // 获取各个目录及分类信息
@@ -22,10 +24,11 @@ export async function getServerSideProps() {
     };
     // 依次获取接口数据
     await (async () => {
-    await getCategoryInfo();
+      await Promise.all([getCategoryInfo()]);
     })();
     return { props: { categoryList } };
-}
+  },
+);
 const RentPageView: React.FC<{
   categoryList: CategoryListType;
 }> = (props) => <RentView {...props} />;

src/pages/service/[main]/[second].tsx

@@ -33,8 +33,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
     };
     // 依次获取接口数据
     await (async () => {
-      await getIndustryListPages();
-      await getPriceUnitList();
+      await Promise.all([getIndustryListPages(), getPriceUnitList()]);
     })();
     return { props: { categoryList } };
   },

src/pages/service/[main]/index.tsx

@@ -33,8 +33,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
     };
     // 依次获取接口数据
     await (async () => {
-      await getIndustryListPages();
-      await getPriceUnitList();
+      await Promise.all([getIndustryListPages(), getPriceUnitList()]);
     })();
     return { props: { categoryList } };
   },

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

@@ -53,9 +53,11 @@ export const getServerSideProps = wrapper.getServerSideProps(
     };
     // 依次获取接口数据
     await (async () => {
-      await getCompanyInspection();
-      await getCompanyInfo();
-      await getPriceUnitList();
+      await Promise.all([
+        getCompanyInspection(),
+        getCompanyInspection(),
+        getPriceUnitList(),
+      ]);
     })();
     return { props: { serviceDetail, storeDetail } };
   },

src/pages/service/index.tsx

@@ -33,8 +33,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
     };
     // 依次获取接口数据
     await (async () => {
-      await getIndustryListPages();
-      await getPriceUnitList();
+      await Promise.all([getIndustryListPages(), getPriceUnitList()]);
     })();
     return { props: { categoryList } };
   },