ChargEco/Strides-SPAPP/app/pages/member/ApplyMember.js

/**
 * 申请会员页面
 * @邠心vbe on 2023/07/14
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, ScrollView } from 'react-native';
import apiMember from '../../api/apiMember';
import apiUpload from '../../api/apiUpload';
import { GetCountryList } from '../../components/CountryIcon';
import Dropdown from '../../components/Dropdown';
import { UploadThemes } from '../../components/ThemesConfig';
import { UploadView } from '../sign/RegisterDriver';
import ImagePicker from 'react-native-image-crop-picker';
import CheckBoxText from '../../components/CheckBoxText';
import Button from '../../components/Button';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

const options = {
  width: 300,
  height: 200,
  cropping: true,
  multiple: false,
  mediaType: 'photo',
  writeTempFile: false,
  compressImageQuality: 0.8,
  compressImageMaxWidth: 720,
  compressImageMaxHeight: 1280,
  ...UploadThemes
}

export default class ApplyMember extends Component {
  constructor(props) {
    super(props);
    this.state = {
      agree: true,
      groupList: [],
      memberForm: {
        groupPk: "",
        membershipNo: "",
        cardFront: ""
      },
      isFleet: false
    };
  }

  componentDidMount() {
    //console.log(this.state.params);
    //this.getCountryList();
    this.getGroupList();
  }

  changeForm(key, value) {
    const form = {...this.state.memberForm};
    form[key] = value;
    this.setState({
      memberForm: form
    })
  }

  changeGroup(value, index) {
    const group = this.state.groupList[index];
    this.setState({
      isFleet: group?.groupType == "FLEET"
    })
    this.changeForm("groupPk", value);
  }

  getCountryList() {
    GetCountryList(list => {
      this.setState({
        countryNums: list
      })
    })
  }

  getGroupList() {
    apiMember.getMembersOption().then(res => {
      if (res.data) {
        this.setState({
          groupList: res.data
        })
      }
    }).catch(err => [
      toastShort(err)
    ])
  }

  uploadImage() {
    ImagePicker.openPicker({
      ...options,
      cropperToolbarTitle: $t('common.cropperTitle')
    }).then(image => {
      if (image.path) {
        apiUpload.uploadImage(image.path, image.mime, 'MEMBERSHIP').then(res => {
          if (res.success && res.data.picturePath) {
            utils.logEventTracking("file_upload: " + res.data.picturePath)
            this.changeForm("cardFront", res.data.picturePath)
            toastShort($t('common.uploadSuccess'));
          } else {
            toastShort($t('common.uploadFailed'));
          }
        }).catch(err => {
          toastShort(err);
        });
      }
    }).catch(err1 => {
      //console.log(err1);
    });
  }

  changeAgree(ag) {
    this.setState({
      agree: ag
    })
  }

  onApplyMember() {
    if (!this.state.memberForm.membershipNo) {
      toastShort($t('members.errMembershipNo'));
      return;
    }
    if (!this.state.memberForm.cardFront) {
      toastShort($t('members.errUploadCard'));
      return;
    }
    console.log('params', this.state.memberForm);
    Dialog.showProgressDialog();
    apiMember.applyMembers(this.state.memberForm).then(res => {
      Dialog.dismissLoading();
      toastLong(res.msg ?? $t('common.submitSuccess'));
      goBack();
    }).catch(err => {
      toastLong(err);
      Dialog.dismissLoading();
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={styles.applyForm}>
          <View style={styles.formItem}>
            <TextView style={styles.inputLabel}>{$t('members.membership')}</TextView>
            <Dropdown
              style={styles.selectView}
              textStyle={styles.selectText}
              title={$t('members.membership')}
              list={this.state.groupList}
              value={this.state.memberForm.groupPk}
              valueKey='groupPk'
              nameKey='groupName'
              onChange={(value, index)=> this.changeGroup(value, index)}/>
          </View>
          <View style={styles.formItem}>
            <TextView style={styles.inputLabel}>{$t("members.labelMemberLicenceNo")}
              {/*this.state.isFleet ? $t('members.labelPHVNo') : $t('members.membershipNo')*/}
            </TextView>
            <TextInput
              style={styles.inputView}
              allowFontScaling={false}
              placeholder={$t('members.placeLast4Digits')}
              placeholderTextColor={textPlacehoder}
              maxLength={4}
              //keyboardType='phone-pad'
              onChangeText={v => this.changeForm('membershipNo', v)}
            />
          </View>
          <View style={styles.formItem}>
            <TextView style={styles.inputLabel}>
              {this.state.isFleet ? $t('members.labelPDVPhotos') : $t('members.labelUpload')}
            </TextView>
            <View style={styles.uploadGroup}>
              <UploadView
                style={styles.uploadView}
                imageStyle={styles.uploadImage}
                onPress={() => this.uploadImage()}
                url={this.state.memberForm.cardFront}/>
            </View>
          </View>
          <View style={styles.formItem}>
            <TextView style={styles.inputLabel}>{$t('members.labelRequirement')}</TextView>
            <TextView style={styles.contentView}>{$t('members.contentRequirement')}</TextView>
          </View>
        </ScrollView>
        <View style={styles.agreeView}>
          <View style={ui.flex}>
            <CheckBoxText
              value={this.state.agree}
              text={$t('sign.agreePDVInfoAccurate')}
              textStyle={styles.agreeText}
              onValueChange={v => this.changeAgree(v)}
            />
          </View>
          <Button
            style={styles.submitButton}
            elevation={1.5}
            disabled={!this.state.agree}
            text={$t('nav.submit')}
            fontSize={14}
            onClick={() => {
              this.onApplyMember();
            }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  applyForm: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16
  },
  formItem: {
    marginTop: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  inputLabel: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
    marginRight: 4
  },
  inputView: {
    flex: 2,
    color: textPrimary,
    fontSize: 14,
    borderRadius: 5,
    minHeight: 40,
    paddingTop: 6,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 6,
    backgroundColor: '#F5F5F5'
  },
  selectView: {
    flex: 2,
    borderRadius: 5,
    minHeight: 40,
    paddingLeft: 12,
    paddingRight: 12,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#F5F5F5'
  },
  contentView: {
    flex: 2,
    color: textPrimary,
    fontSize: 14
  },
  selectText: {
    flex: 1,
    color: textPrimary,
    fontSize: 14
  },
  uploadGroup: {
    flex: 2,
    marginLeft: -16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  uploadView: {
    //flex: 1,
    alignItems: 'center'
  },
  uploadImage: {
    width: $vw(28),
    height: $vw(18.7),
    borderRadius: 6
  },
  agreeView: {
    padding: 16,
  },
  agreeText: {
    flex: 1,
    color: textPrimary,
    fontSize: 14,
    paddingTop: 2,
    paddingLeft: 4,
    paddingBottom: 2
  },
  submitButton: {
    marginTop: 16,
    marginBottom: 8
  }
})