ChargEco/Strides-APP/app/pages/wallet/History.js

/**
 * 钱包明细页面
 * @邠心vbe on 2021/05/08
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Pressable, TouchableOpacity } from 'react-native';
import apiWallet from '../../api/apiWallet';
import TextView from '../../components/TextView';
import { PageList } from '../Router';
import app from '../../../app.json';

const IconCharge = require('../../images/wallet/ic-type-charge.png');
const IconPayment = require('../../images/wallet/ic-type-payment.png');

export default class History extends Component {
  constructor(props) {
    super(props);
    this.state = {
      historyList: []
    };
    this.refreshing = false;
  }

  componentDidMount() {
    this.getHistory();
  }

  componentDidUpdate() {
    if (this.props.refresh && !this.refreshing && this.props.shown) {
      this.refreshing = true;
      this.getHistory();
    }
  }

  getLastPk() {
    if (this.state.historyList.length > 0) {
      return this.state.historyList[this.state.historyList.length-1].creditRecordPk;
    }
    return null;
  }

  getHistory() {
    if (app.v3.overview) {
      this.getHistoryV2();
      return;
    }
    apiWallet.getTransactionList({latestPk: ''}).then(res => {
      this.stopRefresh();
      if (res.data) {
        this.setState({
          historyList: res.data
        });
      }
    }).catch(err => {
      this.setState({
        historyList: []
      });
      this.stopRefresh();
    });
  }

  getHistoryV2() {
    apiWallet.getTransactionListV2({latestPk: ''}).then(res => {
      this.stopRefresh();
      if (res.data && res.data.length) {
        this.setState({
          historyList: res.data.slice(10)
        });
      } else {
        this.setState({
          historyList: []
        });
      }
    }).catch(err => {
      this.setState({
        historyList: []
      });
      this.stopRefresh();
    });
  }

  stopRefresh() {
    if (this.props.refreshed) {
      this.props.refreshed();
    }
    this.refreshing = false;
  }

  toSummary(index) {
    const station = this.state.historyList[index];
    if (station.refPk) {
      startPage(PageList.summary, { action: 'view', chargingPk: station.refPk });
    }
  }

  getTransTitle(item) {
    let title =  item.createTime;
    if (item.remarks) {
      title += ': ' + item.remarks;
    } else if (item.amountSymbol == 'M') {
      title += ': ' + (item.siteName || "Charging");
    } else {
      title += ': ' + $t('wallet.topUp');
    }
    return title;
  }

  toHistoryList() {
    startPage(PageList.history);
  }

  render() {
    return (
      <View style={this.props.shown ? ui.flex1 : styles.hide}>
        {/* <View style={ui.flexcc}>
          <Text style={styles.rangeText}>9th Aug to 12th Aug</Text>
          <MaterialIcons
            name='arrow-drop-down'
            color={colorDark}
            size={28}/>
        </View> */}
        <View style={styles.listView}>
        { this.state.historyList.length > 0
          ? <> 
            {
              this.state.historyList.map((item, index) => {
                return (
                  <Pressable
                    key={index}
                    android_ripple={ripple}
                    style={styles.itemView}
                    onPress={() => {
                      this.toSummary(index)
                    }}>
                    <Image
                      style={styles.iconType}
                      resizeMode="contain"
                      source={(item.amountSymbol == 'P' || item.remarks) ? IconPayment : IconCharge}/>
                    <View style={[styles.itemContent, index > 0 && styles.divide]}>
                      <View style={ui.flex1}>
                        <TextView style={styles.issueName}>{this.getTransTitle(item)}</TextView>
                        <TextView style={styles.issueDesc}>{$t('wallet.labelTransactionId') + item.creditRecordPk}</TextView>
                      </View>
                      { item.amountSymbol == 'M'
                        ? <TextView style={styles.amountDuct}>- {item.amount}</TextView>
                        : <TextView style={styles.amountText}>+ {item.amount}</TextView>
                      }
                    </View>
                  </Pressable>
                );
              })
            }
            </>
          : <Text style={styles.noResult}>{$t('wallet.noHistoryData')}</Text>
        }
        </View>
        { (app.v3.overview && this.state.historyList.length > 0) && 
          <TouchableOpacity
            style={styles.moreButton}
            activeOpacity={0.4}
            onPress={() => this.toHistoryList()}>
            <Text
              style={ui.link}>
              {$t("wallet.viewMore")}
            </Text>
          </TouchableOpacity>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  hide: {
    display: 'none'
  },
  rangeText: {
    color: '#000',
    fontSize: 14
  },
  listView: {
    marginTop: 16,
    minHeight: $vh(30),
    backgroundColor: colorLight
  },
  noResult: {
    color: '#999',
    fontSize: 14,
    padding: 20,
    lineHeight: $vh(20),
    textAlign: 'center',
  },
  itemView: {
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  itemContent: {
    flex: 1,
    marginLeft: 16,
    ...$padding(16, 4),
    alignItems: 'center',
    flexDirection: 'row'
  },
  divide: {
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  iconType: {
    width: 28,
    height: 28
  },
  issueName: {
    color: textPrimary,
    fontSize: 12,
    paddingBottom: 2
  },
  issueDesc: {
    color: '#999',
    fontSize: 11
  },
  amountDuct: {
    color: '#FF2E00',
    fontSize: 14
  },
  amountText: {
    color: textPrimary,
    fontSize: 14
  },
  moreButton: {
    padding: 16,
    alignItems: 'center',
    marginBottom: 8
  }
})