occ-mobile/app/containers/shoppingcart/ShoppingCartHome.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  StatusBar,
  Text,
  TouchableOpacity,
  PixelRatio,
  PanResponder,
  Dimensions,
  ImageBackground,
  ScrollView,
  ActivityIndicator,
  RefreshControl,
} from 'react-native'
import { connect } from 'react-redux'
import Checkbox from '../../components/checkbox/index'
import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../utils'
import { ScaleUtil } from '../../utils/utils'
import ShoppingCart from './ShoppingCart'
import EmptyShop from '../../static/images/Empty-shop.png'
import buttonImg from '../../static/images/home-topred.png'
import Toast from 'react-native-root-toast'

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

@connect(({ theme, shoppingcart }) => ({ ...theme, ...shoppingcart }))
class ShoppingCartHome extends Component {
  constructor(props) {
    super(props)
    this.state = {
      damping: 1 - 0.6,
      tension: 300,
      edited: false,
      secectAll: false,
      change: false,
      Amount: 0,
      Loading: false,
    }
    this._this = []
    console.disableYellowBox = true
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponderCapture: (evt, gestureState) => {
        if (
          this &&
          this._this &&
          this._this[0] &&
          this._this[0].interactableElem
        ) {
          this._this[0].interactableElem.snapTo({ index: 0 })
        }
        return false
      },
    })
  }
  static navigationOptions = ({ navigation, screenProps }) => ({
    tabBarOnPress: obj => {
      obj.jumpToIndex(obj.scene.index)
      navigation.state.params && navigation.state.params.navigatePress()
    },
    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, paddingRight: 4 }}>
          <Icon name="icon-icon-gouwuche" size={28} color={tintColor} />
        </View>
      ) : (
        <View style={{ paddingTop: 7, paddingRight: 4 }}>
          <Icon
            name="icon-icon-gouwuchexuanzhong"
            size={28}
            color={tintColor}
          />
        </View>
      ),
  })

  componentDidMount = () => {
    this.props.navigation.setParams({
      navigatePress: () => this.getCartList(),
    })
    this.getCartList()
  }

  setLoading(bool) {
    this.setState({ Loading: bool })
  }

  getCartList() {
    this.props.dispatch(
      createAction('shoppingcart/getShoppingList')({
        params: {
          customer: CUSTOMERINFO.id,
        },
      })
    )
  }

  onRefresh() {
    this.getCartList()
    // delay(this.setState({ isRefreshing: false }), 500000);
    // this.setState({ headerView: true });
  }

  // 初始化this._this
  initThis() {
    this._this = []
  }

  calAmount(e) {
    let newData = JSON.parse(JSON.stringify(e))
    let amount = 0
    for (val of newData) {
      if (val.isChecked) {
        for (vasec of val.data) {
          amount = vasec.salePrice * vasec.orderNum + amount
        }
      } else {
        for (valsec of val.data) {
          if (valsec.isChecked) {
            amount = valsec.salePrice * valsec.orderNum + amount
          }
        }
      }
    }
    this.setState({ Amount: amount })
  }

  // 删除选中商品
  delSelectCart() {
    const { ShopList } = this.props
    let seletCart = []
    ShopList.forEach(e => {
      seletCart = seletCart.concat(e.data.filter(i => i.isChecked))
    })
    console.log(seletCart)
    if (seletCart.length > 0) {
      this.props.dispatch(
        createAction('shoppingcart/deleteShop')({
          params: {
            customer: CUSTOMERINFO.id,
            id: seletCart.map(e => e.id).join(",")
          },
        })
      )
    }
  }

  // 情况购物车
  async clearCart() {
    await this.props.dispatch(
      createAction('shoppingcart/emptyCart')({
        params: {
          customer: CUSTOMERINFO.id
        },
      })
    )
    this.setState({
      edited: !this.state.edited,
      Amount: 0
    })
  }  

  render() {
    const { appTheme, ShopList, TotalNum } = this.props
    return (
      <View
        {...this.panResponder.panHandlers}
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        <View
          style={{
            height: HEADERSTYLE.height,
            paddingTop: HEADERSTYLE.paddingTop + 5,
            backgroundColor: '#fff',
          }}
        >
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
            }}
          >
            {this.props.navigation.state.params == 'otherToShop' ? (
              <TouchableOpacity
                style={{ position: 'absolute', left: 10, paddingTop: 5 }}
                onPress={() => this.props.dispatch(NavigationActions.back())}
              >
                <Icon name="icon-icon-fanhui" size={24} color={'#666'} />
              </TouchableOpacity>
            ) : null}
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 18,
                lineHeight: 25,
                letterSpacing: 0.22,
                color: '#333',
              }}
            >
              购物车
            </Text>
            {ShopList && ShopList.length > 0 ? (
              <TouchableOpacity
                style={{ position: "absolute", right: 10 }}
                onPress={() => {
                  this.setState({
                    edited: !this.state.edited,
                    secectAll: false,
                    change: false
                  });
                  this.initThis();
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: "#666"
                  }}
                >
                  {this.state.edited ? '完成' : '编辑'}
                </Text>
              </TouchableOpacity>
            ) : null}
          </View>
        </View>

        {ShopList && ShopList.length > 0 ? (
          <ScrollView
            style={{ flex: 1 }}
            showsHorizontalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                refreshing={this.props.isRefreshing}
                onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
              />
            }
          >
            <ShoppingCart
              onRefresh={this.onRefresh.bind(this)}
              pressLoading={e => this.setLoading(e)}
              ref={mdl => (this.mdl = mdl)}
              dispatch={this.props.dispatch}
              ShopList={ShopList}
              secectAll={this.state.secectAll}
              edited={this.state.edited}
              change={this.state.change}
              totalnum={TotalNum}
              secectOnchange={bool => {
                this.setState({ secectAll: bool, change: false })
              }}
              calAmount={e => this.calAmount(e)}
              addThis={e => {
                let ShopThis = this,
                  itemData = []
                if (ShopThis._this.length == 0) {
                  ShopThis._this.push(e)
                } else {
                  for (let i in ShopThis._this) {
                    itemData.push(ShopThis._this[i].state.itemData)
                  }
                  if (e && itemData.indexOf(e.state.itemData) == -1) {
                    ShopThis._this.push(e)
                  }
                }

                if (
                  ShopThis._this.length == 2 &&
                  ShopThis._this[0].interactableElem
                ) {
                  ShopThis._this[0].interactableElem.snapTo({ index: 0 })
                  ShopThis._this.splice(0, 1)
                }
              }}
            />
          </ScrollView>
        ) : (
          <ScrollView
            style={{ flex: 1 }}
            showsHorizontalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                refreshing={this.props.isRefreshing}
                onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                tintColor="red"
                title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
              />
            }
          >
            <ImageBackground
              resizeMode="contain"
              source={EmptyShop}
              style={{
                flex: 1,
                width: width - 80,
                height: height / 1.5,
                alignSelf: 'center',
              }}
            >
              <View
                style={{
                  position: 'absolute',
                  bottom: '15%',
                  alignSelf: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: '#999',
                  }}
                >
                  购物车是空的哦~
                </Text>
              </View>
            </ImageBackground>
          </ScrollView>
        )}

        {/* 底部 */}
        <View
          style={{
            height:
              this.props.navigation.state.params == 'otherToShop'
                ? 45 + HEADERSTYLE.paddingBottom
                : 45,
            paddingBottom:
              this.props.navigation.state.params == 'otherToShop'
                ? HEADERSTYLE.paddingBottom
                : 0,
            backgroundColor: '#fff',
            flexDirection: 'row',
            borderTopColor: '#EEE',
            borderTopWidth: 1 / PixelRatio.get(),
          }}
        >
          <View
            style={{
              flex: 6,
              flexDirection: 'row',
              justifyContent: 'space-between',
              paddingHorizontal: 10,
            }}
          >
            {this.state.edited ? (
              <View style={{ justifyContent: 'center', marginBottom: 5 }}>
                <Checkbox
                  checkBoxColor={'#CCC'}
                  checked={this.state.secectAll}
                  size={22}
                  label={
                    <Text
                      style={{
                        fontSize: 14,
                        lineHeight: 20,
                        color: '#333',
                      }}
                    >
                      全选
                    </Text>
                  }
                  onChange={bool =>
                    this.setState({
                      secectAll: bool,
                      change: true,
                    })
                  }
                />
              </View>
            ) : null}
            {this.state.edited ? (
              <TouchableOpacity style={{ alignSelf: 'center' }}
                onPress={
                  () => {
                    if (this.toast) {
                      Toast.hide(this.toast)
                    }
                    console.log(ShopList);
                    if (!this.state.Loading && ShopList && ShopList.length > 0) {
                      this.delSelectCart()
                    } else {
                      this.toast = Toast.show('购物车为空！', {
                        position: toastHeight,
                      })
                    }
                  }
                }
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    color: '#333',
                  }}
                >
                  删除选中商品
                </Text>
              </TouchableOpacity>
            ) : (
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 14,
                  lineHeight: 20,
                  color: '#333',
                }}
              >
                合计：<Text
                  style={{
                    fontSize: 16,
                    lineHeight: 20,
                    color: '#E14C46',
                  }}
                >
                  {CURRENCY.currencySign}
                  {ScaleUtil(this.state.Amount, CURRENCY.currencyAmountScale)}
                </Text>
              </Text>
            )}
          </View>
          {this.state.edited ? (
            <TouchableOpacity
              onPress={
                async () => {
                  if (this.toast) {
                    Toast.hide(this.toast)
                  }
                  if (!this.state.Loading) {
                    this.clearCart()
                  } else {
                    this.toast = Toast.show('购物车为空！', {
                      position: toastHeight,
                    })
                  }
                }
              }            
              style={{
                flex: 3,
                justifyContent: 'center',
              }}
            >
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 14,
                  lineHeight: 20,
                  color: '#333',
                }}
              >
                清空购物车
              </Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              activeOpacity={this.state.Loading ? 1 : 0}
              onPress={() => {
                if (this.toast) {
                  Toast.hide(this.toast)
                }
                if (!this.state.Loading && ShopList && ShopList.length > 0) {
                  console.log(ShopList);
                  this.mdl._settleTou()
                } else {
                  this.toast = Toast.show('购物车为空！', {
                    position: toastHeight,
                  })
                }

                // ? null
                // : ShopList && ShopList.length > 0
                //   ? this.mdl._settleTou()
                //   : alert("购物车为空！")
              }}
              style={{
                flex: 3,
                backgroundColor:
                  ShopList && ShopList.length > 0 ? '#E70013' : '#969696',
                justifyContent: 'center',
              }}
            >
              {this.state.Loading ? (
                <ActivityIndicator />
              ) : (
                <Text
                  style={{
                    alignSelf: 'center',
                    fontSize: 14,
                    lineHeight: 20,
                    color: '#fff',
                  }}
                >
                  结算
                </Text>
              )}
            </TouchableOpacity>
          )}
        </View>
      </View>
    )
  }
}

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

export default ShoppingCartHome