add app/pages/chargingV3/StepCharging.js

Strides-SPAPP/app/pages/chargingV3/StepCharging.js

@@ -0,0 +1,235 @@
+/**
+ * 新充电流程：正在充电模块
+ * @邠心vbe on 2023/06/20
+ */
+import React, { useEffect, useState } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import app from '../../../app.json';
+import Button, { ElevationObject } from '../../components/Button';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+import { PaymentList } from '../chargeV2/Payment';
+import PaymentListV2 from '../chargeV2/PaymentListV2';
+import StatusImage from './StatusImage';
+import ConnectorInfo from './ConnectorInfo';
+
+const StepCharging = ({
+  connectorInfo={},
+  currentPayment,
+  onStopCharge,
+  selectedVoucher={}
+}) => {
+  const [isCharging, setCharging] = useState(false);
+  const [loadingEmps, setEmps] = useState("");
+
+  useEffect(() => {
+    const isCharge = (connectorInfo.status == "Charging");
+    setCharging(isCharge);
+    if (!isCharge) {
+      changeEmps();
+    }
+  }, [])
+
+  useEffect(() => {
+    const isCharge = (connectorInfo.status == "Charging");
+    setCharging(isCharge);
+    if (!isCharge) {
+      setTimeout(() => {
+        changeEmps();
+      }, 500);
+    }
+  }, [connectorInfo,loadingEmps])
+
+  const changeEmps = () => {
+    let emp = loadingEmps;
+    if (loadingEmps.length == 3) {
+      emp = "";
+    } else {
+      emp += ".";
+    }
+    setEmps(emp);
+  }
+
+  return (
+  isCharging
+  ? <View style={ui.flex1}>
+      <ScrollView
+        style={ui.flex1}
+        contentContainerStyle={$padding(16)}>
+        <View style={ui.center}>
+          <StatusImage
+            isCharging={true}
+            isLoading={true}
+            soc={connectorInfo.batteryPercent}/>
+          <TextView style={styles.stepTitle}>{$t('charging.statusCharging')}</TextView>
+          <TextView style={styles.stepDesc}>{$t('charging.stepChargingDesc')}</TextView>
+        </View>
+        <ConnectorInfo
+          isCharging={true}
+          connectorInfo={connectorInfo}/>
+        <View style={styles.bottomSelectView}>
+          <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
+          { app.charge.paymentMethod
+          ? <PaymentListV2
+              isSelect={false}
+              payType={currentPayment}
+              borderColor={textCancel}
+              chargeBoxId={connectorInfo.chargeBoxId}
+              style={styles.paymentView}/>
+          : <PaymentList
+              isSelect={false}
+              payType={currentPayment}/>
+          }
+          { utils.isNotEmpty(selectedVoucher.userVoucherId) && <>
+            <TextView style={styles.label}>{$t('voucher.vouchers')}</TextView>
+            <View
+              style={styles.paymentView}>
+              <MaterialCommunityIcons
+                name="ticket-percent-outline"
+                size={32}
+                color={textPrimary}/>
+              <View style={styles.vouchersView}>
+                <TextView
+                  style={styles.voucherName}
+                  numberOfLines={1}>
+                  {selectedVoucher.voucherName}
+                </TextView>
+                <TextView
+                  style={styles.voucherDesc}
+                  numberOfLines={1}>
+                  {selectedVoucher.voucherDesc}
+                </TextView>
+              </View>
+            </View>
+          </> }
+          <View style={{height: 56}}></View>
+        </View>
+      </ScrollView>
+      <Button
+        style={styles.buttonView}
+        text={$t('charging.btnStopCharging')}
+        elevation={1.5}
+        borderRadius={6}
+        onClick={onStopCharge}/>
+    </View>
+  : <View style={ui.flex1}>
+      <View style={styles.content}>
+        <StatusImage
+          isInitial={true}
+          isLoading={true}/>
+        <View style={ui.flexcc}>
+          <TextView style={styles.stepTitle}>{$t('charging.stepInitializing')}</TextView>
+          <TextView style={[styles.stepTitle, {width: 30, marginRight: -10}]}>{loadingEmps}</TextView>
+        </View>
+        <TextView style={styles.stepDesc}>{$t('charging.stepInitializingDesc')}</TextView>
+      </View>
+      {/* <View style={styles.bottomView}>
+        <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
+        { app.charge.paymentMethod
+        ? <PaymentListV2
+            isSelect={false}
+            payType={currentPayment}/>
+        : <PaymentList
+            isSelect={false}
+            payType={currentPayment}/>
+        }
+        <View style={styles.buttonView}></View>
+      </View> */}
+    </View>
+  );
+}
+
+export default StepCharging;
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    padding: 16,
+    alignItems: 'center'
+  },
+  stepTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: colorAccent
+  },
+  stepDesc: {
+    color: textPrimary,
+    fontSize: 16,
+    textAlign: 'center',
+    ...$padding(0, 32, 32)
+  },
+  infoCarded: {
+    flex: 1,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 10,
+    marginRight: 16,
+    overflow: 'hidden',
+    alignItems: 'center',
+    ...ElevationObject(5),
+    backgroundColor: colorLight
+  },
+  label: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 8
+  },
+  bottomSelectView: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 16
+  },
+  bottomView: {
+    left: 0,
+    right: 0,
+    bottom: 32,
+    padding: 16,
+    position: 'absolute'
+  },
+  paymentView: {
+    ...$padding(10, 12),
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: textCancel,
+    marginBottom: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: colorLight,
+    justifyContent: 'space-between'
+  },
+  buttonView: {
+    left: 16,
+    right: 16,
+    bottom: 24,
+    position: 'absolute'
+  },
+  vouchersView: {
+    flex: 1,
+    paddingLeft: 8,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  selectText: {
+    flex: 1,
+    color: textSecondary,
+    fontSize: 15,
+    fontWeight: 'bold'
+  },
+  voucherName: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 15,
+    paddingLeft: 8,
+    fontWeight: 'bold'
+  },
+  voucherDesc: {
+    flex: 1,
+    color: textSecondary,
+    fontSize: 12,
+    paddingLeft: 8,
+    paddingRight: 16
+  }
+})