npmchenwei111/app/screens/LoanApplyScreen.js

test1111

/**
 * Created by chenwei on 2017/8/25.
 */

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

import Device from '../utils/Device'
import RequestSimplify from '../utils/RequestSimplify'
import ActionBar from '../bar/ActionBar'
import YoujieApi from '../api/YoujieApi'
import CreditLinePanel from '../views/CreditLinePanel'
import { px, px2dp, sp } from '../utils/Px2dp'
import R from '../assets/R'
import BorrowAmountItemView from '../views/loanapply/BorrowAmountItemView'
import BorrowPeriodItemView from '../views/loanapply/BorrowPeriodItemView'
import GradientButton from '../common/views/GradientButton'
import YTShowToast from '../../src/native/YTShowToast'
import { transInt } from '../../src/utils/dataform'
import Util from '../utils/Utils'
import Screens from '../constant/Screens'
import StatusView from '../common/views/StatusView'
import Sensors from '../constant/Sensors'

class LoanApplyScreen extends Component {

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        sysBack: true,
        title: '贷款申请',
        showKefu: true,
      }}
      sensors={{
        kefu: Sensors.YJAPP_REQUESTLOAN_CS
      }}
    />
  })

  constructor (props) {
    super(props)
    this._initState()
    Sensors.analyseContent(Sensors.YJAPP_REQUESTLOAN_PAGEVIEW)
  }

  _initState () {
    this.state = {
      dataLoadStatus: StatusView.DATA_LOADING,
      loanStatus: '',
      amount: {
        amountStr: ''
      },
      period: {
        termList: [],
        termStr: '',
      },
      repayDetailList: [],
      inputAmount: '',
      selectPeriod: '',
      tips: ''
    }
  }

  //@Override 重写方法
  componentDidMount () {
    this._loadData()
  }

  _loadData () {
    this.setState({
      dataLoadStatus: StatusView.DATA_LOADING,
    })
    RequestSimplify.fetchAllNoLoading([{api: YoujieApi.authentic_status}, {api: YoujieApi.borrow_apply_info}, {api: YoujieApi.borrow_repay_detail}], (reses) => {

      const applyInfoVO = reses[1].data.applyInfoVO || {amountList: []}
      const periodList = applyInfoVO.termList || []

      if (this.state.selectPeriod && periodList.indexOf(this.state.selectPeriod) < 0) {
        this.state.selectPeriod = ''
      }

      this.setState({
        dataLoadStatus: StatusView.DATA_SUCCESS,
        loanStatus: reses[0].data.loanStatus,
        repayDetailList: reses[2].data.repayDetailList,
        period: {
          termList: periodList,
          termStr: applyInfoVO.termStr,
        },
        amount: {
          amountStr: applyInfoVO.amountStr,
          minAmount: transInt(applyInfoVO.amountList[0]),
          maxAmount: transInt(applyInfoVO.amountList[1])
        },
        tips: reses[2].data.tips,
      })
    }, (error) => {
      this.setState({
        dataLoadStatus: StatusView.DATA_FAIL,
      })
    })
  }

  componentWillUnmount () {
  }

  _getStateView () {
    return (
      <View style={{alignItems: 'center', height: px(170)}}>
        <View style={styles.panel_bg}/>
        <CreditLinePanel
          data={{
            loanStatus: this.state.loanStatus,
          }}
          style={{
            position: 'absolute',
            top: px(7),
          }}/>
      </View>
    )
  }

  changeSelect (field, value) {
    switch (field) {
      case 'amount':
        this.setState({
          inputAmount: value ? parseInt(value) : 0
        })
        break
      case 'period':
        this.setState({
          selectPeriod: value
        })
        break
    }
  }

  _getAmountView () {
    return (
      <View>
        <BorrowAmountItemView
          changeSelectAmount={(value) => {
            this.changeSelect('amount', value)
          }}
          amount={this.state.amount}/>
      </View>)
  }

  _getDateView () {
    return (
      <BorrowPeriodItemView
        changeSelectPeriod={(value) => {
          this.changeSelect('period', value)
        }}
        period={this.state.period}/>
    )
  }

  _getContentView () {
    return (
      <View style={{flexDirection: 'row', paddingTop: px2dp(20), paddingBottom: px2dp(5), alignItems: 'center'}}>
        {
          this.state.repayDetailList.reduce((arr, value, index) => {

            if (index > 0) {
              arr.push(
                <View style={styles.line}/>
              )
            }
            arr.push(
              <View style={styles.itemWrap} key={index}>
                <Text style={styles.itemContent} numberOfLines={1}>{value.value}</Text>
                <Text style={styles.tip}>{value.title}</Text>
              </View>
            )
            return arr
          }, [])
        }
      </View>
    )
  }

  _getButtonView () {
    return (
      <View style={{alignItems: 'center', marginTop: px2dp(40)}}>
        <GradientButton
          style={styles.button}
          data={{
            color: R.color.white,
            borderRadius: px(20),
            text: '立即申请贷款'
          }}
          onPress={() => {
            this._matchOrder()
            Sensors.analyseContent(Sensors.YJAPP_REQUESTLOAN_REQUESTLOAN)
          }}
        />
      </View>)
  }

  _matchOrder () {
    if (this.state.inputAmount == 0 || isNaN(this.state.inputAmount)) {
      YTShowToast.show('请先输入金额', YTShowToast.SHORT)
      return
    }
    if (Util.isEmpty(this.state.selectPeriod)) {
      YTShowToast.show('请选择期限', YTShowToast.SHORT)
      return
    }
    RequestSimplify.fetch(YoujieApi.match_comoany, {
      amount: this.state.inputAmount,
      period: this.state.selectPeriod
    }, (res) => {
      this._toMatch()
    })
  }

  _toMatch () {
    console.log('hhhhh')
    this.props.navigation.navigate(Screens.LoanMatchScreen, {
      sysBack: true
    })
  }

  _getTipsView () {
    return (
      <View style={{alignItems: 'center', paddingTop: px2dp(5), paddingBottom: px2dp(5)}}>
        <Text style={styles.tip_text}>{this.state.tips}</Text>
      </View>
    )
  }

  render () {
    return (
      <StatusView
        onPress={() => {
          this._loadData()
        }}
        data={{
          status: this.state.dataLoadStatus,
        }}>
        <View style={styles.container}>
          <ScrollView>
            <View style={{backgroundColor: R.color.white}}>
              {this._getStateView()}
              {this._getAmountView()}
              {this._getDateView()}
              {this._getContentView()}
              {this._getTipsView()}
            </View>
            {this._getButtonView()}
          </ScrollView>
        </View>
      </StatusView>
    )
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: R.color.bg_color
  },
  panel_bg: {
    width: Device.width,
    height: px(70),
    backgroundColor: R.color.bar_color,
  },
  button: {
    alignItems: 'center',
    width: px(270), height: px(40), marginTop: px(15)
  },
  tip_text: {
    textAlign: 'center',
    fontSize: sp(10),
    color: '#999999'
  },
  itemWrap: {
    flex: 1,
    alignItems: 'center',
  },
  itemContent: {
    height: px2dp(40),
    fontSize: sp(24),
    textAlign: 'center',
    color: R.color.bar_color
  },
  tip: {
    color: '#999999',
    fontSize: sp(12),
    alignItems: 'center'
  },
  line: {
    backgroundColor: '#e2e2e2',
    height: px(20),
    width: px(1),
  }
})

export default LoanApplyScreen