Merge branch 'v3.5.1' of http://git.ycjcjy.com/zhiyuxing/estateagents-admin-manager into v3.5.1

# Conflicts:
#	src/pages/activity/helpActivity/edithelpActivity.jsx

config/config.js

   },
   chainWebpack: webpackPlugin,
 
-  proxy,
+  proxy: {
+    ...proxy,
+    '/gaode_amap': { // 高德地图
+      // target: 'http://192.168.0.11:8080/',
+      target: 'https://restapi.amap.com/v3/',
+      changeOrigin: true,
+      pathRewrite: { '^/gaode_amap': '' },
+    },
+  },
 };

config/routes.js

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

src/pages/activity/helpActivity/edithelpActivity.jsx

 
 const header = props => {
   const [isEnlist, setIsEnlist] = useState(1)
-  const [activityStatus, setActivityStatus] = useState(1)  
-  const [disable, setDisable] = useState(false)
 
   const radioOnChange = e => {
     // console.log(e.target.value)
           data.activityTime = [moment(data.startDate), moment(data.endDate)]
           const num = data.helpNum > 0 ? 1 : 0
           setIsEnlist(num)
-          setActivityStatus(data.activityStatus)
-          setDisable(data.activityStatus === 0 ? true : false)
           data.isEnlist = num
           props.form.setFieldsValue(data)
           setDynamicData(data)
               message: '请选择所属项目',
             },
           ],
-        })(<BuildSelect disabled={disable} />)}
+        })(<BuildSelect />)}
         </Form.Item>
 
         <Form.Item label="活动标题">
               message: '请选择活动时间',
             },
           ],
-        })(<RangePicker format="YYYY-MM-DD HH:mm:ss" showTime={{ format: 'HH:mm:ss' }} disabled={activityStatus===0 ? true : false}/>)}
+        })(<RangePicker format="YYYY-MM-DD HH:mm:ss" showTime={{ format: 'HH:mm:ss' }}/>)}
         </Form.Item>
 
         <Form.Item label="助力邀请人数" min={1} max={10}>
               message: '请输入活动人数',
             },
           ],
-        })(<Input type="number" disabled={activityStatus===0 ? true : false}/>)}
+        })(<Input type="number" />)}
         </Form.Item>
 
         <Form.Item label="助力次数">
             },
           ],
         })(
-          <Radio.Group disabled={activityStatus===0 ? true : false} onChange={(e) => radioOnChange(e)}>
+          <Radio.Group onChange={(e) => radioOnChange(e)}>
             <Radio value={0}>不限制</Radio>
             <Radio value={1}>限制</Radio>
           </Radio.Group>,
                  message: '请输入助力人数',
                },
              ],
-           })(<Input type="number" placeholder="助力人数限制" disabled={activityStatus===0 ? true : false}/>)}
+           })(<Input type="number" placeholder="助力人数限制"/>)}
            </Form.Item>
          }
 
           ],
         })(<ImageUploader />)}
         </Form.Item>
-        <Form.Item label="权重">
-        {getFieldDecorator('heavy', {
-          rules: [
-            {
-              required: true,
-              message: '请输入权重',
-            },
-          ],
-        })(<Input type="number" disabled={activityStatus===0 ? true : false} style={{ width: 80}}/>)}<span style={{ marginLeft: 30, color:'grey'}}>数字越大越靠前</span>
-        </Form.Item>
         <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
           <Button type="primary" htmlType="submit">
             确认

src/pages/building/list/add/components/amapAroundData.js

