-
数量：
-
{record.count}
+ render: (_, record) => {
+ if (!record.items) {
+ return _;
+ }
+ return record.items.map((item) => (
+
+
+
+
+ {item.spuName}测试商品名称测试商品名称测试商品名称测试商品名称
+
+
{item.skuName}
+
+
+ 数量：
+ {item.count || 0}
+
+
+ 单价：
+
+ {item.price || 0}/{item.unit || '-'}
+
+
+
+ 到手价：
+
+ {item.handedPrice || 0}/{item.unit || '-'}
+
+
+
-
- 单价：
-
- {record.price}/{record.unit}
-
-
-
- 到手价：
-
- {record.handedPrice}/{record.unit}
-
-
-
-
- ),
+
+ ));
+ },
},
{
@@ -50,7 +59,7 @@ export const baseOrderColumns: ProColumns
[] = [
预约时间：
- {dayjs(record.subTime).format(dateFormatS)}
+ {record?.subTime || '-'}
预约
加急
@@ -58,14 +67,11 @@ export const baseOrderColumns: ProColumns[] = [
服务地址：
-
- {record.serveAddress}
- 服务地址：服务地址：服务地址：服务地址：服务地址：服务地址：
-
+ {record.serveAddress || '-'}
用户备注：
- {record.userRemark}
+ {record.userRemark || '-'}
),
@@ -74,20 +80,20 @@ export const baseOrderColumns: ProColumns[] = [
title: '财务',
dataIndex: 'price',
hideInSearch: true,
- width: '100',
+ width: '100%',
render: (_, record) => (
实付金额：
- {record.payPrice}
+ {record?.payPrice || '-'}
支付方式：
- {record.payType}
+ {record.payType || '-'}
财务状态：
- {record.financeStatus}
+ {record.financeStatus || '-'}
),
diff --git a/src/pages/trade/order/detail/component/info/basic-info.tsx b/src/pages/trade/order/detail/component/info/basic-info.tsx
index 0526171..a685d4c 100644
--- a/src/pages/trade/order/detail/component/info/basic-info.tsx
+++ b/src/pages/trade/order/detail/component/info/basic-info.tsx
@@ -1,23 +1,36 @@
import { ProCard } from '@ant-design/pro-components';
-import { Avatar, Button, Card, Empty, Space, Steps, Typography } from 'antd';
+import {
+ Avatar,
+ Button,
+ Card,
+ Divider,
+ Empty,
+ Space,
+ Steps,
+ Typography,
+} from 'antd';
import dayjs from 'dayjs';
import RcResizeObserver from 'rc-resize-observer';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { OrderStatus, OrderStatusLabels } from '@/constants/trade';
-import type { TradeOrderBaseInfo } from '@/services/trade/order';
+import type {
+ TradeOrderDetailRespVO,
+ TradeOrderStatusRespVo,
+} from '@/services/trade/order/detail';
+import type { ItemConfig } from '../../order-info';
import { type BtnType, renderBaseInfoOrder } from './config';
import styles from './index.module.less';
-const { Title, Text } = Typography;
-const BasicInfo: React.FC<{ data?: TradeOrderBaseInfo; id: number }> = (
- props,
-) => {
- const { data } = props;
+const { Text } = Typography;
+const BasicInfo: React.FC> = (props) => {
+ const { data, loading } = props;
const [orderStatus, setOrderStatus] = useState(0);
+ const [statusList, setStatusList] = useState([]);
useEffect(() => {
if (data) {
setOrderStatus(Number(data.orderStatus));
+ setStatusList(data?.statusList || []);
}
}, [data]);
@@ -27,22 +40,24 @@ const BasicInfo: React.FC<{ data?: TradeOrderBaseInfo; id: number }> = (
订单编号：
- {data?.orderNo}
+ {data?.orderNum}
订单类目：
-
{data?.orderCategoryId}
+
{data?.orderCategoryName}
ID:
-
{data?.id}
+
+
{data?.orderCategoryId}
订单来源：
- {data?.orderCategoryName}
+ {data?.orderTerminal}
-
+ {data?.userName || data?.userNickName}
+ {data?.userMobile}
+
);
}, [data]);
@@ -65,128 +80,184 @@ const BasicInfo: React.FC<{ data?: TradeOrderBaseInfo; id: number }> = (
return (
-
- {data ? (
+
+
+ {data ? (
+
+
+
+ {renderOrderStatus}
+
+
+
+ {
+ setResponsive(offset.width < 460);
+ }}
+ >
+
+ {dayjs(data.createTime).format('YYYY-MM-DD')}
+ {dayjs(data.createTime).format('HH:mm:ss')}
+
+ ),
+ },
+ {
+ title: `${
+ OrderStatusLabels[OrderStatus.PendingPayment].label
+ } ${
+ orderStatus > OrderStatus.PendingPayment
+ ? '(已付款)'
+ : ''
+ }`,
+ description: (
+
+ {dayjs(data.createTime).format('YYYY-MM-DD')}
+ {dayjs(data.createTime).format('HH:mm:ss')}
+
+ ),
+ },
+ {
+ title: `${
+ OrderStatusLabels[OrderStatus.PendingConfirmation]
+ .label
+ } ${
+ orderStatus > OrderStatus.PendingConfirmation
+ ? '(已确定)'
+ : ''
+ }`,
+ description: (
+
+ {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
+ {dayjs(data.finishTime).format("HH:mm:ss")} */}
+
+ ),
+ },
+ {
+ title: `${
+ OrderStatusLabels[OrderStatus.PendingService].label
+ } ${
+ orderStatus > OrderStatus.PendingService
+ ? '(已开始)'
+ : ''
+ }`,
+ description: (
+
+ {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
+ {dayjs(data.finishTime).format("HH:mm:ss")} */}
+
+ ),
+ },
+ {
+ title: `${
+ OrderStatusLabels[OrderStatus.PendingAcceptance].label
+ } ${
+ orderStatus > OrderStatus.PendingAcceptance
+ ? '(已验收)'
+ : ''
+ }`,
+ description: (
+
+ {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
+ {dayjs(data.finishTime).format("HH:mm:ss")} */}
+
+ ),
+ },
+ {
+ title: '完成',
+ description: (
+
+ {dayjs(data.finishTime).format('YYYY-MM-DD')}
+ {dayjs(data.finishTime).format('HH:mm:ss')}
+
+ ),
+ },
+ ]}
+ />
+
+
+
+ ) : (
+
+ )}
财务状态:{data?.financeStatus}}
>
-
-
- {renderOrderStatus}
-
+
+
+
+ 订单总价：
+ {data?.price}
+
+
+ 优惠总额：
+ {data?.discountPrice}
+
+
+ 实付金额：
+ {data?.payPrice}
+
+
+ 累计退款金额：
+ {data?.refundPrice}
+
+
+ 最终实收金额：
+ {data?.livePrice}
+
+
-
- {
- setResponsive(offset.width < 460);
- }}
- >
-
- {dayjs(data.createTime).format('YYYY-MM-DD')}
- {dayjs(data.createTime).format('HH:mm:ss')}
-
- ),
- },
- {
- title: `${
- OrderStatusLabels[OrderStatus.PendingPayment].label
- } ${
- orderStatus > OrderStatus.PendingPayment
- ? '(已付款)'
- : ''
- }`,
- description: (
-
- {dayjs(data.createTime).format('YYYY-MM-DD')}
- {dayjs(data.createTime).format('HH:mm:ss')}
-
- ),
- },
- {
- title: `${
- OrderStatusLabels[OrderStatus.PendingConfirmation].label
- } ${
- orderStatus > OrderStatus.PendingConfirmation
- ? '(已确定)'
- : ''
- }`,
- description: (
-
- {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
- {dayjs(data.finishTime).format("HH:mm:ss")} */}
-
- ),
- },
- {
- title: `${
- OrderStatusLabels[OrderStatus.PendingService].label
- } ${
- orderStatus > OrderStatus.PendingService
- ? '(已开始)'
- : ''
- }`,
- description: (
-
- {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
- {dayjs(data.finishTime).format("HH:mm:ss")} */}
-
- ),
- },
- {
- title: `${
- OrderStatusLabels[OrderStatus.PendingAcceptance].label
- } ${
- orderStatus > OrderStatus.PendingAcceptance
- ? '(已验收)'
- : ''
- }`,
- description: (
-
- {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
- {dayjs(data.finishTime).format("HH:mm:ss")} */}
-
- ),
- },
- {
- title: '完成',
- description: (
-
- {dayjs(data.finishTime).format('YYYY-MM-DD')}
- {dayjs(data.finishTime).format('HH:mm:ss')}
-
- ),
- },
- ]}
- />
-
+
+
+
+ 支付方式：
+ {data?.payType}
+
+
+ 支付渠道：
+ {data?.payChannelCode}
+
+
+ 支付时间：
+ {data?.payTime}
+
+
+ 交易流水：
+ {data?.payOrderId}
+
+
- ) : (
-
- )}
+