|
|
import React from 'react';
|
|
|
import styles from './BasicInfo.less';
|
|
|
|
|
|
const BasicInfo = ({ data }) => {
|
|
|
const mockData = {
|
|
|
// 基本信息
|
|
|
companyName: '中国石化销售股份有限公司',
|
|
|
contactName: '张经理',
|
|
|
address: '北京市朝阳区朝阳门北大街22号',
|
|
|
creditCode: '9110000100012345X',
|
|
|
email: 'zhang@sinopec.com',
|
|
|
legalEntity: '中国石油化工股份有限公司',
|
|
|
customerId: 'CUST-001',
|
|
|
phone: '13800138000',
|
|
|
|
|
|
// 交易信息
|
|
|
annualPurchase: 15680000,
|
|
|
paymentTerm: '30 天',
|
|
|
cooperationStart: '2020-03-15',
|
|
|
paymentMethod: '银行转账',
|
|
|
lastTransaction: '2023-10-28',
|
|
|
creditRating: 'A+'
|
|
|
}
|
|
|
const safe = (v) => (v ?? '-')
|
|
|
const currency = (n) => {
|
|
|
if (typeof n === 'number') return `¥${n.toLocaleString()}`;
|
|
|
if (typeof n === 'string') return n;
|
|
|
return '-';
|
|
|
}
|
|
|
|
|
|
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?.companyName)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>联系人：</span><span className={styles.value}>{safe(mockData?.contactName)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>地址：</span><span className={styles.value}>{safe(mockData?.address)}</span></div>
|
|
|
|
|
|
<div className={styles.item}><span className={styles.label}>统一信用代码：</span><span className={styles.value}>{safe(mockData?.creditCode)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>电子邮箱：</span><span className={styles.value}>{safe(mockData?.email)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>法定实体：</span><span className={styles.value}>{safe(mockData?.legalEntity)}</span></div>
|
|
|
|
|
|
<div className={styles.item}><span className={styles.label}>客户 ID：</span><span className={styles.value}>{safe(mockData?.customerId)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>联系电话：</span><span className={styles.value}>{safe(mockData?.phone)}</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?.annualPurchase)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>账期：</span><span className={styles.value}>{safe(mockData?.paymentTerm)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>合作起始：</span><span className={styles.value}>{safe(mockData?.cooperationStart)}</span></div>
|
|
|
|
|
|
<div className={styles.item}><span className={styles.label}>支付方式：</span><span className={styles.value}>{safe(mockData?.paymentMethod)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>最近交易：</span><span className={styles.value}>{safe(mockData?.lastTransaction)}</span></div>
|
|
|
<div className={styles.item}><span className={styles.label}>信用等级：</span><span className={styles.value}>{safe(mockData?.creditRating)}</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default BasicInfo;
|
|
|
|
|
|
|
