Authored by chenl

增加我的银行卡页面(暂存)。

'use strict';
import React from 'react';
import ReactNative, {
View,
Text,
Image,
StyleSheet,
Dimensions,
PixelRatio,
TouchableOpacity,
Alert,
} from 'react-native';
import Immutable, {Map} from 'immutable';
export default class RepayList extends React.Component {
constructor(props) {
super(props);
}
render() {
let{dataSource}=this.props;
dataSource = dataSource.toJS();
let checked = dataSource.isChecked;
let checkboxIcon = require('../../image/check_icon.png');
if (!checked) {
checkboxIcon = require('../../image/uncheck_icon.png');
}
return(
<View style={styles.container}>
<View style={styles.cellContainer}>
<View style={styles.cellLeftContainer}>
<TouchableOpacity onPress={() => {this.props.onPressRepaylistCellCheckbox &&this.props.onPressRepaylistCellCheckbox(dataSource)}} >
<Image style={styles.checkboxIcon} source={checkboxIcon}/>
</TouchableOpacity>
<View style={styles.priceContainer}>
<Text style={{marginLeft:5*DEVICE_WIDTH_RATIO}}>¥{dataSource.currAmt}</Text>
<Text numberOfLines={1}>【全{dataSource.stage}期】{dataSource.billInfo}</Text>
</View>
</View>
<TouchableOpacity onPress={() => {this.props.onPressRepaylistCellDetail &&this.props.onPressRepaylistCellDetail(dataSource)}} >
{dataSource.isOverdue?
<View style={styles.cellRightContainer}>
<Text style={{color:'#d0021b',fontSize:12*DEVICE_WIDTH_RATIO,marginRight:5*DEVICE_WIDTH_RATIO}}>逾期{dataSource.day}</Text>
<TouchableOpacity style={styles.bankTip} onPress={() => Alert.alert('逾期服务费信息','如果您到期未还款:需要加收逾期利息费和延迟还款费\n逾期利息费:待还本金 *利息率*延迟还款天数,利息率=0.025%/天\n延迟还款费:逾期3天内还款免收延迟还款服务费,逾期4天,从第一天逾期开始算,500元之内,加收1元/天延迟还款服务费。每500元增加1元/天。',[
{text: '我知道了'},
])} >
<Image style={{width:12*DEVICE_WIDTH_RATIO,height:12*DEVICE_WIDTH_RATIO,marginRight:5*DEVICE_WIDTH_RATIO}} source={require("../../image/red_question_icon.png")}/>
</TouchableOpacity>
<Image style={{marginRight:5*DEVICE_WIDTH_RATIO}} source={require("../../image/category_b_arrow.png")}/>
</View>
:<View style={styles.cellRightContainer}>
<Text style={{color:'#b0b0b0',fontSize:12*DEVICE_WIDTH_RATIO,marginRight:5*DEVICE_WIDTH_RATIO}}>剩余{dataSource.day}</Text>
<Image style={{marginRight:5*DEVICE_WIDTH_RATIO}} source={require("../../image/category_b_arrow.png")}/>
</View>
}
</TouchableOpacity>
</View>
<View style={{
width: width,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#e5e5e5',
}}/>
</View>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
width: width,
height: 61 * DEVICE_WIDTH_RATIO,
},
cellContainer: {
width: width,
height: 60.5 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
justifyContent: 'space-between',
},
checkboxIcon: {
width: 15 * DEVICE_WIDTH_RATIO,
height: 15 * DEVICE_WIDTH_RATIO,
marginLeft: 15 * DEVICE_WIDTH_RATIO,
},
cellLeftContainer: {
flexDirection: 'row',
width: 190 * DEVICE_WIDTH_RATIO,
alignItems: 'center',
},
priceContainer: {
width: 160 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
marginTop: 10 * DEVICE_WIDTH_RATIO,
},
cellRightContainer: {
marginRight: 15 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
alignItems: 'center',
flexDirection: 'row',
}
});
... ...
... ... @@ -10,17 +10,18 @@ import {
InteractionManager,
NativeAppEventEmitter,
Text,
ListView,
TouchableOpacity,
} from 'react-native'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as installmentActions from '../reducers/installment/installmentActions';
import InstallmentStatus from '../components/installment/InstallmentStatus';
import * as cardListActions from '../reducers/bankCardList/cardListActions';
import ServerError from '../components/installment/ServerError';
const actions = [
installmentActions,
cardListActions,
];
function mapStateToProps(state) {
return {
... ... @@ -42,20 +43,31 @@ function mapDispatchToProps(dispatch) {
class InstallmentMyCardContainer extends Component {
constructor(props) {
super(props);
this._onPressStatusPageBtn = this._onPressStatusPageBtn.bind(this);
this._reloadPage = this._reloadPage.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
}
componentDidMount() {
this.props.actions.getBankCards();
}
renderRow() {
this.props.actions.onPressStatusPageBtn();
renderRow(rowData, sectionID, rowID, highlightRow) {
// console.log(rowData)
return (
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onSelectCategory && this.props.onSelectCategory(rowData.toJS(),rowID)}>
<View style={styles.cardBg} >
<Image style={styles.cardNo} source={require('../image/bank/bank-CITIC.png')} />
<Text style={styles.cardNo} numberOfLines={1}>
{rowData}
</Text>
</View>
</TouchableOpacity>
);
}
render() {
let cardList = ['11','22'];
let cardList = ['65325165465321654','99999999999999'];
return (
... ... @@ -75,6 +87,14 @@ let styles = StyleSheet.create({
flex: 1,
},
cardBg:{
backgroundColor: "#00ff00",
},
cardNo:{
}
});
export default connect(mapStateToProps, mapDispatchToProps)(InstallmentMyCardContainer);
... ...
'use strict';
import ReactNative from 'react-native';
import InstallmentService from '../../services/InstallmentService';
const {
SET_TIP_MESSAGE,
SET_ERROR,
GET_CARD_LIST_REQUEST,
GET_CARD_LIST_FAILURE,
GET_CARD_LIST_SUCCESS,
} = 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 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;
}
... ...
... ... @@ -221,7 +221,7 @@ export default class InstallmentService {
});
}
//还款列表获取银行卡信息
//获取银行卡信息
async getBankCards(uid) {
return await this.api.get({
url: '',
... ...
... ... @@ -126,7 +126,6 @@ let styles = StyleSheet.create({
},
priceText: {
width: width - productIconWidth - 60,
marginLeft: 3,
fontSize: 13,
color: 'black',
marginTop: 15,
... ... @@ -134,7 +133,6 @@ let styles = StyleSheet.create({
},
nameText: {
width: width - productIconWidth - 60,
marginLeft: 3,
fontSize: 13,
color: 'black',
marginTop: 12,
... ...