功能：订单列表、订单详情

src/components/layout/index.scss

@@ -209,6 +209,7 @@ $page-background:  #F3F6FF ;
     box-sizing: border-box;
     position: relative;
     box-shadow: 0 16px 24px 0 #eeeeee;
+    min-width: 720px;
   }
 
   .layout-content::-webkit-scrollbar {

src/pages/orderManage/productOrder/comp/detailDelivery/index.tsx

+import React from 'react';
+import { Image } from 'antd';
+
+function DetailDelivery() {
+  return (
+    <div className={'detail-delivery detail-half'}>
+      <div className={'detail-title'}>收货信息</div>
+      <div className={'detail-text'}>收货人：测试</div>
+      <div className={'detail-text'}>手机号：15889328503</div>
+      <div className={'detail-text'}>
+        收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
+      </div>
+
+      <div className={'detail-title'}>物流信息</div>
+      <div className={'detail-text'}>物流单号：YT6732436785799</div>
+      <div className={'detail-text'}>物流进度：--</div>
+
+      <div className={'detail-title'}>验收信息</div>
+      <div className={'detail-text'}>验收状态：已验收</div>
+      <div className={'detail-text'}>验收凭证：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetailDelivery;

src/pages/orderManage/productOrder/comp/detailInformation/index.tsx

+import { useState } from 'react';
+import { Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+
+// 表格数据类型
+type TableType = any;
+
+function DetailInformation() {
+  // 表格数据
+  const [tableData] = useState<TableType>([{ id: 1 }]);
+  // 表格结构
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '商品',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '单价(元)',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '数量',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '实收款',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+  ];
+  return (
+    <div className={'detail-information'}>
+      <div className={'detail-title'}>订单明细</div>
+      <div className={'detail-text'}>
+        <span className={'item'}>订单编号：UD202302181041156087</span>
+        <span className={'item'}>创建时间：2023-02-18 10:41:16</span>
+        <span className={'item'}>合同编号：UAV202334741131</span>
+      </div>
+      <Table
+        style={{ margin: '20px auto', width: '90%' }}
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        bordered
+        pagination={false}
+        // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
+      />
+    </div>
+  );
+}
+
+export default DetailInformation;

src/pages/orderManage/productOrder/comp/detailPurchaser/index.tsx

+import React from 'react';
+import { Button, Image } from 'antd';
+
+function DetailPurchaser() {
+  return (
+    <div className={'detail-purchaser detail-half'}>
+      <div className={'detail-title'}>买家信息</div>
+      <div className={'detail-text'}>UID： UID4460817</div>
+      <div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
+      <div className={'detail-text'}>备注： 测试单，不用管</div>
+
+      <div className={'detail-title'}>合同信息</div>
+      <div className={'detail-text'}>合同编号： UAV202334741131</div>
+      <div className={'detail-text'}>合同状态： 已归档</div>
+      <div className={'detail-text'}>
+        合同操作：
+        <Button type={'link'}>平台签署</Button>
+        <Button type={'link'}>查看</Button>
+        <Button type={'link'}>下载</Button>
+      </div>
+
+      <div className={'detail-title'}>付款凭证</div>
+      <div className={'detail-text'}>预付款：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+      <div className={'detail-text'}>尾款：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+      <div className={'detail-text'}>全款：</div>
+      <div className={'detail-image'}>
+        {[
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+          'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
+        ].map((i, j) => (
+          <Image key={j} className={'image'} src={i} alt='付款凭证' />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetailPurchaser;

src/pages/orderManage/productOrder/detail/index.scss

+.order-detail {
+  position: relative;
+  box-sizing: border-box;
+
+  .order-head {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .head-text {
+      font-size: 13px;
+      font-weight: 600;
+      color: #000000;
+
+      div {
+        margin-bottom: 10px;
+
+        span {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+
+  .detail-wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-top: 15px;
+    padding-bottom: 100px;
+
+    .detail-information {
+      margin-top: 10px;
+      width: 100%;
+    }
+
+    .detail-half {
+      width: 50%;
+    }
+
+    .detail-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #000000;
+      margin-bottom: 15px;
+      margin-top: 20px;
+    }
+
+    .detail-title:first-child {
+      margin-top: 0;
+    }
+
+    .detail-text {
+      margin-bottom: 10px;
+
+      .item {
+        margin-right: 20px;
+      }
+    }
+
+    .detail-image {
+      display: flex;
+      justify-content: flex-start;
+      margin-left: 56px;
+      margin-top: -20px;
+      margin-bottom: 10px;
+
+      .image {
+        width: 68px;
+        height: 68px;
+        //margin-right: 10px;
+      }
+
+      .ant-image {
+        margin-right: 10px;
+      }
+    }
+  }
+}

src/pages/orderManage/productOrder/detail/index.tsx

-import React, { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Button } from 'antd';
+import './index.scss';
+import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
+import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
+import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
 
 function ProductOrderDetail() {
   // 路由钩子
-  const location = useLocation();
-  // 接收参数
-  const { id } = location.state;
+  const navigate = useNavigate();
+  // 参数钩子
+  const [searchParams] = useSearchParams();
+  // 接收到的参数
+  const id = searchParams.get('id');
+  // 返回上一页
+  const handleBack = () => {
+    navigate(-1);
+  };
   // componentDidMount
   useEffect(() => {
     console.log('拿到的id是 --->', id);
   }, [id]);
   return (
-    <div>
-      <h2>ProductOrderDetail</h2>
-      <h3>{id}</h3>
+    <div className={'order-detail'}>
+      <div className={'order-head'}>
+        <div className='head-text'>
+          <div>
+            <span>订单编号：R2023051916330461</span>
+            <span>合同编号：UAV202334741131</span>
+          </div>
+          <div>
+            <span>当前状态：交易完成</span>
+            <span>创建时间：2023-02-18 10:41:16</span>
+          </div>
+        </div>
+        <Button type={'primary'} onClick={() => handleBack()}>
+          返回
+        </Button>
+      </div>
+      <div className={'detail-wrap'}>
+        <DetailPurchaser />
+        <DetailDelivery />
+        <DetailInformation />
+      </div>
     </div>
   );
 }

src/pages/orderManage/productOrder/index.tsx

@@ -3,6 +3,7 @@ import SearchBox from '~/components/search-box';
 import { Button, Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useNavigate } from 'react-router-dom';
+import qs from 'query-string';
 
 // 表格数据类型
 type TableType = any;
@@ -39,8 +40,8 @@ function ProductOrderView() {
   };
   // 跳转订单详情
   const handleDetail = (record: TableType[0]) => {
-    navigate(`/orderManage/productOrder/detail`, { state: { id: record.id } });
     console.log('跳转订单详情 --->', record.id);
+    navigate(`/orderManage/productOrder/detail?${qs.stringify({ id: record.id })}`);
   };
   // 表格结构
   const columns: ColumnsType<TableType[0]> = [