注册

js/page/LoginPage.js

@@ -2,10 +2,16 @@ import React, { Component } from "react"
 import { StyleSheet, Text, View, TextInput, Button } from "react-native"
 import NavigationUtil from "../navigator/NavigationUtil"
 import EvilIcons from "react-native-vector-icons/EvilIcons"
+import Ionicons from "react-native-vector-icons/Ionicons"
 import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
 import MyButtom from '../component/MyButton'
 
 export default class Loginpage extends Component {
+	state = {
+		pageTitle: "账号密码登录",
+		pageStatus: 0,
+		btnText:"登录"
+	};
 	componentDidMount() {
 		this.timer = setTimeout(() => {
 			// NavigationUtil.resetToHomePage(this.props)
@@ -17,7 +23,7 @@ export default class Loginpage extends Component {
 	render() {
 		return (
 			<View style={styles.container}>
-				<Text style={styles.loginTitle}>账号密码登录</Text>
+				<Text style={styles.loginTitle}>{this.state.pageTitle}</Text>
 				<View style={styles.inputArea}>
 					<View style={styles.inputPhone}>
 						<View style={styles.inputLeft}>
@@ -26,36 +32,70 @@ export default class Loginpage extends Component {
 						<View style={styles.inputRight}>
 							<TextInput
 								placeholder="请输入手机号"
-								placeholderTextColor={{ color: "#999999" }}
+								placeholderTextColor={"#999999"}
 								style={styles.TextInput}
 							/>
 						</View>
 					</View>
-					<View style={styles.inputPass}>
-						<View style={styles.inputLeft}>
-							<EvilIcons
-								name={"unlock"}
-								size={38}
-								style={{ color: "#333333" }}
-							/>
-						</View>
-						<View>
-							<TextInput
-								placeholder="请输入密码"
-								placeholderTextColor={{ color: "#999999" }}
-								style={styles.TextInput}
-							/>
-						</View>
+					{
+						this.state.pageStatus === 0 ? (
+							<View style={styles.inputPass}>
+								<View style={styles.inputLeft}>
+									<EvilIcons
+										name={"unlock"}
+										size={38}
+										style={{ color: "#333333" }}
+									/>
+								</View>
+								<View>
+									<TextInput
+										placeholder="请输入密码"
+										placeholderTextColor={"#999999"}
+										style={styles.TextInput}
+									/>
+								</View>
+							</View>
+						) : (
+								<View style={styles.inputPass}>
+									<View style={styles.inputLeft}>
+										<Text style={styles.inputLeftText}>验证码</Text>
+									</View>
+									<View style={styles.TextInputRightArea2}>
+										<TextInput
+											placeholder="请输入验证码"
+											placeholderTextColor={"#999999"}
+											style={styles.TextInput2}
+										/>
+									</View>
+									<View style={styles.verifyCodeArea}>
+										<Text>获取验证码</Text>
+									</View>
+								</View>
+							)
+					}
+				</View>
+				{
+					this.state.pageStatus === 0 ? (<View style={styles.forgetPassArea}>
+						<Text>手机号注册登录</Text>
+						<Text>忘记密码</Text>
 					</View>
+					) : (
+							<View style={styles.agree}>
+								<Ionicons
+									name={"md-radio-button-on"}
+									size={20}
+									style={{ color: "#FA788A", marginRight: unitWidth * 20}}
+								/>
+								<Text style={{ fontSize: unitWidth * 24, color: "#999999", marginRight: unitWidth * 2 }}>下一步即同意</Text>
+								<Text style={{ fontSize: unitWidth * 24, color: "#FA788A" }}>用户协议</Text>
+							</View>
+						)
+				}
+
 
-				</View>
-				<View style={styles.forgetPassArea}>
-					<Text>手机号注册登录</Text>
-					<Text>忘记密码</Text>
-				</View>
 				<View style={styles.loginBtnArea}>
 					<MyButtom
-						text={'登录'}
+						text={this.state.btnText}
 						width={unitWidth * 502}
 						height={unitHeight * 84}
 						borderRadius={unitHeight * 84}
@@ -83,7 +123,7 @@ const styles = StyleSheet.create({
 	},
 	inputArea: {
 		width: unitWidth * 628,
-		height: unitHeight * 236,
+		// height: unitHeight * 236,
 		justifyContent: "space-between"
 	},
 	inputPhone: {
@@ -105,7 +145,7 @@ const styles = StyleSheet.create({
 	},
 	inputRight: {
 		width: unitWidth * 480,
-		height: "100%",
+		height: "100%"
 	},
 	TextInput: {
 		width: "100%",
@@ -113,8 +153,29 @@ const styles = StyleSheet.create({
 		paddingLeft: unitWidth * 26,
 		fontSize: unitWidth * 28
 	},
+	TextInput2: {
+		fontSize: unitWidth * 28
+	},
+	TextInputRightArea2: {
+		flex: 3,
+		height: "100%",
+		paddingLeft: unitWidth * 26,
+		fontSize: unitWidth * 28,
+		justifyContent: "center"
+	},
+	verifyCodeArea: {
+		flex: 2,
+		height: "100%",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	verifyCode: {
+		fontSize: unitWidth * 28,
+		color: "#333333"
+	},
 	inputPass: {
 		width: "100%",
+		marginTop: unitHeight * 40,
 		height: unitHeight * 98,
 		borderRadius: unitWidth * 98,
 		borderWidth: unitWidth * 1,
@@ -130,11 +191,19 @@ const styles = StyleSheet.create({
 		marginTop: unitHeight * 28
 	},
 	loginBtnArea: {
-		width:"100%",
-		marginTop:unitHeight * 98,
-		height:unitHeight * 84,
-		justifyContent:'center',
-		alignItems:'center'
+		width: "100%",
+		marginTop: unitHeight * 98,
+		height: unitHeight * 84,
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	agree: {
+		width: "100%",
+		height: unitHeight * 26,
+		flexDirection: "row",
+		justifyContent: "center",
+		alignItems: "center",
+		marginTop: unitHeight * 30 
 	}
 
 })