功能：商城订单详情

src/api/interface/orderManageType.ts

@@ -498,3 +498,107 @@ export type listPageManagerVerOne = InterListFunction<
     userName: string;
   }
 >;
+// v1.0.0订单管理-详情（改版后）
+export type getMallOrderDetailById = InterFunction<
+  {
+    orderId: number;
+  },
+  {
+    archiveDate: string;
+    companyName: string;
+    contractNo: string;
+    contractSignedWay: number;
+    cooperationTagId: number;
+    couponDiscountAmount: number;
+    createTime: string;
+    creditPeriod: string;
+    deductAmount: number;
+    deliveryTime: string;
+    discountAmount: number;
+    exp: {
+      orderId: number;
+      sendExpCode: string;
+      sendExpNo: string;
+      takeAddress: string;
+      takeName: string;
+      takePhone: string;
+      takeRegion: string;
+    };
+    goodsNum: number;
+    id: number;
+    kdn: {
+      logisticCode: string;
+      shipperCode: string;
+      stateEx: string;
+      traces: Array<{
+        acceptStation: string;
+        acceptTime: string;
+        action: string;
+        location: string;
+      }>;
+    };
+    mallOrderProdListDTOList: Array<{
+      id: number;
+      goodsInfoId: number;
+      productName: string;
+      model: string;
+      prodSkuSpecName: string;
+      prodSkuSpecImage: string;
+      partNo: string;
+      versionDesc: string;
+      buyNum: number;
+      unitPrice: number;
+      skuSpecAmount: number;
+    }>;
+    manualDiscountAmount: number;
+    mremark: string;
+    nickName: string;
+    ogSkuSpecDTOList: Array<{
+      id: number;
+      directoryId: number;
+      shopCarId: null;
+      skuSpecName: string;
+    }>;
+    operationId: number;
+    operationName: string;
+    orderAmount: number;
+    orderCouponDTOS: Array<{
+      couponName: string;
+      couponType: number;
+      couponUserId: number;
+      createTime: string;
+      id: number;
+      orderId: number;
+      useAmount: number;
+      useType: number;
+    }>;
+    orderName: string;
+    orderNo: string;
+    payErrInfo: string;
+    payMethod: number;
+    phoneNum: string;
+    realityAmount: number;
+    recMallUserName: string;
+    remark: string;
+    serviceNames: Array<string>;
+    shareId: number;
+    shareStatus: number;
+    shopCarAmount: number;
+    shutReason: string;
+    signStatus: number;
+    statusCode: number;
+    tagName: string;
+    uid: string;
+    userAccountId: number;
+    userAddress: {
+      id: number;
+      takeAddress: string;
+      takeName: string;
+      takePhone: string;
+      takeRegion: string;
+      type: number;
+    };
+    userAddressId: number;
+    userName: string;
+  }
+>;

