dq-cms/src/pages/business_basic/components/second_customer_components/BasicInfo.js

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;