mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 7f4180dc1c2249e0558068265339b7bf40eb17d2 1 parent 3ff5cac0

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

Inline Side-by-side
Showing 5 changed files with 175 additions and 2 deletions
... ... @@ -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(),
... ...