index.jsx 4.2 KB
/**
 * 签到功能
 */
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>
		//     )
	}
}