npmchenwei111/app/views/orderdetail/BillDetailAmountAndPeriodView.js

test1111

/**
 * Created by changwei on 2017/6/20.
 */

import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import Button from '../../common/views/Button'
import R from '../../assets/R'
import YTShowSelectedMenu from '../../../src/native/YTShowSelectedMenu'
import Utils from '../../utils/Utils'
import OpenApi from '../../api/OpenApi'
import { px2dp, sp } from '../../utils/Px2dp'
import RequestSimplify from '../../utils/RequestSimplify'

class BillDetailAmountAndPeriodView extends Component {
  constructor (props) {
    super(props)
    console.log(props, 'constructor props')
    this.setData(props)
  }

  componentDidMount () {
  }

  //@Override 重写方法
  componentWillReceiveProps (props) {
    console.log('BillDetailAmountAndPeriod', props)
    this.setData(props)
  }

  setData (props) {
    this.state = {
      ...this.state,
      confirmAmountPeriod: {
        months: [],
        cashes: [],
        orderAmount: [],
        periodType: '',
        monthIndex: 0,
        cashIndex: 0,
        ...props.data
      },
      orderNo: props.orderNo,
    }
  }

  _getCash () {
    let cashes = this.state.confirmAmountPeriod.cashes
    let index = this.state.confirmAmountPeriod.cashIndex
    if (cashes && index < cashes.length) {
      return cashes[index]
    } else {
      return 0
    }
  }

  _getMonth () {
    let months = this.state.confirmAmountPeriod.months
    let index = this.state.confirmAmountPeriod.monthIndex
    if (months && index < months.length) {
      return months[index]
    } else {
      return 0
    }
  }

  openSelect (filed, value) {
    switch (filed) {
      case 'cash':
        if (Utils.isEmpty(this.state.confirmAmountPeriod.cashes)) {
          return false
        }
        let copyCashes = []
        this.state.confirmAmountPeriod.cashes.forEach((value, index) => {
          copyCashes.push(`${value}`)
        })
        YTShowSelectedMenu.show('请选择借款金额', copyCashes, this.state.cashIndex).then(position => {
            this.setState({
              confirmAmountPeriod: {
                ...this.state.confirmAmountPeriod,
                cashIndex: position,
              },
            }, () => {
              this.getMonth(this._getCash())
            })
          }
        )
        break
      case 'month':
        if (Utils.isEmpty(this.state.confirmAmountPeriod.months)) {
          return false
        }
        let copyMonths = []
        this.state.confirmAmountPeriod.months.forEach((value, index) => {
          copyMonths.push(`${value}`)
        })
        YTShowSelectedMenu.show('请选择借款期限', copyMonths, this.state.monthIndex).then(position => {
            this.setState({
              confirmAmountPeriod: {
                ...this.state.confirmAmountPeriod,
                monthIndex: position
              },
            }, () => {
              this.getRepayCash(this._getCash(), this._getMonth())
            })
          }
        )
        break
    }

  }

  getMonth (cash) {
    RequestSimplify.fetchNoCancelable(OpenApi.order_calculate_period, {
      orderNo: this.state.orderNo,
      amount: parseInt(cash)
    }, (res) => {
      let periods = res.data.periods || []
      let idf = periods.indexOf(parseInt(this._getMonth()))

      this.setState({
        confirmAmountPeriod: {
          ...this.state.confirmAmountPeriod,
          months: periods,
          monthIndex: idf < 0 ? 0 : idf
        }
      }, () => {
        this.getRepayCash(this._getCash(), this._getMonth())
      })
    })
  }

  getRepayCash (cash, month) {
    RequestSimplify.fetchNoCancelable(OpenApi.order_calculate, {
      orderNo: this.state.orderNo,
      amount: parseInt(cash),
      period: parseInt(month)
    }, (res) => {
      this.setState({
        confirmAmountPeriod: {
          ...this.state.confirmAmountPeriod,
          orderAmount: res.data.orderAmount,
        }
      })
    })

    //更新父页面数据
    if (typeof this.props.changeSelectAmount === 'function') {
      this.props.changeSelectAmount(this.state.confirmAmountPeriod)
    }
  }

  render () {
    return (
      <View style={[styles.container, this.props.style]}>

        <View style={[styles.content, {marginTop: 30}]}>
          {
            this._renderContent(this.state.confirmAmountPeriod.orderAmount)
          }
        </View>

        <View style={[styles.content]}>

          <View style={{
            flexDirection: 'row',
            flex: 1,
            alignItems: 'center',
            paddingLeft: px2dp(16),
            paddingRight: px2dp(16)
          }}>
            <Text style={[styles.tip, {fontSize: sp(16)}]}>{'金额'}</Text>
            <Button style={[styles.bottomContent, {flex: 1, paddingLeft: 10, paddingRight: 10}]}
                    onPress={() => {this.openSelect('cash', this._getCash())}}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={[styles.tip, {color: '#333', marginLeft: 7, flex: 1}]}>
                  {
                    `${this._getCash()}`
                  }
                </Text>
                <Image source={R.img.ic_arrow_down} style={{width: 6, height: 6, justifyContent: 'flex-end',}}/>
              </View>
            </Button>
          </View>

          <View style={{flexDirection: 'row', flex: 1, alignItems: 'center', paddingRight: px2dp(16)}}>
            <Text style={[styles.tip, {fontSize: sp(16)}]}>{'期限'}</Text>
            <Button style={[styles.bottomContent, {flex: 1, paddingRight: 10, paddingLeft: 10}]}
                    onPress={() => {this.openSelect('month', this._getMonth())}}>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={[styles.tip, {color: '#333', marginLeft: 7, flex: 1}]}>
                  {
                    `${this._getMonth()}` + (this.state.confirmAmountPeriod.periodType || ' ')
                  }
                </Text>
                <Image source={R.img.ic_arrow_down} style={{width: 6, height: 6, justifyContent: 'flex-end',}}/>
              </View>
            </Button>
          </View>

        </View>

      </View>
    )
  }

  _renderContent (orderAmount) {
    let arr = []
    if (Utils.isEmpty(orderAmount)) return arr
    for (let content of orderAmount) {
      arr.push(
        <View style={styles.itemWrap}>
          <Text style={styles.itemContent} numberOfLines={1}>{content.value || ' '}</Text>
          <Text style={[styles.tip, {marginTop: 5}]} numberOfLines={1}>{content.title || ' '}</Text>
        </View>)

      if (arr.length < 2 * orderAmount.length - 1) {
        arr.push(
          <View style={styles.line}/>
        )
      }
    }
    return arr
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingRight: px2dp(16),
    paddingLeft: px2dp(16),
    paddingBottom: px2dp(20)
  },
  content: {
    flexDirection: 'row',
    marginTop: px2dp(20),
  },
  itemWrap: {
    flex: 1,
    alignItems: 'center',
  },
  itemValueWrap: {
    flexDirection: 'row'
  },
  itemContent: {
    fontSize: sp(24),
    color: '#626262'
  },
  tip: {
    color: '#a0a0a0',
    fontSize: sp(14),
  },
  line: {
    width: px2dp(1),
    marginTop: px2dp(15),
    marginBottom: px2dp(15),
    backgroundColor: '#e2e2e2',
  },
  bottomContent: {
    backgroundColor: '#eeeef3',
    height: 30,
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
    borderRadius: px2dp(5)
  },
})

export default BillDetailAmountAndPeriodView