feat: 基本信息

2025-10-17 17:43:42 +08:00
parent 3c7473f8d1
commit 263a7d3e20
20 changed files with 1745 additions and 492 deletions
--- a/src/components/DrawerForm/index.tsx
+++ b/src/components/DrawerForm/index.tsx
@@ -2,7 +2,12 @@ import type { ProFormColumnsType } from '@ant-design/pro-components';
 import { BetaSchemaForm } from '@ant-design/pro-components';
 import { Button, type ColProps, Drawer, Space } from 'antd';
 import type { FormInstance } from 'antd/lib';
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';

 interface ConfigurableDrawerFormProps {
  title?: string;
@@ -56,7 +61,17 @@ const ConfigurableDrawerForm = forwardRef<
      },
      close: () => setOpen(false),
    }));
-
+    const renderChildren = () => {
+      return Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          // 使用更安全的方式传递属性，避免 TypeScript 错误
+          return cloneElement(child, {
+            ...formData,
+          } as any);
+        }
+        return child;
+      });
+    };
    const handleSubmit = async () => {
      try {
        if (onSubmit) {
@@ -75,7 +90,7 @@ const ConfigurableDrawerForm = forwardRef<
        setLoading(false);
      }
    };
-    console.log(footer);
+
    return (
      <Drawer
        title={title}
@@ -122,7 +137,8 @@ const ConfigurableDrawerForm = forwardRef<
            submitter={false}
          />
        ) : (
-          children
+          renderChildren()
+          // children
        )}
      </Drawer>
    );
--- a/src/components/EnhancedProTable/index.tsx
+++ b/src/components/EnhancedProTable/index.tsx
@@ -25,57 +25,6 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
    ...restProps
  } = props;

