Enhancement UI

Strides-APP/app/pages/chargeV2/InfoDialog.js

@@ -7,7 +7,7 @@ import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 import Modal from "react-native-modal";
 import { ModalProps } from "../../components/BottomModal";
 import Button from "../../components/Button";
-import { Styles } from "../../components/Toolbar";
+import { BackButton, Styles } from "../../components/Toolbar";
 import { PageList } from "../Router";
 import app from "../../../app.json"
 import TextView from "../../components/TextView";
@@ -82,28 +82,30 @@ export const ErrorDialog = ({visible, code, message, onClose}) => {
   );
 }
 
-export const LowCreditDialog = ({visible, onClose}) => {
+export const LowCreditDialog = ({visible, message, onClose}) => {
   return (
     <Modal
       isVisible={visible}
-      onBackButtonPress={onClose}
-      onBackdropPress={onClose}
+      onBackButtonPress={() => onClose(false)}
+      onBackdropPress={() => onClose(false)}
       {...ModalProps}>
       <View style={styles.dialog}>
         <TextView style={styles.title}>{$t('wallet.titleLowCredits')}</TextView>
-        <TextView style={styles.message}>{$t('wallet.creditIsBelow5')}</TextView>
+        <TextView style={styles.message}>{message || $t('wallet.creditIsBelow5')}</TextView>
         <TextView style={styles.message}>{$t('wallet.tipsLowCredits')}</TextView>
         <View style={$padding(12,0)}>
           <Button
             text={$t('wallet.btnTop_Up')}
             onClick={() => onClose(true)}/>
         </View>
-        <Ionicons
-          name='close-outline'
-          size={30}
-          color={'#999'}
+        <BackButton
           style={styles.closeIcon}
-          onPress={() => onClose(false)} />
+          onPress={() => onClose(false)}>
+          <Ionicons
+            name='close-outline'
+            size={30}
+            color={'#999'}/>
+        </BackButton>
       </View>
     </Modal>
   );
@@ -113,8 +115,8 @@ export const CancelReserveDialog = ({visible, onClose}) => {
   return (
     <Modal
       isVisible={visible}
-      onBackButtonPress={onClose}
-      onBackdropPress={onClose}
+      onBackButtonPress={() => onClose(false)}
+      onBackdropPress={() => onClose(false)}
       {...ModalProps}>
       <View style={styles.dialog}>
         <TextView style={styles.title}>{$t('charging.cancelReservation')}</TextView>
@@ -236,7 +238,7 @@ const styles = StyleSheet.create({
   },
   title: {
     color: '#000',
-    fontSize: 24,
+    fontSize: 20,
     textAlign: "center"
   },
   message: {

Strides-APP/app/pages/chargingV3/ChargingPage.js

@@ -8,8 +8,8 @@ import app from '../../../app.json';
 import apiCharge from '../../api/apiCharge';
 import apiWallet from '../../api/apiWallet';
 import Dialog from '../../components/Dialog';
-import { ErrorDialog } from '../chargeV2/InfoDialog';
-import { PaymentDefault, PAYTYPE } from '../payment/PaymentConfig';
+import { ErrorDialog, LowCreditDialog } from '../chargeV2/InfoDialog';
+import { PaymentDefault, PAYTYPE, toTopupPage } from '../payment/PaymentConfig';
 import { PageList } from '../Router';
 import StepAuth from './StepAuth';
 import StepCharging from './StepCharging';
@@ -32,6 +32,8 @@ export default class ChargingPageV4 extends Component {
       errorCode: 'A9',
       errorMessage: '',
       lastUpdated: '',
+      lowMessage: "",
+      showLowDialog: false,
       showErrorDialog: false,
       showStationDialog: false,
       currentPerUse: "",
@@ -398,7 +400,12 @@ export default class ChargingPageV4 extends Component {
       //toastShort(err);
       console.log("[开始充电V3-错误]", err, code);
       //Dialog.dismissLoading();
-      if (code == 5200) {
+      if (code == 5175) {
+        this.setState({
+          lowMessage: err,
+          showLowDialog: true
+        });
+      } else if (code == 5200) {
         this.showErrorDialog('none', "(" + data.transactionPk + ') ' + err);
       } else {
         this.showErrorDialog('A4', err);
@@ -491,6 +498,15 @@ export default class ChargingPageV4 extends Component {
     });
   }
 
+  closeLowDialog(back) {
+    this.setState({
+      showLowDialog: false,
+    })
+    if (back) {
+      toTopupPage();
+    }
+  }
+
   render() {
     return (
       <View style={ui.flex1}>
@@ -531,6 +547,10 @@ export default class ChargingPageV4 extends Component {
           onClose={() => {
             this.closeError();
           }}/>
+        <LowCreditDialog
+          visible={this.state.showLowDialog}
+          message={this.state.lowMessage}
+          onClose={res => this.closeLowDialog(res)}/>
         <DialogPayPerUse
           visible={this.state.showDialogPayPerUse}
           amount={this.state.stationInfo.payPerUseAmount}

Strides-APP/app/pages/chargingV3/DialogPayPerUse.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(0,0,0,.1)'
+    backgroundColor: 'rgba(0,0,0,.4)'
   },
   content: {
     width: Dialog.dialogWidth,

Strides-APP/app/pages/vouchers/ListPoints.js

@@ -12,16 +12,19 @@ import Button from '../../components/Button';
 import Dialog from '../../components/Dialog';
 import VoucherType from './VoucherType';
 import app from '../../../app.json';
+import VbeSkeleton from '../../components/VbeSkeleton';
 
 export default class ListPoints extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      loading: true,
       userInfo: {},
       dataList: [],
       voucherType: "",
       hasMore: true,
-      refreshing: false
+      refreshing: false,
+      loadingList: ["","","",""]
     };
   }
 
@@ -80,6 +83,7 @@ export default class ListPoints extends Component {
       toastShort(err)
     }).finally(() => {
       this.setState({
+        loading: false,
         refreshing: false
       });
     });
@@ -213,6 +217,41 @@ export default class ListPoints extends Component {
   }
 
   render() {
+    if (this.state.loading) {
+      return (
+        <View style={styles.container}>
+          <VbeSkeleton
+            style={{}}
+            layout={[
+              {width: '100%', height: 42, borderRadius: 10},
+              {width: '40%', height: 18, marginTop: 16}
+            ]}
+            animationDirection={"horizontalRight"}
+          />
+          <EndView/>
+          { this.state.loadingList.map((item, index) =>
+            <View style={styles.loadingView} key={index}>
+              <VbeSkeleton
+                style={ui.flex1}
+                layout={[
+                  {width: '50%', height: 18},
+                  {width: '90%', height: 12, marginTop: 8},
+                  {width: '40%', height: 12, marginTop: 4}
+                ]}
+                animationDirection={"horizontalRight"}
+              />
+              <VbeSkeleton
+                style={{width: 56}}
+                layout={[
+                  {width: 56, height: 30, borderRadius: 30}
+                ]}
+                animationDirection={"horizontalRight"}
+              />
+            </View>
+          )}
+        </View>
+      )
+    }
     return (
       <FlatList
         style={styles.container}
@@ -355,5 +394,11 @@ const styles = StyleSheet.create({
     padding: 16,
     marginBottom: 16,
     textAlign: 'center'
+  },
+  loadingView: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
   }
 })

Strides-APP/app/pages/vouchers/ListVoucher.js

@@ -11,16 +11,19 @@ import VoucherType from './VoucherType';
 import apiVoucher from '../../api/apiVoucher';
 import { PageList } from '../Router';
 import app from '../../../app.json';
+import VbeSkeleton from '../../components/VbeSkeleton';
 
 export default class ListVoucher extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      loading: true,
       userInfo: {},
       dataList: [],
       voucherType: "",
       hasMore: true,
-      refreshing: false
+      refreshing: false,
+      loadingList: ["","","",""]
     };
   }
 
@@ -79,6 +82,7 @@ export default class ListVoucher extends Component {
       toastShort(err)
     }).finally(() => {
       this.setState({
+        loading: false,
         refreshing: false
       });
     });
@@ -168,6 +172,41 @@ export default class ListVoucher extends Component {
   }
 
   render() {
+    if (this.state.loading) {
+      return (
+        <View style={styles.container}>
+          <VbeSkeleton
+            style={{}}
+            layout={[
+              {width: '100%', height: 42, borderRadius: 10},
+              {width: '40%', height: 18, marginTop: 16}
+            ]}
+            animationDirection={"horizontalRight"}
+          />
+          <EndView/>
+          { this.state.loadingList.map((item, index) =>
+            <View style={styles.loadingView} key={index}>
+              <VbeSkeleton
+                style={ui.flex1}
+                layout={[
+                  {width: '50%', height: 18},
+                  {width: '90%', height: 12, marginTop: 8},
+                  {width: '40%', height: 12, marginTop: 4}
+                ]}
+                animationDirection={"horizontalRight"}
+              />
+              <VbeSkeleton
+                style={{width: 56}}
+                layout={[
+                  {width: 56, height: 30, borderRadius: 30}
+                ]}
+                animationDirection={"horizontalRight"}
+              />
+            </View>
+          )}
+        </View>
+      )
+    }
     return (
       <FlatList
         style={styles.container}
@@ -292,5 +331,11 @@ const styles = StyleSheet.create({
     padding: 16,
     marginBottom: 16,
     textAlign: 'center'
+  },
+  loadingView: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
   }
 })

Strides-APP/app/pages/wallet/TopupNew.js

@@ -16,11 +16,13 @@ import TopupPaythod from './TopupPaythod';
 import app from '../../../app.json';
 import utils from '../../utils/utils';
 import CheckBox from '../../components/CheckBox';
+import VbeSkeleton from '../../components/VbeSkeleton';
 
 export default class TopupNew extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      loading: true,
       isAuto: false,
       topupList: [],
       selectIndex: 0,
@@ -37,10 +39,11 @@ export default class TopupNew extends Component {
       getUserInfo(info => {
         this.setState({
           balance: info?.creditStr
+        }, () => {
+          this.getTopupList();
         })
       }, true);
     });
-    this.getTopupList();
     /*this.stateListener = AppState.addEventListener("change", state => {
       if (state == 'active' && this.state.isCallback) {
         this.setState({
@@ -58,7 +61,6 @@ export default class TopupNew extends Component {
   }
 
   getTopupList() {
-    Dialog.showProgressDialog();
     // apiWallet.getTopUpAmountList()
     apiWallet.getTopUpAmountListV2().then(res => {
       Dialog.dismissLoading();
@@ -73,7 +75,10 @@ export default class TopupNew extends Component {
       this.setState({
         topupList: data
       });
-      Dialog.dismissLoading();
+    }).finally(() => {
+      this.setState({
+        loading: false
+      });
     })
   }
 
@@ -93,7 +98,7 @@ export default class TopupNew extends Component {
     //console.log('充值请求参数', params);
     apiWallet.doPaymentV2(params).then(res => {
       Dialog.dismissLoading();
-      if (app.v3.anzPayment) {
+      if (app.charge.anzPayment) {
         if (res.data.qr) {
           startPage(PageList.paynow, { info: res.data.qr, type: 'Topup' });
         } else if (res.data.webPaymentUrl) {
@@ -162,6 +167,28 @@ export default class TopupNew extends Component {
   }
 
   render() {
+    if (this.state.loading) {
+      return (
+        <View style={styles.container}>
+          <View style={styles.loadingItem}>
+            <VbeSkeleton
+              style={ui.flex1}
+              layout={[
+                {width: '100%', height: 56, borderRadius: 10},
+                {width: '40%', height: 18, marginTop: 32},
+                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
+                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
+                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
+                {width: '40%', height: 18, marginTop: 32},
+                {width: '100%', height: 56, borderRadius: 10, marginTop: 16},
+                {width: '100%', height: 56, borderRadius: 10, marginTop: 16}
+              ]}
+              animationDirection={"horizontalRight"}
+            />
+          </View>
+        </View>
+      )
+    }
     return (
       <View style={styles.container}>
         <ScrollView style={ui.flex1}>
@@ -394,5 +421,9 @@ const styles = StyleSheet.create({
     paddingTop: 4,
     paddingBottom: 4,
     textDecorationLine: 'underline'
+  },
+  loadingItem: {
+    padding: 16,
+    flexDirection: 'row'
   }
 })