feat: 基本信息

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>
     </>
   );