occ-mobile/app/containers/home/Home.js

import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Image,
  ActivityIndicator,
  ImageBackground,
  Text,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  RefreshControl,
  Alert,
} from 'react-native'
import { connect } from 'react-redux'
import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction, Storage, delay } from '../../utils'
import {
  CarouselHorizontal,
  CarouselVertical,
} from '../../components/carousel/index'
import Input from '../../components/input/index'
import Bubble from '../../components/Bubble'
// import png from "../../static/images/banner.png";
import mask from '../../static/images/home-mask.png'
import announcePng from '../../static/images/home-announce.png'
import inputdef from '../../static/images/home-topInput.png'
import inputred from '../../static/images/home-topred.png'
import homeAllGoods from '../../static/images/home-AllGoods.png'
import homeHotSale from '../../static/images/home-hotSale.png'
import Grid from '../../components/Grid'
import SearchModal from '../commodity/SearchResults'
import { ImageBaseUrl } from '../../utils/fetch/Fetchx'
import { accMul } from '../../utils/utils'
import dataModel from '../common/datamodel/dataModel'
import pendingImg from '../../static/images/home-pending.png'
import temporaryImg from '../../static/images/home-temporary.png'
import dispatchImg from '../../static/images/home-dispatched.png'
import unShipedImg from '../../static/images/home-unshiped.png'
import { isIphoneX } from '../common/theme/config'
import ToastView from '../../components/ToastView'

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

