增加添加银行卡UI界面。

@@ -30,6 +30,7 @@ import RepayRecordListContainer from './containers/RepayRecordListContainer';
 import InstallmentAccountContainer from './containers/InstallmentAccountContainer';
 import InstallmentMyCardContainer from './containers/InstallmentMyCardContainer';
 import InstallmentMyCardDetailContainer from './containers/InstallmentMyCardDetailContainer';
+import InstallmentMyCardAddContainer from './containers/InstallmentMyCardAddContainer';
 
 
 import {
@@ -127,13 +128,19 @@ export default function native(platform) {
 			} else if (type == 'installMyCard') {
 				return (
 					<Provider store={store}>
-						<InstallmentMyCardDetailContainer />
+						<InstallmentMyCardContainer />
 					</Provider>
 				)
 			} else if (type == 'installMyCardDetail') {
 				return (
 					<Provider store={store}>
-						<InstallmentMyCardContainer />
+						<InstallmentMyCardDetailContainer />
+					</Provider>
+				)
+			} else if (type == 'installMyCardAdd') {
+				return (
+					<Provider store={store}>
+						<InstallmentMyCardAddContainer />
 					</Provider>
 				)
 			}

+'use strict';
+import React from 'react';
+import ReactNative, {
+    View,
+    Text,
+    TextInput,
+    Image,
+    StyleSheet,
+    Dimensions,
+    PixelRatio,
+    TouchableOpacity,
+    Alert,
+} from 'react-native';
+
+import Immutable, {Map} from 'immutable';
+import Toast from '../../../common/components/Toast';
+
+
+export default class BankCardAdd extends React.Component {
+    constructor(props) {
+        super(props);
+        this.bankCardNoChange = this.bankCardNoChange.bind(this);
+        this.phoneChange = this.phoneChange.bind(this);
+    
+        this.state = {
+            newCardNo: "",
+            phone: "",
+        };
+    }
+
+    bankCardNoChange(event) {
+        let value = event.nativeEvent.text;
+        let cardNo = value.replace(/\s/g, '');
+        let newCardNo = value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
+        this.setState({newCardNo: newCardNo});
+    }
+
+    phoneChange(event) {
+        this.setState({phone: event.nativeEvent.text});
+    }
+
+    onPressNext() {
+        console.log(this.state.toJS());
+    }
+
+    onPressSupportBank() {
+        let bankList = ['农业银行', '中国银行', '工商银行', '建设银行', '光大银行', '兴业银行', '邮储银行', '民生银行', '中信银行', '广发银行', '平安银行'];
+
+        let banks = bankList.join('、');
+        Alert.alert('支持银行', `${banks}`, [
+                    {text: '我知道了', onPress: () => {this.props.onPressCardNoQuestion && this.props.onPressCardNoQuestion()}}
+                ]);
+    }
+
+
+
+    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.cardInfoTop}></View>
+                <View style={styles.cardInfoFullLine}></View>
+
+                <View style={styles.cardInfoContainer}>
+                    <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>
+                    <TextInput
+                      autoCapitalize="none"
+                      placeholder={"请输入本人银行卡号"}
+                      value={this.state.newCardNo}
+                      onChange={this.bankCardNoChange}
+                      style={styles.textInput}
+                      maxLength={23}
+                      underlineColorAndroid="transparent"
+                      keyboardType={"numeric"}
+                      onFocus={() => {
+                          this.props.onFocus && this.props.onFocus(refId);
+                      }}
+                    />
+                    <TouchableOpacity style={styles.touchContainer} onPress={() => {
+                            this.onPressSupportBank && this.onPressSupportBank();}}>
+                        <Image style={styles.questionCardNo} source={require("../../image/question_icon.png")}/>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.cardInfoLine}></View>
+                <View style={styles.cardInfoContainer}>
+                    <Text style={styles.cardInfoLabel}></Text>
+                    <Image style={styles.cardInfoImg} source={require("../../image/bank/ABC.png")}/>
+                    <Text style={styles.cardInfoData}>{bankName}</Text>
+                </View>
+                <View style={styles.cardInfoLine}></View>
+                <View style={styles.cardInfoContainer}>
+                    <Text style={styles.cardInfoLabel}>手机号</Text>
+                    <TextInput
+                      autoCapitalize="none"
+                      placeholder={"请输入银行预留手机号"}
+                      value={this.state.phone}
+                      onChange={this.phoneChange}
+                      style={styles.textInput}
+                      maxLength={11}
+                      underlineColorAndroid="transparent"
+                      keyboardType={"numeric"}
+                      onFocus={() => {
+                          this.props.onFocus && this.props.onFocus(refId);
+                      }}
+                    />
+                </View>
+                <View style={styles.cardInfoFullLine}></View>
+
+                <View style={styles.cardTipContainer}>
+                    <View style={styles.buttonContainer}>
+                        <TouchableOpacity activeOpacity={1} onPress={() => {
+                            console.log(JSON.stringify(this.state));
+                                this.props.onPressAddCard && this.props.onPressAddCard();}}>
+                            <Text style={styles.addButton}>下一步</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+
+            </View>
+        );
+    }
+};
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#ffffff",
+    },
+
+    cardInfoTop:{
+        width: width,
+        height: 10 * DEVICE_WIDTH_RATIO,
+        backgroundColor: "#f0f0f0",
+    },
+
+    cardInfoFullLine:{
+        width: width,
+        height: 0.5 * DEVICE_WIDTH_RATIO,
+        backgroundColor: "#b4b4b4",
+    },
+
+    cardInfoContainer:{
+        width: width,
+        height: 44 * DEVICE_WIDTH_RATIO,
+        backgroundColor: "#ffffff",
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+
+    cardInfoLabel:{
+        width: 100 * DEVICE_WIDTH_RATIO,
+        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
+        fontSize: 14 * DEVICE_WIDTH_RATIO,
+    },
+
+    cardInfoData:{
+        width: 150 * DEVICE_WIDTH_RATIO,
+        fontSize: 13 * DEVICE_WIDTH_RATIO,
+    },
+
+    textInput: {
+        width: 180 * DEVICE_WIDTH_RATIO,
+        height: 20 * DEVICE_WIDTH_RATIO,
+        fontSize: 12 * DEVICE_WIDTH_RATIO,
+        padding: 0,
+        marginTop: 4 * DEVICE_WIDTH_RATIO,
+    },
+
+    touchContainer:{
+        width: 20* DEVICE_WIDTH_RATIO,
+        height: 20 * DEVICE_WIDTH_RATIO,
+        marginTop: 4 * DEVICE_WIDTH_RATIO,
+        marginLeft: 12 * DEVICE_WIDTH_RATIO,
+    },
+
+    questionCardNo: {
+        width: 14 * DEVICE_WIDTH_RATIO,
+        height: 14 * DEVICE_WIDTH_RATIO,
+        marginTop: 3 * DEVICE_WIDTH_RATIO,
+        marginLeft: 3 * DEVICE_WIDTH_RATIO,
+    },
+
+    cardInfoImg:{
+        width: 16 * DEVICE_WIDTH_RATIO,
+        height: 16 * DEVICE_WIDTH_RATIO,
+        marginRight: 10 * 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: "#f0f0f0",
+    },
+
+    buttonContainer:{
+        width: width,
+        height: 100,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: 20 * DEVICE_WIDTH_RATIO,
+    },
+
+    addButton:{
+        width: 220 * 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',
+    },
+
+
+});

+'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 BankCardAdd from '../components/installment/BankCardAdd';
+
+
+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 InstallmentMyCardAddContainer extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        // this.props.actions.getBankCards();
+    }
+
+    render() {
+
+        return (
+            <BankCardAdd
+                style={styles.container}
+
+            />
+        );
+    }
+}
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(InstallmentMyCardAddContainer);