npmchenwei111/app/screens/LoanMatchScreen.js

test1111

/**
 * Created by chenwei on 2017/8/23.
 */
import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import YoujieApi from '../api/YoujieApi'
import ActionBar from '../bar/ActionBar'
import RequestSimplify from '../utils/RequestSimplify'
import LoanMatchOrderStatusView from '../views/loanmatch/LoanMatchOrderStatusView'
import DataCompare from '../utils/DataCompare'
import { px, sp } from '../utils/Px2dp'
import StatusView from '../common/views/StatusView'
import Device from '../utils/Device'
import Screens from '../constant/Screens'
import R from '../assets/R'
import Sensors from '../constant/Sensors'
import GradientButton from '../common/views/GradientButton'
import YTInvokeJumpUtils from '../../src/native/YTInvokeJumpUtils'

class LoanMatchScreen extends Component {

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        title: '贷款详情',
        sysBack: true,
        showKefu: true,
      }}
      sensors={{
        kefu: Sensors.YJAPP_MATCHLOAN_CS
      }}
    />
  })

  constructor (props) {
    super(props)
    console.disableYellowBox = true
    this._initState()
    Sensors.analyseContent(Sensors.YJAPP_MATCHLOAN_PAGEVIEW)
  }

  _initState () {
    this._loopDelay = 5000  //默认5秒请求一次
    this.state = {
      dataLoadStatus: StatusView.DATA_LOADING,//0：未加载，1加载成功，-1加载失败
      userMatchCompanyVo: {},
    }
  }

  //@Override 重写方法
  componentDidMount () {
    this._loadData()
  }

  componentWillUnmount () {
    this._loopTimer && clearTimeout(this._loopTimer)
  }

  /**
   * 是否正在匹配
   * @param vo
   * @returns {*|boolean}
   * @private
   */
  _isMatching (vo) {
    return !vo || !vo.type
  }

  /**
   * 匹配失败
   * @param vo
   * @returns {*|boolean}
   * @private
   */
  _isMatchFailed (vo) {
    return vo && vo.type === 2
  }

  /**
   * 是否匹配成功
   * @param vo
   * @returns {*|boolean}
   * @private
   */
  _isMatched (vo) {
    return vo && vo.type === 1
  }

  _loadData () {
    console.log('LoanDetailScreen', '_loadData')

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

    RequestSimplify.fetchNoLoading(YoujieApi.match_company_status, {}, (res) => {
      let vo = res.data || {}
      this.setState({
        dataLoadStatus: StatusView.DATA_SUCCESS,
        userMatchCompanyVo: vo,
      })
      if (this._isMatching(vo)) {
        this._loopDelay = (vo && vo.ms) ? parseInt(vo.ms) : 5000
        this._loopMatch()
        return
      }
      if (this._isMatched(vo)) {
        this._goMatchResult()
      }
    }, (err) => {
      this.setState({
        dataLoadStatus: StatusView.DATA_FAIL,
      })
    })
  }

  /**
   * 循环匹配
   *
   * 1.进来直接查询status
   * 2.未匹配状态（type===0），轮询查找status
   * 3.网络失败或者其他异常,不再执行匹配
   * 4.查询成功后调用details获取匹配机构
   *
   * @private
   */
  _loopMatch () {
    console.log('LoanDetailScreen', '_loopMatch')

    //已经匹配到就不匹配了
    if (!this._isMatching(this.state.userMatchCompanyVo)) {
      return
    }
    //至少2秒
    if (this._loopDelay < 5000) {
      this._loopDelay = 5000
    }
    console.log('LoanDetailScreen', 'start loopMatch !!!delay=' + this._loopDelay)

    // this._loopTimer && clearTimeout(this._loopTimer)
    this._loopTimer = setTimeout(() => {
      RequestSimplify.fetchNoLoading(YoujieApi.match_company_status, {}, (res) => {
        let vo = res.data || {}
        if (vo && !DataCompare.isSame(vo, this.state.userMatchCompanyVo)) {
          this.setState({
            userMatchCompanyVo: vo,
          })
        }
        //已经匹配到就不匹配了
        if (this._isMatching(vo)) {
          this._loopDelay = vo.ms ? parseInt(vo.ms) : 0
          this._loopMatch()
          return
        }
        if (this._isMatched(vo)) {
          this._goMatchResult()
        }
      }, (err) => {
        this.setState({
          userMatchCompanyVo: {
            ...this.state.userMatchCompanyVo,
            type: 2 //匹配失败
          },
        })
        Sensors.analyseContent(Sensors.YJAPP_MATCHFAIL_PAGEVIEW)
      })
    }, this._loopDelay)
  }

  /**
   * 匹配成功,跳转匹配结果页面
   * @private
   */
  _goMatchResult () {
    this.props.navigation.navigate(Screens.MatchResultScreen, {
      sysBack: true,
    })
  }

  render () {

    const {userMatchCompanyVo} = this.state
    const company = {
      companyLogoUrl: '',
      companyName: '申请时间'
    }
    return (
      <StatusView
        onPress={() => {
          this._loadData()
        }}
        data={{
          status: this.state.dataLoadStatus,
        }}>
        <View style={styles.container}>

          <LoanMatchOrderStatusView company={company} userMatchCompanyVo={userMatchCompanyVo}/>
          {[
            this._isMatching(userMatchCompanyVo) && this._renderMatchingView(),
            this._isMatchFailed(userMatchCompanyVo) && this._showSearchImage(),
          ]}
        </View>
      </StatusView>
    )
  };

  /**
   * 匹配动画
   * @returns {XML}
   * @private
   */
  _renderMatchingView () {
    const isMatchingStr = '正在为您智能匹配'
    return (
      <View style={styles.matching_view}>
        <Image
          style={{height: px(80), width: Device.width}}
          source={R.img.gif_matching}/>
        <Text style={styles.matching_text}>{isMatchingStr}</Text>
      </View>
    )
  }

  /**
   * 展示查找更多借款机构
   * @private
   */
  _showSearchImage () {
    const matchfailedStr = '当前未有符合条件的匹配结果\n请重新输入匹配条件'
    return (
      <View style={styles.match_failed_view}>
        <Text style={styles.matching_text}>{matchfailedStr}</Text>

        <GradientButton
          style={styles.button}
          data={{
            color: R.color.white,
            borderRadius: px(20),
            text: '重新匹配'
          }}
          onPress={() => {
            YTInvokeJumpUtils.jumpLoanHome({
              tab: 'home'
            })
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center', //垂直主轴方向
    backgroundColor: R.color.bg_color,
    flex: 1
  },
  matching_view: {
    marginTop: px(120),
    alignItems: 'center',
  },
  match_failed_view: {
    alignItems: 'center',
    flex: 1,
  }
  ,
  matching_text: {
    fontSize: sp(14),
    color: '#999999',
    textAlign: 'center',
    marginTop: px(80)
  },

  market_img: {
    position: 'absolute',
    height: px(90),
    width: Device.width,
    bottom: px(40),
    alignItems: 'center'
  },

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

export default LoanMatchScreen