npmchenwei111/app/screens/MatchResultScreen.js

test1111

/**
 * Created by chenwei on 2017/8/25.
 */
import React, { Component } from 'react'
import { ScrollView, StyleSheet, Text, View } from 'react-native'

import Device from '../utils/Device'
import LoanMatchCompanyRecommendView from '../views/loanmatch/LoanMatchCompanyRecommendView'
import RequestSimplify from '../utils/RequestSimplify'
import YoujieApi from '../api/YoujieApi'
import { px, sp } from '../utils/Px2dp'
import ActionBar from '../bar/ActionBar'
import GradientButton from '../common/views/GradientButton'
import SolidLine from '../common/views/SolidLine'
import YTInvokeBackKey from '../../src/native/YTInvokeBackKey'
import Screens from '../constant/Screens'
import YTInvokeLoading from '../../src/native/YTInvokeLoading'
import YTShowToast from '../../src/native/YTShowToast'
import YTInvokeAuthorize from '../../src/native/YTInvokeAuthorize'
import StatusView from '../common/views/StatusView'
import Utils from '../utils/Utils'
import Sensors from '../constant/Sensors'
import R from '../assets/R'

class MatchResultScreen extends Component {

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        title: '匹配结果'
      }}
    />
  })

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

  _initState () {
    this.state = {
      checked: [true],
      companyDetailResponse: [],
      dataLoadStatus: StatusView.DATA_LOADING,
    }
  }

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

  componentWillUnmount () {
  }

  _loadData () {
    this.setState({
      dataLoadStatus: StatusView.DATA_LOADING,
    })
    RequestSimplify.fetch(YoujieApi.match_company_details, {}, (res) => {
      let vo = res.data.companyDetailResponse || []
      this.setState({
        dataLoadStatus: vo.length > 0 ? StatusView.DATA_SUCCESS : StatusView.DATA_EMPTY,
        checked: [true],
        companyDetailResponse: vo,
      })
    }, (err) => {
      this.setState({
        dataLoadStatus: StatusView.DATA_FAIL,
      })
    })
  }

  /**
   * 请求认证信息，地理位置和设备信息
   * @private
   */
  _authorizeManager () {

    const submitOrder = this.state.companyDetailResponse.reduce(
      (submit, item, index) => {
        let vo = item.userMatchCompanyDetailVo
        if (vo && this.state.checked[index]) {
          submit = (submit ? (submit + ';') : '') + vo.companyId + ',' + vo.amount + ',' + vo.period + ',' + vo.periodType
        }
        return submit
      }, '')

    if (!submitOrder) {
      YTShowToast.show('请选择借款机构')
      return
    }

    YTInvokeLoading.show()
    YTInvokeAuthorize.authorizeAddressBookAndLocationCompanyID().then(() => {
      this._requestSubmit(submitOrder)
    }).catch((err) => {
      YTShowToast.show(err)
      YTInvokeLoading.dismiss()
    })
  }

  /**
   * 提交请求
   * @private
   */
  _requestSubmit (submitOrder) {
    Sensors.analyseContent(Sensors.YJAPP_MATCHRESULT_CONFIRM)
    RequestSimplify.fetch(YoujieApi.order_submit, {submitOrder: submitOrder}, ((res) => {
      this._submitSuccess()
      if (!Utils.isEmpty(res.data.error)) {
        YTShowToast.show(res.data.error)
      } else {
        YTShowToast.show('提单成功', YTShowToast.SHORT)
      }
    }))
  }

  /**
   * 处理提交订单之后的事件
   * @private
   */
  _submitSuccess () {
    this.props.navigation.navigate(Screens.OrderListScreen, {
      sysBack: true,
      orderListType: 0
    })
  }

  /**
   * 放弃提交订单
   * 直接返回首页
   * @private
   */
  _abandonSubmit () {
    Sensors.analyseContent(Sensors.YJAPP_MATCHRESULT_CANCEL)
    RequestSimplify.fetch(YoujieApi.order_submit_cancel, {}, (res) => {
      YTInvokeBackKey.back()
    })
  }

  render () {

    const companyDetailResponse = this.state.companyDetailResponse || []

    return (
      <StatusView
        onPress={() => {
          this._loadData()
        }}
        data={{
          status: this.state.dataLoadStatus,
        }}>
        <View style={styles.container}>
          <ScrollView style={{marginBottom: px(50)}}>
            {
              companyDetailResponse.reduce((group, item, index) => {
                if (index === 0) {
                  group.push(this._renderTitleView('优先推荐'))
                  group.push(this._renderLine())
                }
                if (index === 1) {
                  group.push(this._renderTipView('*建议申请多个产品，贷款成功率高达90%以上'))
                }
                if (index > 1) {
                  group.push(this._renderLine())
                }
                group.push(this._renderLoanMatchCompanyRecommendView(index, item.company, item.userMatchCompanyDetailVo))
                return group
              }, [])
            }
          </ScrollView>
          {
            this._renderButtons()
          }
        </View>
      </StatusView>
    )
  }

  /**
   * 渲染LoanMatchCompanyRecommendView
   * @param index
   * @param company
   * @param userMatchCompanyDetailVo
   * @private
   */
  _renderLoanMatchCompanyRecommendView (index, company, userMatchCompanyDetailVo) {
    return (
      <LoanMatchCompanyRecommendView
        key={index}
        checked={!!this.state.checked[index]}
        company={company}
        userMatchCompanyDetailVo={userMatchCompanyDetailVo}
        onPress={() => {
          this.state.checked[index] = !this.state.checked[index]
          this.setState({})
        }}
      />
    )
  }

  _renderTitleView (title) {
    return (
      <View style={styles.title_view}>
        <Text style={styles.title_font}>{title}</Text>
      </View>
    )
  }

  _renderTipView (title) {
    return (
      <View style={styles.tip_view}>
        <Text style={styles.tip_font}>{title}</Text>
      </View>
    )
  }

  _renderLine () {
    return (
      <View style={{height: px(0.5), backgroundColor: '#ffffff'}}>
        <View style={styles.div_view}/>
      </View>
    )
  }

  _renderButtons () {
    return (
      <View style={{position: 'absolute', bottom: 0}}>
        <SolidLine style={{width: Device.width}}/>
        <View
          style={{width: Device.width, flexDirection: 'row'}}>
          <GradientButton
            style={styles.button_left}
            data={{text: '放弃', color: '#999999', colorStart: '#F3F3F3', colorEnd: '#F3F3F3'}}
            onPress={() => {
              this._abandonSubmit()
            }}
          />
          <GradientButton
            style={styles.button_right}
            data={{enable: true, text: '确认申请', color: '#FFFFFF'}}
            onPress={() => {
              this._authorizeManager()
            }}
          />
        </View>
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',     //row,column
    justifyContent: 'center', //主轴方向
    alignItems: 'flex-start', //垂直主轴方向
    backgroundColor: R.color.bg_color
  },
  title_view: {
    flex: 1,
    height: px(40),
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center'
  },
  title_font: {
    fontSize: sp(16),
    color: '#3d4f52',
    textAlign: 'center',
    marginLeft: px(16),
  },
  tip_view: {
    flex: 1,
    height: px(37),
    backgroundColor: '#FFC59F',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: px(10),
  },
  tip_font: {
    fontSize: sp(12),
    color: '#3d4f52',
    textAlign: 'center',
    marginLeft: px(16),
  },
  div_view: {
    marginLeft: px(27), height: px(0.5), flex: 1, backgroundColor: '#e2e2e2',
  },
  button_left: {
    width: px(90), height: px(50)
  },
  button_right: {
    width: Device.width - px(90), height: px(50)
  }
})

export default MatchResultScreen