From 1613719d6ef709be4dcb5ac120df6c8e1ac24f7f Mon Sep 17 00:00:00 2001 From: jiangxucong Date: Fri, 5 Dec 2025 11:08:05 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E4=BF=A1=E6=81=AF=E7=AE=A1?= =?UTF-8?q?=E7=90=86-=E4=B8=9A=E5=8A=A1=E4=BF=A1=E6=81=AF=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BusinessInfo.js | 89 +++++++++++ .../BusinessInfo.less | 142 ++++++++++++++++++ 2 files changed, 231 insertions(+) create mode 100644 src/pages/business_basic/components/second_customer_components/BusinessInfo.js create mode 100644 src/pages/business_basic/components/second_customer_components/BusinessInfo.less diff --git a/src/pages/business_basic/components/second_customer_components/BusinessInfo.js b/src/pages/business_basic/components/second_customer_components/BusinessInfo.js new file mode 100644 index 0000000..dfe2a78 --- /dev/null +++ b/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 ( +
+
+
合同信息
+
+
当前合同：{safe(mockData?.currentContract)}
+
合同有效期：{safe(mockData?.contractPeriod)}
+
付款条款：{safe(mockData?.paymentTerms)}
+ +
合同金额：{currency(mockData?.contractAmount)}
+
+
+ +
+
财务信息
+
+
信用额度：{currency(mockData?.creditLimit)}
+
税务登记号：{safe(mockData?.taxRegistrationNo)}
+
开户银行：{safe(mockData?.bankName)}
+ +
银行账户：{safe(mockData?.bankAccount)}
+
+
+ +
+
近期交易记录
+
+ `共 ${total} 条`, + }, + }} + /> +
+
+
+ ); +}; + +export default BusinessInfo; + + diff --git a/src/pages/business_basic/components/second_customer_components/BusinessInfo.less b/src/pages/business_basic/components/second_customer_components/BusinessInfo.less new file mode 100644 index 0000000..4cf8556 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file