|
|
@ -324,12 +324,17 @@ export const HomeScreen = () => { |
|
|
|
const [searchParams, setSearchParams] = useState<ProductParams>({ |
|
|
|
const [searchParams, setSearchParams] = useState<ProductParams>({ |
|
|
|
keyword: "pen", |
|
|
|
keyword: "pen", |
|
|
|
page: 1, |
|
|
|
page: 1, |
|
|
|
page_size: 20, |
|
|
|
page_size: 10, |
|
|
|
sort_order: "desc", |
|
|
|
sort_order: "desc", |
|
|
|
sort_by: "default", |
|
|
|
sort_by: "default", |
|
|
|
language: "en", |
|
|
|
language: "en", |
|
|
|
}); |
|
|
|
}); |
|
|
|
const [products, setProducts] = useState<Product[]>([]); |
|
|
|
const [products, setProducts] = useState<Product[]>([]); |
|
|
|
|
|
|
|
const [hasMore, setHasMore] = useState(true); |
|
|
|
|
|
|
|
const [isLoadingMore, setIsLoadingMore] = useState(false); |
|
|
|
|
|
|
|
const [totalProducts, setTotalProducts] = useState(0); |
|
|
|
|
|
|
|
const [initialLoadComplete, setInitialLoadComplete] = useState(false); |
|
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); // 添加当前页码状态
|
|
|
|
const flatListRef = useRef<FlatList>(null); |
|
|
|
const flatListRef = useRef<FlatList>(null); |
|
|
|
const data = [ |
|
|
|
const data = [ |
|
|
|
{ |
|
|
|
{ |
|
|
@ -346,21 +351,62 @@ export const HomeScreen = () => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
const [galleryUsed, setGalleryUsed] = useState(false); // 标记是否使用过相册
|
|
|
|
const [galleryUsed, setGalleryUsed] = useState(false); // 标记是否使用过相册
|
|
|
|
const getProductData = async () => { |
|
|
|
const [loadingPlaceholders, setLoadingPlaceholders] = useState(0); // 添加占位符数量状态
|
|
|
|
setLoading(true); // 开始加载,显示骨架屏
|
|
|
|
const getProductData = async (isLoadMore = false) => { |
|
|
|
|
|
|
|
if (isLoadMore) { |
|
|
|
|
|
|
|
setIsLoadingMore(true); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setLoading(true); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
const currentParams = { |
|
|
|
const currentParams = { |
|
|
|
...searchParams, |
|
|
|
...searchParams, |
|
|
|
|
|
|
|
page: isLoadMore ? currentPage + 1 : 1, |
|
|
|
...(userStore.user?.user_id ? { user_id: userStore.user.user_id } : {}), |
|
|
|
...(userStore.user?.user_id ? { user_id: userStore.user.user_id } : {}), |
|
|
|
}; |
|
|
|
}; |
|
|
|
const res = await productApi.getSearchProducts(currentParams); |
|
|
|
const res = await productApi.getSearchProducts(currentParams); |
|
|
|
setProducts(res.products); |
|
|
|
|
|
|
|
|
|
|
|
setTotalProducts(res.total || 0); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (isLoadMore) { |
|
|
|
|
|
|
|
setProducts(prev => [...prev, ...res.products]); |
|
|
|
|
|
|
|
setCurrentPage(prev => prev + 1); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setProducts(res.products); |
|
|
|
|
|
|
|
setCurrentPage(1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const currentTotal = isLoadMore ? products.length + res.products.length : res.products.length; |
|
|
|
|
|
|
|
setHasMore(currentTotal < (res.total || 0)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!isLoadMore && !initialLoadComplete) { |
|
|
|
|
|
|
|
setInitialLoadComplete(true); |
|
|
|
|
|
|
|
const remainingParams = { |
|
|
|
|
|
|
|
...currentParams, |
|
|
|
|
|
|
|
page: 2, |
|
|
|
|
|
|
|
page_size: 30 |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const remainingRes = await productApi.getSearchProducts(remainingParams); |
|
|
|
|
|
|
|
setProducts(prev => { |
|
|
|
|
|
|
|
const newProducts = [...prev, ...remainingRes.products]; |
|
|
|
|
|
|
|
setHasMore(newProducts.length < (res.total || 0)); |
|
|
|
|
|
|
|
return newProducts; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
setCurrentPage(2); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
} catch (error) { |
|
|
|
console.error("Error fetching products:", error); |
|
|
|
console.error("Error fetching products:", error); |
|
|
|
} finally { |
|
|
|
} finally { |
|
|
|
setTimeout(() => { |
|
|
|
if (isLoadMore) { |
|
|
|
setLoading(false); // 延迟结束加载状态,让骨架屏显示更平滑
|
|
|
|
setIsLoadingMore(false); |
|
|
|
}, 300); |
|
|
|
setLoadingPlaceholders(0); // 清除占位符
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
setLoading(false); |
|
|
|
|
|
|
|
}, 300); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
const handleProductPress = useCallback( |
|
|
|
const handleProductPress = useCallback( |
|
|
@ -377,6 +423,9 @@ export const HomeScreen = () => { |
|
|
|
); |
|
|
|
); |
|
|
|
const onRefresh = useCallback(async () => { |
|
|
|
const onRefresh = useCallback(async () => { |
|
|
|
setRefreshing(true); |
|
|
|
setRefreshing(true); |
|
|
|
|
|
|
|
setInitialLoadComplete(false); // 重置初始加载标记
|
|
|
|
|
|
|
|
setCurrentPage(1); // 重置页码
|
|
|
|
|
|
|
|
setSearchParams(prev => ({ ...prev, page_size: 10 })); // 只重置每页数量
|
|
|
|
try { |
|
|
|
try { |
|
|
|
await getProductData(); |
|
|
|
await getProductData(); |
|
|
|
} catch (error) { |
|
|
|
} catch (error) { |
|
|
@ -700,6 +749,34 @@ export const HomeScreen = () => { |
|
|
|
Alert.alert("已重置", "现在您可以使用相机功能了"); |
|
|
|
Alert.alert("已重置", "现在您可以使用相机功能了"); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 修改加载更多函数
|
|
|
|
|
|
|
|
const loadMore = () => { |
|
|
|
|
|
|
|
if (!hasMore || isLoadingMore) { |
|
|
|
|
|
|
|
console.log('不加载更多:', { hasMore, isLoadingMore }); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('开始加载更多, 当前页码:', currentPage); |
|
|
|
|
|
|
|
setLoadingPlaceholders(10); // 设置10个占位符
|
|
|
|
|
|
|
|
getProductData(true); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 修改滚动到底部处理函数
|
|
|
|
|
|
|
|
const handleEndReached = () => { |
|
|
|
|
|
|
|
console.log('触发加载更多'); |
|
|
|
|
|
|
|
loadMore(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 修改渲染函数
|
|
|
|
|
|
|
|
const renderItem = ({ item, index }: { item: Product; index: number }) => { |
|
|
|
|
|
|
|
// 如果是占位符
|
|
|
|
|
|
|
|
if (index >= products.length && index < products.length + loadingPlaceholders) { |
|
|
|
|
|
|
|
return <ProductSkeleton />; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return renderProductItem({ item }); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 渲染列表头部内容
|
|
|
|
// 渲染列表头部内容
|
|
|
|
const renderHeader = () => ( |
|
|
|
const renderHeader = () => ( |
|
|
|
<> |
|
|
|
<> |
|
|
@ -884,28 +961,35 @@ export const HomeScreen = () => { |
|
|
|
<View style={styles.safeAreaContent}> |
|
|
|
<View style={styles.safeAreaContent}> |
|
|
|
<View style={styles.container}> |
|
|
|
<View style={styles.container}> |
|
|
|
{loading ? ( |
|
|
|
{loading ? ( |
|
|
|
// 显示骨架屏
|
|
|
|
|
|
|
|
<View> |
|
|
|
<View> |
|
|
|
{renderHeader()} |
|
|
|
{renderHeader()} |
|
|
|
{renderSkeletonGrid()} |
|
|
|
{renderSkeletonGrid()} |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
// 显示正常内容
|
|
|
|
|
|
|
|
<FlatList |
|
|
|
<FlatList |
|
|
|
ref={flatListRef} |
|
|
|
ref={flatListRef} |
|
|
|
data={products} |
|
|
|
data={[...products, ...Array(loadingPlaceholders).fill(null)]} |
|
|
|
numColumns={2} |
|
|
|
numColumns={2} |
|
|
|
showsVerticalScrollIndicator={false} |
|
|
|
showsVerticalScrollIndicator={false} |
|
|
|
columnWrapperStyle={styles.productCardGroup} |
|
|
|
columnWrapperStyle={styles.productCardGroup} |
|
|
|
renderItem={renderProductItem} |
|
|
|
renderItem={renderItem} |
|
|
|
keyExtractor={(item, index) => |
|
|
|
keyExtractor={(item, index) => |
|
|
|
item.offer_id?.toString() || index.toString() |
|
|
|
item?.offer_id?.toString() || `placeholder-${index}` |
|
|
|
} |
|
|
|
} |
|
|
|
contentContainerStyle={{ |
|
|
|
contentContainerStyle={{ |
|
|
|
paddingBottom: 15, |
|
|
|
paddingBottom: 15, |
|
|
|
backgroundColor: "transparent", |
|
|
|
backgroundColor: "transparent", |
|
|
|
}} |
|
|
|
}} |
|
|
|
ListHeaderComponent={renderHeader} |
|
|
|
ListHeaderComponent={renderHeader} |
|
|
|
|
|
|
|
onEndReached={handleEndReached} |
|
|
|
|
|
|
|
onEndReachedThreshold={3} |
|
|
|
|
|
|
|
ListFooterComponent={() => ( |
|
|
|
|
|
|
|
!hasMore && !loadingPlaceholders ? ( |
|
|
|
|
|
|
|
<View style={{ padding: 10, alignItems: 'center' }}> |
|
|
|
|
|
|
|
<Text>没有更多数据了</Text> |
|
|
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
) : null |
|
|
|
|
|
|
|
)} |
|
|
|
refreshControl={ |
|
|
|
refreshControl={ |
|
|
|
<RefreshControl |
|
|
|
<RefreshControl |
|
|
|
refreshing={refreshing} |
|
|
|
refreshing={refreshing} |
|
|
|