-  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-  // const [selectedRows, setSelectedRows] = useState<T[]>([]);
-  // // 行选择配置
-  // const rowSelection = useMemo(() => {
-  //   if (!showSelection) return undefined;
-  //   return {
-  //     selectedRowKeys,
-  //     selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-  //     onChange: (keys: React.Key[], rows: T[]) => {
-  //       setSelectedRowKeys(keys);
-  //       setSelectedRows(rows);
-  //     },
-  //     getCheckboxProps: (record: T) => ({
-  //       name: record[rowKey]?.toString(),
-  //     }),
-  //   };
-  // }, [showSelection, selectedRowKeys]);
-
-  // // 处理行点击事件
-  // const handleRowClick = useCallback(
-  //   (record: T, index?: number) => {
-  //     console.log("handleRowClick");
-  //     if (!enableRowClick) return {};
-  //     return {
-  //       onClick: (event: React.MouseEvent<HTMLElement>) => {
-  //         // 阻止事件冒泡到其他元素
-  //         event.stopPropagation();
-
-  //         // 如果点击的是 checkbox 或其他交互元素，不处理行选中
-  //         const target = event.target as HTMLElement;
-  //         console.log("handleRowClick");
-  //         if (
-  //           target.closest(".ant-checkbox") ||
-  //           target.closest(".ant-btn") ||
-  //           target.closest(".ant-dropdown") ||
-  //           target.closest("a")
-  //         ) {
-  //           return;
-  //         }
-
-  //         // // 切换选中状态
-  //         // handleRowSelect(record, !isSelected);
-
-  //         // // 调用原始的 onRow 点击事件
-  //         onRow?.(record, index)?.onClick?.(event);
-  //       },
-  //     };
-  //   },
-  //   [enableRowClick, onRow]
-  // );
-
  const toolBarRender = useCallback(() => {
    const toolbarElements =
      toolbarActions?.map((action) => {
@@ -105,7 +54,8 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
      toolBarRender={toolBarRender}
      manualRequest={false}
      showSorterTooltip
-      scroll={{ x: 'max-content' }}
+      // scroll={{ x: "max-content" }}
+      scroll={{ x: 1200 }}
      components={components}
      search={
        search
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -35,3 +35,6 @@ export const systemDataScopetStatus = [
  { label: '部门及以下数据权限', value: 4 },
  { label: '仅本人数据权限', value: 5 },
 ];
+
+export const dateFormat = 'YYYY-MM-DD';
+export const dateFormatS = 'YYYY-MM-DD HH:mm:ss';
--- a/src/constants/order.ts
+++ b/src/constants/order.ts
--- a/src/constants/trade.ts
+++ b/src/constants/trade.ts
@@ -0,0 +1,55 @@
+import type { BadgeProps } from 'antd';
+
+export enum OrderStatus {
+  All = 1,
+  PendingPayment = 10,
+  PendingConfirmation = 20,
+  PendingService = 30,
+  PendingAcceptance = 40,
+  Completed = 50,
+  Cancelled = 60,
+  Refunded = 70,
+}
+
+export const OrderBtnLableMap: Record<OrderStatus, string> = {
+  [OrderStatus.PendingPayment]: '取消订单',
+  [OrderStatus.PendingConfirmation]: '接单确定',
+  [OrderStatus.PendingService]: '准备完成 开始服务',
+  [OrderStatus.PendingAcceptance]: '服务完成上报',
+  [OrderStatus.All]: '',
+  [OrderStatus.Completed]: '',
+  [OrderStatus.Cancelled]: '',
+  [OrderStatus.Refunded]: '',
+};
+
+// 状态标签映射
+export const OrderStatusLabels: Record<
+  OrderStatus,
+  { label: string; color: string }
+> = {
+  [OrderStatus.All]: { label: '所有订单', color: 'default' },
+  [OrderStatus.PendingPayment]: { label: '等待付款', color: 'danger' },
+  [OrderStatus.PendingConfirmation]: { label: '等待确定', color: 'warning' },
+  [OrderStatus.PendingService]: { label: '等待服务', color: 'primary' },
+  [OrderStatus.PendingAcceptance]: { label: '等待验收', color: 'success' },
+  [OrderStatus.Completed]: { label: '已完成', color: 'secondary' },
+  [OrderStatus.Cancelled]: { label: '已取消', color: 'secondary' },
+  [OrderStatus.Refunded]: { label: '已退款', color: 'secondary' },
+};
+
+export const mapOrderStatusToBadgeStatus = (
+  statusColor: string,
+): BadgeProps['status'] => {
+  const statusMap: Record<string, BadgeProps['status']> = {
+    success: 'success',
+    processing: 'processing',
+    default: 'default',
+    error: 'error',
+    warning: 'warning',
+    primary: 'processing',
+    danger: 'error',
+    secondary: 'default',
+  };
+
+  return statusMap[statusColor] || 'default';
+};
--- a/src/pages/trade/order/config.tsx
+++ b/src/pages/trade/order/config.tsx
@@ -1,62 +1,68 @@
 import type { ProColumns } from '@ant-design/pro-components';
-import { Space, Typography } from 'antd';
+import { Button, Space, Tag, Typography } from 'antd';
+import dayjs from 'dayjs';
+import { dateFormat, dateFormatS } from '@/constants';
 import type { TradeOrderPageRespVO } from '@/services/trade/order';

-const { Text } = Typography;
+const { Text, Paragraph } = Typography;
 export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
  {
    title: '商品',
-    dataIndex: 'id',
-    width: '20%',
+    dataIndex: 'spuName',
    hideInSearch: true,
+    width: '100%',
    ellipsis: true,
-    render: (_, record) =>
-      // <Space style={{ width: "100%" }}>
-      //   <Image
-      //     src={record.picUrl}
-      //     width={64}
-      //     fallback="data:image/png;base64,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"
-      //   />
-      record.spuName,
-    // <Paragraph ellipsis>
-    //   <Paragraph ellipsis>{record.spuName}</Paragraph>
-    //   <div>{record.skuName}</div>
-    //   <Space>
-    //     <div>
-    //       <Text type="secondary">数量：</Text>
-    //       <Text>{record.count}</Text>
-    //     </div>
-    //     <div>
-    //       <Text type="secondary">单价：</Text>
-    //       <Text>
-    //         {record.price}/{record.unit}
-    //       </Text>
-    //     </div>
-    //     <div>
-    //       <Text type="secondary">到手价：</Text>
-    //       <Text>
-    //         {record.handedPrice}/{record.unit}
-    //       </Text>
-    //     </div>
-    //   </Space>
-    // </Paragraph>
-    // </Space>
+    render: (_, record) => (
+      <Paragraph>
+        <Paragraph ellipsis style={{ marginBottom: 0 }}>
+          {record.spuName}
+        </Paragraph>
+        <div>{record.skuName}</div>
+        <Space>
+          <div>
+            <Text type="secondary">数量：</Text>
+            <Text>{record.count}</Text>
+          </div>
+          <div>
+            <Text type="secondary">单价：</Text>
+            <Text>
+              {record.price}/{record.unit}
+            </Text>
+          </div>
+          <div>
+            <Text type="secondary">到手价：</Text>
+            <Text>
+              {record.handedPrice}/{record.unit}
+            </Text>
+          </div>
+        </Space>
+      </Paragraph>
+    ),
  },

  {
    title: '服务',
    dataIndex: 'serveAddress',
    hideInSearch: true,
+    ellipsis: true,
+    width: '100%',
    render: (_, record) => (
-      <Space direction="vertical">
-        <div>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Paragraph ellipsis style={{ marginBottom: 0 }}>
          <Text type="secondary">预约时间：</Text>
-          <Text>{record.subTime}</Text>
-        </div>
-        <div>
+          <Text>{dayjs(record.subTime).format(dateFormatS)}</Text>
+          <Tag style={{ marginLeft: 10 }}>预约</Tag>
+          <Tag color="error" style={{ marginLeft: 10 }}>
+            加急
+          </Tag>
+        </Paragraph>
+        <Paragraph ellipsis style={{ marginBottom: 0 }}>
          <Text type="secondary">服务地址：</Text>
-          <Text>{record.serveAddress}</Text>
-        </div>
+          <Text>
+            {record.serveAddress}
+            服务地址：服务地址：服务地址：服务地址：服务地址：服务地址：
+          </Text>
+        </Paragraph>
        <div>
          <Text type="secondary">用户备注：</Text>
          <Text>{record.userRemark}</Text>
@@ -68,6 +74,7 @@ export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
    title: '财务',
    dataIndex: 'price',
    hideInSearch: true,
+    width: '100',
    render: (_, record) => (
      <Space direction="vertical">
        <div>
--- a/src/pages/trade/order/detail/component/info/basic-info.tsx
+++ b/src/pages/trade/order/detail/component/info/basic-info.tsx
@@ -1,87 +1,192 @@
 import { ProCard } from '@ant-design/pro-components';
-import { Button, Card, Steps, Typography } from 'antd';
+import { Avatar, Button, Card, Empty, Space, Steps, Typography } from 'antd';
+import dayjs from 'dayjs';
 import RcResizeObserver from 'rc-resize-observer';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { OrderStatus, OrderStatusLabels } from '@/constants/trade';
+import type { TradeOrderBaseInfo } from '@/services/trade/order';
+import { type BtnType, renderBaseInfoOrder } from './config';
 import styles from './index.module.less';

 const { Title, Text } = Typography;
-const BasicInfo: React.FC = () => {
+const BasicInfo: React.FC<{ data?: TradeOrderBaseInfo; id: number }> = (
+  props,
+) => {
+  const { data } = props;
+  const [orderStatus, setOrderStatus] = useState<number>(0);
+
+  useEffect(() => {
+    if (data) {
+      setOrderStatus(Number(data.orderStatus));
+    }
+  }, [data]);
+
  const [responsive, setResponsive] = useState(false);
  const renderTitle = useCallback(() => {
-    return <div>标题</div>;
-  }, []);
+    return (
+      <Space size={16}>
+        <div>
+          <Text type="secondary">订单编号：</Text>
+          <Text copyable>{data?.orderNo}</Text>
+        </div>
+        <div>
+          <Text type="secondary">订单类目：</Text>
+          <Text>{data?.orderCategoryId}</Text>
+          <Text>ID:</Text>
+          <Text copyable>{data?.id}</Text>
+        </div>
+        <div>
+          <Text type="secondary">订单来源：</Text>
+          <Text>{data?.orderCategoryName}</Text>
+        </div>
+        <div>
+          <Avatar size={20} src={data?.userAvatar} />
+          <Text>{data?.userInfo}</Text>
+        </div>
+      </Space>
+    );
+  }, [data]);
+
+  const handleClick = useCallback(
+    (type: BtnType) => {
+      if (type === 'confirm') {
+        //还未完成的按钮事件
+        console.log(data?.orderStatus);
+      } else if (type === 'sales') {
+        //新建售后事件
+      }
+      console.log(type);
+    },
+    [data],
+  );
+  const renderOrderStatus = useMemo(() => {
+    if (data) return renderBaseInfoOrder(data, handleClick);
+  }, [data]);
+
  return (
    <div className={styles['order-info']}>
      <Card title="基本信息">
-        <ProCard
-          size="small"
-          title={renderTitle()}
-          bordered
-          headerBordered
-          gutter={8}
-          className="order-info-card"
-        >
-          <ProCard colSpan="200px">
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 10,
-                alignItems: 'center',
-              }}
-            >
-              <Title type="danger" level={4} style={{ margin: 0 }}>
-                等待付款
-              </Title>
-              <span>
-                <Text type="secondary">剩余</Text>
-                <Text>4分30秒</Text>
-              </span>
-
-              <Button type="primary" block>
-                取消订单
-              </Button>
-              <Button block>添加备注</Button>
-            </div>
+        {data ? (
+          <ProCard
+            size="small"
+            title={renderTitle()}
+            bordered
+            headerBordered
+            gutter={8}
+            className="order-info-card"
+          >
+            <ProCard colSpan="300px">
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 10,
+                  alignItems: 'center',
+                }}
+              >
+                {renderOrderStatus}
+              </div>
+            </ProCard>
+            <ProCard layout="center">
+              <RcResizeObserver
+                key="resize-observer"
+                onResize={(offset) => {
+                  setResponsive(offset.width < 460);
+                }}
+              >
+                <Steps
+                  size="small"
+                  progressDot
+                  style={{ width: '100%' }}
+                  current={orderStatus / 10}
+                  direction={responsive ? 'vertical' : 'horizontal'}
+                  items={[
+                    {
+                      title: `创建订单`,
+                      description: (
+                        <Space direction="vertical" size={0}>
+                          {dayjs(data.createTime).format('YYYY-MM-DD')}
+                          {dayjs(data.createTime).format('HH:mm:ss')}
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: `${
+                        OrderStatusLabels[OrderStatus.PendingPayment].label
+                      } ${
+                        orderStatus > OrderStatus.PendingPayment
+                          ? '(已付款)'
+                          : ''
+                      }`,
+                      description: (
+                        <Space direction="vertical" size={0}>
+                          {dayjs(data.createTime).format('YYYY-MM-DD')}
+                          {dayjs(data.createTime).format('HH:mm:ss')}
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: `${
+                        OrderStatusLabels[OrderStatus.PendingConfirmation].label
+                      } ${
+                        orderStatus > OrderStatus.PendingConfirmation
+                          ? '(已确定)'
+                          : ''
+                      }`,
+                      description: (
+                        <Space direction="vertical" size={0}>
+                          {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
+                        {dayjs(data.finishTime).format("HH:mm:ss")} */}
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: `${
+                        OrderStatusLabels[OrderStatus.PendingService].label
+                      } ${
+                        orderStatus > OrderStatus.PendingService
+                          ? '(已开始)'
+                          : ''
+                      }`,
+                      description: (
+                        <Space direction="vertical" size={0}>
+                          {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
+                        {dayjs(data.finishTime).format("HH:mm:ss")} */}
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: `${
+                        OrderStatusLabels[OrderStatus.PendingAcceptance].label
+                      } ${
+                        orderStatus > OrderStatus.PendingAcceptance
+                          ? '(已验收)'
+                          : ''
+                      }`,
+                      description: (
+                        <Space direction="vertical" size={0}>
+                          {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
+                        {dayjs(data.finishTime).format("HH:mm:ss")} */}
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: '完成',
+                      description: (
+                        <Space direction="vertical" size={0}>
+                          {dayjs(data.finishTime).format('YYYY-MM-DD')}
+                          {dayjs(data.finishTime).format('HH:mm:ss')}
+                        </Space>
+                      ),
+                    },
+                  ]}
+                />
+              </RcResizeObserver>
+            </ProCard>
          </ProCard>
-          <ProCard layout="center">
-            <RcResizeObserver
-              key="resize-observer"
-              onResize={(offset) => {
-                setResponsive(offset.width < 460);
-              }}
-            >
-              <Steps
-                size="small"
-                progressDot
-                style={{ width: '100%' }}
-                current={1}
-                direction={responsive ? 'vertical' : 'horizontal'}
-                items={[
-                  {
-                    title: '创建订单',
-                    description: 'This is a description.',
-                  },
-                  {
-                    title: '等待付款',
-                  },
-                  {
-                    title: '等待确定',
-                  },
-                  {
-                    title: '等待服务',
-                  },
-                  {
-                    title: '等待验收',
-                  },
-                  {
-                    title: '完成',
-                  },
-                ]}
-              />
-            </RcResizeObserver>
-          </ProCard>
-        </ProCard>
+        ) : (
+          <Empty />
+        )}
      </Card>
    </div>
  );
--- a/src/pages/trade/order/detail/component/info/config.tsx
+++ b/src/pages/trade/order/detail/component/info/config.tsx
@@ -1,6 +1,17 @@
 import type { ProColumns } from '@ant-design/pro-components';
-import { Tag } from 'antd';
+import { Button, Tag, Typography } from 'antd';
+import type { BaseType } from 'antd/es/typography/Base';
+import dayjs from 'dayjs';
+import { dateFormat } from '@/constants';
+import {
+  OrderBtnLableMap,
+  OrderStatus,
+  OrderStatusLabels,
+} from '@/constants/trade';
 import type { DeptVO } from '@/services/system/dept';
+import type { TradeOrderBaseInfo } from '@/services/trade/order';
+
+const { Title, Text, Paragraph } = Typography;

 export const baseOrderColumns: ProColumns<DeptVO>[] = [
  {
@@ -62,3 +73,100 @@ export const surchargeInfoColumns: ProColumns<DeptVO>[] = [
    onCell: sharedOnCell,
  },
 ];
+
+export type BtnType = 'sales' | 'confirm';
+
+export const renderBaseInfoOrder = (
+  data: TradeOrderBaseInfo,
+  handleClick: (type: BtnType) => void,
+): React.ReactNode => {
+  const orderStatusObj =
+    OrderStatusLabels[data.orderStatus as unknown as OrderStatus];
+
+  console.log(orderStatusObj, data);
+  return (
+    <>
+      <Title
+        type={(orderStatusObj.color as BaseType) || ''}
+        level={4}
+        style={{ margin: 0 }}
+      >
+        {data?.orderStatus && orderStatusObj.label}
+      </Title>
+      <span>
+        <Text type="secondary">剩余</Text>
+        <Text>4分30秒</Text>
+      </span>
+      {data.orderStatus &&
+        Number(data.orderStatus) === OrderStatus.Refunded && (
+          <Paragraph>
+            <Text type="secondary">退款时间：</Text>
+            <Text>退款时间</Text>
+          </Paragraph>
+        )}
+      {data.orderStatus &&
+        (Number(data.orderStatus) === OrderStatus.Completed ||
+          Number(data.orderStatus) === OrderStatus.Refunded) && (
+          <Paragraph>
+            <Text type="secondary">服务完成时间：</Text>
+            <Text>{dayjs(data.finishTime).format(dateFormat)}</Text>
+          </Paragraph>
+        )}
+      {data.orderStatus &&
+        Number(data.orderStatus) === OrderStatus.Completed && (
+          <Paragraph>
+            <Text type="secondary">售后保障期：</Text>
+            <Tag
+              color={
+                data.propertyStatus && Number(data.propertyStatus) === 1
+                  ? 'default'
+                  : 'gay'
+              }
+            >
+              未过期
+            </Tag>
+            <Tag
+              color={
+                data.propertyStatus && Number(data.propertyStatus) === 1
+                  ? 'gay'
+                  : 'default'
+              }
+            >
+              已过期
+            </Tag>
+            <Text>{data.propertyTime}</Text>
+          </Paragraph>
+        )}
+      {/* 取消 */}
+      {data.orderStatus &&
+        Number(data.orderStatus) === OrderStatus.Cancelled && (
+          <>
+            <Paragraph>
+              <Text type="secondary">取消时间：</Text>
+              <Text>取消时间</Text>
+            </Paragraph>
+            <Paragraph>
+              <Text type="secondary">取消原因：</Text>
+              <Text>{data.cancelReason}</Text>
+            </Paragraph>
+            <Paragraph>
+              <Text type="secondary">备注：</Text>
+              <Text>{data?.merchantRemark}</Text>
+            </Paragraph>
+          </>
+        )}
+      {data.orderStatus &&
+        Number(data.orderStatus) <= OrderStatus.PendingAcceptance && (
+          <Button type="primary" block onClick={() => handleClick('confirm')}>
+            {OrderBtnLableMap[data.orderStatus as unknown as OrderStatus]}
+          </Button>
+        )}
+      {data.orderStatus &&
+        Number(data.orderStatus) <= OrderStatus.Completed && (
+          <Button block onClick={() => handleClick('sales')}>
+            新建售后
+          </Button>
+        )}
+    </>
+  );
+};
--- a/src/pages/trade/order/detail/component/info/index.module.less
+++ b/src/pages/trade/order/detail/component/info/index.module.less
@@ -21,5 +21,14 @@
    .ant-pro-card-body {
      padding: 0px;
    }
+    .ant-steps-item-icon {
+      height: 8px !important;
+      line-height: 8px !important;
+    }
+    .ant-steps-item-active {
+      .ant-steps-icon-dot {
+        height: 10px !important;
+      }
+    }
  }
 }
--- a/src/pages/trade/order/detail/component/info/prod-info.tsx
+++ b/src/pages/trade/order/detail/component/info/prod-info.tsx
@@ -1,10 +1,13 @@
 import { ProCard } from '@ant-design/pro-components';
 import { Button, Card, Image, Space, Tag, Typography } from 'antd';
 import React, { useCallback } from 'react';
+import type { TradeProductInfo } from '@/services/trade/order';
+
 import styles from './index.module.less';

 const { Text, Paragraph } = Typography;
-const ProdInfo: React.FC = () => {
+const ProdInfo: React.FC<{ data?: TradeProductInfo; id: number }> = (props) => {
+  const { data = {}, id } = props;
  const renderTitle = useCallback(() => {
    return (
      <Space style={{ height: '100%' }} size={16}>
--- a/src/pages/trade/order/detail/component/info/select-info.tsx
+++ b/src/pages/trade/order/detail/component/info/select-info.tsx
@@ -7,10 +7,14 @@ import {
  type DeptVO,
  getDeptPage,
 } from '@/services/system/dept';
+import type { TradeExtendCostInfo } from '@/services/trade/order';
 import { baseOrderColumns } from '../../../config';
 import styles from './index.module.less';

-const SelectInfo: React.FC = () => {
+const SelectInfo: React.FC<{ data?: TradeExtendCostInfo; id: number }> = (
+  props,
+) => {
+  const { data = {}, id } = props;
  const onFetch = async (
    params: DeptReqVO & {
      pageSize?: number;
--- a/src/pages/trade/order/detail/component/info/service-info.tsx
+++ b/src/pages/trade/order/detail/component/info/service-info.tsx
@@ -1,10 +1,14 @@
 import { ProCard } from '@ant-design/pro-components';
 import { Button, Card, Image, Space, Typography } from 'antd';
 import React from 'react';
+import type { TradeServeInfo } from '@/services/trade/order';
 import styles from './index.module.less';

 const { Text, Paragraph } = Typography;
-const ServiceInfo: React.FC = () => {
+const ServiceInfo: React.FC<{ data?: TradeServeInfo; id: number }> = (
+  props,
+) => {
+  const { data = {}, id } = props;
  return (
    <div className={styles['order-info']}>
      <Card title="服务信息">
--- a/src/pages/trade/order/detail/component/info/surcharge-info.tsx
+++ b/src/pages/trade/order/detail/component/info/surcharge-info.tsx
@@ -6,10 +6,14 @@ import {
  type DeptVO,
  getDeptPage,
 } from '@/services/system/dept';
+import type { TradeExtendServeInfo } from '@/services/trade/order';
 import { surchargeInfoColumns } from './config';
 import styles from './index.module.less';

-const SurchargeInfo: React.FC = () => {
+const SurchargeInfo: React.FC<{ data?: TradeExtendServeInfo; id: number }> = (
+  props,
+) => {
+  const { data, id } = props;
  const onFetch = async (
    params: DeptReqVO & {
      pageSize?: number;
--- a/src/pages/trade/order/detail/index.tsx
+++ b/src/pages/trade/order/detail/index.tsx
@@ -1,13 +1,14 @@
 import { Tabs, type TabsProps } from 'antd';
 import React from 'react';
+import type { TradeOrderPageRespVO } from '@/services/trade/order';
 import OrderInfo from './order-info';

-const DetailCom: React.FC = () => {
+const DetailCom: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '订单信息 ',
-      children: <OrderInfo />,
+      children: <OrderInfo data={props.data} />,
    },
    {
      key: '2',
--- a/src/pages/trade/order/detail/order-info.tsx
+++ b/src/pages/trade/order/detail/order-info.tsx
@@ -1,19 +1,36 @@
 import { Space } from 'antd';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  getTradeOrderDetail,
+  type TradeOrderDetailRespVO,
+} from '@/services/trade/order';
 import BasicInfo from './component/info/basic-info'; //基本信息（通版）
 import ProdInfo from './component/info/prod-info'; //商品信息（通版）
 import SelectInfo from './component/info/select-info'; //可选服务（殡葬专属字段）
 import ServiceInfo from './component/info/service-info';
 import SurchargeInfo from './component/info/surcharge-info'; //服务附加费（殡葬专属字段）

-const OrderDetail: React.FC = () => {
+const OrderDetail: React.FC<{ data?: TradeOrderDetailRespVO }> = (props) => {
+  const { data } = props;
+  const [detais, setDetails] = useState<TradeOrderDetailRespVO>();
+
+  const fetch = useCallback(async () => {
+    if (data?.id) {
+      const res = await getTradeOrderDetail(data.id);
+      setDetails(res);
+    }
+  }, [data]);
+  useEffect(() => {
+    fetch();
+  }, [data]);
+
  return (
    <Space direction="vertical" size={24} style={{ width: '100%' }}>
-      <BasicInfo />
-      <ProdInfo />
-      <ServiceInfo />
-      <SelectInfo />
-      <SurchargeInfo />
+      <BasicInfo data={detais?.tradeOrderInfoBase} id={data?.id} />
+      <ProdInfo data={detais?.tradeProductInfo} id={data?.id} />
+      <ServiceInfo data={detais?.tradeServeInfo} id={data?.id} />
+      <SelectInfo data={detais?.tradeExtendCostInfo} id={data?.id} />
+      <SurchargeInfo data={detais?.tradeExtendServeInfo} id={data?.id} />
    </Space>
  );
 };
--- a/src/pages/trade/order/index.tsx
+++ b/src/pages/trade/order/index.tsx
@@ -1,35 +1,26 @@
 import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
 import React from 'react';
+import { OrderStatusLabels } from '@/constants/trade';
 import styles from './index.module.less';
 import OrderListItem from './list';

-const onChange = (key: string) => {
-  console.log(key);
-};
-
-const status: string[] = [
-  '所有订单',
-  '等待付款',
-  '等待确定',
-  '等待服务',
-  '等待验收',
-  '等待评价',
-  '已完成',
-  '已取消',
-  '已退款',
-];
+// const onChange = (key: string) => {
+//   console.log(key);
+// };

 const OrderList: React.FC = () => {
-  const items: TabsProps['items'] = status.map((item, index) => ({
-    key: `${index + 1}`,
-    label: item,
-    children: <OrderListItem />,
-  }));
+  const items: TabsProps['items'] = Object.entries(OrderStatusLabels).map(
+    ([value, list]) => ({
+      key: value,
+      label: list.label,
+      children: <OrderListItem orderStatus={Number(value)} />,
+    }),
+  );

  return (
    <div className={`${styles['trade-order']} "page-container" `}>
-      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+      <Tabs defaultActiveKey="1" items={items} />
    </div>
  );
 };
--- a/src/pages/trade/order/list.tsx
+++ b/src/pages/trade/order/list.tsx
@@ -12,6 +12,7 @@ import {
  message,
  Space,
  Statistic,
+  Typography,
 } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import ConfigurableDrawerForm, {
@@ -22,10 +23,17 @@ import { baseOrderColumns } from './config';

 const { Search } = Input;

+const { Text } = Typography;
+
 import { DownOutlined, UpOutlined, UserOutlined } from '@ant-design/icons';
 import PopconfirmForm, {
  type PopconfirmFormRef,
 } from '@/components/PopconfirmForm';
+import {
+  mapOrderStatusToBadgeStatus,
+  type OrderStatus,
+  OrderStatusLabels,
+} from '@/constants/trade';
 import {
  getTradeOrderPage,
  type TradeOrderPageRespVO,
@@ -33,10 +41,11 @@ import {
 } from '@/services/trade/order';
 import DetailCom from './detail';

-const OrderListItem: React.FC = () => {
+const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
+  const { orderStatus } = props;
  const tableRef = useRef<ActionType>(null);
  const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
-  const [modalTitle, setModalTitle] = useState<string>('订单：BZ000548787');
+  const [modalData, setModalData] = useState<TradeOrderPageRespVO>();
  const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
  const popconfirmFormRef = useRef<PopconfirmFormRef>(null);
  const onFetch = async (
@@ -47,6 +56,7 @@ const OrderListItem: React.FC = () => {
  ) => {
    const data = await getTradeOrderPage({
      ...params,
+      orderStatus,
      pageNo: params.current,
      pageSize: params.pageSize,
    });
@@ -59,7 +69,7 @@ const OrderListItem: React.FC = () => {
  };

  const handleDetail = useCallback((record: TradeOrderPageRespVO) => {
-    setModalTitle(`订单：${record.orderNum}`);
+    setModalData(record);
    configurableDrawerRef.current?.open();
  }, []);

@@ -97,6 +107,12 @@ const OrderListItem: React.FC = () => {
        <a key="cancel" onClick={() => handleOrder(record.id)}>
          取消订单
        </a>
+        <a key="cancel" onClick={() => handleOrder(record.id)}>
+          开始服务
+        </a>
+        <a key="cancel" onClick={() => handleOrder(record.id)}>
+          新建售后
+        </a>
        <a key="detail" onClick={() => handleDetail(record)}>
          订单详情
        </a>
@@ -138,7 +154,7 @@ const OrderListItem: React.FC = () => {
        const { children, ...restProps } = props;
        const record = props['data-record']
          ? JSON.parse(props['data-record'])
-          : {};
+          : undefined;
        return (
          <>
            {record && (
@@ -148,18 +164,22 @@ const OrderListItem: React.FC = () => {
                  style={{
                    padding: '0px 8px',
                    borderBottom: '1px solid #f0f0f0',
-                    fontSize: '12px',
                    color: '#666',
                  }}
                >
                  <Space>
-                    <span>
-                      <Badge
-                        status="success"
-                        text={record.orderStatus}
-                        size="small"
-                      />
-                    </span>
+                    <Badge
+                      status={mapOrderStatusToBadgeStatus(
+                        OrderStatusLabels[record.orderStatus as OrderStatus]
+                          .color,
+                      )}
+                      text={
+                        OrderStatusLabels[record.orderStatus as OrderStatus]
+                          .label
+                      }
+                      size="small"
+                    />
+
                    <Divider />
                    <span> {record.orderCategoryName}</span>
                    <span> {record.createTime}</span>
@@ -188,6 +208,13 @@ const OrderListItem: React.FC = () => {
        );
      },
    },
+    header: {
+      cell: (props: any) => {
+        const { children, ...restProps } = props;
+        console.log(restProps, children);
+        return <th {...restProps}>{children}</th>;
+      },
+    },
  };
  const columns = [...baseOrderColumns, actionColumns];

@@ -201,7 +228,14 @@ const OrderListItem: React.FC = () => {
  }, []);
  return (
    <>
-      <Space>
+      <Space
+        style={{
+          padding: '18px',
+          background: '#fff',
+          width: '100%',
+          marginBottom: 16,
+        }}
+      >
        <Search
          placeholder="商品名称/商品ID/订单号"
          enterButton
@@ -215,7 +249,7 @@ const OrderListItem: React.FC = () => {
        </Button>
      </Space>
      {isShowTotal && (
-        <ProCard.Group direction="row" bordered style={{ marginTop: 16 }}>
+        <ProCard.Group direction="row" style={{ marginBottom: 18 }}>
          <ProCard layout="center" style={{ background: '#f5f5f5' }}>
            <Statistic title="订单数量" value={79.0} precision={2} />
          </ProCard>
@@ -243,14 +277,14 @@ const OrderListItem: React.FC = () => {
      <ConfigurableDrawerForm
        ref={configurableDrawerRef}
        width="80vw"
-        title={modalTitle}
+        title={`订单：${modalData?.orderNum}`}
        bodyStyle={{
          background: '#f5f5f5',
          paddingTop: 8,
        }}
        footer={<Button onClick={onClose}>关闭</Button>}
      >
-        <DetailCom />
+        <DetailCom data={modalData} />
      </ConfigurableDrawerForm>
    </>
  );
--- a/src/services/trade/order/index.ts
+++ b/src/services/trade/order/index.ts
@@ -158,86 +158,14 @@ export interface TradeOrderPageRespVO {
 * TradeOrderDetailRespVO
 */
 export interface TradeOrderDetailRespVO {
-  /**
-   * 购买的商品数量
-   */
-  count?: number;
-  /**
-   * 下单时间 - 必填
-   */
-  createTime?: string;
-  /**
-   * 财务状态
-   */
-  financeStatus?: string;
-  /**
-   * 到手价
-   */
-  handedPrice?: number;
-  /**
-   * 订单编号 - 必填，示例：1024
-   */
-  id?: number;
-  /**
-   * 订单类目
-   */
-  orderCategoryName?: string;
-  /**
-   * 订单流水号 - 必填，示例：1146347329394184195
-   */
-  orderNum?: string;
-  /**
-   * 订单状态
-   */
-  orderStatus?: number;
-  /**
-   * 订单来源
-   */
-  orderTerminal?: number;
-  /**
-   * 预约时间
-   */
-  orderTime?: string;
-  /**
-   * 应付金额（总） - 必填，示例：1000
-   */
-  payPrice?: number;
-  /**
-   * 支付方式
-   */
-  payType?: string;
-  /**
-   * 商品图片
-   */
-  picUrl?: string;
-  /**
-   * 单价
-   */
-  price?: number;
-  /**
-   * 服务地址
-   */
-  serveAddress?: string;
-  /**
-   * 商品规格
-   */
-  skuName?: string;
-  /**
-   * 商品名称
-   */
-  spuName?: string;
-  /**
-   * 配送信息
-   */
-  tradeDeliveryInfo?: TradeDeliveryInfo;
  /**
   * 附加费信息
   */
-  tradeExtendCostInfo?: string;
+  tradeExtendCostInfo?: TradeExtendCostInfo;
  /**
   * 扩展服务信息
   */
-  tradeExtendServeInfo?: string;
+  tradeExtendServeInfo?: TradeExtendServeInfo;
  /**
   * 基本信息
   */
@@ -245,71 +173,48 @@ export interface TradeOrderDetailRespVO {
  /**
   * 商品信息
   */
-  tradeProductInfo?: string;
+  tradeProductInfo?: TradeProductInfo;
  /**
-   * 单位
+   * 服务信息
   */
-  unit?: string;
-  /**
-   * 用户头像
-   */
-  userAvatar?: string;
-  /**
-   * 用户编号 - 必填，示例：2048
-   */
-  userId?: number;
-  /**
-   * 用户手机号
-   */
-  userMobile?: string;
-  /**
-   * 用户姓名
-   */
-  userName?: string;
-  /**
-   * 用户昵称
-   */
-  userNickName?: string;
-  /**
-   * 用户备注 - 必填，示例：你猜
-   */
-  userRemark?: string;
+  tradeServeInfo?: TradeServeInfo;
+  [property: string]: any;
 }

 /**
- * 配送信息
+ * 附加费信息
 *
- * TradeDeliveryInfo
+ * TradeExtendCostInfo
 */
-export interface TradeDeliveryInfo {
+export interface TradeExtendCostInfo {
  /**
-   * 快递详情
+   * 内部存储动态属性的 Map，键为属性名称，值为属性值
   */
-  deliveryDetail?: string;
+  properties?: MapObject;
+  [property: string]: any;
+}
+
+/**
+ * 内部存储动态属性的 Map，键为属性名称，值为属性值
+ *
+ * MapObject
+ */
+export interface MapObject {
+  key?: { [key: string]: any };
+  [property: string]: any;
+}
+
+/**
+ * 扩展服务信息
+ *
+ * TradeExtendServeInfo
+ */
+export interface TradeExtendServeInfo {
  /**
-   * 承运方
+   * 内部存储动态属性的 Map，键为属性名称，值为属性值
   */
-  logisticsName?: string;
-  /**
-   * 送货上门
-   */
-  logisticsNum?: string;
-  /**
-   * 送货方式
-   */
-  logisticsType?: string;
-  /**
-   * 收货地址
-   */
-  receiverDetailAddress?: string;
-  /**
-   * 收货手机
-   */
-  receiverMobile?: string;
-  /**
-   * 收货人
-   */
-  receiverName?: string;
+  properties?: MapObject;
+  [property: string]: any;
 }

 /**
@@ -319,37 +224,13 @@ export interface TradeDeliveryInfo {
 */
 export interface TradeOrderBaseInfo {
  /**
-   * 实收金额
+   * 取消原因
   */
-  actualPrice?: string;
-  /**
-   * 售后编号 - 必填，示例：450878
-   */
-  afterSaleCode?: string;
-  /**
-   * 售后类型 - 必填，示例：仅退款/退货退款/可扩展增加使用
-   */
-  afterSaleType?: string;
-  /**
-   * 申请人 - 必填，示例：用户/商家/平台+ID
-   */
-  applicant?: string;
-  /**
-   * 审核人 - 必填，示例：姓名+ID
-   */
-  auditor?: string;
-  /**
-   * 审核时间 - 必填，示例：2025-07-01 12:00:00
-   */
-  auditTime?: string;
+  cancelReason?: string;
  /**
   * 取消时间
   */
  cancelTime?: string;
-  /**
-   * 关闭时间 - 必填，示例：2025-07-01 12:00:00
-   */
-  closeTime?: string;
  /**
   * 创建时间
   */
@@ -366,6 +247,19 @@ export interface TradeOrderBaseInfo {
   * 订单id
   */
  id?: string;
+  /**
+   * 实收金额
+   */
+  livePrice?: string;
+  /**
+   * 商家备注
+   */
+  merchantRemark?: string;
+  /**
+   * 订单类目
+   */
+  orderCategoryId?: string;
+  orderCategoryName?: string;
  /**
   * 订单编号
   */
@@ -383,9 +277,9 @@ export interface TradeOrderBaseInfo {
   */
  orderType?: string;
  /**
-   * 支付方式
+   * 支付渠道 （线上线下）
   */
-  payChannel?: string;
+  payChannelCode?: string;
  /**
   * 交易流水号
   */
@@ -393,70 +287,139 @@ export interface TradeOrderBaseInfo {
  /**
   * 订单金额
   */
-  payPrice?: string;
+  payPrice?: number;
  /**
   * 支付时间
   */
  payTime?: string;
  /**
-   * 退款金额 - 必填
+   * 支付方式（支付宝微信）
   */
-  refundAmount?: number;
+  payType?: string;
  /**
-   * 退款方式 - 必填，示例：系统自动退款
+   * 订单总价
   */
-  refundMethod?: string;
+  price?: string;
+  /**
+   * 保障状态
+   */
+  propertyStatus?: string;
+  /**
+   * 保障时间
+   */
+  propertyTime?: string;
  /**
   * 退款金额
   */
  refundPrice?: string;
  /**
-   * 退款原因 - 必填，示例：不想要了
+   * 退款时间
   */
-  refundReason?: string;
+  refundTime?: string;
  /**
-   * 退款说明 - 必填，示例：这里是用户填写的退款描述
+   * 用户信息
   */
-  refundRemark?: string;
-  /**
-   * 退款状态 - 必填，示例：待审核/待退款/已退款/已拒绝
-   */
-  refundStatus?: string;
-  /**
-   * 退款至 - 必填，示例：原支付方式返还
-   */
-  refundTo?: string;
-  /**
-   * 退款类型 - 必填，示例：订单退款/差价退款/运费退款/可扩展增加
-   */
-  refundType?: string;
-  /**
-   * 用户ID 示例：666
-   */
-  userId?: number;
-  /**
-   * 用户昵称 示例：钱多多
-   */
-  userNickname?: string;
+  userInfo?: string;
+  userAvatar?: string;
 }

-// /**
-//  * CommonResultTradeOrderDetailRespVO
-//  */
-// export interface ApifoxModel {
-//   /**
-//    * 错误码
-//    */
-//   code?: number;
-//   /**
-//    * 返回数据
-//    */
-//   data?: TradeOrderDetailRespVO;
-//   /**
-//    * 错误提示，用户可阅读
-//    */
-//   msg?: string;
-// }
+/**
+ * 商品信息
+ *
+ * TradeProductInfo
+ */
+export interface TradeProductInfo {
+  /**
+   * 购买数量
+   */
+  count?: number;
+  /**
+   * 优惠金额
+   */
+  discountPrice?: number;
+  /**
+   * 成本价
+   */
+  expensePrice?: number;
+  /**
+   * 到手价（单价 - 优惠）
+   */
+  handedPrice?: number;
+  /**
+   * 实付金额
+   */
+  payPrice?: number;
+  /**
+   * 商品单价
+   */
+  price?: number;
+  /**
+   * 保障
+   */
+  properties?: string[];
+  /**
+   * 累计退款数量
+   */
+  refundCount?: number;
+  /**
+   * 累计退款金额
+   */
+  refundPrice?: number;
+  /**
+   * 服务内容
+   */
+  serveContent?: string;
+  /**
+   * 店铺log
+   */
+  shopLogoUrl?: string;
+  /**
+   * 店铺名称
+   */
+  shopName?: string;
+  /**
+   * skuid
+   */
+  skuId?: number;
+  /**
+   * 商品规格
+   */
+  skuName?: string;
+  /**
+   * 商品规格图
+   */
+  skuPicUrl?: string;
+  /**
+   * 商品id
+   */
+  spuId?: number;
+  /**
+   * 商品名称
+   */
+  spuName?: string;
+  /**
+   * 商品总价
+   */
+  totalPrice?: number;
+  /**
+   * 商品单位
+   */
+  unit?: string;
+  [property: string]: any;
+}
+
+/**
+ * 服务信息
+ *
+ * TradeServeInfo
+ */
+export interface TradeServeInfo {
+  /**
+   * 内部存储动态属性的 Map，键为属性名称，值为属性值
+   */
+  properties?: MapObject;
+  [property: string]: any;
+}

 export const getTradeOrderPage = async (params: TradeReq) => {
  return request<PageResult<TradeOrderPageRespVO[]>>("/trade/order/page", {