diff --git a/src/pages/business_basic/components/second_customer_components/LogisticsInfo.js b/src/pages/business_basic/components/second_customer_components/LogisticsInfo.js new file mode 100644 index 0000000..178fec3 --- /dev/null +++ b/src/pages/business_basic/components/second_customer_components/LogisticsInfo.js @@ -0,0 +1,74 @@ +import React, { useMemo } from 'react'; +import styles from './LogisticsInfo.less'; +const LogisticsInfo = ({ data }) => { + const mockData = { + // 承运商信息 + approvedCarriers: '中远物流、顺丰速运、德邦物流', + vehicleRequirement: '危险品运输专用车辆', + driverQualification: '危险品运输资格证', + + // 交付信息 + preferredDeliveryLocation: '北京市大兴区亦庄开发区', + deliveryTime: '工作日 9:00-17:00', + receiverContact: '李主管(13900139001)', + + // 资质证书 + hazardousChemBusinessLicense: '已上传(有效期至2025-12-31)', + safetyProductionLicense: '已上传(有效期至2024-06-30)' + } + const safe = (v) => (v ?? '-') + const currency = (n) => { + if (typeof n === 'number') return `¥${n.toLocaleString()}`; + if (typeof n === 'string') return n; + return '-'; + } + + // 近期交易记录 - 列定义与数据(参考 second_oil_components/BasicInfo.less 的表格样式) + const columns = useMemo(() => ([ + { title: '订单号', dataIndex: 'orderId', key: 'orderId', width: 160 }, + { title: '日期', dataIndex: 'date', key: 'date', width: 200 }, + { title: '产品', dataIndex: 'product', key: 'product', width: 140 }, + { title: '数量(吨)', dataIndex: 'quantity', key: 'quantity', width: 120 }, + { title: '金额(元)', dataIndex: 'amount', key: 'amount', width: 140, render: (val) => val.toLocaleString() }, + ]), []); + + const tableData = [ + { key: '1', orderId: 'ORDER-2023-1025', date: '2025-11-15 20:02:14', product: '92#汽油', quantity: 500, amount: 3850000 }, + { key: '2', orderId: 'ORDER-2023-1012', date: '2025-11-15 18:22:58', product: '92#汽油', quantity: 200, amount: 2050000 }, + { key: '3', orderId: 'ORDER-2023-1005', date: '2025-11-15 15:38:26', product: '95#汽油', quantity: 300, amount: 1620000 }, + { key: '4', orderId: 'ORDER-2023-1021', date: '2025-11-10 10:42:08', product: '92#汽油', quantity: 500, amount: 3850000 }, + ]; + + return ( +
+
+
承运商信息
+
+
核准承运商:{safe(mockData?.approvedCarriers)}
+
车辆要求:{safe(mockData?.vehicleRequirement)}
+
司机资质:{safe(mockData?.driverQualification)}
+
+
+ +
+
交付信息
+
+
首选交付地点:{safe(mockData?.preferredDeliveryLocation)}
+
交付时间:{safe(mockData?.deliveryTime)}
+
接收联系人:{safe(mockData?.receiverContact)}
+
+
+
+
资质证书
+
+
危险化学品经营许可证:{safe(mockData?.hazardousChemBusinessLicense)}
+
安全生产许可证:{safe(mockData?.safetyProductionLicense)}
+
+
+
+ ); +}; + +export default LogisticsInfo; + + diff --git a/src/pages/business_basic/components/second_customer_components/LogisticsInfo.less b/src/pages/business_basic/components/second_customer_components/LogisticsInfo.less new file mode 100644 index 0000000..65093de --- /dev/null +++ b/src/pages/business_basic/components/second_customer_components/LogisticsInfo.less @@ -0,0 +1,55 @@ +.container { + width: 100%; + margin: 0 auto; + padding: 24px 32px; + background: #fff; +} + +.section { + margin-bottom: 24px; +} + +.sectionTitle { + font-size: 16px; + font-weight: 600; + color: #333333; + margin-bottom: 16px; + position: relative; + padding-left: 8px; +} + +.sectionTitle::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 18px; + background-color: #006665; + /* 蓝色竖线 */ + border-radius: 2px; +} + +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 48px; + grid-row-gap: 16px; +} + +.item { + display: flex; + align-items: baseline; +} + +.label { + color: #666666; + font-size: 12px; + min-width: 96px; +} + +.value { + color: #333333; + font-size: 12px; +} \ No newline at end of file