npmchenwei111/app/screens/OrderListScreen.js

test1111

import React, { Component } from 'react'
import { DeviceEventEmitter, Image, ScrollView, StyleSheet, Text, View } from 'react-native'
import Button from '../common/views/Button'
import ActionBar from '../bar/ActionBar'
import Screens from '../constant/Screens'
import EmitterReactEvent from '../constant/EmitterReactEvent'
import LoanListItemView from '../views/LoanListItemView'
import { px, px2dp, sp } from '../utils/Px2dp'
import StatusView from '../common/views/StatusView'
import RequestSimplify from '../utils/RequestSimplify'
import YoujieApi from '../api/YoujieApi'
import Sensors from '../constant/Sensors'
import R from '../assets/R'
import GradientButton from '../common/views/GradientButton'
import AuthData from '../public/authentication/action/AuthData'
import PropsUtils from '../utils/PropsUtils'

class OrderListScreen extends Component {

  static navigationOptions = ({navigation, screenProps}) => ({
    header: null
  })

  constructor (props) {
    super(props)
    this.orderType = PropsUtils.getExtras(props).orderListType
    this.orderType = this.orderType ? this.orderType : 0
    this._initState(this.orderType)
    Sensors.analyseContent(Sensors.YJAPP_LOANLIST_PAGEVIEW)
  }

  _initState (orderType) {
    let title = ''
    let kefuSensor = ''
    let companySensor = ''
    switch (parseInt(orderType)) {
      case 0:
        title = '全部订单'
        kefuSensor = Sensors.YJAPP_USER_ALLORDER_SERVICE
        companySensor = Sensors.YJAPP_USER_ALLORDER_EMPTY
        break
      case 1:
        title = '待确认订单'
        kefuSensor = Sensors.YJAPP_USER_UNCONFIRMED_SERVICE
        companySensor = Sensors.YJAPP_USER_UNCONFIRMED_EMPTY
        break
      case 2:
        title = '待放款订单'
        kefuSensor = Sensors.YJAPP_USER_INPROCESS_SERVICE
        companySensor = Sensors.YJAPP_USER_INPROCESS_EMPTY
        break
      case 3:
        title = '未通过订单'
        kefuSensor = Sensors.YJAPP_USER_NOTPASS_SERVICE
        companySensor = Sensors.YJAPP_USER_NOTPASS_EMPTY
        break
      case 4:
        title = '待还款订单'
        kefuSensor = Sensors.YJAPP_USER_REPAYMENT_SERVICE
        companySensor = Sensors.YJAPP_USER_REPAYMENT_EMPTY
        break
      default:
        title = '全部订单'
        kefuSensor = Sensors.YJAPP_USER_ALLORDER_SERVICE
        companySensor = Sensors.YJAPP_USER_ALLORDER_EMPTY
    }
    this.state = {
      dataLoadStatus: StatusView.DATA_LOADING,
      orders: [],
      showEmpty: false,
      button: {
        enable: false,
        text: '',
        action: ''
      },
      title: title,
      kefuSensor: kefuSensor,
      companySensor: companySensor,
      recommendList: []
    }
  }

  componentDidMount () {
    this._loadData()
    this.refreshListener = DeviceEventEmitter.addListener(EmitterReactEvent.REFRESH_ORDER_LIST, () => {
      this._loadData()
    })
  }

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

  _loadData () {
    RequestSimplify.fetchNoLoading(YoujieApi.order_type_list, {orderListType: parseInt(this.orderType)}, (res) => {
      let orders = res.data.orders || []
      this.setState({
        dataLoadStatus: StatusView.DATA_SUCCESS,
        orders: orders
      })
      if (orders.length === 0) {
        this.setState({
          showEmpty: true,
          button: res.data.appButtonVO
        })
      }
    }, (err) => {
      this.setState({
        dataLoadStatus: StatusView.DATA_FAIL,
      })
    })
  }

  goOrderDetail (orderNo) {
    console.log(orderNo, 'OrderList.js orderNo')
    this.props.navigation.navigate(Screens.OrderDetailScreen, {
      orderNo: orderNo
    })
  }

  _getEmptyView () {
    return (
      <View style={styles.empty_content}>
        <Image style={styles.empty_image} source={R.img.ic_empty_order_list}/>
        <Text style={styles.empty_font}>{'还没有订单哦~'}</Text>
        <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)
          }}
        />
      </View>
    )
  }

  render () {
    const navigation = this.props.navigation
    const screenProps = this.props.screenProps
    return (
      <StatusView
        onPress={() => {
          this._loadData()
        }}
        data={{
          status: this.state.dataLoadStatus,
          showActionBar: true,
          nav: navigation,
          screenProps: screenProps,
          title: this.state.title,
        }}>
        <View style={styles.container}>
          {
            this._renderTitleBar(navigation, screenProps)
          }
          <ScrollView>
            {
              this.state.orders.map((value, index) => (
                <View key={value.orderNo}
                      style={styles.item_bg}>
                  <Button onPress={() => {
                    this.goOrderDetail(value.orderNo)
                    Sensors.analyseContent(Sensors.YJAPP_LOANLIST_LIST)
                  }}>
                    <View>
                      <LoanListItemView order={value} showCompanyImage={true}/>
                    </View>
                  </Button>
                </View>
              ))
            }
            {
              this.state.showEmpty ? this._getEmptyView() : null
            }
          </ScrollView>
        </View>
      </StatusView>
    )
  }

  _renderTitleBar (navigation, screenProps) {
    return (
      <ActionBar
        nav={navigation}
        screenProps={screenProps}
        data={{
          title: this.state.title,
          showKefu: true
        }}
        sensors={{
          kefu: this.state.kefuSensor
        }}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: R.color.bg_color},

  item_bg: {
    marginBottom: px2dp(10)
  },
  empty_content: {
    flexDirection: 'column', alignItems: 'center'
  },
  empty_image: {
    height: px(84), width: px(82), resizeMode: Image.resizeMode.contain, marginTop: px(65)
  },
  empty_font: {
    color: R.color.font_input_hint,
    fontSize: sp(14),
    textAlign: 'center',
    marginTop: px(10)
  },
  hot_font: {
    color: R.color.bar_color,
    fontSize: sp(16),
    textAlign: 'center',
    marginLeft: px(10)
  },
  loandes: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: px(24),
    marginTop: px(52),
    marginBottom: px(10)
  },
  button: {
    width: px(200), height: px(40), marginTop: px(32)
  },
  line: {
    width: px(15), height: px(1), backgroundColor: R.color.font_input_hint
  }

})

export default OrderListScreen