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

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

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

@connect(({ theme, mine }) => ({ ...theme, ...mine }))
class CustomerContact 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>
    )
  }

  contactList(item, key) {
    return (
      <View>
        <TouchableOpacity
          onPress={() =>
            this.state.collapsed == item.id
              ? this.setState({ collapsed: 'dsadsa' })
              : this.setState({ collapsed: item.id })
          }
          style={{
            padding: 10,
            backgroundColor: '#FFF',
            flexDirection: 'row',
          }}
        >
          <View
            style={{
              width: 40,
              height: 40,
              borderRadius: 20,
              backgroundColor: '#F0C47C',
              justifyContent: 'center',
            }}
          >
            <Text
              style={{
                fontSize: 18,
                lineHeight: 25,
                color: '#FFF',
                alignSelf: 'center',
              }}
            >
              {item.name && item.name.slice(0, 1)}
            </Text>
          </View>
          <View style={{ marginLeft: 20, justifyContent: 'center' }}>
            <View style={{ flexDirection: 'row', marginBottom: 3 }}>
              <Text style={{ fontSize: 15, lineHeight: 21, color: '#333' }}>
                {item.name}
              </Text>
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  color: '#333',
                  marginLeft: 20,
                }}
              >
                {item.phone}
              </Text>
            </View>
            <Text style={{ fontSize: 12, lineHeight: 17, color: '#999' }}>
              {item.contactTypeName}
            </Text>
          </View>
        </TouchableOpacity>
        <Collapsible
          collapsed={item.id !== this.state.collapsed}
          align={'center'}
        >
          {/* 阴影效果 -----*/}
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#e8e5de',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#eae7e0',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#edeae2',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#efece4',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#f2efe7',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#f7f4ec',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#faf7ef',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#fcf9f1',
            }}
          />
          <View
            style={{
              height: 1 / PixelRatio.get(),
              backgroundColor: '#fdfaf2',
            }}
          />
          {/* 阴影效果 ^^^^ */}
          <Animatable.View
            duration={300}
            transition="backgroundColor"
            style={{
              marginHorizontal: 10,
              marginBottom: 10,
              padding: 10,
              backgroundColor: '#FFFBF2',
            }}
          >
            <Animatable.Text
              duration={300}
              easing="ease-out"
              animation={'zoomIn'}
              style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
            >
              电话：{item.tel}
            </Animatable.Text>
            <Animatable.Text
              duration={300}
              easing="ease-out"
              animation={'zoomIn'}
              style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
            >
              传真：{item.fax}
            </Animatable.Text>
            <Animatable.Text
              duration={300}
              easing="ease-out"
              animation={'zoomIn'}
              style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
            >
              邮箱：{item.email}
            </Animatable.Text>
            <Animatable.Text
              duration={300}
              easing="ease-out"
              animation={'zoomIn'}
              style={{ fontSize: 13, lineHeight: 22, color: '#666' }}
            >
              地址：{item.address}
            </Animatable.Text>
          </Animatable.View>
        </Collapsible>
      </View>
    )
  }

  render() {
    const { appTheme, ContactInfo } = 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
          keyExtractor={(item, index) => item.id + index}
          ItemSeparatorComponent={() => (
            <View style={{ height: 1, backgroundColor: '#EEE' }} />
          )}
          data={ContactInfo}
          renderItem={({ item, index }) => this.contactList(item, index)}
          // legacyImplementation={true}
        />
      </View>
    )
  }
}

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

export default CustomerContact