index.jsx

/**
 * 签到功能
 */
import React, { Component } from 'react'
import styles from './styles.less'
import Location from './components'
import { Button, Popconfirm } from 'antd';
import { isEmpty } from 'lodash';
import { openToast } from './Notification';
import { successToast, failToast } from './Toast';
export default class location extends Component {
    constructor (props) {
        super(props);
        this.state = {
          locationMsg:{},
          btn:true,
          style:{'display': 'none'}
        };
      }
      // 该方法在首次渲染之前调用(数据初始化)
      componentWillMount (){}
      //已经生成对应的dom结构
      componentDidMount=()=> {}
      //在组件从 DOM 中移除的时候立刻被调用。
      componentWillUnmount=()=> {}
      getLocationMsg=(locationMsg)=>{
        console.log(locationMsg)
        //如果不为空的话显示提示
        this.setState({loading:true},()=>{
          if(Object.keys(locationMsg).length !== 0){
            this.setState({ 
              locationMsg:locationMsg,
              loading:false,
              style:{'display': 'block'},
              btn:false
            })
          }else{
            this.setState({ 
              loading:false,
            })
          }
        })
      }
      submitLocation=()=>{
        const {showLocation} = this.props
        if(!showLocation) return;
          if(isEmpty(this.state.locationMsg)&&window.lat&&window.lng){
          let obj = {
            lat:window.lat,
            lng:window.lng
          }
          this.props.onChange(obj)
          if(this.props.get === 'web'){
            openToast('success','成功','已添加定位地址')
          } else {
            successToast('已添加定位地址')
          }
        } else if(!isEmpty(this.state.locationMsg)) {
          this.props.onChange(this.state.locationMsg)
          if(this.props.get === 'web'){
            openToast('success','成功','已添加定位地址')
          } else {
            successToast('已添加定位地址')
          }
        } else {
          if(this.props.get === 'web'){
          openToast('error','错误','定位失败，请稍后重试')
          } else {
            successToast('定位失败，请稍后重试')
          }
        }
        
      }
      // 点击确定提交定位
      confirm = (e) => {
        console.log(e);
        if(this.state.btn){
          if(this.props.get === 'web'){
            openToast('error','错误','正在定位，请稍后重试')
          } else {
            failToast('正在定位，请稍后重试')
          }
          return
        }
        this.submitLocation()
      }
    render() {
      let { locationMsg,btn } = this.state
      let {lat,lng,address,params,json,showLocation} = this.props
  
      return (<div style={{display: "flex"}}>
        <Location lat={lat} json={json} lng={lng} getLocationMsg={this.getLocationMsg.bind(this)} showMap={this.props.showMap} params={params}/> 
       <div  style={{display:showLocation?"block":"none"}}> <Popconfirm
          title={btn?'正在定位中':locationMsg.address}
          onConfirm={this.confirm}
          okText="提交"
          cancelText="取消"
          >
          <Button disabled={btn} style={{margin:"auto",width:this.props.width}} loading={this.state.loading}  className={styles.btn} type='primary'>{this.props.btnName}</Button>
        </Popconfirm></div>
      </div>)
    // return (
    //         <div style={{ paddingBottom: 49, paddingTop: 44 }}>
    //             <Nav name="签到" link/>
    //             <div id="EditAddress" className={styles.EditAddress}>
    //                 <Location getLocationMsg={this.getLocationMsg.bind(this)}/>
    //                  <Button onClick={this.submitLocation} className={styles.btn} type='primary'>签到</Button>
    //                 <div style={this.state.style} className={styles.div}>
    //                     <p><i>经纬度：</i><span>{this.state.locationMsg.lng},{this.state.locationMsg.lat}</span></p>
    //                     <p><i>详细地址:</i><span>{this.state.locationMsg.address}</span></p>
    //                     <p><i>最近的路口:</i><span>{this.state.locationMsg.nearestJunction}</span></p>
    //                     <p><i>最近的路:</i><span>{this.state.locationMsg.nearestRoad}</span></p>
    //                     <p><i>最近的POI:</i><span>{this.state.locationMsg.nearestPOI}</span></p>
    //                     <Button onClick={this.submitLocation} className={styles.btn} type='primary'>签到</Button>
    //                 </div>
    //             </div>
                
    //         </div>
    //     )
    }
}