功能：租赁订单联调

src/api/interface/orderManageType.ts

@@ -339,3 +339,59 @@ export type listExpressInfoType = InterFunction<
     exCode: string;
   }[]
 >;
+// web/小程序 确认收货-订单
+export type renterTakeOrderType = InterFunction<
+  {
+    authPwd: string;
+    imgs: Array<string>;
+    orderInfoId: number;
+    orderRefundId: number;
+    remark: string;
+    renAddress: string;
+    renName: string;
+    renPhone: string;
+    sendAddress: string;
+    sendExCode: string;
+    sendExNo: string;
+    vcuSatus: number;
+    videoUrl: string;
+  },
+  NonNullable<unknown>
+>;
+// 后台管理——平台确认归还
+export type pfConfirmOrderWareType = InterFunction<
+  {
+    authPwd: string;
+    imgs: Array<string>;
+    orderInfoId: number;
+    orderRefundId: number;
+    remark: string;
+    renAddress: string;
+    renName: string;
+    renPhone: string;
+    sendAddress: string;
+    sendExCode: string;
+    sendExNo: string;
+    vcuSatus: number;
+    videoUrl: string;
+  },
+  NonNullable<unknown>
+>;
+// web-小程序——订单详情相关图片信息
+export type orderImageDetailType = InterFunction<
+  { orderInfoId: number },
+  {
+    id: number;
+    orderInfoId: number;
+    vcuType: number;
+    vcuSatus: number;
+    remark: string;
+    imgs: Array<string>;
+    videoUrl: string;
+  }[]
+>;
+// 后台管理关闭订单
+export type platFormCloseOrderType = InterFunction<
+  { orderInfoId: number; shutReason: string },
+  NonNullable<unknown>
+>;

src/api/modules/orderManage.ts

@@ -5,6 +5,10 @@ import {
   listPcWechatOrderType,
   listTranStatusType,
   orderDetailType,
+  orderImageDetailType,
+  pfConfirmOrderWareType,
+  platFormCloseOrderType,
+  renterTakeOrderType,
   sendOrderWareType,
 } from '~/api/interface/orderManageType';
 
@@ -29,7 +33,23 @@ export class OrderManageAPI {
   static sendOrderWare: sendOrderWareType = (params) =>
     axios.post('/oms/RentalOrders/sendOrderWare', params);
 
+  // web/小程序 确认收货-订单
+  static renterTakeOrder: renterTakeOrderType = (params) =>
+    axios.post('/oms/RentalOrders/renterTakeOrder', params);
+
+  // web/小程序 确认收货-订单
+  static pfConfirmOrderWare: pfConfirmOrderWareType = (params) =>
+    axios.post('/oms/RentalOrders/pfConfirmOrderWare', params);
+
   // v1.0.1 物流公司列表-字典
   static listExpressInfo: listExpressInfoType = (params) =>
     axios.get('/oms/express/listExpressInfo', { params });
+
+  // web-小程序——订单详情相关图片信息
+  static orderImageDetail: orderImageDetailType = (params) =>
+    axios.get('/oms/RentalOrders/orderImageDetail', { params });
+
+  // 后台管理关闭订单
+  static platFormCloseOrder: platFormCloseOrderType = (params) =>
+    axios.get('/oms/RentalOrders/platFormCloseOrder', { params });
 }

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

+import { OrderManageAPI } from '~/api';
+import React, { useEffect, useState } from 'react';
+import { Timeline } from 'antd';
+import { orderDetailType } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
+
+const DetailTimeLine: React.FC<PropsType> = (props) => {
+  const { detail } = props;
+  // 流程列表
+  const [timeLineList, setTimeLineList] = useState<{ label: string; color: string }[]>([]);
+  // 获取订单流程
+  const getOrderStatus = async () => {
+    const res = await OrderManageAPI.listTranStatus({});
+    if (res && res.code === '200') {
+      // 转换列表数据（区分完成和未完）
+      const list = res.result.map((i) => {
+        if (Number(i.status) < Number(detail?.tranStatus)) {
+          return {
+            label: i.doing,
+            color: '#1890ff',
+          };
+        } else {
+          return {
+            label: i.waiting,
+            color: '#ccc',
+          };
+        }
+      });
+      // 将当前项目变绿
+      const current = list.findIndex((i) => i.color === '#ccc');
+      list[current].color = '#52c41a';
+      setTimeLineList(list);
+    }
+  };
+  // componentDidMount
+  useEffect(() => {
+    if (!detail) return;
+    getOrderStatus().then();
+  }, [detail]);
+  return (
+    <div className={'detail-timeline'} style={{ width: '200px' }}>
+      <div className={'detail-title'}>订单流程</div>
+      <Timeline items={timeLineList} mode={'right'} />
+    </div>
+  );
+};
+
+export default DetailTimeLine;

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

