mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 8a18c768afb460b057fd992c5346493f2ea032ab 1 parent 2ac622e1

增加分期订单。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);
}
}
... ...