🐞 fix(购物页面): 修复loading客户数据的时候闪现空状态的问题

src/components/loadingCard/index.tsx

@@ -1,26 +1,26 @@
-import { View, Image } from "@tarojs/components"
+import { View, Image } from '@tarojs/components'
-import Loading from "@/components/loading"
+import Loading from '@/components/loading'
-import style from "./index.module.scss"
+import style from './index.module.scss'
-import { memo } from "react";
+import { memo } from 'react'
 
 type Params = {
-    title?: string,
+  title?: string
-    loadingIcon?: false | true
+  loadingIcon?: boolean
 }
-export default memo(({
+export default memo((props: Params) => {
-    title = "加载中...", //显示的文字
+  console.log(props)
-    loadingIcon = true //是否显示加载图标
+  const {
-}: Params) => {
+    title = '加载中...', //显示的文字
-    console.log('loadingCard:::')
+    loadingIcon = true, //是否显示加载图标
-    return (
+  } = props
-        <>
+  console.log('loadingCard:::', props)
-            <View className={style.loadingCard_main}>
+  return (
-                {loadingIcon && <Loading />}
+    <>
-                {
+      <View className={style.loadingCard_main}>
-                    !loadingIcon && <Image className={style.pic} mode='aspectFill' lazyLoad src={'https://cdn.zzfzyc.com/empty.png'}></Image>
+        {loadingIcon && <Loading />}
-                }
+        {!loadingIcon && <Image className={style.pic} mode='aspectFill' lazyLoad src={'https://cdn.zzfzyc.com/empty.png'}></Image>}
-                <View className={style.loading_text}>{title}</View>
+        <View className={style.loading_text}>{title}</View>
-            </View>
+      </View>
-        </>
+    </>
-    )
+  )
 })

src/components/shoppingCart/index.tsx

@@ -9,6 +9,7 @@ import BottomCustomer from "@/components/BottomCustomer"
 import VirtualList from '@tarojs/components/virtual-list'
 import DotLoading from "@/components/dotLoading"
 import Divider from '../divider';
+
 interface prosObj {
     showPopup?: false | true,
     closePopup?: () => void,

src/pages/shopping/components/shoppingCartItem/index.module.scss

@@ -18,7 +18,8 @@
 }
 
 .line {
-  margin: 16px 0;
+  margin-top: 32px;
+  margin-bottom: 12px;
 }
 
 .topItem {
@@ -46,7 +47,6 @@
   box-sizing: border-box;
   overflow: hidden;
   .orderTitle {
-    padding: 0 24px;
     display: flex;
     align-items: center;
     color: $color_font_one;

src/pages/shopping/index.tsx

@@ -15,7 +15,6 @@ import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
 import { ShoppingProvider } from './components/shoppingCart/index'
 import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context'
 import { alert, goLink, isEmptyObject } from '@/common/common'
-import LoadingCard from '@/components/loadingCard'
 
 export const Shopping: FC = memo(() => {
   // 计算总的预估金额
@@ -91,6 +90,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   //数据加载状态
   const statusMore = useMemo(() => {
+    console.log('shoppingCartData==>', shoppingCartData, state)
     const status = dataLoadingStatus({
       list: shoppingCartData.list,
       total: shoppingCartData.total,
@@ -122,12 +122,11 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     })()
   }, [])
 
-  const [isPending, startTransition] = useTransition()
 
   useEffect(() => {
-    startTransition(() => {
+    if (state.success) {
       setShoppingCartData({ list: state.data, total: state.data.length })
-    })
+    }
   }, [state])
 
   // 结算
@@ -209,8 +208,6 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     }
   }
 
-  
-
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
       <View className={styles['shopping--topBar']} id='topBar'>
@@ -227,14 +224,10 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <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 ? (
+            {!!shoppingCartData?.list?.length &&
-              <LoadingCard />
-            ) : (
-              !!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>
-              })
+              })}
-            )}
           </InfiniteScroll>
         </View>
       </View>

src/use/useHttp.ts

@@ -23,12 +23,12 @@ type Params = {
   page?: number
   pageSize?: number
 }
-
+type OptionData = Record<string,any> | any[] | null
 type option = {
   url?: string
   method?: 'get' | 'post' | 'put' | 'delete'
   type?: string
-  data?: any
+  data?: OptionData
   page?: number
   pageSize?: number
   pagination?: true | false