npmchenwei111/app/views/loanmatch/LoanMatchOrderStatusView.js

test1111

/**
 * Created by chenwei on 2017/8/23.
 */
import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import R from '../../assets/R'
import { px, sp } from '../../utils/Px2dp'
import Device from '../../utils/Device'

const PropTypes = require('prop-types')

class LoanMatchOrderStatusView extends Component {

  //设置必须属性的检测
  static propTypes = {
    company: PropTypes.object.isRequired,
    userMatchCompanyVo: PropTypes.object.isRequired,
  }

  constructor (props) {
    super(props)
  }

  render () {

    if (!this.props.userMatchCompanyVo) return null

    return (
      <View style={styles.container}>

        <View style={[styles.row_center, {height: px(90)}]}>
          {[
            this._renderLoanMoney(),
            this._renderDiv(),
            this._renderLoanPeriod(),
            this._renderDiv(),
            this._renderLoanStatus()
          ]}
        </View>

        <View style={{backgroundColor: '#e2e2e2', width: Device.width - px(60), height: px(0.5)}}/>

        {
          this._renderCompany()
        }
      </View>
    )
  }

  /**
   * 借款金额
   * @private
   */
  _renderLoanMoney () {
    const unit = '借款金额'
    const {amount} = this.props.userMatchCompanyVo

    return (
      <View style={styles.column_center_flex1}>
        <Text style={styles.money_font}>{amount}</Text>
        <Text style={styles.tip_text}>{unit}</Text>
      </View>
    )
  }

  /**
   * 借款期限
   * @private
   */
  _renderLoanPeriod () {
    const unit = '期限'
    const {periodStr} = this.props.userMatchCompanyVo

    return (
      <View style={styles.column_center_flex1}>
        <Text style={styles.period_font}>{periodStr}</Text>
        <Text style={styles.tip_text}>{unit}</Text>
      </View>
    )
  }

  /**
   * 借款状态
   * @private
   */
  _renderLoanStatus () {
    const unit = '状态'
    const matchStatus = this.props.userMatchCompanyVo.typeStr
    const statusColor = '#ff6806'

    return (
      <View style={styles.column_center_flex1}>
        <Text style={[styles.status_font, {color: statusColor}]}>{matchStatus}</Text>
        <Text style={styles.tip_text}>{unit}</Text>
      </View>
    )
  }

  _renderCompany () {
    const {companyLogoUrl, companyName} = this.props.company
    const loanTimeStr = this.props.userMatchCompanyVo.time

    return (
      <View style={styles.company_layout}>
        <View style={styles.company_left}>
          <Image
            source={{uri: companyLogoUrl}}
            style={{height: px(15), width: px(15), marginRight: px(3), resizeMode: Image.resizeMode.contain}}/>
          <Text style={styles.company_font}>{companyName || '申请时间'}</Text>
        </View>
        <View style={styles.company_right}>
          <Text style={styles.company_font}>{loanTimeStr}</Text>
        </View>
      </View>
    )
  }

  /**
   * 分割线
   * @private
   */
  _renderDiv () {
    return (
      <View style={{
        backgroundColor: '#e2e2e2',
        height: px(20),
        width: px(1),
      }}/>
    )
  }

}

const styles = StyleSheet.create({

  container: {
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: R.color.white
  },

  column_center: {
    flexDirection: 'column',
    alignItems: 'center',
  },

  row_center: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  column_center_flex1: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },

  money_font: {
    color: '#3d4552',
    fontSize: sp(24),
    textAlign: 'center',
    height: px(35),
    flexDirection: 'column',
  },
  period_font: {
    color: '#3d4552',
    fontSize: sp(22),
    textAlign: 'center',
    height: px(35),
    flexDirection: 'column',
  },
  status_font: {
    color: '#ff6806',
    fontSize: sp(22),
    textAlign: 'center',
    height: px(35),
    flexDirection: 'column',
  },

  tip_text: {
    color: '#999999',
    fontSize: sp(12),
    textAlign: 'center'
  },

  company_layout: {
    height: px(32),
    width: Device.width - px(70),
    alignItems: 'center',
    flexDirection: 'row',
  },
  company_left: {
    flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'
  },
  company_right: {
    flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end'
  },

  company_font: {
    color: '#999999',
    fontSize: sp(14),
    textAlign: 'center',
  },
})

export default LoanMatchOrderStatusView