add app/pages/chargeV2/TabCharge.js

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

@@ -0,0 +1,684 @@
+/**
+ * 新版充电页面
+ * @邠心vbe on 2023/02/06
+ */
+import React, { Component } from 'react';
+import { StyleSheet, ScrollView, RefreshControl } from 'react-native';
+import apiCharge from '../../api/apiCharge';
+import Dialog from '../../components/Dialog';
+import { PageList } from '../Router';
+import { EnterStationDialog } from './Charging';
+import { QRResult } from '../charge/QRScan';
+import { ErrorDialog } from './InfoDialog';
+import PagerUtil from './PagerUtil';
+import StepStartView from '../charging/StepStartView';
+import StepChargeView from '../charging/StepChargeView';
+import utils from '../../utils/utils';
+import app from '../../../app.json';
+import { PaymentDefault } from '../payment/PaymentConfig';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+import ChargingStartView from '../chargeV3/ChargingStartView';
+
+export default class TabCharge extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      available: false,
+      isPrivate: false,
+      refreshing: false,
+      isStart: false,
+      isPending: false,
+      isCharging: false,
+      isAuthentic: false,
+      selectRate: '',
+      connectorInfo: {},
+      stationInfo: {},
+      lastUpdated: '',
+      errorCode: 'A9',
+      errorMessage: '',
+      showErrorDialog: false,
+      showStationDialog: false,
+      currentPerUser: undefined,
+      canIntoCharging: false,
+      //currentPayment: PAYTYPE.CREDIT_WALLET,
+      //currentPaytype: "Credit Wallet",
+      currentPayment: PaymentDefault.DEFAULT.payType,
+      currentPaytype: PaymentDefault.DEFAULT.payName,
+      selectedVoucher: {}
+    };
+    this.changeMethod = false;
+    this.canAutoRefresh = false;
+    this.inputStationId = '';
+    this.autoIntoCharging = true;
+    this.intoChargingStatus = ["Preparing", "Charging", "Initiating", "SuspendedEVSE", "SuspendedEV"]
+  }
+
+  componentDidMount() {
+    this.canAutoRefresh = true;
+    PagerUtil.addOnRefresh(this);
+    //this.onRefresh();
+  }
+
+  onRefresh() {
+    console.log("Charge刷新", this.props.route.name);
+    const info = PagerUtil.getStationInfo();
+    this.setState({
+      refreshing: false,
+      stationInfo: info
+    }, () => {
+      this.init();
+      console.log("站点信息", this.state.stationInfo);
+      //this.checkIsCharge();
+    });
+  }
+
+  onPullRefresh() {
+    this.setState({
+      refreshing: true
+    })
+    PagerUtil.setBackRefreshing();
+  }
+
+  init() {
+    console.log("Charge刷新", "init");
+    if (PagerUtil.isSelectVoucher) {
+      this.setState({
+        selectedVoucher: PagerUtil.getSelectedVoucher()
+      })
+    }
+    this.onMethodChanged();
+    this.refreshAvailable();
+    if (QRResult.haveResult()) {
+      console.log("Charge刷新", "haveResult");
+      const info = QRResult.getResult()
+      console.log('QRResult', info);
+      if (PagerUtil.ENABLE_NEW_UI) {
+        //新充电流程
+        this.setState({
+          connectorInfo: info
+        }, () => {
+          this.checkChargeStatus(true);
+        })
+      } else {
+        this.setState({
+          isAuthentic: true,
+          connectorInfo: info
+          //soc: info.chargeType == 'AC' ? 0 : 'In Charging'
+        }, () => {
+          PagerUtil.onCharge(this.props);
+          this.checkChargeStatus(true);
+        });
+      }
+      //QRResult.clearResult();
+    } else if (this.state.isStart) {
+      console.log("Charge刷新", "isStart");
+      this.checkIsCharge();
+    } else {
+      console.log("Charge刷新", "noStart");
+      this.getConnectorInfo();
+      //this.checkChargeStatus();
+    }
+  }
+
+  componentWillUnmount() {
+    this.canAutoRefresh = false;
+  }
+
+  //刷新可用充电接口
+  refreshAvailable() {
+    const info = this.state.stationInfo
+    const all = info?.allConnector;
+    if (info.siteType == 'Private') {
+      this.setState({
+        isPrivate: true
+      })
+    }
+    if (all) {
+      this.setState({
+        available: !all.available > 0
+      });
+    }
+  }
+
+  /**
+   * 激活自动进入新充电页面的开关
+   */
+  activeNewUIPage() {
+    this.autoIntoCharging = true;
+  }
+
+  toChargingPage() {
+    this.autoIntoCharging = false;
+    utils.toChargingPage({
+      id: this.state.stationInfo.id,
+      name: this.state.stationInfo.name,
+      address: this.state.stationInfo.address,
+      chargeBoxId: this.state.connectorInfo.chargeBoxId,
+      connectorId: this.state.connectorInfo.connectorId,
+      payPerUseAmount: this.state.stationInfo.payPerUseAmount
+    });
+  }
+
+  enterStatioinId() {
+    if (QRResult.haveResult()) {
+      if (PagerUtil.ENABLE_NEW_UI) {
+        this.onRefresh();
+      } else {
+        const info = QRResult.getResult()
+        console.log('EnterResult', info);
+        this.setState({
+          isAuthentic: true,
+          connectorInfo: info
+          //soc: info.chargeType == 'AC' ? 0 : 'In Charging'
+        });
+        this.checkChargeStatus();
+      }
+    }
+  }
+
+  onPaymentMethodChanged(payment) {
+    this.setState({
+      currentPayment: payment
+    })
+  }
+
+  onMethodChange() {
+    this.changeMethod = true;
+    startPage(PageList.paymentMethod, {info: this.state.connectorInfo, type: this.state.currentPayment});
+  }
+
+  onMethodChanged() {
+    if (this.changeMethod) {
+      this.changeMethod = false;
+      if (global.paymentOption?.title) {
+        this.setState({
+          //currentPerUser: global.paymentOption.amount,
+          currentPayment: global.paymentOption.value,
+          currentPaytype: global.paymentOption.title
+        }, () => {
+          global.paymentOption= {}
+        })
+      }
+    }
+  }
+
+  //打开输入弹窗
+  onEnterStation() {
+    this.setState({
+      showStationDialog: true
+    })
+  }
+
+  //自动刷新
+  autoCheckIsCharge() {
+    if (this.canAutoRefresh) {
+      this.checkIsCharge();
+    }
+  }
+
+  //自动刷新状态
+  autoCheckChargeStatus() {
+    setTimeout(() => {
+      if (this.canAutoRefresh) {
+        this.checkChargeStatus();
+      }
+    }, 10000);
+  }
+
+  //扫码后获取连接器数据
+  getConnectorInfo() {
+    console.log("[TabCharge] getConnectorInfo", this.state.stationInfo.id);
+    apiCharge.checkIsCharging({sitePk: this.state.stationInfo.id}).then(res => {
+      this.setState({
+        connectorInfo: res.data
+      }, () => {
+        this.checkChargeStatus();
+      });
+    }).catch((err) => {
+      
+    });
+  }
+
+  //获取充电进度数据（百分比）
+  checkIsCharge(showError) {
+    const params = {
+      sitePk: this.state.stationInfo.id
+    }
+    apiCharge.checkIsCharging(params).then(res => {
+      this.setState({
+        isStart: true,
+        isCharging: true,
+        isAuthentic: true,
+        connectorInfo: res.data,
+        lastUpdated: utils.getNowHHmm()
+      });
+      if (this.canAutoRefresh) {
+        setTimeout(() => {
+          this.autoCheckIsCharge();
+        }, 30000);
+      }
+      PagerUtil.onCharge(this.props);
+    }).catch(({err, code}) => {
+      //TODO 模拟测试
+      //TODO 模拟测试-End
+      this.setState({
+        isStart: false,
+        isCharging: false
+      });
+      setTimeout(() => {
+        this.autoCheckIsCharge();
+        this.canAutoRefresh = false;
+      }, 30000);
+      if (showError) {
+        this.setState({
+          errorCode: 'A4',
+          showErrorDialog: true,
+          errorMessage: 'Your vehicle doesn’t seem to be charging. Please check your vehicle.'
+        });
+      }
+    });
+  }
+  //获取充电进度数据-end
+
+  //获取充电桩对应接口的状态
+  checkChargeStatus(haveResult=false) {
+    //TODO 模拟测试
+    /*this.setState({
+      isStart: true,
+      isCharging: true,
+      isAuthentic: true
+    });
+    return;*/
+    //TODO 模拟测试-End
+    const params = {
+      connectorId: this.state.connectorInfo.connectorId,
+      chargeBoxId: this.state.connectorInfo.chargeBoxId,
+    }
+    if (!PagerUtil.ENABLE_NEW_UI) {
+      if (!params.chargeBoxId || !params.connectorId) {
+        this.checkIsCharge();
+        return;
+      }
+    }
+    apiCharge.getCurrentStatus(params).then(res => {
+      if (res.data.status) {
+        if (PagerUtil.ENABLE_NEW_UI && (this.intoChargingStatus.indexOf(res.data.status) >= 0 || haveResult)) {
+          //进入新流程
+          this.setState({
+            canIntoCharging: true
+          }, () => {
+            if (this.autoIntoCharging) {
+              this.toChargingPage();
+            } else {
+              PagerUtil.onCharge(this.props);
+            }
+          })
+        } else {
+          if (haveResult) {
+            PagerUtil.onCharge(this.props);
+          }
+          switch (res.data.status) {
+            case 'Available': //可用的
+              this.state.connectorInfo.isCheckThrough = false;
+              this.setState({
+                isStart: false,
+                isPending: false,
+                isCharging: false,
+                connectorInfo: this.state.connectorInfo
+              });
+              break;
+            case 'Preparing': //已插入
+              this.state.connectorInfo.isCheckThrough = true;
+              this.setState({
+                isStart: false,
+                isPending: false,
+                isCharging: false,
+                available: true,
+                connectorInfo: this.state.connectorInfo
+              });
+              //this.checkIsCharge();
+              break;
+            case 'Charging': //正在充电
+              this.canAutoRefresh = true;
+              this.state.connectorInfo.isCheckThrough = true;
+              this.setState({
+                isPending: false,
+                connectorInfo: this.state.connectorInfo
+              });
+              this.checkIsCharge();
+              break;
+            case 'Initiating': //充电确认中
+              this.canAutoRefresh = true;
+              this.state.connectorInfo.isCheckThrough = true;
+              this.setState({
+                isStart: true,
+                isPending: true,
+                isCharging: true,
+                isAuthentic: true,
+                connectorInfo: this.state.connectorInfo
+              });
+              this.autoCheckChargeStatus();
+              break;
+            case 'SuspendedEVSE':
+              this.setState({
+                errorCode: 'A5',
+                showErrorDialog: true,
+                errorMessage: $t('charging.errUnable2Charge')
+              });
+              break;
+            case 'SuspendedEV': //已连接上但未充电
+              this.checkIsCharge(true);
+              break;
+            case 'Reserved': //预定中
+              this.setState({
+                errorCode: 'A5',
+                showErrorDialog: true,
+                errorMessage: $t('charging.errUnable2Reserved')
+              });
+              break;
+            case 'Finishing': //已完成
+              if (res.data.chargingPk) {
+                Dialog.showProgressDialog();
+                setTimeout(() => {
+                  Dialog.dismissLoading();
+                  this.setState({
+                    isStart: false,
+                    isPending: false,
+                    isCharging: false
+                  });
+                  startPage(PageList.summary, { 
+                    chargingPk: res.data.chargingPk,
+                    id: this.state.stationInfo.id,
+                    name: this.state.stationInfo.name,
+                    address: this.state.stationInfo.address
+                  });
+                }, 2000);
+              } else {
+                this.setState({
+                  isStart: true,
+                  isPending: false,
+                  isCharging: false
+                });
+              }
+              break;
+            default:
+              this.setState({
+                isStart: false,
+                isPending: false,
+                isCharging: false
+              });
+              this.setState({
+                errorCode: 'A4',
+                showErrorDialog: true,
+                errorMessage: $t('charging.errNotChargeE0')
+              });
+              break;
+          }
+        }
+      } else {
+        this.setState({
+          errorCode: 'A4',
+          showErrorDialog: true,
+          errorMessage: $t('charging.errNotChargeE0')
+        });
+      }
+    }).catch((err) => {
+      toastShort(err)
+      this.setState({
+        errorCode: 'A9',
+        showErrorDialog: true,
+        errorMessage: $t('charging.errAuthenticationError')
+      });
+    })
+  }
+  //获取充电桩对应接口的状态-end
+
+  //开始充电-start
+  startCharge() {
+    if (this.state.connectorInfo.isCheckThrough) {
+      Dialog.showProgressDialog();
+      const params = {
+        sitePk: this.state.stationInfo.id,
+        chargeBoxId: this.state.connectorInfo.chargeBoxId,
+        connectorId: this.state.connectorInfo.connectorId
+      }
+      if (app.charge.paymentMethod) { //V3版本开始充电
+        this.onStartChargeV3(params);
+        return;
+      }
+      apiCharge.startCharge(params).then(res => {
+        console.log("开始充电返回", res);
+        setTimeout(() => {
+          this.setState({
+            isStart: true,
+            isPending: true,
+            isCharging: true
+          });
+          this.canAutoRefresh = true;
+          this.autoCheckChargeStatus();
+          Dialog.dismissLoading();
+          if (res.msg) {
+            Dialog.showResultDialog(res.msg)
+          }
+          //this.autoCheckIsCharge();
+        }, 3000);
+      }).catch(({err, code, data}) => {
+        //toastShort(err);
+        console.log("开始充电错误", err, code);
+        Dialog.dismissLoading();
+        if (code == 5200) {
+          this.setState({
+            errorCode: 'none',
+            showErrorDialog: true,
+            errorMessage: "(" + data.transactionPk + ') ' + err
+          });
+        } else {
+          this.setState({
+            errorCode: 'A4',
+            showErrorDialog: true,
+            errorMessage: ''+err
+          });
+        }
+      });
+    } else {
+      this.setState({
+        errorCode: 'A1',
+        showErrorDialog: true,
+        errorMessage: $t('charging.errNotConnected')
+      });
+    }
+  }
+  onStartChargeV3(params) {
+    if (this.state.currentPayment?.code) {
+      params.paymentMethod = this.state.currentPayment?.code
+    }
+    if (app.v3.vouchers && this.state.selectedVoucher?.userVoucherId) {
+      params.userVoucherIds = [this.state.selectedVoucher.userVoucherId]
+    }
+    console.log("[开始充电V3-params]", params);
+    apiCharge.startChargeV3(params).then(res => {
+      console.log("[开始充电V3-response]", res);
+      if (res.data.webPaymentUrl) {
+        this.setState({
+          currentPerUse: "Pending"
+        })
+        startPage(PageList.paymentWeb, { amount: params.sitePk, url: res.data.webPaymentUrl, type: 'PayPerUse' });
+      } else {
+        setTimeout(() => {
+          this.setState({
+            isStart: true,
+            isPending: true,
+            isCharging: true
+          });
+          this.canAutoRefresh = true;
+          this.autoCheckChargeStatus();
+          Dialog.dismissLoading();
+          if (res.msg) {
+            Dialog.showResultDialog(res.msg)
+          }
+          //this.autoCheckIsCharge();
+        }, 3000);
+      }
+    }).catch(({err, code, data}) => {
+      //toastShort(err);
+      console.log("[开始充电V3-错误]", err, code);
+      Dialog.dismissLoading();
+      if (code == 5200) {
+        this.setState({
+          errorCode: 'none',
+          showErrorDialog: true,
+          errorMessage: "(" + data.transactionPk + ') ' + err
+        });
+      } else {
+        this.setState({
+          errorCode: 'A4',
+          showErrorDialog: true,
+          errorMessage: ''+err
+        });
+      }
+    });
+  }
+  //开始充电-end
+
+  //停止充电-start
+  onStopCharge() {
+    if (this.state.isCharging) {
+      Dialog.showDialog({
+        title: $t('charging.titleStopCharging'),
+        message: $t('charging.confirmStopCharging'),
+        callback: ok => {
+          if (ok == Dialog.BUTTON_OK) {
+            this.stopCharge();
+          }
+        }
+      });
+    } else {
+      this.stopCharge();
+    }
+  }
+
+  stopCharge() {
+    this.canAutoRefresh = false;
+    Dialog.showProgressDialog();
+    apiCharge.stopCharge().then(res => {
+      if (res.msg) {
+        toastShort(res.msg)
+      }
+      if (res.data.chargingPk) {
+        setTimeout(() => {
+          Dialog.dismissLoading();
+          this.setState({
+            isStart: false,
+            isPending: false,
+            isCharging: false,
+            selectedVoucher: {}
+          });
+          PagerUtil.setSelectedVoucher({});
+          startPage(PageList.summary, { 
+            chargingPk: res.data.chargingPk,
+            id: this.state.stationInfo.id,
+            name: this.state.stationInfo.name,
+            address: this.state.stationInfo.address
+          });
+        }, 3000);
+      } else {
+        Dialog.dismissLoading();
+        toastShort($t('charging.errDetected'));
+      }
+    }).catch((err) => {
+      Dialog.dismissLoading();
+      toastShort(err);
+      this.setState({
+        isStart: false,
+        isPending: false,
+        isCharging: false
+      });
+      //模拟进入结算页
+      /*startPage(PageList.summary, {
+        chargingPk: 1,
+        id: this.state.stationInfo.id,
+        name: this.state.stationInfo.name,
+        address: this.state.stationInfo.address
+      });*/
+    });
+  }
+  //停止充电-end
+
+  closeError() {
+    this.setState({
+      showErrorDialog: false,
+      showStationDialog: false
+    });
+  }
+
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
+        contentContainerStyle={$padding(0, 16)}
+        refreshControl={
+          <RefreshControl
+            {...MyRefreshProps()}
+            refreshing={this.state.refreshing}
+            onRefresh={() => this.onPullRefresh()}
+          />
+        }>
+        { this.state.isAuthentic //是否扫码认证
+        ? <StepChargeView
+            isStart={this.state.isStart} //是否开始充电
+            isPending={this.state.isPending}
+            isCharging={this.state.isCharging}
+            lastUpdated={this.state.lastUpdated}
+            connectorInfo={this.state.connectorInfo}
+            currentPayment={this.state.currentPayment}
+            selectedVoucher={this.state.selectedVoucher}
+            onStartCharge={() => this.startCharge()}
+            onStopCharge={() => this.onStopCharge()}
+            onPaymentMethodChanged={(type) => this.onPaymentMethodChanged(type)}/>
+        : ( app.isLumiWhitelabel
+          ? <ChargingStartView
+              isPrivate={this.state.isPrivate}
+              canIntoCharging={this.state.canIntoCharging}
+              stationInfo={this.state.stationInfo}
+              onEnterStation={() => this.onEnterStation()}
+              onIntoCharging={() => this.toChargingPage()}/>
+          : <StepStartView
+              isPrivate={this.state.isPrivate}
+              canIntoCharging={this.state.canIntoCharging}
+              stationInfo={this.state.stationInfo}
+              onEnterStation={() => this.onEnterStation()}
+              onIntoCharging={() => this.toChargingPage()}/>
+          ) 
+        }
+        <ErrorDialog
+          visible={this.state.showErrorDialog}
+          code={this.state.errorCode}
+          message={this.state.errorMessage}
+          onClose={() => {
+            this.closeError();
+          }}
+        />
+        <EnterStationDialog
+          visible={this.state.showStationDialog}
+          stationId={this.state.stationInfo.id}
+          onConfirm={() => this.enterStatioinId()}
+          onClose={() => this.closeError()}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  title: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 16
+  }
+})