preview.js

import { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Carousel, Toast, ActionSheet } from 'antd-mobile';
import moment from 'moment';
import share from '../../utils/share';
import shareHide from '../../utils/shareHide';
import {urlGetParams} from '../../utils/dataFilter'

import css from './css.less';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

class Preview extends Component{
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      inviInfo: null,
      isprev:'t'
    }
  }
  showActionSheet = () => {
    const { inviInfo } = this.state;
    const BUTTONS = ['导航','取消'];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          window.location.href = `https://api.map.baidu.com/marker?location=${JSON.parse(inviInfo.specificLocation).lat},${JSON.parse(inviInfo.specificLocation).lng}&title=目标位置&content=${inviInfo.activitySite}&output=html&src=webapp.baidu.openAPIdemo`;
        }
      });
  }

  componentDidMount() {
    document.title = '邀请函';
    const { search } = this.props.location;
    const params = urlGetParams(window.location.href);
    if (search) {
      if(params.id){
        this.setState({ isprev: ''+params.isprev });
        this.getInfo(params);
      }
    }
  }

  getInfo = (params) => {
    const _this = this;
    this.props.dispatch({
      type: 'Invitation/GetInvitListById',
      payload: {
        id:params.id
      },
      callback(res) {
        const inviInfo = res[0];
        let inviInfoCopy = { ...inviInfo, specificLocation: JSON.parse(inviInfo.specificLocation) };
        let urlShare = "";
        if(params.isShare){//处理多次转发参数问题
          urlShare = window.location.href;
        }else{
          urlShare = `${window.location.href.split('?')[0]}?isprev=2&id=${params.id}&isShare=t&phoneNum=${localStorage.getItem('number')}`;
        }
        share({
          decodeUrl: window.location.href.split('#')[0],
          title: inviInfo.activityName,
          desc: inviInfo.essay,
          shareUrl: urlShare,
          thumbnail: inviInfo.invitationPath,
          record:{
              "operCode": inviInfo.id,
              "operTitle": inviInfo.activityName,
              "operFunction": 100130,
              "operType": 202,
              "phoneNum": params.isShare ? params.phoneNum : ""
            }
        });
        //点击记录
        _this.props.dispatch({
            type:"home/setClickRecord",
            payload: {
              "operCode": inviInfo.id,
              "operFunction": 100130,
              "operTitle": inviInfo.activityName,
              "operType": 201,
              "phoneNum":params.isShare ? params.phoneNum : ""
            },
            callback(data){
              console.log('点击分享出去的链接进来记录一次') 
            }
          });
        shareHide(false);
        sessionStorage.setItem('invitationInfo', JSON.stringify(inviInfoCopy))
        _this.setState({ inviInfo }, () => {
          const ppoint = inviInfoCopy.specificLocation;
          var map = new window.BMap.Map("invitationMap");          // 创建地图实例
          map.disableDragging();
          map.disableDoubleClickZoom();
          map.disablePinchToZoom();
          var point = new window.BMap.Point(ppoint.lng, ppoint.lat);  // 创建点坐标
          var loadCount = 1;
          map.centerAndZoom(point, 17);
          let marker = new window.BMap.Marker(point);        // 创建标注
          map.addOverlay(marker);
          // 解决地图初始化位置和标注偏移问题
          map.addEventListener("tilesloaded", function () {
            if (loadCount == 1) {
              map.setCenter(point);
            }
            loadCount = loadCount + 1;
          });
        });
      }, error(err) {
        Toast.error(err.message, 2);
      }
    })
  }

  render() {
    const { inviInfo, isprev } = this.state;
    return (
      <div className={css.prevWrap}>
        {
          inviInfo && <Fragment>
          <div className={css.prev}>
              <div className={css.bg + ' ' + (isprev === 't' ? css.isprev : '')}><img src={inviInfo.invitationPath} alt="" /></div>
              <div className={css.carouselWrap} style={{ color: inviInfo.colour ? inviInfo.colour:'#fff'}}>
              <Carousel
                selectedIndex={this.state.index}
                autoplay={false}
                infinite
                dots={false}
              >
                <div className={css.pagea}>
                  <div className={css.pageaWrap}>
                    <div className={css.activityName}>{inviInfo.activityName}</div>
                    <div className={css.subtit}>时间</div>
                    <div className={css.subcon}>{moment(inviInfo.activityTime).format('YYYY-MM-DD HH:mm')}</div>
                    <div className={css.subtit}>地点</div>
                      <div className={css.subcon}>{inviInfo.activitySite + inviInfo.activityAdress}</div>
                  </div>
                </div>
                <div className={css.pageb}>
                  <div className={css.pagebWrap}>
                    <div className={css.con}>尊敬的{inviInfo.named}： </div>
                    <div className={css.con} style={{ textIndent: '2em' }}>{inviInfo.essay}</div>
                    <div className={css.con} style={{ textAlign: 'right' }}>{moment(inviInfo.updateTime).format('YYYY-MM-DD')}</div>
                    <div className={css.con} style={{ textAlign: 'right' }}>{inviInfo.invitationMessage}</div>
                  </div>
                </div>
                <div className={css.pageb}>
                  <div className={css.pagebWrap}>
                    <div className={css.con}>联系电话：{inviInfo.number}</div>
                    <div className={css.con}>活动时间：{moment(inviInfo.activityTime).format('YYYY-MM-DD HH:mm')}</div>
                      <div className={css.con}>活动地点：{inviInfo.activitySite + inviInfo.activityAdress}</div>
                      <div className={css.mapWrap} onClick={this.showActionSheet}>
                      <div id="invitationMap" style={{ height: '100%' }}></div>
                    </div>
                  </div>
                </div>
              </Carousel>
            </div>
            <div className={css.btn_left} onClick={() => {
              const { index } = this.state;
              if (index !== 0) {
                this.setState({ index: index - 1 })
              } else {
                this.setState({ index: 2 })
              }
            }}></div>
            <div className={css.btn_right} onClick={() => {
              const { index } = this.state;
              if (index < 2) {
                this.setState({ index: index + 1 })
              } else {
                this.setState({ index: 0 })
              }
              }}></div>
              {isprev === 't' && <div className={css.btnCreatePriew} style={{ backgroundColor: inviInfo.colour ? inviInfo.colour : '#FF9D5C'}}
                onClick={() => {
                  const _this = this;
                  this.props.dispatch({
                    type: 'Invitation/addEdit',
                    payload: {
                      ...inviInfo,
                      judegeId: 1,
                      updateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                    },
                    callback(res) {
                      Toast.success(res.message, 2);
                      _this.props.history.push({ pathname: "/invitation" });
                    }, error(err) {
                      Toast.error(err.message, 2);
                    }
                  })
                }}
              ><img src={require("../../assets/image/yaoqinghan.png")} /></div>}
          </div>
          </Fragment>}
        </div>
    )
  }
}

export default connect()(Preview);