occ-mobile/app/containers/order/OrderHome.js

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

import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions } from '../../utils'
// import TopTab from "../../components/toptab/TopTab";
import SelectTime from '../common/SelectTime'
import Input from '../../components/input'

import Collapsible from 'react-native-collapsible'

import OrderList from './ordertoptab/orderlist/OrderList'
import DeliverySign from './ordertoptab/deliverysign/DeliverySign'
import ReturnSign from './ordertoptab/returnsign/ReturnSign'
import moment from 'moment'
import { setNowFormatDate } from '../../utils/utils'

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

@connect(({ theme ,orderlist}) => ({ ...theme,...orderlist }))
class OrderHome extends Component {
  constructor() {
    const date = new Date()
    super()
    this.state = {
      showSearch: false,
      titleActive: true,
      titleIndex: 0,
      title: '订单列表',
      inputSearch: '',
      dateActive: true, //时间折叠-true为关
      // 开始时间
      startTime: setNowFormatDate(true),
      // 结束时间
      endTime: setNowFormatDate(),
    }
    this.startTime = ''
    this.endTime = ''
  }
  static navigationOptions = {
    tabBarLabel: ({ tintColor }) => (
      <Text
        style={{
          alignSelf: 'center',
          marginBottom: 2,
          fontSize: 10,
          lineHeight: 14,
          letterSpacing: 0.12,
          color: tintColor,
        }}
      >
        订单
      </Text>
    ),
    tabBarIcon: ({ focused, tintColor }) =>
      tintColor == '#333' ? (
        <View style={{ paddingTop: 7 }}>
          <Icon name="icon-icon-dingdan" size={28} color={tintColor} />
        </View>
      ) : (
        <View style={{ paddingTop: 7 }}>
          <Icon name="icon-icon-dingdanxuanzhong" size={28} color={tintColor} />
        </View>
      ),
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.routerParams) {
      this.setState({
        title : '订单列表',
        titleIndex : 0,
        dateActive : true
      })
    }
  }

  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        {this.state.showSearch ? (
          <View
            style={{ flexDirection: 'row', justifyContent: 'center', flex: 1 }}
          >
            <Input
              autoFocus={this.state.showSearch}
              style={{
                marginLeft: 25,
                marginTop: 8,
                height: 28,
                width: width - 70,
                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}
              placeholder = {'请输入订单编号'}
              onchangeFn={e => {
                this.setState({ activeSection: true, inputSearch: e })
              }}
            />
            <TouchableOpacity
              onPress={() =>
                this.setState({ showSearch: false, dateActive: true })
              }
              style={{ alignSelf: 'center', paddingHorizontal: 10 }}
            >
              <Text style={{ fontSize: 14, lineHeight: 20, color: '#666' }}>
                取消
              </Text>
            </TouchableOpacity>
          </View>
        ) : (
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
            }}
          >
            <TouchableOpacity
              onPress={() =>
                !this.state.dateActive && !this.state.titleActive
                  ? this.setState({ dateActive: true })
                  : this.setState({ dateActive: false, titleActive: false })
              }
              style={{ flexDirection: 'row', justifyContent: 'center' }}
            >
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 17,
                  lineHeight: 25,
                  letterSpacing: 0.22,
                  color: '#333',
                }}
              >
                {this.state.title}
              </Text>
              <Icon
                name="icon-icon-xialaxiaosanjiao"
                size={16}
                color={'#666'}
                style={{ alignSelf: 'center' }}
              />
            </TouchableOpacity>
            <View
              style={{ position: 'absolute', right: 10, flexDirection: 'row' }}
            >
              <TouchableOpacity
                onPress={() =>
                  this.setState({ showSearch: true, dateActive: true })
                }
                style={{ marginRight: 10 }}
              >
                <Icon name="icon-icon-sousuo" size={20} color="#333" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  !this.state.dateActive && this.state.titleActive
                    ? this.setState({ dateActive: true })
                    : this.setState({ dateActive: false, titleActive: true })
                }
              >
                <Icon name="icon-icon-rili" size={20} color="#333" />
              </TouchableOpacity>
            </View>
          </View>
        )}
      </View>
    )
  }

  async TimeAndroid(mark) {
    const { action, year, month, day } = await DatePickerAndroid.open({
      date: new Date(),
      //maxDate: new Date(),
      mode: 'spinner',
    })
    if (action !== DatePickerAndroid.dismissedAction) {
      let newDate = `${year}-${(month + 1)<10?"0"+(month+1):(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,routerParams } = this.props
    let postList = {
      inputSearch: this.state.inputSearch,
      startTime: this.startTime,
      endTime: this.endTime,
    }
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />

        {/* 头部 */}

        {this.header()}

        {this.state.title == '订单列表' ? (
          <View style={{ flex: 1 }}>
            <OrderList
              Home_searchval={postList}
              tabLabel="订单列表/10"
              StateFilter={
                this.props.navigation.state.params &&
                Object.keys(this.props.navigation.state.params).indexOf(
                  'StateFilter'
                ) !== -1 &&
                this.props.navigation.state.params.StateFilter
                  ? this.props.navigation.state.params.StateFilter
                  : (routerParams?routerParams:null)
              }
              comefrom="orderList"
            />
          </View>
        ) : null}
        {this.state.title == '签收列表' ? (
          <View style={{ flex: 1 }}>
            <DeliverySign Home_searchval={postList} tabLabel="发货签收/7" />
          </View>
        ) : null}
        {this.state.title == '退货列表' ? (
          <View style={{ flex: 1 }}>
            <ReturnSign
              tabLabel="退货签收/0"
              comefrom="return"
              Home_searchval={postList}
            />
          </View>
        ) : null}

        {/* <TopTab>
          <OrderList tabLabel="订单列表/10" />
          <DeliverySign tabLabel="发货签收/7" />
          <ReturnSign tabLabel="退货签收/0" />
        </TopTab> */}

        {/* 下拉遮罩 */}
        {!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,
                })
              }
            }
          }}
        />

        {/* 时间选择下拉 */}
        <View
          style={{
            position: 'absolute',
            top: 61,
            left: 0,
            width: width,
            backgroundColor: '#FFF',
          }}
        >
          <Collapsible collapsed={this.state.dateActive}>
            {!this.state.titleActive ? (
              <View
                style={{
                  alignSelf: 'center',
                  paddingBottom: 10,
                  paddingRight: 15,
                }}
              >
                {['订单列表', '签收列表', '退货列表'].map((item, key) => (
                  <TouchableOpacity
                    onPress={() =>
                      this.setState({
                        titleIndex: key,
                        dateActive: true,
                        title: item,
                      })
                    }
                    key={key}
                    style={{ marginTop: 10 }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        lineHeight: 22,
                        color:
                          this.state.titleIndex == key ? '#E70013' : '#333',
                      }}
                    >
                      {item}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>
            ) : (
              <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.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>
      </View>
    )
  }
}

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

export default OrderHome