fix: 采购订单详情简单流程添加发货信息区块

src/pages/transaction/components/orderPayTabs/index.less

-.fontGray {
-  font-size: 12px;
-  color: #909399;
-  margin-bottom: 10px;
-}
-
-.bignumber {
-  font-size: 24px;
-  color: #303133;
-  margin-bottom: 10px;
-}
-
-.smallnumber {
-  font-size: 14px;
-  color: #303133;
-  line-height: 24px;
-}
+.fontGray {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 10px;
+}
+
+.bignumber {
+  font-size: 24px;
+  color: #303133;
+  margin-bottom: 10px;
+}
+
+.smallnumber {
+  font-size: 14px;
+  color: #303133;
+  line-height: 24px;
+}
\ No newline at end of file
+
+.card-list {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 4px;
+}

src/pages/transaction/components/orderPayTabs/index.tsx

@@ -4,6 +4,11 @@ import { Tabs, Row, Col } from 'antd'
 import { OrderDetailContext } from '../../_public/order/context'
 import MellowCard from '@/components/MellowCard'
 import StatusColors from '../StatusColors'
+import moment from 'moment'
+
+/**
+ * 展示 支付比例和简单流程的发货信息
+ */
 
 export interface OrderPayTabsProps {}
 
@@ -35,6 +40,9 @@ const OrderPayTabs:React.FC<OrderPayTabsProps> = (props) => {
 
   const { data, payList, ctl } = useContext(OrderDetailContext)
 
+  // 简单流程为24
+  const processEnum = data.processEnum
+
   useEffect(() => {
     // 过滤支付信息 取第一个待支付的id
     if(data?.paymentInformationResponses?.length) {
@@ -50,24 +58,53 @@ const OrderPayTabs:React.FC<OrderPayTabsProps> = (props) => {
   }
 
   return (
-    <MellowCard style={{marginTop: 24}} bordered={false}>
-      <Tabs defaultActiveKey='1' onChange={onChange}>
-        { data.paymentInformationResponses && data.paymentInformationResponses.map(v => <TabPane key={v.id} tab={<TabHeader dataSource={v}/>}>
-            <Row>
-              <Col className={style.fontGray} span={4}>支付环节: </Col>
-              <Col>{v.payNode}</Col>
+    <Row gutter={24} style={{marginTop: 24}}>
+      <Col span={processEnum === 24 ? 12 : 24}>
+        <MellowCard bordered={false} fullHeight>
+        {/* <Row gutter={24}> */}
+          <Tabs defaultActiveKey='1' onChange={onChange}>
+            { data.paymentInformationResponses && data.paymentInformationResponses.map(v => <TabPane key={v.id} tab={<TabHeader dataSource={v}/>}>
+                <Row>
+                  <Col className={style.fontGray} span={4}>支付环节: </Col>
+                  <Col>{v.payNode}</Col>
+                </Row>
+                <Row>
+                  <Col className={style.fontGray} span={4}>支付方式: </Col>
+                  <Col>{payTextList[v.payWay]}</Col>
+                </Row>
+                <Row>
+                  <Col className={style.fontGray} span={4}>支付渠道: </Col>
+                  <Col>{payList.find(j => j.id === v.channel)?.way || (v.channel === 0 && '积分支付')}</Col>
+                </Row>
+            </TabPane>) }
+          </Tabs>
+        {/* </Row> */}
+        </MellowCard>
+      </Col>
+      {
+        processEnum === 24 && data &&
+        <Col span={12}>
+          <MellowCard title="发货信息" fullHeight>
+            <Row className={style['card-list']}>
+              <Col span={6}><p>发货地址: </p></Col>
+              <Col><p>{data.name}</p></Col>
             </Row>
-            <Row>
-              <Col className={style.fontGray} span={4}>支付方式: </Col>
-              <Col>{payTextList[v.payWay]}</Col>
+            <Row className={style['card-list']}>
+              <Col span={6}><p>发货时间: </p></Col>
+              <Col><p>{moment(data.deliverTime).format('YYYY-MM-DD')}</p></Col>
             </Row>
-            <Row>
-              <Col className={style.fontGray} span={4}>支付渠道: </Col>
-              <Col>{payList.find(j => j.id === v.channel)?.way || (v.channel === 0 && '积分支付')}</Col>
+            <Row className={style['card-list']}>
+              <Col span={6}><p>物流单号: </p></Col>
+              <Col><p><a href={`https://www.kuaidi100.com/chaxun?nu=${data.deliverNo}`} target="_blank">{data.deliverNo}</a></p></Col>
             </Row>
-        </TabPane>) }
-      </Tabs>
-    </MellowCard>
+            <Row className={style['card-list']}>
+              <Col span={6}><p>物流公司: </p></Col>
+              <Col><p>{data.logisticsCompany}</p></Col>
+            </Row>
+          </MellowCard>
+        </Col>
+      }
+    </Row>
   )
 }