efunbox-mobile-8/pages/PhoneBind.js

/* 
 * 登录
*/
import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	ToastAndroid,
	StatusBar,
	TextInput,
	BackHandler
} from 'react-native';
import BasePage from './BasePage';
import Dimensions from './utils/dimensions';
import http_user from './services/user';
import commonutil from './utils/commonutil';

export default class PhoneBind extends BasePage {
	state = {
		type: '',
		phone_num: '',
		verification_text: '获取验证码',
		verification_code: '',
		http_verification_code: '',
		page_title_text: '绑定手机号',
		click_ok_text: '绑 定',
		phone_bind_result: false
	};
	render() {
		return (
			<View style={styles.wrapper}>
				<View style={{ height: this.getWindowHeight() }}>
					<StatusBar backgroundColor={'white'} translucent={true} barStyle={'dark-content'} />

					<View style={{ flex: 2 }}>
						<View style={{ marginTop: '6%', flex: 2, flexDirection: 'row' }}>
							<TouchableOpacity
								style={{ marginLeft: '5%' }}
								activeOpacity={1}
								onPress={this.backresult.bind(this)}
							>
								<Image source={require('./images/schedulePage/back_black.png')} />
							</TouchableOpacity>
						</View>
						<View style={styles.jump}>
							<TouchableOpacity style={styles.jumpBtn}>
								<Text style={styles.jumpText}>{this.state.page_title_text}</Text>
							</TouchableOpacity>
						</View>
					</View>
					<View style={styles.phoneNumberBox}>
						<Text style={styles.phoneNumber}>手机号</Text>
						<View style={styles.phoneText}>
							<TextInput
								style={{ marginLeft: 20, width: '100%', height: '100%' }}
								maxLength={11}
								onChangeText={(text) => this.setState({ phone_num: text })}
								value={this.state.phone_num}
								placeholder={'请输入手机号'}
							/>
						</View>
					</View>
					<View style={styles.signNumberBox}>
						<Text style={styles.phoneNumber}>验证码</Text>
						<View style={styles.signNumberLine2}>
							<View style={styles.signText}>
								<TextInput
									style={{ marginLeft: 20, width: '100%', height: '100%' }}
									maxLength={4}
									onChangeText={(text) => this.setState({ verification_code: text })}
									value={this.state.verification_code}
									placeholder={'请输入验证码'}
								/>
							</View>
							<TouchableOpacity>
								<Text style={styles.getSign} onPress={this.getVerification.bind(this)}>
									{this.state.verification_text}
								</Text>
							</TouchableOpacity>
						</View>
					</View>
					<View style={styles.loginIn}>
						<Text style={styles.loginText} onPress={this.clickOK.bind(this)}>
							{this.state.click_ok_text}
						</Text>
					</View>
					<View style={styles.wechatLogin}>
						{/* <Image source={require('./images/common/wechat.png')} /> */}
						<Text style={styles.wechatLoginText} />
						{/* <Image source={require('./images/common/arrowRight.png')} /> */}
					</View>
				</View>
			</View>
		);
	}
	componentWillMount() {
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
		var type;
		if (this.props.navigation.state.params == undefined) {
			type = 1;
		} else {
			type = this.props.navigation.state.params.type;
		}
		switch (type) {
			case 1:
				this.setState({
					type: type,
					page_title_text: '绑定手机号',
					click_ok_text: '绑 定'
				});
				break;
			case 2:
				this.setState({
					type: type,
					page_title_text: '修改手机号',
					click_ok_text: '修 改'
				});
				break;
		}
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}

