occ-mobile/app/containers/commodity/commoditydetail/Tab.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  StatusBar,
  PixelRatio,
  TouchableOpacity,
  Text,
  Animated,
  Easing,
} from 'react-native'
import { connect } from 'react-redux'
import ScrollableTabView from 'react-native-scrollable-tab-view'

import { NavigationActions, createAction } from '../../../utils'
import DetailTabBar from './TabBar'
import Bubble from '../../../components/Bubble'
import Icon from '../../../components/Iconfont/Iconfont'
import Commodity from './Commodity'
import Detail from './Details'
import dataModel, { AddAttentModal } from '../../common/datamodel/dataModel'
import Toast from 'react-native-root-toast'

@connect(({ theme, detail, shoppingcart, attention }) => ({
  ...theme,
  ...detail,
  ...shoppingcart,
  ...attention,
}))
class CommodityDetail extends Component {
  constructor() {
    super()
    this.state = {
      isLocked: false,
      heightValue: new Animated.Value(0),
      widthValue: new Animated.Value(0),
      openSpec: false,
    }
  }

  componentDidMount = () => {
    this.props.dispatch(
      createAction('shoppingcart/getShoppingList')({
        params: {
          customer: CUSTOMERINFO.id,
        },
      })
    )
    this.props.dispatch(createAction('attention/getAttentionList')())
    // 获取购物车数量
    this.getCartNum()
  }

  getCartNum() {
    // 获取购物车数量
    this.props.dispatch(
      createAction('shoppingcart/getCartNum')({ customer: CUSTOMERINFO.id })
    )
  }

