feats

src/pages/broker/list/detail.jsx

@@ -1,53 +1,70 @@
-import { getBrokerDetails } from '@/services/apis';
 import { useEffect, useRef } from 'react';
 import React from 'react';
-import { Avatar, Row, Col } from 'antd';
+import { Modal, Descriptions, Typography, Table } from 'antd';
 import apis from '@/services/apis';
 import request from '@/utils/request';
 
-function agentDeal (props) {
-  const { detail, personId } = props;
+const { Title, Paragraph, Text } = Typography;
 
-  useEffect(() => {
-    request({
-      ...apis.broker.getBrokerDetails, params: { personId: detail.personId }
-    }).then((res) => {
-      console.log('res', res)
-    });
-  });
+function agentDeal (props) {
+  const { detail, open, onCancel } = props;
+  const { personId } = detail || {}
 
+  const [cardList, setCardList] = React.useState([]);
 
-  const list = [
-    {
-      title: '姓名',
-      render: detail.name,
-    },
+  const columns = [
     {
-      title: '手机号',
-      render: detail.phone,
+      title: '开户行',
+      dataIndex: 'bankName',
+      key: 'bankName',
+      render: t => <Text copyable>{t || '-'}</Text>
     },
     {
-      title: '身份证号',
-      render: detail.idNo,
+      title: '卡号',
+      dataIndex: 'cardNo',
+      key: 'cardNo',
+      render: t => <Text copyable>{t || '-'}</Text>
     },
-    {
-      title: '银行卡号',
-      // render: detail.personId,
-    },
-  ];
+  ]
+
+  useEffect(() => {
+    if (personId) {
+      request({
+        ...apis.broker.getBrokerDetails,
+        params: { personId, pageSize: 100 }
+      }).then((res) => {
+        setCardList(res.records || []);
+      });
+    }
+  }, [personId]);
+
   return (
-    <>
-      <Row>
-        {list.map((x, index) => {
-          return (
-            <div key={index} style={{ marginBottom: '20px', display: 'flex' }}>
-              <Col span={7}>{x.title}:</Col>
-              <Col span={17}>{x.render || '--'}</Col>
-            </div>
-          );
-        })}
-      </Row>
-    </>
+    <Modal
+      width={800}
+      visible={open}
+      title={detail.name || detail.nickname || '详情'}
+      onCancel={onCancel}
+      onOk={onCancel}
+      footer={null}
+    >
+      <Paragraph>
+        <h4 style={{ fontSize: '16px', marginBottom: '1em' }}>基础信息</h4>
+        <Descriptions column={3}>
+          <Descriptions.Item label="姓 名"><Text copyable>{detail.name || detail.nickname || '-'}</Text></Descriptions.Item>
+          <Descriptions.Item label="手 机"><Text copyable>{detail.phone || '-'}</Text></Descriptions.Item>
+          <Descriptions.Item label="身份证"><Text copyable>{detail.idNo || '-'}</Text></Descriptions.Item>
+        </Descriptions>
+      </Paragraph>
+      <Paragraph style={{ marginTop: '4em' }}>
+        <h4 style={{ fontSize: '16px', marginBottom: '1em' }}>银行卡信息</h4>
+        <Table
+          columns={columns}
+          dataSource={cardList}
+          rowKey="cardId"
+          pagination={false}
+        />
+      </Paragraph>
+    </Modal>
   );
 }
 

src/pages/broker/list/index.jsx

@@ -134,7 +134,8 @@ export default (props) => {
           {/* to={`/admin/bkBankCard?personId=${row}`}  , router.push(`/admin/bkBankCard?personId=${row.personId}`) */}
           <Button
             type="link" onClick={() => {
-              setDetail(row), setOpen(true)
+              setDetail(row);
+              setOpen(true);
             }}
 
           >
@@ -154,9 +155,7 @@ export default (props) => {
         searchFields={searchFields}
         columns={tableColumns}
       />
-      <Modal title="经纪人详情" visible={open} onOk={hideModal} onCancel={hideModal} footer={null}>
-        <DealDetail detail={detail} personId={personId} api={apis.broker.getBrokerDetails} />
-      </Modal>
+      <DealDetail detail={detail} open={open} onCancel={hideModal} />
     </>
   )
 }