111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
import { Button, Image, MovableArea, MovableView, View } from '@tarojs/components'
|
|
import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
|
|
import type { ReactElement } from 'react'
|
|
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import Customer from '../customer'
|
|
import CodeSelect from '../codeSelect'
|
|
import styles from './index.module.scss'
|
|
import { GetShoppingCartApi } from '@/api/shopCart'
|
|
import useCommonData from '@/use/useCommonData'
|
|
import { useSelector } from '@/reducers/hooks'
|
|
import { alert } from '@/common/common'
|
|
import { formatImgUrl } from '@/common/fotmat'
|
|
|
|
type ShowStatus = 'shop'|'customer'|'order'|'code'
|
|
interface param {
|
|
children?: ReactElement | null
|
|
onShopClick?: () => void
|
|
showList?: ShowStatus[]
|
|
messageTitle?: string
|
|
messagePath?: string
|
|
showCart?: false|true
|
|
}
|
|
const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false }: param) => {
|
|
const userInfo = useSelector(state => state.userInfo)
|
|
// 获取购物车数据数量
|
|
const { getShopCount, commonData } = useCommonData()
|
|
|
|
const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: number; code?: number }>({
|
|
shop: 0,
|
|
customer: 0,
|
|
order: 0,
|
|
})
|
|
const [showMoveBtn, setShowMoveBtn] = useState(false)
|
|
const screenWidthRef = useRef(0)
|
|
useEffect(() => {
|
|
Taro.nextTick(() => {
|
|
const res = Taro.getSystemInfoSync()
|
|
if (res.screenHeight) {
|
|
const ratio = 750 / res.screenWidth
|
|
const num = res.screenHeight * ratio
|
|
setScreenHeight(() => ({ shop: num - 460, customer: num - 580, order: num - 700, code: num - 820 }))
|
|
screenWidthRef.current = res.screenWidth / 2
|
|
}
|
|
setShowMoveBtn(true)
|
|
})
|
|
}, [])
|
|
|
|
useDidShow(() => {
|
|
getShopCount()
|
|
})
|
|
|
|
const onShow = (val: ShowStatus) => {
|
|
if (showList.length <= 0) { return true }
|
|
return showList.includes(val)
|
|
}
|
|
|
|
const onPhone = () => {
|
|
if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
|
|
Taro.makePhoneCall({
|
|
phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
|
|
})
|
|
}
|
|
|
|
const [customer_service_show, set_customer_service_show] = useState(false)
|
|
const customerClose = () => {
|
|
set_customer_service_show(false)
|
|
}
|
|
|
|
return (
|
|
<MovableArea className={styles.movableItem}>
|
|
{children}
|
|
{onShow('shop') && <MovableView
|
|
onClick={onShopClick}
|
|
className={styles.moveBtn}
|
|
direction="all"
|
|
inertia
|
|
x="630rpx"
|
|
y={`${screenHeight.shop}rpx`}
|
|
>
|
|
<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>}
|
|
{onShow('order') && <MovableView
|
|
onClick={() => set_customer_service_show(true)}
|
|
className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
|
|
direction="all"
|
|
inertia
|
|
x="630rpx"
|
|
y={`${screenHeight.order}rpx`}
|
|
>
|
|
<Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
|
|
</MovableView>}
|
|
{onShow('customer') && <MovableView
|
|
onClick={onPhone}
|
|
className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
|
|
direction="all"
|
|
inertia
|
|
x="630rpx"
|
|
y={`${screenHeight.customer}rpx`}
|
|
>
|
|
<Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
|
|
</MovableView>}
|
|
{onShow('code') && <CodeSelect y={screenHeight.code as number} />}
|
|
<Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} showCard={showCart} onClose={customerClose} />
|
|
</MovableArea>
|
|
)
|
|
}
|
|
|
|
export default MoveBtn
|