feat: 完善售后查看多物流功能

src/pages/AfterSaleManage/components/LogisticsRecordModal.jsx

 import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import { Modal, Timeline, notification, Spin } from 'antd';
-import { getLogisticsRecord } from '../services';
+import { getLogisticsRecord, apiDeliveriesTraceList } from '../services';
+import styles from '../index.less';
 
 const LogisticsRecordModal = (props, ref) => {
   // const { } = props;
 
   const [visible, setVisible] = useState(false);
-  const [result, setResult] = useState({});
   const [loading, setLoading] = useState(false);
+  const [dataList, setDataList] = useState([]);
 
   const getRecordList = async orderNo => {
     const tempObj = {
@@ -15,19 +16,14 @@ const LogisticsRecordModal = (props, ref) => {
       key: Date.now(),
     };
     setLoading(true);
-    const res = await getLogisticsRecord({ orderNo });
+    const res = await apiDeliveriesTraceList({ orderNo });
     setLoading(false);
     if (!res) {
       notification.info({ message: '暂无物流信息' });
       return;
     }
-    const { logisticsName, logisticsBillNo, logisticsList = [] } = res.data;
-    tempObj.expressCompanyName = logisticsName;
-    tempObj.deliveryNo = logisticsBillNo;
-    logisticsList.forEach(v => {
-      tempObj.detailList = [...tempObj.detailList, ...v.detailList];
-    });
-    setResult(tempObj);
+
+    setDataList(res.data);
   };
 
   const open = orderNo => {
@@ -36,7 +32,9 @@ const LogisticsRecordModal = (props, ref) => {
   };
   const onCancel = () => {
     setVisible(false);
-    setResult([]);
+    setTimeout(() => {
+      setDataList([]);
+    }, 1000);
   };
   useImperativeHandle(ref, () => ({
     open,
@@ -59,15 +57,30 @@ const LogisticsRecordModal = (props, ref) => {
   return (
     <Modal {...modalProps}>
       <Spin spinning={loading}>
-        {result.detailList?.length ? (
-          <Timeline>
-            {result?.detailList?.map((item, index) => (
-              <Timeline.Item color={index > 0 ? 'gray' : 'blue'} key={index.toString()}>
-                <p>{item.desc}</p>
-                <p>{item.logisticsTime}</p>
-              </Timeline.Item>
-            ))}
-          </Timeline>
+        {dataList.length ? (
+          dataList.map((dataItem, dataIndex) => (
+            <div className={styles['logistics-record']}>
+              <div className={styles['logistics-record__topbar']}>包裹{dataIndex + 1}</div>
+              <div className={styles['logistics-record__head']}>
+                <span className={styles.name}>物流公司：{dataItem.expressCompanyName}</span>
+                <span className={styles.no}>物流单号：{dataItem.expressNo}</span>
+              </div>
+              {dataItem.traceList.map(traceItem => (
+                <Timeline>
+                  {traceItem?.detailList.length ? (
+                    traceItem?.detailList?.map((item, index) => (
+                      <Timeline.Item color={index > 0 ? 'gray' : 'blue'} key={index.toString()}>
+                        <p>{item.desc}</p>
+                        <p>{item.time}</p>
+                      </Timeline.Item>
+                    ))
+                  ) : (
+                    <div style={emptyStyle}>暂无物流信息</div>
+                  )}
+                </Timeline>
+              ))}
+            </div>
+          ))
         ) : (
           <div style={emptyStyle}>暂无物流信息</div>
         )}

src/pages/AfterSaleManage/index.jsx

@@ -16,6 +16,7 @@ import RejectModal from './components/rejectModal';
 import LogisticsCom from '../orderManage/pendingDeliveryOrder/components/LogisticsCom';
 import CancelAuditModal from './components/CancelAuditModal';
 import CancelDetailTable from './components/CancelDetailTable';
+import LogisticsRecordModal from './components/LogisticsRecordModal';
 
 import { getColumns, getFormConfig, TAB_MAPPING_DATA } from './data.js';
 import { getDetail } from '@/pages/afterSale/appeal/services';
@@ -44,6 +45,7 @@ const AfterSale = props => {
 
   const actionRef = useRef();
   const formRef = useRef();
+  const logisticsRecordModalRef = useRef();
   const [tableParams, setTableParams] = useState({});
   const [currentTab, setCurrentTab] = useState('');
   // const [appealDetailModal, setAppealDetailModal] = useState(false);
@@ -132,25 +134,26 @@ const AfterSale = props => {
   };
 
   // 查看物流
-  const handleCom = async ({ expressCompanyCode, deliveryNo }) => {
-    const tempObj = {
-      detailList: [],
-      key: Date.now(),
-    };
-    const data = await trackInfo({ expressCompanyCode, logisticsNo: deliveryNo });
-    if (!data) {
-      notification.info({ message: '暂无物流信息' });
-      return;
-    }
-    tempObj.expressCompanyName = data.logisticsName;
-    tempObj.deliveryNo = data.logisticsBillNo;
-    if (data.logisticsList?.length) {
-      data.logisticsList.forEach(v => {
-        tempObj.detailList = [...tempObj.detailList, ...v.detailList];
-      });
-    }
-    setLogisticsComModalVisible(true);
-    setLogisticsComList(tempObj);
+  const handleCom = async ({ orderNo }) => {
+    logisticsRecordModalRef.current.open(orderNo);
+    // const tempObj = {
+    //   detailList: [],
+    //   key: Date.now(),
+    // };
+    // const data = await trackInfo({ expressCompanyCode, logisticsNo: deliveryNo });
+    // if (!data) {
+    //   notification.info({ message: '暂无物流信息' });
+    //   return;
+    // }
+    // tempObj.expressCompanyName = data.logisticsName;
+    // tempObj.deliveryNo = data.logisticsBillNo;
+    // if (data.logisticsList?.length) {
+    //   data.logisticsList.forEach(v => {
+    //     tempObj.detailList = [...tempObj.detailList, ...v.detailList];
+    //   });
+    // }
+    // setLogisticsComModalVisible(true);
+    // setLogisticsComList(tempObj);
   };
 
   // 物流拦截
@@ -439,6 +442,8 @@ const AfterSale = props => {
         onCancel={closeModal}
         dataSource={cancelDetailInfo}
       />
+
+      <LogisticsRecordModal ref={logisticsRecordModalRef} />
     </PageHeaderWrapper>
   );
 };

src/pages/AfterSaleManage/index.less

@@ -59,3 +59,24 @@
     }
   }
 }
+
+.logistics-record {
+  &__topbar {
+    margin-bottom: 15px;
+    padding-left: 10px;
+    color: #000;
+    font-weight: bold;
+    font-size: 16px;
+    border-left: 10px solid #2391fe;
+  }
+  &__head {
+    padding-bottom: 25px;
+    color: #000;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1;
+    .no {
+      margin-left: 20px;
+    }
+  }
+}

src/pages/AfterSaleManage/services.js

@@ -131,6 +131,21 @@ export async function getLogisticsRecord(params) {
   });
 }
 
+/**
+ * 多物流发货-查询物流轨迹
+ * @see http://yapi.quantgroups.com/project/389/interface/api/46120
+ */
+
+export function apiDeliveriesTraceList(data) {
+  return request.post('/api/merchants/deliveries/trace/list', {
+    data: stringify(data),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    prefix: kdspApi,
+  });
+}
+
 // 查询售后待办数量
 export function getAfterPendingNum(data) {
   return request.post('/api/kdsp/op/afs/getPendingNum', {