add app/pages/wallet/Payment.js

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

@@ -0,0 +1,208 @@
+/**
+ * 支付组件
+ * @邠心vbe on 2021/04/23
+ */
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Image, Pressable } from 'react-native';
+import Button, { ElevationObject } from '../../components/Button';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+import { LowCreditDialog } from '../charge/InfoDialog';
+import { PaymentDefault } from '../payment/PaymentConfig';
+import { PageList } from '../Router';
+
+const Payment = ({
+    topup, balance,
+    payType = PaymentDefault.DEFAULT.payName,
+    isWallet = PaymentDefault.DEFAULT.isWallet,
+    isPayPerUse = PaymentDefault.DEFAULT.isPayPerUse,
+    canShowLowCreditDialog = false,
+    onMethodChange,
+    refreshId = 0
+  }) => {
+  const [visible, showDialog] = useState(false)
+  useEffect(() => {
+    if (balance == undefined && canShowLowCreditDialog) {
+      if (userInfo.credit <= 5 && refreshId > 0) {
+        showDialog(true)
+      }
+    }
+  }, [refreshId]);
+  return (
+    <View style={styles.paymentView}>
+      <Image 
+        style={styles.walletIcon}
+        source={require('../../images/charge/ic-payment.png')}
+      />
+      { isWallet || isPayPerUse
+        ? <View style={{paddingLeft: 16}}>
+            <Image
+              style={{
+                width: 50,
+                height: 14
+              }}
+              resizeMode={'contain'}
+              source={require('../../images/tool-logo.png')}/>
+            <Text
+              style={styles.rateText}
+              numberOfLines={1}
+              ellipsizeMode={'clip'}>{payType}</Text>
+          </View>
+        : <View style={{paddingLeft: 16}}>
+            <Text style={styles.creditText}>Visa/Mastercard</Text>
+            <Text style={styles.creditText}>Credit/Debit Card</Text>
+          </View>
+      }
+      <Text
+        style={styles.balance}
+        numberOfLines={1}
+        suppressHighlighting={true}>
+        {isWallet ? currency + (balance ?? userInfo.credit) : ''}
+      </Text>
+      { topup
+        ? <Button
+            style={styles.topupView}
+            text="+ Top Up"
+            textStyle={styles.topupText}
+            viewStyle={styles.infoStatus}
+            onClick={topup}/>
+        : <Button
+            style={styles.topupView}
+            text="Selected"
+            textStyle={styles.topupText}
+            viewStyle={styles.infoStatus}
+            onClick={() => {if (onMethodChange) onMethodChange()}}/>
+      }
+      <LowCreditDialog
+        visible={visible}
+        onClose={topup => {
+          showDialog(false)
+          if (topup) {
+            toTopupPage()
+          } else {
+            //goBack();
+          }
+        }
+      }/>
+    </View>
+  );
+}
+
+export default Payment;
+
+export const Balance = ({balance=0, balanceText, action, page=PageList.wallet}) => {
+  return (
+    <Pressable
+      style={styles.balanceView}
+      onPress={() => startPage(page)}>
+      <Image
+        style={styles.balanceIcon}
+        source={require('../../images/user/card-wallet.png')}/>
+      <TextView style={styles.balanceTitle}>{$t('wallet.creditWalletLabel')}</TextView>
+      { balanceText
+      ? <TextView style={styles.balanceValue} numberOfLines={1}>{balanceText}</TextView>
+      : <TextView style={styles.balanceValue} numberOfLines={1}>{getBalance(utils.isNotEmpty(balance) ? balance : userInfo.credit)}</TextView>
+      }
+      <Text style={ui.flex1}></Text>
+      <TextView style={styles.actionText} numberOfLines={1} ellipsizeMode="middle">{action ?? $t('wallet.viewHistory')}</TextView>
+      { utils.isNotEmpty(page) &&
+        <MaterialIcons
+          size={20}
+          color={textCancel}
+          name='chevron-right'/>
+      }
+    </Pressable>
+  );
+}
+
+const getBalance = (balance) => {
+  console.log('getBalance', balance, userInfo);
+  return balance ? balance.toFixed(2) : '0.0'
+}
+
+const styles = StyleSheet.create({
+  paymentView: {
+    borderRadius: 8,
+    paddingTop: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    ...ElevationObject(5),
+    backgroundColor: colorLight,
+    justifyContent: 'space-between'
+  },
+  walletIcon: {
+    width: 36,
+    height: 36
+  },
+  creditText: {
+    color: textPrimary,
+    fontSize: 14,
+  },
+  rateText: {
+    color: textPrimary,
+    fontSize: 14,
+  },
+  balance: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 16,
+    textAlign: 'right',
+    fontWeight: 'bold',
+    paddingRight: 24,
+    
+  },
+  balanceIcon: {
+    width: 30,
+    height: 30
+  },
+  balanceTitle: {
+    color: '#000',
+    fontSize: 16,
+    paddingLeft: 12,
+    fontWeight: 'bold'
+  },
+  balanceValue: {
+    color: '#000',
+    fontSize: 18,
+    paddingLeft: 6
+  },
+  infoStatus: {
+    paddingTop: 4,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 4,
+    borderRadius: 4
+  },
+  selected: {
+    color: colorAccent,
+    backgroundColor: colorDark
+  },
+  topupView: {
+    borderRadius: 4,
+    backgroundColor: colorDark
+  },
+  topupText: {
+    color: colorAccent,
+    fontSize: 12,
+    fontWeight: 'normal'
+  },
+  balanceView: {
+    margin: 16,
+    padding: 16,
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: 6,
+    overflow: 'hidden',
+    ...ElevationObject(5),
+    backgroundColor: colorLight
+  },
+  actionText: {
+    color: textCancel,
+    fontSize: 12,
+    paddingLeft: 8,
+    paddingRight: 2
+  }
+});