客户详情对接

src/pages/customer/customerlist/customerDetail.jsx

@@ -2,37 +2,60 @@ import React, { useState, useEffect } from 'react';
 import { Form, Table } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from './style.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
    */
-  const [data, setData] = useState([{ records: [] }])
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [data, setData] = useState([{ visitRecords: [] }])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getById()
+  }, [])
+
+  // 查询
+  function getById(params) {
+    const { id } = props.location.query;
+    if (id === '' || id === undefined) {
+      return
+    }
+    const { url, method } = apis.customer.CustomerRecommendGet
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(id)
+
+    request({ url: tempUrl, method, params: { ...params } }).then(res => {
+      setData(res)
+    })
+  }
 
   const columns = [
     {
       title: '访问事件',
-      dataIndex: 'event',
-      key: 'event',
+      dataIndex: 'activity',
+      key: 'activity',
       align: 'center',
     },
     {
       title: '访问时间',
-      dataIndex: 'time',
-      key: 'time',
+      dataIndex: 'visitTime',
+      key: 'visitTime',
       align: 'center',
 
     },
     {
       title: '停留时间',
-      dataIndex: 'stayTime',
-      key: 'stayTime',
+      dataIndex: 'visitDuration',
+      key: 'visitDuration',
       align: 'center',
+      render: (_, record) => <span>{record.visitDuration === null ? 0 : record.visitDuration }秒</span>,
     },
   ]
   return (
@@ -40,44 +63,49 @@ function header(props) {
       <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>
+          <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="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" />
+          <img className={styles.touxiang} src={ data.picture && data.picture } />
           <div className={styles.right}>
-            <p className={styles.rightItem}>用户名称：董浩业</p>
-            <p className={styles.rightItem}>手机号码：15050893674</p>
+            <p className={styles.rightItem}>用户名称：{ data.name }</p>
+            <p className={styles.rightItem}>手机号码：{ data.phone }</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>
+          <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>
           <div className={styles.rightInfo}>
-            <p className={styles.rightItem}>国家：</p>
-            <p className={styles.rightItem}>省份：</p>
-            <p className={styles.rightItem}>城市：</p>
+            <p className={styles.rightItem}>国家：{ data.country }</p>
+            <p className={styles.rightItem}>省份：{ data.province }</p>
+            <p className={styles.rightItem}>城市：{data.city }</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}>意向项目：{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>
           </div>
         </div>
       </div>
       <div className={styles.recordBox}>
         <p className={styles.tableName}>访问记录</p>
-        <Table dataSource={data.records} columns={columns} pagination={false} />
+        <Table dataSource={data.visitRecords} columns={columns} pagination={false} />
       </div>
 
     </>

src/pages/customer/customerlist/index.jsx

@@ -128,9 +128,12 @@ function body(props) {
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
     setStatusVisibleData({ visible: true, customerId: record.customerId, status: record.status })
   }
-  function toCustomerDateil() {
+  function toCustomerDateil(record) {
     router.push({
       pathname: '/customer/customerlist/customerDetail',
+      query: {
+        id: record.customerId,
+      },
     });
   }
 
@@ -191,7 +194,7 @@ function body(props) {
             
           <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>
+          <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => toCustomerDateil(record)}>查看详情</Button>
           &nbsp;&nbsp;
           <Button className={customerType === 'private' ? Styles.text : Styles.displayS} type="link" onClick={() => showRecord(record)}>积分记录</Button>
         </>

src/services/apis.js

@@ -104,5 +104,9 @@ export default {
       method: 'GET',
       url: `${prefix}/channel/InviteClientsList`,
     },
+    CustomerRecommendGet: {
+      method: 'GET',
+      url: `${prefix}/customer/recommend/get/id`,
+    },
   },
 }