campus_react_local/App/views/Login/SignUpViewController.js

/**
 * Created by zack on 2018/6/19.
 */
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity,
	Platform,
	Image,TextInput,
	Alert
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import HttpTools from '../../network/HttpTools'
import {signUpByEmail, signUpByPhone, userSmsCode, userEmailCode} from '../../network/API'
import ToastMsg from '../../utils/ToastMsg'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import BaseNavigationBarStyle from '../base/BaseNavigationBarStyle'

export default class SignUpViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			account: '',
			verificationCode: '',
			password: '',
			phoneCode: '+86',
			isEmailLoginType: false
		}
	}

	clickBackButton() {
		this.props.navigator.pop()
	}

	signUp() {
		if (!this.state.account.length) {
			ToastMsg.show("请输入您的账号");
			return
		}

		if (!this.state.verificationCode.length) {
			ToastMsg.show("请输入您的验证码");
			return
		}

		if (!this.state.password.length) {
			ToastMsg.show("请输入您的密码");
			return
		}

		if (this.state.password.length < 6) {
			ToastMsg.show("密码长度不能少于6位");
			return
		}

		let param
		if (this.state.account.indexOf('@') !== -1) { //email
			param = JSON.stringify({
				code: this.state.verificationCode,
				email: this.state.account,
				password: this.state.password
			})
		}else { // phone
			param = JSON.stringify({
				code: this.state.verificationCode,
				password: this.state.password,
				phone: this.state.account,
				phone_code: this.state.phoneCode //默认使用中国大陆
			})
		}

		HttpTools.post(signUpByPhone, param, (response) => {
			if (response && response.token) { //sign up ok
				global.token = response.token
				GlobalUserStorageTool.save(UserStorageKey.UserInfo, response)
				GlobalUserStorageTool.save(UserStorageKey.AccountAndPassword, {account: this.state.account, password: this.state.password})

				Alert.alert(
					'注册成功',
					'',
					[
						{text: 'OK', onPress: () => {
							this.props.navigator.popToRoot()
						}},
					],
					{ cancelable: false }
				)
			}else {
				ToastMsg.show(response && response.msg)
			}

		}, (error) => {

		})
	}

	didSelectedTag() {
		this.setState({isEmailLoginType: !this.state.isEmailLoginType})
	}

	goToCountCodeList() {
		this.props.navigator.push({
			screen: 'CountCodeListViewController',
			title: '国家和地区',
			backButtonTitle: '',
			passProps: {
				didSelectedItem: (phoneCode)=> {
					this.setState({phoneCode: phoneCode})
				}
			},
			navigatorStyle: BaseNavigationBarStyle
		})
	}

	getVerificationCode() {
		let param
		let url = ''
		if (this.state.account.indexOf('@') !== -1) {
			url = userEmailCode
			param = JSON.stringify({
				email: this.state.account,
				purpose: "register"

			})
		}else {
			url = userSmsCode
			param = JSON.stringify({
				phone: this.state.account,
				phone_code: this.state.phoneCode,
				purpose: "register"
			})
		}

		HttpTools.post(url, param, (response) => {

		}, (error) => {

		})
	}

	renderAccountView(isEmailLoginType) {
		if (!isEmailLoginType) {
			return(
				<View style={{width: ScreenDimensions.width - 30, height: 49, flexDirection: 'row', alignItems: 'center'}}>
					<TouchableOpacity onPress={() => {
						this.goToCountCodeList()
					}} style={{marginLeft: 0, width: 43, height: 47, justifyContent: 'center', }}>
						<Text style={{color: '#b8bcbf', fontSize: 14}}>{this.state.phoneCode}</Text>
					</TouchableOpacity>

					<View style={{width: 0.5, height: 21,backgroundColor: 'rgba(80, 80, 80, 0.36)'}}/>
					<TextInput
						onChangeText={(text) => {
							this.setState({account: text})
						}}
						keyboardType={'email-address'}
						placeholder={ '请输入手机号'} placeholderTextColor={'#b8bcbf'}
						style={[styles.AccountTextInput, {width: ScreenDimensions.width - 30 - 44, paddingLeft: 17}]}/>
				</View>
			)
		}else {
			return(
				<TextInput onChangeText={(text) => {
					this.setState({account: text})
				}} keyboardType={'email-address'} placeholder={'请输入邮箱'} placeholderTextColor={'#b8bcbf'} style={[styles.AccountTextInput, {width: ScreenDimensions.width - 30,}]}/>
			)
		}
	}

	render() {
		return(
			<View style={styles.View}>
				<View style={styles.NavigationBarBgView}>
					<View style={styles.NavigationBar}>
						<TouchableOpacity onPress={() => {
							this.clickBackButton()
						}} style={styles.BackImageView}>
							<Image source={require("../../resources/images/TabBar/Learn/btn_back.png")}/>
						</TouchableOpacity>

						<Image source={require('../../resources/images/LoginSignUp/logo.png')} style={styles.LogoImageView}/>
					</View>
				</View>

				<View style={styles.TagButtonView}>
					<TouchableOpacity onPress={() => {
						if (this.state.isEmailLoginType) {
							this.didSelectedTag()
						}
					}} style={[{marginRight: 92}]}>
						<Text style={this.state.isEmailLoginType === false ? styles.TagButtonTextSelected : styles.TagButtonTextNormal}>{'手机验证码'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						if (!this.state.isEmailLoginType) {
							this.didSelectedTag()
						}
					}}  style={styles.TagButtonText}>
						<Text style={this.state.isEmailLoginType === true ? styles.TagButtonTextSelected : styles.TagButtonTextNormal}>{'邮箱验证码'}</Text>
					</TouchableOpacity>
				</View>


				<View style={styles.AccountTextInputBgView}>
					{this.renderAccountView(this.state.isEmailLoginType)}
					<View style={styles.LineView}/>
				</View>

				<View style={styles.VerifyTextInputBgView}>
					<View style={styles.VerifyTextInputContainerView}>
						<TextInput onChangeText={(text) => {
							this.setState({verificationCode: text})
						}} keyboardType={'phone-pad'} placeholder={'请输入验证码'} placeholderTextColor={'#b8bcbf'} style={styles.VerifyTextInput}/>
						<TouchableOpacity onPress={() => {
							this.getVerificationCode()
						}} style={styles.VerifyButtonBgView}>
							<View style={styles.VerifyLineView}/>
							<Text style={styles.VerifyButtonText}>{'获取验证码'}</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.LineView}/>
				</View>

				<View style={styles.PasswordTextInputBgView}>
					<TextInput onChangeText={(text) => {
						this.setState({password: text})
					}} secureTextEntry={true} placeholder={'请输入密码'} placeholderTextColor={'#b8bcbf'} style={styles.PasswordTextInput}/>
					<View style={styles.LineView}/>
				</View>

				<TouchableOpacity onPress={() => {
					this.signUp()
				}} style = {styles.SignUpButton}>
					<Text style={styles.SignUpButtonText}>{'注册'}</Text>
				</TouchableOpacity>

				<View style={styles.LoginButtonBgView}>
					<TouchableOpacity onPress={() => {
						this.props.navigator.pop()
					}} style={styles.LoginButton}>
						<Text style={styles.LoginText1}>{'已有账号？'}
							<Text style={styles.LoginText2}>{'马上登录'}</Text>
						</Text>
					</TouchableOpacity>
				</View>

				<View style={styles.BottomSignUpView}>
					<View style={styles.VBgView}>
						<View style={[styles.VLineView, {marginLeft: 15,}]}/>
						<Text style={styles.VText}>{'使用其他方式登录'}</Text>
						<View style={styles.VLineView}/>
						<View />
					</View>

					<View style={styles.IconBgView}>
						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/wechat.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/QQ.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/weibo.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/Facebook.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/twitter.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/Google.png')}/>
						</TouchableOpacity>
					</View>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white'
	},
	NavigationBarBgView: {
		position: 'absolute',
		left: 0,
		top: 0,
		height: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		backgroundColor: "#ffffff",
		shadowColor: "#eeeeee",
		shadowOffset: {
			width: 0,
			height: -1
		},
		shadowRadius: 0,
		shadowOpacity: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		elevation: 5, //only for android
	},
	NavigationBar: {
		position: 'absolute',
		left: 0,
		top: 0,
		height: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		backgroundColor: "#ffffff",
		shadowColor: "#eeeeee",
		shadowOffset: {
			width: 0,
			height: -1
		},
		shadowRadius: 0,
		shadowOpacity: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		elevation: 5, //only for android
	},
	LogoImageView: {
		width: 80,
		height: 25,
	},
	BackImageView: {
		position: 'absolute',
		left: 15,
		top: (NavigationBarHeight.height - 15)/2.0
	},
	AccountTextInputBgView: {
		width: ScreenDimensions.width - 30,
		height: 50,
		marginLeft: 15,
		marginTop: 35
	},
	LineView: {
		width: ScreenDimensions.width - 30,
		backgroundColor: '#efeff4',
		height: 0.5,
	},
	AccountTextInput: {
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	VerifyTextInputBgView: {
		width: ScreenDimensions.width - 30,
		height: 50,
		marginLeft: 15,
		marginTop: 28
	},
	VerifyTextInputContainerView: {
		width: ScreenDimensions.width - 30,
		height: 49,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	VerifyTextInput: {
		width: ScreenDimensions.width - 30 - 100,
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	VerifyButtonBgView: {
		width: 100,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	VerifyButtonText: {
		fontSize: 14,
		color: '#5a9cd9',
	},
	VerifyLineView: {
		width: 1,
		height: 21,
		backgroundColor: 'rgba(80, 80, 80, 0.36)'
	},
	PasswordTextInputBgView: {
		width: ScreenDimensions.width - 30,
		height: 50,
		marginLeft: 15,
		marginTop: 28,
	},
	PasswordTextInput: {
		width: ScreenDimensions.width - 30,
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	SignUpButton: {
		width:ScreenDimensions.width - 30,
		height: 50,
		backgroundColor: '#e66a6a',
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 5,
		marginTop: 26,
		marginLeft: 15,
	},
	SignUpButtonText: {
		fontSize: 16,
		color: '#ffffff'
	},
	LoginButtonBgView: {
		width: ScreenDimensions.width,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 18
	},
	LoginButton: {

	},
	LoginText1: {
		fontSize: 14,
		color: '#909090'
	},
	LoginText2: {
		fontSize: 14,
		color: '#5a9cd9'
	},
	BottomSignUpView: {
		position: 'absolute',
		left: 0,
		bottom: 0,
		width: ScreenDimensions.width,
		height: 100,
	},
	VBgView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		width: ScreenDimensions.width
	},
	VLineView: {
		width: (ScreenDimensions.width - 120 - 15*4)/2.0,
		height: 0.5,
		backgroundColor: '#e1e3e6'
	},
	VText: {
		fontSize: 14,
		color: '#8c8c8c',
		width: 120,
		textAlign: 'center'
	},
	IconBgView: {
		width: ScreenDimensions.width,
		height: 25,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-around',
		marginTop: 32
	},
	IconView: {
		width: 25,
		height: 25,
	},
	TagButtonView: {
		width: ScreenDimensions.width,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		marginTop: NavigationBarHeight.height + 40
	},
	TagButtonTextNormal: {
		fontSize: 16,
		color: '#505050',
	},
	TagButtonTextSelected: {
		fontSize: 16,
		color: '#5a9cd9',
	},
})