ChargEco/Strides-APP/app/pages/member/MembersList.js

/**
 * 我的会员列表页面
 * @邠心vbe on 2023/07/14
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
import apiMember from '../../api/apiMember';
import { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

export default class MembersList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      memberList: []

    };
  }

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

  getMyMemberList() {
    apiMember.getMyMemberList().then(res => {
      if (res.data) {
        this.setState({
          memberList: res.data
        });
      }
    }).catch(err => {
      this.setState({
        memberList: []
      });
      toastShort(err)
    });
  }

  getMembershipStatus(status) {
    switch (status) {
      case "Pending":
        return $t("members.statusPending");
      case "Approved":
        return $t("members.statusApproved");
      case "Pass":
        return $t("members.statusApproved");
      case "Rejected":
        return $t("members.statusRejected");
      default:
        return $t("charging.statusUnavailable");
    }
  }

  render() {
    return (
      this.state.memberList.length > 0
      ? this.state.memberList.map((item, index) => (
        <Pressable
          key={index}
          style={styles.memberView}
          onPress={() => {
            //startPage(PageList.editVehicle, {id: item.vehiclePk});
          }}>
          <View style={styles.itemBackground}>
            { utils.isNotEmpty(item.groupLogo)
            ? <Image
                source={{uri: utils.getImageUrl(item.groupLogo)}}
                resizeMode="contain"
                style={styles.groupLogo}/>
            : <MaterialIcons
                name="card-membership"
                color={colorAccent}
                style={styles.groupIcon}
                size={52}/>
            }
          </View>
          <View style={styles.memberItem}>
            { utils.isEmpty(item.groupType)
            ? <TextView style={styles.textLabel2}>{$t('members.membership')}:</TextView>
            : <TextView style={styles.textType}>{item.groupType}</TextView>
            }
            <TextView
              style={styles.textValue2}
              numberOfLines={1}>{item.membership}</TextView>
          </View>
          <View style={styles.memberItem}>
            <TextView style={styles.textLabel}>{$t('members.membershipNo')}:</TextView>
            <TextView style={styles.textValue}>{item.membershipNo}</TextView>
          </View>
          <View style={styles.memberItem}>
            <TextView style={styles.textLabel}>{$t('members.status')}:</TextView>
            <TextView style={styles.textValue}>{this.getMembershipStatus(item.membershipStatus)}</TextView>
          </View>
        </Pressable>
      ))
      : <Text style={ui.noData}>{$t('members.noData')}</Text>
    );
  }
}

const styles = StyleSheet.create({
  memberView: {
    borderRadius: 8,
    overflow: 'hidden',
    ...ElevationObject(5),
    ...$margin(16, 16, 0),
    ...$padding(16),
    backgroundColor: colorLight
  },
  memberItem: {
    paddingTop: 1,
    paddingBottom: 1,
    alignItems: 'center',
    flexDirection: 'row'
  },
  textLabel: {
    color: textPrimary,
    fontSize: 14,
    paddingRight: 6,
    fontWeight: 'bold'
  },
  textValue: {
    flex: 1,
    color: textPrimary,
    fontSize: 14
  },
  textLabel2: {
    color: textPrimary,
    fontSize: 16,
    paddingRight: 5,
    marginBottom: 2,
    fontWeight: 'bold'
  },
  textValue2: {
    flex: 1,
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 2
  },
  textType: {
    color: textLight,
    fontSize: 10,
    marginRight: 4,
    borderRadius: 2,
    ...$padding(1, 4),
    backgroundColor: colorAccent
  },
  itemBackground: {
    right: 0,
    bottom: 0,
    position: 'absolute'
  },
  groupIcon: {
    margin: 4,
    opacity: 0.08
  },
  groupLogo: {
    width: 48,
    height: 48,
    margin: 8,
    opacity: .8,
    borderRadius: 6
  }
})