customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/5/7.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ActivityIndicator,
    ScrollView,
    PanResponder,
    Modal,
} from 'react-native';
import { width, height, zoomW, zoomH } from '../../utils/getSize';
import { xnToast } from '../../utils/utils';
import AppService from '../../service/AppService';

export default class volunteerService extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: '志愿服务',
    headerLeft: (
      <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
        <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
      </TouchableOpacity>
        ),
    headerRight: (
      <TouchableOpacity style={styles.backWrap} onPress={() => navigation.navigate('VolunteerServiceDetail')}>
        <Text style={{ fontSize: 13, color: '#4B85E0' }}>查看详情</Text>
      </TouchableOpacity>
        ),
  });

  constructor(props) {
    super(props);
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
    this.state = {
      currentYear: new Date().getFullYear(),  // 当前年份
      currentMonth: new Date().getMonth(),    // 当前月份
      selectedMonth: new Date().getMonth(),   // 选择的月份
      topMonthList: [],                       // 月份列表
      totalDateList: [],                      // 完整日期列表
      dateList: [],                           // 已切割日期列表
      recordList: [],                         // 全部布岗信息
      positionStatusObj: {},                  // 所有带标记的日期
      lineAndStation: [],                     // 选中的车站
      remarkDateList: [],                     // 根据选中车站得到的带标记的日期列表
      timeSlotList: [],                       // 时间段列表
      selectedDate: [],                       // 选择的日期
      timeAndPosition: {},                    // 时间段对应的服务岗位
      positionList: [],                       // 服务岗位列表
      loading: true,
    };
  }

  componentWillMount() {
    const _this = this;
    const process1 = new Promise((resolve, reject) => {
          // 布岗查询
      AppService.getVolunteerServicePosition({ lineId: '', stationeId: '', publishDate: '' }).then((data) => {
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (!!data.errors === true && !!data.errors.length > 0) {
          xnToast(data.errors[0].message);
        } else {
          resolve(data.record);
        }
      });
    });
    const process2 = new Promise((resolve, reject) => {
          // 获取志愿服务状态
      AppService.getVolunteerServiceStatus({ userId: global.user.id }).then((data) => {
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (!!data.errors === true && !!data.errors.length > 0) {
          xnToast(data.errors[0].message);
        } else {
          const statusObj = {};
          data.postPositionStatus.map(function (ele, idx) {
            const list = ele.date.split('-');
            if (list[0] == new Date().getFullYear()) {
              if (!statusObj[String(Number(list[1]))]) {
                statusObj[String(Number(list[1]))] = [];
              }
              statusObj[String(Number(list[1]))].push({ date: String(Number(list[2])), status: ele.status });
            }
            if (idx === data.postPositionStatus.length - 1) {
              resolve(statusObj);
            }
          });
        }
      });
    });
// 同时执行process1和process2，并在它们都完成后执行then:
    Promise.all([process1, process2]).then(function (results) {
      _this.setState({
        recordList: results[0],
        positionStatusObj: results[1],
        loading: false,
      }, () => {
        _this.getStatus();
      });
    });
    this.initTopMonth(this.state.currentMonth);
    this.initDate(this.state.currentYear, this.state.currentMonth);
  }

    // 获取某年某月的天数
  mGetDate(year, month) {
    return new Date(year, month + 1, 0).getDate();
  }

    // 选择位置
  chooseLineAndStation=(line, station) => {
    this.setState({
      timeSlotList: [],
      selectedDate: [],
      timeAndPosition: {},
      positionList: [],
      lineAndStation: station,
      lineId: line.code,
      lineName: line.name,
      stationId: station[0].code,
      stationName: station[0].name,
    });
    this.getRemarkDate(station[0].code);
  }

  // 根据所选位置获取有标记的日期
  getRemarkDate(stationId) {
    const _this = this;
    const tempRemarkDateList = [];
    const recordList = this.state.recordList;
    recordList.map(function (ele, idx) {
      if (ele.stationId === stationId) {
        if (tempRemarkDateList.indexOf(ele.publishDate) === -1) {
          tempRemarkDateList.push(ele.publishDate);
        }
      }
      if (idx === recordList.length - 1) {
        _this.setState({
          remarkDateList: tempRemarkDateList,
        }, () => {
          _this.initDate(_this.state.currentYear, _this.state.selectedMonth);
        });
      }
    });
  }

  // 获取状态
  getStatus() {
    if (this.state.positionStatusObj.hasOwnProperty(String(this.state.selectedMonth + 1))) {
      const list = this.state.totalDateList;
      const cutList = [];
      const itemList = this.state.positionStatusObj[String(this.state.selectedMonth + 1)];
      const remarkDateList = this.state.remarkDateList;    // 根据所选位置得到的日期
      if (remarkDateList.length > 0) {
        const totalDayList = [];     // 选中月份所有带标记的天
        const lastDayList = [];      // 根据所选位置+选中月份筛选后的带标记的天
        for (let i = 0; i < itemList.length; i++) {
          totalDayList.push(itemList[i].date);
        }
        for (let i = 0; i < remarkDateList.length; i++) {
          const splitList = remarkDateList[i].split('-');
          if (splitList[0] == new Date().getFullYear()) {
            if (Number(splitList[1]) == this.state.selectedMonth + 1) {
              if (totalDayList.indexOf(String(Number(splitList[2]))) > -1) {
                lastDayList.push(itemList[totalDayList.indexOf(String(Number(splitList[2])))]);
              }
            }
          }
          if (i === remarkDateList.length - 1) {
            for (let m = 0; m < lastDayList.length; m++) {
              for (let n = 0; n < list.length; n++) {
                if (list[n].value == lastDayList[m].date) {
                  list[n].code = lastDayList[m].status;
                }
                if (m === lastDayList.length - 1 && n === list.length - 1) {
                          // 将要显示的所有天分成小数组
                  for (let d = 0; d < list.length; d += 7) {
                    cutList.push(list.slice(d, d + 7));
                    if (d === list.length - 7) {
                      this.setState({
                        dateList: cutList,
                      });
                    }
                  }
                }
              }
            }
          }
        }
      } else {
        for (let i = 0; i < itemList.length; i++) {
          for (let j = 0; j < list.length; j++) {
            if (list[j].value == itemList[i].date) {
              list[j].code = itemList[i].status;
            }
            if (i === itemList.length - 1 && j === list.length - 1) {
                      // 将要显示的所有天分成小数组
              for (let d = 0; d < list.length; d += 7) {
                cutList.push(list.slice(d, d + 7));
                if (d === list.length - 7) {
                  this.setState({
                    dateList: cutList,
                  });
                }
              }
            }
          }
        }
      }
    }
  }

  // 初始化展示月份
  initTopMonth(currentMonth) {
    const monthList = [];
    if (currentMonth <= 4) {
      for (var i = 0; i <= 4; i++) {
        if (i === currentMonth) {
          monthList.push({ number: i, select: true });
        } else {
          monthList.push({ number: i, select: false });
        }
      }
      this.setState({
        topMonthList: monthList,
      });
    }
    if (currentMonth > 4 && currentMonth <= 9) {
      for (var i = 5; i <= 9; i++) {
        if (i === currentMonth) {
          monthList.push({ number: i, select: true });
        } else {
          monthList.push({ number: i, select: false });
        }
      }
      this.setState({
        topMonthList: monthList,
      });
    }
    if (currentMonth > 9 && currentMonth <= 11) {
      for (var i = 10; i <= 11; i++) {
        if (i === currentMonth) {
          monthList.push({ number: i, select: true });
        } else {
          monthList.push({ number: i, select: false });
        }
      }
      this.setState({
        topMonthList: monthList,
      });
    }
  }

  // 初始化日历
  initDate(currentYear, currentMonth) {
    const list = [];
    const cutList = [];
    const selectedDate = this.state.selectedDate;
      // 每个月的第一天
    const firstDay = new Date(currentYear, currentMonth, 1);
    const dayInMonth = this.mGetDate(currentYear, currentMonth);
      // 每个月的最后一天
    const lastDay = new Date(currentYear, currentMonth, dayInMonth);
      // 第一天星期几(0-6)
    const firstDayWeekDay = firstDay.getDay();
      // 最后一天星期几(0-6)
    const lastDayWeekDay = lastDay.getDay();
      // 补齐前面的日期
    for (let i = 0; i < firstDayWeekDay; i++) {
      list.push({ code: '', value: ' ', select: false });
    }
    for (let date = 1; date <= dayInMonth; date++) {
      if (selectedDate[0] == currentYear && (Number(selectedDate[1]) - 1) == currentMonth && Number(selectedDate[2]) == date) {
        list.push({ code: '', value: date, select: true });
      } else {
        list.push({ code: '', value: date, select: false });
      }
    }
      // 补齐后面的日期
    for (let j = lastDayWeekDay + 1; j < 7; j++) {
      list.push({ code: '', value: ' ', select: false });
    }
    // 将要显示的所有天分成小数组
    for (let d = 0; d < list.length; d += 7) {
      cutList.push(list.slice(d, d + 7));
      if (d === list.length - 7) {
        this.setState({
          dateList: cutList,
          totalDateList: list,
        }, () => {
          this.getStatus();
        });
      }
    }
  }

  _handleStartShouldSetPanResponder = (e, gestureState) => true

  _handleMoveShouldSetPanResponder = (e, gestureState) => true

    // 开始手势操作
  _handlePanResponderGrant = (e, gestureState) => {

  }

  // 手指移动
  _handlePanResponderMove = (e, gestureState) => {
    if (this.state.topMonthList[0].number !== 0 && gestureState.dx > 0) {

    } else if (this.state.topMonthList[0].number !== 10 && gestureState.dx < 0) {

    }
  }

    // 结束手势操作
  _handlePanResponderEnd = (e, gestureState) => {
    if (this.state.topMonthList[0].number !== 10 && gestureState.dx <= -50) {
      this.initTopMonth(this.state.topMonthList[4].number + 1);
      this.initDate(this.state.currentYear, this.state.topMonthList[4].number + 1);
      this.setState({
        selectedMonth: this.state.topMonthList[4].number + 1,
      });
    } else if (this.state.topMonthList[0].number !== 0 && gestureState.dx >= 50) {
      this.initTopMonth(this.state.topMonthList[0].number - 1);
      this.initDate(this.state.currentYear, this.state.topMonthList[0].number - 1);
      this.setState({
        selectedMonth: this.state.topMonthList[0].number - 1,
      });
    } else {

    }
  }

  // 选择月份
  selectTopMonth(v, i) {
    if (!v.select) {
      this.initDate(this.state.currentYear, v.number);
      this.setState({
        selectedMonth: v.number,
      });
      const list = this.state.topMonthList;
      for (let m = 0; m < list.length; m++) {
        if (m === i) {
          list[m].select = true;
        } else {
          list[m].select = false;
        }
        if (m === list.length - 1) {
          this.setState({
            topMonthList: list,
          });
        }
      }
    }
  }

  // 要显示的月份
  renderTopMonth(v, i) {
    return (
      <TouchableOpacity activeOpacity={0.8} style={styles.monthBtn} onPress={() => this.selectTopMonth(v, i)} key={i}>
        <View style={[styles.monthWrap, { backgroundColor: v.select ? '#4B85E0' : 'transparent' }]}>
          <Text style={{ fontSize: 14, color: v.select ? '#fff' : '#686868' }}>{v.number + 1} 月</Text>
        </View>
      </TouchableOpacity>
    );
  }

    // 选择日期
  selectDate(value, index, i) {
    const _this = this;
    if (value.code !== '') {
      if (this.state.lineId && this.state.stationId) {
        this.setState({
          positionList: [],
        });
        const tempDateList = this.state.dateList;
        let selectedMonth;
        let selectedDay;
        if (this.state.selectedMonth + 1 < 10) {
          selectedMonth = `0${this.state.selectedMonth + 1}`;
        } else {
          selectedMonth = this.state.selectedMonth + 1;
        }
        if (value.value < 10) {
          selectedDay = `0${value.value}`;
        } else {
          selectedDay = value.value;
        }
        const publishDate = `${this.state.currentYear}-${selectedMonth}-${selectedDay}`;
        for (let m = 0; m < tempDateList.length; m++) {
          for (let n = 0; n < tempDateList[m].length; n++) {
            tempDateList[m][n].select = false;
            if (m === tempDateList.length - 1 && n === tempDateList[m].length - 1) {
              tempDateList[i][index].select = true;
              this.setState({
                dateList: tempDateList,
                selectedDate: [this.state.currentYear, selectedMonth, selectedDay],
              });
            }
          }
        }
        const tempTimeSlotList = [];
        const tempTimeAndPosition = {};
        const recordList = this.state.recordList;
        recordList.map(function (ele, idx) {
          if (ele.lineId === _this.state.lineId && ele.stationId === _this.state.stationId && ele.publishDate === publishDate) {
            if (ele.postDetail.length > 0) {
              ele.postDetail.map(function (value, index) {
                if (!tempTimeAndPosition[`${value.startTime} - ${value.endTime}`]) {
                  tempTimeAndPosition[`${value.startTime} - ${value.endTime}`] = [];
                }
                if (tempTimeAndPosition[`${value.startTime} - ${value.endTime}`].indexOf({ postId: ele.postId, postName: ele.postName }) === -1) {
                  tempTimeAndPosition[`${value.startTime} - ${value.endTime}`].push({ postId: ele.postId, postName: ele.postName });
                }
                if (tempTimeSlotList.indexOf(`${value.startTime} - ${value.endTime}`) === -1) {
                  tempTimeSlotList.push(`${value.startTime} - ${value.endTime}`);
                }
                if (index === ele.postDetail.length - 1 && idx === recordList.length - 1) {
                  _this.setState({
                    timeSlotList: tempTimeSlotList,
                    timeAndPosition: tempTimeAndPosition,
                  });
                }
              });
            } else if (idx === recordList.length - 1) {
              _this.setState({
                timeSlotList: tempTimeSlotList,
                timeAndPosition: tempTimeAndPosition,
              });
            }
          } else if (idx === recordList.length - 1) {
            _this.setState({
              timeSlotList: tempTimeSlotList,
              timeAndPosition: tempTimeAndPosition,
            });
          }
        });
      } else {
        xnToast('请先选择位置');
      }
    } else {
      xnToast('当天没有志愿服务，请重新选择');
    }
  }

    // 要显示的日期
  renderDateCell(value, index, i) {
    return (
      <TouchableOpacity activeOpacity={0.8} style={styles.dateBtn} onPress={() => value.value !== ' ' ? this.selectDate(value, index, i) : null} key={index}>
        {value.code == '1' && <View style={styles.redWrap}>
          <Text style={{ fontSize: 12, color: '#F5F5F5' }}>待参加</Text>
        </View>}
        {this.state.selectedMonth < this.state.currentMonth && <Text style={{ fontSize: 14, color: value.code == '1' ? '#F6F6F6' : '#C3C3C3' }}>{value.value}</Text> }
        {this.state.selectedMonth === this.state.currentMonth && value.value < new Date().getDate() && <Text style={{ fontSize: 14, color: value.code == '1' ? '#F6F6F6' : '#C3C3C3' }}>{value.value}</Text>}
        {this.state.selectedMonth === this.state.currentMonth && value.value >= new Date().getDate() && <Text style={{ fontSize: 14, color: value.code == '1' ? '#F6F6F6' : '#7B7B7B' }}>{value.value}</Text>}
        {this.state.selectedMonth > this.state.currentMonth && <Text style={{ fontSize: 14, color: value.code == '1' ? '#F6F6F6' : '#7B7B7B' }}>{value.value}</Text>}
        {value.code == '0' && <View style={styles.greenDot} />}
        {value.select && <Image source={require('../../img/selectDate.png')} style={{ width: 28 / zoomW, height: 28 / zoomH, position: 'absolute' }} resizeMode="contain" />}
      </TouchableOpacity>
    );
  }

  // 要显示的日期行
  renderDateRow(v, i) {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center' }} key={i}>
        {v.map((value, index) => this.renderDateCell(value, index, i))}
      </View>
    );
  }

  // 选择时间段
  selectTimeSlot(v, i) {
    const timeAndPosition = this.state.timeAndPosition;
    this.setState({
      positionList: timeAndPosition[v],
    });
  }

  // 时间段
  renderTimeSlot(v, i) {
    return (
      <TouchableOpacity activeOpacity={0.8} style={styles.timeRange} key={i} onPress={() => this.selectTimeSlot(v, i)}>
        <Text style={{ fontSize: 14, color: '#747474' }}>{v}</Text>
      </TouchableOpacity>
    );
  }

    // 选择服务岗位
  selectPosition(v, i) {
    console.log(v, '------------------');
  }

    // 服务岗位
  renderPosition(v, i) {
    return (
      <TouchableOpacity activeOpacity={0.8} style={{ height: 44 / zoomH, justifyContent: 'center' }} key={i} onPress={() => this.selectPosition(v, i)}>
        <Text style={{ fontSize: 14, color: '#2C2C2C' }}>{v.postName}</Text>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={styles.background}>
        <Modal
          animationType="none"
          transparent
          visible={this.state.loading}
          onRequestClose={() => {}}
        >
          <View style={styles.loadingBg}>
            <ActivityIndicator size="large" />
          </View>
        </Modal>
        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
          <View style={styles.positionWrap}>
            <View style={{ width: 75 / zoomW }}>
              <Text style={{ fontSize: 14, color: '#373737' }}>位置：</Text>
            </View>
            {(this.state.lineId && this.state.stationId) ? <TouchableOpacity activeOpacity={0.8} style={{ width: 300 / zoomW, height: '100%', flexDirection: 'row', alignItems: 'center' }} onPress={() => this.props.navigation.navigate('TwoLevelScreen', { name: 'TwoLevelScreen', callback: this.chooseLineAndStation, title: '选择位置', selectedList: this.state.lineAndStation, recordList: this.state.recordList })}>
              <Text style={{ fontSize: 14, color: '#000' }}>{Number(this.state.lineId)}</Text>
              <Text style={{ fontSize: 14, color: '#424242', marginRight: 14 / zoomW }}>  号线</Text>
              <Text style={{ fontSize: 14, color: '#000' }}>{this.state.stationName}</Text>
              <Text style={{ fontSize: 14, color: '#424242' }}> 站台</Text>
            </TouchableOpacity> : <TouchableOpacity activeOpacity={0.8} style={{ width: 300 / zoomW, height: '100%', justifyContent: 'center' }} onPress={() => this.props.navigation.navigate('TwoLevelScreen', { name: 'TwoLevelScreen', callback: this.chooseLineAndStation, title: '选择位置', selectedList: this.state.lineAndStation, recordList: this.state.recordList })}>
              <Text style={{ fontSize: 14, color: '#424242' }}>请选择</Text>
            </TouchableOpacity>}
          </View>
          <View style={[styles.dateWrap, { marginBottom: this.state.timeSlotList.length > 0 ? 10 / zoomH : 0 }]}>
            <View style={styles.topWrap}>
              <View style={styles.yearWrap}>
                <Text style={{ fontSize: 16, color: '#4B85E0' }}>{this.state.currentYear} 年</Text>
              </View>
              <View style={styles.gap} />
              <View style={styles.topMonthWrap} {...this._panResponder.panHandlers}>
                {this.state.topMonthList.map((v, i) => this.renderTopMonth(v, i))}
              </View>
            </View>
            <View style={{ paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }}>
              <View style={{ width: '100%', height: 1 / zoomH, backgroundColor: '#F6F6F6' }} />
            </View>
            <View style={styles.bottomWrap}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>日</Text>
                </View>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>一</Text>
                </View>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>二</Text>
                </View>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>三</Text>
                </View>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>四</Text>
                </View>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>五</Text>
                </View>
                <View style={styles.weekWrap}>
                  <Text style={{ fontSize: 14, color: '#C3C3C3' }}>六</Text>
                </View>
              </View>
              {this.state.dateList.map((v, i) => this.renderDateRow(v, i))}
            </View>
          </View>
          {this.state.timeSlotList.length > 0 && <View style={styles.timeSlotWrap}>
            <Text style={{ fontSize: 14, color: '#373737', marginTop: 10 / zoomH }}>时间段：</Text>
            <View style={{ marginLeft: 11 / zoomW }}>
              {this.state.timeSlotList.map((v, i) => this.renderTimeSlot(v, i))}
            </View>
            </View>}
          {this.state.positionList.length > 0 && <View style={styles.serviceWrap}>
            <View style={{ width: 75 / zoomW, height: 44 / zoomH, justifyContent: 'center' }}>
              <Text style={{ fontSize: 14, color: '#373737' }}>服务岗位：</Text>
            </View>
            <View style={{ width: 300 / zoomW }}>
              {this.state.positionList.map((v, i) => this.renderPosition(v, i))}
            </View>
            </View>}
          <View style={styles.btnWrap}>
            <TouchableOpacity activeOpacity={0.8} style={styles.signUpBtn}>
              <Text style={{ fontSize: 18, color: '#fff' }}>报名</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    height: 44 / zoomH,
  },
  background: {
    flex: 1,
    backgroundColor: '#F6F6F6',
    position: 'relative',
  },
  dateWrap: {
    width: '100%',
    marginTop: 10 / zoomH,
    backgroundColor: '#fff',
  },
  topWrap: {
    width: '100%',
    height: 44 / zoomH,
    flexDirection: 'row',
    alignItems: 'center',
  },
  yearWrap: {
    width: 98 / zoomW,
    height: '100%',
    justifyContent: 'center',
    paddingLeft: 30 / zoomW,
  },
  gap: {
    width: 1 / zoomW,
    height: 20 / zoomH,
    backgroundColor: '#E6E6E6',
  },
  topMonthWrap: {
    width: 276 / zoomW,
    height: '100%',
    backgroundColor: 'transparent',
    flexDirection: 'row',
  },
  monthBtn: {
    width: 276 / 5 / zoomW,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  monthWrap: {
    paddingLeft: 5 / zoomW,
    paddingRight: 5 / zoomW,
    borderRadius: 4 / zoomW,
  },
  bottomWrap: {
    width: '100%',
    paddingBottom: 8 / zoomH,
  },
  weekWrap: {
    paddingTop: 7 / zoomH,
    paddingBottom: 7 / zoomH,
    width: 375 / 7 / zoomW,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dateBtn: {
    width: 375 / 7 / zoomW,
    height: 50 / zoomH,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  greenDot: {
    width: 5 / zoomW,
    height: 5 / zoomW,
    borderRadius: 5 / 2 / zoomW,
    backgroundColor: '#40D06C',
    position: 'absolute',
    bottom: 10 / zoomH,
  },
  redWrap: {
    height: 37 / zoomH,
    borderRadius: 4 / zoomW,
    backgroundColor: '#FF1818',
    paddingLeft: 1 / zoomW,
    paddingRight: 1 / zoomW,
    paddingBottom: 4 / zoomH,
    justifyContent: 'flex-end',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0,
  },
  timeSlotWrap: {
    width: '100%',
    paddingLeft: 30 / zoomW,
    paddingBottom: 14 / zoomH,
    backgroundColor: '#fff',
    flexDirection: 'row',
  },
  timeRange: {
    width: 140 / zoomW,
    height: 20 / zoomH,
    borderWidth: 1,
    borderColor: '#D1D1D1',
    borderRadius: 4 / zoomW,
    marginTop: 13 / zoomH,
    justifyContent: 'center',
    alignItems: 'center',
  },
  positionWrap: {
    width: '100%',
    height: 44 / zoomH,
    paddingLeft: 30 / zoomW,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10 / zoomH,
  },
  serviceWrap: {
    width: '100%',
    paddingLeft: 30 / zoomW,
    backgroundColor: '#fff',
    flexDirection: 'row',
    marginTop: 10 / zoomH,
  },
  btnWrap: {
    width: '100%',
    height: 49 / zoomH,
    paddingLeft: 30 / zoomW,
    paddingRight: 30 / zoomW,
    marginTop: 15 / zoomH,
    marginBottom: 15 / zoomH,
  },
  signUpBtn: {
    width: '100%',
    height: '100%',
    backgroundColor: '#538AE1',
    borderRadius: 4 / zoomW,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingBg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});