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 {
const {value} = this.state;
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modal}>
<View style={styles.header}>
<View style={styles.title}>
<View style={styles.left}>
<View style={styles.modalBackgroundStyle}>
<View style={styles.modal}>
<View style={styles.header}>
<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
source={require('../assets/logo.png')}
style={styles.img}
source={require('../assets/logo2.png')}
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 style={styles.image}>
<Image
source={require('../assets/logo2.png')}
style={styles.logo}
/>
</View>
</View>
<View style={styles.container}>
<Text style={{color: 'red', fontSize: 45, marginBottom: 10}}>
请输入接收验证码的手机号
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<TextInput
<View style={styles.container}>
<Text style={{color: 'red', fontSize: 45, marginBottom: 10}}>
请输入接收验证码的手机号
</Text>
<View
style={{
fontSize: 35,
width: '80%',
textAlign: 'center',
padding: 30,
}}
placeholder="安全输入不留痕迹"
placeholderTextColor="lightgray"
editable={false}
value={value}
/>
<Touch
onPress={() => this.setState({value: ''})}
feddback={false}>
<Icon name="md-close" color={'#DCDCDC'} size={50} />
</Touch>
</View>
</View>
<View style={styles.footer}>
<View style={styles.footerLeft}>
{this.getKeyboard()}
<View style={styles.keyRowBottom}>
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<TextInput
style={{
fontSize: 35,
width: '80%',
textAlign: 'center',
padding: 30,
}}
placeholder="安全输入不留痕迹"
placeholderTextColor="lightgray"
editable={false}
value={value}
/>
<Touch
style={styles.keyBottomTouch}
onPress={() => this.pressKey(0)}>
<Text style={styles.keyUnit}>0</Text>
onPress={() => this.setState({value: ''})}
feddback={false}>
<Icon name="md-close" color={'#DCDCDC'} size={50} />
</Touch>
</View>
</View>
<View style={styles.footerRight}>
<View style={styles.keyRowClose}>
<Touch
style={styles.keyTouchClose}
onPress={() => this.pressKey(11)}>
<MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
/>
</Touch>
<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 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>
) : (
<View style={styles.footerRight}>
<View style={styles.keyRowClose}>
<Touch
style={styles.keyTouchOnSure}
onPress={() => this.pressKey(12)}>
<Text style={styles.keyUnitClose}>确定</Text>
style={styles.keyTouchClose}
onPress={() => this.pressKey(11)}>
<MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
/>
</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>
......@@ -167,6 +169,10 @@ class PhoneModal extends Component {
}
const styles = {
modalBackgroundStyle: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modal: {
height: '86%',
width: '90%',
......
src/components/VerifyCodeModal.js
......@@ -67,81 +67,83 @@ class VerifyCodeModal extends Component {
const {value} = this.state;
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modal}>
<View style={styles.header}>
<View style={styles.title}>
<View style={styles.left}>
<View style={styles.modalBackgroundStyle}>
<View style={styles.modal}>
<View style={styles.header}>
<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
source={require('../assets/logo.png')}
style={styles.img}
source={require('../assets/logo2.png')}
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 style={styles.image}>
<Image
source={require('../assets/logo2.png')}
style={styles.logo}
/>
</View>
</View>
<View style={styles.container}>
<Text style={styles.tips}>请输入验证码</Text>
<View style={styles.codeView}>
<Text style={styles.code}>
{value && value.length >= 1 ? value.substr(0, 1) : ''}
</Text>
<Text style={styles.code}>
{value && value.length >= 2 ? value.substr(1, 1) : ''}
</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 style={styles.container}>
<Text style={styles.tips}>请输入验证码</Text>
<View style={styles.codeView}>
<Text style={styles.code}>
{value && value.length >= 1 ? value.substr(0, 1) : ''}
</Text>
<Text style={styles.code}>
{value && value.length >= 2 ? value.substr(1, 1) : ''}
</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.footerRight}>
<View style={styles.keyRowClose}>
<Touch
style={styles.keyTouchClose}
onPress={() => this.pressKey(11)}>
<MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
/>
</Touch>
<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 style={styles.keyRowSure}>
{value.length < 4 ? (
<View style={styles.keyTouchSure}>
<Text style={styles.keyUnitClose}>确定</Text>
</View>
) : (
<View style={styles.footerRight}>
<View style={styles.keyRowClose}>
<Touch
style={styles.keyTouchOnSure}
onPress={() => this.pressKey(12)}>
<Text style={styles.keyUnitClose}>确定</Text>
style={styles.keyTouchClose}
onPress={() => this.pressKey(11)}>
<MIcon
style={styles.keyUnit}
name="backspace-outline"
size={60}
/>
</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>
......@@ -152,6 +154,10 @@ class VerifyCodeModal extends Component {
}
const styles = {
modalBackgroundStyle: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modal: {
height: '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