index.js

import React, { Component } from 'react'
import { connect } from 'dva'
import { Modal, Toast } from 'antd-mobile';
import Swiper from "../../components/Swiper/index"
import BottomNav from "../../components/BottomNav/index"
import ExpertVideo from '../expertVideo/index'
import styles from './Home.css'
import { routerRedux } from 'dva/router';
import shareHide from "../../utils/shareHide";
class Home extends Component {
  constructor(props){
    super(props)
    this.state={
      planList:[],
      moduleList:[
        {
          img:require('../../assets/image/myUser.png'),
          text:'我的客户'
        },
        {
          img:require('../../assets/image/projectPlan.png'),
          text:'计划书'
        },
        {
          img:require('../../assets/image/poster.png'),
          text:'海报'
        },
        {
          img:require('../../assets/image/dataBank.png'),
          text:'资料库'
        },
      ],
      moduleList1:[
        {
          img:require('../../assets/image/projectPlan.png'),
          text:'计划书'
        },
        {
          img:require('../../assets/image/poster.png'),
          text:'海报'
        },
        {
          img:require('../../assets/image/audit.png'),
          text:'审核'
        },
        {
          img:require('../../assets/image/dataBank.png'),
          text:'资料库'
        },
      ],
      select:0,
      navTitle: "华夏O2O智慧工作平台",
      chooseExpert: false,
      showChoosePop: false,
      userOpenId:'',  //微信号
      publicOpenId:'',  //公众号
      phoneNum:'',     //手机号码
      stream: null,
      swiperList: [],  //轮播图
      roleId: '',
      hasRoom: false,
      isCodeShow: false
    }
    this.handleClose = this.handleClose.bind(this);
    this.handleShowExpert = this.handleShowExpert.bind(this);
    this.handleFeedback = this.handleFeedback.bind(this);
    this.handleShowChoosePop = this.handleShowChoosePop.bind(this);
  }
  history = (index)=>{
    if(index == 0 && localStorage.getItem("roleId") == 3){
      this.props.history.push("/prospectusList")
    }else if( index == 0 && localStorage.getItem("roleId") == 2){
      this.props.history.push("/myUser")
    }
    else if(index == 1 && localStorage.getItem("roleId") == 2){
      this.props.history.push("/prospectusList")
    }else if(index === 2 && localStorage.getItem("roleId") == 2){
      this.props.history.push("/poster")
    }else if(index === 1 && localStorage.getItem("roleId") == 3){
      this.props.history.push("/poster")
    }else if(index === 3 && localStorage.getItem("roleId") == 2){
      this.props.history.push("/databank")
    }else if(index === 3 && localStorage.getItem("roleId") == 3){
      this.props.history.push("/databank")
    }else if(index === 2 && localStorage.getItem("roleId") == 3){
      //审核
      this.props.history.push("/governortraining/audit")
    }


  }
  goGtclientlist=()=>{
    this.props.history.push("/governortraining/gtclientlist")
  }
  goPerformance =()=>{
    this.props.history.push('/home/performance')
  }
  handleClose() {
    this.setState({
      chooseExpert: false
    })
  }
  handleShowExpert(e) {
    this.setState({
      chooseExpert: true
    })
  }
  handleFeedback(id) {
    this.setState({
      showChoosePop: false,
      chooseClientId: id
    })
  }
  handleShowChoosePop(e) {
    e.preventDefault();
    this.props.dispatch(routerRedux.push('/video/chooseclient'))
  }

  goPlan =(item)=>{

    let storage = window.localStorage;
    storage.setItem("riskName",item.riskName)
    storage.setItem("riskCode",item.riskCode)
    storage.setItem("calculationMethod",item.calculationMethod)
    storage.setItem("selectd",1)
    storage.setItem("seriNo",'')
    storage.setItem("recipients",false)
    storage.setItem("riskIntroduce",item.riskIntroduce)
    storage.setItem("thumbnail",item.thumbnail)
    storage.setItem("recipientsName",'')


    window.location.href = window.location.href.split('#')[0] + '#/addplaneditor?riskName=' + item.riskName + '&riskCode=' + item.riskCode + '&calculationMethod=' + item.calculationMethod + '&recipients=false&riskIntroduce=' + item.riskIntroduce + '&thumbnail=' + item.thumbnail +'&recipientsName=&selectd=1&roleId='+localStorage.getItem("roleId")+'&seriNo='
  }

  componentWillMount() {
    // this.props.history.go(0)
    const that = this;
    let url = window.location.href;
    const matchs = decodeURI(url).match(/userOpenId=(.*)&publicOpenId=(.*)&phoneNum=(.*)/i);
    let userOpenId = ''
    let publicOpenId = '';
    let phoneNum = '';
    if (matchs) {
       userOpenId = matchs[1];
       publicOpenId = matchs[2];
       phoneNum = matchs[3];
      this.setState({
        userOpenId,  //微信号
        publicOpenId,  //公众号
        phoneNum     //手机号码
      })

    }
    this.props.dispatch({
      type:'home/getCustomerInfo',
      payload: {"phoneNum":phoneNum||localStorage.getItem("number")},
      callback(data) {
        let userInfo = data.userInfo
        let storage = window.localStorage;
        that.setState({
          roleId: userInfo.roleId
        })
        if (userInfo.roleId == '3') {
          that.setState({
            moduleList: that.state.moduleList1,
          })
        }
        storage.setItem("id",userInfo.id)                 //id
        storage.setItem("roleId",userInfo.roleId)         //角色
        storage.setItem("number",userInfo.number)        //手机号
        storage.setItem("name",userInfo.name)             //名字
        storage.setItem("public_id",userInfo.public_id)  //公众号
        storage.setItem("weixin_id",userInfo.weixin_id)   //微信号
        storage.setItem("superiorid", userInfo.superiorid) //上级用户id
        storage.setItem("orgId", userInfo.orgId ? userInfo.orgId : '') //机构id
        storage.setItem("project", userInfo.project ? userInfo.project:'') //项目id
        storage.setItem("website", userInfo.website ? userInfo.website:'') //网点id
      }
    })
    /*shareHide({
      decodeUrl: window.location.href.split('#')[0],
    })*/
    shareHide()
  }

