mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit feef502b43a330fc6e35d7a2d210f90f6e8b788a 1 parent 34e98c61

增加银行卡详情页面。review by 张丽霞。

Inline Side-by-side
Showing 3 changed files with 247 additions and 2 deletions
... ... @@ -29,6 +29,7 @@ import RepayDetailContainer from './containers/RepayDetailContainer';
import RepayRecordListContainer from './containers/RepayRecordListContainer';
import InstallmentAccountContainer from './containers/InstallmentAccountContainer';
import InstallmentMyCardContainer from './containers/InstallmentMyCardContainer';
import InstallmentMyCardDetailContainer from './containers/InstallmentMyCardDetailContainer';
import {
... ... @@ -126,7 +127,7 @@ export default function native(platform) {
} else if (type == 'installMyCard') {
return (
<Provider store={store}>
<InstallmentMyCardContainer />
<InstallmentMyCardDetailContainer />
</Provider>
)
} else if (type == 'installMyCardDetail') {
... ... @@ -135,7 +136,7 @@ export default function native(platform) {
<InstallmentMyCardContainer />
</Provider>
)
}
}
}
});
... ...
'use strict';
import React from 'react';
import ReactNative, {
View,
Text,
Image,
StyleSheet,
Dimensions,
PixelRatio,
TouchableOpacity,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
export default class BankCardDetail extends React.Component {
constructor(props) {
super(props);
}
render() {
let bankName = "农业银行";
let cardNo = "4561";
let userName = "**聪";
let mobile = "*****5865";
let isMaster = false;
let cardDesc = isMaster ? "主卡，用于支付验证和还款验证。" : "副卡，仅用于还款验证。";
let cardTip = isMaster ? "如果您更换银行预留手机号，请先新增其他还款银行卡，并将新增银行卡切换为主卡。然后解除绑定此卡，重新绑定即可。"
: "如果您更换银行预留手机号，请先将银行卡解除绑定，再次重新绑定即可。";
return (
<View style={styles.container}>
<View style={styles.cardDetailContainer}>
<Image style={styles.cardDetailImg} source={require("../../image/bank/b-ABC.png")}/>
<Text style={styles.cardDetailName}>{bankName}</Text>
<Text style={styles.cardDetailNo}>储蓄卡 | 尾号{cardNo}</Text>
</View>
<View style={styles.cardInfoContainer}>
<Text style={styles.cardInfoLabel}>持卡人</Text>
<Text style={styles.cardInfoData}>{userName}</Text>
</View>
<View style={styles.cardInfoContainer}>
<Text style={styles.cardInfoLabel}>预留手机号</Text>
<Text style={styles.cardInfoData}>{mobile}</Text>
</View>
<View style={styles.cardInfoContainer}>
<Text style={styles.cardInfoLabel}>分期银行</Text>
<Text style={styles.cardInfoData}>{cardDesc}</Text>
</View>
<View style={styles.cardTipContainer}>
<Text>{cardTip}</Text>
{
isMaster ? null :
<View style={styles.buttonContainer}>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onPressComplete && this.props.onPressComplete();}}>
<Text style={styles.releaseButton}>解除绑定</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onPressComplete && this.props.onPressComplete();}}>
<Text style={styles.changeButton}>切换为主卡</Text>
</TouchableOpacity>
</View>
}
</View>
</View>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flex: 1,
},
cardDetailContainer:{
width: width,
height: 60 * DEVICE_WIDTH_RATIO,
backgroundColor: "#f8555b",
},
cardDetailImg:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
left: 15 * DEVICE_WIDTH_RATIO,
width: 40 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
},
cardDetailName:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
left: 65 * DEVICE_WIDTH_RATIO,
width: 150 * DEVICE_WIDTH_RATIO,
height: 20 * DEVICE_WIDTH_RATIO,
fontSize: 15 * DEVICE_WIDTH_RATIO,
color: "white",
fontWeight: 'bold',
},
cardDetailNo:{
position: 'absolute',
top: 30 * DEVICE_WIDTH_RATIO,
left: 65 * DEVICE_WIDTH_RATIO,
width: 150 * DEVICE_WIDTH_RATIO,
height: 30 * DEVICE_WIDTH_RATIO,
fontSize: 13 * DEVICE_WIDTH_RATIO,
color: "white",
},
cardInfoContainer:{
width: width,
height: 60,
backgroundColor: "#ffffff",
},
cardInfoLabel:{
width: 60,
},
cardInfoData:{
flex: 1,
},
cardTipContainer:{
flex: 1,
backgroundColor: "#cccccc",
},
buttonContainer:{
width: width,
height: 100,
},
releaseButton:{
fontSize:16,
paddingLeft:18,
paddingRight:18,
paddingTop:8,
paddingBottom:8,
color: '#777777',
textAlign: 'center',
borderColor:'#444444',
borderWidth:2,
borderRadius: 6,
},
changeButton:{
fontSize:16,
paddingLeft:18,
paddingRight:18,
paddingTop:8,
paddingBottom:8,
color: '#777777',
textAlign: 'center',
borderColor:'#444444',
borderWidth:2,
borderRadius: 6,
},
});
... ...
'use strict'
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
Platform,
View,
NativeModules,
InteractionManager,
NativeAppEventEmitter,
Text,
ListView,
TouchableOpacity,
} from 'react-native'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as cardListActions from '../reducers/bankCardList/cardListActions';
import ServerError from '../components/installment/ServerError';
import BankCardDetail from '../components/installment/BankCardDetail';
const actions = [
cardListActions,
];
function mapStateToProps(state) {
return {
...state
};
}
function mapDispatchToProps(dispatch) {
const creators = Map()
.merge(...actions)
.filter(value => typeof value === 'function')
.toObject();
return {
actions: bindActionCreators(creators, dispatch),
dispatch
};
}
class InstallmentMyCardDetailContainer extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// this.props.actions.getBankCards();
}
render() {
let cardData = {};
return (
<BankCardDetail
style={styles.container}
cardData={cardData}
/>
);
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default connect(mapStateToProps, mapDispatchToProps)(InstallmentMyCardDetailContainer);
... ...