occ-mobile/app/containers/order/orderamanage/OrderGifts.js

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

import Checkbox from '../../../components/checkbox/index'
import CountNum from '../../../components/CountNum'
import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import { accMul, accDiv, accAdd, accSub } from '../../../utils/utils'
import png from '../../../static/images/defaultimg.jpg'
import { ImageBaseUrl } from '../../../utils/fetch/Fetchx'

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

@connect(({ theme }) => ({ ...theme }))
class OrderGifts extends Component {
  constructor(props) {
    super(props)
    this.state = {
      giftProms: [],
    }
  }

  componentDidMount = () => {
    const { giftProms } = JSON.parse(
      JSON.stringify(this.props.navigation.state.params)
    )
    giftProms.forEach(element => {
      element.data.map(item => {
        item.orderNum = item.goodsAmout
        item.mainNum = item.goodsAmout
      })
    })
    this.setState({ giftProms: giftProms })
  }

  // 头部
  header() {
    return (
      <View
        style={{
          height: HEADERSTYLE.height,
          paddingTop: HEADERSTYLE.paddingTop + 5,
          backgroundColor: '#fff',
          borderBottomColor: '#eee',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
          }}
        >
          <TouchableOpacity
            style={{ position: 'absolute', left: 10, flexDirection: 'row' }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-fanhui"
              size={20}
              color={'#666'}
              style={{ marginTop: 4 }}
            />
            <Text
              style={{
                fontSize: 14,
                lineHeight: 20,
                color: '#666',
                alignSelf: 'center',
              }}
            >
              返回
            </Text>
          </TouchableOpacity>
          <Text
            style={{
              alignSelf: 'center',
              fontSize: 18,
              lineHeight: 25,
              letterSpacing: 0.19,
              color: '#333',
            }}
          >
            赠品
          </Text>
        </View>
      </View>
    )
  }

  // 底部按钮
  bottomTouch() {
    let touchArr = [],
      touchAtt = [
        {
          touchName: '取消',
          background: '#FFF',
          textColor: '#666',
          itemonpress: () => {
            this.props.dispatch(NavigationActions.back())
            // this.state.giftProms.forEach(element => {
            //   element.map(item => delete item.isChecked);
            // });
            // this.props.dispatch(NavigationActions.back());
          },
        },
        {
          touchName: '确定',
          background: '#E70013',
          textColor: '#FFF',
          itemonpress: () => {
            let giftReturn = []
            this.state.giftProms.forEach(element => {
              element.data.map(item => {
                if (
                  item &&
                  Object.keys(item).indexOf('isChecked') != -1 &&
                  item.isChecked
                ) {
                  delete item.isChecked
                  delete item.editable
                  delete item.touchSpan
                  delete item.touchDisabledAdd
                  item.reqOrderPromRels = [
                    {
                      ruleId: element.ruleId,
                      ruleCode: element.ruleCode,
                      ruleName: element.ruleName,
                      activityId: element.activityId,
                      activityCode: element.activityCode,
                      activityName: element.activityName,
                      giftId: item.giftId,
                      description: element.description,
                      combineType: element.combineType, // 组合类型 1 固定组合
                      goodCombineNum: element.goodCombineNum, // 固定组合类商品基准数量
                      promWay: 1, // 1 买赠 2 降价
                      isWhole: 0,
                    },
                  ]
                  giftReturn.push(item)
                }
              })
            })
            this.props.navigation.state.params.giftCb(giftReturn)
            this.props.dispatch(NavigationActions.back())
          },
        },
      ]
    for (let i = 0; i < touchAtt.length; i++) {
      touchArr.push(
        <TouchableOpacity
          onPress={() => touchAtt[i].itemonpress()}
          key={i}
          style={{
            flex: 1,
            backgroundColor: touchAtt[i].background,
            justifyContent: 'center',
            borderRightColor: '#eee',
            borderRightWidth: 1 / PixelRatio.get(),
          }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              color: touchAtt[i].textColor,
              alignSelf: 'center',
            }}
          >
            {touchAtt[i].touchName}
          </Text>
        </TouchableOpacity>
      )
    }
    return touchArr
  }

