index.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { Button,Toast } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import shareHide from "../../utils/shareHide";
import share from '../../utils/share';
import {getTargetList,getCardName,urlGetParams} from '../../utils/dataFilter'

import css from './css.less';

class Index extends Component{
  constructor(props) {
    super(props);
    let url = window.location.href;
    const params = urlGetParams(url);
    this.state = {
      urlParams:params || {},//url参数
      cardInfo:{},
      AllPlanList:[],//计划书列表
      loadingFlag:true,
    }
  }
  componentWillMount(){
    Toast.loading('loading...',0);
  }
  componentDidMount() {
    document.title = '名片';
    sessionStorage.clear();
    let _this = this;
    let urlParams = this.state.urlParams;
    //获取名片的信息
    this.props.dispatch({
      type: 'BusinessCard/GetBusinessCardInfo',
      payload: {
        "phoneNum":urlParams.number
      },
      callback(res) {
        _this.setState({
          cardInfo:res,
          loadingFlag : false,
        })
        //保存卡片数据
        sessionStorage.setItem("cardInfo", JSON.stringify(res))

        //添加分享功能
        let urlShare = "";
        if(urlParams.isShare){//处理多次转发参数问题
          urlShare = window.location.href;
        }else{
          urlShare = window.location.href+'&isShare=true';
        }
        share({
          decodeUrl: window.location.href.split('#')[0],
          title: `我是${res.name}，您的保险管家`,
          desc: '用我的专业为万千家庭带来保障',
          shareUrl: urlShare,
          thumbnail: res.headUrl || "https://iwpuat.ihxlife.com/defaultHead.png",
        });
        Toast.hide();
      },
      error(mes){
        Toast.info(mes,2)
      }
    })
    /* 计划书接口  */
      this.props.dispatch({
         type:'home/getPlanList',
         payload:{
           riskName:"",
           riskStatus:1,   //1启用
           proId:urlParams.project,
           website:urlParams.website,
           orgId:urlParams.orgId,
         },
         callback(data){
           _this.setState({
             AllPlanList:data
           })
         }
       })
    shareHide(false);
  }
  componentWillUnmount() {
    document.title = '';
  }
  changeBackground=()=>{
    console.log('banckground')
     this.props.history.push({ pathname: "/businessCard/cardBackground" });
  }
  editorCard=()=>{
    console.log('banckground')
     this.props.history.push({ pathname: "/businessCard/addEdit" });
     // this.props.dispatch(routerRedux.push({
     //            pathname: '/businessCard/addEdit',
     //            query: {cardInfo: this.state.cardInfo}
     //  }));
  }
  shareCard=()=>{
    console.log('banckground')
  }
  gaotoPlan =(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=&thumbnail=' + item.thumbnail +'&recipientsName=&selectd=1&roleId='+localStorage.getItem("roleId") +'&Id='+ localStorage.getItem('id')+'&seriNo='
  }
  render() {
    let {cardInfo,AllPlanList} = this.state;
    let roleName = getCardName(cardInfo.roleId);
    let hotPlanList = getTargetList("热门",AllPlanList);//热销计划书
    let phonenumber = "tel:" + cardInfo.number;
    console.log("render--------render----->>",hotPlanList)
    if(this.state.loadingFlag){
      return <div></div>
    }
    return (
        <div className={css.businessCardWrap}>
          <div className={css.session_top}>
            { this.state.urlParams.isShare != "true" && <div className={css.changebgd} onClick={()=>{this.changeBackground()}}>更换背景</div>}
            <img src={cardInfo.cardBackgroundTem ? cardInfo.cardBackgroundTem : require("../../assets/image/businessbgd1.png")} alt="" />
          </div>
          <div>
            
          </div>
          <div className={css.section_card}>
            <div className={css.card}>
                <div className={css.card_header}>
                  <div>
                    <img src={cardInfo.headUrl ? cardInfo.headUrl : require("../../assets/image/defaultHead.png")} alt="" />
                  </div>
                  <div className={css.card_header_name}>
                    <div className={css.card_header_name1}>{cardInfo.name || "***"}</div>
                    <div>{roleName}</div>
                  </div>
                </div>
                <div className={css.card_footer}>
                  <div><img src={require("../../assets/image/wangdian.png")} alt="" />{cardInfo.orgName}</div>
                  <div><img src={require("../../assets/image/phoneNumber.png")} alt="" /><a href={phonenumber}>{cardInfo.number}</a></div>
                </div>
            </div>
          </div>
          <div className={css.section_mid}>
            <div className={css.content}>
              {cardInfo.qrcode ? <img src={cardInfo.qrcode ? cardInfo.qrcode : ""} alt="" /> : (
                <div className={css.qrcodeSection}>
                  <div className={css.text}><img className={css.wechatimg} src={require("../../assets/image/wechat.png")} alt="" /><div>暂无二维码</div></div>
                </div>
                )}
              <div className={css.weixintext}>扫一扫上面的二维码，加我微信</div>
            </div>
          </div>
          <div className={css.section_bottom}>
            <div className={css.headertext}>保险计划书</div>
            <div className={css.plansection}>
              {hotPlanList.length>0 && hotPlanList.map((item,idx)=>{
                return (
                    <div key={item.seq} className={css.planitem} onClick={()=>{this.gaotoPlan(item)}}>
                      <img src={item.thumbnail} alt="" />
                    </div>
                  )

              })}
            </div>
          </div>
          {this.state.urlParams.isShare != "true" && (
              <div className={css.section_footer}>
                <Button className={css.zhuanfa_Btn} inline onClick={()=>{this.editorCard()}}>编辑名片</Button>
              </div>
            )}
      
        </div>
      )
  }
}

export default connect(({home})=>({home}))(Index)