customer / shanghai-railway-rnapp

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

export default class myContribution 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}>
        <Text style={{ fontSize: 13, color: '#4B85E0' }}>查看详情</Text>
      </TouchableOpacity>
        ),
  });

  constructor(props) {
    super(props);
    this.state = {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      selectedMonth: new Date().getMonth(),
      topMonthList: [],
      dateList: [],
      loading: false,
    };
  }

  componentWillMount() {
    this.initTopMonth(this.state.currentMonth);
    this.initDate(this.state.currentYear, this.state.currentMonth);
  }

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

  // 初始化展示月份
  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 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(' ');
    }
    for (let date = 1; date <= dayInMonth; date++) {
      list.push(date);
    }
      // 补齐后面的日期
    for (let j = lastDayWeekDay + 1; j < 7; j++) {
      list.push(' ');
    }
    // 将要显示的所有天分成小数组
    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,
        });
      }
    }
  }

  // 选择月份
  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) {

  }

    // 要显示的日期
  renderDateCell(value, index) {
    return (
      <TouchableOpacity activeOpacity={0.8} style={styles.dateBtn} onPress={() => this.selectDate(value, index)} key={index}>
        {/* {value !== ' ' && <View style={styles.redWrap}>*/}
        {/* <Text style={{ fontSize: 12, color: '#F5F5F5' }}>待参加</Text>*/}
        {/* </View>}*/}
        {this.state.selectedMonth < this.state.currentMonth && <Text style={{ fontSize: 14, color: '#C3C3C3' }}>{value}</Text> }
        {this.state.selectedMonth === this.state.currentMonth && value < new Date().getDate() && <Text style={{ fontSize: 14, color: '#C3C3C3' }}>{value}</Text>}
        {this.state.selectedMonth === this.state.currentMonth && value >= new Date().getDate() && <Text style={{ fontSize: 14, color: '#7B7B7B' }}>{value}</Text>}
        {this.state.selectedMonth > this.state.currentMonth && <Text style={{ fontSize: 14, color: '#7B7B7B' }}>{value}</Text>}
        {/* {value !== ' ' && <View style={styles.greenDot} />}*/}
      </TouchableOpacity>
    );
  }

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

  render() {
    return (
      <View style={styles.background}>
        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
          <View style={styles.dateWrap}>
            <View style={styles.topWrap}>
              <Text style={{ fontSize: 16, color: '#4B85E0', marginLeft: 15 / zoomW, marginRight: 14 / zoomW }}>{this.state.currentYear} 年</Text>
              <View style={styles.gap} />
              {this.state.topMonthList.map((v, i) => this.renderTopMonth(v, i))}
            </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>
          <View style={styles.infoWrap}>
            <View style={styles.timeSlotWrap}>
              <Text style={{ fontSize: 14, color: '#686868', marginTop: 10 / zoomH }}>时间段：</Text>
              <View style={{ marginLeft: 11 / zoomW }}>
                <View style={styles.timeRange}>
                  <Text style={{ fontSize: 14, color: '#747474' }}>08 : 30  - 10 : 00</Text>
                </View>
                <View style={styles.timeRange}>
                  <Text style={{ fontSize: 14, color: '#747474' }}>13 : 30  - 14 : 00</Text>
                </View>
              </View>
            </View>
            <View style={styles.positionWrap}>
              <Text style={{ fontSize: 14, color: '#686868' }}>位置：</Text>
              <View style={{ marginLeft: 26 / zoomW, flexDirection: 'row' }}>
                <TouchableOpacity activeOpacity={0.8} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', marginRight: 14 / zoomW }}>
                  <Text style={{ fontSize: 14, color: '#000' }}>1<Text style={{ color: '#424242' }}>  号线</Text></Text>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} style={{ height: '100%', flexDirection: 'row', alignItems: 'center' }}>
                  <Text style={{ fontSize: 14, color: '#000' }}>徐家汇<Text style={{ color: '#424242' }}> 站台</Text></Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.positionWrap}>
              <Text style={{ fontSize: 14, color: '#686868' }}>服务岗位：</Text>
              <View style={{ marginLeft: 4 / zoomW }}>
                <TouchableOpacity activeOpacity={0.8} style={{ height: '100%', justifyContent: 'center' }}>
                  <Text style={{ fontSize: 14, color: '#2C2C2C' }}>1号向下自动扶梯</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <View style={styles.btnWrap}>
            <TouchableOpacity activeOpacity={0.8} style={styles.signUpBtn}>
              <Text style={{ fontSize: 18, color: '#fff' }}>报名</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
        {this.state.loading && <View style={styles.loadingBg}>
          <ActivityIndicator size="large" />
        </View>}
      </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,
    paddingLeft: 15 / zoomW,
    flexDirection: 'row',
    alignItems: 'center',
  },
  gap: {
    width: 1 / zoomW,
    height: 20 / zoomH,
    backgroundColor: '#E6E6E6',
  },
  monthBtn: {
    height: '100%',
    justifyContent: 'center',
    paddingLeft: 9 / zoomW,
    paddingRight: 9 / zoomW,
  },
  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: {
    paddingTop: 10 / zoomH,
    paddingBottom: 10 / zoomH,
    width: 375 / 7 / zoomW,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  greenDot: {
    width: 5 / zoomW,
    height: 5 / zoomW,
    borderRadius: 5 / 2 / zoomW,
    backgroundColor: '#40D06C',
    position: 'absolute',
    bottom: 5 / 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: -5 / zoomH,
  },
  infoWrap: {
    width: '100%',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    paddingTop: 10 / zoomH,
  },
  timeSlotWrap: {
    width: '100%',
    minHeight: 80 / zoomH,
    paddingLeft: 14 / zoomW,
    paddingBottom: 14 / zoomH,
    backgroundColor: '#fff',
    borderRadius: 4 / zoomW,
    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: 14 / zoomW,
    backgroundColor: '#fff',
    borderRadius: 4 / zoomW,
    flexDirection: 'row',
    alignItems: 'center',
    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',
  },
});