ChargEco/Strides-SPAPP/app/pages/wallets/ViewHistory.js

/**
 * 钱包交易历史
 * @邠心vbe on 2025/01/17
 */
import React from 'react';
import { StyleSheet } from 'react-native';
import { Pressable } from 'react-native';
import { View } from 'react-native';
import TextView from '../../components/TextView';
import { PageList } from '../Router';

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

const toSummary = (item) => {
  if (item.refPk) {
    startPage(PageList.summary, { action: 'view', chargingPk: item.refPk });
  }
}

const ViewHistory = ({
  item,
  index,
  separators
}) => (
  <Pressable
    style={styles.historyItem}
    android_ripple={ripple}
    onPress={() => toSummary(item)}>
    <View style={styles.itemContent}>
      <TextView style={styles.textDesc}>{item.createTime}</TextView>
      <TextView style={styles.textId}>{$t("receipt.labelTransactionID")}{item.creditHistoryPk}</TextView>
      <TextView style={styles.textTitle}>{getTransTitle(item)}</TextView>
    </View>
    <View style={styles.rightTextView}>
      { item.hasSettle && (item.amountSymbol == 'M'
      ? <TextView style={styles.amountDuct}>- {item.amount}</TextView>
      : <TextView style={styles.amountText}>+ {item.amount}</TextView>
      )}
      { item.hasSettle
      ? <TextView style={styles.amountText}>Successful</TextView>
      : <TextView style={styles.amountDuct}>Pending</TextView>
      }
    </View>
  </Pressable>
);

export default ViewHistory;

const styles = StyleSheet.create({
  historyItem: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  itemContent: {
    flex: 1,
    paddingRight: 16
  },
  textTitle: {
    color: textPrimary,
    fontSize: 15,
    fontWeight: 'bold'
  },
  textDesc: {
    color: textSecondary,
    fontSize: 13
  },
  textId: {
    color: textSecondary,
    fontSize: 14,
    paddingTop: 2,
    paddingBottom: 2
  },
  amountDuct: {
    color: '#FF2E00',
    fontSize: 14
  },
  amountText: {
    color: colorAccent,
    fontSize: 14
  },
  rightTextView: {
    alignItems: "flex-end"
  }
})