occ-mobile/app/containers/common/SelectInvoice.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Text,
  TouchableOpacity,
  Dimensions,
  PixelRatio,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import Collapsible from 'react-native-collapsible'
import Input from '../../components/input'
import png from '../../static/images/defaultimg.jpg'
import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions } from '../../utils'
import redblue from '../../static/images/ic-redblue.png'
import { HeaderView } from '../common/HeaderView'

const { width, height } = Dimensions.get('window')
const data = [{ a: 1, b: [1, 2] }, { a: 2, b: [3] }, { a: 3, b: [1, 2, 3] }]
const adress = ['曲美北京分公司', '曲美广东佛山分公司', '曲美上海分公司']

@connect(({ theme, mine }) => ({ ...theme, ...mine }))
class SelectInvoice extends Component {
  constructor(props) {
    super(props)
    this.state = {
      invoice: props.invoiceDefault,
      typeVal: this.props.invoiceDefault
        ? this.props.invoiceDefault.invoiceType
        : '',
      typeArr: [],
      key: '',
    }
  }

  componentDidMount() {
    this.setInvoice()
  }

  setInvoice() {
    let typeArr = [],
      index
    for (let val of this.props.invoiceData) {
      typeArr.push(val.invoiceType)
    }
    typeArr = Array.from(new Set(typeArr))
    if (this.props.invoiceData.indexOf(this.props.invoiceDefault) != -1) {
      index = this.props.invoiceData.indexOf(this.props.invoiceDefault)
    }
    this.setState({ key: index, typeArr: typeArr })
  }

  // 底部按钮
  bottomTouch() {
    let touchArr = [],
      touchAtt = [
        {
          touchName: '取消',
          background: '#FFF',
          textColor: '#666',
          onpress: () => this.props.dispatch(NavigationActions.back()),
        },
        {
          touchName: '确定',
          background: '#E14C46',
          textColor: '#FFF',
          onpress: () => {
            this.props.navigation.state.params(this.state.invoice)
            this.props.dispatch(NavigationActions.back())
          },
        },
      ]

    for (let i = 0; i < touchAtt.length; i++) {
      touchArr.push(
        <TouchableOpacity
          onPress={() => touchAtt[i].onpress()}
          key={i}
          style={{
            flex: 1,
            backgroundColor: touchAtt[i].background,
            justifyContent: 'center',
            borderRightColor: '#eee',
            borderRightWidth: 1 / PixelRatio.get(),
          }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              color: touchAtt[i].textColor,
              alignSelf: 'center',
            }}
          >
            {touchAtt[i].touchName}
          </Text>
        </TouchableOpacity>
      )
    }
    return touchArr
  }

  touchTitle(item, key) {
    this.setState({ invoice: item, key: key, typeVal: item.invoiceType })
  }

  render() {
    const { appTheme, invoiceData } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />

        {/* 头部 */}
        {HeaderView(this.props.dispatch, '选择发票')}

        {/* 主内容 */}
        <ScrollView style={{ flex: 1 }}>
          {/* 发票抬头 */}
          <View style={{ padding: 10, backgroundColor: '#FFF' }}>
            <Text style={{ fontSize: 14, lineHeight: 20, color: '#333' }}>
              发票抬头
            </Text>
            <ScrollView
              showsHorizontalScrollIndicator={false}
              horizontal={true}
              style={{ flexDirection: 'row', paddingTop: 10, paddingBottom: 5 }}
            >
              {invoiceData &&
                invoiceData.map((item, key) => (
                  <TouchableOpacity
                    onPress={() => this.touchTitle(item, key)}
                    key={key}
                    style={{
                      paddingHorizontal: 12,
                      paddingVertical: 4,
                      borderWidth: 1 / PixelRatio.get(),
                      borderColor: this.state.key == key ? '#E14C46' : '#666',
                      marginRight: 10,
                      borderRadius: 2,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 12,
                        lineHeight: 17,
                        color: this.state.key == key ? '#E14C46' : '#333',
                      }}
                    >
                      {item.invoiceTitle}
                    </Text>
                  </TouchableOpacity>
                ))}
            </ScrollView>
          </View>

          {/* 发票类型 */}
          <View style={{ padding: 10, backgroundColor: '#FFF', marginTop: 10 }}>
            <Text style={{ fontSize: 14, lineHeight: 20, color: '#333' }}>
              发票类型
            </Text>
            <ScrollView
              showsHorizontalScrollIndicator={false}
              horizontal={true}
              style={{ flexDirection: 'row', paddingTop: 10, paddingBottom: 5 }}
            >
              {this.state.typeArr &&
                this.state.typeArr.map((item, key) => (
                  <View
                    key={key}
                    style={{
                      paddingHorizontal: 12,
                      paddingVertical: 4,
                      borderWidth: 1 / PixelRatio.get(),
                      borderColor:
                        this.state.typeVal == item ? '#E14C46' : '#666',
                      marginRight: 10,
                      borderRadius: 2,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 12,
                        lineHeight: 17,
                        color: this.state.typeVal == item ? '#E14C46' : '#333',
                      }}
                    >
                      {item}
                    </Text>
                  </View>
                ))}
            </ScrollView>
          </View>

          {/* 发票内容 */}
          <View style={{ marginTop: 10, padding: 10, backgroundColor: '#FFF' }}>
            <Text style={{ fontSize: 13, lineHeight: 24, color: '#666' }}>
              发票抬头：<Text style={{ color: '#333' }}>
                {this.state.invoice && this.state.invoice.invoiceTitle}
              </Text>
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 24, color: '#666' }}>
              发票内容：<Text style={{ color: '#333' }}>
                {this.state.invoice && this.state.invoice.invoiceContent}
              </Text>
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 24, color: '#666' }}>
              纳税人识别号：<Text style={{ color: '#333' }}>
                {this.state.invoice && this.state.invoice.invoiceTaxId}
              </Text>
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 24, color: '#666' }}>
              开户银行：<Text style={{ color: '#333' }}>
                {this.state.invoice && this.state.invoice.invoiceBank}
              </Text>
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 24, color: '#666' }}>
              支行名称：<Text style={{ color: '#333' }}>
                {this.state.invoice && this.state.invoice.invoiceSubBank}{' '}
              </Text>
            </Text>
            <Text style={{ fontSize: 13, lineHeight: 24, color: '#666' }}>
              账号：<Text style={{ color: '#333' }}>
                {this.state.invoice && this.state.invoice.invoiceAccount}
              </Text>
            </Text>
          </View>
        </ScrollView>

        {/* 底部 */}
        <View
          style={{
            height: 45,
            backgroundColor: '#FFF',
            flexDirection: 'row',
          }}
        >
          {this.bottomTouch()}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text333: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.17,
    color: '#333',
  },
  text666: {
    fontSize: 12,
    lineHeight: 17,
    color: '#666',
  },
  text999: {
    fontSize: 12,
    lineHeight: 17,
    color: '#999',
  },
})

export default SelectInvoice