npmchenwei111/app/screens/BillDetailScreen.js

test1111

/**
 * 账单详情
 * <br>Created by ziyu on 2017/6/28.
 */

import React, { Component } from 'react'
import { DeviceEventEmitter, ScrollView, StyleSheet, Text, View } from 'react-native'
import BillDetailFormLabel from '../views/bindcard/BillDetailFormLabel'
import SubmitBtn from '../public/authentication/views/SubmitBtnRadius'
import YTShowToast from '../../src/native/YTShowToast'
import ActionBar from '../bar/ActionBar'
import EmitterReactEvent from '../constant/EmitterReactEvent'
import YTInvokeLoanPayBackH5 from '../../src/native/public/YTInvokeLoanPayBackH5'
import { px2dp, sp } from '../utils/Px2dp'
import OpenApi from '../api/OpenApi'
import R from '../assets/R'
import RequestSimplify from '../utils/RequestSimplify'

class BillDetailScreen extends Component {

  constructor (props) {
    super(props)
    this.state = {
      repayPlan: {},
      repayType: null,
      button: null
    }
  }

  componentDidMount () {
    this.getData()
  }

  componentWillUnmount () {
  }

  getData () {
    const params = this.props.navigation.state.params
    if (params && params.repayPlanId) {
      RequestSimplify.fetch(OpenApi.order_repay_detail, {repayPlanId: params.repayPlanId}, (res) => {
        let data = res.data
        this.setState({
          repayPlan: data.repayPlan,
          repayType: data.repayType,
          button: data.button
        })
      })
    }
  }

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        title: '账单详情'
      }}
    />
  })

  handlePay () {
    // 还款方式 1 直接扣款，还款调用repay
    // 还款方式 2 h5跳转,还款调用repayurl 不传表示不支持还款
    if (this.state.repayType === 1) {
      this.orderRepay()
    } else if (this.state.repayType === 2) {
      this.getOrderRepayUrl()
    }
  }

  getOrderRepayUrl () {
    RequestSimplify.fetch(OpenApi.order_repayurl, {repayPlanId: this.props.navigation.state.params.repayPlanId}, (res) => {
      YTInvokeLoanPayBackH5.jump(res.data.url, '账单详情').then((success) => {
        this.props.navigation.goBack()
        DeviceEventEmitter.emit(EmitterReactEvent.REFRESH_ORDER_DETAIL)
      })
    })
  }

  orderRepay () {
    RequestSimplify.fetchNoCancelable(OpenApi.order_repay, {repayPlanId: this.props.navigation.state.params.repayPlanId}, (res) => {
      YTShowToast.show('还款成功', YTShowToast.SHORT)
      this.props.navigation.goBack()
      DeviceEventEmitter.emit(EmitterReactEvent.REFRESH_ORDER_DETAIL)
    })
  }

  render () {
    let state = this.state
    return (
      <View style={styles.container}>
        <ScrollView >
          <View style={styles.infoWrap}>
            <BillDetailFormLabel title="期数" content={state.repayPlan.periodString}/>
            <BillDetailFormLabel title="到期时间" content={state.repayPlan.repayDateString}/>
            <View style={styles.formControl}>
              <Text style={styles.formLabel}>还款金额</Text>
              <Text style={{
                fontSize: sp(16),
                color: R.color.font_input_hint,
                paddingRight: 10
              }}> {state.repayPlan.amount} </Text>
              <View style={{position: 'absolute', bottom: px2dp(3), right: px2dp(15)}}>
                <Text style={{color: R.color.font_input_hint, fontSize: sp(12)}}>({state.repayPlan.remark})</Text>
              </View>

            </View>
            <BillDetailFormLabel title="逾期费" content={state.repayPlan.overdueFee}/>
            <BillDetailFormLabel title="状态" content={state.repayPlan.statusStr}/>
            <BillDetailFormLabel title="还款方式" content={state.repayPlan.payTypeString}/>
            {
              this._renderBankCard()
            }
          </View>
          {
            this.state.button && (
              <SubmitBtn
                style={{marginVertical: px2dp(30)}}
                btnData={this.state.button}
                onPress={() => {
                  this.handlePay()
                }}
              />
            )
          }
        </ScrollView>
      </View>
    )
  }

  _renderBankCard () {
    return (
      this.state.repayPlan.bankCard ? <View style={{flexDirection: 'row', marginHorizontal: 10, paddingVertical: 10}}>
        <View style={{justifyContent: 'center', flex: 1}}>
          <Text style={{color: R.color.bar_color, fontSize: sp(16),}}>还款银行卡</Text>
        </View>
        <View>
          <Text style={{
            fontSize: sp(16),
            color: R.color.font_input_hint,
            paddingRight: 10,
            textAlign: 'right'
          }}> {this.state.repayPlan.openBank} </Text>
          <Text style={{
            fontSize: sp(16),
            color: R.color.font_input_hint,
            paddingRight: 10,
            textAlign: 'right'
          }}> {this.state.repayPlan.bankCard} </Text>
        </View>
      </View> : null
    )
  }
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: R.color.bg_color},
  infoWrap: {
    backgroundColor: '#fff',
    paddingHorizontal: px2dp(6)
  },
  formControl: {
    flexDirection: 'row',
    marginHorizontal: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#e2e2e2',
    borderStyle: 'solid',
    paddingVertical: 20,
    position: 'relative'
  },
  formLabel: {
    color: R.color.bar_color,
    fontSize: sp(16),
    flex: 1
  }
})

export default BillDetailScreen