detail

config/config.js

                   name: '客户列表',
                   component: './customer/customerlist/index',
                 },
+                {
+                  path: '/customer/customerlist/customerDetail',
+                  name: '',
+                  component: './customer/customerlist/customerDetail',
+                },
                 {
                   path: '/customer/drift/list',
                   name: '游客列表',
                   name: '',
                   component: './staff/list/editStaff',
                 },
-             
+
                 {
                   path: '/staff/RoleList',
                   name: '角色管理',
                   name: '',
                   component: './staff/list/editRole',
                 },
-             
+
               ],
             },
             {

src/pages/customer/customerlist/customerDetail.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Table } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from './style.less';
+
+import router from 'umi/router';
+
+
+function header(props) {
+
+  /**
+   * @param {*} props
+   * @returns
+   */
+  const [data, setData] = useState([{ records: [] }])
+
+  const columns = [
+    {
+      title: '访问事件',
+      dataIndex: 'event',
+      key: 'event',
+      align: 'center',
+    },
+    {
+      title: '访问时间',
+      dataIndex: 'time',
+      key: 'time',
+      align: 'center',
+
+    },
+    {
+      title: '停留时间',
+      dataIndex: 'stayTime',
+      key: 'stayTime',
+      align: 'center',
+    },
+  ]
+  return (
+    <>
+      <div className={styles.cardBox}>
+        <div className={styles.leftBox}>
+          <p className={styles.tit}>置业顾问信息</p>
+          <img className={styles.touxiang} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" />
+          <p className={styles.infoItem}>姓名：赵海伟</p>
+          <p className={styles.infoItem}>部门：营销部</p>
+          <p className={styles.infoItem}>岗位：营销经理</p>
+          <p className={styles.infoItem}>号码：13160056061 </p>
+          <p className={styles.infoItem}>公司：葛洲坝·南京中国府</p>
+          <p className={styles.infoItem}>所属项目：葛洲坝·南京中国府</p>
+        </div>
+        <div className={styles.rightBox}>
+          <p className={styles.tit}>客户信息</p>
+          <img className={styles.touxiang} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" />
+          <div className={styles.right}>
+            <p className={styles.rightItem}>用户名称：董浩业</p>
+            <p className={styles.rightItem}>手机号码：15050893674</p>
+            <p className={styles.rightItem}>来访渠道：活动分享</p>
+          </div>
+          <p className={styles.rightItem}>访问时长：0秒</p>
+          <p className={styles.rightItem}>访问次数：</p>
+          <p className={styles.rightItem}>预约人数：</p>
+          <p className={styles.rightItem}>首次访问时间：</p>
+          <p className={styles.rightItem}>预约到访时间：</p>
+          <div className={styles.rightInfo}>
+            <p className={styles.rightItem}>国家：</p>
+            <p className={styles.rightItem}>省份：</p>
+            <p className={styles.rightItem}>城市：</p>
+            <p className={styles.rightItem}>详细信息：</p>
+            <p className={styles.rightItem}>意向项目：</p>
+            <p className={styles.rightItem}>价格区间：</p>
+            <p className={styles.rightItem}>客户说明：</p>
+            <p className={styles.rightItem}>客户描述：</p>
+            <p className={styles.rightItem}>需求类型：</p>
+            <p className={styles.rightItem}>物业类型：</p>
+          </div>
+        </div>
+      </div>
+      <div className={styles.recordBox}>
+        <p className={styles.tableName}>访问记录</p>
+        <Table dataSource={data.records} columns={columns} pagination={false} />
+      </div>
+
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/customer/customerlist/index.jsx

 import request from '../../../utils/request';
 import apis from '../../../services/apis';
 import Styles from './style.less';
+import router from 'umi/router';
 
 import Attribution from './components/attribution'
 import IntegralRecord from './components/integralRecord'
   const [dataSource, setDataSource] = useState({ records: [] })
 
   // 默认私客
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [customerType, setCustomerType] = useState('private')
 
   // 调整归属 ============  start
   // 分页
   function onChange(pageNum) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-      getList({ pageNumber: pageNum, pageSize: 10, customerType })
+    getList({ pageNumber: pageNum, pageSize: 10, customerType })
   }
 
   // 私客/公客切换
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
     setStatusVisibleData({ visible: true, customerId: record.customerId, status: record.status })
   }
