add app/pages/wallet/History.js

Strides-SPAPP/app/pages/wallet/History.js

@@ -0,0 +1,254 @@
+/**
+ * 钱包明细页面
+ * @邠心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';
+import VbeSkeleton from '../../components/VbeSkeleton';
+
+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 = {
+      loading: true,
+      historyList: [],
+      loadingList: ["", "", "", "", ""]
+    };
+    this.refreshing = false;
+  }
+
+  componentDidMount() {
+    //this.getHistory();
+  }
+
+  componentDidUpdate() {
+    if ((this.state.loading || 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 => {
+      if (res.data) {
+        this.setState({
+          historyList: res.data
+        });
+      }
+    }).catch(err => {
+      this.setState({
+        historyList: []
+      });
+    }).finally(() => {
+      this.setState({
+        loading: false,
+      });
+      this.stopRefresh();
+    });
+  }
+
+  getHistoryV2() {
+    apiWallet.getTransactionListV2({latestPk: ''}).then(res => {
+      if (res.data && res.data.length) {
+        this.setState({
+          historyList: res.data.slice(0, 10)
+        });
+      } else {
+        this.setState({
+          historyList: []
+        });
+      }
+    }).catch(err => {
+      this.setState({
+        historyList: []
+      });
+    }).finally(() => {
+      this.setState({
+        loading: false,
+      });
+      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}>
+        { this.state.loading
+        ? <View style={styles.listView}>
+          { this.state.loadingList.map((item, index) =>
+            <View style={styles.itemView} key={index}>
+              <VbeSkeleton
+                style={styles.iconType}
+                layout={[
+                  {width: 32, height: 32, borderRadius: 30, marginRight: 16}
+                ]}/>
+              <View style={styles.itemContent}>
+                <VbeSkeleton
+                  style={ui.flex1}
+                  layout={[
+                    {width: '100%', height: 15, marginTop: 4},
+                    {width: '60%', height: 15, marginTop: 4}
+                  ]}/>
+              </View>
+            </View>
+          )}
+          </View>
+        : <><View style={styles.listView}>
+          { this.state.historyList.length > 0
+          ? this.state.historyList.map((item, index) => (
+              <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: 0,
+    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
+  }
+})