add app/pages/wallet/Wallet.js

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

@@ -0,0 +1,271 @@
+/**
+ * 钱包页面
+ * @邠心vbe on 2021/05/07
+ */
+import React, { Component } from 'react';
+import { View, StyleSheet, ScrollView, RefreshControl, Image, Pressable } from 'react-native';
+import { Balance } from './Payment';
+import { PageList } from '../Router';
+import History from './History';
+import Overview from './Overview';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+import { ElevationObject } from '../../components/Button';
+import TextView from '../../components/TextView';
+import Dialog from '../../components/Dialog';
+import app from '../../../app.json';
+import OverviewV2 from './OverviewV2';
+import VbeSkeleton from '../../components/VbeSkeleton';
+
+export default class Wallet extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      balance: 0,
+      tabIndex: 0,
+      refreshing: false,
+      tabWidth: 0,
+      tabHeight: 0,
+      balanceText: '',
+      pageShown: true,
+      pageLoaded: false
+    };
+  }
+
+  componentDidMount() {
+    this.props.navigation.addListener('focus', () => {
+      this.onRefresh();
+      this.setState({
+        pageShown: true
+      })
+      getUserInfo(info => {
+        this.setState({
+          balance: info.credit,
+          balanceText: info.creditStr
+        })
+      }, true)
+    });
+    this.props.navigation.addListener('blur', () => {
+      this.setState({
+        pageShown: false
+      })
+    });
+    if (!app.v3.overview) {
+      this.props.navigation.addListener('beforeRemove', (e) => {
+        if (this.state.pageShown) {
+          e.preventDefault();
+          Dialog.showProgressDialog();
+          this.setState({
+            pageShown: false
+          }, () => {
+            setTimeout(() => {
+              Dialog.dismissLoading();
+              goBack();
+            }, 500);
+          });
+        }
+      });
+    }
+    setTimeout(() => {
+      this.setState({
+        pageLoaded: true
+      })
+    }, 300);
+  }
+
+  changeTab(index) {
+    if (this.state.tabIndex !== index) {
+      this.setState({
+        tabIndex: index
+      });
+    }
+  }
+
+  onRefresh() {
+    this.setState({
+      refreshing: true
+    });
+  }
+
+  stopRefresh() {
+    this.setState({
+      refreshing: false
+    });
+  }
+
+  tabLayout({nativeEvent}) {
+    //console.log('tab layout\n\n\n\n\n', nativeEvent.layout);
+    if (nativeEvent.layout.width) {
+      this.setState({
+        tabWidth: nativeEvent.layout.width,
+        tabHeight: 0.171955 * nativeEvent.layout.width
+      })
+    }
+  }
+
+  render() {
+    if (!this.state.pageLoaded) {
+      return (
+        <VbeSkeleton
+          style={[ui.flex1, $padding(16)]}
+          layout={[
+            {width: "100%", height: 62, borderRadius: 6},
+            {width: "100%", height: "80%", borderRadius: 6, marginTop: 24},
+          ]}
+          animationDirection={"horizontalRight"}
+        />
+      )
+    }
+    return (
+      <ScrollView
+        style={styles.container}
+        refreshControl={
+          <RefreshControl
+            {...MyRefreshProps()}
+            refreshing={this.state.refreshing}
+            onRefresh={() => this.onRefresh()}
+          />
+        }>
+        {/* <View style={styles.balanceView}>
+          <Payment 
+            balance={this.state.balance}
+            isPayPerUse={false}
+            isWallet={true}
+            payType={"Credit Wallet"}
+            topup={() => toTopupPage()}/>
+        </View> */}
+        <Balance
+          balance={this.state.balance}
+          balanceText={this.state.balanceText}
+          action={$t('wallet.purchaseCredits')/*"Top Up"*/}
+          page={PageList.topupNew}
+        />
+        <View style={styles.contentView}>
+          <View
+            style={styles.tabView}
+            onLayout={props => this.tabLayout(props)}>
+            { this.state.tabIndex == 0
+            ? <Image
+                style={[styles.tabBackgroundLeft, {width: this.state.tabWidth + 1, height: this.state.tabHeight}]}
+                resizeMode="cover"
+                source={require('../../images/wallet/tab-left.png')}
+              />
+            : <Image
+                style={[styles.tabBackgroundRight, {width: this.state.tabWidth + 1, height: this.state.tabHeight}]}
+                resizeMode="cover"
+                source={require('../../images/wallet/tab-right.png')}
+              />
+            }
+            <Pressable
+              style={styles.tabItem}
+              onPress={() => this.changeTab(0)}>
+              <TextView
+                style={[
+                  styles.tabText,
+                  this.state.tabIndex == 0 && styles.active
+                ]}
+                numberOfLines={1}>
+                {$t('wallet.tabOverview')}
+              </TextView>
+            </Pressable>
+            <View style={{width: 16}}></View>
+            <Pressable
+              style={styles.tabItem}
+              onPress={() => this.changeTab(1)}>
+              <TextView
+                style={[
+                  styles.tabText,
+                  this.state.tabIndex == 1 && styles.active
+                ]}
+                numberOfLines={1}>
+                {$t('wallet.tabHistory')}
+              </TextView>
+            </Pressable>
+          </View>
+          { app.v3.overview
+          ? <OverviewV2
+              atAglance={false}
+              skeleton={!this.state.pageShown}
+              refresh={this.state.refreshing}
+              refreshed={() => this.stopRefresh()}
+              shown={this.state.tabIndex == 0}/>
+          : <Overview
+              atAglance={false}
+              skeleton={!this.state.pageShown}
+              refresh={this.state.refreshing}
+              refreshed={() => this.stopRefresh()}
+              shown={this.state.tabIndex == 0}/>
+          }
+          <History
+            refresh={this.state.refreshing}
+            refreshed={() => this.stopRefresh()}
+            shown={this.state.tabIndex == 1}/>
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5'
+  },
+  balanceView: {
+    paddingTop: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 12,
+    backgroundColor: colorLight
+  },
+  tabView: {
+    height: 60,
+    padding: 16,
+    overflow: 'hidden',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  tabItem: {
+    flex: 1,
+    marginTop: -14,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tabText: {
+    color: textSecondary,
+    fontSize: 16,
+    paddingTop: 5,
+    paddingLeft: 36,
+    paddingRight: 36,
+    paddingBottom: 5,
+  },
+  active: {
+    color: textPrimary,
+    fontWeight: 'bold'
+  },
+  contentView: {
+    ...$margin(8, 16, 16),
+    overflow: 'hidden',
+    borderRadius: 6,
+    ...ElevationObject(5),
+    backgroundColor: colorLight
+  },
+  tabBackgroundLeft: {
+    top: -1,
+    left: -1,
+    right: 0,
+    paddingRight: 1,
+    width: $vw(90),
+    height: $vw(14),
+    position: 'absolute'
+  },
+  tabBackgroundRight: {
+    top: -1,
+    left: 0,
+    right: -1,
+    paddingRight: 1,
+    width: $vw(90),
+    height: $vw(14),
+    position: 'absolute'
+  }
+})