From fc52444bd413f5cf177b6187825aa794e7d5139d Mon Sep 17 00:00:00 2001 From: guofei Date: Mon, 17 Jun 2024 16:33:25 +0800 Subject: [PATCH] feat: order list --- .umirc.ts | 6 + src/pages/Order/OrderDetails.tsx | 79 +++++++ src/pages/Order/index.tsx | 298 +++++++++++++++++++++++++- src/pages/User/UserDetails.tsx | 25 +-- src/services/system/order/index.ts | 10 + src/services/system/order/typing.d.ts | 1 + src/utils/const.ts | 9 +- src/utils/router.tsx | 10 - 8 files changed, 411 insertions(+), 27 deletions(-) create mode 100644 src/pages/Order/OrderDetails.tsx create mode 100644 src/services/system/order/index.ts diff --git a/.umirc.ts b/.umirc.ts index c1ba89f..236cf59 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -32,6 +32,12 @@ export default defineConfig({ redirect: '/home', routes: [], }, + { + name: '订单详情', + path: '/OrderDetails/:id', + component: 'Order/OrderDetails', + hideInMenu: true, + }, ], npmClient: 'pnpm', }); diff --git a/src/pages/Order/OrderDetails.tsx b/src/pages/Order/OrderDetails.tsx new file mode 100644 index 0000000..a920815 --- /dev/null +++ b/src/pages/Order/OrderDetails.tsx @@ -0,0 +1,79 @@ +import { getOrderByIdAPI } from '@/services/system/order'; +import { OrderPayType, OrderPayTypeStr, OrderStatus, UxOrderStatus, UxOrderStatusTag } from '@/utils/const'; +import { AlipayCircleOutlined, ArrowLeftOutlined, WechatOutlined } from '@ant-design/icons'; +import { history, useParams } from '@umijs/max'; +import { Button, Card, Descriptions, Skeleton } from 'antd'; +import { useEffect, useState } from 'react'; + +const OrderDetails = () => { + const { id } = useParams(); + const [orderInfo, seatOrderInfo] = useState>(); + + useEffect(() => { + getOrderByIdAPI(id!).then((result) => { + if (result.code === 200) { + seatOrderInfo(result.data); + } + }); + }, []); + + return ( + <> + + + + } + > + {orderInfo ? ( + + {orderInfo?.userEmail} + {orderInfo.orderNo} + {orderInfo.isApply ? '是' : '否'} + {orderInfo.goodsName} + + {orderInfo.payType === OrderPayType.WX && } + {orderInfo.payType === OrderPayType.ZFB && ( + + )} + + {Reflect.get(OrderPayTypeStr, orderInfo.payType)} + + +
+ {Reflect.get(UxOrderStatus, orderInfo.orderStatus as number)} +
+ + {orderInfo.price} + {orderInfo.quantity} + {orderInfo?.totalPrice} + + {orderInfo?.orderStatus === OrderStatus.NO_PAY ? orderInfo.payCodeExpired : '-'} + + {orderInfo.platformNo} + {orderInfo.platformOrderStatus} + {orderInfo.createdDateTime} + {orderInfo.lastUpdateDateTime} + {orderInfo.comment} + + ) : ( + + )} + + + ); +}; + +export default OrderDetails; diff --git a/src/pages/Order/index.tsx b/src/pages/Order/index.tsx index 29dc26f..3aa0f6c 100644 --- a/src/pages/Order/index.tsx +++ b/src/pages/Order/index.tsx @@ -1,5 +1,297 @@ -const page = () => { - return <>待开发; +import { getOrderListAPI } from '@/services/system/order'; +import { getPackageAPI } from '@/services/system/package'; +import { OrderPayType, OrderPayTypeStr, OrderStatus, UxOrderStatus, UxOrderStatusTag } from '@/utils/const'; +import { AlipayCircleOutlined, WechatOutlined } from '@ant-design/icons'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { history } from '@umijs/max'; +import { Button, Select, TableProps } from 'antd'; + +import { useEffect, useRef, useState } from 'react'; +const Page = () => { + const tableRef = useRef(); + + const [pkgOptions, setPkg] = useState([]); + + const [tableParams, setTableParams] = useState({ + pagination: { + current: 1, + pageSize: 10, + }, + }); + + const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter) => { + setTableParams({ + pagination, + filters, + ...sorter, + }); + }; + + useEffect(() => { + getPackageAPI().then((result) => { + setPkg(result.data); + }); + }, []); + + const handleOrderDetails = (record: Order.OrderItem) => { + history.push('/orderDetails/' + `${record.id}`); + }; + + const searchForm: ProColumns[] = [ + { + title: '订单号', + hideInTable: true, + align: 'center', + formItemProps: { + name: 'orderNo', + }, + valueType: 'text', + }, + { + title: '套餐', + hideInTable: true, + align: 'center', + formItemProps: { + name: 'packageId', + }, + renderFormItem: () => { + return ( + + ); + }, + }, + { + title: '用户', + hideInTable: true, + align: 'center', + formItemProps: { + name: 'userEmail', + }, + valueType: 'text', + }, + { + title: '订单状态', + hideInTable: true, + align: 'center', + formItemProps: { + name: 'orderStatus', + }, + renderFormItem: () => { + return ( + + ); + }, + }, + { + title: '支付类型', + hideInTable: true, + align: 'center', + formItemProps: { + name: 'payType', + }, + renderFormItem: () => { + return ( + + ); + }, + }, + ]; + + const columns: ProColumns[] = [ + ...searchForm, + { + title: '订单号', + dataIndex: 'orderNo', + align: 'center', + fixed: 'left', + hideInSearch: true, + width: 230, + render: (_, record: Order.OrderItem) => { + if (record.isApply === true) { + return record.orderNo + '(试用)'; + } + return record.orderNo; + }, + }, + { + title: '订单状态', + dataIndex: 'orderStatus', + fixed: 'left', + width: 140, + align: 'center', + hideInSearch: true, + render: (_, record: Order.OrderItem) => { + const color = Reflect.get(UxOrderStatusTag, record.orderStatus); + return ( +
+
+ {Reflect.get(UxOrderStatus, record.orderStatus)} +
+ ); + }, + }, + { + title: '支付总金额', + dataIndex: 'totalPrice', + width: 120, + hideInSearch: true, + align: 'center', + }, + { + title: '支付类型', + dataIndex: 'payType', + hideInSearch: true, + width: 100, + align: 'center', + render: (_, record: Order.OrderItem) => { + // 支付类型 1. 微信 2. 支付宝 3. paypal -1: 后台创建 + if ([OrderPayType.WX, OrderPayType.ZFB].includes(record.payType)) { + return ( +
+ {record.payType === OrderPayType.WX ? ( + + ) : ( + + )} + {Reflect.get(OrderPayTypeStr, record.payType)} +
+ ); + } + if (record.payType === OrderPayType.PAYPAL) { + return Reflect.get(OrderPayTypeStr, OrderPayType.PAYPAL); + } + return record.isApply ? '试用' : '-'; + }, + }, + { + title: '第三方订单号', + dataIndex: 'platformNo', + hideInSearch: true, + align: 'center', + }, + { + title: '第三方订单状态', + dataIndex: 'platformOrderStatus', + hideInSearch: true, + + width: 150, + align: 'center', + }, + { + title: '套餐', + dataIndex: 'goodsName', + hideInSearch: true, + width: 80, + align: 'center', + }, + { + title: '订单创建时间', + hideInSearch: true, + dataIndex: 'createdDateTime', + width: 200, + align: 'center', + }, + { + title: '订单完成时间', + hideInSearch: true, + dataIndex: 'lastUpdateDateTime', + width: 200, + align: 'center', + render: (_, record: Order.OrderItem) => { + if (record.orderStatus === OrderStatus.HAVE_PAY) { + return record.lastUpdateDateTime; + } + return ''; + }, + }, + { + title: '操作', + dataIndex: 'option', + valueType: 'option', + align: 'center', + render: (_: React.ReactNode, record: Order.OrderItem) => { + return ( + + ); + }, + }, + ]; + + return ( + <> + { + const { current, pageSize, ...other } = params; + const query = { + current, + pageSize, + orderNo: other.orderNo, + packageId: other.packageId, + orderStatus: other.orderStatus ? other.orderStatus.join(',') : [], + payType: other.payType ? other.payType.join(',') : [], + }; + const { meta, code, data } = await getOrderListAPI(query); + return { + data: data ?? [], + total: meta.total, + success: code === 200, + }; + }} + > + + ); }; -export default page; +export default Page; diff --git a/src/pages/User/UserDetails.tsx b/src/pages/User/UserDetails.tsx index 7f31a08..fabc307 100644 --- a/src/pages/User/UserDetails.tsx +++ b/src/pages/User/UserDetails.tsx @@ -143,7 +143,7 @@ const UserDetailsModal = (props: PropTypes) => { render: (_, record: Order.OrderItem) => { const color = Reflect.get(UxOrderStatusTag, record.orderStatus); return ( -
+
{Reflect.get(UxOrderStatus, record.orderStatus)}
@@ -279,17 +279,18 @@ const UserDetailsModal = (props: PropTypes) => { onCancel={handleOnCancel} > - setTabType(activeKey)}> - - - - - - - - - - + setTabType(activeKey)} + items={[ + { label: '用户详情', key: 'details' }, + { label: '扩容记录', key: 'handleLogs' }, + { label: '订单信息', key: 'orderInfo' }, + ]} + > + {tabType === 'details' && } + {tabType === 'handleLogs' && } + {tabType === 'orderInfo' && } ); diff --git a/src/services/system/order/index.ts b/src/services/system/order/index.ts new file mode 100644 index 0000000..339cb0b --- /dev/null +++ b/src/services/system/order/index.ts @@ -0,0 +1,10 @@ +import request from '@/utils/request'; +import qs from 'qs'; + +export const getOrderListAPI = (params: Record): Promise> => { + return request.get(`/system/order?` + qs.stringify(params)); +}; + +export const getOrderByIdAPI = (id: string): Promise> => { + return request.get(`/system/order/` + id); +}; diff --git a/src/services/system/order/typing.d.ts b/src/services/system/order/typing.d.ts index 0dbe4d5..3d1ab48 100644 --- a/src/services/system/order/typing.d.ts +++ b/src/services/system/order/typing.d.ts @@ -27,5 +27,6 @@ declare namespace Order { lastUpdateDateTime?: string; comment?: string; isApply: boolean; + totalPrice?: number; }; } diff --git a/src/utils/const.ts b/src/utils/const.ts index 15d4803..4c3da8e 100644 --- a/src/utils/const.ts +++ b/src/utils/const.ts @@ -4,7 +4,8 @@ export const UxOrderStatus: Record = { 2: '已支付', 3: '订单取消', 4: '支付失败', - 5: '订单超时支付（二维码过期）', + 5: '订单超时支付', + 999: '超时支付失败', }; export const UxOrderStatusTag: Record = { @@ -12,7 +13,8 @@ export const UxOrderStatusTag: Record = { 2: '#27ae60', // 绿色 3: '#c8d6e5', // 灰色 4: '#e74c3c', // 红色 - 5: '订单超时支付（二维码过期）', // + 5: '#c0392b', // + 999: '#c0392b', }; // 1: 待支付 2. 已支付 3. 订单取消 4. 支付失败 5. 订单超时支付（二维码过期） @@ -28,10 +30,13 @@ export enum OrderPayType { WX = 1, ZFB = 2, PAYPAL = 3, + BACK = -1, } export const OrderPayTypeStr = { 1: '微信', 2: '支付宝', 3: 'PayPal', + [-1]: '管理员创建', + [-2]: '前端创建', }; diff --git a/src/utils/router.tsx b/src/utils/router.tsx index 6736c0c..4cce120 100644 --- a/src/utils/router.tsx +++ b/src/utils/router.tsx @@ -38,16 +38,6 @@ export const routes: any[] = [ }, ], }, - // { - // name: '权限演示', - // path: '/access', - // component: '/Access', - // }, - // { - // name: ' CRUD 示例', - // path: '/table', - // component: '/Table', - // }, ]; export type MenuItem = {