客户管理

config/config.js

@@ -139,6 +139,11 @@ export default {
               name: '客户管理',
               component: '../layouts/BlankLayout',
               routes: [
+                {
+                  path: '/customer/customerlist/list',
+                  name: '客户列表',
+                  component: './customer/customerlist/index',
+                },
                 {
                   path: '/customer/drift/list',
                   name: '游客列表',
@@ -328,7 +333,7 @@ export default {
 
   proxy: {
     '/api/': {
-      target: 'http://192.168.0.84:8080/',
+      target: 'http://localhost:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

src/pages/customer/customerlist/index.jsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio } 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;
+
+const tempDate = [{ code: 's101' }]
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+function body(props) {
+  const { getFieldDecorator } = props.form
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [dataSource, setDataSource] = useState({ records: [] })
+
+  // 默认私客
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [customerType, setCustomerType] = useState('private')
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getList({ pageNumber: 1, pageSize: 10, customerType })
+  }, [])
+
+  function getList(params) {
+    // 网路请求
+    request({ ...apis.customer.customerRecommend, params: { ...params } }).then(res => {
+      setDataSource(res)
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      <Alert
+        style={{
+          marginBottom: 24,
+        }}
+        message={err}
+        type="error"
+        showIcon
+      />
+    })
+  }
+
+  // 提交事件
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, customerType, ...values })
+      }
+    });
+  }
+
+  // Change 事件
+  function handleSelectChange(e) {
+    // eslint-disable-next-line no-console
+    console.log(e)
+  }
+
+  // 分页
+  function onChange(pageNum) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+      getList({ pageNumber: pageNum, pageSize: 10, customerType })
+  }
+
+  // 私客/公客切换
+  function radioButtonHandleSizeChange(e) {
+    const { value } = e.target
+    setCustomerType(value)
+    getList({ pageNumber: 1, pageSize: 10, customerType: value })
+  }
+
+  const columns = [
+    {
+      title: '头像',
+      dataIndex: 'picture',
+      key: 'picture',
+      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></>,
+    },
+    {
+      title: '电话',
+      dataIndex: 'phone',
+      key: 'phone',
+    },
+    {
+      title: '性别',
+      dataIndex: 'sex',
+      key: 'sex',
+      // eslint-disable-next-line no-nested-ternary
+      render: (_, record) => <><sapn>{ record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知' }</sapn></>,
+    },
+    {
+      title: '置业顾问',
+      dataIndex: 'consultantName',
+      key: 'consultantName',
+      // eslint-disable-next-line no-nested-ternary
+      render: (_, record) => (
+        <>
+          <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></>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'customerId',
+      key: 'customerId',
+      // eslint-disable-next-line no-nested-ternary
+      render: (_, record) => (
+        <>
+          <sapn className={ customerType === 'private' ? Styles.text : Styles.displayS }>变更状态</sapn>
+          &nbsp;&nbsp;
+          <sapn className={  customerType === 'private' ? Styles.text : Styles.displayS }>调整归属</sapn>
+          <br/>
+          <sapn className={ Styles.text }>查看详情</sapn>
+          &nbsp;&nbsp;
+          <sapn className={ Styles.text }>积分记录</sapn>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('buildingId')(
+            <Select style={{ width: '180px' }} placeholder="意向项目" onChange={handleSelectChange}>
+              <Option value="male">male</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('reportRecommendStatus')(
+            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
+              <Option value={0}>未报备</Option>
+              <Option value={1}>报备</Option>
+              <Option value={2}>推荐</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('name')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="姓名"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('tel')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="电话"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('consultName')(
+            <Input placeholder="置业顾问" />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('consultTel')(
+            <Input placeholder="置业顾问电话" />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+
+       <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.Group>
+       </div>
+      <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />
+    </>
+  );
+}
+const WrappedBody = Form.create({ name: 'body' })(body);
+
+export default WrappedBody

src/pages/customer/customerlist/style.css

@@ -0,0 +1,69 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.text {
+  color: #ef273a;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  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: #ff7e48;
+  background-color: #ff7e48;
+  color: #ffffff;
+}
+.noButton {
+  border-color: #ff7e48;
+  color: #ff7e48;
+}
+.displayS {
+  display: none;
+}

src/pages/customer/customerlist/style.less

@@ -0,0 +1,72 @@
+.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 {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+}
+.cardItem{
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;  
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width: 84px;
+  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;
+}

src/pages/customer/customerlist/style.wxss

@@ -0,0 +1,69 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.text {
+  color: #ef273a;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  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: #ff7e48;
+  background-color: #ff7e48;
+  color: #ffffff;
+}
+.noButton {
+  border-color: #ff7e48;
+  color: #ff7e48;
+}
+.displayS {
+  display: none;
+}

src/pages/customer/drift/index.jsx

@@ -3,6 +3,7 @@ import { Table, Avatar, Alert } from 'antd';
 
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
+import Styles from './style.less'
 
 function costomerDrift() {
   // eslint-disable-next-line react-hooks/rules-of-hooks

src/pages/customer/drift/style.less

@@ -0,0 +1,57 @@
+.SubmitButton {
+  background: rgba(239,39,58,1);
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+}
+.cardItem{
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;  
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last:justify
+}
+
+.address { 
+  width: 400px;
+  height: 24px; 
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+}
+

src/pages/customer/independentList/index.jsx

@@ -93,16 +93,6 @@ function body(props) {
       dataIndex: 'phone',
       key: 'phone',
     },
-    {
-      title: '类型',
-      dataIndex: 'personTtype',
-      key: 'personType',
-    },
-    {
-      title: '所属渠道',
-      dataIndex: 'qudao',
-      key: 'qudao',
-    },
     {
       title: '性别',
       dataIndex: 'gender',
@@ -110,6 +100,17 @@ function body(props) {
       // eslint-disable-next-line no-nested-ternary
       render: (_, record) => <><sapn>{ record.gender === '1' ? '男' : record.gender === '2' ? '女' : '未知' }</sapn></>,
     },
+    {
+      title: '类型',
+      dataIndex: 'personType',
+      key: 'personType',
+      render: (_, record) => <><sapn>{ record.channelName !== null ? '渠道经纪人' : '独立经纪人' }</sapn></>,
+    },
+    {
+      title: '所属渠道',
+      dataIndex: 'channelName',
+      key: 'channelName',
+    },
     {
       title: '操作',
       dataIndex: 'customerId',

src/pages/customer/independentList/style.css

@@ -0,0 +1,54 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/customer/independentList/style.less

@@ -1,5 +1,5 @@
 .SubmitButton {
-  background: #3a91d5;
+  background: rgba(239,39,58,1);
   border-radius: 7px;
   border: 0px;
 }

src/pages/customer/independentList/style.wxss

@@ -0,0 +1,54 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/customer/recommendCustomer/index.jsx

@@ -119,8 +119,8 @@ function body(props) {
     },
     {
       title: '状态',
-      dataIndex: 'createDate',
-      key: 'createDate',
+      dataIndex: 'verifyStatus',
+      key: 'verifyStatus',
       render: (_, record) => <><sapn>{ record.verifyStatus === 0 ? '未通过': record.verifyStatus === 1 ? '已通过' : record.verifyStatus === 2 ? '已驳回' : '' }</sapn></>,
     },
     {

src/pages/customer/recommendCustomer/style.css

@@ -0,0 +1,54 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/customer/recommendCustomer/style.less

@@ -1,5 +1,5 @@
 .SubmitButton {
-  background: #3a91d5;
+  background: rgba(239,39,58,1);
   border-radius: 7px;
   border: 0px;
 }

src/pages/customer/recommendCustomer/style.wxss

@@ -0,0 +1,54 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/customer/report/style.css

@@ -0,0 +1,54 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/customer/report/style.less

@@ -1,5 +1,5 @@
 .SubmitButton {
-  background: #3a91d5;
+  background: rgba(239,39,58,1);
   border-radius: 7px;
   border: 0px;
 }

src/pages/customer/report/style.wxss

@@ -0,0 +1,54 @@
+.SubmitButton {
+  background: #ef273a;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/services/apis.js

@@ -64,5 +64,9 @@ export default {
       method: 'GET',
       url: `${prefix}/customer/agents`,
     },
+    customerRecommend: {
+      method: 'GET',
+      url: `${prefix}/customer/recommend`,
+    },
   },
 }