客户信息管理-物流信息页面开发

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 (
+        <div className={styles.container}>
+            <div className={styles.section}>
+                <div className={styles.sectionTitle}>承运商信息</div>
+                <div className={styles.grid}>
+                    <div className={styles.item}><span className={styles.label}>核准承运商：</span><span className={styles.value}>{safe(mockData?.approvedCarriers)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>车辆要求：</span><span className={styles.value}>{safe(mockData?.vehicleRequirement)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>司机资质：</span><span className={styles.value}>{safe(mockData?.driverQualification)}</span></div>
+                </div>
+            </div>
+
+            <div className={styles.section}>
+                <div className={styles.sectionTitle}>交付信息</div>
+                <div className={styles.grid}>
+                    <div className={styles.item}><span className={styles.label}>首选交付地点：</span><span className={styles.value}>{safe(mockData?.preferredDeliveryLocation)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>交付时间：</span><span className={styles.value}>{safe(mockData?.deliveryTime)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>接收联系人：</span><span className={styles.value}>{safe(mockData?.receiverContact)}</span></div>
+                </div>
+            </div>
+            <div className={styles.section}>
+                <div className={styles.sectionTitle}>资质证书</div>
+                <div className={styles.grid}>
+                    <div className={styles.item}><span className={styles.label}>危险化学品经营许可证：</span><span className={styles.value}>{safe(mockData?.hazardousChemBusinessLicense)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>安全生产许可证：</span><span className={styles.value}>{safe(mockData?.safetyProductionLicense)}</span></div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LogisticsInfo;
+
+

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;
+}