src/api/modules/orderManage.ts

 import axios from '../request';
 import {
+  getMallOrderDetailById,
   listExpressInfoType,
   listOfRentalOrdersType,
   listPageManagerVerOne,
@@ -68,6 +69,10 @@ export class OrderManageAPI {
   // v1.0.0订单管理-分页查询（改版后）
   static listPageManagerVerOne: listPageManagerVerOne = (params) =>
     axios.post('/oms/pmorderVerOne/listPageManagerVerOne', params);
+
+  // v1.0.0订单管理-详情（改版后）
+  static getMallOrderDetailById: getMallOrderDetailById = (params) =>
+    axios.get('/oms/pmorderVerOne/getMallOrderDetailById', { params });
   //  服务-订单
   static getServiceOrderList: serviceOrderType = (data) =>
     axios.post('/oms/serviceOrderTask/queryOrderTaskList', data);

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

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Image } from 'antd';
+import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import { OrderManageAPI } from '~/api';
 
-function DetailDelivery() {
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
+// 列表的类型
+type ListType = InterDataType<orderImageDetailType>;
+// 设备状态列表
+const vcuSatusList = [
+  { label: '正常', value: 0 },
+  { label: '故障', value: 1 },
+];
+// 0:发货 1:收货 2:归还 3:平台收货
+const vcuTypeList = [
+  { label: '发货验收', value: 0 },
+  { label: '收货验收', value: 1 },
+  { label: '归还验收', value: 2 },
+  { label: '平台收货', value: 3 },
+  { label: '退货申请', value: 4 },
+];
+const DetailDelivery: React.FC<PropsType> = (props) => {
+  const { detail } = props;
+  // 验收信息列表
+  const [orderImageList, setOrderImageList] = useState<ListType>([]);
+  // 获取订单验收信息
+  const getOrderImageDetail = async () => {
+    const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
+    if (res && res.code === '200') {
+      setOrderImageList(res.result);
+      console.log('获取订单验收信息 --->', res.result);
+    }
+  };
+  // 转换设备状态
+  const getVcuSatus = (code: number) => {
+    return vcuSatusList.find((item) => item.value === code)?.label || code;
+  };
+  // 转换标题
+  const getVcuType = (code: number) => {
+    return vcuTypeList.find((item) => item.value === code)?.label || code;
+  };
+  // componentDidMount
+  useEffect(() => {
+    if (!detail) return;
+    getOrderImageDetail().then();
+  }, [detail]);
   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>
+      {orderImageList.map((i, j) => (
+        <div key={j}>
+          <div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
+          <div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
+          <div className={'detail-text'}>验收描述：{i.remark || '无'}</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) => (
+            {i.imgs?.map((i, j) => (
               <Image key={j} className={'image'} src={i} alt='付款凭证' />
             ))}
+            {!i.imgs && <div style={{ height: '30px' }}></div>}
           </div>
         </div>
+      ))}
+    </div>
   );
-}
+};
 
 export default DetailDelivery;

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

-import { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
+import { InterDataType } from '~/api/interface';
+import { orderDetailType } from '~/api/interface/orderManageType';
+import dayjs from 'dayjs';
 
 // 表格数据类型
 type TableType = any;
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
 
-function DetailInformation() {
+const DetailInformation: React.FC<PropsType> = (props) => {
+  const { detail } = props;
   // 表格数据
-  const [tableData] = useState<TableType>([{ id: 1 }]);
+  const [tableData, setTableData] = useState<TableType>([]);
   // 表格结构
   const columns: ColumnsType<TableType[0]> = [
     {
       title: '商品',
-      dataIndex: 'userName',
+      dataIndex: 'wareTitle',
       align: 'center',
-      render: (_text, _record) => `--`,
     },
     {
       title: '单价(元)',
-      dataIndex: 'userName',
+      dataIndex: 'unitPrice',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => `￥${text.toLocaleString()}`,
     },
     {
       title: '数量',
-      dataIndex: 'userName',
+      dataIndex: 'wareNum',
       align: 'center',
-      render: (_text, _record) => `--`,
     },
     {
       title: '订单状态',
-      dataIndex: 'userName',
+      dataIndex: 'waiting',
       align: 'center',
-      render: (_text, _record) => `--`,
     },
     {
-      title: '实收款',
-      dataIndex: 'userName',
+      title: '应收款',
+      dataIndex: 'shouldPay',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => `￥${text.toLocaleString()}`,
     },
   ];
+  useEffect(() => {
+    if (!detail) return;
+    setTableData([
+      {
+        id: 1,
+        wareTitle: detail?.wareTitle,
+        unitPrice: detail?.unitPrice,
+        wareNum: detail?.wareNum,
+        waiting: detail?.waiting,
+        shouldPay: detail?.shouldPay,
+      },
+    ]);
+  }, [detail]);
   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>
+        <span className={'item'}>订单编号：{detail?.orderNo}</span>
+        <span className={'item'} style={{ display: 'none' }}>
+          合同编号：UAV202334741131
+        </span>
+        <span className={'item'}>
+          订单租期：
+          {dayjs(detail?.startDate).format('YYYY-MM-DD')}
+          {' ~ '}
+          {dayjs(detail?.endDate).format('YYYY-MM-DD')}
+        </span>
+        <span className={'item'}>创建时间：{detail?.createTime}</span>
       </div>
       <Table
         style={{ margin: '20px auto', width: '90%' }}
@@ -59,8 +87,11 @@ function DetailInformation() {
         pagination={false}
         // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
       />
+      <div className='detail-price'>
+        实收款<span className={'num'}>￥ {detail?.actualPay}</span>元
+      </div>
     </div>
   );
-}
+};
 
 export default DetailInformation;

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

-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Image } from 'antd';
+import { orderDetailType } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import { OrderManageAPI } from '~/api';
 
