occ-mobile/app/containers/commodity/commoditydetail/GoodsFlatList.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Dimensions,
  TouchableOpacity,
  Text,
  FlatList,
} from 'react-native'
import Toast from 'react-native-root-toast'
import { connect } from 'react-redux'
import { createAction } from '../../../utils'
import Input from '../../../components/input'
import * as authService from '../../../services/auth'
const { width, height } = Dimensions.get('window')
// @connect(({ optional }) => ({ ...optional }))
class GoodsFlatList extends Component {
  constructor(props) {
    super(props)
    this.state = { goodsList: [], kw: '', checkList: [] }
  }

  async componentDidMount() {
    this.getGoodsByKW('', true)
  }

  //颜色卡片列表
  _goodsList( item, index,goodsList) {
    return(
      <View>
        <TouchableOpacity
          disabled={false}
          key={item.attrValId}
          activeOpacity={1}
          style={{
            paddingHorizontal: 16,
            paddingVertical: 2,
            borderBottomColor: item.isChecked ? '#E14C46' : '#DDD',
            borderBottomWidth: item.isChecked ? 3 : 1,
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
            marginRight: 15,
            width: 320,
            marginTop : 5
          }}
          onPress={() => {
            goodsList.forEach(e => {e.isChecked = false})
            item.isChecked = true
            goodsList.splice(goodsList.findIndex(e => e.code == item.code),1,item)
            this.setState({goodsList})
            if (item.basePrice) {
                this.props.addGoods && this.props.addGoods(item)
            } else {
                Toast.show("未获取该商品价格，请选择其他商品",{position : toastHeight});
            }
          }}
        >
        <View>
          <Text
            style={{
              color: item.isChecked ? '#E14C46' : '#333',
              fontSize: 12,
              lineHeight: 17,
            }}
            numberOfLines={1}
          >
            {item.name}
          </Text>
        </View>
        <View>      
          <Text
            style={{
              color: item.isChecked ? '#E14C46' : '#333',
              fontSize: 12,
              lineHeight: 17,
            }}
            numberOfLines={1}
          >
            编码：{item.code}
          </Text>
        </View>
        <View>  
          <Text
            style={{
              color: item.isChecked ? '#E14C46' : '#333',
              fontSize: 12,
              lineHeight: 17,
            }}
            numberOfLines={1}
          >
            型号：{item.specification}
          </Text>
        </View>
        <View>  
          <Text
            style={{
              color: item.isChecked ? '#E14C46' : '#333',
              fontSize: 12,
              lineHeight: 17,
            }}
            numberOfLines={1}
          >
            规格：{item.model}
          </Text>     
        </View>
        <View>  
          <Text
            style={{
              color: item.isChecked ? '#E14C46' : '#333',
              fontSize: 12,
              lineHeight: 17,
            }}
            numberOfLines={1}
          >
            价格：￥ {item.basePrice || "--"}
          </Text>     
        </View>        
        </TouchableOpacity>
      </View>
    )
  }

  //根据色卡号查询调色
  async getGoodsByKW(kw,init) {
    if (!kw && !init) {
        Toast.show("请输入商品信息",{position : toastHeight});
        return 
    }
    const search = {
        page: 0,
        size: 10,
        search_EQ_isEnable: 1,
        search_keywords: kw,
        search_customerId: CUSTOMERINFO.id,
        search_customerRankCode: CUSTOMERINFO.customerRankCode
      }
    const goodsData = await authService.searchCommodityList(search)
    console.log('goodsData=================>', goodsData)
    // const goodsData = {}
    if (goodsData.status == 200) {
        this.setState({goodsList: goodsData.data.content})
    } else {
        Toast.show("未搜索到商品信息",{position : toastHeight});
        return
    }
  }

  render() {
      return (
        <View>
          <Input
            style={{
            height: 28,
            width: width - 50,
            marginTop: 20,
            borderRadius: width / 2,
            alignSelf: 'center',
            paddingLeft: 14,
            }}
            textStyle={{
              paddingLeft: 10,
              height: 28,
              fontSize: 11,
              padding: 0,
            }}
            iconSize={14}
            //blurOnSubmit={true}
            multiline={false}
            textInputBacg={'#F5F5F5'}
            iconColor={'#CCC'}
            placeholderTextColor={'#CCC'}
            placeholderSize={8}
            placeholder = {'请输入颜色编码'}
            onchangeFn={async e => {
              this.getGoodsByKW(e)
            }}
          />
          <Text
            style={{
              color: '#999',
              fontSize: 14,
              marginTop: 15,
              lineHeight: 20,
              letterSpacing: 0.17,
            }}
          >
            商品列表
          </Text>
           
            <FlatList
                keyExtractor={(item, index) => index}
                style={{height:280}} 
                data={this.state.goodsList}
                renderItem={({ item, key}) => this._goodsList(item, key,this.state.goodsList)}
                numColumns= {1}
            />

        </View>
      )
  }
}

const styles = StyleSheet.create({
  titleText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#999',
  },
  contentText: {
    flex: 1,
    fontSize: 13,
    lineHeight: 18,
    color: '#333',
  },
})
export default GoodsFlatList