npmchenwei111/app/views/loanmatch/LoanMatchCompanyRecommendView.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'
import Button from '../../common/views/Button'

const PropTypes = require('prop-types')

class LoanMatchCompanyRecommendView extends Component {

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

  constructor (props) {
    super(props)
  }

  render () {

    if (!this.props.userMatchCompanyDetailVo) return null

    return (
      <Button
        onPress={this.props.onPress}
        style={styles.container}>
        <View style={{flexDirection: 'row', height: px(100)}}>
          <View style={styles.row_check_container}>
            <Image
              source={this.props.checked ? R.img.ic_read_circle : R.img.ic_read_circle_gray}
              style={{
                width: px(20), height: px(20),
              }}/>
          </View>
          <View style={styles.row_info_container}>
            {[
              this._renderLoanMoney(),
              //this._renderDiv(),
              this._renderLoanPeriod(),
              //this._renderDiv(),
              this._renderLoanStatus()
            ]}
          </View>
        </View>
      </Button>
    )
  }

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

    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.userMatchCompanyDetailVo

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

  /**
   * 借款状态
   * @private
   */
  _renderLoanStatus () {
    let unit = this.props.company.referenceRateDesc + (this.props.company.referenceRateAll ? this.props.company.referenceRateAll : '')
    let loan = this.props.userMatchCompanyDetailVo.loan
    let {companyLogoUrl, companyName} = this.props.company

    if (companyName && companyName.length > 7) {
      companyName = companyName.substring(0, 7)
    }

    return (
      <View style={styles.column_center_flex2}>
        <View style={styles.status_layout}>
          <View style={styles.company_layout}>
            <Image source={{uri: companyLogoUrl}} style={styles.company_logo}/>
            <Text style={styles.status_font}
                  numberOfLines={1}
                  ellipsizeMode={'tail'}>{companyName}</Text>
          </View>
          <Text style={styles.status_font}>{loan}</Text>
        </View>
        <Text style={styles.tip_text}>{unit}</Text>
      </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_check_container: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    marginRight: px(2),
    marginLeft: px(16)
  },

  row_info_container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },

  column_center_flex1: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: px(10),
    marginRight: px(10),
    flex: 1,
  },
  column_center_flex2: {
    flexDirection: 'column',
    alignItems: 'flex-end',
    justifyContent: 'center',
    marginLeft: px(10),
    marginRight: px(20),
    flex: 1,
  },

  money_font: {
    color: '#FF6806',
    fontSize: sp(24),
    textAlign: 'center',
    height: px(38),
  },
  period_font: {
    color: '#FF6806',
    fontSize: sp(22),
    textAlign: 'center',
    height: px(38),
  },
  status_layout: {
    height: px(38),
    justifyContent: 'center',
    alignItems: 'flex-end'
  },

  status_font: {
    color: '#999999',
    fontSize: sp(12),
    paddingTop: px(2),
    textAlign: 'right'
  },

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

  company_layout: {
    height: px(15),
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row',
  },
  company_logo: {
    height: px(14),
    width: px(14),
    marginRight: px(2)
  },

  tip_message_layout: {
    height: px(55),
    width: Device.width,
    alignItems: 'center',
    flexDirection: 'row',
  },

  tip_message_font: {
    color: '#3d4552',
    fontSize: sp(14),
    textAlign: 'center',
    marginLeft: px(40)
  },

  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 LoanMatchCompanyRecommendView