@connect(({ theme, home, shoppingcart, announce }) => ({
  ...theme,
  ...home,
  ...shoppingcart,
  ...announce,
}))
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      header: {
        headercol: 'transparent',
        inputtx: '#CCC',
        inputbacg: '#FFF',
        messcol: '#FFF',
        inputWidth: width - 20,
        // barStyle: "light-content"
        barStyle: 'dark-content',
        // barStyle: this.props.appTheme.barStyle,
      },
      headerView: true,
      isRefreshing: false,
      shopListIds: [],
      isRefreshAdd: true,
    }
    // console.disableYellowBox = 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-shouye" size={28} color={tintColor} />
        </View>
      ) : (
        <View style={{ paddingTop: 7 }}>
          <Icon name="icon-icon-shouyexuanzhong" size={28} color={tintColor} />
        </View>
      ),
  }

  gotoDetail(e) {
    this.props.dispatch(
      createAction('detail/gotoDetail')({ item: e, comefrom: 'Home' })
    )
  }
  onRefresh() {
    //
    this.props.dispatch(
      createAction('announce/getAnnounce')({ page: 0, pageSize: 10 })
    )
    //
    this.props.dispatch(createAction('announce/getBanner')())
    //
    this.props.dispatch(createAction('home/getAllPro')())
    this.props.dispatch(createAction('home/getHotSale')())
  }

  touchItemFn = val => {
    // this.props.dispatch(
    //   NavigationActions.reset({
    //     index: 0, // 注意不要越界
    //     actions: [NavigationActions.navigate({ routeName: "OrderHome" })]
    //   })
    // );

    switch (val) {
      case '待审核':
        this.props.dispatch(
          NavigationActions.navigate({
            routeName: 'OrderHome',
            action: NavigationActions.navigate({ routeName: 'OrderHome' }),
            params: { StateFilter: 'HomeToOrder/shenhe',orderListType:'1' },
          })
        )
        this.props.dispatch(
          createAction('orderlist/setRouterParamsReducer')({
            routerParams: 'HomeToOrder/shenhe'
          })
        )
        break
      case '待发货':
        this.props.dispatch(
          NavigationActions.navigate({
            routeName: 'OrderHome',
            action: NavigationActions.navigate({ routeName: 'OrderHome' }),
            params: { StateFilter: 'HomeToOrder/fahuo',orderListType:'1' },
          })
        )
        this.props.dispatch(
          createAction('orderlist/setRouterParamsReducer')({
            routerParams: 'HomeToOrder/fahuo'
          })
        )
        break
      case '待签收':
        this.props.dispatch(
          NavigationActions.navigate({
            routeName: 'OrderHome',
            action: NavigationActions.navigate({ routeName: 'OrderHome' }),
            params: { StateFilter: 'HomeToOrder/shouhuo',orderListType:'1' },
          })
        )
        this.props.dispatch(
          createAction('orderlist/setRouterParamsReducer')({
            routerParams: 'HomeToOrder/shouhuo'
          })
        )
        break
      case '暂存':
        this.props.dispatch(
          NavigationActions.navigate({
            routeName: 'OrderHome',
            action: NavigationActions.navigate({ routeName: 'OrderHome' }),
            params: { StateFilter: 'HomeToOrder/zancun' },
          })
        )
        this.props.dispatch(
          createAction('orderlist/setRouterParamsReducer')({
            routerParams: 'HomeToOrder/zancun'
          })
        )
        break
    }
  }

  //待审核、待发货等按钮部分
  touchItem(ReqNumData) {
    let numDataObj = []
    if (ReqNumData && ReqNumData.length > 0) {
      ReqNumData.map(data => (numDataObj[data[0]] = data[1]))
    }
    let _items = [],
      right,
      itemdatas = [
        {
          text: '待审核',
          fn: this.touchItemFn,
          iconName: pendingImg,
          // iconName: "icon-daishenhe",
          bubbleval: numDataObj['02'] || 0,
        },
        {
          text: '待发货',
          fn: this.touchItemFn,
          iconName: unShipedImg,
          // iconName: "icon-daifahuo",
          bubbleval: numDataObj['03'] || 0,
        },
        {
          text: '待签收',
          fn: this.touchItemFn,
          iconName: dispatchImg,
          // iconName: "icon-daishouhuo",
          bubbleval: numDataObj['04'] || 0,
        },
        {
          text: '暂存',
          fn: this.touchItemFn,
          iconName: temporaryImg,
          // iconName: "icon-buhuo",
          bubbleval: numDataObj['01'] || 0,
        },
      ]
    for (let i = 0; i < itemdatas.length; i++) {
      let items = itemdatas[i]
      if (items.bubbleval < 10 && items.bubbleval > 0) {
        right = 20
      } else if (items.bubbleval >= 100) {
        right = 5
      } else {
        right = 7
      }
      _items.push(
        <TouchableOpacity
          key={i}
          style={[styles.buttonStyle, { width: (width - 20) / 4 }]}
          onPress={() => items.fn(items.text)}
        >
          {/* <Icon name={items.iconName} size={40} color={"#333"} /> */}
          <Image
            source={items.iconName}
            style={
              items.text == '待审核'
                ? { width: 33, height: 33, marginBottom: 5, marginTop: 3 }
                : items.text == '暂存'
                  ? { width: 40, height: 40, marginTop: 1 }
                  : { width: 30, height: 30, marginBottom: 6, marginTop: 5 }
            }
            resizeMode="contain"
          />
          <Bubble
            bubbleColor={'#E14C46'}
            size={16}
            style={{ position: 'absolute', right: right, top: 0 }}
            value={items.bubbleval}
          />
          <Text style={[styles.buttonText, { lineHeight: 17 }]}>
            {items.text}
          </Text>
        </TouchableOpacity>
      )
    }
    return _items
  }

  _onScroll(event) {
    let offsetY = event.nativeEvent.contentOffset.y
    if (offsetY > 35) {
      this.setState({
        // 下拉样式
        header: {
          headercol: '#FFF',
          inputtx: '#CCC',
          inputbacg: '#FFF',
          messcol: '#FFF',
          inputWidth: width - 50,
          barStyle: 'dark-content',
          // barStyle: "light-content"
        },
      })
    } else if (offsetY < -20) {
      this.setState({ headerView: false })
    } else {
      this.setState({
        // 初始状态样式
        header: {
          headercol: 'transparent',
          inputtx: '#CCC',
          inputbacg: '#FFF',
          messcol: '#FFF',
          inputWidth: width - 20,
          barStyle: 'light-content',
        },
      })
    }
  }

  _addShopCart(item) {
    if(item.goodsAttrVals && item.goodsAttrVals.length) {
      this.plToast.show('该商品为调色商品，请到商品详情页面下单'); 
      return;
    }
    if(!item.baseDiscountPrice) {
      this.plToast.show('商品暂无价格，无法加入购物车');
      return;
    }
    let postData = dataModel(
      item,
      CUSTOMERINFO.id,
      CUSTOMERINFO.customerRankCode
    )
    this.props.dispatch(createAction('shoppingcart/addShop')(postData))
    this.setState({ isRefreshAdd: this.state.isRefreshAdd })
  }

  render() {
    const {
      fetching,
      hotSaleDatas,
      allProDatas,
      shopListIds,
      announceDatas,
      bannerData,
      bannerTime,
      ReqNumData,
    } = this.props
    let bannerImg = [],
      announceArr = [],
      bannerDate =
        bannerTime && bannerTime.length > 0
          ? accMul(1000, bannerTime[0].autoPlaySpeed || 0.5)
          : 5000
    bannerData.map((item, index) => {
      bannerImg.push(
        <Image
          key={index}
          source={{ uri: ImageBaseUrl + item.imgUrl }}
          resizeMode="stretch"
          style={styles.pngstyle}
        />
      )
    })
    if (announceDatas && announceDatas.length > 0) {
      announceDatas.slice(1, announceDatas.length).map(data => {
        announceArr = announceArr.concat(data.noticeInfoMap)
      })
    }
    return (
      <View style={[styles.container, { backgroundColor: '#FFF' }]}>
        <StatusBar
          animated={true}
          barStyle={this.state.header.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        <ToastView 
          onDismiss={() => {
            //alert('toast消失了');
          }}
          ref={(element) => {
              this.plToast = element;
          }}
        />
        {this.state.headerView ? (
          <ImageBackground
            source={
              this.state.header.headercol == 'transparent' ? inputdef : inputred
            }
            resizeMode="stretch"
            style={{
              position: 'absolute',
              width: width,
              // height: isIphoneX() ? 77 : 60,
              height: HEADERSTYLE.height,
              // paddingTop: isIphoneX() ? 17 : 10,
              paddingTop: isIphoneX() ? HEADERSTYLE.paddingTop : 0,
              // backgroundColor: this.state.header.headercol,
              backgroundColor: 'transparent',
              flexDirection: 'row',
              justifyContent: 'center',
              alignSelf: 'center',
              zIndex: 1,
            }}
          >
            <Input
              touchBool={true}
              touchInput={() => this.mdl._openModal()}
              textInputBacg={this.state.header.inputbacg}
              placeholderTextColor={this.state.header.inputtx}
              iconColor={this.state.header.inputtx}
              iconSize={16}
              style={{
                height: 28,
                width: this.state.header.inputWidth,
                marginTop: 18,
                borderRadius: width / 2,
                alignSelf: 'center',
                paddingLeft: 14,
              }}
            />
            {this.state.header.headercol == 'transparent' ? null : (
              <View
                style={{
                  alignSelf: 'center',
                  paddingLeft: 5,
                  paddingTop: 18,
                }}
              >
                <Icon
                  name="icon-buhuo"
                  size={32}
                  color={this.state.header.messcol}
                  onPress={() => {
                    this.props.dispatch(
                      NavigationActions.navigate({
                        routeName: 'Replenishment',
                      })
                    )
                    // this.props.dispatch(createAction("home/recentViewClear")());
                  }}
                />
              </View>
            )}
          </ImageBackground>
        ) : null}
        <ScrollView
          style={{ flex: 1 }}
          showsHorizontalScrollIndicator={false}
          removeClippedSubviews={true}
          scrollEventThrottle={200}
          style={{ overflow: 'hidden' }}
          onScroll={event => {
            this._onScroll(event)
          }}
          refreshControl={
            <RefreshControl
              refreshing={this.state.isRefreshing}
              onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
              tintColor="red"
              title={this.state.isRefreshing ? '刷新中....' : '下拉刷新'}
            />
          }
          onMomentumScrollEnd={eve => {
            if (eve.nativeEvent.contentOffset.y == 0) {
              this.setState({ headerView: true })
            }
          }}
        >
          <View style={{ height: 310 }}>
            <CarouselHorizontal
              width={width}
              delayTime={bannerDate}
              enableScroll={true}
              tintColor={'#FFF'}
              touchArrStyle={{
                bottom: '6%',
                flexDirection: 'row',
              }}
              imgTouch={a => {
                console.log(a)
              }}
            >
              {bannerImg}
            </CarouselHorizontal>

            <ImageBackground
              resizeMode="stretch"
              source={mask}
              style={{
                position: 'absolute',
                width: width - 16,
                height: 80,
                bottom: 0,
                marginHorizontal: 8,
              }}
            >
              <View
                style={{
                  paddingTop: 10,
                  flexDirection: 'row',
                }}
              >
                {this.touchItem(ReqNumData)}
              </View>
            </ImageBackground>
          </View>

          <View
            style={{
              height: 38,
              width: width - 20,
              marginHorizontal: 10,
              borderRadius: 4,
              marginTop: 10,
              paddingLeft: 10,
              paddingRight: 5,
              alignSelf: 'center',
              justifyContent: 'center',
              backgroundColor: '#F5F5F5',
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.props.dispatch(
                  NavigationActions.navigate({ routeName: 'Announcement' })
                )
              }}
              activeOpacity={1}
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Image
                resizeMode="stretch"
                source={announcePng}
                style={{ width: 64, height: 15, alignSelf: 'center' }}
              />

              <CarouselVertical
                enableAnimation={true}
                data={announceArr}
                // 公告轮播主要内容字段
                content={'title'}
                // 公告轮播例如'火爆'、'热销'等关键字 字段
                title={'totaltitle'}
                delay={2500}
                duration={1000}
                scrollHeight={38}
                textStyle={{
                  fontSize: 13,
                  lineHeight: 18,
                  color: '#333',
                  width: width / 1.6,
                  marginLeft: 2,
                  alignSelf: 'center',
                }}
                titleStyle={{
                  fontSize: 12,
                  color: '#E14C46',
                  fontWeight: 'bold',
                  marginRight: 5,
                }}
              />
              <View
                style={{
                  alignSelf: 'center',
                  height: 20,
                  width: 1,
                  backgroundColor: '#DDD',
                }}
              />
              <Text
                style={{
                  color: '#333',
                  alignSelf: 'center',
                  fontSize: 11,
                  lineHeight: 16,
                }}
              >
                更多>
              </Text>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 1, backgroundColor: '#FFF' }}>
            {hotSaleDatas && hotSaleDatas.length > 0 ? (
              <Grid
                homeLIstBool={true}
                data={
                  hotSaleDatas && hotSaleDatas.length > 2
                    ? hotSaleDatas.slice(0, 2)
                    : hotSaleDatas
                }
                titleName="热卖促销"
                imageSource={homeHotSale}
                nameKey="displayName"
                pictureKey="mainPictureFileUrl"
                priceKey="baseDiscountPrice"
                keyext="id"
                imageTouch={e => {
                  this.gotoDetail(e)
                }}
                shoppingCart={item => {
                  if (item.isOptional) {
                    this.gotoDetail(item)
                  } else {
                    this._addShopCart(item)
                  }
                }}
                titleIcon=""
                shopListIds={shopListIds}
              />
            ) : null}
            <Grid
              titleName="全部商品"
              imageSource={homeAllGoods}
              homeLIstBool={true}
              data={
                allProDatas &&
                allProDatas.content &&
                allProDatas.content.length > 0
                  ? allProDatas.content.length > 8
                    ? allProDatas.content.slice(0, 8)
                    : allProDatas.content
                  : []
              }
              nameKey="displayName"
              pictureKey="mainPictureFileUrl"
              priceKey="baseDiscountPrice"
              keyext="id"
              imageTouch={e => {
                // this.props.dispatch(
                //   createAction("home/getRecentView")({ recentView: e })
                // );
                this.gotoDetail(e)
              }}
              moreTouch={() =>
                // this.props.dispatch(
                //   createAction("search/searchGoodsAll")({
                //     comeFrom: "Home",
                //     searchVal: {
                //       search_customerId: CUSTOMERINFO.id,
                //       search_customerRankCode: CUSTOMERINFO.customerRankCode,
                //       // search_EQ_isOptional: 0,
                //       // search_EQ_enableStrucManage: 0
                //     }
                //   })
                // )
                this.props.dispatch(
                  NavigationActions.navigate({
                    routeName: 'CommodityShowbase',
                    params: { searchval: '' },
                  })
                )
              }
              shoppingCart={item => {
                if (item.isOptional) {
                  this.gotoDetail(item)
                } else {
                  this._addShopCart(item)
                }
              }}
              shopListIds={shopListIds}
            />
            {/* <Grid
              homeLIstBool={true}
              titleName="最近浏览"
              data={recentDatas.slice(0, 2)}
              nameKey="displayName"
              pictureKey="pictureUrl"
              priceKey="salePrice"
              keyext="code"
              imageTouch={e => {
                this.gotoDetail(e);
              }}
              moreTouch={() =>
                this.props.dispatch(
                  NavigationActions.navigate({ routeName: "RecentViewMore" })
                )
              }
            /> */}
          </View>
        </ScrollView>
        <SearchModal
          // cb={data => {
          //   this._refreshPlist(data);
          // }}
          ref={mdl => (this.mdl = mdl)}
          dispatch={this.props.dispatch}
          comFrom={'Home'}
        />
        {/* {fetching ? (
          <View
            style={[
              styles.container,
              {
                position: "absolute",
                width: width,
                height: height,
                justifyContent: "center",
                backgroundColor: "#000",
                opacity: 0.5
              }
            ]}
          >
            <ActivityIndicator />
          </View>
        ) : null} */}
      </View>
    )
  }
}

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

  pngstyle: {
    width: width,
    height: 240,
  },
  buttonStyle: {
    backgroundColor: 'transparent',
    flexDirection: 'column',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 12,
    color: '#333',
  },
})

export default Home