mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 31af06bda8819f9d6b120247560168c1163aca66 1 parent 91c8660d

增加我的银行卡页面（暂存）。

Inline Side-by-side
Showing 7 changed files with 309 additions and 11 deletions
  1 +'use strict';
  2 +import React from 'react';
  3 +import ReactNative, {
  4 + View,
  5 + Text,
  6 + Image,
  7 + StyleSheet,
  8 + Dimensions,
  9 + PixelRatio,
  10 + TouchableOpacity,
  11 + Alert,
  12 +} from 'react-native';
  13 +
  14 +import Immutable, {Map} from 'immutable';
  15 +
  16 +export default class RepayList extends React.Component {
  17 + constructor(props) {
  18 + super(props);
  19 + }
  20 +
  21 + render() {
  22 + let{dataSource}=this.props;
  23 + dataSource = dataSource.toJS();
  24 + let checked = dataSource.isChecked;
  25 + let checkboxIcon = require('../../image/check_icon.png');
  26 + if (!checked) {
  27 + checkboxIcon = require('../../image/uncheck_icon.png');
  28 + }
  29 + return(
  30 + <View style={styles.container}>
  31 + <View style={styles.cellContainer}>
  32 + <View style={styles.cellLeftContainer}>
  33 + <TouchableOpacity onPress={() => {this.props.onPressRepaylistCellCheckbox &&this.props.onPressRepaylistCellCheckbox(dataSource)}} >
  34 + <Image style={styles.checkboxIcon} source={checkboxIcon}/>
  35 + </TouchableOpacity>
  36 +
  37 + <View style={styles.priceContainer}>
  38 + <Text style={{marginLeft:5*DEVICE_WIDTH_RATIO}}>¥{dataSource.currAmt}</Text>
  39 + <Text numberOfLines={1}>【全{dataSource.stage}期】{dataSource.billInfo}</Text>
  40 + </View>
  41 +
  42 + </View>
  43 +
  44 + <TouchableOpacity onPress={() => {this.props.onPressRepaylistCellDetail &&this.props.onPressRepaylistCellDetail(dataSource)}} >
  45 + {dataSource.isOverdue?
  46 + <View style={styles.cellRightContainer}>
  47 + <Text style={{color:'#d0021b',fontSize:12*DEVICE_WIDTH_RATIO,marginRight:5*DEVICE_WIDTH_RATIO}}>逾期{dataSource.day}天</Text>
  48 + <TouchableOpacity style={styles.bankTip} onPress={() => Alert.alert('逾期服务费信息','如果您到期未还款：需要加收逾期利息费和延迟还款费\n逾期利息费：待还本金 *利息率*延迟还款天数，利息率=0.025%/天\n延迟还款费：逾期3天内还款免收延迟还款服务费，逾期4天，从第一天逾期开始算，500元之内，加收1元/天延迟还款服务费。每500元增加1元/天。',[
  49 + {text: '我知道了'},
  50 + ])} >
  51 + <Image style={{width:12*DEVICE_WIDTH_RATIO,height:12*DEVICE_WIDTH_RATIO,marginRight:5*DEVICE_WIDTH_RATIO}} source={require("../../image/red_question_icon.png")}/>
  52 + </TouchableOpacity>
  53 + <Image style={{marginRight:5*DEVICE_WIDTH_RATIO}} source={require("../../image/category_b_arrow.png")}/>
  54 + </View>
  55 + :<View style={styles.cellRightContainer}>
  56 + <Text style={{color:'#b0b0b0',fontSize:12*DEVICE_WIDTH_RATIO,marginRight:5*DEVICE_WIDTH_RATIO}}>剩余{dataSource.day}天</Text>
  57 + <Image style={{marginRight:5*DEVICE_WIDTH_RATIO}} source={require("../../image/category_b_arrow.png")}/>
  58 + </View>
  59 + }
  60 + </TouchableOpacity>
  61 +
  62 + </View>
  63 +
  64 + <View style={{
  65 + width: width,
  66 + height: 0.5 * DEVICE_WIDTH_RATIO,
  67 + backgroundColor: '#e5e5e5',
  68 + }}/>
  69 +
  70 + </View>
  71 + );
  72 + }
  73 +};
  74 +
  75 +let {width, height} = Dimensions.get('window');
  76 +const DEVICE_WIDTH_RATIO = width / 320;
  77 +
  78 +let styles = StyleSheet.create({
  79 + container: {
  80 + flex: 1,
  81 + backgroundColor: 'white',
  82 + alignItems: 'center',
  83 + width: width,
  84 + height: 61 * DEVICE_WIDTH_RATIO,
  85 + },
  86 + cellContainer: {
  87 + width: width,
  88 + height: 60.5 * DEVICE_WIDTH_RATIO,
  89 + flexDirection: 'row',
  90 + justifyContent: 'space-between',
  91 + },
  92 + checkboxIcon: {
  93 + width: 15 * DEVICE_WIDTH_RATIO,
  94 + height: 15 * DEVICE_WIDTH_RATIO,
  95 + marginLeft: 15 * DEVICE_WIDTH_RATIO,
  96 + },
  97 + cellLeftContainer: {
  98 + flexDirection: 'row',
  99 + width: 190 * DEVICE_WIDTH_RATIO,
  100 + alignItems: 'center',
  101 + },
  102 + priceContainer: {
  103 + width: 160 * DEVICE_WIDTH_RATIO,
  104 + height: 40 * DEVICE_WIDTH_RATIO,
  105 + marginTop: 10 * DEVICE_WIDTH_RATIO,
  106 + },
  107 + cellRightContainer: {
  108 + marginRight: 15 * DEVICE_WIDTH_RATIO,
  109 + height: 60 * DEVICE_WIDTH_RATIO,
  110 + alignItems: 'center',
  111 + flexDirection: 'row',
  112 + }
  113 +});
