update app/pages/chargeV2/TabInfos.js

Strides-SPAPP/app/pages/chargeV2/TabInfos.js

@@ -0,0 +1,132 @@
+/**
+ * 新版充电站信息页面
+ * @邠心vbe on 2023/02/06
+ */
+import React, { Component } from 'react';
+import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native';
+import TextView from '../../components/TextView';
+import PagerUtil from './PagerUtil';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+import utils from '../../utils/utils';
+import SiteLabelView from '../../components/SiteLabelView';
+
+export default class TabInfos extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      stationInfo: {}
+    };
+  }
+
+  componentDidMount() {
+    PagerUtil.addOnRefresh(this);
+    this.onRefresh();
+  }
+
+  onRefresh() {
+    console.log("info刷新", this.props.route.name);
+    this.setState({
+      refreshing: false,
+      stationInfo: PagerUtil.getStationInfo()
+    });
+  }
+
+  onPullRefresh() {
+    this.setState({
+      refreshing: true
+    })
+    PagerUtil.setBackRefreshing();
+  }
+
+  getOperatingHours() {
+    if (this.state.stationInfo?.endlessService) {
+      return "24/7";
+    } else if (this.state.stationInfo?.operatingHours) {
+      return this.state.stationInfo?.operatingHours;
+    } else {
+      return $t('charging.toBeUpdated');
+    }
+  }
+
+  getParkingFee() {
+    if (this.state.stationInfo?.parkingFeeFree) {
+      return $t('charging.free');
+    } else if (this.state.stationInfo?.parkingFee) {
+      return this.state.stationInfo.parkingFee;
+    } else {
+      return $t('charging.toBeUpdated');
+    }
+  }
+  
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
+        contentContainerStyle={$padding(0, 16)}
+        refreshControl={
+          <RefreshControl
+            {...MyRefreshProps()}
+            refreshing={this.state.refreshing}
+            onRefresh={() => this.onPullRefresh()}
+          />
+        }>
+        <TextView style={styles.title}>{$t('charging.siteName')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.state.stationInfo?.name}</TextView>
+        </View>
+        <TextView style={styles.title}>{$t('charging.siteAddress')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.state.stationInfo?.address}</TextView>
+        </View>
+        <TextView style={styles.title}>{$t('charging.parkingFees')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.getParkingFee()}</TextView>
+        </View>
+        <TextView style={styles.title}>{$t('charging.operatingHours')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.getOperatingHours()}</TextView>
+        </View>
+        <TextView style={styles.title}>{$t('charging.additionalInformation')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.state.stationInfo?.additionalNotes}</TextView>
+          <View style={styles.labelRows}>
+            { utils.isNotEmpty(this.state.stationInfo?.labels) &&
+              this.state.stationInfo?.labels.map((label, idx) =>
+                <SiteLabelView key={idx} {...label}/>
+              )
+            }
+          </View>
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  title: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    ...$padding(16, 0, 8),
+    borderBottomColor: '#eee',
+    borderBottomWidth: 1
+  },
+  infoView: {
+    paddingTop: 8,
+    paddingBottom: 16
+  },
+  infoText: {
+    color: '#444',
+    fontSize: 14
+  },
+  labelRows: {
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flexDirection: 'row'
+  }
+})