#13475 Implement pay-per-use

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

@@ -5,7 +5,7 @@ import TextView from '../../components/TextView';
 import { getPaymenOptions, PaymentIcon, PAYTYPE } from '../payment/PaymentConfig';
 import { ChargeStyle } from './Charging';
 
-export const PaymentList = ({isSelect=true, payType, payPerUse, onMethodChange}) => {
+export const PaymentList = ({isSelect=true, payType, onMethodChange}) => {
   const [options, setOptions] = useState([])
   useEffect(() => {
     getPaymenOptions(options => {

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

@@ -36,7 +36,7 @@ export default class TabCharge extends Component {
       errorMessage: '',
       showErrorDialog: false,
       showStationDialog: false,
-      curerntPerUser: undefined,
+      currentPerUser: undefined,
       canIntoCharging: false,
       //currentPayment: PAYTYPE.CREDIT_WALLET,
       //currentPaytype: "Credit Wallet",
@@ -172,7 +172,7 @@ export default class TabCharge extends Component {
       this.changeMethod = false;
       if (global.paymentOption?.title) {
         this.setState({
-          curerntPerUser: global.paymentOption.amount,
+          //currentPerUser: global.paymentOption.amount,
           currentPayment: global.paymentOption.value,
           currentPaytype: global.paymentOption.title
         }, () => {
@@ -555,7 +555,6 @@ export default class TabCharge extends Component {
             lastUpdated={this.state.lastUpdated}
             connectorInfo={this.state.connectorInfo}
             currentPayment={this.state.currentPayment}
-            curerntPerUser={this.state.curerntPerUser}
             onStartCharge={() => this.startCharge()}
             onStopCharge={() => this.onStopCharge()}
             onPaymentMethodChanged={(type) => this.onPaymentMethodChanged(type)}/>

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

@@ -5,9 +5,10 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import apiCharge from '../../api/apiCharge';
+import apiWallet from '../../api/apiWallet';
 import Dialog from '../../components/Dialog';
 import { ErrorDialog } from '../chargeV2/InfoDialog';
-import { PaymentDefault } from '../payment/PaymentConfig';
+import { PaymentDefault, PAYTYPE } from '../payment/PaymentConfig';
 import { PageList } from '../Router';
 import StepAuth from './StepAuth';
 import StepCharging from './StepCharging';
@@ -28,7 +29,7 @@ export default class ChargingPage extends Component {
       lastUpdated: '',
       showErrorDialog: false,
       showStationDialog: false,
-      curerntPerUse: undefined,
+      currentPerUse: "",
       currentPayment: PaymentDefault.DEFAULT.payType,
       currentPaytype: PaymentDefault.DEFAULT.payName
     };
@@ -50,6 +51,24 @@ export default class ChargingPage extends Component {
         this.getConnectorInfo();
       })
     }
+    this.props.navigation.addListener('focus', () => {
+      //console.log("充电流程页面获取焦点" + this.isPageShow, this.state.currentPerUse);
+      if (!this.isPageShow && this.state.currentPerUse == "Pending") {
+        this.isPageShow = true;
+        //console.log("继续充电流程");
+        this.setState({
+          currentPerUse: "Paid"
+        })
+        this.refreshChargeData();
+      } else {
+        this.isPageShow = true;
+        //this.canShowLoginDialog();
+      }
+    });
+    this.props.navigation.addListener('blur', () => {
+      this.isPageShow = false;
+      //console.log("充电流程页面失去焦点");
+    });
   }
 
   componentWillUnmount() {
@@ -91,6 +110,11 @@ export default class ChargingPage extends Component {
           connectorInfo: {}
         }
         state.connectorInfo = res.data;
+        if (res.data.currentPaymentType && res.data.currentPaymentType == PAYTYPE.PAY_PER_USE) {
+          state.currentPayment = PAYTYPE.PAY_PER_USE
+        } else {
+          state.currentPayment = PAYTYPE.CREDIT_WALLET
+        }
         console.log("状态", res.data.status);
         switch (res.data.status) {
           case 'Available': //可用的
@@ -194,6 +218,10 @@ export default class ChargingPage extends Component {
       isCharging: true
     });
     this.waitStartCharging = true;
+    if (this.state.currentPayment == PAYTYPE.PAY_PER_USE) {
+      this.onStartChargePerUse();
+      return;
+    }
     apiCharge.startCharge(this.state.stationInfo).then(res => {
       console.log("[开始充电-onStartCharge]", res);
       setTimeout(() => {
@@ -215,6 +243,31 @@ export default class ChargingPage extends Component {
       } else {
         this.showErrorDialog('A4', err);
       }
+      this.setState({
+        isCharging: false
+      });
+    });
+  }
+
+  onStartChargePerUse() {
+    const params = {
+      paymentOption: this.state.currentPayment,
+      ...this.state.stationInfo
+    }
+    apiWallet.doPaymentV2(params).then(res => {
+      if (res.data.webPaymentUrl) {
+        this.setState({
+          currentPerUse: "Pending"
+        })
+        startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.webPaymentUrl, type: 'PayPerUse' });
+      } else {
+        toastShort('Error 0')
+      }
+    }).catch(({err}) => {
+      this.showErrorDialog('A9', err);
+      this.setState({
+        isCharging: false
+      });
     });
   }
 
@@ -302,26 +355,23 @@ export default class ChargingPage extends Component {
         { this.state.isStoping
         ? <StepStop
             currentPayment={this.state.currentPayment}
-            curerntPerUse={this.state.curerntPerUse}
           />
         : ( this.state.isCharging 
           ? <StepCharging
               connectorInfo={this.state.connectorInfo}
               currentPayment={this.state.currentPayment}
-              curerntPerUse={this.state.curerntPerUse}
               onStopCharge={() => this.onStopCharge()}
             />
           : ( this.state.isAuthentic
             ? <StepAuth
                 status={this.state.connectorInfo?.status}
                 currentPayment={this.state.currentPayment}
-                curerntPerUse={this.state.curerntPerUse}
                 onStartCharge={() => this.onStartCharge()}
+                onPaymentMethodChanged={(type) => this.onPaymentMethodChanged(type)}
               />
             : <StepStart
                 connectorInfo={this.state.connectorInfo}
                 currentPayment={this.state.currentPayment}
-                curerntPerUse={this.state.curerntPerUse}
                 onAuthenticate={() => this.onAuthenticate()}
                 onPaymentMethodChanged={(type) => this.onPaymentMethodChanged(type)}
               />

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

@@ -11,8 +11,8 @@ import { PaymentList } from '../chargeV2/Payment';
 export default StepAuth = ({
   status="",
   currentPayment,
-  curerntPerUse,
-  onStartCharge
+  onStartCharge,
+  onPaymentMethodChanged
 }) => {
   const [loadingEmps, setEmps] = useState("");
   const [isAuthentic, setAuthentic] = useState(false)
@@ -68,7 +68,7 @@ export default StepAuth = ({
         <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
         <PaymentList
           payType={currentPayment}
-          payPerUse={curerntPerUse}
+          onMethodChange={onPaymentMethodChanged}
         />
         { isAuthentic
         ? <Button

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

@@ -14,7 +14,6 @@ import DiscountView from './DiscountView';
 const StepCharging = ({
   connectorInfo={},
   currentPayment,
-  curerntPerUse,
   onStopCharge
 }) => {
   const [isCharging, setCharging] = useState(false);
@@ -160,8 +159,8 @@ const StepCharging = ({
       <EndView/>
       <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
       <PaymentList
+        isSelect={false}
         payType={currentPayment}
-        payPerUse={curerntPerUse}
       />
       <Button
         style={styles.buttonView}
@@ -189,8 +188,8 @@ const StepCharging = ({
       <View style={styles.bottomView}>
         <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
         <PaymentList
+          isSelect={false}
           payType={currentPayment}
-          payPerUse={curerntPerUse}
         />
         <View style={styles.buttonView}></View>
       </View>

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

@@ -14,7 +14,6 @@ import DiscountView from './DiscountView';
 export default StepStart = ({
   connectorInfo={},
   currentPayment,
-  curerntPerUse,
   onPaymentMethodChanged,
   onAuthenticate
 }) => {
@@ -80,7 +79,6 @@ export default StepStart = ({
       <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
       <PaymentList
         payType={currentPayment}
-        payPerUse={curerntPerUse}
         onMethodChange={onPaymentMethodChanged}
       />
       <Button

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

@@ -8,8 +8,7 @@ import TextView from '../../components/TextView';
 import { PaymentList } from '../chargeV2/Payment';
 
 export default StepStop = ({
-  currentPayment,
-  curerntPerUse
+  currentPayment
 }) => {
   const [loadingEmps, setEmps] = useState("");
 
@@ -51,8 +50,8 @@ export default StepStop = ({
       <View style={styles.bottomView}>
       <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
         <PaymentList
+          isSelect={false}
           payType={currentPayment}
-          payPerUse={curerntPerUse}
         />
         <View style={{height: 56}}/>
       </View>

Strides-APP/app/pages/payment/PaymentConfig.js

@@ -14,7 +14,7 @@ export const PAYTYPE = {
  */
 export const PaymentDefault = {
   is2c2p: true, //是否启用2C2P
-  enablePayPerUse: false, //是否启用按次支付
+  enablePayPerUse: true, //是否启用按次支付
   DEFAULT: {
     payType: PAYTYPE.CREDIT_WALLET,
     payName: "Credit Wallet",
@@ -34,7 +34,7 @@ export const getPaymenOptions = (back) => {
     if (PaymentDefault.DEFAULT.payType == PAYTYPE.PAY_PER_USE) {
       back([{
         title: $t('payment.payPerUse'),
-        desc: '(SGQR)',
+        desc: '(CARD)',
         value: PAYTYPE.PAY_PER_USE,
         iconFont: "PAYNOW",
         icon: require('../../images/wallet/ic_payperuse.png')
@@ -54,7 +54,7 @@ export const getPaymenOptions = (back) => {
         icon: require('../../images/icon/draw-wallet.png')
       }, {
         title: $t('payment.payPerUse'),
-        desc: '(SGQR)',
+        desc: '(CARD)',
         value: PAYTYPE.PAY_PER_USE,
         iconFont: "PAYNOW",
         icon: require('../../images/wallet/ic_payperuse.png')