jiangxucong
/
dq-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
jiangxucong 1 week ago
parent f4e7b94035
commit 6df7bd46da
4 changed files with 161 additions and 3 deletions
Show Stats Download Patch File Download Diff File

41
src/pages/business_basic/components/CustomerInfoManagement.js
Unescape Escape View File

@ -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>

2
src/pages/business_basic/components/CustomerInfoManagement.less
Unescape Escape View File

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

67
src/pages/business_basic/components/second_customer_components/BasicInfo.js
Unescape Escape View File

@ -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;

54
src/pages/business_basic/components/second_customer_components/BasicInfo.less
Unescape Escape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save