occ-mobile/app/containers/order/ordertoptab/deliverysign/DeliverySign.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Dimensions,
  PixelRatio,
  TouchableOpacity,
  Text,
  FlatList,
  ScrollView,
  ImageBackground,
  RefreshControl,
  ActivityIndicator,
} from 'react-native'
import { connect } from 'react-redux'
import png from '../../../../static/images/defaultimg.jpg'
import Icon from '../../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../../utils'
import { ReturnDate } from '../../../../utils/utils'
import signPng from '../../../../static/images/signed.png'
import EmptyOrder from '../../../../static/images/Empty-order.png'
import { ImageBaseUrl } from '../../../../utils/fetch/Fetchx'

const { width, height } = Dimensions.get('window')
@connect(({ theme, ordersign }) => ({ ...theme, ...ordersign }))
class DeliverySign extends Component {
  constructor() {
    super()
    this.state = {
      activeSection: 'suibianshuru',
      setButton: 0,
      isRefreshing: false,
      Loading: false,
      SubmitLoad: false,
    }
    this.page = 0
    this.size = 5
  }

  componentDidMount = () => {
    this.onRefresh()
  }

  onRefresh() {
    this.props.dispatch(
      createAction('ordersign/getSignList')({
        signData: [],
        pageInfo: { page: 0, size: this.size },
        searchInfo: {
          search_EQ_customerId: CUSTOMERINFO.id,
        },
      })
    )
    this.page = 0
  }

