efunbox-mobile-8/pages/Login.js

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

export default class Login extends BasePage {
	state = {
		phone_num: '',
		verification_text: '获取验证码',
		verification_code: '',
		http_verification_code: '',
		deviceCode: ''
	};
	render() {
		return (
			<View style={styles.wrapper}>
				<View style={{ height: this.getWindowHeight() }}>
					<StatusBar backgroundColor={'white'} translucent={true} barStyle={'dark-content'} />
					<View style={styles.jump}>
						<TouchableOpacity style={styles.jumpBtn} onPress={this.jumpBtn.bind(this)}>
							<Text style={styles.jumpText}>跳过</Text>
							<Image source={require('./images/common/arrowRight.png')} />
						</TouchableOpacity>
					</View>
					<View style={styles.phoneNumberBox}>
						<Text style={styles.phoneNumber}>手机号</Text>
						<View style={styles.phoneText}>
							<TextInput
								style={{ marginLeft: 20, width: '100%', height: '100%' }}
								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%' }}
									onChangeText={(text) => this.setState({ verification_code: text })}
									value={this.state.verification_code}
									placeholder={'请输入验证码'}
								/>
							</View>
							<TouchableOpacity onPress={this.getVerification.bind(this)}>
								<Text style={styles.getSign}> {this.state.verification_text}</Text>
							</TouchableOpacity>
						</View>
					</View>
					<View style={styles.loginIn}>
						<Text style={styles.loginText} onPress={this.clickOK.bind(this)}>
							登录
						</Text>
					</View>
					<View style={styles.wechatLogin}>
						<Image source={require('./images/common/wechat.png')} />
						<Text style={styles.wechatLoginText} onPress={this.wechatLogin.bind(this)}>
							微信登录
						</Text>
						<Image source={require('./images/common/arrowRight.png')} />
					</View>
				</View>
			</View>
		);
	}

	componentWillMount() {
		console.log('================================================'); // e.g US
		console.log('Device getUniqueID', DeviceInfo.getUniqueID()); // e.g US
		console.log('Device getSerialNumber', DeviceInfo.getSerialNumber()); // e.g US
		console.log('================================================'); // e.g US
		this.setState({
			deviceCode: DeviceInfo.getUniqueID() + DeviceInfo.getSerialNumber()
		});
	}

	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: 'POST', //请求方法
				//请求体
				body: {
					mobile: this.state.phone_num,
					sign: this.state.verification_code,
					channel: commonutil.getAppCode(),
					deviceCode: this.state.deviceCode
				}
			};
			http_user.mobileLoginAndReg(option).then((result) => {
				if (result.code == 200) {
					let info = {
						avatar: result.data.user.avatar,
						ageGroup: result.data.user.ageGroup,
						birthday: result.data.user.birthday,
						channel: result.data.user.channel,
						city: result.data.user.city,
						country: result.data.user.country,
						eid: result.data.user.eid,
						gmtCreated: result.data.user.gmtCreated,
						gmtModified: result.data.user.gmtModified,
						mobile: result.data.user.mobile,
						nickName: result.data.user.nickName, //=== '' ? '未设置' : result.data.user.nickName,
						province: result.data.user.province,
						school: result.data.user.school,
						sex: result.data.user.sex,
						status: result.data.user.status,
						uid: result.data.user.uid,
						isVisitor: result.data.isVisitor.toUpperCase() === 'TRUE' ? true : false
					};
					global.userInfo = info;
					commonutil.saveUserInfo();
					this.clearPageToNext('SchoolAge');
				} else {
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				}
			});
		} else {
			ToastAndroid.show('验证码不正确', ToastAndroid.SHORT);
		}
	}

	jumpBtn() {
		http_user.jumpLogin(this.state.deviceCode, commonutil.getAppCode()).then((result) => {
			if (result.code == 200) {
				//登陆成功了,可以存储用户数据到本地
				let info = {
					avatar: '',
					ageGroup: 'PRESCHOOL',
					birthday: '',
					channel: result.data.visitor.channel,
					city: '',
					country: '',
					eid: '',
					gmtCreated: result.data.visitor.gmtCreated,
					gmtModified: result.data.visitor.gmtModified,
					mobile: '',
					nickName: result.data.visitor.nickName, //=== '' ? '未设置' : result.data.user.nickName,
					province: '',
					school: '',
					sex: '',
					status: result.data.visitor.status,
					uid: '',
					isVisitor: result.data.isVisitor.toUpperCase() === 'TRUE' ? true : false
				};
				global.userInfo = info;
				console.log('================跳过登录====================');
				console.log('global.userInfo', global.userInfo);
				console.log('====================================');
				commonutil.saveUserInfo();
				this.clearPageToNext('SchoolAge');
			} else {
				ToastAndroid.show(result.message, ToastAndroid.SHORT);
			}
		});
	}

	wechatLogin() {
		wechat.wechatLogin((user) => {
			let option = {
				method: 'POST',
				body: {
					channel: commonutil.getAppCode(),
					deviceCode: this.state.deviceCode,
					openId: user['openid'],
					unionId: user['unionid'],
					avatar: user['headimgurl'],
					sex: user['sex'],
					nickName: user['nickname']
				}
			};
			http_user.wechatLogin(option).then((result) => {
				if (result.code == 200) {
					//登陆成功了,可以存储用户数据到本地
					let info = {
						avatar: result.data.user.avatar,
						ageGroup: result.data.user.ageGroup,
						birthday: result.data.user.birthday,
						channel: result.data.user.channel,
						city: result.data.user.city,
						country: result.data.user.country,
						eid: result.data.user.eid,
						gmtCreated: result.data.user.gmtCreated,
						gmtModified: result.data.user.gmtModified,
						mobile: result.data.user.mobile,
						nickName: result.data.user.nickName,
						province: result.data.user.province,
						school: result.data.user.school,
						sex: result.data.user.sex,
						status: result.data.user.status,
						uid: result.data.user.uid,
						isVisitor: result.data.isVisitor.toUpperCase() === 'TRUE' ? true : false
					};
					global.userInfo = info;
					commonutil.saveUserInfo();
					this.clearPageToNext('SchoolAge');
				} else {
					ToastAndroid.show(result.message, ToastAndroid.SHORT);
				}
			});
		});
	}
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1
	},
	jumpText: {
		color: '#3e3e3e',
		fontSize: 16,
		marginRight: 4
	},
	jump: {
		// width: Dimensions.width,
		flex: 2,
		alignItems: 'flex-end',
		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%',
		borderRadius: 25,
		height: Dimensions.getHeight(50),
		backgroundColor: '#f3f3f3'
	},
	signNumberBox: {
		flex: 2,
		paddingHorizontal: '8%'
	},
	signNumberLine2: {
		flexDirection: 'row',
		width: Dimensions.width
	},
	signText: {
		width: '54%',
		height: Dimensions.getHeight(50),
		backgroundColor: '#f3f3f3',
		borderRadius: 25,
		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
	}
});