功能：404页面

src/api/interface/mall.ts

@@ -75,3 +75,72 @@ export type QueryGoodsInfoByCategorySub = InterFunction<
     companyName: string;
   }[]
 >;
+// 小程序商品详情
+export type AppMallGoodsDetails = InterFunction<
+  { id: number },
+  {
+    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<{
+        id: number;
+        specName: string;
+        specValuesList: null;
+      }>;
+    }>;
+    tradeName: string;
+    userAccountId: number;
+    priceShow: number;
+  }
+>;
+// pc-后台用户id单位查询
+export type GetCompanyInfoByBUId = InterFunction<
+  {
+    backUserAccountId: 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: string;
+    remark: string;
+    score: string;
+    userAccountId: number;
+    province: string;
+    city: string;
+  }
+>;

src/api/modules/mall.ts

 import {
   QueryGoodsInfoByCategorySub,
   GetAppCategoryInfo,
+  AppMallGoodsDetails,
+  GetCompanyInfoByBUId,
 } from '@/api/interface/mall';
 import request from '../request';
 
@@ -12,4 +14,12 @@ export class MallAPI {
   // 根据子分类查询商品信息
   static queryGoodsInfoByCategorySub: QueryGoodsInfoByCategorySub = (params) =>
     request.post('/pms/app/goods/queryGoodsInfoByCategorySub', params);
+
+  // 小程序商品详情
+  static appMallGoodsDetails: AppMallGoodsDetails = (params) =>
+    request.get('/pms/app/goods/appMallGoodsDetails', { params });
+
+  // pc-后台用户id单位查询
+  static getCompanyInfoByBUId: GetCompanyInfoByBUId = (params) =>
+    request.get('/userapp/company/getCompanyInfoByBUId', { params });
 }

src/components/404/styled.tsx

+import styled from 'styled-components';
+
+export default function Index() {
+  return <></>;
+}
+
+export const PageNotFoundStyle = styled.div`
+  .tips {
+    font-size: 50px;
+    text-align: center;
+    margin-top: 10px;
+    color: #000;
+    font-weight: 600;
+    .me404 {
+      width: 1000px;
+      height: 480px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -400px;
+      margin-top: -240px;
+    }
+
+    .st0 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #e8ebed;
+    }
+    .st1 {
+      fill: #ffffff;
+      stroke: #89949b;
+      stroke-width: 3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+    .st2 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #dbdfe1;
+    }
+    .st3 {
+      fill: #ffffff;
+    }
+
+    .st4 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #e8ebed;
+      stroke: #89949b;
+      stroke-width: 3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+
+    .st5 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #ffffff;
+      stroke: #89949b;
+      stroke-width: 3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+
+    .st6 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: none;
+      stroke: #89949b;
+      stroke-width: 3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+
+    .st7 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: none;
+      stroke: #89949b;
+      stroke-width: 4;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+
+    .st8 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #ffffff;
+      stroke: #89949b;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+    .st9 {
+      fill: #89949b;
+    }
+    .st10 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #89949b;
+    }
+
+    .st11 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: none;
+      stroke: #89949b;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+    .st12 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #ffffff;
+    }
+
+    .st13 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: #ffffff;
+      stroke: #8894a0;
+      stroke-width: 3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+
+    .st14 {
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      fill: none;
+      stroke: #89949b;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+    .st15 {
+      fill: none;
+      stroke: #89949b;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+    }
+
+    #monkey-eye-l {
+      transform-origin: 191px 257px;
+      animation: blink-l 12s infinite ease-in-out;
+    }
+    #monkey-eye-r {
+      transform-origin: 205px 256px;
+      animation: blink-r 12s infinite ease-in-out;
+    }
+    @keyframes blink-l {
+      0% {
+        transform: rotateX(0deg);
+      }
+      2% {
+        transform: rotateX(80deg);
+      }
+      4%,
+      20% {
+        transform: rotateX(0deg);
+      }
+      22% {
+        transform: rotateX(80deg);
+      }
+      24%,
+      30% {
+        transform: rotateX(0deg);
+      }
+      32% {
+        transform: rotateX(80deg);
+      }
+      34%,
+      70% {
+        transform: rotateX(0deg);
+      }
+      72% {
+        transform: rotateX(80deg);
+      }
+      74%,
+      100% {
+        transform: rotateX(0deg);
+      }
+    }
+    @keyframes blink-r {
+      0% {
+        transform: rotateX(0deg);
+      }
+      2% {
+        transform: rotateX(80deg);
+      }
+      4%,
+      30% {
+        transform: rotateX(0deg);
+      }
+      32% {
+        transform: rotateX(80deg);
+      }
+      34%,
+      50% {
+        transform: rotateX(0deg);
+      }
+      52% {
+        transform: rotateX(80deg);
+      }
+      54%,
+      100% {
+        transform: rotateX(0deg);
+      }
+    }
+  }
+`;