-function DetailPurchaser() {
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
+
+const DetailPurchaser: React.FC<PropsType> = (props) => {
+  const { detail } = props;
+  // 物流列表
+  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
+  // 获取物流信息
+  const getListExpressInfo = async () => {
+    const res = await OrderManageAPI.listExpressInfo({});
+    if (res && res.code === '200') {
+      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
+      // console.log(res);
+    }
+  };
+  // 转换物流信息
+  const getExpressInfo = (code: string | undefined | null) => {
+    return expressList.find((item) => item.value === code)?.label || code;
+  };
+  // componentDidMount
+  useEffect(() => {
+    getListExpressInfo().then();
+  }, []);
   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-text'}>UID：{detail?.uid}</div>
+      <div className={'detail-text'}>姓名： {detail?.buyerName}</div>
+      <div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
+      {/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
+      <div className={'detail-text'}>备注： {detail?.remark}</div>
 
+      <div style={{ display: 'none' }}>
         <div className={'detail-title'}>合同信息</div>
         <div className={'detail-text'}>合同编号： UAV202334741131</div>
         <div className={'detail-text'}>合同状态： 已归档</div>
@@ -18,7 +50,9 @@ function DetailPurchaser() {
           <Button type={'link'}>查看</Button>
           <Button type={'link'}>下载</Button>
         </div>
+      </div>
 
+      <div style={{ display: 'none' }}>
         <div className={'detail-title'}>付款凭证</div>
         <div className={'detail-text'}>预付款：</div>
         <div className={'detail-image'}>
@@ -48,7 +82,28 @@ function DetailPurchaser() {
           ))}
         </div>
       </div>
+
+      <div className={'detail-title'}>发货信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
+      </div>
+
+      <div className={'detail-title'}>归还信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
+      </div>
+    </div>
   );
-}
+};
 
 export default DetailPurchaser;

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

@@ -2,9 +2,9 @@ import { useEffect, useState } 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';
+import DetailDelivery from '~/pages/orderManage/equipmentOrder/comp/detailDelivery';
+import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurchaser';
+import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation';
 import { OrderManageAPI } from '~/api';
 import { InterDataType } from '~/api/interface';
 import { orderDetailType } from '~/api/interface/orderManageType';

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

-import React, { useEffect, useState } from 'react';
-import { Image } from 'antd';
-import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
+import React, { useEffect } from 'react';
+import { Button } from 'antd';
+import { getMallOrderDetailById } from '~/api/interface/orderManageType';
 import { InterDataType } from '~/api/interface';
 import { OrderManageAPI } from '~/api';
 
 // 接口返回的类型
-type DataType = InterDataType<orderDetailType>;
+type DataType = InterDataType<getMallOrderDetailById>;
 // 参数类型
 type PropsType = {
   detail: DataType;
 };
