npmchenwei111/app/screens/BindCardScreen.js

test1111

/**
 * 绑定银行卡
 */

import React, { Component } from 'react'
import { DeviceEventEmitter, ScrollView, StyleSheet, View } from 'react-native'

import YTShowToast from '../../src/native/YTShowToast'

import SubmitBtnRadius from '../public/authentication/views/SubmitBtnRadius'
import BillDetailFormLabel from '../views/bindcard/BillDetailFormLabel'
import FormInputText from '../views/bindcard/FormInputText'
import CardTitle from '../views/bindcard/CardTitleView'
import FormInputSelect from '../views/bindcard/FormInputSelectView'
import YTInvokeCommonDialog from '../../src/native/YTInvokeCommonDialog'
import ActionBar from '../bar/ActionBar'
import EmitterReactEvent from '../constant/EmitterReactEvent'
import { px2dp } from '../utils/Px2dp'
import YTInvokeLoanPayBackH5 from '../../src/native/public/YTInvokeLoanPayBackH5'
import OpenApi from '../api/OpenApi'
import R from '../assets/R'
import RequestSimplify from '../utils/RequestSimplify'

class BindCardScreen extends Component {

  //fromType// 0,1,2

  constructor (props) {
    super(props)
    this.state = {
      btnData: {
        text: '下一步',
        enable: true
      },
      params: {
        bankName: '',
        bankCard: '',
        mobile: '',
        userName: '',
        bankInfo: [],
        selectBankId: 0
      },
    }
  }

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        title: '绑定银行卡'
      }}
    />
  })

  componentDidMount () {
    this.getData()
  }

  getData () {
    let {companyId} = this.props.navigation.state.params || {}
    RequestSimplify.fetch(OpenApi.get_bankcard_bank, {companyId}, (res) => {
      let data = res.data
      this.setState({
        params: {
          ...this.state.params,
          mobile: data.mobile,
          userName: data.userName,
          bankInfo: data.bankInfo
        }
      })
    })
  }

  handleSubmit () {

    if (this.state.params.selectBankId === -1) {
      YTShowToast.show('请选择开户行', YTShowToast.SHORT)
      return false
    }

    if (this.state.params.mobile.length < 11) {
      YTShowToast.show('请输入正确的手机号', YTShowToast.SHORT)
      return false
    }

    if (!this.state.params.bankCard) {
      YTShowToast.show('请输入银行卡号', YTShowToast.SHORT)
      return false
    }

    RequestSimplify.fetch(OpenApi.submit_bankcard, {
      orderNo: this.props.navigation.state.params.orderNo,
      bankCard: this.state.params.bankCard,
      openBank: this.state.params.selectBankId,
      userName: this.state.params.userName,
      userMobile: this.state.params.mobile
    }, (res) => {
      if (res.data.bindBankType === 3) {
        // show input dialog
        YTInvokeCommonDialog.showSingleInputDialog('短信验证码', '请输入收到的验证码', '确定', '请输入验证码').then((value) => {
            if (value) {
              this.submitBankCardMsg(value)
            } else {
              YTShowToast.show('验证码为空')
            }
          }
        ).catch(reject => {
          console.log(`BindCard handleSubmit YTInvokeCommonDialog failed because of ${reject}`)
        })
      } else if (res.data.bindBankType === 2) {
        // jump to H5 bind card
        YTInvokeLoanPayBackH5.jump(`${res.data.bindCardUrl}`, '绑定银行卡').then(success => {
          this.jumpToOrderDetail()
        }).catch(error => {
          YTShowToast.show('绑卡失败')
        })
      } else {
        this.jumpToOrderDetail()
      }
    })
  }

  submitBankCardMsg (authCode) {
    RequestSimplify.fetch(OpenApi.submit_bankcard_msg, {
      companyId: this.props.navigation.state.params.companyId,
      authCode: authCode,
      orderNo: this.props.navigation.state.params.orderNo
    }, (res) => {
      this.jumpToOrderDetail()
    })
  }

  jumpToOrderDetail () {
    this.props.navigation.goBack()
    DeviceEventEmitter.emit(EmitterReactEvent.REFRESH_ORDER_DETAIL)
  }

  handleInputChange (text) {
    this.setState({
      params: {
        ...this.state.params,
        bankCard: text
      }
    })
  }

  handleMobileChange (text) {
    this.setState({
      params: {
        ...this.state.params,
        mobile: text
      }
    })
  }

  changeSelect (index) {

    this.setState({
      params: {
        ...this.state.params,
        selectBankId: this.state.params.bankInfo[index].id
      }
    }, () => {
      console.log(this.state, 'bankId')
    })

  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.formWrap}>
            <CardTitle
              style={{paddingVertical: px2dp(18), paddingHorizontal: px2dp(10), color: R.color.font_white_gray}}
              content="请添加收款银行卡"/>
            <BillDetailFormLabel title="持卡人" content={this.state.params.userName}/>
            <FormInputText keyboardType="numeric"
                           title="预留手机号"
                           defaultValue={this.state.params.mobile}
                           placeholderTextColor={'#babfc9'}
                           maxLength={11}
                           onInputChange={(value) => {
                             this.handleMobileChange(value)
                           }}/>
            <FormInputSelect changeSelect={(index) => {this.changeSelect(index)}}
                             options={this.state.params.bankInfo}
                             title="开户行"
                             placeholder="请选择银行卡开户行"/>
            <FormInputText keyboardType="numeric"
                           noBorder={true}
                           title="银行卡号"
                           placeholder="请输入银行卡号"
                           placeholderTextColor={'#babfc9'}
                           digits={'0123456789'}
                           maxLength={20}
                           onInputChange={(value) => {
                             this.handleInputChange(value)
                           }}/>
          </View>

          <SubmitBtnRadius style={{marginTop: px2dp(30)}} btnData={this.state.btnData} onPress={() => {
            this.handleSubmit()
          }}/>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: R.color.bg_color},
  formWrap: {
    backgroundColor: '#fff',
    paddingHorizontal: px2dp(6)
  }
})

export default BindCardScreen