src/components/breadcrumb/index.tsx

@@ -22,20 +22,29 @@ const BreadcrumbView: React.FC = () => {
   const router = useRouter();
   // 路由对应列表
   const routerList = [
-    { name: '云享商城', path: '/mall' },
-    { name: '行业服务', path: '/service' },
-    { name: '设备租赁', path: '/rent' },
-    { name: '执照培训', path: '/train' },
-    { name: '飞手约单', path: '/flyer' },
+    { name: '云享商城', path: 'mall' },
+    { name: '行业服务', path: 'service' },
+    { name: '设备租赁', path: 'rent' },
+    { name: '执照培训', path: 'train' },
+    { name: '飞手约单', path: 'flyer' },
+    { name: '商品详情', path: 'product' },
   ];
   // 转换路由
   const getCurrentRouter = () => {
-    return (
-      `/${router?.pathname
-        ?.split('/')
-        ?.filter((i) => i)
-        ?.at(0)}` || '/'
-    );
+    const arr = router?.pathname
+      ?.split('/')
+      ?.map((i, j) => {
+        const href = `/${router?.pathname
+          .split('/')
+          .slice(1, j + 1)
+          .join('/')}`;
+        const title = routerList?.find((n) => n.path === i)?.name;
+        return { title, href };
+      })
+      ?.filter((i) => i.title); // 过滤掉没有title的项
+    // 最后一项不跳转
+    arr[arr.length - 1] = { title: arr[arr.length - 1]?.title, href: '' };
+    return arr;
   };
   return (
     <BreadcrumbWrap>
@@ -47,10 +56,7 @@ const BreadcrumbView: React.FC = () => {
             title: '首页',
             href: '/',
           },
-          {
-            title: routerList.find((i) => i.path === getCurrentRouter())?.name,
-            href: getCurrentRouter(),
-          },
+          ...getCurrentRouter(),
         ]}
       />
     </BreadcrumbWrap>

src/pages/home/comp/home-search/index.tsx → src/components/home-comp/home-search/index.tsx

 import React from 'react';
 import { Input } from 'antd';
-import { HomeSearchWrap } from '@/pages/home/comp/home-search/styled';
+import { HomeSearchWrap } from './styled';
 
 const HomeSearchView = () => {
   return (

src/pages/home/comp/home-tab/index.tsx → src/components/home-comp/home-tab/index.tsx

@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { HomeAPI } from '@/api';
 import { InterDataType } from '@/api/interface';
 import { ListBannerImgType } from '@/api/interface/home';
-import TabView01 from '@/pages/home/comp/home-tab/comp/tabView01';
-import TabView02 from '@/pages/home/comp/home-tab/comp/tabView02';
-import TabView03 from '@/pages/home/comp/home-tab/comp/tabView03';
-import TabView04 from '@/pages/home/comp/home-tab/comp/tabView04';
-import TabView05 from '@/pages/home/comp/home-tab/comp/tabView05';
-import { HomeTabWrap } from '@/pages/home/comp/home-tab/styled';
+import TabView01 from './comp/tabView01';
+import TabView02 from './comp/tabView02';
+import TabView03 from './comp/tabView03';
+import TabView04 from './comp/tabView04';
+import TabView05 from './comp/tabView05';
+import { HomeTabWrap } from './styled';
 
 // 分类列表类型
 type CategoryListType = InterDataType<ListBannerImgType>;

src/components/layout/content/index.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { ContentWrap } from '@/components/layout/content/styled';
 
 const ContentView = ({ children }: { children?: React.ReactNode }) => {
-  return <ContentWrap>{!!children && children}</ContentWrap>;
+  return (
+    <div className={'animate__animated animate__faster animate__fadeIn'}>
+      <ContentWrap>{!!children && children}</ContentWrap>
+    </div>
+  );
 };
 
 export default ContentView;

src/components/layout/index.tsx

@@ -30,33 +30,31 @@ const LayoutView: React.FC<{
     );
   };
   return (
-    <div className={'animate__animated animate__faster animate__fadeIn'}>
-      <LayoutWrap>
-        <div
-          onClick={() => {
-            // setQrcodeShow(!qrcodeShow);
-          }}
-        >
-          {placeholder ? (
-            <HeaderView placeholder={true}></HeaderView>
-          ) : (
-            <HeaderView placeholder={false}></HeaderView>
-          )}
-          <ContentView>{children}</ContentView>
-          <FooterView></FooterView>
-        </div>
-        {/* 登录弹窗 */}
-        <LoginModalView
-          open={globalData?.loginModalVisible}
-          onCancel={handleClose}
-        />
-        {/* 功能正在完善中 */}
-        <QrcodeModalView
-          open={qrcodeShow}
-          onCancel={() => setQrcodeShow(false)}
-        />
-      </LayoutWrap>
-    </div>
+    <LayoutWrap>
+      <div
+        onClick={() => {
+          // setQrcodeShow(!qrcodeShow);
+        }}
+      >
+        {placeholder || placeholder === undefined ? (
+          <HeaderView placeholder={true}></HeaderView>
+        ) : (
+          <HeaderView placeholder={false}></HeaderView>
+        )}
+        <ContentView>{children}</ContentView>
+        <FooterView></FooterView>
+      </div>
+      {/* 登录弹窗 */}
+      <LoginModalView
+        open={globalData?.loginModalVisible}
+        onCancel={handleClose}
+      />
+      {/* 功能正在完善中 */}
+      <QrcodeModalView
+        open={qrcodeShow}
+        onCancel={() => setQrcodeShow(false)}
+      />
+    </LayoutWrap>
   );
 };
 