-// 列表的类型
-type ListType = InterDataType<orderImageDetailType>;
-// 设备状态列表
-const vcuSatusList = [
-  { label: '正常', value: 0 },
-  { label: '故障', value: 1 },
-];
-// 0:发货 1:收货 2:归还 3:平台收货
-const vcuTypeList = [
-  { label: '发货验收', value: 0 },
-  { label: '收货验收', value: 1 },
-  { label: '归还验收', value: 2 },
-  { label: '平台收货', value: 3 },
-  { label: '退货申请', value: 4 },
-];
 const DetailDelivery: React.FC<PropsType> = (props) => {
   const { detail } = props;
-  // 验收信息列表
-  const [orderImageList, setOrderImageList] = useState<ListType>([]);
-  // 获取订单验收信息
-  const getOrderImageDetail = async () => {
-    const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
+  // 物流列表
+  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
+  // 获取物流信息
+  const getListExpressInfo = async () => {
+    const res = await OrderManageAPI.listExpressInfo({});
     if (res && res.code === '200') {
-      setOrderImageList(res.result);
-      console.log('获取订单验收信息 --->', res.result);
+      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
+      // console.log(res);
     }
   };
-  // 转换设备状态
-  const getVcuSatus = (code: number) => {
-    return vcuSatusList.find((item) => item.value === code)?.label || code;
-  };
-  // 转换标题
-  const getVcuType = (code: number) => {
-    return vcuTypeList.find((item) => item.value === code)?.label || code;
+  // 转换物流信息
+  const getExpressInfo = (code: string | undefined | null) => {
+    return expressList.find((item) => item.value === code)?.label || code;
   };
   // componentDidMount
   useEffect(() => {
-    if (!detail) return;
-    getOrderImageDetail().then();
-  }, [detail]);
+    getListExpressInfo().then();
+  }, []);
   return (
     <div className={'detail-delivery detail-half'}>
-      {orderImageList.map((i, j) => (
-        <div key={j}>
-          <div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
-          <div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
-          <div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
-          <div className={'detail-text'}>验收凭证：</div>
-          <div className={'detail-image'}>
-            {i.imgs?.map((i, j) => (
-              <Image key={j} className={'image'} src={i} alt='付款凭证' />
-            ))}
-            {!i.imgs && <div style={{ height: '30px' }}></div>}
+      <div className={'detail-title'}>发货信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
       </div>
+
+      <div className={'detail-title'}>归还信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
       </div>
-      ))}
     </div>
   );
 };

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

@@ -29,7 +29,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
       title: '单价(元)',
       dataIndex: 'unitPrice',
       align: 'center',
