occ-mobile/app/containers/mine/header/Account.js

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

import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import Echarts from '../../../components/echarts/EchartsComponent'
import Collapsible from 'react-native-collapsible'

import SelectTimeCom from '../../../components/selectTime/selectTime'

const { width, height } = Dimensions.get('window')

const data = [
  { proTitle: 'A应收组织', Quota: 8000, Occupancy: 2330 },
  { proTitle: 'B应收组织', Quota: 4000, Occupancy: 2330 },
  { proTitle: 'C应收组织', Quota: 12000, Occupancy: 5748 },
]

@connect(({ theme, mine, mine_account }) => ({
  ...theme,
  ...mine,
  ...mine_account,
}))
class Account extends Component {
  constructor(props) {
    super(props)
    this.state = {
      reflsh: true,
      activeSection: true,
      selectText: '全部',
      // props.FinancialOrg && props.FinancialOrg.length > 0
      //   ? props.FinancialOrg[0].finanOrgName
      //   : "",
      finanOrgId: '',
      // props.FinancialOrg && props.FinancialOrg.length > 0
      //   ? props.FinancialOrg[0].finanOrgId
      //   : "",
      echartData: '',
      touchIndex: 0,
      listIndex: 'dsadsa',
      dateActive: true, //时间折叠-true为关
      startTime: '',
      endTime: '',
      IsScrollEnabled: true,
    }
    // console.disableYellowBox = true;
    this.page = 0
    this.size = 5
  }

  componentDidMount() {
    //  可用财务组织
    this.props.dispatch(
      createAction('mine/getCusSup')({
        customerId: CUSTOMERINFO.id,
        customerRankCode: CUSTOMERINFO.customerRankCode,
      })
    )
    this.FindAmount()
    this.onRefresh()
  }

  FindAmount() {
    // 预付余额
    this.props.dispatch(
      createAction('mine_account/getAccountBalance')({
        searchInfo: { financeOrgId: this.state.finanOrgId },
      })
    )
  }
  onRefresh() {
    this.props.dispatch(
      createAction('mine_account/AccountSagas')({
        searchInfo: this.searchInfoFn(),
        pageInfo: { size: 5, page: 0 },
        accountReturn: [],
      })
    )
  }

  searchInfoFn() {
    let searchData = {}
    // 时间格式需要search_  和  _date
    if (this.state.startTime) {
      searchData.search_GTE_creationTime_date = new Date(
        this.state.startTime
      ).getTime()
    }
    if (this.state.endTime) {
      searchData.search_LT_creationTime_date = new Date(
        this.state.endTime
      ).getTime()
    }
    return searchData
  }

