occ-mobile/app/containers/commodity/CommodityHome.js

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

import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../utils'
import Input from '../../components/input/index'
import SearchModal from './SearchResults'
import png from '../../static/images/defaultimg.jpg'
import Collapsible from 'react-native-collapsible'
import EmptyCommodity from '../../static/images/Empty-commodity.png'
import { ImageBaseUrl } from '../../utils/fetch/Fetchx'
import { ScaleUtil } from '../../utils/utils'
import dataModel from '../common/datamodel/dataModel'
import ToastView from '../../components/ToastView'

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

@connect(({ theme, search, category, shoppingcart }) => ({
  ...theme,
  ...search,
  ...category,
  ...shoppingcart,
}))
class CommodityHome extends Component {
  constructor(props) {
    super(props)
    this.state = {
      categorydata2Item:
        (props.categorydata &&
          props.categorydata[0] &&
          props.categorydata[0].items) ||
        [],
      categorydata3Item:
        (props.categorydata &&
          props.categorydata[0] &&
          props.categorydata[0].items &&
          props.categorydata[0].items[0] &&
          props.categorydata[0].items[0].items) ||
        [],
      categoryId: '',
      secListIndex: 0,
      thirdIndex: 0,
      item1Color: 0,
      secondIndex: 0,
      isRefresh: true,
    }
  }
  static navigationOptions = {
    tabBarLabel: ({ tintColor }) => (
      <Text
        style={{
          alignSelf: 'center',
          marginBottom: 2,
          fontSize: 10,
          lineHeight: 14,
          letterSpacing: 0.12,
          color: tintColor,
        }}
      >
        商品
      </Text>
    ),
    tabBarIcon: ({ focused, tintColor }) =>
      tintColor == '#333' ? (
        <View style={{ paddingTop: 7 }}>
          <Icon name="icon-icon-shangpin" size={28} color={tintColor} />
        </View>
      ) : (
        <View style={{ paddingTop: 7 }}>
          <Icon
            name="icon-icon-shangpinxuanzhong"
            size={28}
            color={tintColor}
          />
        </View>
      ),
  }

  componentDidMount() {
    this.props.dispatch(
      createAction('search/searchGoodsByCate')({
        searchVal: {
          search_customerId: CUSTOMERINFO.id,
          search_customerRankCode: CUSTOMERINFO.customerRankCode,
          // search_EQ_isOptional: 0,
          // search_EQ_enableStrucManage: 0
        },
      })
    )
  }

