occ-mobile/app/containers/home/AnnouncementTab.js

import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Image,
  ImageBackground,
  Text,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  PixelRatio,
  Platform,
  DatePickerAndroid,
} from 'react-native'
import { connect } from 'react-redux'

import Icon from '../../components/Iconfont/Iconfont'
import TopTab from '../../components/toptab/TopTab'
import { NavigationActions, ScaleUtil, createAction } from '../../utils'
import Collapsible from 'react-native-collapsible'
import SelectTime from '../common/SelectTime'
import Input from '../../components/input'

import AllAnnounce from './announcement/AllAnnounce'
import { setNowFormatDate } from '../../utils/utils'

const { width, height } = Dimensions.get('window')

@connect(({ theme, announce }) => ({ ...theme, ...announce }))
class AnnouncementTab extends Component {
  constructor(props) {
    const date = new Date()
    super(props)
    this.state = {
      setButton: 0,
      inputSearch: '',
      dateActive: true, //时间折叠-true为关
      typeId: '',
      // 开始时间
      startTime: setNowFormatDate(true),
      // 结束时间
      endTime: setNowFormatDate(),
    }
    this.startTime = ''
    this.endTime = ''
    // console.disableYellowBox = true;
  }

  componentDidMount() {
    this.topTouchFn()
  }

  topTouchFn() {
    let searchInfo = {
      page: 0,
      pageSize: 20,
      customerId: CUSTOMERINFO.id,
      search_EQ_statusCode: 2,
      search_EQ_pubdate: 1,
    }
    if (this.state.typeId) {
      searchInfo['search_EQ_bulletin.id'] = this.state.typeId
    }
    if (this.startTime) {
      searchInfo.search_GTE_pubdate_date = new Date(this.startTime).getTime()
    }
    if (this.endTime) {
      searchInfo.search_LT_pubdate_date = new Date(this.endTime).getTime()
    }
    if (this.state.inputSearch) {
      searchInfo.search_LIKE_title = `%${this.state.inputSearch}%`
    }

    this.props.dispatch(createAction('announce/getAnnounceContent')(searchInfo))
  }

