feat: 基本信息

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>