bk-shop/src/pages/item/comps/comp-buytoolbar.js

import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { SpImage, SpLogin, SpChat } from '@/components'
import { classNames, navigateTo, showToast, isWeb } from '@/utils'
import { addCart } from '@/store/slices/cart'
import { BUY_TOOL_BTNS, ACTIVITY_LIST } from '@/consts'
import { fetchUserFavs, addUserFav, deleteUserFav } from '@/store/slices/user'
import api from '@/api'
import { AtModal } from 'taro-ui'
import './comp-buytoolbar.scss'

function CompGoodsBuyToolbar (props) {
  const {
    onAddCart = () => { },
    onFastBuy = () => { },
    info,
    onChange = () => { },
    onSubscribe = () => { }
  } = props
  const { cartCount = 0 } = useSelector((state) => state.cart)
  const { favs = [] } = useSelector((state) => state.user)
  const $instance = getCurrentInstance()
  const dispatch = useDispatch()
  const [showModal, setShowModal] = useState(false)
  const btns = []

  if (!info) {
    return null
  }

  const RenderBtns = () => {
    // 兑换券
    const { card_id } = $instance.router?.params || {}
    if (card_id) {
      btns.push(BUY_TOOL_BTNS.EX_CHANGE)
      return
    }

    if (info.approveStatus == 'only_show') {
      btns.push(BUY_TOOL_BTNS.ONLY_SHOW)
      return
    }
    if (info.store == 0) {
      if (info.subscribe) {
        btns.push(BUY_TOOL_BTNS.SUBSCRIBE)
      } else {
        btns.push(BUY_TOOL_BTNS.NOTICE)
      }
      return
    }

    if (info.isGift) {
      btns.push(BUY_TOOL_BTNS.GIFT)
      return
    }

    // 秒杀、拼团、限时特惠
    if (ACTIVITY_LIST[info.activityType]) {
      if (info.activityType == 'seckill') {
        // 活动即将开始
        if (info.activityInfo.status === 'in_the_notice') {
          btns.push(BUY_TOOL_BTNS.ACTIVITY_WILL_START)
        } else {
          btns.push(BUY_TOOL_BTNS.ACTIVITY_FAST_BUY)
        }
      } else if (info.activityType == 'limited_time_sale') {
        if (info.activityInfo.status === 'in_the_notice') {
          btns.push(BUY_TOOL_BTNS.ACTIVITY_WILL_START)
        } else {
          btns.push(BUY_TOOL_BTNS.ADD_CART, BUY_TOOL_BTNS.ACTIVITY_BUY)
        }
      } else if (info.activityType == 'group') {
        if (info.activityInfo.show_status === 'nostart') {
          btns.push(BUY_TOOL_BTNS.ACTIVITY_WILL_START)
        } else {
          btns.push(BUY_TOOL_BTNS.ACTIVITY_GROUP_BUY)
        }
      }
      return
    }

    btns.push(BUY_TOOL_BTNS.ADD_CART)
    btns.push(BUY_TOOL_BTNS.FAST_BUY)
  }

  RenderBtns()
  // console.log('btns:', btns)

  const onChangeLogin = async ({ key }) => {
    const { dtid, card_id, user_card_id } = $instance.router.params
    // console.log('onChangeLogin:', key)
    if (key == 'notice') {
      const { subscribe } = info
      if (subscribe) return false

      if (isWeb) {
        showToast('请在小程序完成商品到货通知')
        return
      }

      await api.user.subscribeGoods(info.itemId, { distributor_id: dtid })
      const { template_id } = await api.user.newWxaMsgTmpl({
        temp_name: 'yykweishop',
        source_type: 'goods'
      })
      Taro.requestSubscribeMessage({
        tmplIds: template_id,
        success: () => {
          onSubscribe()
        },
        fail: () => {
          onSubscribe()
        }
      })
    } else if (key == 'exchange') {
      const { itemId } = info
      const { status } = await api.cart.exchangeGood({
        item_id: itemId,
        distributor_id: dtid,
        user_card_id
      })
      if (status) {
        Taro.navigateTo({
          url: `/subpages/marketing/exchange-code?user_card_id=${user_card_id}&card_id=${card_id}`
        })
        return
      }
    } else {
      onChange(key)
    }
  }

  // 收藏
  const onChangeCollection = async () => {
    const { itemId } = info
    const fav = favs.findIndex((item) => item.item_id == itemId) > -1
    if (!fav) {
      await dispatch(addUserFav(itemId))
    } else {
      await dispatch(deleteUserFav(itemId))
    }
    await dispatch(fetchUserFavs())
    fav ? showToast(fav ? '已移出收藏' : '已加入收藏') : setShowModal(true)
  }

  const isFaved = favs.findIndex((item) => item.item_id == info.itemId) > -1
  return (
    <View className='comp-goodsbuytoolbar'>
      <View className='comp-goodsbuytoolbar-flex'>
        <SpChat> <SpImage height={54} src='index/kf.png' mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage></SpChat>
        <SpLogin className='shoucang-wrap' onChange={onChangeCollection.bind(this)}>
          <SpImage height={54} src={isFaved ? 'cart/star-full.png' : 'cart/star.png'} mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage>
          {/* <View className='toolbar-item'>
            <Text
              className={classNames(
                'icon-my ',
                isFaved ? 'icon-star-my1' : 'icon-star-my'
              )}
            ></Text>
            <Text className='toolbar-item-txt'>收藏</Text>
          </View> */}
        </SpLogin>
        {false && <View
          className='toolbar-item'
          onClick={navigateTo.bind(this, '/pages/cart/espier-index?tabbar=0')}
        >
          <Text className='iconfont icon-gouwuche'></Text>
          <Text className='toolbar-item-txt'>购物车</Text>
          {cartCount > 0 && <Text className='cart-count'>{cartCount}</Text>}
        </View>}
      </View>
      <View
        className={classNames('toolbar-btns', {
          'mutiplte-btn': btns.length > 1
        })}
      >
        {btns.map((item, index) => {
          if (item.btnStatus == 'disabled') {
            return (
              <View
                className={classNames('btn-item', `btn-${item.btnStatus}`)}
                key={`btn-item__${index}`}
              >
                {item.title}
              </View>
            )
          } else {
            return (
              <SpLogin
                className={classNames('btn-item', `btn-${item.btnStatus}`)}
                onChange={onChangeLogin.bind(this, item)}
                key={`btn-item__${index}`}
              >
                <View className='btn-item-txt'>{item.title}</View>
              </SpLogin>
            )
          }
        })}
      </View>
      <AtModal
        isOpened={showModal}
        title='收藏成功！'
        cancelText='关闭'
        confirmText='个人收藏'
        onClose={() => setShowModal(false)}
        onCancel={() => setShowModal(false)}
        onConfirm={() => {
          setShowModal(false)
          navigateTo('/pages/member/item-fav')
        }}
        content='前往 我的 页面进入 个人收藏
        可查看全部收藏产品'
      />
    </View>
  )
}

CompGoodsBuyToolbar.options = {
  addGlobalClass: true
}

export default CompGoodsBuyToolbar