  gotoDetail = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
  }

  _toggle(key) {
    if (this.state.activeSection == key) {
      this.setState({ activeSection: key + 'asd' })
    } else {
      this.setState({ activeSection: key })
    }
  }

  async submitSign(data) {
    this.props.dispatch(
      createAction('ordersign/getSignDetail')({
        saleOutOrderId: data.id,
        confirmCb: () => this.onRefresh(),
      })
    )

    // this.setState({ SubmitLoad: true });
    // data.saleOutOrderItemInfoDtos.map(item => {
    //   item.signNum = item.mainNum;
    //   item.persistStatus = "upd";
    // });
    // const result = await authService.confirmSign(data.saleOutOrderItemInfoDtos);
    // if (result && result.status == "200") {
    //   this.onRefresh();
    // }
    // this.setState({ SubmitLoad: false });
  }

  // 订单列表Render
  topOrderRender(item, index) {
    let imageArr = [],
      imalength = item.goodsImgs.length,
      signState = false
    if (
      item.saleOutOrderItemInfoDtos.some(
        data => !data.signNum || (data.signNum && data.signNum <= 0)
      )
    ) {
      signState = true
    }
    if (imalength.length > 3) {
      imalength = 3
    }
    for (let i = 0; i < imalength; i++) {
      imageArr.push(
        <Image
          key={i}
          style={{ width: 60, height: 60, marginRight: 10 }}
          source={
            item.goodsImgs[i] ? { uri: ImageBaseUrl + item.goodsImgs[i] } : png
          }
        />
      )
    }
    return (
      <View style={{ marginTop: 10, backgroundColor: '#fff' }}>
        <View
          // activeOpacity={item && item.c == "unsigned" ? 0 : 1}
          // onPress={() => {
          // item && item.c == "unsigned"
          // ?

          // : null;
          // }}
          style={{
            paddingHorizontal: 10,
          }}
        >
          {/* 订单信息栏 */}
          <View
            style={{
              paddingVertical: 6,
              flexDirection: 'row',
              justifyContent: 'space-between',
              backgroundColor: '#fafafa',
            }}
          >
            <Text style={styles.CardText666}>发货编号：{item.billCode}</Text>
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                letterSpacing: 0.14,
                color: '#666',
              }}
            >
              {ReturnDate(item.billDate)}
            </Text>
          </View>
          <View
            style={{
              paddingVertical: 10,
              borderBottomColor: '#EEE',
              borderBottomWidth: 1 / PixelRatio.get(),
              flexDirection: 'row',
            }}
          >
            <View
              style={{
                flex: 6,
                flexDirection: 'row',
              }}
            >
              {imageArr}
              {/* {imageArr.length > 3 ? imageArr.slice(0, 3) : imageArr} */}
              {imalength > 3 ? (
                <Text style={[styles.CardText999, { alignSelf: 'center' }]}>
                  ......
                </Text>
              ) : null}
            </View>
            <View
              style={{
                flex: 2,
                paddingRight: 7,
              }}
            >
              <View style={{ flex: 1, justifyContent: 'center' }}>
                <Text style={[styles.CardTextPrice, { alignSelf: 'flex-end' }]}>
                  {item.totalAssistNum}
                  {/* <Text
                    style={{
                      fontSize: 12,
                      lineHeight: 22,
                      letterSpacing: 0.19,
                      color: "#151515"
                    }}
                  >
                    件
                  </Text> */}
                </Text>
              </View>
              {signState ? null : (
                // {item.billStatusCode == "unsigned" ? null : (
                <View
                  style={{
                    position: 'absolute',
                    left: 0,
                    top: 10,
                  }}
                >
                  <Image
                    resizeMode={'contain'}
                    source={signPng}
                    style={{
                      width: 55,
                      height: 45,
                    }}
                  />
                </View>
              )}
            </View>
          </View>
        </View>

        {/* 签收栏 */}
        {signState ? (
          // {item.billStatusCode == "unsigned" ? (
          <View
            style={{
              padding: 10,
              flexDirection: 'row',
              justifyContent: 'space-between',
              borderTopColor: '#EEE',
              borderTopWidth: 1,
            }}
          >
            <Text style={[styles.CardText333, { alignSelf: 'center' }]}>
              {signState ? '未签收' : '已签收'}
              {/* {item.billStatusName} */}
            </Text>
            <TouchableOpacity
              onPress={() => this.submitSign(item)}
              style={{
                paddingHorizontal: 18,
                paddingVertical: 4,
                backgroundColor: '#E14C46',
                borderRadius: 100,
              }}
            >
              <Text style={styles.CardTextFFF}>签收</Text>
            </TouchableOpacity>
          </View>
        ) : null}
      </View>
    )
  }

  setTouch(index) {
    this.setState({ setButton: index })
  }

  // 订单按钮组
  setList() {
    let textColor = ['#999', '#E14C46']
    let border = ['transparent', '#E14C46']
    setArr = []
    const setAtt = [
      { touchName: '全部' },
      { touchName: '未签收' },
      { touchName: '已签收' },
    ]
    for (let j = 0; j < setAtt.length; j++) {
      setArr.push(
        <TouchableOpacity
          onPress={() => {
            this.setTouch(j)
          }}
          key={j}
          style={{ justifyContent: 'center' }}
        >
          <Text
            style={{
              fontSize: 13,
              lineHeight: 18,
              color: this.state.setButton == j ? textColor[1] : textColor[0],
            }}
          >
            {setAtt[j].touchName}
          </Text>
          <View
            style={{
              height: 2,
              backgroundColor:
                this.state.setButton == j ? border[1] : border[0],
              marginTop: 3,
            }}
          />
        </TouchableOpacity>
      )
    }
    return setArr
  }

  // 底部
  footerCom() {
    if (this.props.showFoot == 0) {
      return <View />
    } else if (this.props.showFoot == 1) {
      return (
        <View style={styles.footer}>
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#999',
            }}
          >
            没有更多数据
          </Text>
        </View>
      )
    } else if (this.props.showFoot == 2) {
      return (
        <View style={styles.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      )
    }
  }

  render() {
    const { signData, totalPages } = this.props
    return (
      <View tabLabel={this.props.tabLabel} style={styles.container}>
        {/* <View
          style={{
            height: 35,
            backgroundColor: "#FFF",
            flexDirection: "row",
            justifyContent: "space-around"
          }}
        >
          {this.setList()}
        </View> */}
        {signData && signData.length > 0 ? (
          this.state.Loading ? (
            <View style={styles.footer}>
              <ActivityIndicator />
            </View>
          ) : (
            <FlatList
              keyExtractor={(item, index) => index}
              data={signData}
              extraData={this.state}
              renderItem={({ item, index }) => this.topOrderRender(item, index)}
              ListFooterComponent={this.footerCom.bind(this)}
              // initialNumToRender={5}
              onEndReachedThreshold={0.1}
              onEndReached={e => {
                if (this.props.showFoot != 0) {
                  return
                }
                if (this.page != 1 && this.page >= totalPages) {
                  return
                } else {
                  this.page++
                }
                this.props.dispatch(
                  createAction('ordersign/getSignList')({
                    signData: signData,
                    pageInfo: { page: this.page, size: this.size },
                    forUse: 'slipOn',
                    searchInfo: {
                      search_EQ_customerId: CUSTOMERINFO.id,
                    },
                  })
                )
              }}
              refreshControl={
                <RefreshControl
                  refreshing={this.props.isRefreshing}
                  onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                  tintColor="red"
                  title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
                />
              }
            />
          )
        ) : (
          <ScrollView
            showsHorizontalScrollIndicator={false}
            style={{ flex: 1 }}
            refreshControl={
              <RefreshControl
                refreshing={this.props.isRefreshing}
                onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
              />
            }
          >
            <ImageBackground
              resizeMode="contain"
              source={EmptyOrder}
              style={{
                width: width - 80,
                height: height / 1.5,
                alignSelf: 'center',
              }}
            >
              <View
                style={{
                  position: 'absolute',
                  bottom: '15%',
                  alignSelf: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: '#999',
                  }}
                >
                  您还没有相关订单~
                </Text>
              </View>
            </ImageBackground>
          </ScrollView>
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  CardText999: {
    fontSize: 13,
    lineHeight: 17,
    letterSpacing: 0.14,
    color: '#999',
  },
  CardText333: {
    fontSize: 13,
    lineHeight: 17,
    letterSpacing: 0.14,
    color: '#333',
  },
  CardText666: {
    fontSize: 13,
    lineHeight: 17,
    letterSpacing: 0.14,
    color: '#666',
  },
  CardTextFFF: {
    fontSize: 13,
    lineHeight: 17,
    letterSpacing: 0.14,
    color: '#FFF',
  },
  CardTextPrice: {
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: 0.19,
    color: '#E14C46',
  },
  footer: {
    flex: 1,
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 10,
  },
})

export default DeliverySign