+import { InterListType, InterReqType } from '~/api/interface';
+import { listPcWechatOrderType, platFormCloseOrderType } from '~/api/interface/orderManageType';
+import React from 'react';
+import { Form, message, Modal, Select } from 'antd';
+import { OrderManageAPI } from '~/api';
+
+// 表格数据类型
+type TableType = InterListType<listPcWechatOrderType>;
+// 请求数据的类型
+type ReqType = InterReqType<platFormCloseOrderType>;
+
+// 传参类型
+interface propType {
+  title: string;
+  open: boolean;
+  closed: any;
+  data?: TableType[0];
+}
+
+const OrderClosed: React.FC<propType> = (props) => {
+  OrderClosed.defaultProps = {
+    data: undefined,
+  };
+  // 参数
+  const { title, open, closed, data } = props;
+  // 表单钩子
+  const [form] = Form.useForm<ReqType>();
+  // 关闭弹窗
+  const handleCancel = () => {
+    form.resetFields();
+    closed();
+  };
+  // 确认事件
+  const handleOk = () => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        // console.log('确认事件 --->', values);
+        await handleSubmit(values);
+      })
+      .catch((err) => {
+        message
+          .warning({
+            content: err.errorFields[0].errors[0],
+          })
+          .then();
+      });
+  };
+  // 提交事件
+  const handleSubmit = async (values: ReqType) => {
+    const res = await OrderManageAPI.platFormCloseOrder({
+      ...values,
+      orderInfoId: Number(data?.id),
+    });
+    if (res && res.code === '200') {
+      message.success('操作成功');
+      handleCancel();
+    }
+  };
+  return (
+    <Modal
+      open={open}
+      title={title}
+      onCancel={handleCancel}
+      onOk={handleOk}
+      destroyOnClose
+      width={400}
+    >
+      <Form
+        name='addForm'
+        form={form}
+        labelAlign='right'
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 12 }}
+      >
+        <Form.Item
+          label='关闭理由'
+          name='shutReason'
+          rules={[{ required: true, message: '请选择关闭理由' }]}
+        >
+          <Select
+            placeholder={'请选择关闭理由'}
+            options={[
+              { label: '未及时付款' },
+              { label: '买家不想买' },
+              { label: '买家信息填写错误，重新下单' },
+              { label: '恶意买家，同行捣乱' },
+              { label: '缺货' },
+              { label: '买家拍错了' },
+              { label: '其他原因' },
+            ].map((i) => ({ label: i.label, value: i.label }))}
+            allowClear
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default OrderClosed;

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

