add app/pages/charging/StepStartView.js

Strides-SPAPP/app/pages/charging/StepStartView.js

@@ -0,0 +1,190 @@
+/**
+ * 充电页：扫码认证之后-充电开始之前
+ * @邠心vbe on 2023/03/10
+ */
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import Button from '../../components/Button';
+import { ChargeStyle, TypeImage } from '../chargeV2/Charging';
+import { PageList } from '../Router';
+import TextView from '../../components/TextView';
+
+const hideTaxRates = true; //隐藏税率显示
+export default StepStartView = ({
+  isPrivate,
+  stationInfo={},
+  onEnterStation,
+  canIntoCharging=false,
+  onIntoCharging
+}) => (
+  <View>
+    <View style={{minHeight: $vht(80)}}>
+      <TextView style={styles.gstText}>{hideTaxRates ? $t('charging.tipsRatesTax2') : $t('charging.tipsRatesTax')}</TextView>
+      <TextView style={styles.title}>{$t('charging.acChargers')} ({(stationInfo?.acConnector?.available ?? "0") + $t('charging.numberAvailable')})</TextView>
+      { stationInfo.acRates?.length > 0
+        ? stationInfo.acRates.map((item, index) => {
+            return (
+              <View key={index} style={ChargeStyle.stationInfoView}>
+                <Image
+                  style={ChargeStyle.infoIcon}
+                  source={TypeImage.AC}/>
+                <View style={ChargeStyle.infoGroup}>
+                  <TextView style={ChargeStyle.infoText}>{item.type}</TextView>
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</TextView>
+                </View>
+                <View style={ChargeStyle.infoGroup}>
+                  <TextView style={ChargeStyle.infoText}>{item.rates}</TextView>
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</TextView>
+                </View>
+                <View style={ChargeStyle.infoGroup}>
+                  <TextView style={ChargeStyle.infoText}>{item.power}</TextView>
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</TextView>
+                </View>
+                <View style={ChargeStyle.infoGroup}>
+                  { item?.connectorCount?.available > 0
+                    ? <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>{$t('charging.statusAvailable')}</TextView>
+                    : <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>{$t('charging.statusUnavailable')}</TextView>
+                  }
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelStatus')}</TextView>
+                </View>
+              </View>
+            );
+          })
+        : <TextView style={ui.noData}>{$t('charging.noRates')}</TextView>
+      }
+      <TextView style={styles.title}>{$t('charging.dcChargers')} ({(stationInfo?.dcConnector?.available ?? "0") + $t('charging.numberAvailable')})</TextView>
+      { stationInfo.dcRates?.length > 0
+        ? stationInfo.dcRates.map((item, index) => {
+            return (
+              <View key={index} style={ChargeStyle.stationInfoView}>
+                <Image
+                  style={ChargeStyle.infoIcon}
+                  source={TypeImage.DC}/>
+                <View style={ChargeStyle.infoGroup}>
+                  <TextView style={ChargeStyle.infoText}>{item.type}</TextView>
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</TextView>
+                </View>
+                <View style={ChargeStyle.infoGroup}>
+                  <TextView style={ChargeStyle.infoText}>{item.rates}</TextView>
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</TextView>
+                </View>
+                <View style={ChargeStyle.infoGroup}>
+                  <TextView style={ChargeStyle.infoText}>{item.power}</TextView>
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</TextView>
+                </View>
+                <View style={ChargeStyle.infoGroup}>
+                  { item?.connectorCount?.available > 0
+                    ? <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>{$t('charging.statusAvailable')}</TextView>
+                    : <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>{$t('charging.statusUnavailable')}</TextView>
+                  }
+                  <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelStatus')}</TextView>
+                </View>
+              </View>
+            );
+          })
+        : <TextView style={ui.noData}>{$t('charging.noRates')}</TextView>
+      }
+      { isPrivate &&
+        <View style={styles.privateView}> 
+          <TextView style={styles.privateText}>{$t('charging.ratesPrivateNote')}</TextView>
+        </View>
+      }
+      <View style={ui.flex1}></View>
+      { !!(stationInfo.hasDiscount) &&
+        <View style={[ChargeStyle.stationInfoView, styles.discountView]}>
+          <MaterialCommunityIcons
+            name="brightness-percent"
+            size={28}
+            color={colorAccent}/>
+          <TextView style={styles.discountText}>{$t('charging.tipsDiscount')}</TextView>
+        </View>
+      }
+    </View>
+    {/* <Payment refreshId={refreshId}/> */}
+    { canIntoCharging
+    ? <Button
+        style={styles.buttonView}
+        text={$t('charging.btnIntoCharging')}
+        //disabled={available}
+        onClick={onIntoCharging}/>
+    : <View style={styles.buttonGroup}>
+        <Button
+          style={styles.buttonLeft}
+          text={$t('charging.scanQR')}
+          //disabled={available}
+          onClick={() => {
+            PagerUtil.onInnerScanQR();
+            startPage(PageList.scanqr, {actionDetail: false, id: stationInfo?.id});
+          }}/>
+        <Button
+          style={styles.buttonRight}
+          text={$t('charging.enterStationId')}
+          //disabled={available}
+          onClick={onEnterStation}/>
+      </View>
+    }
+  </View>
+);
+
+const styles = StyleSheet.create({
+  gstText: {
+    color: '#EF3340',
+    fontSize: 16,
+    paddingTop: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  title: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 16
+  },
+  updateTip: {
+    color: '#aaa',
+    fontSize: 10,
+    textAlign: 'center',
+    paddingTop: 32,
+    paddingBottom: 16
+  },
+  privateView: {
+    height: $vht(25),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  privateText: {
+    color: '#FA5759'
+  },
+  buttonGroup: {
+    marginTop: 16,
+    marginBottom: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  buttonView: {
+    marginTop: 16,
+    marginBottom: 32
+  },
+  buttonLeft: {
+    flex: 1,
+    elevation: 1.5,
+  },
+  buttonRight: {
+    flex: 1,
+    marginLeft: 16,
+    elevation: 1.5
+  },
+  discountView: {
+    borderWidth: 1,
+    borderColor: colorAccent
+  },
+  discountText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: 'bold',
+    textAlign: 'left',
+    color: colorAccent,
+    ...$padding(2, 10)
+  }
+})