  //   列表头部
  Header(section) {
    let promWay = section.promWay == 1 ? '买赠' : '降价'
    return (
      <View
        style={{
          marginTop: 10,
          backgroundColor: '#FFF',
          padding: 10,
          flexDirection: 'row',
          borderBottomColor: '#EEE',
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View
          style={{
            paddingVertical: 1,
            paddingHorizontal: 4,
            borderRadius: 100,
            backgroundColor: '#E70013',
          }}
        >
          <Text style={{ fontSize: 12, lineHeight: 14, color: '#FFF' }}>
            {promWay}
          </Text>
        </View>
        <Text
          numberOfLines={1}
          style={{
            flex: 1,
            fontSize: 12,
            lineHeight: 17,
            color: '#333',
            marginLeft: 10,
          }}
        >
          {section.description}
        </Text>
      </View>
    )
  }

  ListItem(item) {
    console.log(item);
    return (
      <View
        style={{
          backgroundColor: '#FFF',
          flex: 1,
          paddingTop: 10,
          paddingLeft: 5,
          paddingRight: 10,
          flexDirection: 'row',
        }}
      >
        <Checkbox
          checkBoxColor={'#CCC'}
          checked={item.isChecked}
          size={28}
          onChange={bool => this.checkBoxCb(item, bool)}
        />
        <View
          style={{
            flex: 1,
            marginLeft: 6,
            flexDirection: 'row',
            borderBottomColor: '#EEE',
            borderBottomWidth: 1 / PixelRatio.get(),
            paddingBottom: 10,
          }}
        >
          <Image
            style={{ width: 80, height: 80, marginTop: 5 }}
            source={item.goodsImg ? { uri: ImageBaseUrl + item.goodsImg } : png}
            resizeMode="cover"
          />
          <View
            style={{
              flex: 1,
              marginLeft: 10,
            }}
          >
            <Text
              style={{ flex: 1, fontSize: 13, lineHeight: 18, color: '#333' }}
            >
              {item.goodsDisplayName}
            </Text>
            <View style={{ alignSelf: 'flex-end' }}>
              <CountNum
                defaultValue={item.orderNum}
                size={28}
                touchSpan={item.touchSpan || 1}
                editable={true}
                touchDisabledAdd={item.touchDisabledAdd}
                maxValue={accDiv(item.goodsAmout, item.conversionRate)}
                minValue={item.goodCombineNum ? item.goodCombineNum : 1}
                callback={nv => this.countNumCb(item, nv)}
              />
            </View>
          </View>
        </View>
      </View>
    )
  }

  // 数量变化函数
  countNumCb(item, nv) {
    let addFlag = true
    if (item.combineType == 1) {
      if (accMul(nv, item.conversionRate) > item.goodsAmout) {
        item.orderNum = item.goodsAmout
        item.mainNum = accMul(item.orderNum, item.conversionRate)
      } else {
        if (item.isChecked) {
          if (item.combineType && item.combineType == 1 && nv > item.orderNum) {
            this.state.giftProms.forEach(element =>
              element.data.map(value => {
                if (value.giftId == item.giftId) {
                  value.orderNum = accAdd(value.orderNum, value.goodCombineNum)
                  value.mainNum = accMul(value.orderNum, value.conversionRate)
                  if (value.mainNum >= value.goodsAmout) {
                    value.touchDisabledAdd = true
                    addFlag = false
                  }
                }
              })
            )
          } else {
            this.state.giftProms.forEach(element =>
              element.data.map(value => {
                if (value.giftId == item.giftId) {
                  value.orderNum = accSub(value.orderNum, value.goodCombineNum)
                  if (value.orderNum <= value.goodCombineNum) {
                    value.orderNum = value.goodCombineNum
                  }
                  value.mainNum = accMul(value.orderNum, value.conversionRate)
                  value.touchDisabledAdd = false
                }
              })
            )
            addFlag = false
          }
        }
      }
    }
    if (addFlag) {
      item.orderNum = nv
      item.mainNum = accMul(item.orderNum, item.conversionRate)
    }
    this.setState({ giftProms: this.state.giftProms })
  }

  // 勾选框变化函数
  checkBoxCb(item, bool) {
    item.isChecked = bool
    if (item.combineType == 1) {
      if (item.isChecked) {
        item.orderNum = item.goodCombineNum
        item.mainNum = accMul(item.orderNum, item.conversionRate)
        item.touchSpan = item.goodCombineNum
        item.editable = false
        this.forGiftProm(item, true)
      } else {
        item.orderNum = 1
        item.touchSpan = 1
        this.forGiftProm(item, false)
      }

      this.setState({ giftProms: this.state.giftProms })
    }
  }

  // 遍历所有商品
  forGiftProm(item, bool) {
    this.state.giftProms.forEach(element =>
      element.data.map(value => {
        if (value.giftId == item.giftId) {
          value.isChecked = bool
          value.orderNum = bool ? value.goodCombineNum || 1 : 1
          value.mainNum = accMul(value.orderNum, value.conversionRate)
          value.touchSpan = bool ? value.goodCombineNum || 1 : 1
          value.editable = false
        }
      })
    )
  }

  render() {
    const { appTheme } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        {this.header()}

        {/* 列表 */}
        <SectionList
          keyExtractor={(item, index) => index}
          extraData={this.state}
          renderItem={({ item, index }) => this.ListItem(item, index)}
          stickySectionHeadersEnabled={true}
          renderSectionHeader={({ section }) => this.Header(section)}
          sections={this.state.giftProms}
        />
        <View
          style={{
            height: 10,
            width: width,
            position: 'absolute',
            top: 60,
            backgroundColor: appTheme.backgroundColor,
          }}
        />

        {/* 底部 */}
        <View
          style={{
            height: 45,
            backgroundColor: '#FFF',
            flexDirection: 'row',
          }}
        >
          {this.bottomTouch()}
        </View>
      </View>
    )
  }
}

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

export default OrderGifts