mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 8a18c768afb460b057fd992c5346493f2ea032ab 1 parent 2ac622e1 master ... 6.7.0_0.49 6.7.1_0.49 6.7.4_0.49 6.7.5_0.49 6.8.7_message 6.9.5_msg 6.9.9_invite V0125_Date V1115_Date V1130_Date V1217_Date V1230_Date V6.10.1 V6.10.2 V6.7.9_dev V6.8.6 V6.8.7 V6.8.7_upgrades V6.8.9 V6.9.1 V6.9.2 V6.9.3 V6.9.5 V6.9.6 V6.9.6_Alliance V6.9.7 V6.9.8 V6.9.8_shoudan V6.9.9 V9.30_Date exception feature/rn_update61 gerry/v6.9.14_panicBuying gerry/v6.9.16_bugfixed v6.10.0 v6.9.10 v6.9.11 v6.9.12 v6.9.13 v6.9.14 v6.9.16 v6.9.17 v6.9.19 v6.9.20 v6.9.21 v6.9.22 v6.9.24 6.9.8 6.9.7 6.9.6 6.9.4 6.9.2 6.9.1 6.8.9 6.8.8 6.8.4 6.8.3 6.8.2 6.7.9 6.7.8 6.7.7 6.6.4 v6.7.5 v6.7.1 v6.2.0 v6.1.0 v5.6.2 v5.6.0 V6.8.6 V6.8.5 V6.8.1

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

Inline Side-by-side
Showing 7 changed files with 550 additions and 2 deletions
... ... @@ -31,7 +31,8 @@ import InstallmentAccountContainer from './containers/InstallmentAccountContaine
import InstallmentMyCardContainer from './containers/InstallmentMyCardContainer';
import InstallmentMyCardDetailContainer from './containers/InstallmentMyCardDetailContainer';
import InstallmentMyCardAddContainer from './containers/InstallmentMyCardAddContainer';
import InstallmentMyOrderContainer from './containers/InstallmentMyOrderContainer';
import InstallmentMyOrderDetailContainer from './containers/InstallmentMyOrderDetailContainer';
import {
setPlatform,
... ... @@ -143,6 +144,18 @@ export default function native(platform) {
<InstallmentMyCardAddContainer />
</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() {
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);
}
}
... ...