Enhancement payment list V2

Strides-APP/app/components/VbeLinearGradient.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Svg, {
+  Defs,
+  LinearGradient,
+  Rect,
+  Stop,
+} from 'react-native-svg';
+
+/**
+ * 线性渐变色组件
+ * @param {*} x1表示渲染起始位置的x坐标，y1表示渲染起始位置的y坐标，x2表示渲染结束位置的x坐标，y2表示渲染结束位置的y坐标，colorList表示渲染的颜色，它是一个颜色数组，数组长度必须大于等于2
+ * @returns VbeLinearGradient
+ */
+const VbeLinearGradient = ({ colorList=[], x1=0, y1=0, x2=50, y2=50 }) => (
+  <Svg height="100%" width="100%">
+    <Defs>
+      <LinearGradient
+        id="lgrad"
+        x1={x1+"%"}
+        y1={y1+"%"}
+        x2={x2+"%"}
+        y2={y2+"%"}>
+        {colorList.map((value, index) => (
+          <Stop
+            key={`LinerGradientItem_${index}`}
+            offset={value.offset}
+            stopColor={value.color}
+            stopOpacity={value.opacity}
+          />
+        ))}
+      </LinearGradient>
+    </Defs>
+    <Rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
+  </Svg>
+);
+
+export default VbeLinearGradient;

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

@@ -3,16 +3,18 @@
  * @邠心vbe on 2021/04/13
  */
 import React, { Component } from 'react';
-import { View, Text, StyleSheet, Pressable, ScrollView } from 'react-native';
+import { View, StyleSheet, Pressable, ScrollView } from 'react-native';
 import BottomModal from '../../components/BottomModal';
 import BadgeSelectItem from '../../components/BadgeSelectItem';
 import { ChargeStyle } from './Charging';
 import { PAYTYPE, PaymentIcon } from '../payment/PaymentConfig';
+import Skeleton from "react-native-reanimated-skeleton";
 import TextView from '../../components/TextView';
 import apiCharge from '../../api/apiCharge';
 import Button from '../../components/Button';
 import Dialog from '../../components/Dialog';
 import app from '../../../app.json';
