51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { MovableArea, MovableView, View } from '@tarojs/components'
|
|
import Taro, { useReady } from '@tarojs/taro'
|
|
import type { ReactElement } from 'react'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import styles from './index.module.scss'
|
|
import { GetShoppingCartApi } from '@/api/shopCart'
|
|
import useCommonData from '@/use/useCommonData'
|
|
import { useSelector } from '@/reducers/hooks'
|
|
|
|
interface param {
|
|
children?: ReactElement|null
|
|
onClick?: () => void
|
|
}
|
|
const MoveBtn = ({ children = null, onClick }: param) => {
|
|
// 获取购物车数据数量
|
|
const { getShopCount, commonData } = useCommonData()
|
|
|
|
const [screenHeight, setScreenHeight] = useState(0)
|
|
const [showMoveBtn, setShowMoveBtn] = useState(false)
|
|
const screenWidthRef = useRef(0)
|
|
useReady(() => {
|
|
const res = Taro.getSystemInfoSync()
|
|
if (res.screenHeight) {
|
|
const ratio = 750 / res.screenWidth
|
|
setScreenHeight(res.screenHeight * ratio - 460)
|
|
screenWidthRef.current = res.screenWidth / 2
|
|
}
|
|
setShowMoveBtn(true)
|
|
})
|
|
|
|
useEffect(() => {
|
|
getShopCount()
|
|
}, [])
|
|
|
|
const dragEnd = (e) => {
|
|
|
|
}
|
|
|
|
return (
|
|
<MovableArea className={styles.movableItem}>
|
|
{children}
|
|
{showMoveBtn && <MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia x="630rpx" y={`${screenHeight}rpx`} onTouchEnd={e => dragEnd(e)}>
|
|
<View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)} ></View>
|
|
{(commonData.shopCount > 0) && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
|
|
</MovableView>}
|
|
</MovableArea>
|
|
)
|
|
}
|
|
export default MoveBtn
|