feat: 取消订单

src/pages/prod/list/components/prod-info.tsx

@@ -74,7 +74,7 @@ const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
           extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
           // getValueFromEvent={(e) => e.fileList}
         >
-          <UploadImages />
+          <UploadImages maxCount={7} />
         </ProForm.Item>
         <ProForm.Item
           style={{ width: '100%' }}

src/pages/trade/order/components/cancleOrderModal.tsx

@@ -0,0 +1,83 @@
+import {
+  BetaSchemaForm,
+  type ProFormColumnsType,
+} from '@ant-design/pro-components';
+import { type FormInstance, Modal, message } from 'antd';
+import React, { useCallback, useRef, useState } from 'react';
+import { cancelOrder } from '@/services/trade/order';
+
+const CancleOrderModal: React.FC<{
+  open?: boolean;
+  id?: number;
+  onClose?: () => void;
+}> = (props) => {
+  const formRef = useRef<FormInstance>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const columns: ProFormColumnsType[] = [
+    {
+      title: '',
+      dataIndex: 'cancelReason',
+      valueType: 'radio',
+      fieldProps: {
+        options: [
+          { value: '用户主动取消', label: '用户主动取消' },
+          { value: '选项二', label: '选项二' },
+          { value: '选项三', label: '选项三' },
+          { value: '选项四', label: '选项四' },
+          { value: '选项五', label: '选项五' },
+          { value: '选项六', label: '选项六' },
+          { value: '选项七', label: '选项七' },
+        ],
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '6px',
+          background: '#f0f0f0',
+          padding: '8px',
+          borderRadius: '8px',
+        },
+      },
+    },
+    {
+      title: '取消备注',
+      dataIndex: 'cancelRemark',
+      valueType: 'textarea',
+    },
+  ];
+
+  const handleOk = useCallback(async () => {
+    try {
+      setLoading(true);
+      const values = formRef.current?.getFieldsValue();
+      console.log(values, props.id, 'ok');
+      await cancelOrder({ id: props.id, ...values });
+      message.success('取消成功');
+      props.onClose?.();
+    } finally {
+      setLoading(false);
+    }
+  }, [open, props.id]);
+  return (
+    <Modal
+      title="取消订单"
+      open={props.open}
+      onOk={handleOk}
+      onCancel={props?.onClose}
+      confirmLoading={loading}
+    >
+      <span>是否确认取消订单？</span>
+      <BetaSchemaForm
+        layoutType="Form"
+        formRef={formRef}
+        columns={columns || []}
+        layout="horizontal"
+        submitter={false}
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+      />
+    </Modal>
+  );
+};
+
+export default React.memo(CancleOrderModal);

src/pages/trade/order/config.tsx

@@ -14,10 +14,10 @@ export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
       if (!record.items) {
         return _;
       }
