occ-mobile/app/containers/mine/viewlist/CustomerAddress.js

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

import Collapsible from 'react-native-collapsible'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'

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

@connect(({ theme, mine }) => ({ ...theme, ...mine }))
class CustomerAddress extends Component {
  constructor(props) {
    super(props)
    this.state = { collapsed: 'dsadsa' }
    // console.disableYellowBox = true;
  }

  // 头部
  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          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>
          <Text
            style={{
              alignSelf: 'center',
              fontSize: 18,
              lineHeight: 25,
              letterSpacing: 0.19,
              color: '#333',
            }}
          >
            客户收货地址
          </Text>
        </View>
      </View>
    )
  }

  AddressList(item) {
    return (
      <View
        style={{
          marginTop: 10,
          padding: 10,
          backgroundColor: '#FFF',
        }}
      >
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ flex: 1, paddingRight: 5 }} />
          <View style={{ flex: 16 }}>
            <Text
              style={{
                flex: 1,
                fontSize: 15,
                lineHeight: 21,
                color: '#333',
                fontWeight: '600',
              }}
            >
              {item.customerName}
            </Text>
          </View>
        </View>
        <View style={{ flex: 1, flexDirection: 'row', marginTop: 5 }}>
          <View style={{ flex: 1, paddingRight: 5 }}>
            <Icon
              name="icon-icon-dizhi"
              size={18}
              style={{ alignSelf: 'flex-end' }}
            />
          </View>
          <View style={{ flex: 16 }}>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#333' }}
            >
              {item.countryName +
                item.provinceCode +
                item.cityName +
                item.countyName +
                item.townName +
                item.detailAddr}
            </Text>
          </View>
        </View>
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            marginTop: 10,
            paddingLeft: 27,
          }}
        >
          <TouchableOpacity
            onPress={() =>
              this.state.collapsed == item.id
                ? this.setState({ collapsed: 'dsadsa' })
                : this.setState({ collapsed: item.id })
            }
            style={{ flex: 16, marginTop: 3, flexDirection: 'row' }}
          >
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                color: '#666',
                marginRight: 6,
              }}
            >
              联系人一：{item.firstReceiver}
            </Text>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              {item.firstReceiverPhone}
            </Text>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              {item.firstReceiverTel}
            </Text>
            <Icon
              name="icon-icon-xiala"
              size={14}
              color={'#666'}
              style={{ alignSelf: 'center' }}
            />
          </TouchableOpacity>
        </View>
        <Collapsible
          collapsed={item.id !== this.state.collapsed}
          align={'center'}
        >
          <View
            style={{
              flex: 16,
              marginTop: 7,
              marginLeft: 25,
              flexDirection: 'row',
            }}
          >
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                color: '#666',
                marginRight: 6,
              }}
            >
              联系人二：{item.secondReceiver}
            </Text>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              {item.secondReceiverPhone}
            </Text>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              {item.secondReceiverTel}
            </Text>
          </View>
          <View
            style={{
              flex: 16,
              marginTop: 7,
              marginLeft: 25,
              flexDirection: 'row',
            }}
          >
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                color: '#666',
                marginRight: 6,
              }}
            >
              联系人三：{item.thirdReceiver}
            </Text>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              {item.thirdReceiverPhone}
            </Text>
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#666' }}
            >
              {item.thirdReceiverTel}
            </Text>
          </View>
        </Collapsible>
      </View>
    )
  }

  render() {
    const { appTheme, AddressInfo } = 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()}
        <FlatList
          extraData={this.state.collapsed}
          keyExtractor={(item, index) => index}
          data={AddressInfo}
          renderItem={({ item, index }) => this.AddressList(item, index)}
          // legacyImplementation={true}
        />
      </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 CustomerAddress