npmchenwei111/app/views/orderdetail/LoanDetailTitleView.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 Device from '../../utils/Device'
import { px, sp } from '../../utils/Px2dp'

const PropTypes = require('prop-types')

class LoanDetaiTitleView extends Component {

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

  constructor (props) {
    super(props)
  }

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

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

  /**
   * 借款期限
   * @private
   */
  _renderLoanPeriod () {
    const unit = '期限'
    const {period} = this.props.order
    const {periodTypeString} = this.props.order
    return (
      <View style={styles.column_center_flex1}>
        <Text style={styles.period_font}>{period + periodTypeString}</Text>
        <Text style={styles.tip_text}>{unit}</Text>
      </View>
    )
  }

  /**
   * 借款状态
   * @private
   */
  _renderLoanStatus () {
    const unit = '状态'

    const {statusDesc} = this.props.order

    return (
      <View style={styles.column_center_flex1}>
        <Text style={[styles.status_font, {color: this.props.order.statusTextColorHex}]}>{statusDesc}</Text>
        <Text style={styles.tip_text}>{unit}</Text>
      </View>
    )
  }

  _renderCompany () {
    const {orderTimeString} = this.props.order
    const {companyLogo} = this.props.order
    const {companyName} = this.props.order
    return (
      <View style={styles.company_layout}>
        {
          this.props.showCompanyImage ? <View style={styles.company_left}>
            <Image
              source={{uri: companyLogo}}
              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_left}>
            <Text style={styles.company_font}>{'申请时间'}</Text>
          </View>
        }
        <View style={styles.company_right}>
          <Text style={styles.company_font}>{orderTimeString}</Text>
        </View>
      </View>
    )
  }

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

  render () {
    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>
    )
  }

}

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 LoanDetaiTitleView