  render() {
    const {
      appTheme,
      detailDatas,
      TotalNum,
      attentData,
      shopListIds,
    } = this.props
    const aheight = this.state.heightValue.interpolate({
      inputRange: [0, 0.25, 0.5, 0.75, 1],
      outputRange: [0, 50, 75, 50, 0],
    })
    const awidth = this.state.heightValue.interpolate({
      inputRange: [0, 0.25, 0.5, 0.75, 1],
      outputRange: [100, 140, 160, 180, 200],
    })
    let attentGoodIds = [],
      shopCartShow = false
    if (attentData && attentData.length > 0) {
      attentData.map(data => {
        attentGoodIds.push(data.goodsId)
      })
    }
    if (detailDatas && detailDatas.id && attentGoodIds.length > 0) {
      if (attentGoodIds.indexOf(detailDatas.id) !== -1) {
        detailDatas.isAttention = true
      }
    }
    if (
      shopListIds &&
      shopListIds.length > 0 &&
      shopListIds.indexOf(detailDatas.id) !== -1
    ) {
      shopCartShow = true
    }
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: this.state.backgroundColor,
        }}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          backgroundColor={'transparent'}
          translucent={true}
        />
        <View style={{ height: 20, backgroundColor: '#FFF' }} />
        <View style={{ flex: 1 }}>
          <ScrollableTabView
            locked={true}
            style={{ backgroundColor: '#FFF' }}
            initialPage={0}
            renderTabBar={() => <DetailTabBar dispatch={this.props.dispatch} />}
            scrollEnabled={this.state.isLocked}
            // onChangeTab={e => {
            //   console.log(e);
            // }}
          >
            <Commodity
              // userFor={this.props.na}
              openSpecification={e => {
                console.log(e)
              }}
              tabLabel="商品"
              TabopenSpec={this.state.openSpec}
              // style={styles.tabView}
            />
            {detailDatas.description ? <Detail tabLabel="详情" /> : null}
            {/* <DetailComponent tabLabel="子件" /> */}
          </ScrollableTabView>
        </View>
        <Animated.Image
          source={require('../../../static/images/MineHome-5.png')}
          style={{
            width: 20,
            height: 20,
            position: 'absolute',
            bottom: aheight,
            right: awidth,
          }}
        />
        <View
          style={{
            height: 45 + HEADERSTYLE.paddingBottom,
            paddingBottom: HEADERSTYLE.paddingBottom,
            backgroundColor: '#FFF',
            borderTopColor: '#ddd',
            borderTopWidth: 1 / PixelRatio.get(),
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          {/* 关注 */}
          <TouchableOpacity
            onPress={() => {
              if (detailDatas.isAttention) {
                detailDatas.isAttention = false
                this.props
                  .dispatch(
                    createAction('attention/delAttentionByGoodsId')({
                      goodsId: detailDatas.id,
                      saleOrg: detailDatas.saleOrgId,
                    })
                  )
                  .catch(err => (detailDatas.isAttention = true))
              } else {
                let returnData = AddAttentModal(
                  detailDatas,
                  CUSTOMERINFO.id,
                  CUSTOMERINFO.customerRankCode
                )
                this.props.dispatch(
                  createAction('attention/addAttention')(returnData)
                )
              }
            }}
            style={{
              flex: 2,
              alignSelf: 'center',
              alignItems: 'center',
            }}
          >
            {detailDatas.isAttention ? (
              <View>
                <Icon
                  name="icon-icon-guanzhuyiguanzhu"
                  size={24}
                  color="#E70013"
                  style={{ alignSelf: 'center' }}
                />
                <Text
                  style={{
                    fontSize: 10,
                    color: '#666',
                    lineHeight: 14,
                  }}
                >
                  取消关注
                </Text>
              </View>
            ) : (
              <View>
                <Icon name="icon-icon-qiuguanzhu" size={24} color={'#333'} />
                <Text
                  style={{
                    fontSize: 10,
                    color: '#666',
                    lineHeight: 14,
                    alignSelf: 'center',
                  }}
                >
                  关注
                </Text>
              </View>
            )}
          </TouchableOpacity>
          {/* 购物车 */}
          <View
            style={{
              flex: 2,
              borderLeftColor: '#EEE',
              borderLeftWidth: 1 / PixelRatio.get(),
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.props.dispatch(
                  NavigationActions.navigate({
                    routeName: 'ShoppingCartHome',
                    params: 'otherToShop',
                  })
                )
              }}
              style={{
                flex: 1,
                paddingHorizontal: 8,
                alignSelf: 'center',
                justifyContent: 'center',
              }}
            >
              <Icon
                name="icon-icon-gouwuche"
                size={24}
                color={'#333'}
                style={{ alignSelf: 'center' }}
              />
              <Bubble
                bubbleColor={'#E14C46'}
                size={12}
                fontSize={9}
                style={{ position: 'absolute', right: 0, top: 4 }}
                value={TotalNum}
              />
              <Text style={{ fontSize: 10, lineHeight: 14, color: '#666' }}>
                购物车
              </Text>
            </TouchableOpacity>
          </View>

          {/* 加入购物车 */}
          <TouchableOpacity
            onPress={() => {
              // if (!detailDatas.isOptional) {
                this.state.heightValue.setValue(0)
                this.state.widthValue.setValue(0)
                Animated.parallel([
                  Animated.timing(this.state.heightValue, {
                    toValue: 1,
                    duration: 1000,
                    easing: Easing.linear, // 线性的渐变函数
                  }),
                ]).start(() => {
                  let postData = dataModel(
                    detailDatas,
                    CUSTOMERINFO.id,
                    CUSTOMERINFO.customerRankCode
                  )
                  this.props.dispatch(
                    createAction('shoppingcart/addShop')(postData)
                  ).finally(() => {
                    this.toast = Toast.show('加入购物车成功！', {
                      position: toastHeight,
                    })
                  })
                  this.getCartNum()
                })
              // } else {
              //   if (this.toast) {
              //     Toast.hide(this.toast)
              //   }
              //   this.toast = Toast.show('请求选配界面加入购物车', {
              //     position: toastHeight,
              //   })
              // }
            }}
            style={{
              flex: 3,
              backgroundColor: '#E70013',
            }}
          >
            <View
              style={{
                flex: 1,
                alignSelf: 'center',
                justifyContent: 'center',
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  color: '#FFF',
                  lineHeight: 20,
                }}
              >
                加入购物车
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  tabView: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.01)',
  },
})

export default CommodityDetail