mobile / YH_RNComponent · Commits

Go to a project

Authored by 王海元
Commit c1a0eee4d94f05c79eaf0aeddfc287a3e0c8c857 1 parent b1b3eeb7

bind bank card --review by 孙凯

Inline Side-by-side
Showing 13 changed files with 1166 additions and 2 deletions
... ... @@ -15,6 +15,8 @@ import AllianceContainer from './containers/AllianceContainer';
import OrderIncomeContainer from './containers/OrderIncomeContainer';
import OrderDetailContainer from './containers/OrderDetailContainer';
import WithdrawalRecordContainer from './containers/WithdrawalRecordContainer';
import BankCardContainer from './containers/BankCardContainer';
import BankListContainer from './containers/BankListContainer';
import {setChannel, setHost, setPlatform, setServiceHost} from './reducers/app/appActions';
import {setOrderCode} from './reducers/alliance/allianceActions';
... ... @@ -66,6 +68,20 @@ export default function native(platform) {
<WithdrawalRecordContainer/>
</Provider>
);
} else if (type === 'bankCard') {
//为了不重新定义，此次的orderCode 含义 银行卡是否绑定的表示 1未绑定，2绑定
store.dispatch(setOrderCode(this.props.orderCode));
return (
<Provider store={store}>
<BankCardContainer/>
</Provider>
);
} else if (type === 'bankList') {
return (
<Provider store={store}>
<BankListContainer/>
</Provider>
);
} else {
return (
<Provider store={store}>
... ...
'use strict';
import React, {Component} from 'react';
import {Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {
Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules,
DeviceEventEmitter
} from 'react-native';
import {Immutable} from 'immutable';
import ProductListCell from '../../common/components/ListCell/ProductListCell';
... ... @@ -24,7 +27,21 @@ export default class Alliance extends Component {
});
}
componentDidMount() {
this.subscription = DeviceEventEmitter.addListener('BankCardBindSuccessEvent', () => {
this.props.refreshSettlementInfo && this.props.refreshSettlementInfo();
});
}
componentWillUnmount() {
this.subscription.remove();
}
_renderHeader() {
let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
let bindStyle = bindStatus ? {color: '#444444'} : {color: '#D0021B'};
let isBind = bindStatus ? '已绑定' : '未绑定';
let bindType = bindStatus ? '2' : '1'; // 2绑定，1未绑定
return (
<View>
<View style={styles.headerBackground}>
... ... @@ -44,7 +61,10 @@ export default class Alliance extends Component {
</View>
<View style={[styles.textView, {paddingRight: 30}]}>
<TouchableOpacity activeOpacity={1} onPress={() => {
NativeModules.YH_CommonHelper.logEvent('YB_SHARE_PROMOTION_WITHDRAW_C', {});
if(!bindStatus){
this.props.showHelpDialog && this.props.showHelpDialog('请先完成银行卡绑定');
return
}
if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) {
return
}
... ... @@ -68,6 +88,16 @@ export default class Alliance extends Component {
<Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
</View>
</TouchableOpacity>
<View style={styles.lineView}/>
<TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
}}>
<Text style={styles.hasWithDrawText}>我的银行卡</Text>
<View style={[styles.textView, {flexDirection: 'row', paddingRight: 15}]}>
<Text style={[styles.hasWithDrawText,bindStyle]}>{isBind}</Text>
<Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
</View>
</TouchableOpacity>
<View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
</View>
)
... ...
'use strict';
import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, Linking} from 'react-native';
import SureBankCardModal from "./SureBankCardModal";
export default class BankCard extends Component {
constructor(props) {
super(props);
this.renderUnBind = this.renderUnBind.bind(this);
this.state = {
isShow: false,
isUpdate: false,
messageTips: "",
isBand: '',
name: '',
number: '',
bankName: '',
bankCode: '',
cardNo: ''
}
}
componentDidMount() {
this.subscription = DeviceEventEmitter.addListener('BankSelectEvent', (events) => {
this.setState({
bankCode: events.get('bankCode'),
bankName: events.get('bankName'),
});
});
}
componentWillUnmount() {
this.subscription.remove();
}
getCardNo(){
let cardNo = this.props.bankCardInfo.bankCardNo;
if (cardNo && cardNo.length > 11){
let sub = cardNo.substring(11);
let cardNoNew = sub.substring(0, 1) + " ";
for (var i = 1; i < sub.length; i++) {
cardNoNew += sub[i];
if (i%4 === 0){
cardNoNew += " ";
}
}
cardNo = cardNoNew;
}
return cardNo;
}
checkInfo(){
let name = this.state.name;
let re = /[^\u4e00-\u9fa5]/; //(中文2-4)
if (!name || name.length < 2 || re.test(name)) {
this.setState({messageTips: '您输入的姓名不符合规范，请重新输入'});
return
}
let idNo = this.state.number; //(15||18||(17+x))
let reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
if(!idNo || reg.test(idNo) === false) {
this.setState({messageTips: '您输入的身份证号码不符合规范，请重新输入'});
return
}
if (!this.state.bankCode) {
this.setState({messageTips: '请选择开户行'});
return
}
let cardNo = this.state.cardNo; //16-19
if (!cardNo || cardNo.length < 16) {
this.setState({messageTips: '您输入的银行卡号不符合规范，请重新输入'});
return
}
this.setState({messageTips: '', isUpdate: true});
this.props.checkBankCard && this.props.checkBankCard(this.state.name, this.state.number, this.state.bankCode, this.state.cardNo);
}
renderUnBind() {
let checkMessage = this.state.messageTips || this.props.checkBankCardResult.message;
if (this.state.isShow) {
return (
<View>
<Text style={[styles.wordText, {color: '#444444', marginTop: 24, marginLeft: 15, marginBottom: 10}]}>请添加持卡人本人的银行卡</Text>
<View style={styles.inputView}>
<Text style={[styles.wordText, {width: 76, color: '#444444'}]}>持卡人</Text>
<TextInput
ref="nameInput"
style={[styles.wordText, {width: 200, color: '#444444'}]}
maxLength={4}
placeholder="请输入持卡人姓名"
placeholderTextColor='#b0b0b0'
underlineColorAndroid='transparent'
onChangeText={(name) => {this.setState({name})}}/>
</View>
<View style={styles.lineView}/>
<View style={styles.inputView}>
<Text style={[styles.wordText, {width: 76, color: '#444444'}]}>身份证号</Text>
<TextInput
ref="nameInput"
style={[styles.wordText, {width: 200, color: '#444444'}]}
maxLength={18}
placeholder="请输入身份证号"
placeholderTextColor='#b0b0b0'
underlineColorAndroid='transparent'
onChangeText={(number) => {this.setState({number})}}/>
</View>
<View style={styles.lineView}/>
<View style={styles.inputView}>
<Text style={[styles.wordText, {width: 76, color: '#444444'}]}>开户行</Text>
<TouchableOpacity style={{flexDirection: 'row', height: 44, alignItems: 'center',}} activeOpacity={0.8}
onPress={() => {
this.props.jumpWithUrl && this.props.jumpWithUrl('开户行', 'bankList');
}}>
<Text style={[styles.wordText, {
width: 260, paddingLeft: 12,
color: this.state.bankName === '' ? '#b0b0b0' : '#444444'
}]}>{this.state.bankName === '' ? '请选择开户行' : this.state.bankName}</Text>
<Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
</TouchableOpacity>
</View>
<View style={styles.lineView}/>
<View style={styles.inputView}>
<Text style={[styles.wordText, {width: 76, color: '#444444'}]}>银行卡号</Text>
<TextInput
ref="nameInput"
style={[styles.wordText, {width: 200, color: '#444444'}]}
maxLength={19}
placeholder="请输入银行卡号"
placeholderTextColor='#b0b0b0'
keyboardType="numeric"
underlineColorAndroid='transparent'
onChangeText={(cardNo) => {this.setState({cardNo});}}/>
</View>
<Text style={[styles.wordText, {color: '#D0021B', marginTop: 16, marginLeft: 15, marginBottom: 10}]}>{checkMessage}</Text>
<TouchableOpacity style={styles.submitBtn} activeOpacity={0.8} onPress={() => {
this.checkInfo();
}}>
<Text style={styles.submitText}>确定</Text>
</TouchableOpacity>
</View>
);
} else {
return (
<View style={{alignItems: 'center'}}>
<View style={styles.contentContainer}>
<Text style={[styles.wordText, {marginTop: 45, marginLeft: 37}]}>没有绑定银行卡的用户将无法提现！</Text>
<TouchableOpacity onPress={() => {this.setState({isShow: true});}}>
<View style={styles.addView}>
<Text style={[styles.wordText, {textAlign: 'center'}]}>添加银行卡</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
}
render() {
let {
status,
isShowDialog,
bankCardInfo,
checkBankCardResult,
} = this.props;
if (this.state.isUpdate && bankCardInfo.name){
DeviceEventEmitter.emit('BankCardBindSuccessEvent');
}
return (
<View style={styles.container}>
<SureBankCardModal
isShow={isShowDialog}
checkBankCardResult={checkBankCardResult}
hiddenSureDialog={this.props.hiddenSureDialog}
bindBankCard={this.props.bindBankCard}/>
{status === '2' || bankCardInfo.name ?
<View style={{alignItems: 'center'}}>
<View style={styles.contentContainer}>
<Text style={[styles.bankText, {marginTop: 20, marginLeft: 20}]}>{bankCardInfo.bankName}</Text>
<View style={styles.infoView}>
<Text style={[styles.bankText, {height: 29, paddingTop: 2, fontSize: 24, textAlign: 'center'}]}>**** </Text>
<Text style={[styles.bankText, {height: 29, paddingTop: 2, fontSize: 24, textAlign: 'center'}]}>**** </Text>
<Text style={[styles.bankText, {height: 29, paddingTop: 2, fontSize: 24, textAlign: 'center'}]}>***</Text>
<Text style={[styles.bankText, {fontSize: 24, textAlign: 'center'}]}>{this.getCardNo()}</Text>
</View>
<Text style={[styles.wordText, {marginTop: 20, marginLeft: 20}]}>持卡人：{bankCardInfo.name}</Text>
</View>
<Text style={[styles.wordText, {color: '#444444', marginTop: 5}]}>更换银行卡请致电官方客服</Text>
<TouchableOpacity activeOpacity={0.5} onPress={() => {
Linking.openURL('tel:400-889-9646')
}}>
<Text style={[styles.wordText, {color: '#D0021B', marginTop: 7}]}>400-889-9646</Text>
<View style={{height: 1, backgroundColor: '#D0021B', width: 89, marginTop: -4}}/>
</TouchableOpacity>
</View>
: this.renderUnBind()
}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f0f0f0',
},
contentContainer: {
width: 295,
height: 158,
margin: 40,
borderRadius: 5,
shadowColor: 'rgba(0,0,0,0.16)',
backgroundColor: '#363636',
},
lineView: {
width: width,
height: 0.5,
backgroundColor: '#e0e0e0'
},
wordText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 14,
color: 'white',
letterSpacing: -0.19,
},
addView: {
width: 108,
height: 30,
marginTop: 21,
marginLeft: 94,
borderRadius: 2,
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
bankText: {
fontFamily: 'PingFang-SC-Medium',
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
infoView: {
width: 295,
height: 29,
marginTop: 20,
paddingLeft: 20,
paddingRight: 32,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
inputView: {
width: width,
height: 44,
paddingLeft: 15,
flexDirection: 'row',
backgroundColor: 'white',
alignItems: 'center',
},
arrowImage: {
width: 16,
height: 16,
marginLeft: 2,
},
submitBtn: {
width: width - 30,
marginLeft: 15,
marginRight: 15,
height: 50,
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#444444',
},
submitText: {
textAlign: 'center',
color: 'white',
fontSize: 16
}
});
... ...
'use strict';
import React, {Component} from 'react';
import {Dimensions, ListView, StyleSheet, Text, TouchableOpacity, View, DeviceEventEmitter} from 'react-native';
import {Immutable} from "immutable";
import ReactNative from "react-native";
export default class BankList extends Component {
constructor(props) {
super(props);
this._renderRow = this._renderRow.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
}
_renderRow(rowData, sectionID, rowID) {
return (
<View>
<TouchableOpacity style={styles.rowView} activeOpacity={1} onPress={() => {
DeviceEventEmitter.emit('BankSelectEvent', rowData);
ReactNative.NativeModules.YH_CommonHelper.goBack();
}}>
<Text style={styles.wordText}>{rowData.get('bankName')}</Text>
</TouchableOpacity>
<View style={styles.lineView}/>
</View>
);
}
render() {
let {bankListInfo} = this.props;
let bankList = bankListInfo.bankList ? bankListInfo.bankList.toArray() : [];
return (
<View style={styles.container}>
<ListView
ref={(c) => {
this.listView = c;
}}
contentContainerStyle={styles.contentContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(bankList)}
renderRow={this._renderRow}/>
</View>
);
}
}
let {width} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f0f0f0',
},
contentContainer: {
width: width,
},
rowView: {
width: width,
height: 39.5,
paddingLeft: 15,
paddingRight: 15,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white'
},
lineView: {
width: width,
height: 0.5,
backgroundColor: '#e0e0e0'
},
wordText: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 14,
color: '#444444',
letterSpacing: -0.19,
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
TouchableOpacity,
Modal,
} = ReactNative;
export default class SureBankCardModal extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
visible={this.props.isShow}
animationType={'none'}
transparent={true}
onRequestClose={() => {
}}>
<View style={styles.modalContainer}>
<View style={styles.modalView}>
<View style={styles.confirmTitleContainer}>
<Text style={[styles.sure, {marginTop: 20}]}>提示</Text>
<Text style={styles.confirmContent}>请确认您填写的银行信息，提交后只能致电客服修改</Text>
</View>
<Text style={styles.confirmInfo}>持卡人：{this.props.checkBankCardResult.name}</Text>
<Text style={styles.confirmInfo}>身份证号：{this.props.checkBankCardResult.idCardNo}</Text>
<Text style={styles.confirmInfo}>银行卡号：{this.props.checkBankCardResult.bankCardNo}</Text>
<View style={{width: '100%', height: 0.5, marginTop: 20, backgroundColor: '#e0e0e0'}}/>
<View style={styles.confirmBtnContainer}>
<TouchableOpacity
style={{width: '49%', alignItems: 'center', justifyContent: 'center', height: 45.5}}
onPress={() => {
this.props.hiddenSureDialog && this.props.hiddenSureDialog();
this.props.bindBankCard && this.props.bindBankCard(this.props.checkBankCardResult);
}}>
<Text style={styles.sure}>确定</Text>
</TouchableOpacity>
<View style={{width: 0.5, height: 45, backgroundColor: '#e0e0e0'}}/>
<TouchableOpacity
style={{width: '49%', alignItems: 'center', justifyContent: 'center', height: 45.5}}
onPress={() => {
this.props.hiddenSureDialog && this.props.hiddenSureDialog();
}}>
<Text style={styles.cancel}>取消</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
modalContainer: {
flex: 1,
width: width,
height: height,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.4)',
},
modalView: {
width: 270,
borderRadius: 5,
backgroundColor: '#ffffff',
},
confirmBtnContainer: {
width: '100%',
height: 44.5,
flexDirection: 'row',
},
confirmTitleContainer: {
alignItems: 'center'
},
confirmInfo: {
color: '#B0B0B0',
fontSize: 12,
paddingLeft: 44,
letterSpacing: -0.07,
fontFamily: 'PingFang-SC-Regular',
},
confirmContent: {
marginLeft: 30,
marginRight: 30,
marginBottom: 20,
color: '#444444',
fontSize: 14,
lineHeight: 23,
textAlign: 'center',
letterSpacing: -0.09,
fontFamily: 'PingFang-SC-Regular',
includeFontPadding: false,
},
cancel: {
fontSize: 17,
color: '#444444',
letterSpacing: -0.41,
fontFamily: 'PingFang-SC-Regular',
},
sure: {
fontSize: 17,
color: '#D0021B',
letterSpacing: -0.41,
fontWeight: 'bold',
fontFamily: 'PingFang-SC-Regular',
},
});
... ...
... ... @@ -18,6 +18,9 @@ export default keyMirror({
SHOW_WITHDRAW_DIALOG: null,
DISMISS_WITHDRAW_DIALOG: null,
SHOW_BANK_INFO_DIALOG: null,
DISMISS_BANK_INFO_DIALOG: null,
SETTLEMENT_INFO_REQUEST: null,
SETTLEMENT_INFO_SUCCESS: null,
SETTLEMENT_INFO_FAILURE: null,
... ... @@ -49,4 +52,20 @@ export default keyMirror({
TOP_LIST_REQUEST: null,
TOP_LIST_SUCCESS: null,
TOP_LIST_FAILURE: null,
GET_BANK_CARD_REQUEST: null,
GET_BANK_CARD_SUCCESS: null,
GET_BANK_CARD_FAILURE: null,
GET_BANK_LIST_REQUEST: null,
GET_BANK_LIST_SUCCESS: null,
GET_BANK_LIST_FAILURE: null,
CHECK_BANK_CARD_REQUEST: null,
CHECK_BANK_CARD_SUCCESS: null,
CHECK_BANK_CARD_FAILURE: null,
BIND_BANK_CARD_REQUEST: null,
BIND_BANK_CARD_SUCCESS: null,
BIND_BANK_CARD_FAILURE: null,
});
... ...
... ... @@ -55,6 +55,7 @@ class AllianceContainer extends Component {
this._onPressProduct = this._onPressProduct.bind(this);
this._resourceJumpWithUrl = this._resourceJumpWithUrl.bind(this);
this._onEndReached = this._onEndReached.bind(this);
this._refreshSettlementInfo = this._refreshSettlementInfo.bind(this);
AsyncStorage.getItem(AsyncStorageKey, (error, value) => {
if (error) {
... ... @@ -132,6 +133,11 @@ class AllianceContainer extends Component {
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
//重新请求信息，更新银行卡绑定状态
_refreshSettlementInfo() {
this.props.actions.getSettlementInfo();
}
_resourceJumpWithUrl(url) {
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
... ... @@ -197,6 +203,7 @@ class AllianceContainer extends Component {
showWithdrawalDialog={this._showWithDrawDialog}
hiddenWithDrawDialog={this._hiddenWithDrawDialog}
jumpWithUrl={this._jumpWithUrl}
refreshSettlementInfo={this._refreshSettlementInfo}
resourceJumpWithUrl={this._resourceJumpWithUrl}
onPressProduct={this._onPressProduct}
onEndReached={this._onEndReached}
... ...
'use strict';
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as allianceActions from '../reducers/alliance/allianceActions';
import ReactNative, {StyleSheet, View} from "react-native";
import BankCard from "../components/BankCard";
import LoadingIndicator from '../../common/components/LoadingIndicator';
const actions = [
allianceActions,
];
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 BankCardContainer extends Component {
constructor(props) {
super(props);
this.state = {
isBand: '',
};
this._jumpWithUrl = this._jumpWithUrl.bind(this);
this._hiddenSureDialog = this._hiddenSureDialog.bind(this);
this._checkBankCard = this._checkBankCard.bind(this);
this._bindBankCard = this._bindBankCard.bind(this);
}
componentDidMount() {
if (this.props.alliance.orderCode === '2') {
this.props.actions.getBankInfo();
}
}
componentWillUnmount() {
}
_jumpWithUrl(title = '', type = '') {
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.minealliance","params":{"title":"${title}","type":"${type}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
_checkBankCard(name, idCardNo, bankCode, bankCardNo) {
this.props.actions.checkBankCard(name, idCardNo, bankCode, bankCardNo);
}
_bindBankCard(bankInfo) {
this.props.actions.bindBankCard(bankInfo.name, bankInfo.idCardNo, bankInfo.bankCode, bankInfo.bankCardNo);
}
_hiddenSureDialog() {
this.props.actions.hiddenBankInfoDialog();
}
render() {
let {orderCode, getBankCardInfo, checkBankCardResult, showBankInfoDialog} = this.props.alliance;
let isFetching = getBankCardInfo.isFetching;
return (
<View style={styles.container}>
<BankCard
status = {orderCode}
isShowDialog={showBankInfoDialog}
bankCardInfo={getBankCardInfo}
checkBankCardResult = {checkBankCardResult}
jumpWithUrl={this._jumpWithUrl}
hiddenSureDialog={this._hiddenSureDialog}
checkBankCard={this._checkBankCard}
bindBankCard={this._bindBankCard}/>
<LoadingIndicator isVisible={isFetching}/>
</View>
)
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default connect(mapStateToProps, mapDispatchToProps)(BankCardContainer);
... ...
'use strict';
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as allianceActions from '../reducers/alliance/allianceActions';
import {StyleSheet, View,} from "react-native";
import BankList from "../components/BankList";
import LoadingIndicator from '../../common/components/LoadingIndicator';
const actions = [
allianceActions,
];
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 BankListContainer extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.actions.getBankList();
}
componentWillUnmount() {
}
render() {
let {bankListInfo} = this.props.alliance;
let isFetching = bankListInfo.isFetching;
return (
<View style={styles.container}>
<BankList bankListInfo={bankListInfo}/>
<LoadingIndicator isVisible={isFetching}/>
</View>
)
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default connect(mapStateToProps, mapDispatchToProps)(BankListContainer);
... ...
... ... @@ -15,6 +15,9 @@ const {
SHOW_WITHDRAW_DIALOG,
DISMISS_WITHDRAW_DIALOG,
SHOW_BANK_INFO_DIALOG,
DISMISS_BANK_INFO_DIALOG,
SET_ORDER_CODE,
SETTLEMENT_INFO_REQUEST,
... ... @@ -49,6 +52,22 @@ const {
TOP_LIST_SUCCESS,
TOP_LIST_FAILURE,
GET_BANK_CARD_REQUEST,
GET_BANK_CARD_SUCCESS,
GET_BANK_CARD_FAILURE,
GET_BANK_LIST_REQUEST,
GET_BANK_LIST_SUCCESS,
GET_BANK_LIST_FAILURE,
CHECK_BANK_CARD_REQUEST,
CHECK_BANK_CARD_SUCCESS,
CHECK_BANK_CARD_FAILURE,
BIND_BANK_CARD_REQUEST,
BIND_BANK_CARD_SUCCESS,
BIND_BANK_CARD_FAILURE,
} = require('../../constants/actionTypes').default;
export function showHelpDialog() {
... ... @@ -87,6 +106,18 @@ export function hiddenWithDrawDialog() {
}
}
export function showBankInfoDialog() {
return {
type: SHOW_BANK_INFO_DIALOG,
}
}
export function hiddenBankInfoDialog() {
return {
type: DISMISS_BANK_INFO_DIALOG,
}
}
export function setOrderCode(orderCode) {
return {
type: SET_ORDER_CODE,
... ... @@ -254,6 +285,86 @@ export function topListFailure(error) {
};
}
export function getBankInfoRequest() {
return {
type: GET_BANK_CARD_REQUEST,
};
}
export function getBankInfoSuccess(json) {
return {
type: GET_BANK_CARD_SUCCESS,
payload: json
};
}
export function getBankInfoFailure(error) {
return {
type: GET_BANK_CARD_FAILURE,
payload: error
};
}
export function getBankListRequest() {
return {
type: GET_BANK_LIST_REQUEST,
};
}
export function getBankListSuccess(json) {
return {
type: GET_BANK_LIST_SUCCESS,
payload: json
};
}
export function getBankListFailure(error) {
return {
type: GET_BANK_LIST_FAILURE,
payload: error
};
}
export function checkBankCardRequest() {
return {
type: CHECK_BANK_CARD_REQUEST,
};
}
export function checkBankCardSuccess(json) {
return {
type: CHECK_BANK_CARD_SUCCESS,
payload: json
};
}
export function checkBankCardFailure(error) {
return {
type: CHECK_BANK_CARD_FAILURE,
payload: error
};
}
export function bindBankCardRequest() {
return {
type: BIND_BANK_CARD_REQUEST,
};
}
export function bindBankCardSuccess(json) {
return {
type: BIND_BANK_CARD_SUCCESS,
payload: json
};
}
export function bindBankCardFailure(error) {
return {
type: BIND_BANK_CARD_FAILURE,
payload: error
};
}
export function getSettlementInfo() {
return (dispatch, getState) => {
let {app} = getState();
... ... @@ -522,6 +633,108 @@ export function getTop100List() {
};
}
export function getBankInfo() {
return (dispatch, getState) => {
let {app} = getState();
let fetchGetBankInfo = (uid) => {
dispatch(getBankInfoRequest());
return new AllianceService(app.host).fetchBankCard(uid)
.then(json => {
dispatch(getBankInfoSuccess(json));
})
.catch(error => {
dispatch(getBankInfoFailure(error));
});
};
let uid = 0;
ReactNative.NativeModules.YH_CommonHelper.uid()
.then(uid => {
fetchGetBankInfo(uid)
})
.catch(error => {
fetchGetBankInfo(uid)
});
};
}
export function getBankList() {
return (dispatch, getState) => {
let {app} = getState();
let fetchGetBankList = (uid) => {
dispatch(getBankListRequest());
return new AllianceService(app.host).fetchBankList(uid)
.then(json => {
dispatch(getBankListSuccess(json));
})
.catch(error => {
dispatch(getBankListFailure(error));
});
};
let uid = 0;
ReactNative.NativeModules.YH_CommonHelper.uid()
.then(uid => {
fetchGetBankList(uid)
})
.catch(error => {
fetchGetBankList(uid)
});
};
}
export function checkBankCard(name, idCardNo, bankCode, bankCardNo) {
return (dispatch, getState) => {
let {app} = getState();
let fetchCheckBankCard = (uid) => {
dispatch(checkBankCardRequest());
return new AllianceService(app.host).fetchCheckBankCard(uid, name, idCardNo, bankCode, bankCardNo)
.then(json => {
dispatch(showBankInfoDialog());
dispatch(checkBankCardSuccess(json)); //校验成功后，显示二次确认弹框
})
.catch(error => {
dispatch(checkBankCardFailure(error));
});
};
let uid = 0;
ReactNative.NativeModules.YH_CommonHelper.uid()
.then(uid => {
fetchCheckBankCard(uid)
})
.catch(error => {
fetchCheckBankCard(uid)
});
};
}
export function bindBankCard(name, idCardNo, bankCode, bankCardNo) {
return (dispatch, getState) => {
let {app} = getState();
let fetchBindBankCard = (uid) => {
dispatch(bindBankCardRequest());
return new AllianceService(app.host).fetchBindBankCard(uid, name, idCardNo, bankCode, bankCardNo)
.then(json => {
dispatch(getBankInfo());//绑定成功后，请求银行卡信息
dispatch(bindBankCardSuccess(json));
})
.catch(error => {
dispatch(bindBankCardFailure(error));
});
};
let uid = 0;
ReactNative.NativeModules.YH_CommonHelper.uid()
.then(uid => {
fetchBindBankCard(uid)
})
.catch(error => {
fetchBindBankCard(uid)
});
};
}
function exposeProductListData(json) {
let list = json ? json.product_list : [];
let res = json;
... ...
... ... @@ -8,6 +8,7 @@ let InitialState = Record({
showHelpDialog: false,
showSureDialog: false,
showWithdrawalDialog: false,
showBankInfoDialog: false,
settlementInfo: new (Record({
isFetching: false,
... ... @@ -77,6 +78,36 @@ let InitialState = Record({
endReached: false, //到达底部
product_list: List(),
})),
getBankCardInfo: new (Record({
isFetching: false,
error: null,
name: null,
bankName: null,
bankCardNo: null,
})),
bankListInfo: new (Record({
isFetching: false,
error: null,
bankList: Map(),
})),
checkBankCardResult: new (Record({
isFetching: false,
message: null,
name: null,
idCardNo: null,
bankCardNo: null,
bankCode: null,
error: null,
})),
bindBankCardResult: new (Record({
isFetching: false,
error: null,
})),
});
export default InitialState;
... ...
... ... @@ -13,6 +13,9 @@ const {
SHOW_WITHDRAW_DIALOG,
DISMISS_WITHDRAW_DIALOG,
SHOW_BANK_INFO_DIALOG,
DISMISS_BANK_INFO_DIALOG,
SET_ORDER_CODE,
SETTLEMENT_INFO_REQUEST,
... ... @@ -47,6 +50,22 @@ const {
TOP_LIST_SUCCESS,
TOP_LIST_FAILURE,
GET_BANK_CARD_REQUEST,
GET_BANK_CARD_SUCCESS,
GET_BANK_CARD_FAILURE,
GET_BANK_LIST_REQUEST,
GET_BANK_LIST_SUCCESS,
GET_BANK_LIST_FAILURE,
CHECK_BANK_CARD_REQUEST,
CHECK_BANK_CARD_SUCCESS,
CHECK_BANK_CARD_FAILURE,
BIND_BANK_CARD_REQUEST,
BIND_BANK_CARD_SUCCESS,
BIND_BANK_CARD_FAILURE,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
... ... @@ -78,6 +97,13 @@ export default function couponReducer(state = initialState, action) {
return state.set('showWithdrawalDialog', false);
}
case SHOW_BANK_INFO_DIALOG: {
return state.set('showBankInfoDialog', true);
}
case DISMISS_BANK_INFO_DIALOG: {
return state.set('showBankInfoDialog', false);
}
case SET_ORDER_CODE: {
return state.set('orderCode', action.payload);
}
... ... @@ -252,6 +278,88 @@ export default function couponReducer(state = initialState, action) {
return state.setIn(['topList', 'isFetching'], false)
.setIn(['topList', 'error'], action.payload);
}
case GET_BANK_CARD_REQUEST: {
return state.setIn(['getBankCardInfo', 'isFetching'], true)
.setIn(['getBankCardInfo', 'error'], action.payload);
}
case GET_BANK_CARD_SUCCESS: {
let {
name,
bankName,
bankCardNo,
} = action.payload;
return state.setIn(['getBankCardInfo', 'isFetching'], false)
.setIn(['getBankCardInfo', 'name'], name)
.setIn(['getBankCardInfo', 'bankName'], bankName)
.setIn(['getBankCardInfo', 'bankCardNo'], bankCardNo)
.setIn(['getBankCardInfo', 'error'], null);
}
case GET_BANK_CARD_FAILURE: {
return state.setIn(['getBankCardInfo', 'isFetching'], false)
.setIn(['getBankCardInfo', 'error'], null);
}
case GET_BANK_LIST_REQUEST: {
return state.setIn(['bankListInfo', 'isFetching'], true)
.setIn(['bankListInfo', 'error'], action.payload);
}
case GET_BANK_LIST_SUCCESS: {
return state.setIn(['bankListInfo', 'isFetching'], false)
.setIn(['bankListInfo', 'bankList'], Immutable.fromJS(action.payload))
.setIn(['bankListInfo', 'error'], null);
}
case GET_BANK_LIST_FAILURE: {
return state.setIn(['bankListInfo', 'isFetching'], false)
.setIn(['bankListInfo', 'error'], null);
}
case CHECK_BANK_CARD_REQUEST: {
return state.setIn(['checkBankCardResult', 'isFetching'], true)
.setIn(['checkBankCardResult', 'error'], action.payload);
}
case CHECK_BANK_CARD_SUCCESS: {
let {
name,
idCardNo,
bankCode,
bankCardNo,
} = action.payload;
return state.setIn(['checkBankCardResult', 'isFetching'], false)
.setIn(['checkBankCardResult', 'name'], name)
.setIn(['checkBankCardResult', 'idCardNo'], idCardNo)
.setIn(['checkBankCardResult', 'bankCode'], bankCode)
.setIn(['checkBankCardResult', 'bankCardNo'], bankCardNo)
.setIn(['checkBankCardResult', 'message'], null)
.setIn(['checkBankCardResult', 'error'], null);
}
case CHECK_BANK_CARD_FAILURE: {
let message = action.payload && action.payload.message ? action.payload.message : null;
return state.setIn(['checkBankCardResult', 'isFetching'], false)
.setIn(['checkBankCardResult', 'message'], message)
.setIn(['checkBankCardResult', 'error'], null);
}
case BIND_BANK_CARD_REQUEST: {
return state.setIn(['bindBankCardResult', 'isFetching'], true)
.setIn(['bindBankCardResult', 'error'], action.payload);
}
case BIND_BANK_CARD_SUCCESS: {
return state.setIn(['bindBankCardResult', 'isFetching'], false)
.setIn(['bindBankCardResult', 'error'], null);
}
case BIND_BANK_CARD_FAILURE: {
return state.setIn(['bindBankCardResult', 'isFetching'], false)
.setIn(['bindBankCardResult', 'error'], null);
}
}
return state;
... ...
... ... @@ -161,4 +161,80 @@ export default class AllianceService {
});
}
//(查询绑定的银行卡)
async fetchBankCard(uid) {
return await this.api.get({
url: '',
body: {
uid,
method: 'app.union.shareOrder.getBankCard',
}
})
.then((json) => {
return json;
})
.catch((error) => {
throw(error);
});
}
//(获取银行列表)
async fetchBankList(uid) {
return await this.api.get({
url: '',
body: {
uid,
method: 'app.union.shareOrder.getBankList',
}
})
.then((json) => {
return json;
})
.catch((error) => {
throw(error);
});
}
//(校验绑卡信息)
async fetchCheckBankCard(uid, name, idCardNo, bankCode, bankCardNo) {
return await this.api.get({
url: '',
body: {
uid,
name,
idCardNo,
bankCode,
bankCardNo,
method: 'app.union.shareOrder.checkBankCard',
}
})
.then((json) => {
return json;
})
.catch((error) => {
throw(error);
});
}
//(绑定银行卡)
async fetchBindBankCard(uid, name, idCardNo, bankCode, bankCardNo) {
return await this.api.get({
url: '',
body: {
uid,
name,
idCardNo,
bankCode,
bankCardNo,
method: 'app.union.shareOrder.bindBankCard',
}
})
.then((json) => {
return json;
})
.catch((error) => {
throw(error);
});
}
}
... ...