公客私客页面

config/routes.js

                 name: '到访记录',
                 component: './customer/visiting/index',
               },
+              {
+                path: '/customer/customerlist/publicCustomerDetail',
+                name: '私客详情',
+                hideInMenu: true,
+                component: './customer/customerlist/publicCustomerDetail',
+              },
             ],
           },
           {

src/pages/customer/customerlist/customerDetail.jsx

   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [data, setData] = useState([{ visitRecords: [] }])
   const [dataConsultant, setDataonsultant] = useState({})
+  const [intentionData, setIntentionData] = useState([])
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
       setDataonsultant(res.geoInfo)
     })
   }
-
+// 分页
+  const changePageNum = pageNumber => {
+    // getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+  }
   const columns = [
     {
       title: '访问事件',
       render: (_, record) => <span>{record.visitDuration === null ? 0 : record.visitDuration }秒</span>,
     },
   ]
+  // 意向
+  const intention = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      width: 150,
+      render: (_, record) => <span>香颂半岛</span>,
+    },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      render: (_, record) => <span style={{ marginLeft: '55%' }}>22</span>,
+    },
+  ];
+
+for (let i = 0; i < 100; i++) {
+  intentionData.push({
+    key: i,
+    name: `Edward King ${i}`,
+    age: 32,
+    address: `London, Park Lane no. ${i}`,
+  });
+}
   return (
     <>
       <div className={styles.cardBox}>
      {/* { console.log("data:",data),console.log("data:",dataConsultant)} */}
-        <div className={styles.leftBox}>
-          <p className={styles.tit}>置业顾问信息</p>
-          <img className={styles.touxiang} src={ data.consultant && data.consultant.picture } />
-          <p className={styles.infoItem}>姓名：{ data.consultant && data.consultant.name }</p>
-          <p className={styles.infoItem}>部门：{ data.consultant && data.consultant.department }</p>
-          <p className={styles.infoItem}>岗位：{ data.consultant && data.consultant.post }</p>
-          <p className={styles.infoItem}>号码：{ data.consultant && data.consultant.phone } </p>
-          <p className={styles.infoItem}>公司：{ data.consultant && data.consultant.company } </p>
-          <p className={styles.infoItem}>
-            所属项目：
-            {
-              data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
-            }
-          </p>
-        </div>
         <div className={styles.rightBox}>
           <p className={styles.tit}>客户信息</p>
           <img className={styles.touxiang} src={ data.picture && data.picture } />
           <div className={styles.right}>
             <p className={styles.rightItem}>用户名称：{ data.name }</p>
             <p className={styles.rightItem}>手机号码：{ data.phone }</p>
-            <p className={styles.rightItem}>来访渠道：活动分享</p>
+            <p className={styles.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
+          </div>
+          <div className={styles.Centered}>
+          <p>访问时长：{ data.duration }秒</p>
+          <p>访问次数：{ data.visitTimes }</p>
+          <p className={styles.rightItem}>客户描述：{ data.describe }</p>
+          {/* <p>预约人数：{ data.visiteNum }</p> */}
+          </div>
+          <div className={styles.rightCentered}>
+          <p >需求类型：{ data.demandType }</p>
+          <p >价格区间：{data.priceRange }</p>
+          <p >物业类型：{ data.realtyManageType }</p>
+          {/* <p>预约人数：{ data.visiteNum }</p> */}
           </div>
-          <p className={styles.rightItem}>访问时长：{ data.duration }秒</p>
-          <p className={styles.rightItem}>访问次数：{ data.visitTimes }</p>
-          <p className={styles.rightItem}>预约人数：{ data.visiteNum }</p>
-          <p className={styles.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
-          <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p>
+          {/* <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p> */}
           <div className={styles.rightInfo}>
             <p className={styles.rightItem}>国家：{ dataConsultant&&dataConsultant.country }</p>
             <p className={styles.rightItem}>省份：{ dataConsultant&&dataConsultant.provience }</p>
             <p className={styles.rightItem}>城市：{dataConsultant&&dataConsultant.city }</p>
-            <p className={styles.rightItem}>详细信息：</p>
-            <p className={styles.rightItem}>意向项目：{data.intention }</p>
-            <p className={styles.rightItem}>价格区间：{data.priceRange }</p>
-            <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p>
-            <p className={styles.rightItem}>客户描述：{ data.describe }</p>
-            <p className={styles.rightItem}>需求类型：{ data.demandType }</p>
-            <p className={styles.rightItem}>物业类型：{ data.realtyManageType }</p>
+            <p className={styles.rightItem}>来访渠道：活动分享</p>
+            {/* <p className={styles.rightItem}>详细信息：</p> */}
+            {/* <p className={styles.rightItem}>意向项目：{data.intention }</p> */} 
+            {/* <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p> */}
           </div>
         </div>
+        
+      </div>
+      <br></br>
+      <div className={styles.cardBox}>
+        <div className={styles.rightBoxCentre}>
+        <p className={styles.tit}>置业顾问信息</p>
+          <img className={styles.touxiang} src={ data.picture && data.picture } />
+          <p className={styles.infoItem}>曹玉文</p>
+          <div className={styles.right}>
+          {/* <p className={styles.infoItem}>姓名：{ data.consultant && data.consultant.name }</p>
+          <p className={styles.infoItem}>部门：{ data.consultant && data.consultant.department }</p> */}
+          <p className={styles.infoItem}>号码：{ data.consultant && data.consultant.phone } </p>
+          <p className={styles.infoItem}>岗位：{ data.consultant && data.consultant.post }</p>
+          </div>
+          <div className={styles.left}>
+          <p className={styles.infoItem}>公司：{ data.consultant && data.consultant.company } </p>
+          <p className={styles.infoItem}>
+            所属项目：
+            {
+              data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
+            }
+          </p>
+          </div>
+        </div>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <div className={styles.leftBoxCentre}>
+          <div className={styles.tit}>
+                <span>项目名称</span>
+                <span style={{ marginLeft: '47%' }}>项目名称</span>
+          </div>
+          {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
+          <div className={styles.infoItem}>
+          <Table columnWidth={10} showHeader={false} columns={intention} dataSource={intentionData} pagination={{ pageSize: 50 }} scroll={{ y: 240 }}/>,
+          </div>
+        </div>
+
       </div>
       <div className={styles.recordBox}>
         <p className={styles.tableName}>访问记录</p>
-        <Table dataSource={data.visitRecords} columns={columns} pagination={false} rowKey="customerDetail" />
+        <Table dataSource={data.visitRecords} columns={columns} pagination={false} rowKey="customerDetail" onChange={changePageNum}/>
       </div>
 
     </>

src/pages/customer/customerlist/index.jsx

 
 import Attribution from './components/attribution'
 import IntegralRecord from './components/integralRecord'
+import ModalRecommendRecord from './components/recommend'
 import ChangeStatus from './components/changeStatus'
 import BuildSelect from '../../../components/SelectButton/BuildSelect'
 import AuthButton from '@/components/AuthButton';
   const [statusVisibleData, setStatusVisibleData] = useState({ visible: false, customerId: '', status: '' })
   // 变更状态 ============= end
 
+  // 推荐客户
+  const [recommendVisibleData, setRecommendVisibleData] = useState({ visible: false, customerId: '' })
+
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     getList({ pageNumber: 1, pageSize: 10, customerType })
     setRecordVisibleData({ visible: false, customerId: '' })
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
     setStatusVisibleData({ visible: false, customerId: '', status: '' })
+    setRecommendVisibleData({ visible: false, customerId: '' })
   }
 
   // 提交事件
     setGVisibleData({ visible: true, customerId: record.customerId, realtyConsultant: record.realtyConsultant, buildingId: record.buildingId })
     setRecordVisibleData({ visible: false, customerId: '' })
     setStatusVisibleData({ visible: false, customerId: '' })
+    setRecommendVisibleData({ visible: false, customerId: '' })
   }
 
   function showRecord(record) {
     setRecordVisibleData({ visible: true, customerId: record.customerId })
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '', buildingId: '' })
     setStatusVisibleData({ visible: false, customerId: '' })
+    setRecommendVisibleData({ visible: false, customerId: '' })
   }
 
   function showStatus(record) {
     setRecordVisibleData({ visible: false, customerId: '' })
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '', buildingId: '' })
+    setRecommendVisibleData({ visible: false, customerId: '' })
     setStatusVisibleData({ visible: true, customerId: record.customerId, status: record.status })
   }