-      return record.items.map((item) => (
+      return record.items.map((item, index) => (
         <div
           style={{ width: '100%', display: 'flex', gap: '8px' }}
-          key={item.id}
+          key={`${index}${Math.random()}`}
         >
           <Image src={item.picUrl} width={64} height={64} />
           <div style={{ flex: '1', overflow: 'hidden' }}>

src/pages/trade/order/detail/index.tsx

@@ -21,7 +21,7 @@ const DetailCom: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
       children: '商品配送',
     },
   ];
-  return <Tabs defaultActiveKey="1" items={items} />;
+  return <Tabs defaultActiveKey="1" items={items} destroyOnHidden />;
 };
 
 export default React.memo(DetailCom);

src/pages/trade/order/detail/order-info.tsx

@@ -5,16 +5,17 @@ import {
   type TradeOrderDetailRespVO,
   type TradeOrderPageRespVO,
 } from '@/services/trade/order';
-import BasicInfo from './component/info/basic-info'; //基本信息（通版）
-import ExtendCostInfo from './component/info/extend-cost'; //服务附加费（殡葬专属字段）
-import ExtendService from './component/info/extend-service'; //可选服务（殡葬专属字段）
-import ProdInfo from './component/info/prod-info'; //商品信息（通版）
-import ServiceInfo from './component/info/service-info';
+import BasicInfo from './src/info/basic-info'; //基本信息（通版）
+import ExtendCostInfo from './src/info/extend-cost'; //服务附加费（殡葬专属字段）
+import ExtendService from './src/info/extend-service'; //可选服务（殡葬专属字段）
+import ProdInfo from './src/info/prod-info'; //商品信息（通版）
+import ServiceInfo from './src/info/service-info';
 
 export interface ItemConfig<T> {
   data?: T;
   loading?: boolean;
   orderCategoryId?: number;
+  id?: number;
 }
 const OrderDetail: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
   const { data } = props;
@@ -43,6 +44,7 @@ const OrderDetail: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
         <ServiceInfo
           data={detais.tradeServeInfo}
           orderCategoryId={detais?.orderCategoryId}
+          id={detais?.id}
         />
       )}
       {detais?.tradeExtendServeInfo && (

src/pages/trade/order/detail/src/info/config.tsx

@@ -73,10 +73,13 @@ export const renderBaseInfoOrder = (
       >
         {data?.orderStatus && orderStatusObj.label}
       </Title>
-      <span>
-        <Text type="secondary">剩余</Text>
-        <Text>4分30秒</Text>
-      </span>
+      {data.orderStatus === 10 && (
+        <span>
+          <Text type="secondary">剩余</Text>
+          <Text>4分30秒</Text>
+        </span>
+      )}
+
       {data.orderStatus &&
         Number(data.orderStatus) === OrderStatus.Refunded && (
           <Paragraph>
@@ -121,18 +124,18 @@ export const renderBaseInfoOrder = (
       {data.orderStatus &&
         Number(data.orderStatus) === OrderStatus.Cancelled && (
           <>
-            <Paragraph>
+            <div>
               <Text type="secondary">取消时间：</Text>
-              <Text>取消时间</Text>
-            </Paragraph>
-            <Paragraph>
+              <Text>{data.cancelTime}</Text>
+            </div>
+            <div>
               <Text type="secondary">取消原因：</Text>
               <Text>{data.cancelReason}</Text>
-            </Paragraph>
-            <Paragraph>
+            </div>
+            <div>
               <Text type="secondary">备注：</Text>
-              <Text>{data?.merchantRemark}</Text>
-            </Paragraph>
+              <Text>{data?.cancelRemark}</Text>
+            </div>
           </>
         )}
       {data.orderStatus &&

src/pages/trade/order/detail/src/info/prod-info.tsx

@@ -1,14 +1,22 @@
 import { ProCard } from '@ant-design/pro-components';
-import { Button, Card, Image, Space, Tag, Typography } from 'antd';
-import React, { useCallback } from 'react';
+import { Button, Card, Image, Modal, Space, Tag, Typography } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import AdvancedImageGallery from '@/components/AdvancedImageGallery';
+import DangerouslySetInnerHTML from '@/components/DangerouslySetInnerHTML';
 import { fallback } from '@/constants/antd/image';
-import type { Item } from '@/services/trade/order/detail';
+import { getfastPhoto } from '@/services/trade/order';
+import type {
+  Item,
+  TradeOrderFastPhotoRespVo,
+} from '@/services/trade/order/detail';
 import type { ItemConfig } from '../../order-info';
 import styles from './index.module.less';
 
-const { Text, Paragraph } = Typography;
+const { Text, Paragraph, Title } = Typography;
 const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
   const { data = [] } = props;
+  const [visible, setVisible] = useState(false);
+  const [item, setItem] = useState<Item>();
   const renderTitle = useCallback((item: Item) => {
     return (
       <Space style={{ height: '100%' }} size={16}>
@@ -24,6 +32,14 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
       </Space>
     );
   }, []);
+  const onPhoto = useCallback(
+    async (item: Item) => {
+      setVisible(true);
+      setItem(item);
+    },
+    [item, visible],
+  );
+
   return (
     <div className={styles['order-info']}>
       <Card title="商品信息">
@@ -35,7 +51,11 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
             bordered
             headerBordered
             gutter={8}
-            extra={<Button size="small">交易快照</Button>}
+            extra={
+              <Button size="small" onClick={() => onPhoto(item)}>
+                交易快照
+              </Button>
+            }
           >
             <ProCard
               layout="default"
@@ -74,14 +94,12 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
                     >
                       <Text type="secondary">到手价：</Text>
                       <Text>
-                        {' '}
                         ¥{item.handedPrice} {item.unit}
                       </Text>
                     </Paragraph>
                     <Paragraph className="order-paragraph">
                       <Text type="secondary">成本价：</Text>
                       <Text>
-                        {' '}
                         ¥{item.expensePrice} {item.unit}/-
                       </Text>
                     </Paragraph>
@@ -141,8 +159,94 @@ const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
           </ProCard>
         ))}
       </Card>
+      <PhotoModal
+        open={visible}
+        onCancel={() => setVisible(false)}
+        item={item}
+      />
     </div>
   );
 };
 
+// 交易快照
+const PhotoModal: React.FC<{
+  open: boolean;
+  onCancel: () => void;
+  item?: Item;
+}> = (props) => {
+  const [photo, setPhoto] = useState<TradeOrderFastPhotoRespVo>();
+  const { item } = props;
+  console.log(item, 'item');
+  const onPhoto = useCallback(async () => {
+    const res = await getfastPhoto({
+      itemId: item?.id as number,
+      spuId: item?.spuId as number,
+    });
+    setPhoto(res);
+  }, [item]);
+  useEffect(() => {
+    if (props.open && item) {
+      onPhoto();
+    }
+  }, [props.open, item]);
+
+  return (
+    <Modal
+      title="交易快照"
+      open={props.open}
+      onCancel={props.onCancel}
+      footer={null}
+      width={820}
+    >
+      <div
+        style={{
+          height: '480px',
+          width: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          justifyContent: 'space-between',
+          gap: '16px',
+        }}
+      >
+        <div className="left" style={{ width: '386px', height: '100%' }}>
+          <AdvancedImageGallery images={photo?.imgs?.split(',') || []} />
+        </div>
+        <div
+          className="right"
+          style={{ height: '100%', overflow: 'auto', width: '386px' }}
+        >
+          <Title level={4}>{photo?.spuName}</Title>
+          <Paragraph>
+            <Text type="secondary">{photo?.brief}</Text>
+          </Paragraph>
+          <div
+            style={{
+              marginBottom: '16px',
+              background: '#00000005',
+              padding: '8px',
+              borderRadius: '8px',
+              fontSize: '12px',
+            }}
+          >
+            <span>
+              当前页面为订单快照，包含订单创建时的商品描述和下单信息，买卖双方和平台在发生交易争议时，将作为判断依据。
+            </span>
+          </div>
+          <div
+            style={{
+              marginBottom: '16px',
+              background: '#00000005',
+              padding: '8px',
+              borderRadius: '8px',
+            }}
+          >
+            <strong>已选：{photo?.skuName}（已选的SKU规格）</strong>
+          </div>
+          <DangerouslySetInnerHTML content={photo?.content} />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
 export default React.memo(ProdInfo);

src/pages/trade/order/detail/src/info/service-info.tsx

@@ -4,8 +4,8 @@ import type { ItemConfig } from '../../order-info';
 import ServicePetUI from './uis/pets/service';
 
 const ServiceInfo: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
-  const { data = {}, orderCategoryId } = props;
-  return <>{orderCategoryId === 1 && <ServicePetUI data={data} />}</>; //宠物服务ui
+  const { data = {}, orderCategoryId, id } = props;
+  return <>{orderCategoryId === 1 && <ServicePetUI data={data} id={id} />}</>; //宠物服务ui
 };
 
 export default React.memo(ServiceInfo);

src/pages/trade/order/detail/src/info/uis/pets/config.tsx

@@ -77,15 +77,23 @@ export const baseOrderColumns: ProColumns<TradeExtendServeInfo>[] = [
                 />
                 <div>
                   <div>{serve.serveName}</div>
-                  <Text type="secondary">{serve.serveDesc}</Text>
                   <div>
-                    <Text type="secondary">数量：</Text>
-                    <Text>{serve.count}</Text>
-                    <Text type="secondary">单价：</Text>
-                    <Text>{serve.price}</Text>
-                    <Text type="secondary">到手价：</Text>
-                    <Text>{serve.handPrice}</Text>
+                    <Text type="secondary">{serve.serveDesc}</Text>
                   </div>
+                  <Space>
+                    <div>
+                      <Text type="secondary">数量：</Text>
+                      <Text>{serve.count}</Text>
+                    </div>
+                    <div>
+                      <Text type="secondary">单价：</Text>
+                      <Text>{serve.price}</Text>
+                    </div>
+                    <div>
+                      <Text type="secondary">到手价：</Text>
+                      <Text>{serve.handPrice}</Text>
+                    </div>
+                  </Space>
                 </div>
               </Space>
             ))}

src/pages/trade/order/detail/src/info/uis/pets/service.tsx

@@ -1,16 +1,22 @@
 import { ClockCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
-import { ProCard } from '@ant-design/pro-components';
-import { Button, Card, Image, Space, Timeline, Typography } from 'antd';
-import React from 'react';
+import { ProCard, type ProColumns } from '@ant-design/pro-components';
+import { Button, Card, Image, Modal, Space, Timeline, Typography } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import EnhancedProTable from '@/components/EnhancedProTable';
 import { fallback } from '@/constants/antd/image';
-import type { TradeServeInfo } from '@/services/trade/order/detail';
+import { getSubTimeLog } from '@/services/trade/order';
+import type {
+  TradeOrderSubLogDO,
+  TradeServeInfo,
+} from '@/services/trade/order/detail';
 import type { ItemConfig } from '../../../../order-info';
 import styles from '../../index.module.less';
 
 const { Text, Paragraph } = Typography;
 const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
-  const { data = {} } = props;
+  const { data = {}, id } = props;
   const { boneInfo, subInfo } = data;
+  const [open, setOpen] = useState<boolean>(false);
   return (
     <div className={styles['order-info']}>
       <Card title="服务信息">
@@ -54,7 +60,11 @@ const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
             size="small"
             title="预约信息"
             headerBordered
-            extra={<Button size="small">修改记录</Button>}
+            extra={
+              <Button size="small" onClick={() => setOpen(true)}>
+                修改记录
+              </Button>
+            }
           >
             <Space size={100}>
               <div>
@@ -99,8 +109,60 @@ const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
           </ProCard>
         </ProCard>
       </Card>
+      <SubTimeLogModal id={id} open={open} onCancel={() => setOpen(false)} />
     </div>
   );
 };
+//修改记录
+const SubTimeLogModal: React.FC<{
+  id?: number;
+  open?: boolean;
+  onCancel: () => void;
+}> = (props) => {
+  const { id, open = false } = props;
+  const [log, setLog] = useState<TradeOrderSubLogDO[]>([]);
+  const fetchSubTimeLog = useCallback(
+    async (id: number) => {
+      const res = await getSubTimeLog(id);
+      console.log(res);
+      setLog(res);
+    },
+    [id],
+  );
+  const columns: ProColumns<TradeOrderSubLogDO>[] = [
+    {
+      title: '预约时间',
+      dataIndex: 'subTime',
+      valueType: 'dateTime',
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      valueType: 'dateTime',
+    },
+  ];
+  useEffect(() => {
+    if (open && id) fetchSubTimeLog(id);
+  }, [open, id]);
+  return (
+    <Modal
+      width={'60vw'}
+      open={open}
+      onCancel={props.onCancel}
+      title="修改记录"
+      footer={null}
+    >
+      <EnhancedProTable<TradeOrderSubLogDO>
+        columns={columns}
+        dataSource={log}
+        showIndex={false}
+        search={false}
+        scroll={{ x: 'max-content' }}
+        showSelection={false}
+        pagination={false}
+      />
+    </Modal>
+  );
+};
 
 export default React.memo(ServicePetUI);

src/pages/trade/order/index.tsx

@@ -20,7 +20,7 @@ const OrderList: React.FC = () => {
 
   return (
     <div className={`${styles['trade-order']} "page-container" `}>
-      <Tabs defaultActiveKey="1" items={items} />
+      <Tabs defaultActiveKey="1" items={items} destroyOnHidden />
     </div>
   );
 };

src/pages/trade/order/list.tsx

@@ -12,9 +12,8 @@ import {
   message,
   Space,
   Statistic,
-  Typography,
 } from 'antd';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ConfigurableDrawerForm, {
   type ConfigurableDrawerFormRef,
 } from '@/components/DrawerForm';
@@ -29,14 +28,18 @@ import PopconfirmForm, {
 } from '@/components/PopconfirmForm';
 import {
   mapOrderStatusToBadgeStatus,
-  type OrderStatus,
+  OrderStatus,
   OrderStatusLabels,
 } from '@/constants/trade';
 import {
   getTradeOrderPage,
+  getTradeSummary,
   type TradeOrderPageRespVO,
   type TradeReq,
+  type TradeSummaryRespVO,
+  updateOrderRemark,
 } from '@/services/trade/order';
+import CancleOrderModal from './components/cancleOrderModal';
 import DetailCom from './detail';
 
 const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
@@ -46,6 +49,16 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
   const [modalData, setModalData] = useState<TradeOrderPageRespVO>();
   const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
   const popconfirmFormRef = useRef<PopconfirmFormRef>(null);
+  const [summary, setSummary] = useState<TradeSummaryRespVO>();
+  const [cancleOrderVisible, setCancleOrderVisible] = useState<boolean>(false);
+
+  const fetchSummary = async () => {
+    const res = await getTradeSummary();
+    setSummary(res);
+  };
+  useEffect(() => {
+    fetchSummary();
+  }, []);
   const onFetch = async (
     params: TradeReq & {
       pageSize: number;
@@ -74,14 +87,24 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
     [modalData],
   );
 
-  const handleOrder = useCallback((id?: number) => {
-    console.log(id, '取消订单');
-    // await updateTradeOrder(values.id);
-  }, []);
-
-  const handleUpdate = async (_values: TradeOrderPageRespVO) => {
-    try {
+  const handleOrder = useCallback(
+    (type: string, record?: TradeOrderPageRespVO) => {
+      setModalData(record);
+      if (type === 'order') {
+        setCancleOrderVisible(true);
+      }
+      if (type === 'order') {
+        setCancleOrderVisible(true);
+      }
       // await updateTradeOrder(values.id);
+    },
+    [],
+  );
+
+  const handleUpdate = async (values: TradeOrderPageRespVO, id?: number) => {
+    try {
+      await updateOrderRemark({ remark: values.userRemark || '', id: id });
+      tableRef.current?.reload();
       return true;
     } finally {
       message.success('更新成功');
@@ -105,37 +128,56 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
         }}
         key={record.id}
       >
-        <a key="cancel" onClick={() => handleOrder(record.id)}>
-          取消订单
-        </a>
-        <a key="order" onClick={() => handleOrder(record.id)}>
-          开始服务
-        </a>
-        <a key="sale" onClick={() => handleOrder(record.id)}>
-          新建售后
-        </a>
+        {record.orderStatus !== OrderStatus.Cancelled && (
+          <a key="cancel" onClick={() => handleOrder('order', record)}>
+            取消订单
+          </a>
+        )}
+        {record.orderStatus === OrderStatus.PendingService && (
+          <a key="order" onClick={() => handleOrder('service', record)}>
+            开始服务
+          </a>
+        )}
+        {record.orderStatus === OrderStatus.PendingConfirmation && (
+          <a key="order" onClick={() => handleOrder('service', record)}>
+            接单确定
+          </a>
+        )}
+        {(record.orderStatus as number) > OrderStatus.PendingPayment &&
+          record.orderStatus !== OrderStatus.Cancelled && (
+            <a key="sale" onClick={() => handleOrder('sales', record)}>
+              新建售后
+            </a>
+          )}
+        {record.orderStatus === OrderStatus.PendingAcceptance && (
+          <a key="sale" onClick={() => handleOrder('sales', record)}>
+            服务上报
+          </a>
+        )}
         <a key="detail" onClick={() => handleDetail(record)}>
           订单详情
         </a>
-        <PopconfirmForm
-          ref={popconfirmFormRef}
-          columns={[
-            {
-              title: '备注',
-              name: 'userRemark',
-              valueType: 'textarea',
-              fieldProps: { rows: 4, autoFocus: false },
-            },
-          ]}
-          onSubmit={handleUpdate}
-        >
-          <a
-            key="remark"
-            onClick={() => popconfirmFormRef.current?.open(record)}
+        {record.orderStatus === OrderStatus.PendingPayment && (
+          <PopconfirmForm
+            ref={popconfirmFormRef}
+            columns={[
+              {
+                title: '备注',
+                name: 'merchantRemark',
+                valueType: 'textarea',
+                fieldProps: { rows: 4, autoFocus: false },
+              },
+            ]}
+            onSubmit={(value) => handleUpdate(value, record.id)}
           >
-            添加备注
-          </a>
-        </PopconfirmForm>
+            <a
+              key="remark"
+              onClick={() => popconfirmFormRef.current?.open(record)}
+            >
+              添加备注
+            </a>
+          </PopconfirmForm>
+        )}
       </div>,
     ],
   };
@@ -251,13 +293,25 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
       {isShowTotal && (
         <ProCard.Group direction="row" style={{ marginBottom: 18 }}>
           <ProCard layout="center" style={{ background: '#f5f5f5' }}>
-            <Statistic title="订单数量" value={79.0} precision={2} />
+            <Statistic
+              title="订单数量"
+              value={summary?.orderCount}
+              precision={2}
+            />
           </ProCard>
           <ProCard layout="center" style={{ background: '#f5f5f5' }}>
-            <Statistic title="实付金额" value={112893.0} precision={2} />
+            <Statistic
+              title="实付金额"
+              value={summary?.payPrice}
+              precision={2}
+            />
           </ProCard>
           <ProCard layout="center" style={{ background: '#f5f5f5' }}>
-            <Statistic title="实收金额" value={93} suffix="/ 100" />
+            <Statistic
+              title="实收金额"
+              value={summary?.livePrice}
+              precision={2}
+            />
           </ProCard>
         </ProCard.Group>
       )}
@@ -286,8 +340,13 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
       >
         <DetailCom data={modalData} />
       </ConfigurableDrawerForm>
+      <CancleOrderModal
+        open={cancleOrderVisible}
+        onClose={() => setCancleOrderVisible(false)}
+        id={modalData?.id}
+      />
     </>
   );
 };
 
-export default OrderListItem;
+export default React.memo(OrderListItem);