npmchenwei111/app/views/orderdetail/RepaymentPlanModifyView.js

test1111

/**
 * Created by ziyu on 2017/6/21.
 */

import React, { Component } from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { px2dp, sp } from '../../utils/Px2dp'

class RepaymentPlanModifyView extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
  }

  _jumpToPayBackScreen () {
    this.props.onPayBackBtnClick()
  }

  getRenderType () {
    // type: UNDUE 未到期, NEED_PAY 需要还款，PAID 已还款，
    switch (this.props.type) {
      // 未到期 (金额是蓝色字体)
      case 'UNDUE':
        return (
          <View style={[styles.container, this.props.style]}>
            {
              this.props.index
                ? <View style={styles.enableCircle}>
                <Text style={{fontSize: sp(15), color: '#fff'}}>{this.props.index}</Text>
              </View>
                : null
            }

            <View style={{flex: 3}}>
              <View style={{flexDirection: 'row'}}>
                <Text style={{color: '#3b92f9', fontSize: sp(24)}}>{this.props.amountText}</Text>
                <Text style={{color: '#3b92f9', fontSize: sp(14), paddingTop: px2dp(10)}}>元</Text>
              </View>

              <View style={{flexDirection: 'row', marginTop: px2dp(3)}}>
                <Text style={{color: '#a0a0a0', fontSize: px2dp(12)}}>
                  {this.props.repayDateText}
                </Text>
                <Text style={{marginLeft: px2dp(15), color: '#a0a0a0', fontSize: px2dp(12)}}>到期</Text>
              </View>
            </View>

            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-end'}}>
              <Text numberOfLines={1} ellipsizeMode={'tail'}
                    style={{fontSize: px2dp(14), color: '#626262'}}>
                {this.props.statusText}
              </Text>
            </View>
          </View>
        )
      // 需要还款 (有蓝色按钮)
      case 'NEED_PAY':
        return (
          <View style={[styles.container, this.props.style]}>
            <Text style={{
              position: 'absolute',
              right: px2dp(33),
              bottom: px2dp(18),
              fontSize: px2dp(12),
              color: '#ff6806'
            }}>{this.props.overdueDaysText}</Text>
            {
              this.props.index
                ? <View style={styles.enableCircle}>
                <Text style={{fontSize: px2dp(15), color: '#fff'}}>{this.props.index}</Text>
              </View>
                : null
            }

            <View style={{flex: 3}}>
              <View style={{flexDirection: 'row'}}>
                <Text style={{color: '#3b92f9', fontSize: px2dp(24)}}>{this.props.amountText}</Text>
                <Text style={{color: '#3b92f9', fontSize: px2dp(14), paddingTop: px2dp(10)}}>元</Text>
                <Text style={{
                  color: '#ff6806',
                  fontSize: px2dp(12),
                  marginLeft: px2dp(10),
                  paddingTop: px2dp(10)
                }}>{this.props.overdueFeeText}</Text>
              </View>

              <View style={{flexDirection: 'row', marginTop: px2dp(3)}}>
                <Text style={{color: '#a0a0a0', fontSize: px2dp(12)}}>
                  {this.props.repayDateText}
                </Text>
                <Text style={{marginLeft: px2dp(15), color: '#a0a0a0', fontSize: px2dp(12)}}>到期</Text>
              </View>
            </View>

            <View style={{
              flex: 1,
              justifyContent: 'flex-start',
              alignItems: 'flex-end',
              paddingTop: px2dp(5)
            }}>

              <TouchableOpacity activeOpacity={0.7}
                                style={styles.repaymentBtn}
                                onPress={() => {
                                  this._jumpToPayBackScreen()
                                }}>
                <Text numberOfLines={1} ellipsizeMode={'tail'}
                      style={styles.repaymentBtnText}>{this.props.statusText}</Text>
              </TouchableOpacity>
            </View>
          </View>
        )
      // 已还款 (全灰色 字体)
      case 'PAID':
        return (
          <View style={[styles.container, this.props.style]}>
            {
              this.props.index
                ? <View style={styles.disableCircle}>
                <Text style={{fontSize: px2dp(15), color: '#fff'}}>{this.props.index}</Text>
              </View>
                : null
            }

            <View style={{flex: 3}}>
              <View style={{flexDirection: 'row'}}>
                <Text style={{color: '#a0a0a0', fontSize: px2dp(24)}}>{this.props.amountText}</Text>
                <Text style={{color: '#a0a0a0', fontSize: px2dp(14), paddingTop: px2dp(10)}}>元</Text>
              </View>

              <View style={{flexDirection: 'row', marginTop: px2dp(3)}}>
                <Text style={{color: '#a0a0a0', fontSize: px2dp(12)}}>
                  {this.props.repayDateText}
                </Text>
                <Text style={{marginLeft: px2dp(15), color: '#a0a0a0', fontSize: px2dp(12)}}>到期</Text>
              </View>
            </View>

            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-end'}}>
              <Text numberOfLines={1} ellipsizeMode={'tail'}
                    style={{fontSize: px2dp(14), color: '#626262'}}>
                {this.props.statusText}
              </Text>

              {/* <Button style={styles.repaymentBtn} onPress={()=>{}}> */}
              {/* <Text style={styles.repaymentBtnText}>立即还款</Text> */}
              {/* </Button> */}
            </View>
          </View>
        )
    }
  }

  render () {
    return this.getRenderType()
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: px2dp(16),
    paddingVertical: px2dp(18),
    flexDirection: 'row',
    flex: 1
  },
  enableCircle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: px2dp(20),
    height: px2dp(20),
    backgroundColor: '#AFCFFE',
    borderColor: '#AFCFFE',
    borderStyle: 'solid',
    borderRadius: px2dp(15),
    paddingBottom: px2dp(2),
    marginTop: px2dp(8),
    marginRight: px2dp(20)
  },
  disableCircle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: px2dp(20),
    height: px2dp(20),
    backgroundColor: '#C9C9C9',
    borderColor: '#C9C9C9',
    borderStyle: 'solid',
    borderRadius: px2dp(15),
    paddingBottom: px2dp(2),
    marginTop: px2dp(8),
    marginRight: px2dp(20)
  },
  repaymentBtn: {
    borderColor: '#3b92f9',
    borderStyle: 'solid',
    borderWidth: px2dp(1),
    borderRadius: px2dp(10),
    paddingVertical: px2dp(3),
    paddingHorizontal: px2dp(10)
  },
  repaymentBtnText: {
    color: '#3b92f9',
    fontSize: px2dp(12)
  }
})

export default RepaymentPlanModifyView