npmchenwei111/app/screens/MessageAuthenticationScreen.js

test1111

/**
 * Created by chenwei on 2017/8/22.
 *
 * 借款资料认证页面
 */
import React, { Component } from 'react'
import { DeviceEventEmitter, Image, ScrollView, StyleSheet, Text, View } from 'react-native'
import ActionBar from '../bar/ActionBar'
import CreditLinePanel from '../views/CreditLinePanel'
import R from '../assets/R'
import { px, sp } from '../utils/Px2dp'
import Device from '../utils/Device'
import AuthenticationPanel from '../public/authentication/views/AuthenticationPanel'
import GradientButton from '../common/views/GradientButton'
import YoujieApi from '../api/YoujieApi'
import AuthData from '../public/authentication/action/AuthData'
import StatusView from '../common/views/StatusView'
import RequestSimplify from '../utils/RequestSimplify'
import EmitterReactEvent from '../constant/EmitterReactEvent'
import Sensors from '../constant/Sensors'
import PropsUtils from '../utils/PropsUtils'

class MessageAuthenticationScreen extends Component {

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        sysBack: true,
        title: '信息认证',
        showKefu: true,
      }}
      sensors={{
        back: Sensors.YJAPP_IDENTIFICATION_BACK,
        kefu: Sensors.YJAPP_IDENTIFICATION_CS
      }}
    />
  })

  constructor (props) {
    super(props)
    console.disableYellowBox = true
    this.amount = PropsUtils.getExtras(props).amount
    this.period = PropsUtils.getExtras(props).period
    this._initState()
    Sensors.analyseContent(Sensors.YJAPP_IDENTIFICATION_PAGEVIEW)
  }

  _initState () {

    this.state = {
      dataLoadStatus: StatusView.DATA_LOADING,//0：未加载，1加载成功，-1加载失败
      credit: '',
      button: {},
      tipMessage: '',
      checkInfo: []
    }
  }

  _loadData () {

    this.setState({
      dataLoadStatus: StatusView.DATA_LOADING,
    })

    RequestSimplify.fetchAllNoLoading([{api: YoujieApi.authentic_status}, {api: YoujieApi.authentic_needinfo}], (res) => {
      this.setState({
        dataLoadStatus: StatusView.DATA_SUCCESS,
        checkInfo: res[1].data.checkInfo,
        button: res[1].data.button,
        tipMessage: res[1].data.tipMessage,
        loanStatus: res[0].data.loanStatus
      })
    }, (err) => {
      this.setState({
        dataLoadStatus: StatusView.DATA_FAIL,
      })
    })
  }

  //@Override 重写方法
  componentDidMount () {
    this.refreshListener = DeviceEventEmitter.addListener(EmitterReactEvent.REFRESH_INDEX_PAGE,
      () => {
        console.log('MessageAuthenticationScreen.js refresh')
        this._loadData()
      })
    this._loadData()
  }

  componentWillUnmount () {
    this.refreshListener && this.refreshListener.remove()
  }

  render () {

    return (
      <StatusView
        onPress={() => {
          this._loadData()
        }}
        data={{
          status: this.state.dataLoadStatus,
        }}>
        <View style={styles.content}>
          <ScrollView >
            <View style={styles.container}>
              <View style={{alignItems: 'center', height: px(170)}}>
                <View style={styles.panel_bg}/>
                <CreditLinePanel
                  data={{
                    loanStatus: this.state.loanStatus,
                  }}
                  style={{
                    position: 'absolute',
                    top: px(7),
                  }}/>
              </View>

              <AuthenticationPanel
                nav={this.props.navigation}
                infos={this.state.checkInfo}/>

              <View style={styles.tip}>

                <Image
                  source={R.img.ic_red_warning}
                  style={styles.tip_icon}/>
                <Text style={styles.tip_text}>{this.state.tipMessage}</Text>
              </View>

              <GradientButton
                style={styles.button}
                data={{
                  color: R.color.white,
                  borderRadius: px(20),
                  enable: this.state.button.enable,
                  text: this.state.button.text
                }}
                onPress={() => {
                  AuthData.handleAction(this.props.navigation, this.state.button.action, {
                    amount: this.amount,
                    period: this.period,
                  })
                  Sensors.analyseContent(Sensors.YJAPP_IDENTIFICATION_DOWNBUTTON, {
                    buttonName: this.state.button.text
                  })
                }}
              />
            </View>
          </ScrollView>
        </View>
      </StatusView>
    )
  };
}

const styles = StyleSheet.create({
  content: {flex: 1, backgroundColor: R.color.bg_color},
  container: {
    justifyContent: 'center', //主轴方向
    alignItems: 'center', //垂直主轴方向
  },

  panel_bg: {
    width: Device.width,
    height: px(70),
    backgroundColor: R.color.bar_color,
  },

  button: {
    width: px(270), height: px(40), marginTop: px(15)
  },

  tip: {
    width: Device.width,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: px(12),
    marginLeft: px(16),
  },

  tip_icon: {
    width: px(15),
    height: px(15),
    resizeMode: Image.resizeMode.contain,
  },
  tip_text: {
    marginLeft: px(4),
    textAlign: 'center',
    fontSize: sp(12),
    color: '#999999'
  }

})

export default MessageAuthenticationScreen