React Native 版本执行0.57的规则
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TextInput, StatusBar, TouchableOpacity, Image, KeyboardAvoidingView } from 'react-native';
import { global } from "../utils/Global";
import { regExp } from "../netWork/RegExp";
import { requestUrl } from "../netWork/Url";
import Button from "../common/Button";
import ErrorPrompt from "../common/ErrorPrompt";
import CountDownButton from 'react-native-smscode-count-down';
export default class SignUp extends Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
this.state = {
isLoading: false,
ErrorPrompt: true,
ErrorText: "",
ErrorImg: '',
TimingFlag: false,
TimingText: "获取验证码",
phoneReg: true,
smsCodeReg: true,
doctorPasswordReg: true,
confirmPasswordReg: true,
doctorPhoneFocus: false,
smsCodeFocus: false,
doctorPasswordFocus: false,
confirmPasswordFocus: false,
confirmPassword: '',
doctorPhone: '',
doctorPassword: '',
smsCode: '',
}
}
getInitalState() {
}
componentWillMount() {
}
componentDidMount() {
}
render() {
const { navigate, goBack } = this.props.navigation;
return (
<KeyboardAvoidingView
behavior={global.IOS ? "padding" : null}
style={{ flex: 1 }}
>
<ScrollView
keyboardShouldPersistTaps={'handled'}
style={styles.container}
>
<StatusBar
animated={true}
hidden={false}
backgroundColor={'#000'}
translucent={false}
showHideTransition="fade"
networkActivityIndicatorVisible={this.state.isLoading}
statusBarStyle={"default"}
/>
{}
<TouchableOpacity
activeOpacity={.8}
style={styles.goBackBtn}
onPress={() => goBack()}>
<Image
style={styles.goBackImg}
source={require('../images/arrow_left_grey.png')}
/>
</TouchableOpacity>
{}
<View style={styles.content}>
{}
<Image
style={styles.textLogo}
source={require('../images/textLogo.png')}
/>
{}
{}
<View style={[styles.inputItem, this.state.doctorPhoneFocus ? styles.doctorPhoneItemFocus : null, this.state.phoneReg ? null : styles.errorStyle]}>
{}
{this.state.doctorPhoneFocus ? <Text style={styles.inputTitle}>手机号</Text> : null}
<View style={styles.inputBox}>
<TextInput
style={styles.textInput}
placeholder={'请输入手机号'}
placeholderTextColor={global.Colors.placeholder}
onChangeText={(text) => this.setState({ doctorPhone: text })}
defaultValue={this.state.doctorPhone}
underlineColorAndroid={'transparent'}
keyboardType={'numeric'}
onFocus={this.doctorPhoneFocus.bind(this)}
onBlur={this.doctorPhoneBlur.bind(this)}
maxLength={11}
/>
{this.state.doctorPhoneFocus ? <TouchableOpacity
activeOpacity={.8}
onPress={() =>
this.setState({
doctorPhone: '',
})
}
style={styles.clearBtn}
>
<Image
style={styles.clearImg}
source={require('../images/clear.png')}
/>
</TouchableOpacity> : null}
</View>
</View>
{}
{}
<View style={[styles.inputItem, this.state.smsCodeFocus ? styles.doctorPhoneItemFocus : null, this.state.smsCodeReg ? null : styles.errorStyle]}>
{this.state.smsCodeFocus ? <Text style={styles.inputTitle}>校验码</Text> : null}
<View style={styles.passwordBox}>
<TextInput
style={styles.textInput}
placeholder={'请输入校验码'}
placeholderTextColor={global.Colors.placeholder}
onChangeText={(text) => this.setState({ smsCode: text })}
defaultValue={this.state.smsCode}
underlineColorAndroid={'transparent'}
keyboardType={'numeric'}
maxLength={6}
onFocus={this.smsCodeFocus.bind(this)}
onBlur={this.smsCodeBlur.bind(this)}
/>
<View style={styles.passwordBox}>
{this.state.smsCodeFocus ? <TouchableOpacity
activeOpacity={.8}
onPress={() =>
this.setState({
smsCode: '',
})
}
style={styles.clearBtn}
>
<Image
style={styles.clearImg}
source={require('../images/clear.png')}
/>
</TouchableOpacity> : null}
<View style={styles.isolationLine}></View>
{}
<CountDownButton
style={{
}}
textStyle={{
fontSize: global.px2dp(15),
color: global.Colors.color,
}}
timerCount={120}
timerTitle={this.state.TimingText}
enable={true}
onClick={(shouldStartCounting) => {
if (!this.state.doctorPhone) {
this.setState({
ErrorText: '请输入手机号',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png')
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
shouldStartCounting(false);
} else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
this.setState({
ErrorText: '手机号码格式不正确',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png')
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
shouldStartCounting(false);
} else {
this.getRegisterSms();
shouldStartCounting(true);
}
}}
timerEnd={() => {
this.setState({
TimingText: '重新获取'
})
}} />
</View>
</View>
</View>
{}
{}
<View style={[styles.inputItem, this.state.doctorPasswordFocus ? styles.doctorPhoneItemFocus : null, this.state.doctorPasswordReg ? null : styles.errorStyle]}>
{this.state.doctorPasswordFocus ? <Text style={styles.inputTitle}>密码</Text> : null}
<View style={styles.passwordBox}>
<TextInput
style={styles.textInput}
placeholder={'请输入密码6-10字符(数字+字母)'}
placeholderTextColor={global.Colors.placeholder}
onChangeText={(text) => this.setState({ doctorPassword: text })}
defaultValue={this.state.doctorPassword}
underlineColorAndroid={'transparent'}
secureTextEntry={true}
keyboardType={'default'}
onFocus={this.doctorPasswordFocus.bind(this)}
onBlur={this.doctorPasswordBlur.bind(this)}
/>
<View style={styles.passwordBox}>
{this.state.doctorPasswordFocus ? <TouchableOpacity
activeOpacity={.8}
onPress={() =>
this.setState({
doctorPassword: '',
})
}
style={styles.clearBtn}
>
<Image
style={styles.clearImg}
source={require('../images/clear.png')}
/>
</TouchableOpacity> : null}
</View>
</View>
</View>
{}
{}
<View style={[styles.inputItem, this.state.confirmPasswordFocus ? styles.doctorPhoneItemFocus : null, this.state.confirmPasswordReg ? null : styles.errorStyle]}>
{this.state.confirmPasswordFocus ? <Text style={styles.inputTitle}>密码</Text> : null}
<View style={styles.passwordBox}>
<TextInput
style={styles.textInput}
placeholder={'请输入密码'}
placeholderTextColor={global.Colors.placeholder}
onChangeText={(text) => this.setState({ confirmPassword: text })}
defaultValue={this.state.confirmPassword}
underlineColorAndroid={'transparent'}
secureTextEntry={true}
keyboardType={'default'}
onFocus={this.confirmPasswordFocus.bind(this)}
onBlur={this.confirmPasswordBlur.bind(this)}
/>
<View style={styles.passwordBox}>
{this.state.confirmPasswordFocus ? <TouchableOpacity
activeOpacity={.8}
onPress={() =>
this.setState({
confirmPassword: '',
})
}
style={styles.clearBtn}
>
<Image
style={styles.clearImg}
source={require('../images/clear.png')}
/>
</TouchableOpacity> : null}
</View>
</View>
</View>
{}
{}
<View style={styles.btnBox}>
<Button text="注册" click={this.signUp.bind(this)} />
</View>
</View>
{this.state.ErrorPrompt ? null : <ErrorPrompt text={this.state.ErrorText} imgUrl={this.state.ErrorImg} />}
</ScrollView>
</KeyboardAvoidingView>
);
}
doctorPhoneFocus() {
this.setState({
doctorPhoneFocus: true,
phoneReg: true,
})
}
doctorPhoneBlur() {
this.setState({
doctorPhoneFocus: false,
})
if (!this.state.doctorPhone) {
this.setState({
ErrorText: '请输入手机号',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
this.setState({
ErrorText: '手机号码格式不正确',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
phoneReg: true,
})
}
}
smsCodeFocus() {
this.setState({
smsCodeFocus: true,
smsCodeReg: true,
})
}
smsCodeBlur() {
this.setState({
smsCodeFocus: false,
})
if (!this.state.smsCode) {
this.setState({
ErrorText: '请输入验证码',
smsCodeReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_Number.test(this.state.smsCode)) {
this.setState({
ErrorText: '验证码格式不正确',
smsCodeReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
smsCodeReg: true,
})
}
}
doctorPasswordFocus() {
this.setState({
doctorPasswordFocus: true,
doctorPasswordReg: true,
})
}
doctorPasswordBlur() {
this.setState({
doctorPasswordFocus: false,
})
if (!this.state.doctorPassword) {
this.setState({
ErrorText: '请输入密码',
doctorPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_PassWord.test(this.state.doctorPassword)) {
this.setState({
ErrorText: '密码为6-10个字符(数字+字母)',
doctorPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
doctorPasswordReg: true,
})
}
}
confirmPasswordFocus() {
this.setState({
confirmPasswordFocus: true,
confirmPasswordReg: true,
})
}
confirmPasswordBlur() {
this.setState({
confirmPasswordFocus: false,
})
if (!this.state.confirmPassword) {
this.setState({
ErrorText: '请再次输入密码',
confirmPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_PassWord.test(this.state.confirmPassword)) {
this.setState({
ErrorText: '密码为6-10个字符(数字+字母)',
confirmPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (this.state.confirmPassword != this.state.doctorPassword) {
this.setState({
ErrorText: '两次密码不一致',
confirmPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
confirmPasswordReg: true,
})
}
}
getRegisterSms() {
if (!this.state.doctorPhone) {
this.setState({
ErrorText: '请输入手机号',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
this.setState({
ErrorText: '手机号码格式不正确',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
phoneReg: true,
isLoading: true,
ErrorText: '正在获取验证码...',
ErrorPrompt: false,
ErrorImg: require('../images/loading.png'),
})
fetch(requestUrl.registerSms + '?registerPhone=' + this.state.doctorPhone, {
method: 'GET',
headers: {
},
})
.then((response) => response.json())
.then((responseData) => {
console.log('responseData', responseData);
if (responseData.code == 20000) {
this.setState({
isLoading: false,
ErrorText: '验证码发送成功',
ErrorPrompt: false,
ErrorImg: require('../images/succeed.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (responseData.code == 50008) {
this.setState({
isLoading: false,
ErrorText: '手机号码已注册过',
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (responseData.code == 50000) {
this.setState({
isLoading: false,
ErrorText: '系统异常',
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
}
})
.catch((error) => {
console.log('error', error);
});
}
}
signUp() {
if (!this.state.doctorPhone) {
this.setState({
ErrorText: '请输入手机号',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
this.setState({
ErrorText: '手机号码格式不正确',
phoneReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!this.state.smsCode) {
this.setState({
ErrorText: '请输入验证码',
smsCodeReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_Number.test(this.state.smsCode)) {
this.setState({
ErrorText: '验证码格式不正确',
smsCodeReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!this.state.doctorPassword) {
this.setState({
ErrorText: '请输入密码',
doctorPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_PassWord.test(this.state.doctorPassword)) {
this.setState({
ErrorText: '密码为6-10个字符(数字+字母)',
doctorPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!this.state.confirmPassword) {
this.setState({
ErrorText: '请再次输入密码',
confirmPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (!regExp.Reg_PassWord.test(this.state.confirmPassword)) {
this.setState({
ErrorText: '密码为6-10个字符(数字+字母)',
confirmPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else if (this.state.confirmPassword != this.state.doctorPassword) {
this.setState({
ErrorText: '两次密码不一致',
confirmPasswordReg: false,
ErrorPrompt: false,
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
isLoading: true,
ErrorText: '注册中...',
ErrorPrompt: false,
ErrorImg: require('../images/loading.png'),
})
let formData = new FormData();
formData.append("doctorPhone", this.state.doctorPhone);
formData.append("doctorPassword", this.state.doctorPassword);
formData.append("smsCode", this.state.smsCode);
fetch(requestUrl.register, {
method: 'POST',
headers: {
},
body: formData,
})
.then((response) => response.json())
.then((responseData) => {
console.log('responseData', responseData);
if (responseData.code == 20000) {
this.setState({
isLoading: false,
ErrorPrompt: false,
ErrorText: '注册成功',
ErrorImg: require('../images/succeed.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
this.props.navigation.navigate("SignIn");
}, global.TimingCount)
} else if (responseData.code == 50006) {
this.setState({
isLoading: false,
ErrorPrompt: false,
smsCodeReg: false,
ErrorText: '验证码错误',
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
} else {
this.setState({
isLoading: false,
ErrorPrompt: false,
ErrorText: '注册失败',
ErrorImg: require('../images/error.png'),
})
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.setState({
ErrorPrompt: true,
})
}, global.TimingCount)
}
})
.catch((error) => {
console.log('error', error);
});
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: global.Colors.colorfff,
paddingBottom: global.TabBar,
paddingTop: global.StatusBarHeight,
},
goBackBtn: {
paddingLeft: global.px2dp(24),
paddingTop: global.px2dp(13),
paddingRight: global.px2dp(24),
paddingBottom: global.px2dp(13),
},
content: {
paddingRight: global.px2dp(24),
paddingLeft: global.px2dp(24),
},
textLogo: {
width: global.px2dp(131),
height: global.px2dp(31),
marginTop: global.px2dp(45),
marginBottom: global.px2dp(33),
},
btnBox: {
marginTop: global.px2dp(46),
},
isolationLine: {
width: global.Pixel,
height: global.px2dp(15),
backgroundColor: global.Colors.text999,
},
inputItem: {
borderBottomWidth: global.Pixel,
borderBottomColor: global.Colors.colorccc,
},
inputBox: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
textInput: {
flex: 1,
fontSize: global.px2dp(16),
color: global.Colors.text333,
height: global.px2dp(42),
fontWeight: "500",
},
inputTitle: {
paddingTop: global.px2dp(5),
fontSize: global.px2dp(14),
color: global.Colors.text999,
},
clearBtn: {
paddingLeft: global.px2dp(10),
paddingRight: global.px2dp(10),
},
passwordItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
passwordBox: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
eyesBtn: {
paddingRight: global.px2dp(14),
paddingLeft: global.px2dp(14),
},
forgetBtn: {
paddingRight: global.px2dp(10),
paddingLeft: global.px2dp(10),
},
forgetText: {
fontSize: global.px2dp(15),
color: global.Colors.color,
},
doctorPhoneItemFocus: {
flexDirection: 'column',
borderBottomColor: global.Colors.color3b7dc8,
},
passwordItemFocus: {
flexDirection: 'column',
alignItems: 'flex-start',
borderBottomColor: global.Colors.color3b7dc8,
},
errorStyle: {
borderBottomColor: global.Colors.colorff0000,
}
});