  // 订单按钮组
  setList(setAtt) {
    let textColor = ['#333', '#E14C46']
    let border = ['transparent', '#E14C46']
    setArr = []
    // const setAtt = [
    //   { touchName: "全部" },
    //   { touchName: "物流" },
    //   { touchName: "促销" },
    //   { touchName: "新品" },
    //   { touchName: "企业动态" }
    // ];
    for (let j = 0; j < setAtt.length; j++) {
      setArr.push(
        <TouchableOpacity
          onPress={() => {
            this.state.typeId = setAtt[j].noticeType
            this.topTouchFn()
            this.setState({ setButton: j })
          }}
          key={j}
          style={{ justifyContent: 'center' }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 18,
              color: this.state.setButton == j ? textColor[1] : textColor[0],
            }}
          >
            {setAtt[j].noticeTypeName}
          </Text>
          <View
            style={{
              height: 2,
              backgroundColor:
                this.state.setButton == j ? border[1] : border[0],
              marginTop: 3,
            }}
          />
        </TouchableOpacity>
      )
    }
    return setArr
  }

  selectTimeFn() {
    return (
      <View
        style={{
          position: 'absolute',
          top: 61,
          left: 0,
          width: width,
          backgroundColor: '#FFF',
        }}
      >
        <Collapsible collapsed={this.state.dateActive}>
          <View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                padding: 20,
                marginBottom: 20,
              }}
            >
              <View>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#333',
                    alignSelf: 'center',
                  }}
                >
                  开始时间
                </Text>
                <TouchableOpacity
                  onPress={() =>
                    Platform.OS == 'ios'
                      ? this.showTime._openModal('start')
                      : this.TimeAndroid('start')
                  }
                  style={{
                    paddingHorizontal: 40,
                    paddingVertical: 7,
                    marginTop: 16,
                    borderColor: '#DDD',
                    borderWidth: 1,
                    borderRadius: 100,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 13,
                      lineHeight: 18,
                      letterSpacing: 0.16,
                      color: '#333',
                    }}
                  >
                    {this.state.startTime}
                  </Text>
                </TouchableOpacity>
              </View>
              <View style={{ paddingTop: 37 }}>
                <Text
                  style={{
                    fontSize: 18,
                    lineHeight: 25,
                    letterSpacing: 0.22,
                    color: '#333',
                  }}
                >
                  ~
                </Text>
              </View>
              <View>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#333',
                    alignSelf: 'center',
                  }}
                >
                  结束时间
                </Text>
                <TouchableOpacity
                  onPress={() =>
                    Platform.OS == 'ios'
                      ? this.showTime._openModal('end')
                      : this.TimeAndroid('end')
                  }
                  style={{
                    paddingHorizontal: 40,
                    paddingVertical: 7,
                    marginTop: 16,
                    borderColor: '#DDD',
                    borderWidth: 1,
                    borderRadius: 100,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 13,
                      lineHeight: 18,
                      letterSpacing: 0.16,
                      color: '#333',
                    }}
                  >
                    {this.state.endTime}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ height: 40, flexDirection: 'row' }}>
              <TouchableOpacity
                onPress={() =>
                  this.setState({
                    dateActive: true,
                    startTime: this.startTime,
                    endTime: this.endTime,
                  })
                }
                style={{
                  width: width / 2,
                  backgroundColor: '#FFF',
                  justifyContent: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 22,
                    letterSpacing: 0.21,
                    color: '#333',
                    alignSelf: 'center',
                  }}
                >
                  取消
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  this.startTime = this.state.startTime
                  this.endTime = this.state.endTime
                  this.topTouchFn()
                  this.setState({ dateActive: true })
                }}
                style={{
                  width: width / 2,
                  backgroundColor: '#E70013',
                  justifyContent: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 22,
                    letterSpacing: 0.21,
                    color: '#FFF',
                    alignSelf: 'center',
                  }}
                >
                  确定
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </Collapsible>
      </View>
    )
  }

  // 头部
  header() {
    return (
      <View
        style={{
          // height: 60,
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          // paddingTop: 15,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{
              position: 'absolute',
              left: 10,
              flexDirection: 'row',
            }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              size={20}
              color={'#666'}
              style={{ marginTop: 4 }}
            />
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              返回
            </Text>
          </TouchableOpacity>
          {this.state.showSearch ? (
            <Input
              autoFocus={this.state.showSearch}
              style={{
                marginLeft: 25,
                marginTop: 8,
                height: 28,
                width: width / 1.6,
                borderRadius: width / 2,
                alignSelf: 'center',
                marginBottom: 8,
                paddingLeft: 14,
              }}
              textStyle={{
                paddingLeft: 10,
                height: 32,
                fontSize: 11,
                padding: 0,
              }}
              iconSize={14}
              blurOnSubmit={true}
              textInputBacg={'#F5F5F5'}
              iconColor={'#CCC'}
              placeholderTextColor={'#CCC'}
              placeholderSize={8}
              onchangeFn={e => {
                this.state.inputSearch = e
                this.topTouchFn()
                this.setState({ activeSection: true })
              }}
            />
          ) : (
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.19,
                color: '#333',
              }}
            >
              公告
            </Text>
          )}
          {this.state.showSearch ? (
            <TouchableOpacity
              onPress={() =>
                this.setState({ showSearch: false, activeSection: true })
              }
              style={{ position: 'absolute', right: 10, flexDirection: 'row' }}
            >
              <Text style={{ fontSize: 14, lineHeight: 20, color: '#666' }}>
                取消
              </Text>
            </TouchableOpacity>
          ) : (
            <View
              style={{ position: 'absolute', right: 10, flexDirection: 'row' }}
            >
              <TouchableOpacity
                style={{ marginRight: 10 }}
                onPress={() =>
                  this.setState({
                    showSearch: true,
                    activeSection: true,
                    dateActive: true,
                  })
                }
              >
                <Icon name="icon-icon-sousuo" size={24} color={'#666'} />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  this.setState({
                    dateActive: !this.state.dateActive,
                    activeSection: true,
                  })
                }
              >
                <Icon name="icon-icon-rili" size={24} color={'#666'} />
              </TouchableOpacity>
            </View>
          )}
        </View>
      </View>
    )
  }

  async TimeAndroid(mark) {
    const { action, year, month, day } = await DatePickerAndroid.open({
      date: new Date(),
      // minDate: new Date(),
      mode: 'spinner',
    })
    if (action !== DatePickerAndroid.dismissedAction) {
      let newDate = `${year}-${month + 1}-${day}`
      if (mark == 'start') {
        if (newDate <= this.state.endTime) {
          this.setState({
            startTime: newDate,
          })
        }
      } else if (mark == 'end') {
        if (this.state.startTime <= newDate) {
          this.setState({
            endTime: newDate,
          })
        }
      }
      // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
    }
  }

  render() {
    const { appTheme, announceDatas } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        {this.header()}
        {announceDatas && announceDatas.length > 1 ? (
          <View
            style={{
              height: 35,
              backgroundColor: '#FFF',
              flexDirection: 'row',
              justifyContent: 'space-around',
            }}
          >
            {this.setList(announceDatas)}
          </View>
        ) : null}
        <ScrollView style={{ flex: 1 }}>
          <AllAnnounce />
        </ScrollView>

        {/* 下拉遮罩 */}
        {!this.state.dateActive ? (
          <View
            style={{
              position: 'absolute',
              width: width,
              height: height,
              backgroundColor: '#000',
              opacity: 0.5,
              top: 101,
            }}
          />
        ) : null}

        {/* 时间弹窗 */}
        <SelectTime
          ref={showTime => (this.showTime = showTime)}
          cb={(date, mark) => {
            let newDate = moment(date).format('YYYY-MM-DD')

            if (mark == 'start') {
              if (newDate <= this.state.endTime) {
                this.setState({
                  startTime: newDate,
                })
              }
            } else if (mark == 'end') {
              if (this.state.startTime <= newDate) {
                this.setState({
                  endTime: newDate,
                })
              }
            }
          }}
        />

        {/* 时间选择下拉 */}
        {this.selectTimeFn()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  pngstyle: {
    width: width,
  },
  buttonStyle: {
    backgroundColor: 'transparent',
    flexDirection: 'column',
    alignItems: 'center',
  },
  buttonText: {
    marginTop: 9,
    fontSize: 14,
    color: '#FFF',
  },
})

export default AnnouncementTab