occ-mobile/app/components/Grid.js

import React, { Children } from 'react'
import {
  StyleSheet,
  RefreshControl,
  View,
  Text,
  Dimensions,
  FlatList,
  Image,
  TouchableOpacity,
  PixelRatio,
  ActivityIndicator,
} from 'react-native'
import PropTypes from 'prop-types'
import Icon from './Iconfont/Iconfont'
import { ScaleUtil } from '../utils/utils'
import { ImageBaseUrl } from '../utils/fetch/Fetchx'
import { createAction } from '../utils'

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

export default class Grid extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  static propTypes = {
    titleName: PropTypes.string,
    titleColor: PropTypes.string,
    titleIcon: PropTypes.string,
    nameKey: PropTypes.string,
    pictureKey: PropTypes.string,
    priceKey: PropTypes.string,
    keyext: PropTypes.string,
    data: PropTypes.array,
    shoppingCart: PropTypes.func,
    imageTouch: PropTypes.func,
    moreTouch: PropTypes.func,
    titleBool: PropTypes.bool,
    listRowBool: PropTypes.bool,
    homeLIstBool: PropTypes.bool,
    keyextstr: PropTypes.string, //暂时
    SearchVal: PropTypes.object, //查询条件
    shopListIds: PropTypes.array,
  }
  static defaultProps = {
    titleName: '热卖促销',
    titleColor: '#333',
    titleIcon: 'icon-icon-jianjinzhishiqi',
    data: [],
    nameKey: 'name',
    pictureKey: 'pictureUrl',
    priceKey: 'salePrice',
    keyext: 'code',
    titleBool: true,
    listRowBool: false,
    homeLIstBool: false,
    viewWid: {
      width: width / 2 - 4,
      // height: width / 2 + 81
    },
    imgWid: {
      width: width / 2 - 4,
      height: width / 2 - 4,
    },
    shoppingCart: () => {},
    imageTouch: () => {},
    moreTouch: () => {},
    SearchVal: {},
    shopListIds: [],
  }

  _renderItemCol(item) {
    let gouwucheColor = '#666'
    if (this.props.shopListIds.indexOf(item.id) !== -1) {
      gouwucheColor = '#E70013'
    }
    // 首页显示
    if (this.props.homeLIstBool) {
      return (
        <View style={[{ marginBottom: 10 }, this.props.viewWid]}>
          <TouchableOpacity
            style={{ backgroundColor: '#FFF' }}
            onPress={() => {
              this.props.imageTouch(item)
            }}
          >
            <Image
              resizeMode="contain"
              source={{ uri: ImageBaseUrl + item[this.props.pictureKey] }}
              style={this.props.imgWid}
            />
          </TouchableOpacity>
          <View
            style={{
              flex: 1,
              paddingHorizontal: 10,
              backgroundColor: '#FFF',
              justifyContent: 'space-between',
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.props.imageTouch(item)
              }}
            >
              <Text
                numberOfLines={1}
                style={{ flex: 1, color: '#333', fontSize: 14, lineHeight: 20 }}
              >
                {
                  item.goodsAttrVals&&item.goodsAttrVals.length?(<Text style={{backgroundColor: '#f85300',color:'white'}}>调</Text>):""
                }
                {item[this.props.nameKey]}
              </Text>
              <View 
                style = {{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}>
                  <Text style={{fontSize:12}}>
                    {'型号：'+(item.model?(item.model.length>10?item.model.substr(0,10):item.model):"")}
                  </Text>
                  <Text style={{fontSize:12}}>
                    {'规格：'+(item.specification?(item.specification.split("/")[0]+"/"+item.basicUnitName):"")}
                  </Text>
              </View>
            </TouchableOpacity>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Text style={{ color: '#E70013', fontSize: 18, lineHeight: 25 }}>
                {CURRENCY.currencySign}
                {ScaleUtil(item[this.props.priceKey] || item.salePrice)}
              </Text>
              <TouchableOpacity
                onPress={() => {
                  this.props.shoppingCart(item)
                }}
              >
                <Icon
                  name="icon-icon-gouwuche"
                  size={22}
                  color={gouwucheColor}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      )
    } else {
      // 非首页  --- 宫格
      return (
        <View style={this.props.viewWid}>
          <TouchableOpacity
            style={{ backgroundColor: '#FFF' }}
            onPress={() => {
              this.props.imageTouch(item)
            }}
          >
            <Image
              resizeMode="contain"
              source={{ uri: ImageBaseUrl + item[this.props.pictureKey] }}
              style={this.props.imgWid}
            />
          </TouchableOpacity>
          <View
            style={{
              flex: 1,
              paddingHorizontal: 10,
              paddingTop: 15,
              backgroundColor: '#FFF',
              borderTopColor: '#F5F5F5',
              borderTopWidth: 1 / PixelRatio.get(),
            }}
          >
            <Text style={{ color: '#E14C46', fontSize: 12 }}>
              {CURRENCY.currencySign}
              <Text style={{ fontSize: 18 }}>
                {ScaleUtil(item[this.props.priceKey] || item.salePrice)}
              </Text>
            </Text>

            <Text
              numberOfLines={1}
              style={{
                flex: 1,
                color: '#333',
                fontSize: 13,
                lineHeight: 18,
                marginTop: 5,
              }}
            >
              {item[this.props.nameKey]}
            </Text>
            <Text style={{ color: '#666', fontSize: 12 }}>
              编码：{item[this.props.codeKey]}
            </Text>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'flex-end',
                paddingBottom: 5,
              }}
            >
              {/* <Text style={{ color: '#666', fontSize: 12, marginBottom: 5 }}>
                库存：{ScaleUtil(item[this.props.invenKey])}(台)
              </Text> */}
              <TouchableOpacity
                onPress={() => {
                  this.props.shoppingCart(item)
                }}
              >
                <Icon
                  name="icon-icon-gouwuche"
                  size={22}
                  color={gouwucheColor}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      )
    }
  }

  _renderItemRow(item) {
    let gouwucheColor = '#666'
    if (this.props.shopListIds.indexOf(item.id) !== -1) {
      gouwucheColor = '#E70013'
    }
    // 列表形式
    return (
      <View style={[this.props.viewWid, { flexDirection: 'row' }]}>
        <TouchableOpacity
          style={{ backgroundColor: '#FFF' }}
          onPress={() => {
            this.props.imageTouch(item)
          }}
        >
          <Image
            resizeMode="contain"
            source={{ uri: ImageBaseUrl + item[this.props.pictureKey] }}
            style={this.props.imgWid}
          />
        </TouchableOpacity>
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            backgroundColor: '#FFF',
            paddingVertical: 20,
            paddingLeft: 20,
            paddingRight: 10,
          }}
        >
          <Text
            numberOfLines={1}
            style={{ flex: 1, fontSize: 14, color: '#333', lineHeight: 20 }}
          >
            {
              item.goodsAttrVals&&item.goodsAttrVals.length?(<Text style={{backgroundColor: '#f85300',color:'white'}}>调</Text>):""
            }
            {item[this.props.nameKey]}
          </Text>
          <Text
            style={{
              fontSize: 13,
              color: '#999',
              lineHeight: 18,
              marginTop: 2,
            }}
          >
            编码：{item[this.props.codeKey]}
          </Text>
          {/* <Text
            style={{
              fontSize: 13,
              color: '#999',
              lineHeight: 18,
              marginTop: 3,
            }}
          >
            库存：{ScaleUtil(item[this.props.invenKey])}（件）
          </Text> */}
          {/* <View 
              style = {{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}> */}
              <Text style={{
              fontSize: 13,
              color: '#999',
              lineHeight: 18,
              marginTop: 2,
            }}>
                {'型号：'+(item.model?(item.model.length>10?item.model.substr(0,10):item.model):"")}
              </Text>
          {/* </View> */}
          {/* <View 
              style = {{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}> */}
              <Text style={{
              fontSize: 13,
              color: '#999',
              lineHeight: 18,
              marginTop: 2,
            }}>
                {'规格：'+(item.specification?(item.specification.split("/")[0]+"/"+item.basicUnitName):"")}
              </Text>
          {/* </View> */}
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              marginTop: 5,
              paddingRight: 7,
            }}
          >
            <Text style={{ fontSize: 18, lineHeight: 25, color: '#E70013' }}>
              {CURRENCY.currencySign}
              {ScaleUtil(item[this.props.priceKey] || item.salePrice)}
            </Text>
            <TouchableOpacity
              onPress={() => {
                this.props.shoppingCart(item)
              }}
            >
              <Icon name="icon-icon-gouwuche" color={gouwucheColor} size={22} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }

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

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'transparent' }}>
        {this.props.titleBool ? (
          <View>
            <TouchableOpacity
              // style={{ backgroundColor: '#FFF' }}
              onPress={() => {
                this.props.moreTouch()
              }}
              style={{
                backgroundColor: '#FFF',
                flexDirection: 'row',
                justifyContent: 'space-between',
                padding: 10,
                paddingLeft: 20,
              }}
            >
              <View style={{ flexDirection: 'row' }}>
                {this.props.imageSource ? (
                  <Image
                    source={this.props.imageSource}
                    style={{
                      width: 16,
                      height: 18,
                      marginRight: 8,
                      alignSelf: 'center',
                    }}
                  />
                ) : null}
                <Text
                  style={{
                    color: this.props.titleColor,
                    fontSize: 16,
                    lineHeight: 22,
                    letterSpacing: 0.43,
                    fontWeight: '600',
                    alignSelf: 'center',
                  }}
                >
                  {this.props.titleName}
                </Text>
              </View>
              {this.props.titleIcon ? (
                <Icon
                  name={this.props.titleIcon}
                  size={26}
                  style={{ alignSelf: 'center' }}
                  color={'#CCC'}
                />
              ) : null}
            </TouchableOpacity>
          </View>
        ) : null}
        {this.props.listRowBool ? (
          // 列表形式
          <FlatList
            // keyExtractor={(item, index) => item[this.props.keyext]}
            keyExtractor={(item, index) =>
              this.props.keyext ? item[this.props.keyext] + index : index
            }
            extraData={this.props}
            data={this.props.data}
            ListFooterComponent={this.footerCom.bind(this)}
            columnWrapperStyle={{ flexWrap: 'wrap' }}
            numColumns={2}
            renderItem={({ item }) => this._renderItemRow(item)}
            onEndReachedThreshold={0.1}
            onEndReached={e => this.props.onEndReached()}
            refreshControl={
              <RefreshControl
                refreshing={this.props.Parentprops.isRefreshing}
                onRefresh={this.props.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={
                  this.props.Parentprops.isRefreshing
                    ? '刷新中....'
                    : '下拉刷新'
                }
              />
            }
          />
        ) : this.props.homeLIstBool ? (
          <FlatList
            // keyExtractor={(item, index) => item[this.props.keyext]}
            keyExtractor={(item, index) =>
              this.props.keyext ? item[this.props.keyext] + index : index
            }
            extraData={this.props.extraData}
            columnWrapperStyle={{
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}
            ListFooterComponent={
              this.props.homeLIstBool ? null : this.footerCom.bind(this)
            }
            numColumns={2}
            data={this.props.data}
            renderItem={({ item }) => this._renderItemCol(item)}
          />
        ) : (
          <FlatList
            // keyExtractor={(item, index) => item[this.props.keyext]}
            keyExtractor={(item, index) =>
              this.props.keyext ? item[this.props.keyext] + index : index
            }
            extraData={this.props.extraData}
            columnWrapperStyle={{
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}
            ListFooterComponent={
              this.props.homeLIstBool ? null : this.footerCom.bind(this)
            }
            numColumns={2}
            data={this.props.data}
            renderItem={({ item }) => this._renderItemCol(item)}
            onEndReachedThreshold={0.1}
            onEndReached={e => this.props.onEndReached()}
            refreshControl={
              <RefreshControl
                refreshing={this.props.Parentprops.isRefreshing}
                onRefresh={this.props.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={
                  this.props.Parentprops.isRefreshing
                    ? '刷新中....'
                    : '下拉刷新'
                }
              />
            }
          />
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  footer: {
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 10,
  },
})