52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { MovableArea, MovableView, View } from "@tarojs/components"
|
|
import Taro, { useReady } from "@tarojs/taro"
|
|
import { ReactElement, useEffect, useRef, useState } from "react"
|
|
import classnames from "classnames";
|
|
import styles from './index.module.scss'
|
|
import { GetShoppingCartApi } from "@/api/shopCart";
|
|
|
|
type param = {
|
|
children?: ReactElement|null,
|
|
onClick?: () => void
|
|
}
|
|
export default ({children = null, onClick}:param) => {
|
|
const [screenHeight, setScreenHeight] = useState(0)
|
|
const [showMoveBtn, setShowMoveBtn] = useState(false)
|
|
const screenWidthRef = useRef(0)
|
|
useReady(() => {
|
|
const res = Taro.getSystemInfoSync()
|
|
if(res.screenHeight) {
|
|
let ratio = 750 / res.screenWidth
|
|
setScreenHeight(res.screenHeight*ratio - 460)
|
|
screenWidthRef.current = res.screenWidth/2
|
|
}
|
|
setShowMoveBtn(true)
|
|
})
|
|
|
|
//获取数据
|
|
const [list, setList] = useState<any[]>([])
|
|
const {fetchData} = GetShoppingCartApi()
|
|
const getShoppingCart = async () => {
|
|
const {data} = await fetchData()
|
|
let color_list = data.color_list||[]
|
|
setList(color_list)
|
|
}
|
|
|
|
useEffect(() => {
|
|
getShoppingCart()
|
|
}, [])
|
|
|
|
const dragEnd = (e) => {
|
|
|
|
}
|
|
|
|
return (
|
|
<MovableArea className={styles.movableItem}>
|
|
{children}
|
|
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
|
|
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
|
|
{(list.length > 0)&&<View className={styles.product_num}>{list.length > 99?'99+':list.length}</View>}
|
|
</MovableView>}
|
|
</MovableArea>
|
|
)
|
|
} |