npmchenwei111/app/views/LoanListItemView.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 LoanListItemView extends Component {

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

  constructor (props) {
    super(props)
  }

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

    return (
      <View style={[styles.row_center, {alignItems: 'flex-end'}]}>
        <View style={[styles.company_left, {alignItems: 'flex-end'}]}>
          <Text style={styles.tip_text}>{unit}</Text>
          <Text style={styles.money_font}>{amountString}</Text>
          <Text style={styles.tip_text}>{'元'}</Text>
        </View>
        <View style={[styles.company_right, {marginBottom: -px(2)}]}>
          <Text style={[styles.status_font, {color: this.props.order.statusColorHex}]}>{orderStatusDesc}</Text>
        </View>
      </View>
    )
  }

  /**
   * 借款期限
   * @private
   */
  _renderLoanPeriodWithImage () {
    const unit = '贷款期限'
    const {periodString} = this.props.order
    const {periodTypeString} = this.props.order
    return (
      <View style={[styles.row_center, {alignItems: 'flex-end'}]}>
        <View style={[styles.company_left, {alignItems: 'flex-end'}]}>
          <Text style={styles.tip_text}>{unit}</Text>
          <Text style={styles.money_font}>{periodString ? periodString : '7'}</Text>
          <Text style={styles.tip_text}>{periodTypeString}</Text>
        </View>
        <View style={[styles.company_right, {marginBottom: px(0)}]}>
          <Image source={R.img.ic_look_detail}
                 style={{height: px(24), width: px(80), resizeMode: Image.resizeMode.contain}}/>
        </View>
      </View>
    )
  }

  _renderCompany () {
    const {orderTimeString} = this.props.order
    const {companyLogoUrl} = this.props.order
    const {companyName} = this.props.order
    return (
      <View style={styles.company_layout}>
        {
          <View style={styles.company_left}>
            <Image
              source={{uri: companyLogoUrl}}
              style={{height: px(15), width: px(15), resizeMode: Image.resizeMode.contain}}/>
            < Text style={styles.company_font}>{companyName}</Text>
          </View>

        }
        <View style={styles.company_right}>
          <Text style={styles.time_font}>{orderTimeString}</Text>
        </View>
      </View>
    )
  }

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

        {
          this._renderCompany()
        }
        <View style={styles.line}/>

        <View style={[styles.column_center, {height: px(92)}]}>
          {[
            this._renderLoanMoneyAndStatus(),
            this._renderLoanPeriodWithImage(),
          ]}
        </View>

      </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',
    height: px(38)
  },

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

  money_font: {
    color: R.color.bar_color,
    fontSize: sp(22),
    textAlign: 'center',
    marginBottom: -px(3),
    marginLeft: px(6)
  },
  period_font: {
    color: '#3d4552',
    fontSize: sp(23),
    textAlign: 'center',
    height: px(35),
    flexDirection: 'column',
  },
  status_font: {
    fontSize: sp(20),
    textAlign: 'center',
  },

  tip_text: {
    color: '#676E79',
    fontSize: sp(14),
    textAlign: 'center'
  },

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

  company_font: {
    color: R.color.bar_color,
    fontSize: sp(14),
    textAlign: 'center',
    marginLeft: px(11)
  },
  time_font: {
    color: R.color.font_input_hint,
    fontSize: sp(14),
    textAlign: 'center',
  },
  line: {
    backgroundColor: '#e2e2e2',
    height: px(0.5),
    width: Device.width - px(16),
    marginLeft: px(16),
    flex: 1,
    justifyContent: 'flex-start',
  }
})

export default LoanListItemView