add app/pages/vouchers/VoucherSelect.js

Strides-SPAPP/app/pages/vouchers/VoucherSelect.js

@@ -0,0 +1,361 @@
+import React, { Component } from 'react';
+import { View, Text, StyleSheet, RefreshControl, FlatList, Pressable } from 'react-native';
+import VoucherType from './VoucherType';
+import apiVoucher from '../../api/apiVoucher';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+import TextView from '../../components/TextView';
+import BadgeSelectItem from '../../components/BadgeSelectItem';
+import Button from '../../components/Button';
+import PagerUtil from '../chargeV2/PagerUtil';
+import app from '../../../app.json';
+import VbeSkeleton from '../../components/VbeSkeleton';
+
+export default class VoucherSelect extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataList: [],
+      voucherType: "",
+      hasMore: true,
+      loading: true,
+      refreshing: false,
+      selectedVoucher: {},
+      loadingList: ["","","",""]
+    };
+    this.params = {
+      chargeBoxId: "",
+      connectorId: ""
+    }
+  }
+
+  componentDidMount() {
+    const params = this.props.route.params;
+    if (params.chargeBoxId) {
+      this.params.chargeBoxId = params.chargeBoxId
+    }
+    if (params.connectorId) {
+      this.params.connectorId = params.connectorId
+    }
+    console.log("选择优惠券", this.params);
+    this.getDataList();
+    this.props.navigation.addListener('beforeRemove', (e) => {
+      PagerUtil.setSelectedVoucher(this.state.selectedVoucher);
+    });
+  }
+
+  onRefresh() {
+    this.setState({
+      refreshing: true
+    })
+    this.getDataList();
+  }
+
+  getDataList(lastId) {
+    apiVoucher.getSelectionVoucher({
+      ...this.params,
+      voucherType: this.state.voucherType
+    }).then(res => {
+      if (res.data) {
+        if (lastId) {
+          if (res.data.length > 0) {
+            const list = this.state.dataList;
+            this.setState({
+              dataList: list.concat(res.data),
+              hasMore: true
+            });
+          } else {
+            this.setState({
+              hasMore: false
+            })
+          }
+        } else {
+          this.setState({
+            dataList: res.data,
+            hasMore: res.data.length == 0
+          });
+        }
+      } else {
+        this.setState({
+          dataList: [],
+          hasMore: true
+        });
+      }
+    }).catch(err => {
+      toastShort(err)
+      this.setState({
+        dataList: [],
+        hasMore: true
+      });
+    }).finally(() => {
+      this.setState({
+        refreshing: false,
+        selectedVoucher: {}
+      });
+      setTimeout(() => {
+        this.setState({
+          loading: false
+        });
+      }, 500);
+    });
+  }
+
+  getDataListPage() {
+    if (this.state.dataList.length > 0 && this.state.hasMore) {
+      const last = this.state.dataList[this.state.dataList.length-1]
+      this.getDataList(last.voucherId);
+    }
+  }
+
+  getColorByStatus(status) {
+    let color = colorAccent;
+    switch (status) {
+      case "Used":
+      case "Expired":
+        color = "#434343";
+        break;
+      case "Expiring":
+        color = "#ED3F3F"
+        break;
+    }
+    return color;
+  }
+
+  changeType(type) {
+    this.setState({
+      voucherType: type
+    });
+    this.getDataList();
+  }
+
+  onSetectVoucher(item) {
+    if (item.userVoucherId != this.state.selectedVoucher.userVoucherId) {
+      this.setState({
+        selectedVoucher: item
+      })
+    } else {
+      this.setState({
+        selectedVoucher: {}
+      })
+    }
+  }
+
+  listItem = ({item, index, separators}) => {
+    const checked = (this.state.selectedVoucher.userVoucherId == item.userVoucherId);
+    return (
+      <BadgeSelectItem
+        style={styles.itemView}
+        showBorder={false}
+        checked={checked}
+        onPress={() => this.onSetectVoucher(item)}>
+        <View style={[styles.itemBox, checked ? styles.activeBorder : {}]}></View>
+        <View style={styles.itemContent}>
+          <TextView style={styles.voucherTitle} numberOfLines={1}>{item.voucherName}</TextView>
+          <TextView style={styles.voucherDesc}>{item.voucherDesc}</TextView>
+          <TextView style={styles.expireDate}>{$t("voucher.expiresOn") + item.expiresOn}</TextView>
+          { !app.isLumiWhitelabel && <>
+            <View style={styles.rightDash}></View>
+            <View style={[styles.topTikDot, checked ? styles.activeBorder : {}]}></View>
+            <View style={[styles.bottomTikDot, checked ? styles.activeBorder : {}]}></View>
+          </> }
+        </View>
+        <TextView
+          style={[
+            styles.statusButton, {
+              color: this.getColorByStatus(item.userVoucherStatus),
+              borderColor: this.getColorByStatus(item.userVoucherStatus)
+            }
+          ]}>
+          {item.userVoucherStatus}
+        </TextView>
+      </BadgeSelectItem>
+    )
+  }
+
+  topView = (props) => {
+    return (
+      <VoucherType
+        type={this.state.voucherType}
+        onChange={type => this.changeType(type)}
+      />
+    );
+  }
+
+  bottomView = () => {
+    if (!this.state.hasMore) {
+      return (<Text style={styles.noMore}>{$t('voucher.noMore')}</Text>)
+    } else {
+      return null
+    }
+  }
+
+  render() {
+    if (this.state.loading) {
+      return (
+        <View style={styles.container}>
+          { this.state.loadingList.map((item, index) =>
+            <View style={styles.loadingView} key={index}>
+              <VbeSkeleton
+                style={ui.flex1}
+                layout={[
+                  {width: '50%', height: 18},
+                  {width: '90%', height: 12, marginTop: 8},
+                  {width: '40%', height: 12, marginTop: 4}
+                ]}
+                animationDirection={"horizontalRight"}
+              />
+              <VbeSkeleton
+                style={{width: 56}}
+                layout={[
+                  {width: 56, height: 30, borderRadius: 30}
+                ]}
+                animationDirection={"horizontalRight"}
+              />
+            </View>
+          )}
+        </View>
+      )
+    }
+    return (
+      <View style={styles.container}>
+        <FlatList
+          style={ui.flex1}
+          data={this.state.dataList}
+          renderItem={this.listItem}
+          ListHeaderComponent={this.topView}
+          keyExtractor={item => item.userVoucherId}
+          onEndReached={() => this.getDataListPage()}
+          onEndReachedThreshold={0.3}
+          ListEmptyComponent={<Text style={styles.noData}>{$t('voucher.noData')}</Text>}
+          ListFooterComponent={this.bottomView}
+          refreshControl={
+            <RefreshControl
+              {...MyRefreshProps()}
+              refreshing={this.state.refreshing}
+              onRefresh={() => this.onRefresh()}
+            />
+          }/>
+        <Button
+          text={$t("nav.confirm")}
+          borderRadius={6}
+          onClick={() => goBack()}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 16,
+    backgroundColor: pageBackground
+  },
+  itemView: {
+    marginTop: 16,
+    borderRadius: 4,
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: colorLight,
+    ...$padding(0, 16)
+  },
+  loadingView: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  itemBox: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 4,
+    position: 'absolute'
+  },
+  itemContent: {
+    flex: 1,
+    paddingTop: 12,
+    marginRight: 16,
+    paddingBottom: 12,
+    overflow: 'hidden'
+  },
+  rightDash: {
+    top: 0,
+    right: 6,
+    bottom: 0,
+    position: 'absolute',
+    borderStyle: 'dashed',
+    borderRightWidth: 1,
+    borderRightColor: '#DADADA'
+  },
+  topTikDot: {
+    top: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
+  },
+  bottomTikDot: {
+    bottom: -8,
+    right: 0,
+    width: 13,
+    height: 14,
+    borderWidth: 1,
+    borderColor: '#DADADA',
+    borderRadius: 30,
+    position: 'absolute',
+    backgroundColor: pageBackground
+  },
+  activeBorder: {
+    borderColor: colorAccent
+  },
+  voucherTitle: {
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  voucherDesc: {
+    color: textPrimary,
+    fontSize: 14,
+    paddingTop: 2,
+    paddingBottom: 4
+  },
+  expireDate: {
+    color: textCancel,
+    fontSize: 12
+  },
+  statusButton: {
+    color: colorAccent,
+    padding: 5,
+    minWidth: 70,
+    fontSize: 12,
+    marginRight: 4,
+    textAlign: 'center',
+    borderWidth: 1,
+    borderColor: colorAccent,
+    borderRadius: 6,
+    textTransform: 'uppercase',
+    backgroundColor: colorLight
+  },
+  noData: {
+    color: textPlacehoder,
+    fontSize: 14,
+    padding: 20,
+    marginTop: 16,
+    textAlign: 'center'
+  },
+  noMore: {
+    color: textPlacehoder,
+    fontSize: 14,
+    padding: 16,
+    textAlign: 'center'
+  }
+})