-      render: (text) => `￥${text.toLocaleString()}`,
+      render: (text) => `￥${text?.toLocaleString()}`,
     },
     {
       title: '数量',
@@ -45,7 +45,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
       title: '应收款',
       dataIndex: 'shouldPay',
       align: 'center',
-      render: (text) => `￥${text.toLocaleString()}`,
+      render: (text) => `￥${text?.toLocaleString()}`,
     },
   ];
   useEffect(() => {

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

-import React, { useEffect } from 'react';
+import React from 'react';
 import { Button, Image } from 'antd';
-import { orderDetailType } from '~/api/interface/orderManageType';
+import { getMallOrderDetailById } from '~/api/interface/orderManageType';
 import { InterDataType } from '~/api/interface';
-import { OrderManageAPI } from '~/api';
 
 // 接口返回的类型
-type DataType = InterDataType<orderDetailType>;
+type DataType = InterDataType<getMallOrderDetailById>;
 // 参数类型
 type PropsType = {
   detail: DataType;
@@ -13,30 +12,13 @@ type PropsType = {
 
 const DetailPurchaser: React.FC<PropsType> = (props) => {
   const { detail } = props;
-  // 物流列表
-  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
-  // 获取物流信息
-  const getListExpressInfo = async () => {
-    const res = await OrderManageAPI.listExpressInfo({});
-    if (res && res.code === '200') {
-      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
-      // console.log(res);
-    }
-  };
-  // 转换物流信息
-  const getExpressInfo = (code: string | undefined | null) => {
-    return expressList.find((item) => item.value === code)?.label || code;
-  };
-  // componentDidMount
-  useEffect(() => {
-    getListExpressInfo().then();
-  }, []);
+
   return (
     <div className={'detail-purchaser detail-half'}>
       <div className={'detail-title'}>买家信息</div>
       <div className={'detail-text'}>UID：{detail?.uid}</div>
-      <div className={'detail-text'}>姓名： {detail?.buyerName}</div>
-      <div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
+      <div className={'detail-text'}>姓名： {detail?.userName}</div>
+      <div className={'detail-text'}>手机号： {detail?.phoneNum}</div>
       {/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
       <div className={'detail-text'}>备注： {detail?.remark}</div>
 
@@ -52,7 +34,6 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
         </div>
       </div>
 
-      <div style={{ display: 'none' }}>
       <div className={'detail-title'}>付款凭证</div>
       <div className={'detail-text'}>预付款：</div>
       <div className={'detail-image'}>
@@ -82,27 +63,6 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
         ))}
       </div>
     </div>
-
-      <div className={'detail-title'}>发货信息</div>
-      <div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
-      <div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
-      <div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
-      <div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
-      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
-      <div className={'detail-text'}>
-        物流进度：-- <Button type={'link'}>查看详情</Button>
-      </div>
-
-      <div className={'detail-title'}>归还信息</div>
-      <div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
-      <div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
-      <div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
-      <div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
-      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
-      <div className={'detail-text'}>
-        物流进度：-- <Button type={'link'}>查看详情</Button>
-      </div>
-    </div>
   );
 };
 

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

-import { useEffect } from 'react';
+import { useEffect, useState } 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';
+import { getMallOrderDetailById } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import { OrderManageAPI } from '~/api';
+
+// 接口返回的类型
+type DataType = InterDataType<getMallOrderDetailById>;
 
 function ProductOrderDetail() {
   // 路由钩子
@@ -13,25 +19,53 @@ function ProductOrderDetail() {
   const [searchParams] = useSearchParams();
   // 接收到的参数
   const id = searchParams.get('id');
+  // 订单状态
+  const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
   // 返回上一页
   const handleBack = () => {
     navigate(-1);
   };
+  // 订单详情
+  const [orderDetail, setOrderDetail] = useState<DataType>(null!);
+  // 获取订单详情
+  const getOrderDetail = async () => {
+    const res = await OrderManageAPI.getMallOrderDetailById({
+      orderId: Number(id),
+    });
+    if (res && res.code === '200') {
+      setOrderDetail(res.result);
+      console.log('获取订单详情 --->', res.result);
+    }
+  };
+  // 获取订单状态
+  const getOrderStatus = async () => {
+    const res = await OrderManageAPI.orderListStatus({});
+    if (res && res.code === '200') {
+      const list = res.result.map((item) => ({ value: item.code, label: item.status }));
+      setOrderStatusList(list);
+    }
+  };
   // componentDidMount
   useEffect(() => {
-    console.log('拿到的id是 --->', id);
+    getOrderStatus().then();
+    getOrderDetail().then();
+    // console.log('拿到的id是 --->', id);
   }, [id]);
   return (
     <div className={'order-detail'}>
       <div className={'order-head'}>
         <div className='head-text'>
           <div>
-            <span>订单编号：R2023051916330461</span>
-            <span>合同编号：UAV202334741131</span>
+            <span>订单编号：{orderDetail?.orderNo}</span>
+            {/*<span>合同编号：UAV202334741131</span>*/}
           </div>
           <div>
-            <span>当前状态：交易完成</span>
-            <span>创建时间：2023-02-18 10:41:16</span>
+            <span>
+              当前状态：
+              {orderStatusList?.find((i) => i.value === orderDetail?.statusCode)?.label ||
+                orderDetail?.statusCode}
+            </span>
+            <span>创建时间：{orderDetail?.createTime}</span>
           </div>
         </div>
         <Button type={'primary'} onClick={() => handleBack()}>
@@ -39,9 +73,9 @@ function ProductOrderDetail() {
         </Button>
       </div>
       <div className={'detail-wrap'}>
-        <DetailPurchaser />
-        <DetailDelivery />
-        <DetailInformation />
+        <DetailPurchaser detail={orderDetail} />
+        <DetailDelivery detail={orderDetail} />
+        <DetailInformation detail={orderDetail} />
       </div>
     </div>
   );