需求

src/pages/funds/financialContact/index.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
+import { Form, Input, Button, Card, Icon, Avatar, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb,Row,Col } from 'antd';
 import router from 'umi/router';
 import moment from 'moment';
 import apis from '../../../services/apis';
 
 function financialContact(props) {
 
+    const { Meta } = Card;
     // const [taNoticeList, setTaNoticeList] = useState([])
     const [data, setData] = useState({})
+    const [visible, setVisible] = useState(false);
+    const [currentData, setCurrentData] = useState('');
 
     useEffect(() => {
         getList({ pageNum: 1, pageSize: 10 });
         });
     }
 
+    const openModel =(wxImg)=>{
+        console.log(wxImg)
+        if(wxImg){
+            setVisible(true)
+            setCurrentData(wxImg)
+        }    
+    }
+
+    const onCancel = () => {
+        setVisible(false)
+    }
+
 
     const { getFieldDecorator } = props.form
 
             {/* <div style={{ marginTop: '20px' }}>
                 <Button type="primary" style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} >导出</Button>
             </div> */}
-            <Table dataSource={data.records} columns={columns} pagination={false} style={{ marginTop: '20px' }} />
+
+            <Row>
+                {(data.records || []).map((x, index) => (
+                <Col key={index} span={6}>
+                     <Card
+                        style={{ width: 300, marginTop: 16 }}
+                        actions={[
+                        <span>{"TEL:" + x.phone}</span>,
+                        <span onClick={() => openModel(x.wxCardImg)}>加微信</span>,
+                        ]}
+                    >
+                        <Meta
+                        style={{ height: 100 }}
+                        avatar={<Avatar src={x.avatar ? x.avatar : "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"} />}
+                        title={x.contactName}
+                        description={x.appellation}
+                        />
+                    </Card>
+                </Col>
+                ))}
+            </Row>
+
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                 <Pagination
                     showQuickJumper
                     defaultCurrent={1}
                     total={data.total} onChange={e => changePageNum(e)} current={data.current} />
             </div>
+
+
+            <Modal
+                title="加我微信"
+                width="500px"
+                visible={visible}
+                onCancel={onCancel}
+                footer={[]}
+            >
+                <div style={{textAlign:'center',display:'inline-grid',width:'100%'}}>
+                     <img src={currentData} alt="" style={{margin:'0 auto'}}/>
+                <p>扫码加我微信聊</p>
+                </div>
+               
+            </Modal>
         </>
 
     )