🎈 perf(销售统计): 优化下拉菜单交互

src/components/SelectSaleRankingIndicators/index.tsx

@@ -5,6 +5,7 @@ import { SaleOrderDataFormdataFormStatus } from '@/api/index'
 import { View } from '@tarojs/components'
 import styles from './index.module.scss'
 import classnames from 'classnames'
+import { ShoppingProvider } from '@/pages/shopping/components/shoppingCart'
 
 type ChangedValue = string | number
 

src/components/dropDown-item/index.tsx

@@ -69,18 +69,18 @@ export default forwardRef((props: PropsType, ref) => {
   }
 
   const handleClickTitle = () => {
-    setShowPopup(true)
+    setShowPopup(prev => !prev)
   }
 
   const handleClosePopup = () => {
-    if (hasBottomBtn) return false
+    if (hasBottomBtn) return
     setShowPopup(false)
   }
 
   const [overlayOffsetTop, setOverlayOffsetTop] = useState('unset')
   // 获取遮罩层的样式
   const getOverlayStyle = (): React.CSSProperties => {
-    return { position: 'absolute', top: 0 }
+    return { position: !showOverlay ? 'fixed' : 'absolute', top: 0 }
   }
 
   // 获取整个页面的完整高度
@@ -110,7 +110,6 @@ export default forwardRef((props: PropsType, ref) => {
     }
   }, [overlayOffsetTop])
 
-
   return (
     <View className={styles.dropDownItem} id='DropDownItem'>
       <View className={styles['dropDownItem--title']} onClick={handleClickTitle}>
@@ -120,7 +119,7 @@ export default forwardRef((props: PropsType, ref) => {
         <Iconfont name={getIconName()} size={20} color={showPopup ? activeColor : '#7f7f7f'}></Iconfont>
       </View>
       <Popup
-        onClose={() => handleClosePopup()}
+        onClose={handleClosePopup}
         showOverLay={showOverlay}
         show={showPopup}
         showTitle={false}

src/components/infiniteScroll/index.tsx

@@ -3,6 +3,8 @@ import React, { memo, ReactNode, useMemo, useState } from 'react'
 import style from './index.module.scss'
 import DotLoading from '@/components/dotLoading'
 import LoadingCard from '../loadingCard'
+import { useCustomTabItemTap } from '@/use/useCommon'
+import Taro from '@tarojs/taro'
 
 export type StatusParam = 0 | 1 | 2 | 3
 
@@ -119,6 +121,7 @@ export default memo(
     return (
       <>
         <ScrollView
+          id='infiniteScroll'
           style={styleObj}
           className={style.scroll_main}
           scrollY

src/components/popup/index.module.scss

@@ -74,7 +74,7 @@ $am-ms: 200ms;
     border-radius: 20px 20px 0px 0px;
     transform: translate3d(0, 100%, 0);
     &-withShadow {
-      box-shadow: 0px -1px 9px -1px #333;
+      box-shadow: 0 -2px 11px -3px #333;
     }
   }
 
@@ -86,7 +86,7 @@ $am-ms: 200ms;
     border-radius: 0 0 20px 20px;
     transform: translate3d(0, -100%, 0);
     &-withShadow {
-      box-shadow: 0 1px 9px -1px #333;
+      box-shadow: 0 2px 5px -3px #333;
     }
   }
 
@@ -98,7 +98,7 @@ $am-ms: 200ms;
     border-radius: 20px 0 0 20px;
     transform: translate3d(100%, 0, 0);
     &-withShadow {
-      box-shadow: -1px 0px 9px -1px #333;
+      box-shadow: -2 0px 11px -3px #333;
     }
   }
 }

src/components/popup/index.tsx

@@ -35,7 +35,7 @@ export default memo(
     children,
     position = 'bottom',
     animationEnd,
-    customStyle,
+    customStyle = {},
     safeAreaInsetBottom = true,
     showOverLay = true,
     overlayStyle,
@@ -45,6 +45,7 @@ export default memo(
       if (show) {
         animationTime.current = setTimeout(() => {
           animationEnd?.()
+          customStyle.overflow = 'unset'
         }, 260)
       } else {
         clearTimeout(animationTime.current)
@@ -60,10 +61,12 @@ export default memo(
     return (
       <View className={style.drawer_main}>
         <View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
+          {/* 遮罩层 start */}
           <View
             className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show, [style['drawer_mask--hidden']]: !showOverLay })}
             onClick={onClose}
             style={overlayStyle}></View>
+          {/* 遮罩层 end */}
           <View
             style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}` }}
             className={classnames(style.drawer_container, style['drawer_container_' + position], {

src/custom-tab-bar/index.tsx

@@ -25,7 +25,6 @@ type TabBarIndexMap = {
 const CustomTabBar: FC = () => {
 
   const { selectedId, tabItem } = useSelector((state) => {
-    console.log('sdfasdfa', state)
     return state.tabBarData
   })
   // const tabBarIndexMap = useMemo(() => {

src/pages/shopping/components/bottomEditBar/index.tsx

@@ -1,7 +1,5 @@
-import { formatPriceDiv } from '@/common/format'
 import NormalButton from '@/components/normalButton'
 import { View, Text } from '@tarojs/components'
-import { memo, SetStateAction, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
 import { usePropsValue } from '@/use/useCommon'

src/pages/shopping/index.tsx

@@ -202,6 +202,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     }
   }
   
+
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
       <View className={styles['shopping--topBar']} id='topBar'>
@@ -216,7 +217,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         </Search>
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
-        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
+        <View id='shoppingListContainer' className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
           <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
             {isPending ? (
               <LoadingCard />

src/use/useCommon.ts

@@ -1,3 +1,5 @@
+import { useSelector } from '@/reducers/hooks'
+import { useRouter } from '@tarojs/taro'
 import dayjs from 'dayjs'
 import { useEffect, useRef, useState, SetStateAction, useMemo, useCallback } from 'react'
 
@@ -174,3 +176,16 @@ export function usePropsValue<T>(options: UsePropsValueOptions<T>) {
   }, [])
   return [stateRef.current, setState] as const
 }
+
+// 点击自定义 tab 时触发。
+export function useCustomTabItemTap(callback) {
+  const { selectedId, tabItem } = useSelector(state => {
+    return state.tabBarData
+  })
+  const targetPagePayload = tabItem.find(item => item.id === selectedId)
+  callback({
+    index: targetPagePayload?.id,
+    pagePath: targetPagePayload?.pagePath,
+    text: targetPagePayload?.text,
+  })
+}