add app/pages/vehicles/AddVehicle.js

Strides-SPAPP/app/pages/vehicles/AddVehicle.js

@@ -0,0 +1,201 @@
+/**
+ * Add Vehicle页面
+ * @邠心vbe on 2021/05/08
+ */
+import React, { Component } from 'react';
+import { View, Text, StyleSheet, Pressable, Image, TextInput } from 'react-native';
+import apiUser from '../../api/apiUser';
+import BadgeSelectItem from '../../components/BadgeSelectItem';
+import Dialog from '../../components/Dialog';
+import { TypeImageList } from '../charge/Charging';
+
+export default class AddVehicle extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      connectorIndex: 0,
+      connectorType: TypeImageList
+    };
+    this.form = {}
+  }
+
+  selectConnector(index) {
+    this.setState({
+      connectorIndex: index
+    });
+  }
+
+  validate() {
+    if (!this.form.brand) {
+      toastShort($t('profile.msgInputBrand'));
+      return;
+    }
+    if (!this.form.model) {
+      toastShort($t('profile.msgInputModel'));
+      return;
+    }
+    if (!this.form.licensePlate) {
+      toastShort($t('profile.msgInputPlate'));
+      return;
+    }
+    const params = this.form;
+    params.connectorType = this.state.connectorType[this.state.connectorIndex].key
+    this.addVehicle(params)
+  }
+
+  addVehicle(params) {
+    Dialog.showProgressDialog();
+    apiUser.addVehicle(params).then(res => {
+      Dialog.dismissLoading();
+      toastShort($t('common.addSuccess'));
+      goBack();
+    }).catch((err) => {
+      Dialog.dismissLoading();
+      toastShort(err);
+    });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.formView}>
+          <Text style={styles.label}>{$t('profile.vehicleBrand')}</Text>
+          <TextInput
+            style={styles.formInput}
+            allowFontScaling={false}
+            placeholder={$t('common.inputAddText')}
+            maxLength={25}
+            placeholderTextColor={textPlacehoder}
+            onChangeText={text => this.form.brand = text}
+          />
+        </View>
+        <View style={styles.formView}>
+          <Text style={styles.label}>{$t('profile.vehicleModel')}</Text>
+          <TextInput
+            style={styles.formInput}
+            allowFontScaling={false}
+            placeholder={$t('common.inputAddText')}
+            maxLength={50}
+            placeholderTextColor={textPlacehoder}
+            onChangeText={text => this.form.model = text}
+          />
+        </View>
+        <View style={styles.formView}>
+          <Text style={styles.label}>{$t('profile.licensePlate')}</Text>
+          <TextInput
+            style={styles.formInput}
+            placeholder={$t('common.inputAddText')}
+            maxLength={20}
+            placeholderTextColor={textPlacehoder}
+            onChangeText={text => this.form.licensePlate = text}
+          />
+        </View>
+        <View style={styles.formView}>
+          <Text style={styles.label}>{$t('profile.chooseConnecterType')}</Text>
+          <View style={styles.connectorView}>
+            { this.state.connectorType.map((item, index) => {
+                return (
+                  <BadgeSelectItem
+                    key={index}
+                    style={styles.ctypeView}
+                    borderColor={textCancel}
+                    checked={index==this.state.connectorIndex}
+                    onPress={() => this.selectConnector(index)}>
+                    <Image
+                      style={styles.typeIcon}
+                      source={item.icon}/>
+                    <Text style={styles.typeName}>{item.nameScope ? $t(item.nameScope) : item.name}</Text>
+                    {/* index==this.state.connectorIndex &&
+                      <View style={styles.checkedIcon}>
+                        <ChargeItemSelect size={12} selected={true}/>
+                      </View>
+                    */}
+                  </BadgeSelectItem>
+                )
+              })
+            }
+          </View>
+        </View>
+        <Text style={ui.flex1}></Text>
+        <View style={styles.buttonView}>
+          <Button
+            text={$t('profile.addVehicle')}
+            elevation={1.5}
+            onClick={() => {
+              this.validate();
+            }}/>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: pageBackground
+  },
+  formView: {
+    paddingTop: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 4
+  },
+  label: {
+    color: textPrimary,
+    fontSize: 14
+  },
+  formInput: {
+    color: textPrimary,
+    fontSize: 14,
+    height: 42,
+    paddingBottom: 2,
+    borderBottomColor: '#EEE',
+    borderBottomWidth: 1
+  },
+  connectorView: {
+    paddingTop: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  ctypeView: {
+    minWidth: 90,
+    padding: 8,
+    borderRadius: 6,
+    marginRight: 16,
+    marginBottom: 8,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    textAlign: 'center'
+  },
+  typeIcon: {
+    width: 38,
+    height: 38
+  },
+  checkedIcon: {
+    width: 12,
+    height: 12,
+    top: 4,
+    right: 4,
+    position: 'absolute',
+  },
+  actived: {
+    borderColor: colorAccent
+  },
+  typeName: {
+    color: '#000',
+    fontSize: 15,
+    textAlign: 'center',
+    paddingTop: 8
+  },
+  buttonView: {
+    padding: 16,
+    marginBottom: 16
+  },
+  removeButton: {
+    marginBottom: 16,
+    backgroundColor: '#EF5B5B'
+  }
+});
+
+export const VehicleStyles = styles