clientInfo.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import ConfirmPop from '../../components/Modal/confirmPop';
import shareHide from "../../utils/shareHide";

import css from './css.less';

class ClientInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      isShowTips: false,
      tit: '',
      isPass: false,
      confirmTit: '确定'
    }
  }
  
  componentDidMount() {
    const auditInfo = JSON.parse(localStorage.getItem('auditClientInfo'));
    shareHide();
    if (auditInfo) {
      this.setState({
        dataList: auditInfo
      })
    } else {
      // this.props.dispatch(routerRedux.push('/governortraining/audit'));
    }
  }
  handlePass(item) {
    this.props.dispatch({
      type: "governortraining/updateClientInfo",
      payload: {
        id: item.id,
        currentState: 3
      },
      callback: (res) => {
        this.props.dispatch(
          routerRedux.replace("/governortraining/audit")
        );
      }
    })

  }
  handleReject(item) {
    this.props.dispatch({
      type: "governortraining/updateClientInfo",
      payload: {
        id: item.id,
        currentState: 2
      },
      callback: (res) => {
        this.props.dispatch(
          routerRedux.replace("/governortraining/audit")
        );
      }
    })
  }

  render(){
    let labels = [];
    const { dataList } = this.state;
    if (dataList.label && dataList.label !== '') {
      labels = dataList.label.split(',');
    }
    return (
      <div className={css.clientInfoBox}>
        {
          dataList && <div>
            <ul className={css.itemBox}>
              <li>
                <span className={css.label}>姓名</span>
                <span className={css.value}>{dataList.name}</span>
              </li>
              <li>
                <span className={css.label}>性别</span>
                  <span className={css.value}>{
                    dataList.sex === '0' ? '男' : dataList.sex === '1' ? '女' : ''
                  }</span>
              </li>
              <li>
                <span className={css.label}>年龄</span>
                <span className={css.value}>{dataList.age}</span>
              </li>
              <li>
                <span className={css.label}>手机号码</span>
                <span className={css.value}>{dataList.number}</span>
              </li>
              <li>
                <span className={css.label}>婚姻状况</span>
                  <span className={css.value}>{dataList.maritalStatus}</span>
              </li>
              <li>
                <span className={css.label}>学历</span>
                <span className={css.value}>{dataList.education}</span>
              </li>
            </ul>
            <ul className={css.itemBox}>
              <li>
                <span className={css.label}>职业类型</span>
                <span className={css.value}>{dataList.occupational}</span>
              </li>
              <li>
                <span className={css.label}>年收入（万元）</span>
                <span className={css.value}>{dataList.annualIncome}</span>
              </li>
            </ul>
            <ul className={css.itemBox}>
              <li>
                <span className={css.label}>所在省市</span>
                <span className={css.value}>{dataList.province}</span>
              </li>
              <li>
                <span className={css.label}>详细地址</span>
                <span className={css.value}>{dataList.address}</span>
              </li>
            </ul>
            <ul className={css.itemBox}>
              <li>
                <span className={css.label}>希望购买产品</span>
                <span className={css.value}>{dataList.product}</span>
              </li>
              <li>
                <span className={css.label}>缴费期间</span>
                <span className={css.value}>{dataList.payment}</span>
              </li>
              <li>
                <span className={css.label}>缴费频次</span>
                <span className={css.value}>{dataList.frequency}</span>
              </li>
              <li>
                <span className={css.label}>保额</span>
                <span className={css.value}>{dataList.insuredAmount}</span>
              </li>
            </ul>
            {labels.length>0 && <div className={css.clientLabels}>
              <div className={css.tit}><span>客户标签</span></div>
              <p className={css.labels}>
                {labels.map((el, i) => <span key={i}>{el}</span>)}
              </p>
            </div>}
          </div>
        }
        {!dataList.isShowPassedInfo && <div className={css.footer}>
          <div className={css.btn_reject} onClick={() => {
          this.setState({
            tit: '您是否确定驳回该客户信息？',
            isShowTips: true,
            isPass: false,
            confirmTit:'驳回'
          });
        }}>驳回</div>
        <div className={css.btn_passed} onClick={() => {
          this.setState({
            tit: '您是否确定通过该客户信息？',
            isShowTips: true,
            isPass: true,
            confirmTit:'通过'
          })
        }}>通过</div>
        </div>}
        {dataList.isShowPassedInfo && <div className={css.footer}>
          <div className={css.btn_passed} onClick={() => {
            this.props.history.replace('/governortraining/audit');
          }}>确定</div>
        </div>}
        <ConfirmPop show={this.state.isShowTips} title={this.state.confirmTit} handleOK={() => {
        this.state.isPass ? this.handlePass(dataList) : this.handleReject(dataList);
        this.setState({
          isShowTips: false
        })
      }} handleCancel={() => { 
        this.setState({
          isShowTips: false
        })
      }} >
      <p>{this.state.tit}</p>
      </ConfirmPop>
    </div>
    )
  }
}

export default connect()(ClientInfo);