+import { InterListType, InterReqType } from '~/api/interface';
+import { listPcWechatOrderType, pfConfirmOrderWareType } from '~/api/interface/orderManageType';
+import React, { useEffect } from 'react';
+import { Col, Form, Input, message, Modal, Radio, Row } from 'antd';
+import { Uploader } from '~/components/uploader';
+import { PlusOutlined } from '@ant-design/icons';
+import { OrderManageAPI } from '~/api';
+
+// 表格数据类型
+type TableType = InterListType<listPcWechatOrderType>;
+// 请求数据的类型
+type ReqType = InterReqType<pfConfirmOrderWareType>;
+
+// 传参类型
+interface propType {
+  title: string;
+  open: boolean;
+  closed: any;
+  data?: TableType[0];
+}
+
+const OrderConfirm: React.FC<propType> = (props) => {
+  OrderConfirm.defaultProps = {
+    data: undefined,
+  };
+  // 参数
+  const { title, open, closed, data } = props;
+  // 物流列表
+  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
+  // 表单钩子
+  const [form] = Form.useForm<ReqType>();
+  // 关闭弹窗
+  const handleCancel = () => {
+    form.resetFields();
+    closed();
+  };
+  // 确认事件
+  const handleOk = () => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        // console.log('确认事件 --->', values);
+        await handleSubmit(values);
+      })
+      .catch((err) => {
+        message
+          .warning({
+            content: err.errorFields[0].errors[0],
+          })
+          .then();
+      });
+  };
+  // 提交事件
+  const handleSubmit = async (values: ReqType) => {
+    const res = await OrderManageAPI.pfConfirmOrderWare({
+      ...values,
+      orderInfoId: Number(data?.id),
+    });
+    if (res && res.code === '200') {
+      message.success('操作成功');
+      handleCancel();
+    }
+  };
+  // 获取物流信息
+  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(() => {
+    if (!open) return;
+    if (!data) return;
+    getListExpressInfo().then();
+    console.log('data --->', data);
+  }, [open]);
+  return (
+    <Modal
+      open={open}
+      title={title}
+      onCancel={handleCancel}
+      onOk={handleOk}
+      destroyOnClose
+      width={600}
+    >
+      <Form
+        name='addForm'
+        form={form}
+        labelAlign='right'
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+      >
+        <Form.Item label='收货方式' labelCol={{ span: 4 }}>
+          物流归还
+        </Form.Item>
+        <Form.Item label='物流单号' labelCol={{ span: 4 }}>
+          {data?.receipt?.sendExNo}
+        </Form.Item>
+        <Form.Item label='物流公司' labelCol={{ span: 4 }}>
+          {getExpressInfo(data?.receipt?.sendExCode)}
+        </Form.Item>
+        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
+          <Col span={11}>
+            <Form.Item
+              label='质检照片'
+              name='imgs'
+              rules={[{ required: true, message: '请上传质检照片' }]}
+            >
+              <Uploader
+                listType={'picture-card'}
+                fileUpload
+                fileLength={3}
+                onChange={(e) => {
+                  form.setFieldValue(
+                    'imgs',
+                    e.map((item) => item.url),
+                  );
+                }}
+              >
+                <PlusOutlined />
+              </Uploader>
+            </Form.Item>
+          </Col>
+          <Col span={11}>
+            <Form.Item
+              label='质检视频'
+              name='videoUrl'
+              rules={[{ required: true, message: '请上传质检视频' }]}
+            >
+              <Uploader
+                listType={'picture-card'}
+                fileUpload
+                fileLength={1}
+                fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
+                fileSize={10}
+                onChange={(e) => {
+                  form.setFieldValue('videoUrl', e[0].url);
+                }}
+              >
+                <PlusOutlined />
+              </Uploader>
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
+          <Col span={11}>
+            <Form.Item
+              label='设备状态'
+              name='vcuSatus'
+              rules={[{ required: true, message: '请选择设备状态' }]}
+              initialValue={0}
+            >
+              <Radio.Group
+                options={[
+                  { label: '正常', value: 0 },
+                  { label: '故障', value: 1 },
+                ]}
+                onChange={(e) => {
+                  form.setFieldValue('vcuSatus', e.target.value);
+                }}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={11}>
+            <Form.Item
+              label='操作密码'
+              name='authPwd'
+              rules={[{ required: true, message: '请输入操作密码' }]}
+            >
+              <Input.Password
+                placeholder={'请输入操作密码'}
+                maxLength={20}
+                allowClear
+                autoComplete='new-password'
+              />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+
+export default OrderConfirm;

src/pages/orderManage/equipmentOrder/comp/detailDeliver/index.tsx → src/pages/orderManage/equipmentOrder/comp/orderDeliver/index.tsx

@@ -19,8 +19,8 @@ interface propType {
   data?: TableType[0];
 }
 
-const DetailDeliver: React.FC<propType> = (props) => {
-  DetailDeliver.defaultProps = {
+const OrderDeliver: React.FC<propType> = (props) => {
+  OrderDeliver.defaultProps = {
     data: undefined,
   };
   // 参数
@@ -247,4 +247,4 @@ const DetailDeliver: React.FC<propType> = (props) => {
   );
 };
 
-export default DetailDeliver;
+export default OrderDeliver;

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

@@ -41,6 +41,18 @@
       flex: 1;
     }
 
+    .detail-timeline {
+      overflow: hidden;
+
+      .ant-timeline {
+        transform: translateX(-90px) translateY(10px);
+      }
+
+      .ant-timeline .ant-timeline-item {
+        padding-bottom: 36px;
+      }
+    }
+
     .detail-title {
       font-size: 13px;
       font-weight: 600;
@@ -61,12 +73,24 @@
       }
     }
 
+    .detail-price {
+      text-align: right;
+      padding-right: 30px;
+      width: 100%;
+      font-size: 16px;
+
+      .num {
+        color: orangered;
+      }
+    }
+
     .detail-image {
       display: flex;
       justify-content: flex-start;
       margin-left: 56px;
       margin-top: -20px;
       margin-bottom: 10px;
+      flex-wrap: wrap;
 
       .image {
         width: 68px;
@@ -76,6 +100,7 @@
 
       .ant-image {
         margin-right: 10px;
+        margin-bottom: 10px;
       }
     }
   }

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

@@ -8,6 +8,7 @@ import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInfor
 import { OrderManageAPI } from '~/api';
 import { InterDataType } from '~/api/interface';
 import { orderDetailType } from '~/api/interface/orderManageType';
+import DetailTimeLine from '~/pages/orderManage/equipmentOrder/comp/detailTimeLine';
 // import DetailMessageBox from '~/pages/orderManage/equipmentOrder/comp/detailMessageBox';
 
 // 接口返回的类型
@@ -59,9 +60,10 @@ function EquipmentOrderDetail() {
       </div>
       <div className={'detail-wrap'}>
         <DetailPurchaser detail={orderDetail} />
-        <DetailDelivery />
+        <DetailDelivery detail={orderDetail} />
+        <DetailTimeLine detail={orderDetail} />
         {/*<DetailMessageBox />*/}
-        <DetailInformation />
+        <DetailInformation detail={orderDetail} />
       </div>
     </div>
   );

src/pages/orderManage/equipmentOrder/index.tsx

@@ -7,7 +7,9 @@ import qs from 'query-string';
 import { InterListType, InterReqType } from '~/api/interface';
 import { listPcWechatOrderType } from '~/api/interface/orderManageType';
 import { OrderManageAPI } from '~/api';
-import DetailDeliver from '~/pages/orderManage/equipmentOrder/comp/detailDeliver';
+import OrderDeliver from 'src/pages/orderManage/equipmentOrder/comp/orderDeliver';
+import OrderConfirm from '~/pages/orderManage/equipmentOrder/comp/orderConfirm';
+import OrderClosed from '~/pages/orderManage/equipmentOrder/comp/orderClosed';
 
 // 表格数据类型
 type TableType = InterListType<listPcWechatOrderType>;
@@ -33,6 +35,10 @@ function EquipmentOrderView() {
   const navigate = useNavigate();
   // 发货弹窗是否显示
   const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
+  // 收货弹窗是否显示
+  const [confirmVisible, setConfirmVisible] = useState<boolean>(false);
+  // 关闭弹窗是否显示
+  const [closedVisible, setClosedVisible] = useState<boolean>(false);
   // 当前选择的是第几个按钮
   const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
   // 订单状态搜索列表
@@ -120,14 +126,23 @@ function EquipmentOrderView() {
   const handleAction = (data: TableType[0]) => {
     const { tranStatus } = data;
     setEditData(data);
+    if (tranStatus === '100') {
+      setClosedVisible(true);
+    }
     if (tranStatus === '200') {
       setDeliverVisible(true);
     }
+    if (tranStatus === '500') {
+      setConfirmVisible(true);
+    }
   };
   // 关闭弹窗
   const handleClosed = () => {
     setEditData(undefined);
     setDeliverVisible(false);
+    setConfirmVisible(false);
+    setClosedVisible(false);
+    paginationChange(pagination.current, pagination.pageSize);
   };
   // componentDidMount
   useEffect(() => {
@@ -310,7 +325,21 @@ function EquipmentOrderView() {
         // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
       />
       {/*发货弹窗*/}
-      <DetailDeliver open={deliverVisible} title={'发货'} data={editData} closed={handleClosed} />
+      <OrderDeliver
+        open={deliverVisible}
+        title={'卖家发货'}
+        data={editData}
+        closed={handleClosed}
+      />
+      {/*收货弹窗*/}
+      <OrderConfirm
+        open={confirmVisible}
+        title={'确认收货'}
+        data={editData}
+        closed={handleClosed}
+      />
+      {/*关闭订单*/}
+      <OrderClosed open={closedVisible} title={'关闭订单'} data={editData} closed={handleClosed} />
     </>
   );
 }

src/pages/orderManage/productOrder/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 },
+];
+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>
-      <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>
+      {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>
+        </div>
+      ))}
     </div>
   );
-}
+};
 
 export default DetailDelivery;

src/pages/orderManage/productOrder/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';
 
 // 表格数据类型
 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'}>订单编号：{detail?.orderNo}</span>
+        <span className={'item'}>创建时间：{detail?.createTime}</span>
         <span className={'item'} style={{ display: 'none' }}>
           合同编号：UAV202334741131
         </span>
@@ -61,8 +80,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/productOrder/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';
 
 // 接口返回的类型
 type DataType = InterDataType<orderDetailType>;
@@ -12,11 +13,31 @@ 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'}>企业： 浙江科比特创新科技有限公司</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' }}>
@@ -61,6 +82,26 @@ 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>
   );
 };

vite.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
     host: '0.0.0.0',
     proxy: {
       '/api': {
-        // target: 'http://192.168.3.111:8077',后端女
-        target: 'https://test.iuav.shop',
+        target: 'http://192.168.3.111:8077', // 后端女oms
+        // target: 'https://test.iuav.shop',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },