pref(收藏夹): 显示空状态

src/app.config.ts

@@ -170,7 +170,6 @@ export default {
       root: 'pages/collection',
       pages: [
         'index',
-        'collectionClass/index',
         'collectionDetail/index',
       ],
     },

src/common/constant.ts

@@ -1,4 +1,4 @@
-export const BASE_URL = CURRENT_BASE_URL
+// export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@@ -13,7 +13,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
-// export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷
+export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷
 // export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
 
 // CDN
@@ -24,11 +24,16 @@ export const UPLOAD_CDN_URL = 'https://v0.api.upyun.com/'
 // cdn
 export const IMG_CND_Prefix = CURRENT_ENV.includes('production') ? 'https://cdn.zzfzyc.com' : 'https://test.cdn.zzfzyc.com'
 // export const IMG_CND_Prefix = CURRENT_ENV.includes('production') ? 'https://cdn.zzfzyc.com' : 'https://cdn.zzfzyc.com'
+export const SEARCH_EMPTY_IMAGE = `${IMG_CND_Prefix}/search_empty.png`
+export const COLLECTION_EMPTY_IMAGE = `${IMG_CND_Prefix}/mall/collection_empty.png`
 
 // 在线支付图片baseUrl
 export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL
 // export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081'
-
+// 获取CND资源
+export const getCDNSource = (suffix: string) => {
+  return IMG_CND_Prefix + suffix
+}
 // 上传图片视频
 export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`
 

src/components/empty/index.module.scss

@@ -0,0 +1,20 @@
+.mainBox {
+    height: calc(100vh - 200px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .pic {
+        width: 522px;
+        height: 322px; 
+        // opacity: 0.3;
+        margin-bottom: 24px;
+    }
+
+    .text {
+        font-size: 26px;
+        color: $color_font_two;
+        font-weight: 400;
+    }
+}

src/components/empty/index.tsx

@@ -0,0 +1,22 @@
+import { Image, View } from '@tarojs/components'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from '../empty/index.module.scss'
+
+interface PropsObj {
+  picUrl?: string
+  text?: string
+}
+const Empty = (pros: PropsObj) => {
+  const {
+    picUrl = '',
+    text = '无搜索历史',
+  } = pros
+
+  return (
+    <View className={styles.mainBox}>
+      <Image className={styles.pic} mode="aspectFill" lazyLoad src={picUrl}></Image>
+      <View className={styles.text}>{text}</View>
+    </View>
+  )
+}
+export default memo(Empty)

src/components/infiniteScroll/index.tsx

@@ -4,6 +4,8 @@ import { memo, useMemo, useState } from 'react'
 import LoadingCard from '../loadingCard'
 import style from './index.module.scss'
 import DotLoading from '@/components/dotLoading'
+import Empty from '../empty'
+import { SEARCH_EMPTY_IMAGE } from '@/common/constant'
 
 export type StatusParam = 0|1|2|3
 
@@ -22,8 +24,9 @@ interface Params {
   selfOnRefresherRestore?: () => void
   selfOnRefresherAbort?: () => void
   paddingBottom?: number
-  refresherTriggered?: true|false
-  refresherEnabled?: true|false
+  refresherTriggered?: boolean
+  refresherEnabled?: boolean
+  emptySlot?: React.ReactNode
 }
 const InfiniteScroll = ({
   styleObj,
@@ -34,7 +37,7 @@ const InfiniteScroll = ({
   selfOnRefresherRefresh,
   selfOnRefresherRestore,
   selfOnRefresherAbort,
-  hasMore = true,
+  emptySlot,
   children,
   lowerThresholdNum = 5,
   paddingBottom = 0,
@@ -110,7 +113,7 @@ const InfiniteScroll = ({
             </View>
             }
             {(statusMore == 0) && <LoadingCard />}
-            {(statusMore == 1) && <LoadingCard loadingIcon={false} title="暂无数据" />}
+            {statusMore == 1 && (emptySlot || <Empty picUrl={SEARCH_EMPTY_IMAGE} text="暂无数据" />)}
           </>}
 
         <View className="common_safe_area_y"></View>

src/pages/collection/index.tsx

@@ -10,7 +10,7 @@ import MoveCollectionPopup from './components/moveCollectionPopup'
 import InfiniteScroll from '@/components/infiniteScroll'
 import MCheckbox from '@/components/checkbox/index'
 import Search from '@/components/searchBar'
-import { dataLoadingStatus, getFilterData } from '@/common/util'
+import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
 import { alert, goLink } from '@/common/common'
 import { DelFavoriteProductApi, FavoriteListApi } from '@/api/favorite'
 import useLogin from '@/use/useLogin'
@@ -18,6 +18,8 @@ import IconText from '@/components/iconText'
 import LayoutBlock from '@/components/layoutBlock'
 import IconFont from '@/components/iconfont/iconfont'
 import NormalButton from '@/components/normalButton'
+import Empty from '@/components/empty'
+import { COLLECTION_EMPTY_IMAGE } from '@/common/constant'
 // 消息机制
 export const collectionEvents = new Events()
 // 勾选map
@@ -110,9 +112,9 @@ const Collection = () => {
   const [searchData, setSearchData] = useState('')
   // 是否首次进入
   const isFirst = useRef(true)
-  const onSearch = useCallback((e) => {
+  const onSearch = useCallback(debounce((e) => {
     setSearchData(() => e)
-  }, [])
+  }, 400), [])
 
   // 获取列表
   const { fetchData: fetchDataList, state: favoriteState } = FavoriteListApi()
@@ -306,6 +308,7 @@ const Collection = () => {
         <View className={styles.scrollContent} id="scrollContent" style={contentStyleObject}>
           <InfiniteScroll
             statusMore={statusMore}
+            emptySlot={<Empty picUrl={COLLECTION_EMPTY_IMAGE} text="暂无数据" />}
           >
             {favoriteData.list?.map((item: any, key) =>
               (