+
+  // 推荐客户
+  function showRecommend(personId) {
+    setRecordVisibleData({ visible: false, customerId: '' })
+    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '', buildingId: '' })
+    setStatusVisibleData({ visible: false, customerId: '', status: '' })
+    setRecommendVisibleData({ visible: true, customerId: personId })
+  }
   function toCustomerDateil(record) {
     router.push({
       pathname: '/customer/customerlist/customerDetail',
       },
     });
   }
+  // 私客详情
+  function publicCustomerDetail(record) {
+    router.push({
+      pathname: '/customer/customerlist/publicCustomerDetail',
+      query: {
+        id: record.customerId,
+      },
+    });
+  }
 
   function exportCustomer () {
     const fieldsValue = getFieldsValue()
 
   // 关闭调整归属的窗口
   function closeAttribution() {
+    alert(1)
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '', buildingId: '' })
     getList({ pageNum: 1, pageSize: 10, customerType, ...props.form.getFieldsValue() })
   }
+  // 回调关闭所有弹框
+  function closeAll() {
+    alert(1)
+    setRecordVisibleData({ visible: false, customerId: '' })
+    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '', buildingId: '' })
+    setStatusVisibleData({ visible: false, customerId: '', status: '' })
+    setRecommendVisibleData({ visible: false, customerId: '' })
+  }
 
   const publicColumns = [
     {
       align: 'center',
       width: '15%',
     },
+    {
+      title: '性别',
+      dataIndex: 'sex',
+      key: 'sex',
+      align: 'center',
+      width: '10%',
+      // eslint-disable-next-line no-nested-ternary
+      render: (_, record) => <><span>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</span></>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'customerId',
+      key: 'customerId',
+      align: 'center',
+      width: '25%',
+      // eslint-disable-next-line no-nested-ternary
+      render: (_, record) => (
+        <>
+          <AuthButton>
+            <Button className={customerType === 'private' ? Styles.displayS : Styles.text } type="link" onClick={() => publicCustomerDetail(record)}>查看详情</Button>
+          </AuthButton>
+          &nbsp;&nbsp;
+          <AuthButton>
+            <Button className={customerType === 'private' ? Styles.displayS : Styles.text } type="link" onClick={() => showRecommend(record.personId)}>推荐客户</Button>
+          </AuthButton>
+        </>
+      ),
+    },
   ]
 
   const privateColumns = [
       // eslint-disable-next-line no-nested-ternary
       render: (_, record) => (
         <>
+            &nbsp;
           <AuthButton name="admin.customer.recommend.edit.id.put" noRight={null}>
             <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showStatus(record)}>变更状态</Button>
             &nbsp;&nbsp;
             <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showGM(record)}>调整归属</Button>
           </AuthButton>