  gotoDetail = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
  }

  searchGoodsFn(item) {
    this.props.dispatch(
      createAction('search/searchGoodsByCate')({
        searchVal: {
          search_customerId: CUSTOMERINFO.id,
          search_customerRankCode: CUSTOMERINFO.customerRankCode,
          search_goodsCategoryIds: item.item.id,
          // search_EQ_isOptional: 0,
          // search_EQ_enableStrucManage: 0
        },
      })
    )
  }

  // 一级菜单
  leftRender(item, index) {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            this.state.categorydata2Item = []
            if (this.state.secListIndex == item.index) {
              this.setState({
                secListIndex: 'asd',
              })
            } else {
              if (
                item.item &&
                (Object.keys(item.item).indexOf('items') == -1 ||
                  (Object.keys(item.item).indexOf('items') !== -1 &&
                    item.item.items.length == 0))
              ) {
                this.searchGoodsFn(item)
                this.setState({
                  secListIndex: item.index,
                  item1Color: item.index,
                  // categorydata3Item: [],
                  secondIndex: 0,
                })
              } else {
                this.setState({
                  categorydata2Item:
                    item.item && item.item.items && item.item.items.length > 0
                      ? item.item.items
                      : [],
                  secListIndex: item.index,
                  item1Color: item.index,
                  // categorydata3Item: [],
                  secondIndex: 0,
                })
              }
            }
          }}
          style={{
            paddingLeft: 8,
            paddingRight: 5,
            paddingVertical: 14,
            borderBottomColor: '#eee',
            borderBottomWidth: 1 / PixelRatio.get(),
            flexDirection: 'row',
            borderLeftColor:
              this.state.item1Color == item.index ? '#E70013' : 'transparent',
            borderLeftWidth: 2,
          }}
        >
          <Text
            numberOfLines={1}
            style={{
              flex: 1,
              fontSize: 13,
              color: '#333',
              marginRight: 7,
            }}
          >
            {item.item && item.item.name && item.item.name.length > 4
              ? item.item.name.slice(0, 4) + '...'
              : item.item.name}
          </Text>
          {item.item && item.item.items && item.item.items.length > 0 ? (
            <Icon
              name="icon-icon-xialaxiaosanjiao"
              size={14}
              style={[
                item.item.items && item.item.items.length !== 0
                  ? this.state.secListIndex == item.index
                    ? { transform: [{ rotate: '180deg' }] }
                    : {}
                  : {},
                { alignSelf: 'center' },
              ]}
              color={'#CCC'}
            />
          ) : null}
        </TouchableOpacity>
        <Collapsible collapsed={this.state.secListIndex !== item.index}>
          <FlatList
            extraData={this.state}
            data={this.state.categorydata2Item}
            renderItem={item =>
              this.secondMenu(item, this.state.categorydata2Item.length)
            }
            keyExtractor={(item, index) => index}
          />
        </Collapsible>
      </View>
    )
  }

  //二级菜单
  secondMenu(item, maxlength) {
    return (
      <TouchableOpacity
        onPress={() => {
          this.state.categorydata3Item = []
          if (
            item.item &&
            (Object.keys(item.item).indexOf('items') == -1 ||
              (Object.keys(item.item).indexOf('items') !== -1 &&
                item.item.items.length == 0))
          ) {
            this.searchGoodsFn(item)
          } else {
            this.setState({
              categorydata3Item: item.item && item.item.items,
            })
          }
          this.setState({
            secondIndex: item.index,
          })
        }}
        style={{ paddingHorizontal: 10, backgroundColor: '#F5F5F5' }}
      >
        <View
          style={{
            paddingVertical: 10,
            borderBottomColor: '#DDD',
            borderBottomWidth: item.index == maxlength - 1 ? 0 : 1,
          }}
        >
          <Text
            style={{
              fontSize: 13,
              lineHeight: 18,
              color: this.state.secondIndex == item.index ? '#E70013' : '#333',
              alignSelf: 'center',
            }}
          >
            {item.item.name}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }

  // 三级菜单
  thirdMenu(item) {
    return (
      <TouchableOpacity
        onPress={() => {
          this.setState({ thirdIndex: item.index })
          this.searchGoodsFn(item)
        }}
        style={{
          paddingHorizontal: 20,
          paddingVertical: 5,
          backgroundColor: '#FFF',
          borderRadius: 100,
          marginTop: 10,
          borderWidth: 1 / PixelRatio.get(),
          borderColor: this.state.thirdIndex == item.index ? '#E70013' : '#DDD',
          marginRight: 10,
        }}
      >
        <Text
          style={{
            fontSize: 12,
            color: this.state.thirdIndex == item.index ? '#E70013' : '#333',
            lineHeight: 17,
          }}
        >
          {item.item.name}
        </Text>
      </TouchableOpacity>
    )
  }

  // 商品信息
  commodityInfo(item) {
    let gouwucheColor = '#666'
    if (this.props.shopListIds.indexOf(item.item.id) !== -1) {
      gouwucheColor = '#E70013'
    }
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingRight: 10,
          borderBottomColor: '#EEE',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <TouchableOpacity
          onPress={() =>
            this.props.dispatch(
              createAction('detail/gotoDetail')({ item: item.item })
            )
          }
          style={{ width: 120, height: 120, padding: 10 }}
        >
          <Image
            resizeMode="contain"
            style={{ width: 100, height: 100 }}
            source={
              item.item.mainPictureFileUrl
                ? { uri: ImageBaseUrl + item.item.mainPictureFileUrl }
                : png
            }
          />
        </TouchableOpacity>
        <View
          style={{
            flex: 1,
            justifyContent: 'space-around',
            paddingVertical: 5,
          }}
        >
          <TouchableOpacity
            onPress={() =>
              this.props.dispatch(
                createAction('detail/gotoDetail')({ item: item.item })
              )
            }
          >
            <Text
              numberOfLines={2}
              style={{ fontSize: 12, lineHeight: 17, color: '#333' }}
            >
              {
                item.item.goodsAttrVals&&item.item.goodsAttrVals.length?(<Text style={{backgroundColor: '#f85300',color:'white'}}>调</Text>):""
              }
              {item.item.displayName}
            </Text>
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                color: '#666',
                marginTop: 4,
              }}
            >
              编码：{item.item.code}
            </Text>
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                color: '#666',
                marginTop: 4,
              }}
            >
              {/* 型号：{item.item.model?(item.item.model.length>10?item.item.model.substr(0,10)+'...':item.item.model):""} */}
              型号：{item.item.model?item.item.model:""}
            </Text>
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                color: '#666',
                marginTop: 4,
              }}
            >
              规格：{item.item.specification?(item.item.specification.split("/")[0]+"/"+item.item.basicUnitName):""}
            </Text>
          </TouchableOpacity>
          {/* <Text
            style={{
              fontSize: 12,
              lineHeight: 17,
              color: '#666',
            }}
          >
            库存：{ScaleUtil(item.item.stock)}
          </Text> */}
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#E70013',
              }}
            >
              ¥{ScaleUtil(item.item.salePrice || item.item.baseDiscountPrice)}
            </Text>
            <TouchableOpacity
              onPress={() => {
                if (item.item.isOptional) {
                  this.props.dispatch(
                    createAction('detail/gotoDetail')({
                      item: item.item,
                      comefrom: 'Home',
                      userFor: 'openModel',
                    })
                  )
                } else {
                  if(item.item.goodsAttrVals && item.item.goodsAttrVals.length) {
                    this.plToast.show('该商品为调色商品，请到商品详情页面下单'); 
                    return;
                  }
                  if(!item.item.baseDiscountPrice) {
                    this.plToast.show('商品暂无价格，无法加入购物车');
                    return;
                  }
                  let postData = dataModel(
                    item.item,
                    CUSTOMERINFO.id,
                    CUSTOMERINFO.customerRankCode
                  )
                  this.props.dispatch(
                    createAction('shoppingcart/addShop')(postData)
                  )
                }
              }}
            >
              <Icon name="icon-icon-gouwuche" size={22} color={gouwucheColor} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }

  render() {
    const {
      appTheme,
      categorydata,
      GoodsList,
      GoodsState,
      GoodsFlag,
    } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          backgroundColor={'transparent'}
          translucent={true}
        />

        <View
          style={{
            width: width,
            // height: 60,
            height: HEADERSTYLE.height,
            backgroundColor: '#FFF',
            flexDirection: 'row',
            justifyContent: 'center',
            paddingLeft: 10,
            paddingBottom: 7,
            borderBottomColor: '#DDD',
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        >
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <Input
              touchBool={true}
              touchInput={() => this.mdl._openModal()}
              iconSize={16}
              style={{
                height: 28,
                width: width - 70,
                borderRadius: width / 2,
                alignSelf: 'flex-end',
                paddingLeft: 14,
              }}
              placeholder={'商品名称/编码'}
              textInputBacg={'#EEE'}
              iconColor={'#999'}
              placeholderTextColor={'#999'}
            />
            <TouchableOpacity
              onPress={() =>
                this.props.dispatch(
                  NavigationActions.navigate({ routeName: 'Replenishment' })
                )
              }
              style={{
                paddingLeft: 6,
                alignSelf: 'flex-end',
                marginBottom: -6,
              }}
            >
              <Icon name="icon-buhuo" size={34} color={'#999'} />
            </TouchableOpacity>
          </View>
        </View>
        {categorydata && categorydata.length > 0 ? (
          <View style={{ flex: 1, flexDirection: 'row', marginTop: 4 }}>
            <View
              style={{
                flex: 4,
                backgroundColor: '#FFF',
                borderRightWidth: 1 / PixelRatio.get(),
                borderRightColor: '#EEE',
              }}
            >
              <FlatList
                extraData={this.state}
                data={categorydata}
                renderItem={item => this.leftRender(item)}
                keyExtractor={(item, index) => index}
              />
            </View>

            <View style={{ flex: 11, backgroundColor: '#FFF' }}>
              {this.state.categorydata3Item &&
              this.state.categorydata3Item.length > 0 ? (
                <View
                  style={{
                    height: 80,
                    paddingLeft: 15,
                    marginBottom: 3,
                    borderBottomWidth: 1 / PixelRatio.get(),
                    borderBottomColor: '#EEE',
                  }}
                >
                  <FlatList
                    data={this.state.categorydata3Item}
                    extraData={this.state}
                    keyExtractor={(item, index) => index}
                    renderItem={(item, index) => this.thirdMenu(item, index)}
                    columnWrapperStyle={{
                      flexWrap: 'wrap',
                    }}
                    numColumns={3}
                  />
                </View>
              ) : null}

              {GoodsState ? (
                !GoodsFlag ? (
                  <View style={{ flex: 1 }}>
                    <FlatList
                      extraData={this.props}
                      data={GoodsList}
                      renderItem={item => this.commodityInfo(item)}
                      keyExtractor={(item, index) => index}
                    />
                  </View>
                ) : (
                  <View
                    style={{
                      flex: 1,
                      alignSelf: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <ActivityIndicator />
                  </View>
                )
              ) : (
                <ImageBackground
                  resizeMode="contain"
                  source={EmptyCommodity}
                  style={{
                    width: width * 2 / 3,
                    height: height / 1.7,
                    alignSelf: 'center',
                  }}
                >
                  <View
                    style={{
                      position: 'absolute',
                      bottom: '15%',
                      alignSelf: 'center',
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        lineHeight: 20,
                        letterSpacing: 0.17,
                        color: '#999',
                      }}
                    >
                      商品列表出现异常啦~
                    </Text>
                  </View>
                </ImageBackground>
              )}
              <View
                style={{
                  marginHorizontal: 15,
                  borderBottomColor: '#DDD',
                  borderBottomWidth: 1 / PixelRatio.get(),
                }}
              />
            </View>
          </View>
        ) : (
          <ImageBackground
            resizeMode="contain"
            source={EmptyCommodity}
            style={{
              width: width - 80,
              height: height / 1.5 - 80,
              alignSelf: 'center',
            }}
          >
            <View
              style={{
                position: 'absolute',
                bottom: '15%',
                alignSelf: 'center',
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  letterSpacing: 0.17,
                  color: '#999',
                }}
              >
                商品分类出现异常啦~
              </Text>
            </View>
          </ImageBackground>
        )}
        <SearchModal
          // cb={data => {
          //   this._refreshPlist(data);
          // }}
          ref={mdl => (this.mdl = mdl)}
          dispatch={this.props.dispatch}
          comFrom={'CommodityHome'}
          // fuleipro={this.state.footerdata}
        />
        <ToastView 
          onDismiss={() => {
            //alert('toast消失了');
          }}
          ref={(element) => {
              this.plToast = element;
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  icon: {
    width: 32,
    height: 32,
  },
})

export default CommodityHome