+import utils from '../../utils/utils';
 
 export default class PaymentListV2 extends Component {
   constructor(props) {
@@ -22,7 +24,8 @@ export default class PaymentListV2 extends Component {
       isSelect: true,
       options: [],
       selectIndex: 0,
-      selectOptions: {}
+      selectOptions: {},
+      isloading: true
     };
   }
 
@@ -42,12 +45,19 @@ export default class PaymentListV2 extends Component {
   }
 
   getPaymentOptions() {
+    if (utils.isEmpty(this.props.chargeBoxId)) {
+      setTimeout(() => {
+        this.getPaymentOptions();
+      }, 1000);
+      return;
+    }
     apiCharge.getPaymentTypeOptions({
       chargeBoxId: this.props.chargeBoxId
     }).then(res => {
       if (res.data) {
         this.setState({
-          options: res.data
+          options: res.data,
+          isloading: false
         })
         if (this.props.payType && this.props.payType.code) {
           for (let i = 0; i < res.data.length; i++) {
@@ -133,12 +143,26 @@ export default class PaymentListV2 extends Component {
             <TextView style={styles.numberDot}>{this.state.options.length}</TextView>
           }
           <View style={styles.paymentView}>
-            <TextView
-              style={styles.valueText}
-              numberOfLines={1}>{this.state.selectOptions?.name}</TextView>
-            <TextView
-              style={styles.paymentText}
-              numberOfLines={1}>{this.state.selectOptions?.desc}</TextView>
+            <Skeleton
+              containerStyle={ui.flex1}
+              isLoading={this.state.isloading}
+              animationType="pulse"
+              layout={[{width: '60%', height: 20, marginLeft: 10}]}
+              animationDirection={"horizontalRight"}>
+              <TextView
+                style={styles.valueText}
+                numberOfLines={1}>{this.state.selectOptions?.name}</TextView>
+            </Skeleton>
+            <Skeleton
+              containerStyle={ui.flex1}
+              isLoading={this.state.isloading}
+              animationType="pulse"
+              layout={[{width: '60%', height: 20, marginLeft: 20}]}
+              animationDirection={"horizontalRight"}>
+              <TextView
+                style={styles.paymentText}
+                numberOfLines={1}>{this.state.selectOptions?.desc}</TextView>
+            </Skeleton>
           </View>
           { this.state.selectOptions?.def &&
             <TextView style={styles.textDefault}>Default</TextView>
@@ -267,7 +291,7 @@ const styles = StyleSheet.create({
   },
   numberDot: {
     top: 10,
-    left: 32,
+    left: app.charge.version >= 4 ? 32 : 35,
     width: 16,
     height: 16,
     color: textButton,
@@ -277,6 +301,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: colorAccent
+    backgroundColor: app.charge.version >= 4 ? colorAccent : "#FF2622"
   }
 })

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

@@ -43,7 +43,7 @@ export default class ChargingPage extends Component {
   componentDidMount() {
     this.init();
     this.isPageShow = true;
-    console.log("参数", this.props.route.params);
+    //console.log("参数", this.props.route.params);
     if (this.props.route.params.connectorId && this.props.route.params.chargeBoxId) {
       this.setState({
         stationInfo: this.props.route.params
@@ -118,7 +118,7 @@ export default class ChargingPage extends Component {
     if (app.charge.paymentMethod && this.state.currentPayment?.code) {
       params.paymentMethod = this.state.currentPayment?.code
     }
-    console.log("参数", params);
+    console.log("[ChargingPage]getConnectorInfo", params);
     apiCharge.getConnectorDetail(params).then(res => {
       if (res.data.status && !this.state.isStoping) {
         const state = {

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

@@ -44,7 +44,7 @@ export default class ChargingPageV4 extends Component {
   componentDidMount() {
     this.init();
     this.isPageShow = true;
-    console.log("参数", this.props.route.params);
+    //console.log("参数", this.props.route.params);
     if (this.props.route.params.connectorId && this.props.route.params.chargeBoxId) {
       this.setState({
         stationInfo: this.props.route.params
@@ -119,7 +119,7 @@ export default class ChargingPageV4 extends Component {
     if (app.charge.paymentMethod && this.state.currentPayment?.code) {
       params.paymentMethod = this.state.currentPayment?.code
     }
-    console.log("参数", params);
+    console.log("[ChargingPageV3]getConnectorInfo", params);
     apiCharge.getConnectorDetail(params).then(res => {
       if (res.data.status && !this.state.isStoping) {
         const state = {

Strides-APP/app/pages/home/Notify.js

@@ -6,6 +6,7 @@ import Dialog from '../../components/Dialog';
 import apiUpload from '../../api/apiUpload';
 import app from '../../../app.json'
 import utils from '../../utils/utils';
+import Skeleton from 'react-native-reanimated-skeleton';
 
 export default class Notify extends Component {
   constructor(props) {
@@ -155,6 +156,14 @@ export default class Notify extends Component {
         <View style={[ui.flex1, ui.flexcc]}>
           <Text style={styles.os}>{Platform.OS}</Text>
         </View>
+        <Skeleton
+          containerStyle={ui.flex1}
+          isLoading={true}
+          boneColor='#eeeeee'
+          highlightColor='#f6f6f6'
+          animationType="shiver"
+          layout={[{width: '60%', height: 20, marginLeft: 30, borderRadius: 3}]}
+          animationDirection={'horizontalRight'}/>
       </View>
     );
   }

Strides-APP/package.json

@@ -45,6 +45,7 @@
     "react-native-gesture-handler": "2.12.1",
     "react-native-i18n": "https://gitee.com/vbes/react-native-i18n.git",
     "react-native-image-crop-picker": "0.40.0",
+    "react-native-linear-gradient": "2.8.3",
     "react-native-location-enabler": "https://gitee.com/vbes/react-native-location-enabler.git",
     "react-native-map-clustering": "3.4.2",
     "react-native-map-link": "2.11.2",
@@ -57,6 +58,7 @@
     "react-native-push-notification": "8.1.1",
     "react-native-qrcode-scanner": "1.6.0",
     "react-native-reanimated": "3.4.2",
+    "react-native-reanimated-skeleton": "1.5.1",
     "react-native-root-siblings": "4.1.1",
     "react-native-root-toast": "3.5.1",
     "react-native-safe-area-context": "4.7.2",

Strides-APP/tsconfig.json

@@ -1,3 +1,6 @@
 {
+  "compilerOptions": {
+    "jsx": "react"
+  },
   "extends": "@tsconfig/react-native/tsconfig.json"
 }