合并

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

@@ -0,0 +1,145 @@
+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/publicCustomerDetail.jsx

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,209 @@
+.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;
+  }
+}
+