...
|
...
|
@@ -9,7 +9,11 @@ |
|
|
import React, {Component} from 'react';
|
|
|
import ReactNative, {
|
|
|
View,
|
|
|
StyleSheet
|
|
|
StyleSheet,
|
|
|
Image,
|
|
|
Text,
|
|
|
TouchableOpacity,
|
|
|
Modal
|
|
|
} from 'react-native';
|
|
|
|
|
|
|
...
|
...
|
@@ -17,12 +21,95 @@ export default class UserLogout extends Component { |
|
|
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {readedClause: false}
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
|
<View style={styles.container}>
|
|
|
<View style = {styles.topLogoContainer}>
|
|
|
<Image
|
|
|
style={styles.icon}
|
|
|
source={require('../../images/icon.png')}
|
|
|
/>
|
|
|
<Text style={styles.logoutText}>申请注销有货账号</Text>
|
|
|
</View>
|
|
|
<View style={styles.textContainer}>
|
|
|
<Text style={[styles.text,styles.textTitle]}>注销您的有货账户后您将:</Text>
|
|
|
<Text style={styles.text}>1.账户信息、会员权益将被清除,且无法恢复。</Text>
|
|
|
<Text style={styles.text}>2.账户内有货币、优惠券、礼品卡等将被清除且无法恢复。</Text>
|
|
|
<Text style={styles.text}>3.交易记录将被清除。</Text>
|
|
|
<Text style={styles.text}>4.无法使用该账户登录授权或绑定关系的app和网站。</Text>
|
|
|
</View>
|
|
|
<View style={styles.clauseContainer}>
|
|
|
<TouchableOpacity
|
|
|
activeOpacity={1.0}
|
|
|
style={{flexDirection: 'row'}}
|
|
|
onPress={() => {
|
|
|
this.setState(previousState => {
|
|
|
return { readedClause: !previousState.readedClause };
|
|
|
});
|
|
|
}}>
|
|
|
<Image
|
|
|
style={styles.check}
|
|
|
source={this.state.readedClause == false ? require('../../images/weixuan.png'): require('../../images/xuanze.png')}
|
|
|
/>
|
|
|
<Text>我已阅读并同意以下协议</Text>
|
|
|
</TouchableOpacity>
|
|
|
<TouchableOpacity
|
|
|
activeOpacity={1.0}
|
|
|
onPress={() => {
|
|
|
this.props.onPressLogoutClause && this.props.onPressLogoutClause();
|
|
|
}}>
|
|
|
<Text style={{color:'red'}}>《有货注销条款》</Text>
|
|
|
</TouchableOpacity>
|
|
|
</View>
|
|
|
<View style={[styles.confirmBtn,{backgroundColor:this.state.readedClause?'#444444':'#b0b0b0'}]}>
|
|
|
<TouchableOpacity
|
|
|
onPress={() => {
|
|
|
if(this.state.readedClause) {
|
|
|
this.props.updateLogoutModalState && this.props.updateLogoutModalState(true);
|
|
|
}
|
|
|
}}>
|
|
|
<Text style={styles.confirmText}>注销帐号</Text>
|
|
|
</TouchableOpacity>
|
|
|
</View>
|
|
|
<Modal
|
|
|
animationType={"fade"}
|
|
|
transparent={true}
|
|
|
visible={this.props.showConfirmLogoutModal}
|
|
|
>
|
|
|
<View style={styles.modalContainer}>
|
|
|
<View style={styles.modalView}>
|
|
|
<View style={styles.confirmTitleContainer}>
|
|
|
<View style={{marginTop:40,marginBottom:29}}>
|
|
|
<Text style={styles.confirmTitle}>确认注销帐号吗?</Text>
|
|
|
<Text style={styles.confirmTitle}>注销帐号将无法恢复!</Text>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View style={{width:'100%',height:0.5,backgroundColor:'#e0e0e0'}}/>
|
|
|
<View style={styles.confirmBtnContainer}>
|
|
|
<TouchableOpacity
|
|
|
style={{width:'49%',alignItems:'center',height:45.5}}
|
|
|
onPress={() => {
|
|
|
this.props.updateLogoutModalState && this.props.updateLogoutModalState(false);
|
|
|
}}>
|
|
|
<Text style={{lineHeight:44,fontSize:17,color:'#444444',letterSpacing:-0.41}}>放弃</Text>
|
|
|
</TouchableOpacity>
|
|
|
<View style={{width:0.5,height:45,backgroundColor:'#e0e0e0'}}/>
|
|
|
<TouchableOpacity
|
|
|
style={{width:'49%',alignItems:'center',height:45.5}}
|
|
|
onPress={() => {
|
|
|
this.props.confirmLogoutAction && this.props.confirmLogoutAction();
|
|
|
}}>
|
|
|
<Text style={{lineHeight:44,fontSize:17,color:'#d0021b',letterSpacing:-0.41}}>确定</Text>
|
|
|
</TouchableOpacity>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</Modal>
|
|
|
|
|
|
</View>
|
|
|
);
|
|
|
}
|
...
|
...
|
@@ -31,6 +118,92 @@ export default class UserLogout extends Component { |
|
|
let styles = StyleSheet.create({
|
|
|
container: {
|
|
|
flex: 1,
|
|
|
backgroundColor: '#f0f0f0',
|
|
|
},
|
|
|
topLogoContainer:{
|
|
|
height: 138,
|
|
|
alignItems: 'center',
|
|
|
},
|
|
|
icon: {
|
|
|
width: 54,
|
|
|
height: 54,
|
|
|
marginTop: 20,
|
|
|
marginBottom: 14,
|
|
|
},
|
|
|
logoutText: {
|
|
|
fontSize: 17,
|
|
|
color: '#444444'
|
|
|
},
|
|
|
textContainer:{
|
|
|
backgroundColor: 'white',
|
|
|
paddingTop: 9,
|
|
|
paddingBottom: 9,
|
|
|
},
|
|
|
textTitle: {
|
|
|
fontWeight: 'bold',
|
|
|
},
|
|
|
text: {
|
|
|
fontSize: 15,
|
|
|
color: '#444444',
|
|
|
marginTop: 11,
|
|
|
marginBottom:11,
|
|
|
marginLeft:16,
|
|
|
marginRight:18
|
|
|
},
|
|
|
clauseContainer: {
|
|
|
flexDirection: 'row',
|
|
|
justifyContent: 'center',
|
|
|
marginTop: 12,
|
|
|
marginBottom: 21
|
|
|
},
|
|
|
check: {
|
|
|
width: 14,
|
|
|
height: 14,
|
|
|
marginRight: 5.5,
|
|
|
},
|
|
|
confirmBtn: {
|
|
|
marginLeft: 15,
|
|
|
marginRight: 15,
|
|
|
height: 44,
|
|
|
borderRadius: 5,
|
|
|
alignItems: 'center',
|
|
|
},
|
|
|
confirmText: {
|
|
|
textAlign: 'center',
|
|
|
lineHeight: 43,
|
|
|
color: 'white',
|
|
|
fontSize: 16
|
|
|
},
|
|
|
modalContainer: {
|
|
|
flex: 1,
|
|
|
justifyContent: 'center',
|
|
|
backgroundColor:'rgba(0, 0, 0, 0.4)',
|
|
|
marginTop: 64
|
|
|
},
|
|
|
modalView: {
|
|
|
marginTop: -64,
|
|
|
borderRadius: 10,
|
|
|
alignItems: 'center',
|
|
|
backgroundColor:'#ffffff',
|
|
|
marginLeft: 53,
|
|
|
marginRight:53,
|
|
|
|
|
|
},
|
|
|
confirmBtnContainer: {
|
|
|
width: '100%',
|
|
|
height: 45.5,
|
|
|
flexDirection: 'row',
|
|
|
justifyContent: 'space-between',
|
|
|
},
|
|
|
confirmTitleContainer: {
|
|
|
height:118,
|
|
|
alignItems:'center'
|
|
|
},
|
|
|
confirmTitle: {
|
|
|
color: '#444444',
|
|
|
fontSize: 14,
|
|
|
lineHeight: 24.5,
|
|
|
textAlign: 'center',
|
|
|
letterSpacing: -0.09,
|
|
|
}
|
|
|
}); |
...
|
...
|
|