npmchenwei111/app/screens/OrderDetailScreen.js

test1111

/**
 * 订单详情
 * <br>Created by johnwatson on 26/06/2017.
 */

import React, { Component } from 'react'
import { DeviceEventEmitter, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import ActualRepayment from '../views/orderdetail/ActualRepaymentView'
import SubmitBtnRadius from '../public/authentication/views/SubmitBtnRadius'
import BankItem from '../views/orderdetail/BankItemView'
import RepaymentPlanModify from '../views/orderdetail/RepaymentPlanModifyView'
import YTShowToast from '../../src/native/YTShowToast'
import UrlParser from '../utils/UrlParser'
import SolidLine from '../common/views/SolidLine'
import BillDetailAmountAndPeriod from '../views/orderdetail/BillDetailAmountAndPeriodView'
import ActionBar from '../bar/ActionBar'
import RepayEmptyItem from '../views/orderdetail/EmptyRepayItemView'
import YTInvokeCommonDialog from '../../src/native/YTInvokeCommonDialog'
import Screens from '../constant/Screens'
import Utils from '../utils/Utils'
import EmitterReactEvent from '../constant/EmitterReactEvent'
import Agreement from '../views/orderdetail/AgreementView'
import YTInvokeLoanPayBackH5 from '../../src/native/public/YTInvokeLoanPayBackH5'
import OpenApi from '../api/OpenApi'
import PropsUtils from '../utils/PropsUtils'
import { px2dp, sp } from '../utils/Px2dp'
import R from '../assets/R'
import Sensors from '../constant/Sensors'
import LoanDetailTitleView from '../views/orderdetail/LoanDetailTitleView'
import RequestSimplify from '../utils/RequestSimplify'

class OrderDetailScreen extends Component {
  constructor () {
    super()
    console.disableYellowBox = true
    this._initState()
    Sensors.analyseContent(Sensors.YJAPP_LOANDETAILS_PAGEVIEW)
  }

  _initState () {
    this.state = {
      data: {},
      amountPeriod: {
        months: [],
        cashes: [],
        orderAmount: [],
        periodType: '',
        monthIndex: 0,
        cashIndex: 0,
      },
      ifChecked: true
    }
  }

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

  componentDidMount () {
    this._getOrderDetail()
    this.refreshListener = DeviceEventEmitter.addListener(EmitterReactEvent.REFRESH_ORDER_DETAIL, () => {
      this._getOrderDetail()
    })
  }

  componentWillUnmount () {
    DeviceEventEmitter.emit(EmitterReactEvent.REFRESH_ORDER_LIST)
    this.refreshListener.remove()
  }

  _getOrderDetail () {
    let orderNo = PropsUtils.getExtras(this.props).orderNo
    RequestSimplify.fetch(OpenApi.order_detail, {orderNo: orderNo}, (res) => {
      const {amounts, periods, orderAmount, periodType} = res.data.confirmAmountPeriod || {}
      this.setState({
        data: res.data,
        amountPeriod: {
          ...this.state.amountPeriod,
          months: periods,
          cashes: amounts,
          orderAmount: orderAmount,
          periodType: periodType,
        }
      })
    })
  }

  _getTitleView () {
    return (
      this.state.data.order ? <LoanDetailTitleView order={this.state.data.order} showCompanyImage={true}/> : null
    )
  }

  _getConclusion () {

    let conclusion = this.state.data.conclusion || {}

    return (
      <View style={{backgroundColor: 'white', marginTop: px2dp(10)}}>
        <SolidLine style={{marginHorizontal: px2dp(20), backgroundColor: '#e2e2e2'}}/>
        <ActualRepayment
          receiveAmountString={conclusion.receiveAmountString}
          receiveAmountPrefixString={conclusion.receiveAmountPrefixString}
          serviceFeeString={conclusion.serviceFeeString}
          serviceFeePrefixString={conclusion.serviceFeePrefixString}
          periodAmountString={conclusion.periodAmountString}
          periodAmountPrefixString={conclusion.periodAmountPrefixString}
        />
      </View>
    )
  }

  _getStatusView () {
    return this.state.data.order && this.state.data.conclusion
      ? this._getConclusion()
      : null
  }

  _getContractView () {
    return (
      this.state.data.order && this.state.data.order.contractUrl
        ? <View style={{alignItems: 'flex-start'}}>
        <Agreement
          onClickUrl={() => {this.openAgreement()}}
          handleChecked={(checked) => {
            this.setState({
              ifChecked: checked
            })
            console.log('OrderDetail.js Agreement checked: ', checked)
          }}/>
      </View>
        : null
    )
  }

  _getConfirmContractView () {
    return (
      this.state.data && this.state.data.confirmContract
        ? <View style={{flexDirection: 'row', alignItems: 'center', marginTop: px2dp(10)}}>
        <Text style={{marginLeft: 16, color: '#626262', fontSize: 12}}>已确认</Text>
        <TouchableOpacity activeOpacity={0.7}
                          onPress={() => {this.openConfirmcontract()}}>
          <Text style={{color: '#2493f4', fontSize: 12}}>《借款协议》</Text>
        </TouchableOpacity>
      </View> : null
    )
  }

  openAgreement () {
    YTInvokeLoanPayBackH5.jump(this.state.data.order.contractUrl, '借款协议')
  }

  openConfirmcontract () {
    YTInvokeLoanPayBackH5.jump(this.state.data.confirmContract, '借款协议')
  }

  _getNoticeView () {
    let attentionStr = this.state.data.attention
    return (
      attentionStr ? <View style={{marginTop: px2dp(10), flexDirection: 'row', justifyContent: 'center'}}>
        <Image
          style={{
            width: px2dp(18),
            height: px2dp(18),
            resizeMode: Image.resizeMode.contain
          }}
          source={R.img.ic_mark_icon}/>
        <Text style={{
          marginLeft: px2dp(10),
          textAlign: 'left',
          fontSize: sp(12),
          color: '#626262',
          width: px2dp(228)
        }}>
          {attentionStr}
        </Text>
      </View>
        : null
    )
  }

  parseUrl (action) {
    if (action) {
      const urlMap = UrlParser.toMap(action)
      console.log('map', urlMap)
      const prefixAction = Utils.nono(urlMap['header'], '')
      if (prefixAction === 'JKZJAPP/bindcard') {
        this.props.navigation.navigate(Screens.BindCardScreen, {
          companyId: this.state.data.order.companyId,
          companyName: this.state.data.order.companyName,
          orderNo: this.state.data.order.orderNo,
        })
      } else if (prefixAction === 'JKZJAPP/confirm') {
        this.confirmOrder()
      } else if (prefixAction === 'JKZJAPP/creditSubmit') {
        this.creditSubmit()
      } else if (prefixAction === 'JKZJAPP/attention') {
        const contentStr = urlMap['title']
        this.showDialog('确定', Utils.nono(contentStr, ''))
      } else if (prefixAction && prefixAction.startsWith('JKZJURL')) {
        const urlStr = urlMap['url']
        if (urlStr) {
          this.jumpURL(urlStr)
        }
      }
    }
  }

  creditSubmit () {
    let haveAgreement = (this.state.data.order && this.state.data.order.contractUrl)
    if (haveAgreement && !this.state.ifChecked) {
      YTShowToast.show('请先同意借款协议', YTShowToast.SHORT)
      return
    }

    let amountPeriod = this.state.amountPeriod || {cashIndex: 0, monthIndex: 0}
    let amounts = amountPeriod.cashes || []
    let periods = amountPeriod.months || []

    RequestSimplify.fetchNoCancelable(OpenApi.order_facility_submit, {
      orderNo: this.state.data.order.orderNo,
      amount: amounts[amountPeriod.cashIndex],
      period: periods[amountPeriod.monthIndex],
    }, (res) => {
      this._getOrderDetail()
    })
  }

  confirmOrder () {
    let orderNo = PropsUtils.getExtras(this.props).orderNo
    RequestSimplify.fetchNoCancelable(OpenApi.confirm_order, {orderNo: orderNo}, (res) => {
      this._getOrderDetail()
    })
  }

  _getButtonView () {
    return (
      this.state.data.button
        ? <SubmitBtnRadius
        style={{marginTop: px2dp(20)}}
        btnData={this.state.data.button}
        onPress={() => {
          this.parseUrl(this.state.data.button.action)
        }}/>
        : null
    )
  }

  _getBankCardView () {
    return (
      this.state.data.bankcard
        ? <BankItem
        style={{marginTop: px2dp(20)}}
        logoUrl={this.state.data.bankcard.logo} bankName={this.state.data.bankcard.bank}
        cardNoText={this.state.data.bankcard.cardNo}
        descText={this.state.data.bankcard.desc}/>
        : null
    )
  }

  _getRepaymentPlanView () {
    let repaymentPlanViews = []

    let repayPlans = this.state.data.repayPlans || []
    if (repayPlans.length > 0) {
      repayPlans.forEach((plan, i) => {
        // status 账单状态(1未还款 2已还款 3逾期)
        if (plan.canPay) {
          repaymentPlanViews.push(<RepaymentPlanModify key={i} type='NEED_PAY' index={i + 1}
                                                       companyId={this.state.data.order.companyId}
                                                       companyName={this.state.data.order.companyName}
                                                       amountText={plan.amountString}
                                                       overdueDaysText={plan.overdueDaysString}
                                                       overdueFeeText={plan.overdueFeeString}
                                                       repayDateText={plan.repayDateString}
                                                       statusText={plan.statusString}
                                                       onPayBackBtnClick={() => {
                                                         this.props.navigation.navigate(Screens.BillDetailScreen, {
                                                           companyId: this.state.data.order.companyId,
                                                           companyName: this.state.data.order.companyName,
                                                           repayPlanId: plan.repayPlanId
                                                         })
                                                       }}/>)
        } else {
          repaymentPlanViews.push(<RepaymentPlanModify key={i} type='UNDUE' index={i + 1}
                                                       amountText={plan.amountString}
                                                       repayDateText={plan.repayDateString}
                                                       statusText={plan.statusString}/>)
        }
      })
    }

    return (
      repaymentPlanViews.length > 0 && <View style={{flex: 1, backgroundColor: '#fff', marginTop: px2dp(10)}}>
        <Text style={{
          paddingVertical: px2dp(14),
          paddingHorizontal: px2dp(16),
          textAlign: 'left',
          fontSize: sp(16),
          color: '#626262'
        }}>{'还款计划'}</Text>
        {repaymentPlanViews}
      </View>
    )
  }

  _getAmountAndPeriodView () {
    return (
      this.state.amountPeriod && this.state.amountPeriod.cashes && this.state.amountPeriod.cashes.length > 0 &&
      <View style={{backgroundColor: 'white', marginTop: px2dp(10)}}>
        <BillDetailAmountAndPeriod
          changeSelectAmount={(amountPeriodData) => {this.changeSelect(amountPeriodData)}}
          data={this.state.amountPeriod}
          orderNo={
            this.state.data.order.orderNo
          }
        />
      </View>
    )
  }

  changeSelect (amountPeriodData) {
    this.state.amountPeriod = {
      ...this.state.amountPeriod,
      ...amountPeriodData
    }
  }

  _getRepayAttention () {
    return (
      this.state.data.prompt ? <RepayEmptyItem data={
        {
          title: '还款计划',
          content: this.state.data.prompt,
        }
      } style={{marginTop: px2dp(10)}}
      /> : null
    )
  }

  showDialog (title, content) {
    YTInvokeCommonDialog.showCommonDialog(content, title)
  }

  jumpURL (uri) {
    this.props.navigation.navigate(Screens.OpenWebViewScreen, {
      uri: uri,
    })
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          {this._getTitleView()}
          {this._getStatusView()}
          {this._getRepayAttention()}
          {this._getAmountAndPeriodView()}
          {this._getContractView()}
          {this._getConfirmContractView()}
          {this._getButtonView()}
          {this._getNoticeView()}
          {this._getBankCardView()}
          {this._getRepaymentPlanView()}
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: R.color.bg_color},

  orderDetailContentShowBottomBorder: {
    borderBottomWidth: px2dp(0.5),
    borderBottomColor: '#ccc',
    borderStyle: 'solid',
  },
})

export default OrderDetailScreen