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

客户信息管理-详情页面开发

Browse Source
main
jiangxucong 1 week ago
parent 1613719d6e
commit 696ffb43c9
2 changed files with 270 additions and 0 deletions
Show Stats Download Patch File Download Diff File

101
src/pages/business_basic/components/CustomerInfoManagementDetail.js
Unescape Escape View File

@ -0,0 +1,101 @@
import React, { useState } from 'react';
import { Select } from 'antd';
import styles from './CustomerInfoManagementDetail.less';
import BasicInfo from './second_customer_components/BasicInfo';
import BusinessInfo from './second_customer_components/BusinessInfo';
import LogisticsInfo from './second_customer_components/LogisticsInfo';
import CooperateRecord from './second_customer_components/CooperateRecord';
const CustomerInfoManagementDetail = ({ data }) => {
// 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
const [firstMenu, setFirstMenu] = useState('basic');
const [secondMenu, setSecondMenu] = useState(undefined);
const [thirdMenu, setThirdMenu] = useState(undefined);
const [fourthMenu, setFourthMenu] = useState(undefined);
const [fifthMenu, setFifthMenu] = useState(undefined);
const firstMenuLabelMap = {
basic: '基础信息',
business: '业务信息',
logistics: '物流信息',
cooperate: '合作记录',
};
const renderFirstMenuContent = () => {
switch (firstMenu) {
case 'basic':
return <BasicInfo data={data} />;
case 'business':
return <BusinessInfo data={data} />;
case 'logistics':
return <LogisticsInfo data={data} />;
case 'cooperate':
return <CooperateRecord data={data} />;
default:
return null;
}
};
return (
<div className={styles.container}>
{/* 客户基本信息展示 */}
{!data ? (
<div className={styles.emptyInfo}>
暂无客户数据，请从列表页选择一个客户查看详情。
</div>
) : (
<div className={styles.detailHeader}>
<div className={styles.detailTitle}>{data?.customerName ?? '-'}</div>
<div className={styles.detailSubTitle}>客户ID：{data?.customerId ?? data?.id ?? '-'}</div>
</div>
)}
<div className={styles.topBar}>
<div className={styles.currentLabel}>
当前：{firstMenuLabelMap[firstMenu] || '未选择'}
</div>
<div className={styles.selectsWrapper}>
<Select
className={styles.topSelect}
value={firstMenu}
onChange={setFirstMenu}
options={[
{ label: '基础信息', value: 'basic' },
{ label: '业务信息', value: 'business' },
{ label: '物流信息', value: 'logistics' },
{ label: '合作记录', value: 'cooperate' },
]}
/>
<Select
className={styles.topSelect}
value={secondMenu}
onChange={setSecondMenu}
placeholder="业务信息"
options={[]}
disabled
/>
<Select
className={styles.topSelect}
value={thirdMenu}
onChange={setThirdMenu}
placeholder="物流信息"
options={[]}
disabled
/>
<Select
className={styles.topSelect}
value={fourthMenu}
onChange={setFourthMenu}
placeholder="合作记录"
options={[]}
disabled
/>
</div>
</div>
{renderFirstMenuContent()}
</div>
);
};
export default CustomerInfoManagementDetail;

169
src/pages/business_basic/components/CustomerInfoManagementDetail.less
Unescape Escape View File

@ -0,0 +1,169 @@
.container {
min-height: 100%;
.topBar {
display: flex;
height: 46px;
margin-bottom: 16px;
.currentLabel {
border-top-left-radius: 20px;
height: 100%;
width: 230px;
display: flex;
align-items: center;
padding-left: 22px;
color: #fff;
font-size: 17px;
font-weight: 450;
background: pink;
background-image: url('@/assets/business_basic/bgOil.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.selectsWrapper {
height: 100%;
// width: 230px;
background-color: #fff;
border: 1px solid transparent;
border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%);
border-image-slice: 1;
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.topSelect {
width: 130px;
display: flex;
align-items: center;
text-align: center;
box-shadow: none;
:global(.ant-select-selector) {
border: transparent !important;
background-image: url('@/assets/business_basic/Union.svg');
background-repeat: no-repeat;
background-position: center center;
font-size: 12px;
color: rgba(0, 102, 101, 1);
background-size: 100% 100%;
box-shadow: none !important;
}
:global(.ant-select-focused .ant-select-selector),
:global(.ant-select-selector:hover) {
border: transparent !important;
box-shadow: none !important;
}
:global(.ant-select-arrow) {
right: 25px;
color: rgba(0, 102, 101, 1);
}
}
}
.section {
margin-bottom: 16px;
.blockTitle {
font-size: 16px;
font-weight: 600;
color: #2f4f4f;
margin-bottom: 12px;
}
.formGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 16px;
grid-row-gap: 12px;
.formItem {
display: flex;
flex-direction: column;
.label {
color: #666;
font-size: 12px;
margin-bottom: 6px;
}
}
.span2 {
grid-column: 1 / span 2;
}
}
.actionsRight {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.listHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.filterRow {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
.filterItem {
display: flex;
align-items: center;
gap: 8px;
.filterLabel {
color: #666;
font-size: 12px;
white-space: nowrap;
}
}
}
}
.detailHeader {
margin: 0 0 16px 0;
padding: 12px 20px;
background: #fff;
border: 1px solid #eaeef2;
border-radius: 8px;
box-shadow: 0 0 0 1px rgba(240, 240, 240, 0.6) inset;
.detailTitle {
font-size: 16px;
line-height: 28px;
color: #333333;
font-weight: 600;
margin-bottom: 6px;
}
.detailSubTitle {
font-size: 12px;
line-height: 20px;
color: #666666;
}
}
.emptyInfo {
margin-bottom: 16px;
padding: 12px 20px;
background: #fffbe6;
border: 1px solid #ffe58f;
border-radius: 8px;
color: #614700;
}
}
Write Preview
Loading…
Cancel
Save