+  function toCustomerDateil() {
+    router.push({
+      pathname: '/customer/customerlist/customerDetail',
+    });
+  }
 
   const columns = [
     {
       title: '头像',
       dataIndex: 'picture',
       key: 'picture',
-      render: (_, record) => <Avatar shape="square" src={customerType === 'private' ? record.picture : record.avatarurl } size={64} icon="user" />,
+      render: (_, record) => <Avatar shape="square" src={customerType === 'private' ? record.picture : record.avatarurl} size={64} icon="user" />,
     },
     {
       title: '姓名',
       dataIndex: 'name',
       key: 'name',
       // eslint-disable-next-line no-nested-ternary
-      render: (_, record) => <><sapn>{ customerType === 'private' ? record.name : record.nickname }</sapn></>,
+      render: (_, record) => <><sapn>{customerType === 'private' ? record.name : record.nickname}</sapn></>,
     },
     {
       title: '电话',
       dataIndex: 'sex',
       key: 'sex',
       // eslint-disable-next-line no-nested-ternary
-      render: (_, record) => <><sapn>{ record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知' }</sapn></>,
+      render: (_, record) => <><sapn>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</sapn></>,
     },
     {
       title: '置业顾问',
       // eslint-disable-next-line no-nested-ternary
       render: (_, record) => (
         <>
-          <sapn>{ record.consultantName }</sapn>
-          <br/>
-          <sapn>{ record.consultTel }</sapn>
+          <sapn>{record.consultantName}</sapn>
+          <br />
+          <sapn>{record.consultTel}</sapn>
         </>
       ),
     },
       title: '客户状态',
       dataIndex: 'reportRecommendStatus',
       key: 'reportRecommendStatus',
-       // eslint-disable-next-line no-nested-ternary
-       render: (_, record) => <><sapn>{ record.reportRecommendStatus === 0 ? '为报备' : record.reportRecommendStatus === 1 ? '报备' : record.reportRecommendStatus === 2 ? '推荐' : '' }</sapn></>,
+      // eslint-disable-next-line no-nested-ternary
+      render: (_, record) => <><sapn>{record.reportRecommendStatus === 0 ? '为报备' : record.reportRecommendStatus === 1 ? '报备' : record.reportRecommendStatus === 2 ? '推荐' : ''}</sapn></>,
     },
     {
       title: '操作',
       // eslint-disable-next-line no-nested-ternary
       render: (_, record) => (
         <>
-          <Button className={ customerType === 'private' ? Styles.text : Styles.displayS } type="link" onClick={() => showStatus(record)}>变更状态</Button>
+          <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>
-          <br/>
-          <Button className={ customerType === 'private' ? Styles.text : Styles.displayS } type="link">查看详情</Button>
+          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showGM(record)}>调整归属</Button>
+          <br />
+          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={toCustomerDateil}>查看详情</Button>
           &nbsp;&nbsp;
-          <Button className={ customerType === 'private' ? Styles.text : Styles.displayS } type="link" onClick={ () => showRecord(record) }>积分记录</Button>
+          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showRecord(record)}>积分记录</Button>
         </>
       ),
     },
         </Form.Item>
       </Form>
 
-       <div style={{ marginTop: '20px', marginBottom: '20px' }}>
+      <div style={{ marginTop: '20px', marginBottom: '20px' }}>
         <Radio.Group value={customerType} onChange={radioButtonHandleSizeChange} buttonStyle="solid">
-            <Radio.Button value="private">私客</Radio.Button>
-            <Radio.Button value="public">公客</Radio.Button>
+          <Radio.Button value="private">私客</Radio.Button>
+          <Radio.Button value="public">公客</Radio.Button>
         </Radio.Group>
-       </div>
+      </div>
       <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />
 
-        {/* 调整归属 */}
-        <Attribution visibleData={gVisibleData} />
+      {/* 调整归属 */}
+      <Attribution visibleData={gVisibleData} />
 
-        {/* 积分记录 */}
-        <IntegralRecord visibleData={recordVisibleData} />
+      {/* 积分记录 */}
+      <IntegralRecord visibleData={recordVisibleData} />
 
-        {/* 变更状态 */}
-        <ChangeStatus visibleData={statusVisibleData} />
+      {/* 变更状态 */}
+      <ChangeStatus visibleData={statusVisibleData} />
     </>
   );
 }

src/pages/customer/customerlist/style.less

 .displayS {
   display: none;
 }
+
+
+// 客户详情样式
+.cardBox{
+  display: flex;
+  .leftBox{
+    width:342px;
+    min-width:342px;
+    height:511px;
+    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:-webkit-fill-available;
+    height:511px;
+    min-width: 800px;
+    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;
+  }
+  .tit{
+    font-size:24px;
+    font-weight:600;
+    color:#222;
+    margin: 10px 0 0 0;
+  }
+  .touxiang{
+    width: 120px;
+    width: 120px;
+    border-radius: 6px;
+    margin: 30px 0 20px 0;
+  }
+  .infoItem{
+    color:#666;
+    font-size: 19px;
+    margin: 0 0 10px 0;
+    
+  }
+  .rightItem{
+    color:#666;
+    font-size: 19px;
+    margin: 0 0 15px 0;
+  }
+  .right{
+    position: absolute;
+    top:108px;
+    left:170px;
+  }
+  .rightInfo{
+    position: absolute;
+    top:50px;
+    left:50%;
+  }
+  
+}
+.recordBox{
+  width:100%;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+  border-radius:8px;
+  margin-top: 30px;
+  padding: 30px;
+  .tableName{
+    font-size:24px;
+    font-weight:600;
+    color:#222;
+  }
+}
+

src/pages/integralMall/writeOff.jsx

       router.push({
         pathname: '/integralMall/verifyList',
         query: {
-          codeValue
+          telValue:codeValue
         },
       });
     }