Skip to content

B
bh_face_counter
Commit 0acec087 by 修福龙
Options

增加了输入手机号以及验证码弹窗的背景色

parent 6094674b
Showing with 156 additions and 144 deletions
src/components/PhoneModal.js
...@@ -67,96 +67,98 @@ class PhoneModal extends Component { ...@@ -67,96 +67,98 @@ class PhoneModal extends Component {
const {value} = this.state; const {value} = this.state;
return ( return (
<Modal styles={mStyles} {...props}> <Modal styles={mStyles} {...props}>
<View style={styles.modal}> <View style={styles.modalBackgroundStyle}>
<View style={styles.header}> <View style={styles.modal}>
<View style={styles.title}> <View style={styles.header}>
<View style={styles.left}> <View style={styles.title}>
<View style={styles.left}>
<Image
source={require('../assets/logo.png')}
style={styles.img}
/>
<Text style={styles.text}>安全验证手机号</Text>
</View>
<View style={styles.right}>
<Touch onPress={() => onClose()}>
<Icon name="md-close" color={'#FFFFFF'} size={50} />
</Touch>
</View>
</View>
<View style={styles.image}>
<Image <Image
source={require('../assets/logo.png')} source={require('../assets/logo2.png')}
style={styles.img} style={styles.logo}
/> />
<Text style={styles.text}>安全验证手机号</Text>
</View>
<View style={styles.right}>
<Touch onPress={() => onClose()}>
<Icon name="md-close" color={'#FFFFFF'} size={50} />
</Touch>
</View> </View>
</View> </View>
<View style={styles.image}> <View style={styles.container}>
<Image <Text style={{color: 'red', fontSize: 45, marginBottom: 10}}>
source={require('../assets/logo2.png')} 请输入接收验证码的手机号
style={styles.logo} </Text>
/> <View
</View>
</View>
<View style={styles.container}>
<Text style={{color: 'red', fontSize: 45, marginBottom: 10}}>
请输入接收验证码的手机号
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<TextInput
style={{ style={{
fontSize: 35, flexDirection: 'row',
width: '80%', justifyContent: 'center',
textAlign: 'center', alignItems: 'center',
padding: 30, }}>
}} <TextInput
placeholder="安全输入不留痕迹" style={{
placeholderTextColor="lightgray" fontSize: 35,
editable={false} width: '80%',
value={value} textAlign: 'center',
/> padding: 30,
<Touch }}
onPress={() => this.setState({value: ''})} placeholder="安全输入不留痕迹"
feddback={false}> placeholderTextColor="lightgray"
<Icon name="md-close" color={'#DCDCDC'} size={50} /> editable={false}
</Touch> value={value}
</View> />
</View>
<View style={styles.footer}>
<View style={styles.footerLeft}>
{this.getKeyboard()}
<View style={styles.keyRowBottom}>
<Touch <Touch
style={styles.keyBottomTouch} onPress={() => this.setState({value: ''})}
onPress={() => this.pressKey(0)}> feddback={false}>
<Text style={styles.keyUnit}>0</Text> <Icon name="md-close" color={'#DCDCDC'} size={50} />
</Touch> </Touch>
</View> </View>
</View> </View>
<View style={styles.footerRight}> <View style={styles.footer}>
<View style={styles.keyRowClose}> <View style={styles.footerLeft}>
<Touch {this.getKeyboard()}
style={styles.keyTouchClose} <View style={styles.keyRowBottom}>
onPress={() => this.pressKey(11)}> <Touch
<MIcon style={styles.keyBottomTouch}
style={styles.keyUnit} onPress={() => this.pressKey(0)}>
name="backspace-outline" <Text style={styles.keyUnit}>0</Text>
size={60} </Touch>
/> </View>
</Touch>
</View> </View>
<View style={styles.keyRowSure}> <View style={styles.footerRight}>
{/* <Touch style={styles.keyTouchSure} onPress={() => this.pressKey(12)}>*/} <View style={styles.keyRowClose}>
{/* <Text style={styles.keyUnitClose}>确定</Text>*/}
{/* </Touch>*/}
{value.length < 1 ? (
<View style={styles.keyTouchSure}>
<Text style={styles.keyUnitClose}>确定</Text>
</View>
) : (
<Touch <Touch
style={styles.keyTouchOnSure} style={styles.keyTouchClose}
onPress={() => this.pressKey(12)}> onPress={() => this.pressKey(11)}>
<Text style={styles.keyUnitClose}>确定</Text> <MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
/>
</Touch> </Touch>
)} </View>
<View style={styles.keyRowSure}>
{/* <Touch style={styles.keyTouchSure} onPress={() => this.pressKey(12)}>*/}
{/* <Text style={styles.keyUnitClose}>确定</Text>*/}
{/* </Touch>*/}
{value.length < 1 ? (
<View style={styles.keyTouchSure}>
<Text style={styles.keyUnitClose}>确定</Text>
</View>
) : (
<Touch
style={styles.keyTouchOnSure}
onPress={() => this.pressKey(12)}>
<Text style={styles.keyUnitClose}>确定</Text>
</Touch>
)}
</View>
</View> </View>
</View> </View>
</View> </View>
...@@ -167,6 +169,10 @@ class PhoneModal extends Component { ...@@ -167,6 +169,10 @@ class PhoneModal extends Component {
} }
const styles = { const styles = {
modalBackgroundStyle: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modal: { modal: {
height: '86%', height: '86%',
width: '90%', width: '90%',
......
src/components/VerifyCodeModal.js
...@@ -67,81 +67,83 @@ class VerifyCodeModal extends Component { ...@@ -67,81 +67,83 @@ class VerifyCodeModal extends Component {
const {value} = this.state; const {value} = this.state;
return ( return (
<Modal styles={mStyles} {...props}> <Modal styles={mStyles} {...props}>
<View style={styles.modal}> <View style={styles.modalBackgroundStyle}>
<View style={styles.header}> <View style={styles.modal}>
<View style={styles.title}> <View style={styles.header}>
<View style={styles.left}> <View style={styles.title}>
<View style={styles.left}>
<Image
source={require('../assets/logo.png')}
style={styles.img}
/>
<Text style={styles.text}>安全验证手机号</Text>
</View>
<View style={styles.right}>
<Touch onPress={() => onClose()}>
<Icon name="md-close" color={'#FFFFFF'} size={50} />
</Touch>
</View>
</View>
<View style={styles.image}>
<Image <Image
source={require('../assets/logo.png')} source={require('../assets/logo2.png')}
style={styles.img} style={styles.logo}
/> />
<Text style={styles.text}>安全验证手机号</Text>
</View>
<View style={styles.right}>
<Touch onPress={() => onClose()}>
<Icon name="md-close" color={'#FFFFFF'} size={50} />
</Touch>
</View> </View>
</View> </View>
<View style={styles.image}> <View style={styles.container}>
<Image <Text style={styles.tips}>请输入验证码</Text>
source={require('../assets/logo2.png')} <View style={styles.codeView}>
style={styles.logo} <Text style={styles.code}>
/> {value && value.length >= 1 ? value.substr(0, 1) : ''}
</View> </Text>
</View> <Text style={styles.code}>
<View style={styles.container}> {value && value.length >= 2 ? value.substr(1, 1) : ''}
<Text style={styles.tips}>请输入验证码</Text> </Text>
<View style={styles.codeView}> <Text style={styles.code}>
<Text style={styles.code}> {value && value.length >= 3 ? value.substr(2, 1) : ''}
{value && value.length >= 1 ? value.substr(0, 1) : ''} </Text>
</Text> <Text style={styles.code}>
<Text style={styles.code}> {value && value.length >= 4 ? value.substr(3, 1) : ''}
{value && value.length >= 2 ? value.substr(1, 1) : ''} </Text>
</Text>
<Text style={styles.code}>
{value && value.length >= 3 ? value.substr(2, 1) : ''}
</Text>
<Text style={styles.code}>
{value && value.length >= 4 ? value.substr(3, 1) : ''}
</Text>
</View>
</View>
<View style={styles.footer}>
<View style={styles.footerLeft}>
{this.getKeyboard()}
<View style={styles.keyRowBottom}>
<Touch
style={styles.keyBottomTouch}
onPress={() => this.pressKey(0)}>
<Text style={styles.keyUnit}>0</Text>
</Touch>
</View> </View>
</View> </View>
<View style={styles.footerRight}> <View style={styles.footer}>
<View style={styles.keyRowClose}> <View style={styles.footerLeft}>
<Touch {this.getKeyboard()}
style={styles.keyTouchClose} <View style={styles.keyRowBottom}>
onPress={() => this.pressKey(11)}> <Touch
<MIcon style={styles.keyBottomTouch}
style={styles.keyUnit} onPress={() => this.pressKey(0)}>
name="backspace-outline" <Text style={styles.keyUnit}>0</Text>
size={60} </Touch>
/> </View>
</Touch>
</View> </View>
<View style={styles.keyRowSure}> <View style={styles.footerRight}>
{value.length < 4 ? ( <View style={styles.keyRowClose}>
<View style={styles.keyTouchSure}>
<Text style={styles.keyUnitClose}>确定</Text>
</View>
) : (
<Touch <Touch
style={styles.keyTouchOnSure} style={styles.keyTouchClose}
onPress={() => this.pressKey(12)}> onPress={() => this.pressKey(11)}>
<Text style={styles.keyUnitClose}>确定</Text> <MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
/>
</Touch> </Touch>
)} </View>
<View style={styles.keyRowSure}>
{value.length < 4 ? (
<View style={styles.keyTouchSure}>
<Text style={styles.keyUnitClose}>确定</Text>
</View>
) : (
<Touch
style={styles.keyTouchOnSure}
onPress={() => this.pressKey(12)}>
<Text style={styles.keyUnitClose}>确定</Text>
</Touch>
)}
</View>
</View> </View>
</View> </View>
</View> </View>
...@@ -152,6 +154,10 @@ class VerifyCodeModal extends Component { ...@@ -152,6 +154,10 @@ class VerifyCodeModal extends Component {
} }
const styles = { const styles = {
modalBackgroundStyle: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modal: { modal: {
height: '90%', height: '90%',
width: '90%', width: '90%',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment