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

import React, { Component } from 'react'
import {
  View,
  Image,
  Text,
  PixelRatio,
  SectionList,
  TouchableOpacity,
  ImageBackground,
} from 'react-native'

import CountNum from '../../components/CountNum'
import Checkbox from '../../components/checkbox/index'
import png from '../../static/images/defaultimg.jpg'
import Row from './SwipeList'
import Collapsible from 'react-native-collapsible'
import Icon from '../../components/Iconfont/Iconfont'
import dropDown from '../../static/images/shop-dropdown.png'
import { NavigationActions, createAction } from '../../utils'
import { ScaleUtil, accMul } from '../../utils/utils'
import { ImageBaseUrl } from '../../utils/fetch/Fetchx'
import Toast from 'react-native-root-toast'

class ShoppingCart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // data: this.props.ShopList,
      sectionActive: 'aaasd',
      reflish: true,
      deleteId: '',
      selectSup: '',
      clickNum: 0,
    }
  }

  checkStockNum(data) {
    lessStock = []
    data.map(item => {
      if (item.stock < 1) {
        lessStock.push(item.goodsDisplayName)
      }
    })
    return lessStock
  }

  async _settleTou() {
    let newShopData = JSON.parse(JSON.stringify(this.props.ShopList)),
      editData = [],
      // 供应商或销售商
      SaleOrSupplier = {}
    const cartIds = []

    for (val of newShopData) {
      for (valSec of val.data) {
        if (valSec.isChecked) {
          editData.push(valSec)
        }
      }
    }
    if (this.toast) {
      Toast.hide(this.toast)
    }
    if (editData && editData.length > 0) {
      // if (this.checkStockNum(editData).length > 0) {
      //   let lessStockName = this.checkStockNum(editData).join()
      //   this.toast = Toast.show(
      //     `您所选的商品: ${lessStockName}\n库存不足，请重新选择！`,
      //     { position: toastHeight }
      //   )
      // } else {
        // 测试时 如果没有价格 加个 editData[0].salePrice =100
        let index = 1;
        for (data of editData) {
          cartIds.push(data.id)
          delete data.isChecked
          data.id = null
          data.rowNum = index * 10 + ""
          index++
          data.promPrice = data.salePrice
          data.dealPrice = data.salePrice
          data.isGift = 0
          if (!data.goodsName) {
            data.goodsName = data.goodsDisplayName
          } else if (!data.goodsDisplayName) {
            data.goodsDisplayName = data.goodsName
          }

          // data.currency = currency.id;
          // data.currencySign = currency.currencySign;
          // data.currencyPriceScale = currency.currencyPriceScale || 2; // 币种单价精度
          // data.currencyAmountScale = currency.currencyAmountScale || 2; // 币种金额精度
          // data.stock = data.stockNum;
          data.mainNum = accMul(data.orderNum, data.conversionRate)
          data.amount = accMul(data.salePrice, data.orderNum)
          data.dealAmount = accMul(data.salePrice, data.orderNum)
        }
        SaleOrSupplier.SaleOrSupplierId =
          editData[0].saleOrgId || editData[0].supplierId
        SaleOrSupplier.SaleOrSupplierName =
          editData[0].saleOrgName || editData[0].supplierName
        SaleOrSupplier.SaleOrSupplierCode =
          editData[0].saleOrgCode || editData[0].supplierCode
        SaleOrSupplier.isPrimaryChannel = editData[0].isPrimaryChannel
        this.props.pressLoading(true)
        // 促销服务请求
        await this.props.dispatch(
          createAction('orderedit/getProm')({
            promInfo: {
              customerId: CUSTOMERINFO.id,
              saleOrgId: SaleOrSupplier.SaleOrSupplierId,
              reqOrderItems: editData,
              isPrimaryChannel: SaleOrSupplier.isPrimaryChannel,
            },
          })
        )
        this.props.pressLoading(false)

        this.props.dispatch(
          NavigationActions.navigate({
            routeName: 'OrderEdit',
            params: {
              ShopData: editData,
              SaleOrSupplier: SaleOrSupplier,
              cartId: cartIds,
            },
          })
        )
      // }
    } else {
      this.toast = Toast.show('请选择商品再结算！', { position: toastHeight })
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.edited !== this.props.edited) {
      for (val of this.props.ShopList) {
        val.isChecked = false
        for (valSec of val.data) {
          valSec.isChecked = false
        }
      }
    }
    if (nextProps.change) {
      if (nextProps.secectAll) {
        for (let val of this.props.ShopList) {
          val.isChecked = true
          val.data.map(item => {
            item.isChecked = true
          })
        }
        this.setState({ reflish: !this.state.reflish })
      } else {
        for (let val of this.props.ShopList) {
          val.isChecked = false
          val.data.map(item => {
            item.isChecked = false
          })
        }
        this.setState({ reflish: !this.state.reflish })
      }
    }
  }

  Header(section) {
    return (
      <View>
        <View
          style={{
            height: 10,
            backgroundColor: '#F5F5F5',
            borderBottomColor: '#ddd',
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        />
        <View
          style={{
            backgroundColor: '#FAFAFA',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingRight: 10,
            paddingLeft: 5,
            paddingBottom: 5,
          }}
        >
          <Checkbox
            checked={section.isChecked}
            size={30}
            onChange={bool => {
              if (this.props.edited) {
                // 编辑状态下
                section.isChecked = bool
                if (section.isChecked) {
                  for (let item of section.data) {
                    item.isChecked = true
                  }
                } else {
                  for (let item of section.data) {
                    item.isChecked = false
                  }
                }
                if (
                  this.props.ShopList.every(items => items.isChecked == true)
                ) {
                  this.props.secectOnchange(true)
                } else {
                  this.props.secectOnchange(false)
                }
              } else {
                // 非编辑状态下
                if (
                  this.props.ShopList.some(
                    item =>
                      Object.keys(item).indexOf('isChecked') !== -1 &&
                      item.isChecked == true
                  )
                ) {
                  for (val of this.props.ShopList) {
                    val.isChecked = false
                    for (secVal of val.data) {
                      secVal.isChecked = false
                    }
                  }
                  section.isChecked = bool
                } else {
                  for (val of this.props.ShopList) {
                    for (valsec of val.data) {
                      if (valsec.isChecked) {
                        if (valsec.saleOrgId !== section.saleOrgId) {
                          valsec.isChecked = false
                        }
                      }
                    }
                  }
                  section.isChecked = bool
                }
                this.props.calAmount(this.props.ShopList)
              }
              if (section.isChecked) {
                for (let item of section.data) {
                  item.isChecked = true
                }
              } else {
                for (let item of section.data) {
                  item.isChecked = false
                }
              }

              this.setState({
                selectSup: section.saleOrgId,
              })
            }}
            label={
              <View
                style={{
                  justifyContent: 'center',
                  paddingBottom: 4,
                  marginLeft: 5,
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 20,
                    letterSpacing: 0.17,
                    color: '#333',
                  }}
                >
                  {section.saleOrgName}
                </Text>
              </View>
            }
          />
          <TouchableOpacity
            onPress={() =>
              this.state.sectionActive !== section.saleOrgName
                ? this.setState({ sectionActive: section.saleOrgName })
                : this.setState({ sectionActive: 'aaaasd' })
            }
            style={{ alignSelf: 'center' }}
          >
            <Icon name="icon-icon-gouwuguolvpaixu" size={24} color="#999" />
          </TouchableOpacity>
          <View
            style={{
              position: 'absolute',
              top: 28,
              right: 3,
              backgroundColor: 'transparent',
            }}
          >
            <Collapsible
              collapsed={this.state.sectionActive !== section.saleOrgName}
            >
              <ImageBackground
                source={dropDown}
                resizeMode="stretch"
                style={{
                  width: 130,
                  paddingTop: 10,
                }}
              >
                <View
                  style={{
                    paddingVertical: 15,
                    alignSelf: 'center',
                  }}
                >
                  <TouchableOpacity
                    onPress={() => {
                      section.data.sort((a, b) => a.goodsCode - b.goodsCode)
                      this.setState({ sectionActive: 'aaasd' })
                    }}
                    style={{
                      flexDirection: 'row',
                    }}
                  >
                    <Text
                      style={{ fontSize: 12, lineHeight: 17, color: '#333' }}
                    >
                      按编码正序
                    </Text>
                    <Icon
                      name="icon-icon-paixutubiao"
                      style={{
                        marginLeft: 10,
                        transform: [{ rotate: '90deg' }],
                        alignSelf: 'center',
                      }}
                      size={18}
                      color={'#E70013'}
                    />
                  </TouchableOpacity>

                  <TouchableOpacity
                    onPress={() => {
                      section.data.sort((a, b) => b.goodsCode - a.goodsCode)
                      this.setState({ sectionActive: 'aaasd' })
                    }}
                    style={{
                      marginTop: 14,
                      flexDirection: 'row',
                    }}
                  >
                    <Text
                      style={{ fontSize: 12, lineHeight: 17, color: '#333' }}
                    >
                      按编码倒序
                    </Text>
                    <Icon
                      name="icon-icon-paixutubiao"
                      style={{
                        marginLeft: 10,
                        alignSelf: 'center',
                        transform: [{ rotate: '-90deg' }],
                      }}
                      size={18}
                      color={'#E70013'}
                    />
                  </TouchableOpacity>
                </View>
                <TouchableOpacity
                  onPress={() => {
                    section.data.sort((a, b) => a.creationTime - b.creationTime)
                    this.setState({ sectionActive: 'aaasd' })
                  }}
                  style={{
                    paddingTop: 10,
                    paddingBottom: 15,
                    borderTopColor: '#EEE',
                    borderTopWidth: 1 / PixelRatio.get(),
                  }}
                >
                  <Text
                    style={{
                      fontSize: 12,
                      lineHeight: 17,
                      color: '#999',
                      alignSelf: 'center',
                    }}
                  >
                    取消排序
                  </Text>
                </TouchableOpacity>
              </ImageBackground>
            </Collapsible>
          </View>
        </View>
      </View>
    )
  }

  ListItem(item, index) {
    return (
      <View
        style={{
          paddingBottom: 10,
          borderBottomWidth: 2,
          borderBottomColor: '#f5f5f5',
        }}
      >
        <Row
          item={item}
          itemData={item.id}
          customerId={item.customerId}
          dispatch={this.props.dispatch}
          addThis={e => this.props.addThis && this.props.addThis(e)}
          deleteTouch={e => {
            this.props.onRefresh()
            this.setState({ deleteId: e })
          }}
        >
          <View
            style={{
              flex: 1,
              flexDirection: 'row',
              paddingLeft: 6,
              paddingRight: 10,
              paddingTop: 10,
            }}
          >
            <Checkbox
              checkBoxColor={'#CCC'}
              checked={item.isChecked}
              size={28}
              onChange={bool => {
                if (this.props.edited) {
                  // 编辑状态
                  item.isChecked = bool
                  for (let val of this.props.ShopList) {
                    if (item.saleOrgId == val.saleOrgId) {
                      if (val.data.every(item => item.isChecked == true)) {
                        val.isChecked = true
                      } else {
                        val.isChecked = false
                      }
                    }
                  }
                  if (
                    this.props.ShopList.every(
                      itemsec => itemsec.isChecked == true
                    )
                  ) {
                    this.props.secectOnchange(true)
                  } else {
                    this.props.secectOnchange(false)
                  }
                } else {
                  // 费编辑状态下
                  if (this.state.clickNum == 0) {
                    item.isChecked = bool
                  }
                  if (item.saleOrgId == this.state.selectSup) {
                    item.isChecked = bool
                  } else {
                    for (val of this.props.ShopList) {
                      val.isChecked = false
                      for (secVal of val.data) {
                        secVal.isChecked = false
                      }
                    }
                    item.isChecked = bool
                  }
                  for (let valth of this.props.ShopList) {
                    if (item.saleOrgName == valth.saleOrgName) {
                      if (valth.data.every(item => item.isChecked == true)) {
                        valth.isChecked = true
                      } else {
                        valth.isChecked = false
                      }
                    }
                  }
                  this.props.calAmount(this.props.ShopList)
                }
                this.setState({
                  clickNum: this.state.clickNum + 1,
                  selectSup: item.saleOrgId,
                })
              }}
            />
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                paddingLeft: 6,
                paddingBottom: 3,
                borderBottomColor: '#f5f5f5',
                borderBottomWidth: 1,
              }}
            >
              <Image
                style={{ width: 80, height: 80, marginTop: 5 }}
                source={{ uri: ImageBaseUrl + item.goodsImg } || png}
                resizeMode="cover"
              />
              <View style={{ flex: 1, marginLeft: 10 }}>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    color: '#333',
                    marginBottom: 3,
                  }}
                >
                  {item.goodsDisplayName}
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#999',
                    marginBottom: 3,
                  }}
                >
                  编码：{item.goodsCode}
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#999',
                    marginBottom: 3,
                  }}
                >
                  {/* 型号：{item.model?(item.model.length>10?item.model.substr(0,10)+"...":item.model):""} */}
                  型号：{item.model?item.model:""}
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#999',
                    marginBottom: 3,
                  }}
                >
                  规格：{item.specification?(item.specification.split("/")[0]+"/"+item.mainNumUnitName):""}
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 17,
                    color: '#999',
                    marginBottom: 3,
                  }}
                >
                  颜色：{item.baseGoodsOptValue}
                </Text>
                <View
                  style={{
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  {/* <Text style={{ fontSize: 12, lineHeight: 17, color: '#999' }}>
                    库存：{item.stock} 件
                  </Text> */}
                  <Text
                    style={{
                      fontSize: 12,
                      lineHeight: 17,
                      color: '#333',
                    }}
                  >
                    {CURRENCY.currencySign}
                    {item.salePrice || item.basePrice}/件
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </Row>
        <View
          style={{
            flexDirection: 'row',
            paddingLeft: 33,
            paddingTop: 10,
            paddingRight: 10,
          }}
        >
          <CountNum
            defaultValue={item.orderNum}
            size={30}
            fontSize={18}
            callback={nv => {
              item.mainNum = accMul(item.orderNum, item.conversionRate)
              this.props.dispatch(
                createAction('shoppingcart/editShop')({
                  item: item,
                  cbNumber: nv,
                })
              )
              this.props.calAmount(this.props.ShopList)
            }}
          />
          <View
            style={{
              flex: 1,
              paddingLeft: 10,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              主数量：{accMul(item.orderNum, item.conversionRate)}
              {item.mainNumUnit}
            </Text>
            <Text
              style={{
                fontSize: 12,
                lineHeight: 17,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              金额：<Text style={{ fontSize: 14, color: '#E14C46' }}>
                {CURRENCY.currencySign}
                {item.salePrice
                  ? accMul(item.orderNum, item.salePrice)
                  : accMul(item.orderNum, item.basePrice || 0)}
              </Text>
            </Text>
          </View>
        </View>
      </View>
    )
  }

  render() {
    extradata = { ...this.state, ...this.props }
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#fff',
          marginBottom: 2,
        }}
      >
        <SectionList
          keyExtractor={(item, index) => index}
          extraData={extradata}
          renderSectionHeader={({ section }) => this.Header(section)}
          renderItem={({ item, index }) => this.ListItem(item, index)}
          stickySectionHeadersEnabled={true}
          sections={this.props.ShopList}
        />
      </View>
    )
  }
}

export default ShoppingCart