  componentDidMount() {
    document.title = '华夏O2O智慧工作平台';
    const _this = this;
    this.props.dispatch({
      type: 'myUser/getRoomList',
      payload: {
        index: 0
      },
      callback(data) {
        _this.setState({
          hasRoom: data.rooms.length > 0
        })
      }
    })



    // 选取的客户

    if (this.props.location.query) {
      const { query: { chosenClient } } = this.props.location;
      const id = window.localStorage.getItem('id');
      let clientNum = '';
      Toast.loading('loading...');
      if (chosenClient) {
        clientNum = '__'+chosenClient.number;
      }
      this.props.dispatch({
        type: 'getcode/getCodeUnlimit',
        payload: {
          scene: id + clientNum
        },
        callback(res) {
          if (res.data.status) {
            Toast.hide();
            _this.setState({
              isCodeShow: true,
              chooseExpert: false,
              stream: res.data.data
            })
          }

        }
      });
    }


   let that = this;

    /* 计划书接口  */
    this.props.dispatch({
     type:'home/getPlanList',
     payload:{
       riskName:"",
       riskStatus:1,   //1启用
       "project":localStorage.getItem("project"),
       "website":localStorage.getItem("website"),
       "orgId":localStorage.getItem("orgId"),
     },
     callback(data){

       that.setState({
         planList:data
       })
     },
     })


  }
  componentWillUnmount(){
    document.title = '';
  }
  render() {
    return (
      <div className={styles.box}>
        {/*<HeaderNav title={this.state.navTitle}*/}
        {/*history={this.props.history}*/}
        {/*></HeaderNav>*/}
        <div className={styles.header} onClick={()=>{
          // this.props.history.push("/myUser")

         /* this.props.dispatch(routerRedux.push({
            pathname: '/myUser',
            query: {
              data:1,
            },
          }));*/
        }}>
          {/*<div className={styles.search}>
            <img src={require('../../assets/image/search.png')} alt=""/>
            <input type="text" placeholder="请输入关键字" />
          </div>*/}
        </div>
        <div className={styles.content}>
          <div className={styles.banner}>
            <Swiper  swiperList={this.state.swiperList} />
          </div>
          <div className={styles.nav}>
            {
              this.state.moduleList.map((item,index)=>{
                return (
                  <div className={styles.module} key={index} onClick={()=>{
                    this.history(index)
                  }}>
                    <img src={item.img} alt=""/>
                    <p>{item.text}</p>
                  </div>
                )
              })
            }

          </div>
          {
            this.state.planList.length>0 &&<div className={styles.planList}>
              <div>
                <p>推荐计划书</p>
              </div>
              {
                this.state.planList.map((item,index)=>{
                  return(
                    <div className={styles.item} key={index} onClick={()=>this.goPlan(item)}>
                      <div className={styles.left}>
                        <img src={item.thumbnail} alt=""/>
                      </div>
                      <div className={styles.right}>
                        <div className={styles.top}>
                          <div className={styles.title}>{item.riskName}</div>
                          {item.riskLabels && item.riskLabels.map((ite,ind)=>{
                            return(
                              <span key={ind} className={ite === '新品'?styles.orangeSpan:styles.redSpan}>
                                { ite =='新品' ?<img src={require("../../assets/image/label-hot.png")} alt=""/>:<img src={require("../../assets/image/label-newProduct.png")} alt=""/> }
                              </span>
                            )
                          })}

                        </div>
                        <div className={styles.buttom}>
                          {item.riskIntroduce}
                        </div>
                      </div>

                    </div>
                  )
                })
              }
              <div className={styles.noMore}>
                <div><img src={require('../../assets/image/no-more.png')} alt=""/>
                  <span>没有更多啦</span>
                </div>
                {/*<div className={styles.line}></div>*/}
              </div>
            </div>
          }

        </div>

        <BottomNav handleShowExpert={this.handleShowExpert} hasRoom={this.state.hasRoom} roleId={this.state.roleId} goGtclientlist = {this.goGtclientlist} goPerformance = {this.goPerformance}/>
        <ExpertVideo
          show={this.state.chooseExpert}
          handleShowChoosePop = {
            this.handleShowChoosePop
          }
          handleNoneClient={() => {
            const _this = this;
            const id = window.localStorage.getItem('id');
            Toast.loading('loading...');
            this.props.dispatch({
              type: 'getcode/getCodeUnlimit',
              payload: {
                scene:id
              },
              callback(res) {
                if (res.data.status) {
                  Toast.hide();
                  _this.setState({
                    isCodeShow: true,
                    chooseExpert: false,
                    stream: res.data.data
                  })
                }

              }
            });
          }}
          handleClose = {
            this.handleClose
          }
        />
        <Modal
          closable
          transparent
          className={styles.codeWrap}
          onClose={()=>{this.setState({isCodeShow:false})}}
          visible = {this.state.isCodeShow}
        >
          <div className={styles.code}>
            <img src={this.state.stream} alt='' />
            <div>长按识别二维码进入在线咨询</div>
          </div>
        </Modal>
      </div>
    )
  }
}
Home.propsTypes = {}
export default connect()(Home)