/** * 签到功能 */ 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=()=>{ 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 console.log(locationMsg) return (<div style={{display: "flex"}}> <Location getLocationMsg={this.getLocationMsg.bind(this)} showMap={this.props.showMap}/> <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>) // 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> // ) } }