  // 头部
  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>
          <Text
            style={{
              alignSelf: 'center',
              fontSize: 18,
              lineHeight: 25,
              letterSpacing: 0.19,
              color: '#333',
            }}
          >
            账户余额
          </Text>
          <View
            style={{ position: 'absolute', right: 10, flexDirection: 'row' }}
          >
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  dateActive: !this.state.dateActive,
                  activeSection: true,
                  reflsh: false,
                })
              }
            >
              <Icon name="icon-icon-rili" size={24} color={'#333'} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }

  _topOrganization(item, index) {
    return (
      <TouchableOpacity
        onPress={() => {
          this.state.finanOrgId = item.finanOrgId
          this.setState({
            activeSection: true,
            selectText: item.finanOrgName,
            finanOrgId: item.finanOrgId,
            echartData: item,
            touchIndex: index,
            reflsh: true,
          })
          this.FindAmount()
        }}
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          padding: 10,
          backgroundColor: '#FFF',
        }}
      >
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.17,
            color: '#333',
          }}
        >
          {item.finanOrgName}
        </Text>
        {this.state.touchIndex == index ? (
          <Icon name="icon-icon-duigou" size={16} color={'red'} />
        ) : null}
      </TouchableOpacity>
    )
  }

  jobList(item, key) {
    const stateList = [
      '',
      '保存',
      '提交',
      '审批通过',
      '审批中',
      '收回',
      '审批不过',
    ]
    return (
      <View>
        <TouchableOpacity
          onPress={() =>
            this.state.listIndex == key
              ? this.setState({ listIndex: 'dsadsa', reflsh: false })
              : this.setState({ listIndex: key, reflsh: false })
          }
          key={key}
          style={{ backgroundColor: '#FFF', flex: 1, marginTop: 10 }}
        >
          <View
            style={{
              borderBottomColor: '#EEE',
              borderBottomWidth: 1 / PixelRatio.get(),
              flexDirection: 'row',
              padding: 10,
              justifyContent: 'space-between',
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#333',
                }}
              >
                {item.code}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 16,
                  color: '#333',
                  marginLeft: 10,
                }}
              >
                {item.isRedflush == 0 ? '付款单' : '退款单'}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 16,
                  color: item.billreceiptState == 3 ? '#59C152' : '#E14C46',
                  marginLeft: 10,
                }}
              >
                {item.billreceiptState ? stateList[item.billreceiptState] : ''}
              </Text>
            </View>
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#999' }}>
              {ReturnDate(item.creationTime, true, '/')}
            </Text>
          </View>
          <View style={{ padding: 10, flexDirection: 'row' }}>
            <View style={{ flex: 1 }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#999',
                }}
              >
                付款金额
              </Text>
              <Text
                style={{
                  fontSize: 15,
                  lineHeight: 21,
                  letterSpacing: 0.18,
                  color: '#333',
                  marginTop: 10,
                }}
              >
                {item.money}
              </Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#999',
                }}
              >
                核销金额
              </Text>
              <Text
                style={{
                  fontSize: 15,
                  lineHeight: 21,
                  letterSpacing: 0.18,
                  color: '#333',
                  marginTop: 10,
                }}
              >
                {item.alreadyMoney || 0}
              </Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text
                style={{
                  fontSize: 13,
                  lineHeight: 18,
                  letterSpacing: 0.16,
                  color: '#999',
                }}
              >
                余额
              </Text>
              <Text
                style={{
                  fontSize: 15,
                  lineHeight: 21,
                  letterSpacing: 0.18,
                  color: '#E70013',
                  marginTop: 10,
                }}
              >
                {item.remainMoney || 0}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
        <Collapsible collapsed={this.state.listIndex !== key}>
          <View
            style={{
              padding: 10,
              marginHorizontal: 10,
              backgroundColor: '#FFFBF2',
            }}
          >
            <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
              结算方式：{item.settleMethodName}
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
              收款银行账户：{item.receiptAccountAccountNumber}
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
              产品线：{item.productLineName}
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
              收款业务类型：{item.billreceiptTypeName}
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 22, color: '#666' }}>
              收款金额：{CURRENCY.currencySign}
              {item.money}
            </Text>
            <View
              style={{
                marginTop: 5,
                borderTopColor: '#ddd',
                borderTopWidth: 1,
                paddingVertical: 5,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginBottom: 5,
                }}
              >
                <Text style={{ fontSize: 13, color: '#333' }}>核销订单</Text>
                <Text style={{ fontSize: 13, color: '#333' }}>核销金额</Text>
              </View>

              <FlatList
                keyExtractor={(item, index) => index}
                data={item.billlistCheck}
                extraData={this.state.touchIndex}
                renderItem={({ item, index }) => (
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                    }}
                  >
                    <Text style={{ fontSize: 12, color: '#666' }}>
                      {item.checkCode || ''}
                    </Text>
                    <Text style={{ fontSize: 12, color: '#666' }}>
                      {item.checkMoney || ''}
                    </Text>
                  </View>
                )}
              />
            </View>
          </View>
        </Collapsible>
      </View>
    )
  }

  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,
        reflsh: true,
      })
      this.onRefresh()
    }
  }

  // 底部
  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, accountData, accountBalance, totalPages } = this.props
    // echart 刷新问题  后期优化
    echartDatas = {
      proTitle: this.state.reflsh,
      creditBalance: accountBalance,
      creditLimit: 0,
    }
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {this.header()}

        <View
          style={{ flex: 1 }}
          // scrollEnabled={false}
          // onScrollBeginDrag={() => {
          //   console.log("开始");
          //   this.setState({ IsScrollEnabled: true });
          // }}
          // onMomentumScrollEnd={() => {
          //   console.log("结束");
          //   this.setState({ IsScrollEnabled: false });
          // }}
        >
          <TouchableOpacity
            onPress={() =>
              this.setState({
                activeSection: !this.state.activeSection,
                reflsh: false,
              })
            }
            style={{
              flexDirection: 'row',
              padding: 7,
              backgroundColor: '#FFF',
              borderBottomColor: '#DDD',
              borderBottomWidth: 1 / PixelRatio.get(),
            }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                letterSpacing: 0.17,
                color: '#333',
              }}
            >
              {this.state.selectText}
            </Text>
            <Icon
              name="icon-icon-xialaxiaosanjiao"
              size={16}
              color={'#333'}
              style={[
                !this.state.activeSection
                  ? { transform: [{ rotate: '180deg' }] }
                  : {},
                {
                  marginLeft: 10,
                  marginTop: 2,
                },
              ]}
            />
          </TouchableOpacity>

          {/* 图表 */}
          <View style={{ backgroundColor: '#FFF' }}>
            <Echarts
              data={echartDatas}
              height={200}
              color={['#FF7D64', '#FF7D64']}
              bottomText={'当前预付余额'}
              bottom={'27%'} //字体距离底的高度
              fontSize={24} //余额数字字体
            />
          </View>

          <FlatList
            keyExtractor={item => item.id}
            data={accountData}
            renderItem={({ item, index }) => this.jobList(item, index)}
            ListFooterComponent={this.footerCom.bind(this)}
            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('mine_account/AccountSagas')({
                  accountReturn: accountData,
                  pageInfo: { page: this.page, size: this.size },
                  searchInfo: this.searchInfoFn(),
                  forUse: 'slipOn',
                })
              )
            }}
            refreshControl={
              <RefreshControl
                refreshing={this.props.isRefreshing}
                onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
              />
            }
          />

          {/* 下拉遮罩 */}
          {!this.state.activeSection || !this.state.dateActive ? (
            <View
              style={{
                position: 'absolute',
                width: width,
                height: height,
                backgroundColor: '#000',
                opacity: 0.5,
                top: 101,
              }}
            />
          ) : null}

          {/* 应收组织折叠 ---悬浮*/}
          <View
            style={{ position: 'absolute', top: 40, left: 0, width: width }}
          >
            <Collapsible collapsed={this.state.activeSection}>
              <FlatList
                keyExtractor={(item, index) => index}
                data={this.props.FinancialOrg}
                extraData={this.state.touchIndex}
                renderItem={({ item, index }) =>
                  this._topOrganization(item, index)
                }
              />
            </Collapsible>
          </View>
        </View>
        <SelectTimeCom
          dateActive={this.state.dateActive}
          dateCb={data => this.dateCbFn(data)}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  footer: {
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 10,
  },
})

export default Account