add app/pages/chargingV3/StepStop.js

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

@@ -0,0 +1,129 @@
+/**
+ * 新充电流程：停止充电模块
+ * @邠心vbe on 2023/06/20
+ */
+import React, { useEffect, useState } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import TextView from '../../components/TextView';
+import StatusImage from './StatusImage';
+import { PageList } from '../Router';
+
+export default StepStop = ({
+  chargingPk="",
+  stationInfo={}
+}) => {
+  const [isStoping, setStoping] = useState(false);
+  const [loadingEmps, setEmps] = useState("");
+
+  useEffect(() => {
+    if (chargingPk) {
+      setStoping(true);
+    } else {
+      changeEmps();
+    }
+  }, [chargingPk]);
+
+  useEffect(() => {
+    if (!isStoping) {
+      setTimeout(() => {
+        changeEmps();
+      }, 500);
+    }
+  }, [loadingEmps]);
+
+  const changeEmps = () => {
+    let emp = loadingEmps;
+    if (loadingEmps.length == 3) {
+      emp = "";
+    } else {
+      emp += ".";
+    }
+    setEmps(emp);
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <StatusImage
+          isStop={isStoping}
+          isLoading={!isStoping}
+        />
+        <View style={ui.flexcc}>
+          <TextView style={styles.stepTitle}>{$t(isStoping ? 'charging.stepStoppedCharge' : 'charging.stepStoppingCharge')}</TextView>
+          { !isStoping &&
+            <TextView style={[styles.stepTitle, {width: 30, marginRight: -10}]}>{loadingEmps}</TextView>
+          }
+        </View>
+        <TextView style={styles.stepDesc}>{$t(isStoping ? 'charging.stepStoppedChargeDesc' : 'charging.stepStoppingChargeDesc')}</TextView>
+      </View>
+      { isStoping &&
+        <View style={styles.bottomView}>
+          <Button
+            style={styles.buttonView}
+            text={$t('charging.btnViewReceipt')}
+            elevation={1.5}
+            borderRadius={6}
+            onClick={() => {
+              startPage(PageList.summary, { 
+                chargingPk: chargingPk,
+                id: stationInfo.id,
+                name: stationInfo.name,
+                address: stationInfo.address
+              });
+            }}/>
+          <Button
+            style={styles.buttonHomeView}
+            text={$t('charging.btnHome')}
+            elevation={1.5}
+            borderRadius={6}
+            onClick={() => startPage(PageList.home)}/>
+        </View>
+      }
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  stepImage: {
+    width: $vw(70),
+    height: $vw(16),
+    margin: 16
+  },
+  stepTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: colorAccent
+  },
+  stepDesc: {
+    color: textPrimary,
+    fontSize: 16,
+    textAlign: 'center',
+    ...$padding(0, 32, 48)
+  },
+  label: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 8
+  },
+  bottomView: {
+    paddingBottom: 8
+  },
+  buttonView: {
+    marginTop: 8
+  },
+  buttonHomeView: {
+    marginTop: 12,
+    marginBottom: 8,
+    backgroundColor: colorPrimary
+  }
+})