客户信息管理-业务信息页面开发

src/pages/business_basic/components/second_customer_components/BusinessInfo.js

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import styles from './BusinessInfo.less';
+import StandardTable from '@/components/StandardTable';
+const BusinessInfo = ({ data }) => {
+    const mockData = {
+        // 合同信息
+        currentContract: 'CONTRACT-2023-001',
+        contractPeriod: '2023-01-01 至 2023-12-31',
+        paymentTerms: '月结30天',
+        contractAmount: 18000000,
+
+        // 财务信息
+        creditLimit: 2000000,
+        taxRegistrationNo: '91110000100012345X',
+        bankAccount: '0200 0045 0910 1234 567',
+        bankName: '中国工商银行北京分行'
+    }
+    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?.currentContract)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>合同有效期：</span><span className={styles.value}>{safe(mockData?.contractPeriod)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>付款条款：</span><span className={styles.value}>{safe(mockData?.paymentTerms)}</span></div>
+
+                    <div className={styles.item}><span className={styles.label}>合同金额：</span><span className={styles.value}>{currency(mockData?.contractAmount)}</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}>{currency(mockData?.creditLimit)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>税务登记号：</span><span className={styles.value}>{safe(mockData?.taxRegistrationNo)}</span></div>
+                    <div className={styles.item}><span className={styles.label}>开户银行：</span><span className={styles.value}>{safe(mockData?.bankName)}</span></div>
+
+                    <div className={styles.item}><span className={styles.label}>银行账户：</span><span className={styles.value}>{safe(mockData?.bankAccount)}</span></div>
+                </div>
+            </div>
+
+            <div className={styles.section}>
+                <div className={styles.sectionTitle}>近期交易记录</div>
+                <div className={styles.tableWrapper}>
+                    <StandardTable
+                        rowKey="key"
+                        columns={columns}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                total: tableData.length,
+                                pageSize: 10,
+                                current: 1,
+                                showTotal: (total) => `共 ${total} 条`,
+                            },
+                        }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BusinessInfo;
+
+

src/pages/business_basic/components/second_customer_components/BusinessInfo.less

@@ -0,0 +1,142 @@
+.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;
+}
+
+
+// 表格包装器
+.tableWrapper {
+	width: 60%;
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	:global(.ant-table-wrapper) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	// 表头样式
+	:global {
+		.ant-table-thead>tr>th {
+			color: rgba(51, 51, 51, 1) !important;
+			font-weight: 450 !important;
+			background-color: rgba(240, 247, 247, 1) !important;
+			text-align: center !important;
+		}
+
+		// 表体样式
+		.ant-table-tbody>tr>td {
+			color: rgba(78, 88, 86, 1) !important;
+			font-weight: 400 !important;
+			text-align: center !important;
+		}
+
+		// 操作列按钮样式
+		.viewDetailBtn {
+			color: rgba(0, 102, 101, 1) !important;
+
+			&:hover {
+				color: rgba(0, 102, 101, 1) !important;
+			}
+		}
+
+		.editBtn {
+			color: rgba(45, 158, 157, 1) !important;
+
+			&:hover {
+				color: rgba(45, 158, 157, 1) !important;
+			}
+		}
+
+		.deleteBtn {
+			color: rgba(255, 130, 109, 1) !important;
+
+			&:hover {
+				color: rgba(255, 130, 109, 1) !important;
+			}
+		}
+
+		// 状态列 Switch 样式
+		.statusSwitch {
+
+			// 启用状态背景色
+			&.ant-switch-checked {
+				background-color: rgba(20, 106, 89, 1) !important;
+			}
+
+			// 停用状态背景色
+			&:not(.ant-switch-checked) {
+				background-color: rgba(153, 153, 153, 1) !important;
+			}
+		}
+
+		// 复选框样式
+		.ant-checkbox-inner {
+			border-color: rgba(0, 102, 101, 1) !important;
+		}
+
+		.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+		.ant-checkbox:hover .ant-checkbox-inner {
+			border-color: rgba(0, 102, 101, 1) !important;
+		}
+
+		.ant-checkbox-checked .ant-checkbox-inner {
+			background-color: rgba(0, 102, 101, 1) !important;
+			border-color: rgba(0, 102, 101, 1) !important;
+		}
+	}
+}