客户信息管理-基础信息页面开发

src/pages/business_basic/components/CustomerInfoManagement.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 import styles from './CustomerInfoManagement.less';
+import CustomerInfoManagementDetail from './CustomerInfoManagementDetail';
 
 const CustomerInfoManagement = () => {
     const [searchKeyword, setSearchKeyword] = useState('');
@@ -10,6 +11,10 @@ const CustomerInfoManagement = () => {
     const [selectedRows, setSelectedRows] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
+    // 新增：详情页面切换状态
+    const [showDetail, setShowDetail] = useState(false);
+    const [detailData, setDetailData] = useState(null);
+    const [prevScrollY, setPrevScrollY] = useState(0);
 
     // 图表引用
     const customerTypeChartRef = useRef(null);
@@ -273,6 +278,29 @@ const CustomerInfoManagement = () => {
 
     // 计算总页数
     const totalPages = Math.ceil(85 / pageSize);
+    // 当进入详情模式时，直接渲染详情页并提供返回按钮
+    if (showDetail) {
+        return (
+            <div className={styles.container}>
+                <div style={{marginBottom:10}}>
+                    <button
+                        className={styles.backBtn}
+                        onClick={() => {
+                            setShowDetail(false);
+                            // 恢复滚动位置
+                            setTimeout(() => {
+                                window.scrollTo(0, prevScrollY);
+                            }, 0);
+                        }}
+                        style={{padding:'6px 12px',border:'1px solid #d9d9d9',borderRadius:6,background:'#fff',fontSize:12,cursor:'pointer'}}
+                    >
+                        ← 返回列表
+                    </button>
+                </div>
+                <CustomerInfoManagementDetail data={detailData} />
+            </div>
+        );
+    }
 
     return (
         <div className={styles.container}>
@@ -402,7 +430,6 @@ const CustomerInfoManagement = () => {
                             🔍 查询
                         </button>
                         <button className={styles.resetBtn} onClick={() => {
-                            setSearchKeyword('');
                             setCustomerType('全部');
                             setCustomerLevel('全部');
                             setCooperationStatus('全部');
@@ -471,7 +498,17 @@ const CustomerInfoManagement = () => {
                                     </td>
                                     <td>
                                         <div className={styles.actionBtns}>
-                                            <button className={styles.actionBtn}>查看详情</button>
+                                            <button
+                                                className={styles.actionBtn}
+                                                onClick={() => {
+                                                    // 记录当前滚动位置
+                                                    setPrevScrollY(window.pageYOffset || document.documentElement.scrollTop || 0);
+                                                    setDetailData(row);
+                                                    setShowDetail(true);
+                                                }}
+                                            >
+                                                查看详情
+                                            </button>
                                             <button className={styles.actionBtn}>修改</button>
                                             <button className={`${styles.actionBtn} ${styles.deleteBtn}`}>删除</button>
                                         </div>

src/pages/business_basic/components/CustomerInfoManagement.less

@@ -1,5 +1,5 @@
 .container {
-    padding: 20px;
+    padding: 10px 5px;
     background: #f5f5f5;
     min-height: 100vh;
 

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

@@ -0,0 +1,67 @@
+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;
+
+

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

@@ -0,0 +1,54 @@
+.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;
+}