feat(订单页面): 增强订单列表展示功能

- 新增订单号、财务状态、支付时间等字段展示
- 调整现有字段顺序和显示名称
- 优化物流信息显示逻辑
- 修改订单统计查询接口为专用计数接口
This commit is contained in:
tikkhun 2026-01-07 15:22:48 +08:00
parent 4fd9cfee75
commit 6677114c46
2 changed files with 90 additions and 27 deletions

View File

View File

@ -64,21 +64,19 @@ const OrdersPage: React.FC = () => {
const columns: ProColumns<API.UnifiedOrderDTO>[] = [ const columns: ProColumns<API.UnifiedOrderDTO>[] = [
{ {
title: '订单', title: '订单ID',
dataIndex: 'id', dataIndex: 'id',
}, },
{
title:'订单号',
dataIndex: 'number',
},
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
valueType: 'select', valueType: 'select',
valueEnum: ORDER_STATUS_ENUM, valueEnum: ORDER_STATUS_ENUM,
}, },
{
title: '订单日期',
dataIndex: 'date_created',
hideInSearch: true,
valueType: 'dateTime',
},
{ {
title: '金额', title: '金额',
dataIndex: 'total', dataIndex: 'total',
@ -89,6 +87,38 @@ const OrdersPage: React.FC = () => {
dataIndex: 'currency', dataIndex: 'currency',
hideInSearch: true, hideInSearch: true,
}, },
{
title: '财务状态',
dataIndex: 'financial_status',
},
{
title: '支付方式',
dataIndex: 'payment_method',
},
{
title: '支付时间',
dataIndex: 'date_paid',
hideInSearch: true,
valueType: 'dateTime',
},
{
title: '创建时间',
dataIndex: 'date_created',
hideInSearch: true,
valueType: 'dateTime',
},
{
title: '更新时间',
dataIndex: 'date_modified',
hideInSearch: true,
valueType: 'dateTime',
},
{
title: '客户ID',
dataIndex: 'customer_id',
hideInSearch: true,
},
{ {
title: '客户邮箱', title: '客户邮箱',
dataIndex: 'email', dataIndex: 'email',
@ -96,6 +126,29 @@ const OrdersPage: React.FC = () => {
{ {
title: '客户姓名', title: '客户姓名',
dataIndex: 'customer_name', dataIndex: 'customer_name',
},
{
title: '客户IP',
dataIndex: 'customer_ip_address',
},
{
title: '联系电话',
render: (_, record) => record.shipping?.phone || record.billing?.phone,
},
{
title: '设备类型',
dataIndex: 'device_type',
hideInSearch: true,
},
{
title: '来源类型',
dataIndex: 'source_type',
hideInSearch: true,
},
{
title: 'UTM来源',
dataIndex: 'utm_source',
hideInSearch: true,
}, },
{ {
title: '商品', title: '商品',
@ -121,14 +174,6 @@ const OrdersPage: React.FC = () => {
return '-'; return '-';
}, },
}, },
{
title: '支付方式',
dataIndex: 'payment_method',
},
{
title: '联系电话',
render: (_, record) => record.shipping?.phone || record.billing?.phone,
},
{ {
title: '账单地址', title: '账单地址',
dataIndex: 'billing_full_address', dataIndex: 'billing_full_address',
@ -144,24 +189,46 @@ const OrdersPage: React.FC = () => {
width: 200, width: 200,
ellipsis: true, ellipsis: true,
copyable: true, copyable: true,
},
{
title: '发货状态',
dataIndex: 'fulfillment_status',
// hideInSearch: true,
// render: (_, record) => {
// const fulfillmentStatus = record.fulfillment_status;
// const fulfillmentStatusMap: Record<string, string> = {
// '0': '未发货',
// '1': '部分发货',
// '2': '已发货',
// '3': '已取消',
// '4': '确认发货',
// };
// if (fulfillmentStatus === undefined || fulfillmentStatus === null) {
// return '-';
// }
// return (
// fulfillmentStatusMap[String(fulfillmentStatus)] ||
// String(fulfillmentStatus)
// );
// },
}, },
{ {
title: '物流', title: '物流',
dataIndex: 'tracking', dataIndex: 'fulfillments',
hideInSearch: true, hideInSearch: true,
render: (_, record) => { render: (_, record) => {
// 检查是否有物流信息 // 检查是否有物流信息
if ( if (
!record.tracking || !record.fulfillments ||
!Array.isArray(record.tracking) || !Array.isArray(record.fulfillments) ||
record.tracking.length === 0 record.fulfillments.length === 0
) { ) {
return '-'; return '-';
} }
// 遍历物流信息数组, 显示每个物流的提供商和单号 // 遍历物流信息数组, 显示每个物流的提供商和单号
return ( return (
<div> <div>
{record.tracking.map((item: any, index: number) => ( {record.fulfillments.map((item: any, index: number) => (
<div <div
key={index} key={index}
style={{ display: 'flex', flexDirection: 'column' }} style={{ display: 'flex', flexDirection: 'column' }}
@ -422,7 +489,7 @@ const OrdersPage: React.FC = () => {
page: current, page: current,
per_page: pageSize, per_page: pageSize,
where, where,
...(orderObj ? { order: orderObj } : {}), ...(orderObj ? { orderBy: orderObj } : {}),
}, },
}); });
@ -474,12 +541,8 @@ const OrdersPage: React.FC = () => {
return { status: key, count: 0 }; return { status: key, count: 0 };
} }
try { try {
const res = await request(`/site-api/${siteId}/orders`, { const res = await request(`/site-api/${siteId}/orders/count`, {
params: { params: { ...baseWhere, status: rawStatus },
page: 1,
per_page: 1,
where: { ...baseWhere, status: rawStatus },
},
}); });
const totalCount = Number(res?.data?.total || 0); const totalCount = Number(res?.data?.total || 0);
return { status: key, count: totalCount }; return { status: key, count: totalCount };