🎈 perf(优化浮窗弹窗):

2022-12-14 18:35:31 +08:00
parent 21b4f9df8c
commit 70402d6fac
6 changed files with 314 additions and 24 deletions
@@ -0,0 +1,54 @@
+.movableItem {
+  width: 100%;
+  height: 100%;
+}
+.moveBtn {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 2px solid #cde5ff;
+  box-shadow: 0px 0px 20px 0px rgba(104, 180, 255, 0.7);
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  position: fixed;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+  .shop_icon {
+    font-size: 70px;
+    color: $color_main;
+  }
+  .product_num {
+    position: absolute;
+    font-size: 23px;
+    background-color: red;
+    color: #fff;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 6px;
+    border-radius: 72px;
+    min-width: 25px;
+    text-align: center;
+    top: 0;
+    right: 0;
+  }
+  .wxBtn {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+}
+.no_bg_moveBtn {
+  box-shadow: none;
+  background-color: transparent;
+  border: none;
+  width: 130px;
+  height: 130px;
+}
@@ -0,0 +1,113 @@
+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 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'
+import Customer from '../customer'
+
+type ShowStatus = 'shop'|'customer'|'order'
+interface param {
+  children?: ReactElement | null
+  onClick?: () => void
+  showList?: ShowStatus[]
+  orderInfo?: any
+}
+const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param) => {
+  const userInfo = useSelector(state => state.userInfo)
+  // 获取购物车数据数量
+  const { getShopCount, commonData } = useCommonData()
+
+  const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: 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 }))
+        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={onClick}
+        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
+        className={styles.moveBtn}
+        direction="all"
+        inertia
+        x="630rpx"
+        y={`${screenHeight.order}rpx`}
+      >
+        <View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
+          <Button
+            className={styles.wxBtn}
+            openType="contact"
+            sendMessageTitle={orderInfo?.order_no}
+            showMessageCard
+            sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}
+          ></Button>
+        </View>
+      </MovableView>}
+      {onShow('customer') && <MovableView
+        className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
+        direction="all"
+        inertia
+        x="630rpx"
+        onClick={onPhone}
+        y={`${screenHeight.customer}rpx`}
+      >
+        <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
+      </MovableView>}
+      <Customer show={customer_service_show} onClose={customerClose} />
+    </MovableArea>
+  )
+}
+
+export default MoveBtn