123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446 |
- /**
- * Created by zack on 2018/6/19.
- */
- import {
- View,
- Text,
- StyleSheet,
- TouchableOpacity,
- Platform,
- Image,TextInput
- } 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, login} from '../../network/API'
- import ToastMsg from '../../utils/ToastMsg'
- import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
- import ActionSheet from 'react-native-actionsheet'
- import BaseNavigationBarStyle from '../base/BaseNavigationBarStyle'
-
-
- export default class LoginViewController extends Component {
- constructor(props) {
- super(props)
- this.state = {
- account: props.account,
- password: '',
- isRememberAccount: true
- }
- }
-
- clickBackButton() {
- this.props.navigator.pop()
- }
-
- login() {
- if (this.state.account === null || !this.state.account.length) {
- ToastMsg.show('请输入您的账号')
- return;
- }
-
- if (!this.state.password.length) {
- ToastMsg.show("请输入您的密码");
- return
- }
-
- if (this.state.password.length < 6) {
- ToastMsg.show("密码长度不能少于6位");
- return
- }
-
- let param = JSON.stringify({
- forget_me: false,
- password: this.state.password,
- username: this.state.account
- })
-
- HttpTools.post(login, param, (response) => {
- console.log(response)
- if (response && response.token) { //登录成功
- GlobalUserStorageTool.save(UserStorageKey.UserInfo, response)
- GlobalUserStorageTool.save(UserStorageKey.AccountAndPassword, {account: this.state.account, password: this.state.password})
- global.token = response.token
- this.props.navigator.popToRoot()
-
- }else {
- ToastMsg.show(response.msg)
- }
- }, (error) => {
- ToastMsg.show('登录失败')
- })
- }
-
- loginByVerificationCode() {
- this.props.navigator.pop()
- }
-
- resetPassword() {
- this.props.navigator.push({
- screen: 'ForgotPasswordViewController',
- title: '',
- backButtonTitle: '',
- passProps: {
- didSelectedItem: (phoneCode)=> {
- this.setState({phoneCode: phoneCode})
- }
- },
- navigatorStyle: {
- navBarHidden: true
- }
- })
- }
-
-
- 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.AccountTextInputBgView}>
- <TextInput onChangeText={(text) => {
- this.setState({account: text})
- }} keyboardType={'email-address'} placeholder={'请输入邮箱或手机号'} placeholderTextColor={'#b8bcbf'} style={styles.AccountTextInput}/>
- <View style={styles.LineView}/>
- </View>
-
- <View style={styles.PasswordTextInputBgView}>
- <View style={styles.PasswordContainerView}>
- <TextInput onChangeText={(text) => {
- this.setState({password: text})
- }} secureTextEntry={true} placeholder={'请输入密码'} placeholderTextColor={'#b8bcbf'} style={styles.PasswordTextInput}/>
- <TouchableOpacity onPress={() => {
- this.resetPassword()
- }}>
- <Text style={styles.ForgotPasswordButtonText}>{'忘记密码'}</Text>
- </TouchableOpacity>
- </View>
- <View style={styles.LineView}/>
- </View>
-
- <View style={styles.CheckBoxAndSignUpBgView}>
- <Text style={{color: '#e66a6a', fontSize: 12}}>{'密码错误'}</Text>
- </View>
-
- <TouchableOpacity onPress={() => {
- this.login()
- }} style = {styles.SignUpButton}>
- <Text style={styles.SignUpButtonText}>{'登录'}</Text>
- </TouchableOpacity>
-
- <View style={styles.BottomLoginAndSignUpBgView}>
- <TouchableOpacity onPress={() => {
- this.loginByVerificationCode()
- }}>
- <Text style={styles.AccountLoginText}>{'验证码登录'}</Text>
- </TouchableOpacity>
-
- <TouchableOpacity onPress={() => {
- this.props.navigator.push({
- screen: 'SignUpViewController',
- title: '',
- backButtonTitle: '',
- passProps: {
-
- },
- navigatorStyle: {
- navBarHidden: true
- }
- })
- }}>
- <Text style={styles.SignUpText}>{'免费注册'}</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: NavigationBarHeight.height + 20
- },
- LineView: {
- width: ScreenDimensions.width - 30,
- backgroundColor: '#efeff4',
- height: 0.5,
- },
- AccountTextInput: {
- width: ScreenDimensions.width - 30,
- 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,
- },
- PasswordContainerView: {
- width: ScreenDimensions.width - 30,
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center'
- },
- PasswordTextInput: {
- width: ScreenDimensions.width - 30 - 60,
- textAlign: 'left',
- fontSize: 14,
- color: '#4A4A4A',
- height:49,
- },
- ForgotPasswordButton: {
-
- },
- ForgotPasswordButtonText: {
- fontSize: 14,
- color: '#666666'
- },
- CheckBoxAndSignUpBgView: {
- marginTop: 25,
- width: ScreenDimensions.width - 30,
- marginLeft: 15,
- flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'center',
-
- },
- CheckBoxBgView: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'center',
- },
- CheckBoxImageView: {
- width: 13,
- height: 13,
- marginRight: 3,
- },
- CheckBoxText: {
- fontSize: 14,
- color: '#979696'
- },
- FreeSignUpButtonText: {
- fontSize: 14,
- color: '#5a9cd9'
- },
- SignUpButton: {
- width:ScreenDimensions.width - 30,
- height: 50,
- backgroundColor: '#e66a6a',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: 5,
- marginTop: 20,
- marginLeft: 15,
- },
- SignUpButtonText: {
- fontSize: 16,
- color: '#ffffff'
- },
- LoginButtonBgView: {
- width: ScreenDimensions.width,
- marginTop: 18
- },
- LoginButton: {
- marginLeft: 15,
- },
- 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,
- },
- BottomLoginAndSignUpBgView: {
- width: ScreenDimensions.width - 30,
- marginLeft: 15,
- marginTop: 23,
- flexDirection: 'row',
- justifyContent: 'space-between'
- },
- AccountLoginText: {
- fontSize: 13,
- color: '#979696',
- },
- SignUpText: {
- fontSize: 13,
- color: '#7dafe0',
- },
- })
|