diff --git a/src/pages/Order/List/RelatedOrders.tsx b/src/pages/Order/List/RelatedOrders.tsx new file mode 100644 index 0000000..ed94eb7 --- /dev/null +++ b/src/pages/Order/List/RelatedOrders.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { Empty, Tag } from 'antd'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; + +dayjs.extend(relativeTime); + +/** + * RelatedOrders 表格组件 + * 用于展示订单详情中的关联数据(订阅/订单),按统一表格样式渲染 + * 中文注释:本组件将订阅与订单统一归一化为五列展示,便于快速浏览 + */ +const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => { + const rows = (Array.isArray(data) ? data : []).map((it: any) => { + const isSubscription = !!it?.externalSubscriptionId || !!it?.billing_period || !!it?.line_items; + const number = isSubscription ? `#${it?.externalSubscriptionId || it?.id}` : `#${it?.externalOrderId || it?.id}`; + const relationship = isSubscription ? 'Subscription' : 'Order'; + const dateRaw = it?.start_date || it?.date_created || it?.createdAt || it?.updatedAt; + const dateText = dateRaw ? dayjs(dateRaw).fromNow() : '-'; + const status = (isSubscription ? it?.status : it?.orderStatus) || '-'; + const statusLower = String(status).toLowerCase(); + const color = statusLower === 'active' ? 'green' : statusLower === 'cancelled' ? 'red' : 'default'; + const totalNum = Number(it?.total || 0); + const totalText = isSubscription ? `$${totalNum.toFixed(2)} / ${it?.billing_period || 'period'}` : `$${totalNum.toFixed(2)}`; + return { key: `${isSubscription ? 'sub' : 'order'}-${it?.id}`, number, relationship, dateText, status, color, totalText }; + }); + + if (rows.length === 0) return ; + + return ( +
+ {/* 表头(英文文案,符合国际化默认英文的要求) */} +
+
订单编号
+
关系
+
日期
+
状态
+
金额
+
+
+ {rows.map((r) => ( +
+
{r.number}
+
{r.relationship}
+
{r.dateText}
+
{r.status}
+
{r.totalText}
+
+ ))} +
+
+ ); +}; + +export default RelatedOrders; diff --git a/src/pages/Order/List/index.tsx b/src/pages/Order/List/index.tsx index fd10a92..8319353 100644 --- a/src/pages/Order/List/index.tsx +++ b/src/pages/Order/List/index.tsx @@ -80,7 +80,11 @@ import { Tag, } from 'antd'; import Item from 'antd/es/list/Item'; +<<<<<<< HEAD import RelatedOrders from '../../Subscription/Orders/RelatedOrders'; +======= +import RelatedOrders from './RelatedOrders'; +>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示) import React, { useMemo, useRef, useState } from 'react'; import { printPDF } from '@/utils/util'; @@ -912,6 +916,7 @@ const Detail: React.FC<{ ); }} /> +<<<<<<< HEAD {/* TODO 显示 related order */} +======= +>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示) {/* 显示 related order */} >>>>>> 90ea0f5 (feat(订单): 添加关联订单显示功能并创建订单商品和订阅订单页面) +======= +>>>>>>> 43be89b (feat(订单列表): 添加关联订单组件并优化订阅显示) interface OrderItemRow { id: number;