+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
+
+const KEY = '14f05ce59c26364fd0674014dc0d8b1b'
+
+const POI_TYPES_KETY = {
+    Transport: 'Transport',
+    Mall: 'Mall',
+    Edu: 'Edu',
+    Hospital: 'Hospital',
+    Bank: 'Bank',
+    Restaurant: 'Restaurant',
+}
+
+// key 值会被拿到 building 表中 组合为字段名
+const POI_TYPES = [
+    {
+      key: POI_TYPES_KETY.Transport,
+      label: '交通',
+      types: ['150100', '150200', '150300', '150400', '150500', '150600'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Mall,
+      label: '商业',
+      types: ['060100', '060200', '060300', '060400', '060500', '060600',
+              '060700', '060800', '060900', '061000', '061100', '061200',
+              '061300', '061400', '080100', '080200', '080300', '080400',
+              '080500', '080600'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Edu,
+      label: '学校',
+      types: ['141200'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Hospital,
+      label: '医院',
+      types: ['090100', '090200', '090300', '090400', '090500', '090600', '090700'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Bank,
+      label: '银行',
+      types: ['160100'],
+      data: [],
+    },
+    {
+      key: POI_TYPES_KETY.Restaurant,
+      label: '餐饮',
+      types: ['050100', '050200', '050300', '050400', '050500', '050600',
+              '050700', '050800', '050900'],
+      data: [],
+    },
+  ]
+
+/**
+ * 获取 POI 类型
+ * @param {*} keyType 
+ */
+const getPOIType = keyType => {
+    return POI_TYPES.filter(item => item.key === keyType)
+}
+
+/**
+ * 获取这个 keyType 类型的所有 types
+ * @param {类型的key值} keyType 
+ */
+const getTypes = keyType => {
+  const typesArr = getPOIType(keyType)
+  return typesArr[0].types.join('|')
+}
+
+/**
+ * 获取周边数据
+ * @param {查询参数} params 
+ */
+function getAroundData (params) {
+    return new Promise((resolve, reject) => {
+        const { types, location } = params
+        if (!types) {
+            // console.err('未传输类型types值')
+            reject(new Error('未传输类型types值'))
+            return
+        }
+        if (!location) {
+            // console.err('未传输传输中心坐标location值')
+            reject(new Error('未传输传输中心坐标location值'))
+            return
+        }
+
+        request({ ...apis.amap.webService, params: { ...params, key: KEY, types: getTypes(types), location } }).then(data => {
+            // console.log(data)
+            resolve(data)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+
+export { POI_TYPES_KETY, getAroundData, getPOIType, POI_TYPES }

src/pages/building/list/add/components/base.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, InputNumber, notification } from 'antd';
 import moment from 'moment';
+import { router } from 'umi';
 import request from '../../../../../utils/request';
 import apis from '../../../../../services/apis';
 import Styles from '../style.less';
-import { router } from 'umi';
 import ImageUpload from '../../../../../components/XForm/ImageUpload'
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
 import Wangedit from '../../../../../components/Wangedit/Wangedit'
 import BudildingProjectType from './buildingProjectType'
 import SelectCity from '../../../../../components/SelectButton/CitySelect'
 import FileUpload from '@/components/XForm/FileUpload';
+import { POI_TYPES_KETY, getAroundData, getPOIType, POI_TYPES } from './amapAroundData'
+import { ifError } from 'assert';
 
 const { Option } = Select
 const { TabPane } = Tabs;
 function AddBuilding(props) {
   const { getFieldDecorator } = props.form;
 
+  const [poi, setPoi] = useState([])
+
   console.log('props.building: ', props.building)
   if (props.building.buildingId !== undefined) {
     const { buildingId } = props.building
      useEffect(() => {
       if (buildingId !== '') {
         getById(buildingId)
+        setPoi(POI_TYPES)
       }
     }, [])
   }
 
    // 获取详情信息
    function getById(currentId) {
-
     request({ ...apis.building.buildingGetById, urlData: { id: currentId } }).then(res => {
       if (res.openingDate !== null) {
         res.openingDate = moment(res.openingDate)
   }
 
   function addBuilding(data) {
+    console.log('poi: ', poi)
+    data.mapJson = poi
     data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
     data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
     // 项目主图
     })
   }
 
+  // 周边设施 回调
+  function getMapScope(e) {
+    const coordinate = props.form.getFieldValue('coordinate').split(',')
+    const poiData = [].concat(POI_TYPES)
+    poiData.map(item => {
+      getAroundData({ types: item.key, location: `${coordinate[1]},${coordinate[0]}`, radius: e }).then(res => {
+        const { pois } = res
+        setFormMapScopeValue(item.key, pois)
+      }).catch(err => {
+        console.log(err.message)
+        openNotificationWithIcon('error', '周边数据获取失败')
+      })
+    })
+  }
+
+  function setFormMapScopeValue(key, pois) {
+    const poiArray = pois.map(p => {
+      return {
+        address: p.address,
+        adname: p.adname,
+        cityname: p.cityname,
+        distance: p.distance,
+        id: p.id,
+        location: p.location,
+        name: p.name,
+        pname: p.pname,
+        shopinfo: p.shopinfo,
+        type: p.type,
+        typecode: p.typecode,
+      }
+    })
+    
+    // 设置表单值
+    getFormMapScopeName(key, { data: poiArray })
+
+    const newPoi = poi.map(m => {
+      if (m.key === key) {
+        m.data = poiArray
+      }
+      return m
+    })
+    setPoi(newPoi)
+  }
+
+  function getFormMapScopeName(keyType, item) {
+    switch (keyType) {
+      case POI_TYPES_KETY.Transport:
+        props.form.setFieldsValue({ buildingTransport: item.data.map(t => t.name).join(',') })
+        return 'buildingTransport';
+      case POI_TYPES_KETY.Bank:
+        props.form.setFieldsValue({ buildingBank: item.data.map(t => t.name).join(',') })
+        return 'buildingBank';
+      case POI_TYPES_KETY.Edu:
+        props.form.setFieldsValue({ buildingEdu: item.data.map(t => t.name).join(',') })
+        return 'buildingEdu';
+      case POI_TYPES_KETY.Hospital:
+        props.form.setFieldsValue({ buildingHospital: item.data.map(t => t.name).join(',') })
+        return 'buildingHospital';
+      case POI_TYPES_KETY.Restaurant:
+        props.form.setFieldsValue({ buildingRestaurant: item.data.map(t => t.name).join(',') })
+        return 'buildingRestaurant';
+      case POI_TYPES_KETY.Mall:
+        props.form.setFieldsValue({ buildingMall: item.data.map(t => t.name).join(',') })
+        return 'buildingMall';
+      default:
+    }
+  }
+
   return (
         <Form {...formItemLayout} onSubmit={handleSubmit}>
           <Form.Item label="项目Id" style={{ display: 'none' }}>
           <Form.Item label="项目标签" >
             {getFieldDecorator('tag')(
               <Select mode="tags" placeholder="输入后选中" style={{ width: '1016px' }}>
-                
+
               </Select>,
             )}
           </Form.Item>
             {getFieldDecorator('discount')(<Input />)}
           </Form.Item>
           <Form.Item label="首页推荐" >
-            {getFieldDecorator('isMain',{
+            {getFieldDecorator('isMain', {
               initialValue: 1,
             })(
             <Radio.Group>
             {getFieldDecorator('mapScope', {
               rules: [{ required: true, message: '请选择周边设施搜索范围' }],
             })(
-              <Select placeholder="请选择周边设施搜索范围" style={{ width: '970px' }}>
+              <Select placeholder="请选择周边设施搜索范围" style={{ width: '970px' }} onChange={e => getMapScope(e)}>
                 <Option value={1000}>1公里</Option>
                 <Option value={3000}>3公里</Option>
                 <Option value={5000}>5公里</Option>

src/pages/building/list/add/components/buildingImage.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal, Layout } from 'antd';
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload';
+import moment from 'moment';
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
 
 const { Header, Footer, Sider, Content } = Layout;
 
+const modalEdiFormItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+const openNotificationWithIcon = (type, message) => {
+  notification[type]({
+    message,
+    description:
+      '',
+  });
+};
+
 /**
  * 弹框
  */
 function ModalEdi(props) {
-
-  const [visibleData, setVisibleData] = useState({ visible: false })
+  const { apartment, buildingId, apartmentId } = props.visibleData
+  const [visibleData, setVisibleData] = useState({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
 
   if (!props.visibleData) {
     console.error('缺少visibleData参数!')
 
   useEffect(() => {
     setVisibleData(props.visibleData)
+    props.form.setFieldsValue({ apartmentId, apartmentName: apartment !== '' ? apartment.apartmentName : '' })
   }, [props.visibleData.visible])
 
   function handleOk(e) {
     props.onCancel();
   }
 
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+        submitData(values)
+      }
+    });
+  }
+
+  function submitData(data) {
+    if (buildingId === '' || buildingId === undefined) {
+      return
+    }
+    if (data.img) {
+        // 如果是 名称 和 图片一起编辑，就穿最新的图片
+      data.img = data.img.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
+    } else {
+        // 如果是 名称 和 图片一起编辑，就穿最新的图片
+      data.img = visibleData.apartment.buildingImgList
+    }
+    data.buildingId = buildingId;
+    data.apartmentType = 'photo'
+    const api = (data.apartmentId !== undefined && data.apartmentId !== '') ? apis.building.buildingApartmentUpdate : apis.building.buildingApartmentAdd;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      // eslint-disable-next-line no-unused-expressions
+      openNotificationWithIcon('success', '操作成功')
+      handleCancel()
+      props.onSuccess()
+      // this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } }, () => console.log('回调：', this.state.visibleData))
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      openNotificationWithIcon('error', err)
+    })
+  }
+
+  const { getFieldDecorator } = props.form;
   return (
     <>
       <Modal
-          title="Basic Modal"
+          title="编辑"
           visible={visibleData.visible}
           onOk={handleOk}
           onCancel={handleCancel}
+          width={700}
+          footer={null}
         >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
+         <Form {...modalEdiFormItemLayout} onSubmit={handleSubmit}>
+          <Form.Item label="编号" style={{ display: 'none' }}>
+              {getFieldDecorator('apartmentId')(<Input />)}
+          </Form.Item>
+          <Form.Item label="相册名称">
+            {getFieldDecorator('apartmentName', {
+              rules: [
+                {
+                  required: true,
+                  message: '请输入相册名称',
+                },
+                {
+                  max: 10,
+                  message: '不超过10个字符',
+                },
+              ],
+            })(<Input />)}
+          </Form.Item>
+          {
+            !props.noImage && <Form.Item label="选择图片">
+            {getFieldDecorator('img', {
+              rules: [
+                {
+                  required: true,
+                  message: '请选择图片',
+                },
+              ],
+            })(<ImageListUpload />)}
+          </Form.Item>
+          }
+          <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <Button onClick={() => handleCancel()}>
+              取消
+            </Button>
+          </Form.Item>
+         </Form>
         </Modal>
     </>
   )
 }
 
+const WrappedModalEdiForm = Form.create({ name: 'ModalEdi' })(ModalEdi);
+
 /**
  * 模块
  */
 function BuildingImageModel(props) {
   const [imageList, setImageList] = useState([])
-  const [visibleData, setVisibleData] = useState({ visible: false })
+  const [visibleData, setVisibleData] = useState({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
+
+  useEffect(() => {
+    setImageList(getImgUrl())
+  }, [props.apartment.apartmentId])
+
+  function getImgUrl() {
+    return ((props.apartment.buildingImgList || [])).map(item => item.url)
+  }
+
+  function submitData(data) {
+    const { apartmentId } = props.apartment
+    if (apartmentId === '' || apartmentId === undefined) {
+      return
+    }
+
+    data.buildingId = props.apartment.buildingId;
+    data.apartmentType = 'photo'
+    const api = data.apartmentId !== undefined ? apis.building.buildingApartmentUpdate : apis.building.buildingApartmentAdd;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      // eslint-disable-next-line no-unused-expressions
+      openNotificationWithIcon('success', '操作成功')
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      // openNotificationWithIcon('error', err)
+    })
+  }
 
   function onImageChange(e) {
     setImageList(e)
+       
+    // 新增加图片后，更新后端数据
+    const img = e.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
+    submitData({ ...props.apartment, img })
   }
 
   function edi() {
-    setVisibleData({ visible: true })
+    setVisibleData({ visible: true, buildingId: props.apartment.buildingId, apartmentId: props.apartment.apartmentId, apartment: props.apartment })
   }
 
   function onCancel(e) {
-    setVisibleData({ visible: false })
+    setVisibleData({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
   }
 
   function deletePhoto() {
+    request({ ...apis.building.buildingApartmentDelete, urlData: { id: props.apartment.apartmentId } }).then(() => {
+      openNotificationWithIcon('success', '操作成功')
+      props.onSuccess()
+    }).catch(err => {
 
+    })
   }
 
   return (
     <>
-<span style={{ marginTop: '10px', marginBottom: '10px' }}>效果图（{imageList.length}）</span>
+      <span style={{ marginTop: '10px', marginBottom: '10px' }}>{props.apartment.apartmentName}({imageList.length})</span>
       <Button type="link" style={{ color: 'blue' }} onClick={() => edi()}>重命名</Button>
       <Button type="link" style={{ color: 'blue' }} onClick={() => deletePhoto()}>删除相册</Button>
       <ImageListUpload value={imageList} onChange={onImageChange} unlimited/>
 
        {/* 编辑页 */}
-       <ModalEdi visibleData={visibleData} onCancel={e => onCancel(e)}/>
+       <WrappedModalEdiForm visibleData={visibleData} onCancel={e => onCancel(e)} onSuccess={() => props.onSuccess()} noImage/>
        <hr />
     </>
   )
 /**
  * 主体
  */
-function buildingImage() {
-  const [visibleData, setVisibleData] = useState({ visible: false })
+function buildingImage(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [visibleData, setVisibleData] = useState({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
+  const [imageList, setImageList] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getList()
+  }, [props.building.buildingId])
+ 
 
   function edi() {
-    setVisibleData({ visible: true })
+    setVisibleData({ visible: true, buildingId: props.building.buildingId, apartmentId: '', apartment: '' })
   }
 
   function onCancel(e) {
-    setVisibleData({ visible: false })
+    setVisibleData({ visible: false, buildingId: '', apartmentId: '', apartment: '' })
+  }
+
+  function onSuccess(e) {
+    getList()
+  }
+
+  function getList(params) {
+    // 网路请求
+    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'photo' } }).then(res => {
+      setImageList(res)
+    }).catch(err => {
+      openNotificationWithIcon('error', err.message)
+    })
   }
 
   return (
     <>
       <Button type="primary" onClick={() => edi()}>新增</Button>
       <Layout style={{ background: '#fff' }}>
-        <Content><BuildingImageModel /></Content>
-        <Content><BuildingImageModel /></Content>
-        <Content><BuildingImageModel /></Content>
+        {
+          imageList.map(item => <Content><BuildingImageModel apartment={item} key={item.apartmentId} onSuccess={e => onSuccess(e)}/></Content>)
+        }
       </Layout>
 
       {/* 编辑页 */}
-      <ModalEdi visibleData={visibleData} onCancel={e => onCancel(e)}/>
+      <WrappedModalEdiForm visibleData={visibleData} onCancel={e => onCancel(e)} onSuccess={e => onSuccess(e)}/>
     </>
   )
 }

src/pages/building/list/add/components/imageSet.jsx

 
   function getList(params) {
     // 网路请求
-    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params } }).then(res => {
+    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'apart' } }).then(res => {
       setData(res)
     }).catch(err => {
       openNotificationWithIcon('error', err.message)

src/pages/customer/customerlist/components/recommend.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
+import moment from 'moment';
+import request from '../../../../utils/request';
+import apis from '../../../../services/apis';
+import Styles from '../style.less';
+
+
+const { Option } = Select;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { Meta } = Card;
+
+/**
+ * 推荐客户
+ *
+ * @param {*} props
+ * @returns
+ */
+class ModalRecommendRecord extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+       dataSource: [],
+       visibleData: { visible: false, customerId: '' },
+    }
+  }
+
+  // 挂载之后
+  componentDidMount() {
+    this.getList({ pageNumber: 1, pageSize: 5 })
+  }
+
+  componentDidUpdate(preProps, preState) {
+    // console.log('this.props.visibleData', this.props.visibleData)
+    if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
+      this.getList({ pageNumber: 1, pageSize: 5 })
+      this.setState({ visibleData: this.props.visibleData });
+    }
+  }
+
+  // 弹框确定按钮
+  // eslint-disable-next-line react/sort-comp
+  handleOk() {
+    this.setState({ visibleData: { visible: false, customerId: '' } })
+  }
+
+  // 弹框取消按钮
+  handleCancel() {
+    this.setState({ visibleData: { visible: false, customerId: '' } })
+  }
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
+  getList(params) {
+    const { customerId } = this.state.visibleData
+    if (customerId === '' || customerId === undefined) {
+      return
+    }
+    console.log('customerId', customerId)
+    // 网路请求
+    // 网路请求
+    request({ ...apis.customer.recommendClient, urlData: { id: customerId }, params: { ...params } }).then(res => {
+      this.setState({ dataSource: res })
+    }).catch(err => {
+      this.openNotificationWithIcon('error', err)
+    })
+  }
+
+   // 分页
+  onChange(pageNum) {
+    this.getList({ pageNumber: pageNum, pageSize: 5 })
+  }
+
+  render() {
+    const columns = [
+      {
+        title: '头像',
+        // eslint-disable-next-line jsx-a11y/alt-text
+        render: (text, records) => <img src={records.picture} width={50} height={50} />,
+      },
+      {
+        title: '用户名',
+        dataIndex: 'name',
+        key: 'name',
+      },
+      {
+        title: '电话',
+        dataIndex: 'phone',
+        key: 'phone',
+      },
+      {
+        title: '性别',
+        dataIndex: 'sex',
+        key: 'sex',
+        render: (text, records) => <span>{records.sex === 1 ? '男' : '女'}</span>,
+      },
+      {
+        title: '意向项目',
+        dataIndex: 'intention',
+        key: 'intention',
+      },
+      {
+        title: '推荐时间',
+        dataIndex: 'createDate',
+        key: 'createDate',
+        render: (_, record) => <><span>{ record.createDate && moment(record.createDate).format('YYYY-MM-DD') }</span></>,
+      },
+      {
+        title: '状态',
+        // eslint-disable-next-line consistent-return
+        render: (text, records) => {
+          if (records.status === 1) { return '报备' }
+          if (records.status === 2) { return '到访' }
+          if (records.status === 3) { return '认筹' }
+          if (records.status === 4) { return '签约' }
+          // reportRecommendStatus
+        },
+      },
+    ]
+    return (
+      <>
+        <Modal
+            title="推荐客户"
+            width={800}
+            destroyOnClose="true"
+            footer={null}
+            visible={this.state.visibleData.visible}
+            // onOk={() => this.handleOk()}
+            onCancel={(e) => this.handleCancel(e)}
+          >
+            {console.log('this.state.dataSource', this.state.dataSource)}
+            <Table dataSource={this.state.dataSource.records} rowKey="integralrecord" columns={columns} pagination={{ total: this.state.dataSource.total, onChange: e => this.onChange(e) }} />
+          </Modal>
+      </>
+    );
+  }
+}
+
+export default ModalRecommendRecord

src/pages/customer/customerlist/customerDetail.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Table } from 'antd';
+import { Form, Table, Pagination } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from './style.less';
 import apis from '../../../services/apis';
   // 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 showQuickJumper defaultCurrent={1} dataSource={data.visitRecords} columns={columns} current={50} />
       </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/publicCustomerDetail.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Table, Pagination } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import publicStyle from './publicStyle.less';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import moment from 'moment';
+
+import router from 'umi/router';
+
+
+function header(props) {
+  /**
+   * @param {*} props
+   * @returns
+   */
+  // 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(() => {
+    getById()
+  }, [])
+
+  // 查询
+  function getById(params) {
+    const { id } = props.location.query;
+    if (id === '' || id === undefined) {
+      return
+    }
+
+    request({ ...apis.customer.CustomerRecommendGet, urlData: { id }, params: { ...params } }).then(res => {
+      setData(res)
+      setDataonsultant(res.geoInfo)
+    })
+  }
+// 分页
+  const changePageNum = pageNumber => {
+    // getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+  }
+  const columns = [
+    {
+      title: '访问事件',
+      dataIndex: 'activity',
+      key: 'activity',
+      align: 'center',
+    },
+    {
+      title: '访问时间',
+      dataIndex: 'visitTime',
+      key: 'visitTime',
+      align: 'center',
+
+    },
+    {
+      title: '停留时间',
+      dataIndex: 'visitDuration',
+      key: 'visitDuration',
+      align: 'center',
+      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 < 1; i++ ) {
+  intentionData.push({
+    key: i,
+    name: `Edward King ${i}`,
+    age: 32,
+    address: `London, Park Lane no. ${i}`,
+  });
+}
+  return (
+    <>
+      <div className={publicStyle.cardBox}>
+     {/* { console.log("data:",data),console.log("data:",dataConsultant)} */}
+        <div className={publicStyle.rightBox}>
+          <p className={publicStyle.tit}>客户信息</p>
+          <img className={publicStyle.touxiang} src={ data.picture && data.picture } />
+          <div className={publicStyle.right}>
+            <p className={publicStyle.rightItem}>用户名称：{ data.name }</p>
+            <p className={publicStyle.rightItem}>手机号码：{ data.phone }</p>
+            <p className={publicStyle.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
+          </div>
+          <div className={publicStyle.Centered}>
+          <p>访问时长：{ data.duration }秒</p>
+          <p>访问次数：{ data.visitTimes }</p>
+          <p className={publicStyle.rightItem}>来访渠道：活动分享</p>
+          {/* <p>预约人数：{ data.visiteNum }</p> */}
+          </div>
+          {/* <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p> */}
+          <div className={publicStyle.rightInfo}>
+            <p className={publicStyle.rightItem}>国家：{ dataConsultant && dataConsultant.country }</p>
+            <p className={publicStyle.rightItem}>省份：{ dataConsultant && dataConsultant.provience }</p>
+            <p className={publicStyle.rightItem}>城市：{dataConsultant && dataConsultant.city }</p>
+            {/* <p className={styles.rightItem}>详细信息：</p> */}
+            {/* <p className={styles.rightItem}>意向项目：{data.intention }</p> */} 
+            {/* <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p> */}
+          </div>
+        </div>
+        {/* { console.log("data:",data),console.log("data:",dataConsultant)} */}
+        <div className={publicStyle.leftBoxCentre}>
+          <div className={publicStyle.tit}>
+                <span>项目名称</span>
+                <span style={{ marginLeft: '47%' }}>项目名称</span>
+          </div>
+          {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
+          <div className={publicStyle.infoItem}>
+          <Table columnWidth={10} showHeader={false} columns={intention} dataSource={intentionData} pagination={{ pageSize: 50 }} scroll={{ y: 240 }}/>,
+          </div>
+        </div>
+      </div>
+      <div className={publicStyle.recordBox}>
+        <p className={publicStyle.tableName}>访问记录</p>
+        <Table dataSource={data.visitRecords} columns={columns} rowKey="customerDetail" onChange={changePageNum} showQuickJumper/>
+      </div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/customer/customerlist/publicStyle.less

+.SubmitButton {
+  background: rgba(239,39,58,1);
+  border-radius: 7px;
+  border: 0px;
+}
+.text {
+  color: rgba(239,39,58,1);
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  color: #333;
+  display: flex;
+  align-items: center;
+  position: relative;
+  line-height: 1.5;
+  font-size: 0.106rem;
+  margin-bottom: 0.08rem;
+
+}
+.cardItem{
+  color: #666;
+  display: flex;
+  align-items: center; 
+  line-height: 1.5;
+  font-size: 0.106rem;
+  margin-bottom: 0.08rem; 
+}
+.ediText {
+  font-size: 0.106rem;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width:  0.54rem;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last:justify
+}
+
+.address { 
+  width: 400px;
+  height: 24px; 
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pitchButton { 
+  border-color: rgba(255,126,72,1);
+  background-color: rgba(255,126,72,1);
+  color: rgba(255,255,255,1); 
+}
+.noButton {
+  border-color: rgba(255,126,72,1);
+  color: rgba(255,126,72,1);
+}
+.displayS {
+  display: none;
+}
+
+
+// 客户详情样式
+.cardBox{
+  display: flex;
+  .leftBox{
+    width:90%;
+    min-width:28.5%;
+    height:315px;
+    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;
+    display: inline-block;
+    margin-right: 30px;
+    padding: 30px;
+    overflow: hidden;
+  }
+  .rightBox{
+    width:-webkit-fill-available;
+    height:315px;
+    min-width: 70%;
+    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;
+    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;
+  }
+  .left{
+    position: absolute;
+    top:108px;
+    left:60%;
+  }
+  .rightInfo{
+    position: absolute;
+    top:108px;
+    left:80%;
+  }
+
+  .Centered{
+    position: absolute;
+    top:108px;
+    left:40%;
+    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;
+  }
+  
+}
+.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/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

 const prefix = '/api/admin'
+// 高德地图
+const amapPrefix = '/gaode_amap'
 
 export default {
   image: {
       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:{
     method: 'GET',
     action: 'admin.posterTemplate.get',
   },
+ },
+ amap: { // 高德地图
+   webService: { // Web服务Api ---- 周边搜索
+     url: `${amapPrefix}/place/around`,
+     method: 'GET',
+   },
  }
 }

src/utils/request.js

 });
 
 request.interceptors.response.use(async (response, options) => {
-
   if (response && response.status) {
     if (response.status != 200) {
       const errorText = codeMessage[response.status] || response.statusText;
       });
       throw new Error(response.statusText);
     } else {
-      console.log('response.headers: ', response.headers)
-      console.log('response.headers.Content-Type: ', response.headers.get('Content-Type'))
+      // console.log('response.headers: ', response.headers)
+      // console.log('response.headers.Content-Type: ', response.headers.get('Content-Type'))
       if (response.headers.get('Content-Type') === 'application/octet-stream;charset=utf-8') {
         return await response.clone().blob();
       }
 
+      // 高德地图的数据，直接返回
+      if (response.url.indexOf('gaode_amap') !== -1) {
+        return await response.clone().json();
+      }
+
       const { code, data, message } = await response.clone().json();
       if (code != 1000) {
         if (code === 1001) {