add app/pages/chargingV3/StepStart.js

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

@@ -0,0 +1,65 @@
+/**
+ * 新充电流程：充电前的模块
+ * @邠心vbe on 2023/06/20
+ */
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import Button from '../../components/Button';
+import TextView from '../../components/TextView';
+import StatusImage from './StatusImage';
+import ConnectorInfo from './ConnectorInfo';
+
+export default StepStart = ({
+  connectorInfo={},
+  currentPayment,
+  onPaymentMethodChanged,
+  onAuthenticate
+}) => {
+  return (
+    <View style={ui.flex1}>
+      <ScrollView
+        style={ui.flex1}
+        contentContainerStyle={$padding(16)}>
+        <View style={ui.center}>
+          <StatusImage
+            isAuthentic={false}/>
+          <TextView style={styles.stepTitle}>{$t('charging.stepInsertConnector')}</TextView>
+          <TextView style={styles.stepDesc}>{$t('charging.stepInsertConnectorDesc')}</TextView>
+        </View>
+        <ConnectorInfo connectorInfo={connectorInfo}/>
+        <View style={{height: 56}}></View>
+      </ScrollView>
+      <Button
+        style={styles.buttonView}
+        text={$t('charging.btnAuthenticate')}
+        elevation={1.5}
+        borderRadius={6}
+        onClick={onAuthenticate}/>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  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, 32)
+  },
+  buttonView: {
+    left: 16,
+    right: 16,
+    bottom: 24,
+    position: 'absolute'
+  }
+})