-            <br />
+            &nbsp;&nbsp;
           <AuthButton name="admin.customer.recommend.get" noRight={null}>
             <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => toCustomerDateil(record)}>查看详情</Button>
           </AuthButton>
           <AuthButton name="admin.mine.taPointsRecords.id.get" noRight={null}>
             <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showRecord(record)}>积分记录</Button>
           </AuthButton>
+            &nbsp;
+          <AuthButton name="admin.mine.taPointsRecords.id.get" noRight={null}>
+            <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showRecommend(record.customerId)}>推荐客户</Button>
+          </AuthButton>
         </>
       ),
     },
       <Attribution visibleData={gVisibleData} onCancel={() => closeAttribution()}/>
 
       {/* 积分记录 */}
-      <IntegralRecord visibleData={recordVisibleData} />
+      <IntegralRecord visibleData={recordVisibleData} onCancel={() => closeAll()} />
 
       {/* 变更状态 */}
-      <ChangeStatus visibleData={statusVisibleData} />
+      <ChangeStatus visibleData={statusVisibleData} onCancel={() => closeAll()}/>
+
+      {/* 推荐客户 */}
+      <ModalRecommendRecord visibleData={recommendVisibleData} onCancel={() => closeAll()}/>
     </>
   );
 }

src/pages/customer/customerlist/style.less

 .cardBox{
   display: flex;
   .leftBox{
-    width:342px;
+    width:1000px;
     min-width:342px;
-    height:511px;
+    height:1000px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    margin-right: 30px;
+    padding: 30px;
+    overflow: hidden;
+  }
+  .rightBox{
+    width:865px;
+    min-width:342px;
+    height:290px;
     background:rgba(255,255,255,1);
     box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
     border-radius:8px;
   }
   .rightBox{
     width:-webkit-fill-available;
-    height:511px;
-    min-width: 800px;
+    height:315px;
+    min-width: 100%;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .rightBoxCentre{
+    width:865px;
+    height:315px;
+    min-width: 60%;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .leftBoxCentre{
+    width:100%;
+    height:315px;
     background:rgba(255,255,255,1);
     box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
     border-radius:8px;
     top:108px;
     left:170px;
   }
+  .left{
+    position: absolute;
+    top:108px;
+    left:60%;
+  }
   .rightInfo{
     position: absolute;
-    top:50px;
-    left:50%;
+    top:108px;
+    left:80%;
+  }
+
+  .Centered{
+    position: absolute;
+    top:108px;
+    left:30%;
+    margin: 0 0 15px 0;
+    color:#666;
+    font-size: 19px;
+  }
+
+  .rightCentered{
+    position: absolute;
+    top:108px;
+    left:55%;
+    margin: 0 0 15px 0;
+    color:#666;
+    font-size: 19px;
   }
   
 }

src/services/apis.js

       url: `${prefix}/customer/recommend/export`,
       action: 'admin.customer.recommend.export.get',
     },
+    recommendClient: {
+      method: 'GET',
+      url: `${prefix}/customer/recommend/:id`,
+      action: 'admin.customer.recommend.get',
+    },
   },
   indexEcharts: {
     list:{