🐞 fix(ID1000708 首页购物车按钮问题):

2022-11-16 13:43:08 +08:00
parent 812971f6b2
commit 24773447e9
7 changed files with 403 additions and 378 deletions
@@ -1,48 +1,53 @@
-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";
-import useCommonData from "@/use/useCommonData";
-import { useSelector } from "@/reducers/hooks";
+import { MovableArea, MovableView, View } from '@tarojs/components'
+import Taro, { useReady } from '@tarojs/taro'
+import { ReactElement, 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'

 type param = {
-    children?: ReactElement|null,
-    onClick?: () => void
+  children?: ReactElement | null
+  onClick?: () => void
 }
-export default ({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) {
-            let ratio = 750 / res.screenWidth
-            setScreenHeight(res.screenHeight*ratio - 460)
-            screenWidthRef.current = res.screenWidth/2
-        }
-        setShowMoveBtn(true)
-    })
-
-    useEffect(() => {
-        getShopCount()
-    }, [])
-
-    const dragEnd = (e) => {
+export default ({ children = null, onClick }: param) => {
+  //获取购物车数据数量
+  const { getShopCount, commonData } = useCommonData()

+  const [screenHeight, setScreenHeight] = useState(0)
+  const [showMoveBtn, setShowMoveBtn] = useState(false)
+  const screenWidthRef = useRef(0)
+  useLayoutEffect(() => {
+    const res = Taro.getSystemInfoSync()
+    if (res.screenHeight) {
+      let ratio = 750 / res.screenWidth
+      setScreenHeight(res.screenHeight * ratio - 460)
+      screenWidthRef.current = res.screenWidth / 2
    }
+    setShowMoveBtn(true)
+  })

-    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>
-              {(commonData.shopCount > 0)&&<View className={styles.product_num}>{commonData.shopCount > 99?'99+':commonData.shopCount}</View>}
-            </MovableView>}
-        </MovableArea>
-    )
-}
+  useEffect(() => {
+    getShopCount()
+  }, [])
+
+  const dragEnd = (e) => {}
+
+  return (
+    <MovableArea className={styles.movableItem}>
+      {children}
+      <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>
+        {commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
+      </MovableView>
+    </MovableArea>
+  )
+}