add app/pages/vehicles/VehicleList.js

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

@@ -0,0 +1,211 @@
+/**
+ * 车辆列表
+ * @邠心vbe on 2021/06/08
+ */
+import React, { Component } from 'react';
+import { View, Text, Image, StyleSheet, Pressable } from 'react-native';
+import apiUser from '../../api/apiUser';
+import { ElevationObject } from '../../components/Button';
+import Dialog from '../../components/Dialog';
+import TextView from '../../components/TextView';
+import VehicleType from '../../icons/VehicleType';
+import { PageList } from '../Router';
+
+export default class VehicleList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      vehicleList: [],
+      refreshId: 0,
+    };
+  }
+
+  componentDidMount() {
+    //this.getVehicleList();
+    this.props.navigation.addListener('focus', () => {
+      this.getVehicleList();
+    })
+  }
+
+  componentDidUpdate() {
+    if (this.state.refreshId != this.props.refreshId) {
+      this.setState({
+        refreshId: this.props.refreshId,
+      });
+      this.getVehicleList();
+    }
+  }
+
+  getVehicleList() {
+    apiUser.getVehicles().then(res => {
+      if (res.data) {
+        this.setState({
+          vehicleList: res.data
+        });
+        if (this.props.onResult) {
+          this.props.onResult(res.data.length)
+        }
+      }
+    }).catch(err => {
+      this.setState({
+        vehicleList: []
+      });
+      if (this.props.onResult) {
+        this.props.onResult(0)
+      }
+    });
+  }
+
+  removeVehicle(id) {
+    Dialog.showDialog({
+      title: $t('profile.removeVehicle'),
+      message: $t('profile.tipRemoveVehicle'),
+      callback: btn => {
+        if (btn == 'ok') {
+          Dialog.dismissLoading();
+          this.deleteVehicle(id);
+        }
+      }
+    })
+  }
+
+  deleteVehicle(id) {
+    Dialog.showProgressDialog();
+    apiUser.deleteVehicle({
+      vehiclePk: id
+    }).then(res => {
+      Dialog.dismissLoading();
+      toastShort($t('common.deleteSuccess'));
+      this.getVehicleList();
+    }).catch(err => {
+      Dialog.dismissLoading();
+      toastShort(err);
+    });
+  }
+
+  render() {
+    return (
+      this.state.vehicleList.length > 0
+      ? this.state.vehicleList.map((item, index) => {
+        //const type = getConnectTypeByKey(item.connectorType)
+        return (
+          <Pressable
+            key={index}
+            style={styles.vehicleView}
+            onPress={() => {
+              startPage(PageList.editVehicle, {id: item.vehiclePk});
+            }}
+            onLongPress={() => {
+              if (this.props.onDelete) {
+                this.props.onDelete(item.vehiclePk)
+              } else {
+                this.removeVehicle(item.vehiclePk)
+              }
+            }}>
+            <Image
+              resizeMode="contain"
+              style={styles.vehicleViewBg}
+              source={require('../../images/user/bg-vehicles.png')}/>
+            <View style={styles.vehicleRow}>
+              <Image
+                style={styles.vehicleIcon}
+                source={require('../../images/user/ic-vehicle-model.png')}/>
+              <TextView style={styles.vehicleName}>{item.brand} {item.model}</TextView>
+            </View>
+            <TextView style={styles.vehicleModle}>{item.licensePlate}</TextView>
+            <View style={styles.vehicleRow}>
+              <View style={styles.vehicleTypeRow}>
+                <View style={styles.vehicleTypeIcon}>
+                  <VehicleType size={10}/>
+                </View>
+                <TextView style={styles.vehicleType}>TYPE {item.connectorType}</TextView>
+              </View>
+              {/* <Image
+                style={styles.vehicleIcon}
+                source={type?.icon}/>
+              <Text style={styles.vehicleName}>{type?.name}</Text> */}
+            </View>
+            <Pressable
+              style={styles.closeIcon}
+              android_ripple={rippleLess}
+              onPress={() => this.removeVehicle(item.vehiclePk)}>
+              <MaterialCommunityIcons
+                name="close"
+                size={20}
+                color={textCancel}
+              />
+            </Pressable>
+          </Pressable>
+        );
+      })
+      : <Text style={ui.noData}>{$t('profile.noVehicles')}</Text>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  vehicleView: {
+    borderRadius: 8,
+    overflow: 'hidden',
+    ...ElevationObject(5),
+    ...$margin(16, 16, 0),
+    ...$padding(12, 16, 20),
+    backgroundColor: colorLight
+  },
+  vehicleViewBg: {
+    right: 8,
+    bottom: 8,
+    width: 111,
+    height: 54,
+    position: 'absolute'
+  },
+  vehicleRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  vehicleIcon: {
+    width: 32,
+    height: 32,
+  },
+  vehicleName: {
+    color: textDark,
+    fontSize: 20,
+    paddingLeft: 12,
+    fontWeight: 'bold'
+  },
+  vehicleModle: {
+    color: textPrimary,
+    fontSize: 16,
+    paddingLeft: 44,
+    paddingTop: 2,
+    paddingBottom: 7
+  },
+  vehicleTypeRow: {
+    height: 20,
+    marginLeft: 44,
+    borderRadius: 4,
+    overflow: 'hidden',
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#E5EFDE'
+  },
+  vehicleTypeIcon: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colorAccent
+  },
+  vehicleType: {
+    color: colorAccent,
+    fontSize: 13,
+    paddingLeft: 6,
+    paddingRight: 8,
+  },
+  closeIcon: {
+    top: 0,
+    right: 0,
+    padding: 12,
+    position: 'absolute'
+  }
+});