/**
* 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(
{
this.goToCountCodeList()
}} style={{marginLeft: 0, width: 43, height: 47, justifyContent: 'center', }}>
{this.state.phoneCode}
{
this.setState({account: text})
}}
keyboardType={'email-address'}
placeholder={ '请输入手机号'} placeholderTextColor={'#b8bcbf'}
style={[styles.AccountTextInput, {width: ScreenDimensions.width - 30 - 44, paddingLeft: 17}]}/>
)
}else {
return(
{
this.setState({account: text})
}} keyboardType={'email-address'} placeholder={'请输入邮箱'} placeholderTextColor={'#b8bcbf'} style={[styles.AccountTextInput, {width: ScreenDimensions.width - 30,}]}/>
)
}
}
render() {
return(
{
this.clickBackButton()
}} style={styles.BackImageView}>
{
if (this.state.isEmailLoginType) {
this.didSelectedTag()
}
}} style={[{marginRight: 92}]}>
{'手机验证码'}
{
if (!this.state.isEmailLoginType) {
this.didSelectedTag()
}
}} style={styles.TagButtonText}>
{'邮箱验证码'}
{this.renderAccountView(this.state.isEmailLoginType)}
{
this.setState({verificationCode: text})
}} keyboardType={'phone-pad'} placeholder={'请输入验证码'} placeholderTextColor={'#b8bcbf'} style={styles.VerifyTextInput}/>
{
this.getVerificationCode()
}} style={styles.VerifyButtonBgView}>
{'获取验证码'}
{
this.setState({password: text})
}} secureTextEntry={true} placeholder={'请输入密码'} placeholderTextColor={'#b8bcbf'} style={styles.PasswordTextInput}/>
{
this.signUp()
}} style = {styles.SignUpButton}>
{'注册'}
{
this.props.navigator.pop()
}} style={styles.LoginButton}>
{'已有账号?'}
{'马上登录'}
{'使用其他方式登录'}
)
}
}
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',
},
})