mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit f8af50bce7f47e9a83aa0a718dc695ddd1ebf8f0 2 parents ccb8f46e d2d52636

Merge branch '5.6.0' of http://git.yoho.cn/mobile/YH_RNComponent into 5.6.0

Inline Side-by-side
Showing 10 changed files with 657 additions and 190 deletions
... ... @@ -8,68 +8,89 @@ import ReactNative, {
Dimensions,
PixelRatio,
TouchableOpacity,
ListView,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import Toast from '../../../common/components/Toast';
import MyOrderDetailPayListCell from './MyOrderDetailPayListCell';
export default class MyOrderDetail 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);
}
renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<MyOrderDetailPayListCell
data={rowData}
onPressOrder={this.props.onPressOrder}
/>
);
}
render() {
let bankName = "农业银行";
let cardNo = "4561";
let userName = "**聪";
let mobile = "*****5865";
let isMaster = false;
let goodsName = "Adidas Originals KS full size";
let orderCode = "订单编号：165965646564 ";
let orderTime = "2015.12.13";
let orderMoney = "￥ 455";
let isOrderPaying = false;
let orderStateText = "还款中1/3";
let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
let cardList = [{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'}];
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 style={styles.goodsInfoContainer}>
<Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
<Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
<Text style={styles.orderCode} numberOfLines={1}>{orderCode}</Text>
<Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
</View>
<View style={styles.cardInfoLine}></View>
<View style={styles.cardInfoContainer}>
<Text style={styles.cardInfoLabel}>预留手机号</Text>
<Text style={styles.cardInfoData}>{mobile}</Text>
<View style={styles.splitLine}></View>
<View style={styles.installmentInfoContainer}>
<View style={styles.installmentInfoCell}>
<Text style={styles.installmentInfoCellText}>分期应还</Text>
<Text style={styles.installmentInfoCellText}>{"555"}</Text>
</View>
<View style={styles.installmentInfoCell}>
<Text style={styles.installmentInfoCellText}>分期服务费</Text>
<Text style={styles.installmentInfoCellText}>{"555"}</Text>
</View>
<View style={styles.installmentInfoCell}>
<Text style={styles.installmentInfoCellText}>总计应还</Text>
<Text style={styles.installmentInfoCellText}>{"555"}</Text>
</View>
</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={() => {
<View style={styles.splitLine}></View>
<View style={styles.splitBlank}></View>
<View style={styles.splitLine}></View>
<ListView
style={styles.payListContainer}
dataSource={this.dataSource.cloneWithRows(cardList)}
enableEmptySections={true}
renderRow={this.renderRow}
/>
<View style={styles.splitLine}></View>
<View style={styles.bottomContainer}>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
<Text style={styles.changeButton}>切换为主卡</Text>
</TouchableOpacity>
</View>
}
<Text style={styles.changeButton}>立即还款</Text>
</TouchableOpacity>
</View>
<Toast text="解绑成功" isVisible={false} />
</View>
);
... ... @@ -85,102 +106,85 @@ let styles = StyleSheet.create({
backgroundColor: "#ffffff",
},
cardDetailContainer:{
splitLine:{
width: width,
height: 60 * DEVICE_WIDTH_RATIO,
backgroundColor: "#f8555b",
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: "#b4b4b4",
},
cardDetailImg:{
splitBlank:{
width: width,
height: 15 * DEVICE_WIDTH_RATIO,
backgroundColor: "#f0f0f0",
},
goodsInfoContainer:{
width: width,
height: 80 * DEVICE_WIDTH_RATIO,
},
goodsImage:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
left: 15 * DEVICE_WIDTH_RATIO,
width: 40 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
width: 45 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
},
cardDetailName:{
goodsName:{
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',
top: 15 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
cardDetailNo:{
orderCode:{
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',
left: 70 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
cardInfoLabel:{
width: 125 * DEVICE_WIDTH_RATIO,
paddingLeft: 15 * DEVICE_WIDTH_RATIO,
fontSize: 14 * DEVICE_WIDTH_RATIO,
orderTime:{
position: 'absolute',
top: 50 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
fontSize: 12 * 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",
installmentInfoContainer:{
width: width,
height: 60 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
},
cardTipContainer:{
installmentInfoCell:{
flex: 1,
backgroundColor: "#f0f0f0",
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
cardTip: {
width: width,
paddingLeft: 15 * DEVICE_WIDTH_RATIO,
paddingRight: 10 * DEVICE_WIDTH_RATIO,
paddingTop: 10 * DEVICE_WIDTH_RATIO,
installmentInfoCellText:{
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
},
buttonContainer:{
payListContainer:{
width: width,
height: 100,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: 200 * DEVICE_WIDTH_RATIO,
},
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,
bottomContainer:{
width: width,
height: 60 * DEVICE_WIDTH_RATIO,
},
changeButton:{
width: 130 * DEVICE_WIDTH_RATIO,
height: 44 * DEVICE_WIDTH_RATIO,
... ... @@ -189,10 +193,10 @@ let styles = StyleSheet.create({
marginLeft: 8 * DEVICE_WIDTH_RATIO,
color: '#ffffff',
textAlign: 'center',
borderColor:'#444444',
borderColor:'#cc0009',
borderWidth:2,
borderRadius: 6,
backgroundColor:'#444444',
backgroundColor:'#cc0009',
},
... ...
'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 MyOrderDetailPayListCell extends React.Component {
constructor(props) {
super(props);
}
render() {
let{cardNo, cardBank} = this.props.data;
let goodsName = "Adidas Originals KS full size";
let goodsSkn = "FULXN 2526542";
let orderTime = "2015.12.13";
let orderMoney = "￥ 455";
let isOrderPaying = false;
let orderStateText = "还款中1/3";
let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
return(
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder()}>
<View style={styles.container} >
<Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
<Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
<Text style={styles.goodsSkn} numberOfLines={1}>{goodsSkn}</Text>
<Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
<Text style={styles.orderMoney} numberOfLines={1}>{orderMoney}</Text>
<Text style={[styles.orderStateText, colorStyle]} numberOfLines={1}>{orderStateText}</Text>
</View>
</TouchableOpacity>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flex: 1,
width: width,
height: 80 * DEVICE_WIDTH_RATIO,
borderBottomColor: '#e0e0e0',
borderBottomWidth: 0.5,
// alignItems: 'center',
// justifyContent: 'center',
// paddingTop: 10 * DEVICE_WIDTH_RATIO,
// paddingLeft: 15 * DEVICE_WIDTH_RATIO,
// paddingRight: 15 * DEVICE_WIDTH_RATIO,
},
goodsImage:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
left: 15 * DEVICE_WIDTH_RATIO,
width: 45 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
},
goodsName:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
goodsSkn:{
position: 'absolute',
top: 30 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
orderTime:{
position: 'absolute',
top: 50 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
orderMoney:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
orderStateText:{
position: 'absolute',
top: 45 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
});
... ...
... ... @@ -15,6 +15,7 @@ import ReactNative, {
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import MyOrderListCell from './MyOrderListCell';
import OrderTypeSelector from './OrderTypeSelector';
export default class MyOrderList extends React.Component {
... ... @@ -23,12 +24,15 @@ export default class MyOrderList extends React.Component {
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
this.renderRow = this.renderRow.bind(this);
}
renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<MyOrderListCell
data={rowData}
onPressOrder={this.props.onPressOrder}
/>
);
}
... ... @@ -37,15 +41,20 @@ export default class MyOrderList extends React.Component {
let cardList = [{'cardNo':'6222024301058186063','cardBank':"ICBC"},{'cardNo':'6222024301058186063','cardBank':"BOC"}];
let currentOrderType = '1';
return (
<ListView
style={styles.container}
dataSource={this.dataSource.cloneWithRows(cardList)}
enableEmptySections={true}
renderRow={this.renderRow}
/>
<View style={styles.container}>
<OrderTypeSelector selectedTypeId={currentOrderType} onSelectType={this.props.onSelectType} />
<View style={styles.splitLine}></View>
<ListView
style={styles.listContainer}
dataSource={this.dataSource.cloneWithRows(cardList)}
enableEmptySections={true}
renderRow={this.renderRow}
/>
</View>
);
... ... @@ -58,6 +67,22 @@ const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
splitLine: {
width: width,
height: 15 * DEVICE_WIDTH_RATIO,
borderBottomColor: '#e0e0e0',
borderBottomWidth: 0.5,
backgroundColor:'#f0f0f0',
},
listContainer: {
width: width,
height: height - 59 * DEVICE_WIDTH_RATIO,
backgroundColor:'#ffffff',
},
... ...
... ... @@ -19,75 +19,32 @@ export default class MyOrderListCell extends React.Component {
render() {
let{cardNo, cardBank} = this.props.data;
let bankImg = this.getBankImage(cardBank);
let newCardNo = this.processBankCardNo(cardNo);
let goodsName = "Adidas Originals KS full size";
let goodsSkn = "FULXN 2526542";
let orderTime = "2015.12.13";
let orderMoney = "￥ 455";
let isOrderPaying = false;
let orderStateText = "还款中1/3";
let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
return(
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressCard && this.props.onPressCard()}>
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder()}>
<View style={styles.container} >
<Image style={styles.cardBg} source={bankImg} />
<Text style={styles.cardNo} numberOfLines={1}>
{newCardNo}
</Text>
<Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
<Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
<Text style={styles.goodsSkn} numberOfLines={1}>{goodsSkn}</Text>
<Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
<Text style={styles.orderMoney} numberOfLines={1}>{orderMoney}</Text>
<Text style={[styles.orderStateText, colorStyle]} numberOfLines={1}>{orderStateText}</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;
}
};
... ... @@ -99,24 +56,62 @@ 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,
width: width,
height: 80 * DEVICE_WIDTH_RATIO,
borderBottomColor: '#e0e0e0',
borderBottomWidth: 0.5,
// alignItems: 'center',
// justifyContent: 'center',
// paddingTop: 10 * DEVICE_WIDTH_RATIO,
// paddingLeft: 15 * DEVICE_WIDTH_RATIO,
// paddingRight: 15 * DEVICE_WIDTH_RATIO,
},
cardBg:{
width: 290 * DEVICE_WIDTH_RATIO,
height: 100 * DEVICE_WIDTH_RATIO,
goodsImage:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
left: 15 * DEVICE_WIDTH_RATIO,
width: 45 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
},
cardNo:{
goodsName:{
position: 'absolute',
top: 85,
left: 100,
color: "white",
fontSize: 22 * DEVICE_WIDTH_RATIO,
top: 15 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
goodsSkn:{
position: 'absolute',
top: 30 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
orderTime:{
position: 'absolute',
top: 50 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
orderMoney:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
orderStateText:{
position: 'absolute',
top: 45 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
}
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
View,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
Platform,
} = ReactNative;
export default class OrderTypeSelector extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.id != r2.id,
});
this.types = [
{
value: '全部',
id: 1,
isSelect: false,
},
{
value: '还款中',
id: 2,
isSelect: false,
},
{
value: '已还清',
id: 3,
isSelect: false,
},
];
}
shouldComponentUpdate(nextProps){
if (nextProps.selectedTypeId == this.props.selectedTypeId) {
return false;
} else {
return true;
}
}
_renderRow(rowData, sectionID, rowID) {
let isRowSelected = false;
if (this.props.selectedTypeId >= 1) {
isRowSelected = (rowID == (this.props.selectedTypeId - 1));
}
let colorStyle = isRowSelected ? {color: '#444444', fontFamily: 'HelveticaNeue', fontSize: 17} : {color: '#b0b0b0', fontFamily: 'HelveticaNeue', fontSize: 17,};
return (
<TouchableOpacity activeOpacity={1} onPress={() => {
if (isRowSelected) {
return;
}
let type = this.types[rowID];
this.props.onSelectType && this.props.onSelectType(type);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={colorStyle}>{rowData.value}</Text>
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
if(rowID == 2)
return null;
else{
return (
<View key={'sep' + rowID} style={styles.separator}></View>
);
}
}
render() {
let {style} = this.props;
return (
<View style={[styles.container, style]}>
<ListView
contentContainerStyle={[styles.contentContainer, style]}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(this.types)}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let viewHeight = 44 * DEVICE_WIDTH_RATIO;
let styles = StyleSheet.create({
container: {
width: width,
height: viewHeight,
borderTopColor: 'transparent',
borderBottomColor: '#e0e0e0',
borderBottomWidth: 0.5,
backgroundColor:'white',
justifyContent: 'center',
alignItems: 'center',
},
contentContainer: {
flexDirection: 'row',
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: viewHeight - 1,
},
separator: {
width: 45 * DEVICE_WIDTH_RATIO,
backgroundColor: 'white',
},
});
... ...
... ... @@ -60,4 +60,9 @@ export default keyMirror({
QUERY_REPAY_RECORD_LIST_REQUEST: null,
QUERY_REPAY_RECORD_LIST_FAILURE: null,
QUERY_REPAY_RECORD_LIST_SUCCESS: null,
GET_CARD_LIST_REQUEST: null,
GET_CARD_LIST_FAILURE: null,
GET_CARD_LIST_SUCCESS: null,
});
... ...
... ... @@ -17,13 +17,14 @@ import {
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as cardListActions from '../reducers/bankCardList/cardListActions';
import * as orderListActions from '../reducers/orderList/orderListActions';
import * as installmentActions from '../reducers/installment/installmentActions';
import ServerError from '../components/installment/ServerError';
import MyOrderList from '../components/order/MyOrderList';
const actions = [
cardListActions,
installmentActions,orderListActions,
];
function mapStateToProps(state) {
return {
... ... @@ -46,18 +47,24 @@ class InstallmentMyOrderContainer extends Component {
constructor(props) {
super(props);
this.onPressOrder = this.onPressOrder.bind(this);
}
componentDidMount() {
// this.props.actions.getBankCards();
}
onPressOrder(){
this.props.actions.onPressOrder();
}
render() {
return (
<MyOrderList
style={styles.container}
orderList={[]}
orderList={[1,1]}
onPressOrder={this.onPressOrder}
/>
);
... ...
'use strict';
import ReactNative from 'react-native';
// import InstallmentService from '../../services/InstallmentService';
// const {
// SET_TIP_MESSAGE,
// SET_ERROR,
// } = require('../../constants/actionTypes').default;
// export function getCardListRequest(){
// return {
// type: GET_CARD_LIST_REQUEST,
// }
// }
// export function getCardListFailure(error){
// return {
// type: GET_CARD_LIST_FAILURE,
// payload: error,
// }
// }
// export function getCardListSuccess(list){
// return {
// type: GET_CARD_LIST_SUCCESS,
// payload: list,
// }
// }
export function onPressOrder() {
return (dispatch, getState) => {
console.log("---onPressOrder");
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.instalmentMyOrderDetail","params":{}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
}
// export function getBankCards() {
// return (dispatch, getState) => {
// let {app, repayList} = getState();
// let queryBankCards = (uid) => {
// return new InstallmentService(app.host).getBankCards(uid)
// .then(json => {
// console.log("chenlin", JSON.stringify(json));
// dispatch(getCardListSuccess(json));
// })
// .catch(error => {
// console.log("chenlin", JSON.stringify(error));
// dispatch(setTipMessage(error.message || '暂未获取到数据'));
// });
// };
// ReactNative.NativeModules.YH_CommonHelper.uid()
// .then(uid => {
// console.log("chenlin", uid);
// queryBankCards(uid);
// })
// .catch(error => {
// console.log("chenlin", JSON.stringify(error));
// ReactNative.NativeModules.YH_CommonHelper.login()
// .then(uid => {
// queryBankCards(uid);
// })
// .catch(error => {
// });
// });
// };
// }
// export function setTipMessage(message){
// return {
// type: SET_TIP_MESSAGE,
// payload: message,
// }
// }
... ...
'use strict';
import Immutable,{Record, List, Map} from 'immutable';
let InitialState = Record({
isFetching: false,
queryDays: '',
repaymentList: List(),
formateData: Map(),
showBottom: true,
tipMessage: '',
bankCardsList: List(),
payCard: Map(),
showBankSafePayView: false,
showConfirmPayView: false,
repayTermList:List(),
prePaySuccessParam: Map(),
error: null,
});
export default InitialState;
... ...
'use strict';
import InitialState from './repayListInitialState';
import Immutable, {Map} from 'immutable';
const {
SET_QUERY_DAYS,
SET_ERROR,
QUERY_REPAYMENT_LIST_REQUEST,
QUERY_REPAYMENT_LIST_FAILURE,
QUERY_REPAYMENT_LIST_SUCCESS,
SET_FORMATE_DATA,
SET_TIP_MESSAGE,
UPDATE_REPAYMENT_LIST_AND_FORMATE_DATA,
SET_BANK_CARDS_LIST_AND_PAY_CARD,
SET_BANK_SAFE_PAY_VIEW_STATUS,
UPDATE_REPAY_TERM_LIST,
UPDATE_PREPAY_SUCCESS_PARAM,
SET_SHOW_CONFIRM_PAY_VIEW_STATUS,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
export default function appReducer(state = initialState, action) {
if (!(state instanceof InitialState)) return initialState.merge(state);
switch (action.type) {
case SET_QUERY_DAYS:
return state.set('queryDays', action.payload);
case QUERY_REPAYMENT_LIST_REQUEST:
return state.set('isFetching', true)
.set('error', null);
case SET_ERROR:
case QUERY_REPAYMENT_LIST_FAILURE:
return state.set('isFetching', false)
.set('error',action.payload);
case UPDATE_REPAYMENT_LIST_AND_FORMATE_DATA:
return state.set('repaymentList', Immutable.fromJS(action.payload.repaymentList))
.set('formateData', Immutable.fromJS(action.payload.formateData));
case QUERY_REPAYMENT_LIST_SUCCESS:
return state.set('repaymentList', Immutable.fromJS(action.payload))
.set('isFetching', false);
case SET_FORMATE_DATA:
return state.set('formateData', Immutable.fromJS(action.payload));
case SET_TIP_MESSAGE:
return state.set('tipMessage', action.payload);
case SET_BANK_CARDS_LIST_AND_PAY_CARD:
return state.set('bankCardsList', Immutable.fromJS(action.payload))
.set('payCard', Immutable.fromJS(action.payload[0]));
case SET_BANK_SAFE_PAY_VIEW_STATUS:
return state.set('showBankSafePayView',action.payload);
case UPDATE_REPAY_TERM_LIST:
return state.set('repayTermList', Immutable.fromJS(action.payload));
case UPDATE_PREPAY_SUCCESS_PARAM:
return state.set('prePaySuccessParam',Immutable.fromJS(action.payload))
.set('showConfirmPayView', true);
case SET_SHOW_CONFIRM_PAY_VIEW_STATUS:
return state.set('showConfirmPayView', action.payload);
}
return state;
}
... ...