efunbox-mobile-8/pages/PhoneBind.js

/* 
 * 登录
*/
import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	ImageBackground,
	Button,
	StatusBar,
	Modal,
	TouchableHighlight,
	ToastAndroid,
	DeviceEventEmitter,
	TextInput,
	ScrollView
} from 'react-native';
import BasePage from './BasePage';
import Dimensions from './utils/dimensions';
import ShopBox from './components/ShopBox';
import TopicTitle from './components/TopicTitle';
import ScrollRow from './components/ScrollRow';
import http_user from './services/user';

export default class PhoneBind extends BasePage {
	state = {
		type: '',
		phone_num: '',
		verification_text: '获取验证码',
		verification_code: '',
		http_verification_code: '',
		page_title_text: '绑定手机号',
		click_ok_text: '绑 定'
	};
	render() {
		return (
			<View style={styles.wrapper}>
				<View style={styles.jump}>
					<TouchableOpacity style={styles.jumpBtn}>
						<Text style={styles.jumpText}>{this.state.page_title_text}</Text>
					</TouchableOpacity>
				</View>
				<View style={styles.phoneNumberBox}>
					<Text style={styles.phoneNumber}>手机号</Text>
					<TextInput
						style={styles.phoneText}
						maxLength={11}
						onChangeText={(text) => this.setState({ phone_num: text })}
						value={this.state.phone_num}
						placeholder={'请输入手机号'}
					/>
				</View>
				<View style={styles.signNumberBox}>
					<Text style={styles.phoneNumber}>验证码</Text>
					<View style={styles.signNumberLine2}>
						<TextInput
							style={styles.signText}
							maxLength={4}
							onChangeText={(text) => this.setState({ verification_code: text })}
							value={this.state.verification_code}
							placeholder={'请输入验证码'}
						/>
						<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>
		);
	}
	componentWillMount() {
		switch (this.props.navigation.state.params.type) {
			case 1:
				this.setState({
					type: this.props.navigation.state.params.type,
					page_title_text: '绑定手机号',
					click_ok_text: '绑 定'
				});
				break;
			case 2:
				this.setState({
					type: this.props.navigation.state.params.type,
					page_title_text: '修改手机号',
					click_ok_text: '修 改'
				});
				break;
		}
	}

	getVerification() {
		if (this.state.verification_text === '获取验证码') {
			if (this.isPoneAvailable(this.state.phone_num)) {
				http_user.getVerificationCode(this.state.phone_num).then((result) => {
					if (result.code != 200) {
						ToastAndroid.show(result.message, ToastAndroid.SHORT);
					} else {
						console.log('====================================');
						console.log(result.data);
						console.log('====================================');
						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 {
			setTimeout(() => {
				this.setState({
					verification_text: parseInt(this.state.verification_text) - 1 + ''
				});
				this.CountDown();
			}, 1000);
		}
	}

	//验证手机号
	isPoneAvailable(str) {
		let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
		if (str.length == 0 || str == null) {
			return false;
		} else if (!myreg.test(str)) {
			return false;
		} else {
			return true;
		}
	}

	//绑定手机号
	clickOK() {
		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) => {});
		} else {
			ToastAndroid.show('验证码不正确', ToastAndroid.SHORT);
		}
	}
}

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
	}
});