增加分期订单。review by 张丽霞。

@@ -31,7 +31,8 @@ import InstallmentAccountContainer from './containers/InstallmentAccountContaine
 import InstallmentMyCardContainer from './containers/InstallmentMyCardContainer';
 import InstallmentMyCardContainer from './containers/InstallmentMyCardContainer';
 import InstallmentMyCardDetailContainer from './containers/InstallmentMyCardDetailContainer';
 import InstallmentMyCardDetailContainer from './containers/InstallmentMyCardDetailContainer';
 import InstallmentMyCardAddContainer from './containers/InstallmentMyCardAddContainer';
 import InstallmentMyCardAddContainer from './containers/InstallmentMyCardAddContainer';
-
+import InstallmentMyOrderContainer from './containers/InstallmentMyOrderContainer';
+import InstallmentMyOrderDetailContainer from './containers/InstallmentMyOrderDetailContainer';
 
 
 import {
 import {
 	setPlatform,
 	setPlatform,
@@ -143,6 +144,18 @@ export default function native(platform) {
 						<InstallmentMyCardAddContainer />
 						<InstallmentMyCardAddContainer />
 					</Provider>
 					</Provider>
 				)
 				)
+			} else if (type == 'installMyOrder') {
+				return (
+					<Provider store={store}>
+						<InstallmentMyOrderContainer />
+					</Provider>
+				)
+			} else if (type == 'installMyOrderDetail') {
+				return (
+					<Provider store={store}>
+						<InstallmentMyOrderDetailContainer />
+					</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 Toast from '../../../common/components/Toast';
+
+
+export default class MyOrderDetail 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.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 style={styles.cardTip}>{cardTip}</Text>
+                    {
+                        isMaster ? null : 
+                            <View style={styles.buttonContainer}>
+                                <TouchableOpacity activeOpacity={1} onPress={() => {
+                                        this.props.onPressReleaseCard && this.props.onPressReleaseCard();}}>
+                                    <Text style={styles.releaseButton}>解除绑定</Text>
+                                </TouchableOpacity>
+                                <TouchableOpacity activeOpacity={1} onPress={() => {
+                                        this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
+                                    <Text style={styles.changeButton}>切换为主卡</Text>
+                                </TouchableOpacity>
+                            </View>
+                    }
+                </View>
+
+                <Toast text="解绑成功" isVisible={false} />
+
+            </View>
+        );
+    }
+};
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#ffffff",
+    },
+
+    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: 44 * DEVICE_WIDTH_RATIO,
+        backgroundColor: "#ffffff",
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+
+    cardInfoLabel:{
+        width: 125 * DEVICE_WIDTH_RATIO,
+        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
+        fontSize: 14 * DEVICE_WIDTH_RATIO,
+    },
+
+    cardInfoData:{
+        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: "#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:{
+        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,
+        borderRadius: 6,
+    },
+
+    changeButton:{
+        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',
+    },
+
+
+});

+'use strict';
+import React from 'react';
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    StyleSheet,
+    Dimensions,
+    PixelRatio,
+    TouchableOpacity,
+    ListView,
+    LayoutAnimation,
+} from 'react-native';
+
+import Immutable, {Map} from 'immutable';
+import LoadingIndicator from '../../../common/components/LoadingIndicator';
+import MyOrderListCell from './MyOrderListCell';
+
+
+export default class MyOrderList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.dataSource = new ListView.DataSource({
+          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+        });
+    }
+
+    renderRow(rowData, sectionID, rowID, highlightRow) {
+        return (
+            <MyOrderListCell
+                data={rowData}
+            />
+        );
+    }
+
+    render() {
+
+
+        let cardList = [{'cardNo':'6222024301058186063','cardBank':"ICBC"},{'cardNo':'6222024301058186063','cardBank':"BOC"}];
+
+
+        return (
+              <ListView
+                  style={styles.container}
+                  dataSource={this.dataSource.cloneWithRows(cardList)}
+                  enableEmptySections={true}
+                  renderRow={this.renderRow}
+              />
+        );
+
+
+    }
+};
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+
+
+});

+'use strict';
+import React from 'react';
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    StyleSheet,
+    Dimensions,
+    TouchableOpacity,
+} from 'react-native';
+
+import Immutable, {Map} from 'immutable';
+
+export default class MyOrderListCell extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let{cardNo, cardBank} = this.props.data;
+
+        let bankImg = this.getBankImage(cardBank);
+        let newCardNo = this.processBankCardNo(cardNo);
+
+        return(
+            <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressCard && this.props.onPressCard()}>
+                <View style={styles.container} >
+                    <Image style={styles.cardBg} source={bankImg} />
+                    <Text style={styles.cardNo} numberOfLines={1}>
+                        {newCardNo}
+                    </Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
+
+    //正则替换卡号，保留后4位
+    processBankCardNo(cardNo){
+
+        let newCardNo = cardNo.replace(/(\d+)(\d{4})$/, (a, b, c)=> {
+            return b.replace(/\d/g, '*') + c;
+        });
+
+        return newCardNo;
+    }
+
+
+    getBankImage(bank){
+        let bankImg;
+        switch(bank){
+            case "ABC":
+                bankImg = require('../../image/bank/bank-ABC.png');
+                break;
+            case "BOC":
+                bankImg = require('../../image/bank/bank-BOC.png');
+                break;
+            case "CCB":
+                bankImg = require('../../image/bank/bank-CCB.png');
+                break;
+            case "CEB":
+                bankImg = require('../../image/bank/bank-CEB.png');
+                break;
+            case "CGB":
+                bankImg = require('../../image/bank/bank-CGB.png');
+                break;
+            case "CIB":
+                bankImg = require('../../image/bank/bank-CIB.png');
+                break;
+            case "CITIC":
+                bankImg = require('../../image/bank/bank-CITIC.png');
+                break;
+            case "CMBC":
+                bankImg = require('../../image/bank/bank-CMBC.png');
+                break;
+            case "ICBC":
+                bankImg = require('../../image/bank/bank-ICBC.png');
+                break;
+            case "PAYH":
+                bankImg = require('../../image/bank/bank-PAYH.png');
+                break;
+            case "PSBC":
+                bankImg = require('../../image/bank/bank-PSBC.png');
+                break;
+            default:
+                bankImg = require('../../image/bank/bank-EMPTY.png');
+                break;
+        }
+        return bankImg;
+    }
+};
+
+
+
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: 15 * DEVICE_WIDTH_RATIO,
+        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
+        paddingRight: 15 * DEVICE_WIDTH_RATIO,
+
+    },
+    cardBg:{
+        width: 290 * DEVICE_WIDTH_RATIO,
+        height: 100 * DEVICE_WIDTH_RATIO,
+    },
+
+    cardNo:{
+        position: 'absolute',
+        top: 85,
+        left: 100,
+        color: "white",
+        fontSize: 22 * DEVICE_WIDTH_RATIO,
+
+    }
+});

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

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

@@ -233,7 +233,7 @@ export function productListForInstallment() {
 
 
 export function onPressOpenInstallment() {
 export function onPressOpenInstallment() {
     return (dispatch, getState) => {
     return (dispatch, getState) => {
-        let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.instalmentMyCard","params":{}}`;
+        let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.instalmentOpen","params":{}}`;
         ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
         ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
     }
     }
 }
 }