增加逛详请埋点和分期选择银行卡页面。review by 孙凯。

@@ -136,7 +136,7 @@ export default class SingleImage extends React.Component {
                                         <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => {
                                             let pos_id = 105;
                                             let product_id = value.product_id?value.product_id:'';
-                                            this.props.onPressShopCar && this.props.onPressShopCar(value.product_skn,pos_id,product_id);
+                                            this.props.onPressShopCar && this.props.onPressShopCar(value.product_skn,product_id,pos_id);
                                         }}>
                                             <Image source={require('../../image/dian_gwc_bt.png')} style={styles.image} resizeMode={'contain'}></Image>
                                         </TouchableOpacity>

@@ -189,6 +189,7 @@ class DetailContainer extends Component {
         let param = {
             pruduct_skn: product_skn,
             fromPage: 'YH_GuangDetailViewController',
+            pos_id: pos_id,
         }
         ReactNative.NativeModules.YH_CommonHelper.showChooseInfoView(param)
 

+'use strict';
+import React from 'react';
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    StyleSheet,
+    Dimensions,
+    PixelRatio,
+    TouchableOpacity,
+    ListView,
+    Alert,
+} from 'react-native';
+
+import Immutable, {Map} from 'immutable';
+
+export default class ChangeBankCard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.dataSource = new ListView.DataSource({
+          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+        });
+        this.renderRow = this.renderRow.bind(this);
+        this.renderSeparator = this.renderSeparator.bind(this);
+        this.renderFooter = this.renderFooter.bind(this);
+    }
+
+    renderRow(rowData, sectionID, rowID, highlightRow) {
+        let title = rowData ? rowData.get("outBankNameNumb") : "";
+
+        //判断是否为当前支付银行卡
+        let payCard = this.props.payCard;
+        let isPayCard = Immutable.is(payCard, rowData);
+        // cardIdNo
+
+        return (
+            <TouchableOpacity key={"row_"+rowID} activeOpacity={0.5} onPress={() => {
+                    this.props.changeBankCard && this.props.changeBankCard(); }}>
+                <View style={styles.choseCardContainer}>
+                    <Text style={styles.choseCardTitle}>{title}</Text>
+                    {
+                        isPayCard ? <Image source={require("../../image/check_icon.png")}/> : null
+                    }
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
+    renderSeparator(sectionID, rowID, adjacentRowHighlighted){
+        return (
+            <View key={"sep_"+rowID} style={styles.splitLine}/>
+        );
+    }
+
+    renderFooter(){
+        return (
+            <View >
+                <View style={styles.choseCardContainer}>
+                    <Text style={styles.choseCardTitle}>使用新卡还款</Text>
+                    <Image style={{marginRight:4*DEVICE_WIDTH_RATIO}} source={require("../../image/arrow_gray.png")}/>
+                </View>
+                <View style={styles.splitLine}/>
+            </View>
+        );
+    }
+
+    render() {
+        let{bankCardsList}=this.props;
+
+        let bankCardArray = bankCardsList ? bankCardsList.toArray() : [];
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.changeCardContainer}>
+                    <View style={styles.titleContainer}>
+                        <Text style={{fontSize:16*DEVICE_WIDTH_RATIO,lineHeight:Math.ceil(30 * DEVICE_WIDTH_RATIO),color:'#444444'}}>选择支付方式</Text>
+                        <TouchableOpacity style={styles.closeIcon} onPress={() => {this.props.closeBankSafePay && this.props.closeBankSafePay()}} >
+                            <Image
+                                source={require('../../image/close_ic.png')}
+                                resizeMode={'contain'}
+                            />
+                        </TouchableOpacity>
+                    </View>
+                    <View style={styles.splitLine}/>
+
+                    <ListView
+                        style={styles.cardListContainer}
+                        conta
+                        dataSource={this.dataSource.cloneWithRows(bankCardArray)}
+                        enableEmptySections={true}
+                        renderRow={this.renderRow}
+                        renderSeparator={this.renderSeparator}
+                        renderFooter={this.renderFooter}/>
+
+                    <View style={styles.splitLine}/>
+                </View>
+            </View>
+        );
+
+    }
+};
+
+let {width, height} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+let styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        alignItems: 'center',
+        position: 'absolute',
+        width: width,
+        height: height,
+        top: 0,
+    },
+    changeCardContainer: {
+        position: 'absolute',
+        bottom: 0,
+        width: width,
+        height: 375 * DEVICE_WIDTH_RATIO,
+        backgroundColor: 'white',
+    },
+    titleContainer: {
+        width: width,
+        height: 44 * DEVICE_WIDTH_RATIO,
+        alignItems: 'center',
+        position: 'relative',
+    },
+    closeIcon: {
+        position: 'absolute',
+        right: 10 * DEVICE_WIDTH_RATIO,
+        top: 0 * DEVICE_WIDTH_RATIO,
+        paddingLeft: 10 * DEVICE_WIDTH_RATIO,
+        paddingRight: 10 * DEVICE_WIDTH_RATIO,
+        paddingTop: 14 * DEVICE_WIDTH_RATIO,
+    },
+    splitLine: {
+        width: width,
+        height: 1,
+        backgroundColor: '#e5e5e5',
+    },
+    cardListContainer: {
+        width: width,
+        height: 200 * DEVICE_WIDTH_RATIO,
+    },
+    choseCardContainer: {
+        height: 44 * DEVICE_WIDTH_RATIO,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginRight: 15 * DEVICE_WIDTH_RATIO,
+    },
+    choseCardTitle: {
+        marginLeft: 15 * DEVICE_WIDTH_RATIO,
+        color: '#444444',
+        fontSize: 14,
+    },
+
+
+});

@@ -18,6 +18,7 @@ import YH_Image from '../../../common/components/YH_Image';
 import SlicedImage from '../../../common/components/SlicedImage';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import BankSafePay from '../installment/BankSafePay';
+import ChangeBankCard from '../installment/ChangeBankCard';
 import ConfirmPay from '../installment/ConfirmPay';
 import Prompt from '../../../coupon/components/coupon/Prompt';
 
@@ -45,7 +46,7 @@ export default class MyOrderDetail extends React.Component {
 
     render() {
 
-        let {isFetching, orderInfo, showBankSafePayView, showConfirmPayView, payCard, formateData, tipMessage} = this.props.myOrderDetail;
+        let {isFetching, orderInfo, showBankSafePayView, showChangeBankView, showConfirmPayView, bankCardsList, payCard, formateData, tipMessage} = this.props.myOrderDetail;
 
         if(!orderInfo)
             return null;
@@ -159,6 +160,16 @@ export default class MyOrderDetail extends React.Component {
                    />
                    :null
                 }
+                {showBankSafePayView ?
+                   <ChangeBankCard
+                       payCard={payCard}
+                       bankCardsList={bankCardsList}
+                       closeBankSafePay={this.props.closeBankSafePay}
+                       bankSafePayNow={this.props.bankSafePayNow}
+                       changeBankCard={this.props.changeBankCard}
+                   />
+                   :null
+                }
                 {showConfirmPayView?
                    <ConfirmPay
                        reSendConfirmPaySnsCode={this.props.reSendConfirmPaySnsCode}

@@ -14,6 +14,7 @@ let InitialState = Record({
     bankCardsList: List(),
 	payCard: Map(),
     showBankSafePayView: false,
+    showChangeBankView: false,
     showConfirmPayView: false,
     repayTermList:List(),
     prePaySuccessParam: Map(),