From 696ffb43c9ffb027b0295ad16b4d6443504d76d0 Mon Sep 17 00:00:00 2001 From: jiangxucong Date: Fri, 5 Dec 2025 13:39:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E4=BF=A1=E6=81=AF=E7=AE=A1?= =?UTF-8?q?=E7=90=86-=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=BC=80?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomerInfoManagementDetail.js | 101 +++++++++++ .../CustomerInfoManagementDetail.less | 169 ++++++++++++++++++ 2 files changed, 270 insertions(+) create mode 100644 src/pages/business_basic/components/CustomerInfoManagementDetail.js create mode 100644 src/pages/business_basic/components/CustomerInfoManagementDetail.less diff --git a/src/pages/business_basic/components/CustomerInfoManagementDetail.js b/src/pages/business_basic/components/CustomerInfoManagementDetail.js new file mode 100644 index 0000000..015364c --- /dev/null +++ b/src/pages/business_basic/components/CustomerInfoManagementDetail.js @@ -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 ; + case 'business': + return ; + case 'logistics': + return ; + case 'cooperate': + return ; + default: + return null; + } + }; + + return ( +
+ {/* 客户基本信息展示 */} + {!data ? ( +
+ 暂无客户数据，请从列表页选择一个客户查看详情。 +
+ ) : ( +
+
{data?.customerName ?? '-'}
+
客户ID：{data?.customerId ?? data?.id ?? '-'}
+
+ )} +
+
+ 当前：{firstMenuLabelMap[firstMenu] || '未选择'} +
+
+ + +
+
+ + {renderFirstMenuContent()} +
+ ); +}; + +export default CustomerInfoManagementDetail; + diff --git a/src/pages/business_basic/components/CustomerInfoManagementDetail.less b/src/pages/business_basic/components/CustomerInfoManagementDetail.less new file mode 100644 index 0000000..00a03db --- /dev/null +++ b/src/pages/business_basic/components/CustomerInfoManagementDetail.less @@ -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; + } +} \ No newline at end of file