ChargEco/Strides-APP/app/pages/vouchers/ListPoints.js

/**
 * 购买代金券列表
 * @邠心vbe on 2024/04/09
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, RefreshControl, FlatList } from 'react-native';
import ViewRedeem from './ViewRedeem';
import apiVoucher from '../../api/apiVoucher';
import { MyRefreshProps } from '../../components/ThemesConfig';
import TextView from '../../components/TextView';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import VoucherType from './VoucherType';
import app from '../../../app.json';
import VbeSkeleton from '../../components/VbeSkeleton';

export default class ListPoints extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      userInfo: {},
      dataList: [],
      voucherType: "",
      hasMore: true,
      refreshing: false,
      loadingList: ["","","",""]
    };
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      this.refreshUserInfo();
      this.getDataList();
    });
  }

  onRefresh() {
    this.setState({
      refreshing: true
    })
    this.refreshUserInfo();
    this.getDataList();
  }

  refreshUserInfo() {
    getUserInfo(info => {
      this.setState({
        userInfo: info
      });
    }, true);
  }

  getDataList(lastId="") {
    apiVoucher.getDealVouchers({
      lastVoucherId: lastId,
      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)
            });
          } else {
            this.setState({
              hasMore: false
            })
          }
        } else {
          this.setState({
            dataList: res.data,
            hasMore: res.data.length >= 10
          });
        }
      } else {
        this.setState({
          dataList: []
        });
      }
    }).catch(err => {
      toastShort(err)
    }).finally(() => {
      this.setState({
        loading: false,
        refreshing: false
      });
    });
  }

  getDataListPage() {
    if (this.state.dataList.length > 0 && this.state.hasMore) {
      const last = this.state.dataList[this.state.dataList.length-1]
      this.getDataList(last.voucherId);
    }
  }

  confirmPurchase(item) {
    let msg = "" + $t("voucher.confirmPurchase");
    if (item.purchasePoints) {
      msg = msg.replace("{value}", item.purchasePoints);
    } else {
      msg = msg.replace("{value}", "0");
    }
    Dialog.showDialog({
      title: $t("voucher.purchaseVoucher"),
      message: msg,
      ok: $t("nav.confirm"),
      callback: btn => {
        if (btn == Dialog.BUTTON_OK) {
          this.onPurchase(item)
        }
      }
    })
  }

  onPurchase(item) {
    Dialog.showProgressDialog();
    apiVoucher.purchaseVoucher({
      voucherId: item.voucherId
    }).then(res => {
      Dialog.dismissLoading();
      if (res.msg) {
        setTimeout(() => {
          Dialog.showDialog({
            title: $t("voucher.purchaseVoucher"),
            message: res.msg,
            showCancel: false
          })
        }, 500);
      }
      setTimeout(() => {
        this.refreshUserInfo();
      }, 2000)
    }).catch(err => {
      Dialog.dismissLoading();
      if (err.err) {
        setTimeout(() => {
          Dialog.showDialog({
            title: $t("voucher.vouchers"),
            message: err.err,
            showCancel: false
          })
        }, 500);
      }
    })
  }

  changeType(type) {
    this.setState({
      voucherType: type
    });
    this.getDataList();
  }

  listItem = ({item, index, separators}) => {
    return (
      <View
        style={styles.itemView}>
        <View style={styles.itemBox}></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}></View>
            <View style={styles.bottomTikDot}></View>
          </> }
        </View>
        { item.purchasePoints > 0
        ? <Button
            viewStyle={styles.purchaseButton}
            borderRadius={6}
            onClick={() => this.confirmPurchase(item)}>
            <TextView
              style={styles.getForText}>
              {$t("voucher.btnGetFor")}
            </TextView>
            <TextView
              style={styles.getValueText}>
              {item.purchasePoints}
              {$t("voucher.btnPoints")}
            </TextView>
          </Button>
        : <Button
            style={styles.claimeButton}
            viewStyle={styles.claimeButtonView}
            textStyle={styles.claimeButtonText}
            text={$t("voucher.btnClaimed")}
            onClick={() => this.onPurchase(item)}/>
        }
      </View>
    )
  }

  topView = (props) => {
    return (
      <View>
        <ViewRedeem
          userInfo={this.state.userInfo}/>
        <VoucherType
          type={this.state.voucherType}
          onChange={type => this.changeType(type)}
        />
      </View>
    )
  }

  bottomView = () => {
    if (this.state.dataList.length > 0 && !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}>
          <VbeSkeleton
            style={{}}
            layout={[
              {width: '100%', height: 42, borderRadius: 10},
              {width: '40%', height: 18, marginTop: 16}
            ]}
            animationDirection={"horizontalRight"}
          />
          <EndView/>
          { 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 (
      <FlatList
        style={styles.container}
        data={this.state.dataList}
        renderItem={this.listItem}
        ListHeaderComponent={this.topView}
        keyExtractor={item => item.voucherId}
        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()}
          />
        }/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  itemView: {
    marginTop: 16,
    borderRadius: 4,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight,
    ...$padding(0, 20, 0, 16)
  },
  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
  },
  voucherTitle: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  voucherDesc: {
    color: textPrimary,
    fontSize: 14,
    paddingTop: 2,
    paddingBottom: 4
  },
  expireDate: {
    color: textCancel,
    fontSize: 12
  },
  purchaseButton: {
    padding: 4,
    minWidth: 75,
    marginRight: 4,
    alignItems: 'center'
  },
  claimeButton: {
    borderWidth: 1,
    borderColor: colorAccent,
    borderRadius: 6,
    backgroundColor: colorLight
  },
  claimeButtonView: {
    padding: 8,
    minWidth: 73,
    alignItems: 'center'
  },
  claimeButtonText: {
    color: colorAccent,
    fontSize: 12,
    fontWeight: 'bold'
  },
  getForText: {
    color: textLight,
    fontSize: 12,
    fontWeight: 'bold'
  },
  getValueText: {
    color: textLight,
    fontSize: 10
  },
  noData: {
    color: textPlacehoder,
    fontSize: 14,
    padding: 20,
    marginTop: 16,
    textAlign: 'center'
  },
  noMore: {
    color: textPlacehoder,
    fontSize: 14,
    padding: 16,
    marginBottom: 16,
    textAlign: 'center'
  },
  loadingView: {
    paddingTop: 16,
    paddingBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  }
})