	onBackAndroid = () => {
		this.backresult();
		return true;
	};
	getVerification() {
		if (this.state.verification_text === '获取验证码') {
			if (commonutil.isPoneAvailable(this.state.phone_num)) {
				http_user.getVerificationCode(this.state.phone_num).then((result) => {
					if (result.code != 200) {
						ToastAndroid.show(result.message, ToastAndroid.SHORT);
						return;
					} else {
						this.setState({
							http_verification_code: result.data
						});
					}
					this.setState({
						verification_text: '60'
					});
					this.CountDown();
				});
			} else {
				ToastAndroid.show('请输入正确的手机号', ToastAndroid.SHORT);
			}
		} else {
		}
	}

	CountDown() {
		if (parseInt(this.state.verification_text) == 0) {
			this.setState({
				verification_text: '获取验证码'
			});
		} else {
			this.count_timeout = setTimeout(() => {
				this.setState({
					verification_text: parseInt(this.state.verification_text) - 1 + ''
				});
				this.CountDown();
			}, 1000);
		}
	}

	//绑定手机号
	clickOK() {
		if (!commonutil.isPoneAvailable(this.state.phone_num)) {
			ToastAndroid.show('请输入正确的手机号', ToastAndroid.SHORT);
			return;
		}
		if (this.state.verification_code == '') {
			ToastAndroid.show('请输入验证码', ToastAndroid.SHORT);
			return;
		}
		if (this.state.http_verification_code == this.state.verification_code) {
			let option = {
				method: 'PUT', //请求方法
				//请求体
				body: {
					mobile: this.state.phone_num,
					sign: this.state.verification_code
				}
			};
			http_user.bind_phone(option).then((result) => {
				if (result.code == 200) {
					this.setState({
						phone_bind_result: true
					});
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				} else {
					this.setState({
						phone_bind_result: false
					});
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				}
			});
		} else {
			ToastAndroid.show('验证码不正确', ToastAndroid.SHORT);
		}
	}

	backresult() {
		clearTimeout(this.count_timeout);
		this.props.navigation.state.params.bind_phone_back(this.state.phone_num, this.state.phone_bind_result);
		this.props.navigation.goBack();
	}
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1
	},
	jumpText: {
		color: '#3e3e3e',
		fontSize: 16,
		marginRight: 4
	},
	jump: {
		// width: Dimensions.width,
		flex: 2,
		alignItems: 'center',
		justifyContent: 'center',
		paddingHorizontal: '8%'
	},
	jumpBtn: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	phoneNumberBox: {
		flex: 2,
		paddingHorizontal: '8%'
	},
	phoneNumber: {
		color: '#3e3e3e',
		fontSize: 18,
		marginBottom: 10
	},
	phoneText: {
		width: '100%',
		height: Dimensions.getHeight(50),
		borderRadius: 25,
		backgroundColor: '#f3f3f3'
	},
	signNumberBox: {
		flex: 2,
		paddingHorizontal: '8%'
	},
	signNumberLine2: {
		flexDirection: 'row',
		width: Dimensions.width
	},
	signText: {
		width: '54%',
		height: Dimensions.getHeight(50),
		borderRadius: 25,
		backgroundColor: '#f3f3f3',
		marginRight: 9
	},
	getSign: {
		width: 105,
		height: Dimensions.getHeight(50),
		borderRadius: 25,
		backgroundColor: '#38da84',
		lineHeight: Dimensions.getHeight(50),
		color: '#fff',
		fontSize: 16,
		textAlign: 'center'
	},
	loginIn: {
		flex: 3,
		paddingHorizontal: '8%'
	},
	loginText: {
		width: '100%',
		height: Dimensions.getHeight(50),
		backgroundColor: '#63aeff',
		textAlign: 'center',
		lineHeight: Dimensions.getHeight(50),
		color: '#fff',
		fontSize: 20,
		borderRadius: 25
	},
	wechatLogin: {
		flex: 3,
		flexDirection: 'row',
		paddingHorizontal: '33.6%',
		alignItems: 'center',
		justifyContent: 'center'
	},
	wechatLoginText: {
		fontSize: 16,
		color: '#3e3e3e',
		marginHorizontal: 6
	}
});