occ-mobile/app/containers/mine/viewlist/recharge/RechargeHome.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  FlatList,
  Text,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  Dimensions,
  ScrollView,
  ActivityIndicator,
  RefreshControl,
} from 'react-native'
import { connect } from 'react-redux'

import Icon from '../../../../components/Iconfont/Iconfont'
import Input from '../../../../components/input/index'
import SelectTimeCom from '../../../../components/selectTime/selectTime'

import { NavigationActions, createAction } from '../../../../utils'
import { ReturnDate, ScaleUtil } from '../../../../utils/utils'
import { _AliPay } from '../../../../utils/payUtil'
import Toast from 'react-native-root-toast'
// @withHeader

// Save(1,"保存","保存态收款单，尚未提交"),
// Send(2,"提交","已提交收款单，尚未审批"),
// Audit(3,"审批通过","已审批收款单"),
// Auditing(4,"审批中","审批中收款单，正在审批"),
// UnSend(5,"收回","已收回收款单，尚未提交"),
// UnApprove(6,"审批不过","收款单审批未通过");
const status = ['', '保存', '提交', '审批通过', '审批中', '收回', '审批不过']
const { width, height } = Dimensions.get('window')
@connect(({ theme, payRegister, rechargeModels }) => ({
  ...theme,
  ...payRegister,
  ...rechargeModels,
}))
class RechargeHome extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 从外部传来的要货单code
      searchPayListInfo:
        props.navigation.state.params &&
        props.navigation.state.params.searchPayListInfo
          ? props.navigation.state.params.searchPayListInfo
          : '',
      setButton: 0,
      startTime: '',
      endTime: '',
      searchVal: '',
      code: '',
    }
    this.page = 0
    this.size = 5
  }

  // 跳转
  NavigateToOthers(routeName, params) {
    this.props.dispatch(
      NavigationActions.navigate({ routeName: routeName, params: params })
    )
  }

  componentDidMount = () => {
    this.props.dispatch(createAction('rechargeModels/PaywaysSagas')())
    this.onRefresh()
  }

  onRefresh() {
    this.props.dispatch(
      createAction('rechargeModels/PayBillList')({
        pageInfo: { page: 0, size: this.size },
        payBillAction: [],
        searchInfo: this.searchFN(),
      })
    )
  }

  goBackCb() {
    this.onRefresh()
    this.page = 0
  }

  searchFN() {
    const searchReturn = {
      search_EQ_customer: CUSTOMERINFO.id,
    }
    if (
      this.state.searchPayListInfo &&
      this.state.searchPayListInfo.length > 0
    ) {
      searchReturn.search_EQ_srcBillCode = this.state.searchPayListInfo
    }
    // 时间
    if (this.state.startTime) {
      searchReturn.search_GTE_creationTime_date = new Date(
        this.state.startTime
      ).getTime()
    }
    if (this.state.endTime) {
      searchReturn.search_LT_creationTime_date = new Date(
        this.state.endTime
      ).getTime()
    }
    // 关键字
    if (this.state.searchVal) {
      searchReturn.search_LIKE_paybillCode = '%' + this.state.searchVal + '%'
    }
    // 编码Tab
    if (this.state.code) {
      searchReturn.search_EQ_paymentMode = this.state.code
    }
    return searchReturn
  }
  // 头部
  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 10, flexDirection: 'row' }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              size={20}
              color={'#666'}
              style={{ marginTop: 4 }}
            />
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              返回
            </Text>
          </TouchableOpacity>
          {this.state.showSearch ? (
            <Input
              autoFocus={this.state.showSearch}
              style={{
                marginLeft: 25,
                marginTop: 8,
                height: 28,
                width: width / 1.6,
                borderRadius: width / 2,
                alignSelf: 'center',
                marginBottom: 8,
                paddingLeft: 14,
              }}
              textStyle={{
                paddingLeft: 10,
                height: 32,
                fontSize: 11,
                padding: 0,
              }}
              iconSize={14}
              blurOnSubmit={true}
              textInputBacg={'#F5F5F5'}
              iconColor={'#CCC'}
              placeholderTextColor={'#CCC'}
              placeholder="请输入付款银行账户/编号或收款银行账户"
              placeholderSize={8}
              onchangeFn={e => {
                this.state.searchVal = e
                this.setState({ searchVal: e, activeSection: true })
                this.onRefresh()
                this.page = 0
              }}
            />
          ) : (
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.19,
                color: '#333',
              }}
            >
              支付单
            </Text>
          )}
          {this.state.showSearch ? (
            <TouchableOpacity
              onPress={() =>
                this.setState({ showSearch: false, activeSection: true })
              }
              style={{
                position: 'absolute',
                right: 10,
                flexDirection: 'row',
              }}
            >
              <Text style={{ fontSize: 14, lineHeight: 20, color: '#666' }}>
                取消
              </Text>
            </TouchableOpacity>
          ) : (
            <View
              style={{
                position: 'absolute',
                right: 10,
                flexDirection: 'row',
              }}
            >
              <TouchableOpacity
                style={{ marginRight: 10 }}
                onPress={() =>
                  this.setState({
                    showSearch: true,
                    activeSection: true,
                    dateActive: true,
                  })
                }
              >
                <Icon name="icon-icon-sousuo" size={24} color={'#333'} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  this.setState({
                    dateActive: !this.state.dateActive,
                    activeSection: true,
                  })
                }
              >
                <Icon name="icon-icon-rili" size={24} color={'#333'} />
              </TouchableOpacity>
            </View>
          )}
        </View>
      </View>
    )
  }

  // 订单按钮组
  setList(list) {
    if (!list || (list && list.length < 1)) return null
    const data = [{ id: '', name: '全部', code: '' }, ...list]
    const textColor = ['#333', '#E14C46'],
      border = ['transparent', '#E14C46'],
      len = data.length,
      setArr = []
    for (let j = 0; j < len; j++) {
      setArr.push(
        <TouchableOpacity
          onPress={() => {
            this.setTouch(j, data[j].name, data[j].code)
          }}
          key={j}
          style={{
            width: len >= 5 ? width / 5 : width / len,
            alignSelf: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 18,
              color: this.state.setButton == j ? textColor[1] : textColor[0],
            }}
          >
            {data[j].name}
          </Text>
          <View
            style={{
              height: 2,
              backgroundColor:
                this.state.setButton == j ? border[1] : border[0],
              marginTop: 3,
              width: data[j].name.length > 2 ? 45 : 30,
            }}
          />
        </TouchableOpacity>
      )
    }
    return setArr
  }

  setTouch(index, touchName, code) {
    this.state.code = code
    this.setState({ setButton: index, touchName: touchName, code: code })
    this.onRefresh()
    this.page = 0
  }

  dateCbFn(data) {
    if (data.fn && data.fn == 'cancel') {
      this.setState({ dateActive: true })
    } else {
      this.state.startTime = data.startTime
      this.state.endTime = data.endTime
      this.setState({
        dateActive: true,
      })
      this.onRefresh()
      this.page = 0
    }
  }

  paymentList(item) {
    return (
      <View style={{ padding: 10, backgroundColor: '#FFF', marginBottom: 10 }}>
        <View
          style={{
            paddingBottom: 10,
            flexDirection: 'row',
            justifyContent: 'space-between',
            borderBottomColor: '#DDD',
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        >
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Text style={[styles.Text13, { color: '#333' }]}>
              {item.paybillCode}
            </Text>
          </View>
          <Text style={[styles.Text12, { color: '#999' }]}>
            {ReturnDate(item.billDate, true)}
          </Text>
        </View>
        <View
          style={{
            paddingVertical: 10,
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginBottom: 5,
            }}
          >
            <Text style={[styles.Text13, { color: '#333' }]}>
              {item.payeeName}
            </Text>
            <Text style={[styles.Text13, { color: '#333' }]}>
              {ScaleUtil(
                item.paymentAmount,
                item && item.currencyAmountScale
                  ? item.currencyAmountScale
                  : CURRENCY.currencyAmountScale
              )}
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 5,
            }}
          >
            <Text style={[styles.Text13, { color: '#333' }]}>
              {item.paymentModeName}
            </Text>
            <TouchableOpacity
              onPress={() => {
                if (this.toast) {
                  Toast.hide(this.toast)
                }
                if (item.paymentStatusName == '待支付') {
                  switch (item.paymentModeName) {
                    // 支付宝
                    case '支付宝':
                      _AliPay(
                        item,
                        // 成功后操作
                        () => this.onRefresh(),
                        // 验签失败操作
                        () => {},
                        // 取消支付
                        () => {}
                      )
                      break
                    // 微信
                    case '微信':
                      this.toast = Toast.show('微信支付，正在开发中', {
                        position: toastHeight,
                      })
                      // _WechatPay();
                      break
                    // // 畅捷支付
                    case '畅捷支付':
                      this.toast = Toast.show('畅捷支付，正在开发中', {
                        position: toastHeight,
                      })
                      break
                  }
                }
              }}
              disabled={item.paymentStatusName == '待支付' ? false : true}
              style={{
                borderColor: '#EEE',
                borderWidth:
                  item.paymentStatusName == '待支付' ? 1 / PixelRatio.get() : 0,
                paddingHorizontal: 8,
                paddingVertical: 3,
                borderRadius: 20,
              }}
            >
              <Text style={[styles.Text13, { color: '#E70013' }]}>
                {item.paymentStatusName}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }

  // 底部
  footerCom() {
    if (this.props.showFoot == 0) {
      return <View />
    } else if (this.props.showFoot == 1) {
      return (
        <View style={styles.footer}>
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#999',
            }}
          >
            没有更多数据
          </Text>
        </View>
      )
    } else if (this.props.showFoot == 2) {
      return (
        <View style={styles.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      )
    }
  }

  render() {
    const { appTheme, payBillList, totalPages, payWays } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        {this.header()}
        {/* SetList 状态 */}
        <View
          style={{
            flexDirection: 'row',
            height: 35,
            backgroundColor: '#FFF',
          }}
        >
          <ScrollView
            showsHorizontalScrollIndicator={false}
            pagingEnabled={true}
            horizontal={true}
            overScrollMode={'auto'}
            style={{ flex: 1, height: 35 }}
          >
            {this.setList(payWays)}
          </ScrollView>
        </View>
        {/* {HeaderView(this.props.dispatch, "付款单登记")} */}
        {/* card列表 */}
        {this.state.Loading ? (
          <View style={styles.footer}>
            <ActivityIndicator />
          </View>
        ) : (
          <FlatList
            keyExtractor={(item, index) => index}
            data={payBillList}
            extraData={this.state}
            renderItem={({ item, index }) => this.paymentList(item)}
            // renderItem={({ item, index }) =>{ this.topOrderRender(item, index)}}
            style={{ marginTop: 10 }}
            ListFooterComponent={this.footerCom.bind(this)}
            // initialNumToRender={5}
            onEndReachedThreshold={0.1}
            onEndReached={e => {
              if (this.props.showFoot != 0) {
                return
              }
              if (this.page != 1 && this.page >= totalPages) {
                return
              } else {
                this.page++
              }
              this.props.dispatch(
                createAction('rechargeModels/PayBillList')({
                  payBillAction: payBillList,
                  pageInfo: { page: this.page, size: this.size },
                  forUse: 'slipOn',
                  searchInfo: this.searchFN(),
                })
              )
            }}
            refreshControl={
              <RefreshControl
                refreshing={this.props.isRefreshing}
                onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
              />
            }
          />
        )}
        <SelectTimeCom
          dateActive={this.state.dateActive}
          dateCb={data => this.dateCbFn(data)}
        />

        <TouchableOpacity
          onPress={() => {
            this.NavigateToOthers('RechargeAdd', {
              goBackCb: () => {
                this.goBackCb()
              },
            })
          }}
          style={{
            position: 'absolute',
            bottom: 30,
            right: 30,
            width: 50,
            height: 50,
            borderRadius: 50,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#E14C46',
            paddingRight: 2,
          }}
        >
          <Icon
            name="icon-icon-guanbianniu"
            size={30}
            color={'#FFF'}
            style={{ transform: [{ rotate: '45deg' }] }}
          />
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  Text15: {
    fontSize: 15,
    lineHeight: 21,
  },
  Text14: {
    fontSize: 14,
    lineHeight: 20,
  },
  Text13: {
    fontSize: 13,
    lineHeight: 18,
  },
  Text12: {
    fontSize: 12,
    lineHeight: 17,
  },
  footer: {
    flex: 1,
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 10,
  },
})

export default RechargeHome