mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 08c5027899e95d38c1e0b31ea1eec0bad060ab4a 2 parents 31a13d92 6bc32211

Merge branch '5.6.0' of http://git.yoho.cn/mobile/YH_RNComponent into 5.6.0

Inline Side-by-side
Showing 3 changed files with 189 additions and 22 deletions
'use strict';
import React, {Component} from 'react'
import {
StyleSheet,
View,
Text,
Dimensions,
ActivityIndicator,
Platform,
} from 'react-native';
import TimerMixin from 'react-timer-mixin';
export default class Toast extends Component {
static propTypes = {
isVisible: React.PropTypes.bool.isRequired,
size: React.PropTypes.string,
color: React.PropTypes.string,
overlayWidth: React.PropTypes.number,
overlayHeight: React.PropTypes.number,
overlayColor: React.PropTypes.string,
text: React.PropTypes.string,
textColor: React.PropTypes.string,
textFontSize: React.PropTypes.number,
};
static defaultProps = {
isDismissible: false,
overlayWidth: 100,
overlayHeight: 50,
overlayColor: 'rgba(0,0,0,0.6)',
size: (Platform.OS === 'ios') ? 'large' : 'small',
color: (Platform.OS === 'ios') ? 'white' : 'gray',
text: '...',
textColor: '#eeeeee',
textFontSize: 14,
};
constructor(props) {
super(props);
// this.show = this.show.bind(this);
this.state = {
isVisible: this.props.isVisible,
};
}
// show(){
// this.setState({isVisible: true,});
// this.timer = TimerMixin.setTimeout(() => {
// this.setState({
// isVisible: false,
// });
// }, 3000);
// }
componentWillUnmount() {
this.timer && TimerMixin.clearTimeout(this.timer);
}
render() {
if (!this.state.isVisible) {
return null;
}
else{
this.timer = TimerMixin.setTimeout(() => {
this.setState({
isVisible: false,
});
}, 3000);
}
let customStyles = StyleSheet.create({
overlay: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
backgroundColor: this.props.overlayColor,
width: this.props.overlayWidth,
height: this.props.overlayHeight,
},
text: {
color: this.props.textColor,
fontSize: this.props.textFontSize,
},
});
return (
<View style={styles.container}>
<View style={customStyles.overlay}>
<Text style={customStyles.text}>{this.props.text}</Text>
</View>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;
const styles = StyleSheet.create({
container: {
position: 'absolute',
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
top: -navbarHeight,
bottom: 0,
left: 0,
right: 0,
},
});
... ...
... ... @@ -11,7 +11,7 @@ import ReactNative, {
} from 'react-native';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import Toast from '../../../common/components/Toast';
export default class BankCardDetail extends React.Component {
... ... @@ -25,8 +25,8 @@ export default class BankCardDetail extends React.Component {
let cardNo = "4561";
let userName = "**聪";
let mobile = "*****5865";
let isMaster = false;
let cardDesc = isMaster ? "主卡，用于支付验证和还款验证。" : "副卡，仅用于还款验证。";
let cardTip = isMaster ? "如果您更换银行预留手机号，请先新增其他还款银行卡，并将新增银行卡切换为主卡。然后解除绑定此卡，重新绑定即可。"
: "如果您更换银行预留手机号，请先将银行卡解除绑定，再次重新绑定即可。";
... ... @@ -42,30 +42,35 @@ export default class BankCardDetail extends React.Component {
<Text style={styles.cardInfoLabel}>持卡人</Text>
<Text style={styles.cardInfoData}>{userName}</Text>
</View>
<View style={styles.cardInfoLine}></View>
<View style={styles.cardInfoContainer}>
<Text style={styles.cardInfoLabel}>预留手机号</Text>
<Text style={styles.cardInfoData}>{mobile}</Text>
</View>
<View style={styles.cardInfoLine}></View>
<View style={styles.cardInfoContainer}>
<Text style={styles.cardInfoLabel}>分期银行</Text>
<Text style={styles.cardInfoData}>{cardDesc}</Text>
</View>
<View style={styles.cardTipContainer}>
<Text>{cardTip}</Text>
<Text style={styles.cardTip}>{cardTip}</Text>
{
isMaster ? null :
<View style={styles.buttonContainer}>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onPressComplete && this.props.onPressComplete();}}>
this.props.onPressReleaseCard && this.props.onPressReleaseCard();}}>
<Text style={styles.releaseButton}>解除绑定</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onPressComplete && this.props.onPressComplete();}}>
this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
<Text style={styles.changeButton}>切换为主卡</Text>
</TouchableOpacity>
</View>
}
</View>
<Toast text="解绑成功" isVisible={false} />
</View>
);
}
... ... @@ -77,6 +82,7 @@ const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ffffff",
},
cardDetailContainer:{
... ... @@ -116,35 +122,59 @@ let styles = StyleSheet.create({
cardInfoContainer:{
width: width,
height: 60,
height: 44 * DEVICE_WIDTH_RATIO,
backgroundColor: "#ffffff",
flexDirection: 'row',
alignItems: 'center',
},
cardInfoLabel:{
width: 60,
width: 125 * DEVICE_WIDTH_RATIO,
paddingLeft: 15 * DEVICE_WIDTH_RATIO,
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
cardInfoData:{
flex: 1,
width: 150 * DEVICE_WIDTH_RATIO,
fontSize: 13 * DEVICE_WIDTH_RATIO,
},
cardInfoLine:{
width: width - 15 * DEVICE_WIDTH_RATIO,
height: 0.5 * DEVICE_WIDTH_RATIO,
marginLeft: 15 * DEVICE_WIDTH_RATIO,
backgroundColor: "#b4b4b4",
},
cardTipContainer:{
flex: 1,
backgroundColor: "#cccccc",
backgroundColor: "#f0f0f0",
},
cardTip: {
width: width,
paddingLeft: 15 * DEVICE_WIDTH_RATIO,
paddingRight: 10 * DEVICE_WIDTH_RATIO,
paddingTop: 10 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
},
buttonContainer:{
width: width,
height: 100,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
releaseButton:{
fontSize:16,
paddingLeft:18,
paddingRight:18,
paddingTop:8,
paddingBottom:8,
color: '#777777',
width: 130 * DEVICE_WIDTH_RATIO,
height: 44 * DEVICE_WIDTH_RATIO,
fontSize:14 * DEVICE_WIDTH_RATIO,
paddingTop:12 * DEVICE_WIDTH_RATIO,
marginRight: 8 * DEVICE_WIDTH_RATIO,
color: '#000000',
textAlign: 'center',
borderColor:'#444444',
borderWidth:2,
... ... @@ -152,16 +182,17 @@ let styles = StyleSheet.create({
},
changeButton:{
fontSize:16,
paddingLeft:18,
paddingRight:18,
paddingTop:8,
paddingBottom:8,
color: '#777777',
width: 130 * DEVICE_WIDTH_RATIO,
height: 44 * DEVICE_WIDTH_RATIO,
fontSize:14 * DEVICE_WIDTH_RATIO,
paddingTop:12 * DEVICE_WIDTH_RATIO,
marginLeft: 8 * DEVICE_WIDTH_RATIO,
color: '#ffffff',
textAlign: 'center',
borderColor:'#444444',
borderWidth:2,
borderRadius: 6,
backgroundColor:'#444444',
},
... ...
... ... @@ -12,6 +12,7 @@ import {
Text,
ListView,
TouchableOpacity,
Alert,
} from 'react-native'
import {bindActionCreators} from 'redux';
... ... @@ -46,12 +47,30 @@ class InstallmentMyCardDetailContainer extends Component {
constructor(props) {
super(props);
this.onPressChangeCard = this.onPressChangeCard.bind(this);
this.onPressReleaseCard = this.onPressReleaseCard.bind(this);
}
componentDidMount() {
// this.props.actions.getBankCards();
}
onPressReleaseCard(){
Alert.alert(
'',
"alertMessage",
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed!')},
{text: 'OK', onPress: () => console.log('OK Pressed!')},
]
);
}
onPressChangeCard(){
}
render() {
let cardData = {};
... ... @@ -60,7 +79,8 @@ class InstallmentMyCardDetailContainer extends Component {
<BankCardDetail
style={styles.container}
cardData={cardData}
onPressChangeCard={this.onPressChangeCard}
onPressReleaseCard={this.onPressReleaseCard}
/>
);
}
... ...