src/components/productItem/index.tsx

 import React from 'react';
 import { PropertySafetyFilled, ShoppingCartOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { InterDataType } from '@/api/interface';
 import { QueryGoodsInfoByCategorySub } from '@/api/interface/mall';
@@ -105,6 +106,8 @@ type GoodsInfoListType = InterDataType<QueryGoodsInfoByCategorySub>[0];
 const ProductItemView: React.FC<{
   detail: GoodsInfoListType;
 }> = ({ detail }) => {
+  // 路由钩子
+  const router = useRouter();
   // 获取最低价格
   const getLowerPrice = (item: GoodsInfoListType) => {
     const price =
@@ -113,8 +116,12 @@ const ProductItemView: React.FC<{
       ).salePrice || 0;
     return price.toLocaleString();
   };
+  // 跳转商品详情
+  const handleDetail = () => {
+    router.push(`/mall/product/${detail?.id}`).then();
+  };
   return (
-    <ProductItemWrap>
+    <ProductItemWrap onClick={handleDetail}>
       <div className="product-image">
         <img
           className="image"

src/pages/home/index.tsx

 import React from 'react';
-import HomeBottomView from '@/pages/home/comp/home-bottom';
-import HomeBrandView from '@/pages/home/comp/home-brand';
-import HomeMapView from '@/pages/home/comp/home-map';
-import HomeNewsView from '@/pages/home/comp/home-news';
-import HomeProductView from '@/pages/home/comp/home-product';
-import HomeSearchView from '@/pages/home/comp/home-search';
-import HomeServiceView from '@/pages/home/comp/home-service';
-import HomeTabView from '@/pages/home/comp/home-tab';
-import HomeTaskView from '@/pages/home/comp/home-task';
-import HomeTitleView from '@/pages/home/comp/home-title';
+import HomeBottomView from '@/components/home-comp/home-bottom';
+import HomeBrandView from '@/components/home-comp/home-brand';
+import HomeMapView from '@/components/home-comp/home-map';
+import HomeNewsView from '@/components/home-comp/home-news';
+import HomeProductView from '@/components/home-comp/home-product';
+import HomeSearchView from '@/components/home-comp/home-search';
+import HomeServiceView from '@/components/home-comp/home-service';
+import HomeTabView from '@/components/home-comp/home-tab';
+import HomeTaskView from '@/components/home-comp/home-task';
+import HomeTitleView from '@/components/home-comp/home-title';
 import { HomeWrap } from '@/pages/home/styled';
 
 const HomeView = () => {

src/pages/home/styled.tsx

 import styled from 'styled-components';
+import PageNotFoundView from '@/components/404';
 
-export default function Style() {
-  return <></>;
+export default function Index() {
+  return <PageNotFoundView />;
 }
 
 export const HomeWrap = styled.div`

src/pages/index.tsx

@@ -4,7 +4,7 @@ import HomeView from '@/pages/home';
 
 const App = () => {
   return (
-    <LayoutView>
+    <LayoutView placeholder={false}>
       <HomeView></HomeView>
     </LayoutView>
   );

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { InterDataType } from '@/api/interface';
 import { GetAppCategoryInfo } from '@/api/interface/mall';
 import { MallAPI } from '@/api/modules/mall';
-import MallView from '@/pages/mall/view';
+import MallView from '@/components/mall-comp/index';
 
 // 分类列表类型
 type CategoryListType = InterDataType<GetAppCategoryInfo>;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { InterDataType } from '@/api/interface';
 import { GetAppCategoryInfo } from '@/api/interface/mall';
 import { MallAPI } from '@/api/modules/mall';
-import MallView from '@/pages/mall/view';
+import MallView from '@/components/mall-comp/index';
 
 // 分类列表类型
 type CategoryListType = InterDataType<GetAppCategoryInfo>;

src/pages/mall/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { InterDataType } from '@/api/interface';
 import { GetAppCategoryInfo } from '@/api/interface/mall';
 import { MallAPI } from '@/api/modules/mall';
-import MallView from '@/pages/mall/view';
+import MallView from '@/components/mall-comp/index';
 
 // 分类列表类型
 type CategoryListType = InterDataType<GetAppCategoryInfo>;

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

+import React from 'react';
+import { GetServerSidePropsContext } from 'next';
+import { InterDataType } from '@/api/interface';
+import {
+  AppMallGoodsDetails,
+  GetCompanyInfoByBUId,
+} from '@/api/interface/mall';
+import { MallAPI } from '@/api/modules/mall';
+import BreadcrumbView from '@/components/breadcrumb';
+import LayoutView from '@/components/layout';
+import { ProductWrap } from '@/pages/mall/product/styled';
+
+// 商品详情类型
+type DetailType = InterDataType<AppMallGoodsDetails>;
+// 商城详情类型
+type StoreType = InterDataType<GetCompanyInfoByBUId>;
+
+// 每次加载页面都会执行
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  // 商品id
+  const id: number = Number(context.params?.id);
+  // 商品详情
+  let productDetail: DetailType | undefined;
+  // 店铺详情
+  let storeDetail: StoreType | undefined;
+  // 获取商品详情
+  const getMallGoodsDetails = async () => {
+    const res = await MallAPI.appMallGoodsDetails({ id });
+    if (res && res.code === '200') {
+      productDetail = res.result;
+      console.log('获取商品详情 --->', res);
+    }
+  };
+  // 获取店铺详情
+  const getCompanyInfoById = async () => {
+    const res = await MallAPI.getCompanyInfoByBUId({
+      backUserAccountId: Number(productDetail?.userAccountId),
+    });
+    if (res && res.code === '200') {
+      storeDetail = res.result;
+      console.log('获取店铺详情 --->', res);
+    }
+  };
+  // 依次获取接口数据
+  await (async () => {
+    await getMallGoodsDetails();
+    await getCompanyInfoById();
+  })();
+  return { props: { id, productDetail, storeDetail } };
+}
+
+const MallProductView: React.FC<{
+  id: number;
+  productDetail: DetailType;
+  storeDetail: StoreType;
+}> = ({ productDetail, storeDetail }) => {
+  return (
+    <LayoutView>
+      <ProductWrap>
+        {/* 面包屑 */}
+        <BreadcrumbView />
+        <div className="product-wrap flex-start"></div>
+        {productDetail?.tradeName}
+      </ProductWrap>
+    </LayoutView>
+  );
+};
+
+export default MallProductView;

src/pages/mall/product/styled.tsx

+import styled from 'styled-components';
+import PageNotFoundView from '@/components/404';
+
+export default function Index() {
+  return <PageNotFoundView />;
+}
+
+export const ProductWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 2rem 0 0 0;
+  margin: 0 auto;
+`;

src/pages/mall/styled.tsx

 import styled from 'styled-components';
+import PageNotFoundView from '@/components/404';
 
-export default function Style() {
-  return <></>;
+export default function Index() {
+  return <PageNotFoundView />;
 }
 
 export const MallWrap = styled.div`