@@ -10,17 +10,18 @@ import { @@ -10,17 +10,18 @@ import {
10 InteractionManager, 10 InteractionManager,
11 NativeAppEventEmitter, 11 NativeAppEventEmitter,
12 Text, 12 Text,
  13 + ListView,
  14 + TouchableOpacity,
13 } from 'react-native' 15 } from 'react-native'
14 16
15 import {bindActionCreators} from 'redux'; 17 import {bindActionCreators} from 'redux';
16 import {connect} from 'react-redux'; 18 import {connect} from 'react-redux';
17 import {Map} from 'immutable'; 19 import {Map} from 'immutable';
18 -import * as installmentActions from '../reducers/installment/installmentActions';  
19 -import InstallmentStatus from '../components/installment/InstallmentStatus'; 20 +import * as cardListActions from '../reducers/bankCardList/cardListActions';
20 import ServerError from '../components/installment/ServerError'; 21 import ServerError from '../components/installment/ServerError';
21 22
22 const actions = [ 23 const actions = [
23 - installmentActions, 24 + cardListActions,
24 ]; 25 ];
25 function mapStateToProps(state) { 26 function mapStateToProps(state) {
26 return { 27 return {
@@ -42,20 +43,31 @@ function mapDispatchToProps(dispatch) { @@ -42,20 +43,31 @@ function mapDispatchToProps(dispatch) {
42 class InstallmentMyCardContainer extends Component { 43 class InstallmentMyCardContainer extends Component {
43 constructor(props) { 44 constructor(props) {
44 super(props); 45 super(props);
45 - this._onPressStatusPageBtn = this._onPressStatusPageBtn.bind(this);  
46 - this._reloadPage = this._reloadPage.bind(this); 46 + this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
47 } 47 }
48 componentDidMount() { 48 componentDidMount() {
  49 + this.props.actions.getBankCards();
49 } 50 }
50 51
51 52
52 - renderRow() {  
53 - this.props.actions.onPressStatusPageBtn(); 53 + renderRow(rowData, sectionID, rowID, highlightRow) {
  54 + // console.log(rowData)
  55 +
  56 + return (
  57 + <TouchableOpacity activeOpacity={1} onPress={() => this.props.onSelectCategory && this.props.onSelectCategory(rowData.toJS(),rowID)}>
  58 + <View style={styles.cardBg} >
  59 + <Image style={styles.cardNo} source={require('../image/bank/bank-CITIC.png')} />
  60 + <Text style={styles.cardNo} numberOfLines={1}>
  61 + {rowData}
  62 + </Text>
  63 + </View>
  64 + </TouchableOpacity>
  65 + );
54 } 66 }
55 67
56 render() { 68 render() {
57 69
58 - let cardList = ['11','22']; 70 + let cardList = ['65325165465321654','99999999999999'];
59 71
60 72
61 return ( 73 return (
@@ -75,6 +87,14 @@ let styles = StyleSheet.create({ @@ -75,6 +87,14 @@ let styles = StyleSheet.create({
75 flex: 1, 87 flex: 1,
76 }, 88 },
77 89
  90 + cardBg:{
  91 + backgroundColor: "#00ff00",
  92 + },
  93 +
  94 + cardNo:{
  95 +
  96 + }
  97 +
78 }); 98 });
79 99
80 export default connect(mapStateToProps, mapDispatchToProps)(InstallmentMyCardContainer); 100 export default connect(mapStateToProps, mapDispatchToProps)(InstallmentMyCardContainer);
  1 +'use strict';
  2 +
  3 +import ReactNative from 'react-native';
  4 +import InstallmentService from '../../services/InstallmentService';
  5 +
  6 +const {
  7 +
  8 +SET_TIP_MESSAGE,
  9 +SET_ERROR,
  10 +
  11 +GET_CARD_LIST_REQUEST,
  12 +GET_CARD_LIST_FAILURE,
  13 +GET_CARD_LIST_SUCCESS,
  14 +
  15 +
  16 +} = require('../../constants/actionTypes').default;
  17 +
  18 +
  19 +export function getCardListRequest(){
  20 + return {
  21 + type: GET_CARD_LIST_REQUEST,
  22 + }
  23 +}
  24 +
  25 +export function getCardListFailure(error){
  26 + return {
  27 + type: GET_CARD_LIST_FAILURE,
  28 + payload: error,
  29 + }
  30 +}
  31 +
  32 +export function getCardListSuccess(list){
  33 + return {
  34 + type: GET_CARD_LIST_SUCCESS,
  35 + payload: list,
  36 + }
  37 +}
  38 +
  39 +
  40 +export function getBankCards() {
  41 + return (dispatch, getState) => {
  42 + let {app, repayList} = getState();
  43 + let queryBankCards = (uid) => {
  44 + return new InstallmentService(app.host).getBankCards(uid)
  45 + .then(json => {
  46 + console.log("chenlin", JSON.stringify(json));
  47 + dispatch(getCardListSuccess(json));
  48 + })
  49 + .catch(error => {
  50 + console.log("chenlin", JSON.stringify(error));
  51 +
  52 + dispatch(setTipMessage(error.message || '暂未获取到数据'));
  53 + });
  54 + };
  55 +
  56 + ReactNative.NativeModules.YH_CommonHelper.uid()
  57 + .then(uid => {
  58 + console.log("chenlin", uid);
  59 +
  60 + queryBankCards(uid);
  61 + })
  62 + .catch(error => {
  63 +
  64 + console.log("chenlin", JSON.stringify(error));
  65 +
  66 + ReactNative.NativeModules.YH_CommonHelper.login()
  67 + .then(uid => {
  68 + queryBankCards(uid);
  69 + })
  70 + .catch(error => {
  71 +
  72 + });
  73 + });
  74 + };
  75 +}
  76 +
  77 +export function setTipMessage(message){
  78 + return {
  79 + type: SET_TIP_MESSAGE,
  80 + payload: message,
  81 + }
  82 +}
  1 +'use strict';
  2 +
  3 +import Immutable,{Record, List, Map} from 'immutable';
  4 +
  5 +let InitialState = Record({
  6 + isFetching: false,
  7 + queryDays: '',
  8 + repaymentList: List(),
  9 + formateData: Map(),
  10 + showBottom: true,
  11 + tipMessage: '',
  12 + bankCardsList: List(),
  13 + payCard: Map(),
  14 + showBankSafePayView: false,
  15 + showConfirmPayView: false,
  16 + repayTermList:List(),
  17 + prePaySuccessParam: Map(),
  18 + error: null,
  19 +});
  20 +
  21 +export default InitialState;
  1 +'use strict';
  2 +
  3 +import InitialState from './repayListInitialState';
  4 +import Immutable, {Map} from 'immutable';
  5 +
  6 +const {
  7 + SET_QUERY_DAYS,
  8 + SET_ERROR,
  9 +
  10 + QUERY_REPAYMENT_LIST_REQUEST,
  11 + QUERY_REPAYMENT_LIST_FAILURE,
  12 + QUERY_REPAYMENT_LIST_SUCCESS,
  13 + SET_FORMATE_DATA,
  14 + SET_TIP_MESSAGE,
  15 + UPDATE_REPAYMENT_LIST_AND_FORMATE_DATA,
  16 + SET_BANK_CARDS_LIST_AND_PAY_CARD,
  17 + SET_BANK_SAFE_PAY_VIEW_STATUS,
  18 + UPDATE_REPAY_TERM_LIST,
  19 + UPDATE_PREPAY_SUCCESS_PARAM,
  20 + SET_SHOW_CONFIRM_PAY_VIEW_STATUS,
  21 +
  22 +} = require('../../constants/actionTypes').default;
  23 +
  24 +const initialState = new InitialState;
  25 +
  26 +export default function appReducer(state = initialState, action) {
  27 + if (!(state instanceof InitialState)) return initialState.merge(state);
  28 +
  29 + switch (action.type) {
  30 + case SET_QUERY_DAYS:
  31 + return state.set('queryDays', action.payload);
  32 + case QUERY_REPAYMENT_LIST_REQUEST:
  33 + return state.set('isFetching', true)
  34 + .set('error', null);
  35 + case SET_ERROR:
  36 + case QUERY_REPAYMENT_LIST_FAILURE:
  37 + return state.set('isFetching', false)
  38 + .set('error',action.payload);
  39 + case UPDATE_REPAYMENT_LIST_AND_FORMATE_DATA:
  40 + return state.set('repaymentList', Immutable.fromJS(action.payload.repaymentList))
  41 + .set('formateData', Immutable.fromJS(action.payload.formateData));
  42 + case QUERY_REPAYMENT_LIST_SUCCESS:
  43 + return state.set('repaymentList', Immutable.fromJS(action.payload))
  44 + .set('isFetching', false);
  45 + case SET_FORMATE_DATA:
  46 + return state.set('formateData', Immutable.fromJS(action.payload));
  47 + case SET_TIP_MESSAGE:
  48 + return state.set('tipMessage', action.payload);
  49 + case SET_BANK_CARDS_LIST_AND_PAY_CARD:
  50 + return state.set('bankCardsList', Immutable.fromJS(action.payload))
  51 + .set('payCard', Immutable.fromJS(action.payload[0]));
  52 + case SET_BANK_SAFE_PAY_VIEW_STATUS:
  53 + return state.set('showBankSafePayView',action.payload);
  54 + case UPDATE_REPAY_TERM_LIST:
  55 + return state.set('repayTermList', Immutable.fromJS(action.payload));
  56 + case UPDATE_PREPAY_SUCCESS_PARAM:
  57 + return state.set('prePaySuccessParam',Immutable.fromJS(action.payload))
  58 + .set('showConfirmPayView', true);
  59 + case SET_SHOW_CONFIRM_PAY_VIEW_STATUS:
  60 + return state.set('showConfirmPayView', action.payload);
  61 + }
  62 +
  63 + return state;
  64 +}
@@ -221,7 +221,7 @@ export default class InstallmentService { @@ -221,7 +221,7 @@ export default class InstallmentService {
221 }); 221 });
222 } 222 }
223 223
224 -//还款列表获取银行卡信息 224 + //获取银行卡信息
225 async getBankCards(uid) { 225 async getBankCards(uid) {
226 return await this.api.get({ 226 return await this.api.get({
227 url: '', 227 url: '',
@@ -126,7 +126,6 @@ let styles = StyleSheet.create({ @@ -126,7 +126,6 @@ let styles = StyleSheet.create({
126 }, 126 },
127 priceText: { 127 priceText: {
128 width: width - productIconWidth - 60, 128 width: width - productIconWidth - 60,
129 - marginLeft: 3,  
130 fontSize: 13, 129 fontSize: 13,
131 color: 'black', 130 color: 'black',
132 marginTop: 15, 131 marginTop: 15,
@@ -134,7 +133,6 @@ let styles = StyleSheet.create({ @@ -134,7 +133,6 @@ let styles = StyleSheet.create({
134 }, 133 },
135 nameText: { 134 nameText: {
136 width: width - productIconWidth - 60, 135 width: width - productIconWidth - 60,
137 - marginLeft: 3,  
138 fontSize: 13, 136 fontSize: 13,
139 color: 'black', 137 color: 'black',
140 marginTop: 12, 138 marginTop: 12,