|
|
|
|
@ -1,4 +1,10 @@
|
|
|
|
|
import React, { useState, useEffect, useCallback, useRef, useMemo } from "react"; |
|
|
|
|
import React, { |
|
|
|
|
useState, |
|
|
|
|
useEffect, |
|
|
|
|
useCallback, |
|
|
|
|
useRef, |
|
|
|
|
useMemo, |
|
|
|
|
} from "react"; |
|
|
|
|
import { |
|
|
|
|
View, |
|
|
|
|
Text, |
|
|
|
|
@ -17,7 +23,11 @@ import Ionicons from "@expo/vector-icons/Ionicons";
|
|
|
|
|
import { useNavigation, useRoute } from "@react-navigation/native"; |
|
|
|
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
|
|
|
import { RouteProp } from "@react-navigation/native"; |
|
|
|
|
import { productApi, type Product, ProductParams } from "../services/api/productApi"; |
|
|
|
|
import { |
|
|
|
|
productApi, |
|
|
|
|
type Product, |
|
|
|
|
ProductParams, |
|
|
|
|
} from "../services/api/productApi"; |
|
|
|
|
import { useTranslation } from "react-i18next"; |
|
|
|
|
import isSmallScreen from "../utils/isSmallScreen"; |
|
|
|
|
import { Svg, Path } from "react-native-svg"; |
|
|
|
|
@ -230,113 +240,152 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
const [isFilterVisible, setIsFilterVisible] = useState(false); |
|
|
|
|
const [sortOrder, setSortOrder] = useState<"asc" | "desc" | null>(null); |
|
|
|
|
const [sortField, setSortField] = useState<"price" | "time">("price"); |
|
|
|
|
const [activeTab, setActiveTab] = useState<"default" | "volume" | "price">("default"); |
|
|
|
|
|
|
|
|
|
const [activeTab, setActiveTab] = useState<"default" | "volume" | "price">( |
|
|
|
|
"default" |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// 获取初始图片URI
|
|
|
|
|
const imageUri = useMemo(() => { |
|
|
|
|
console.log('获取图片URI', route.params?.image); |
|
|
|
|
console.log("获取图片URI", route.params?.image); |
|
|
|
|
return route.params?.image || null; |
|
|
|
|
}, [route.params?.image]); |
|
|
|
|
|
|
|
|
|
// 将图片URI转换为FormData
|
|
|
|
|
const uriToFormData = async (uri: string) => { |
|
|
|
|
|
|
|
|
|
// 将图片URI转换为base64
|
|
|
|
|
const uriToBase64 = async (uri: string): Promise<string> => { |
|
|
|
|
try { |
|
|
|
|
console.log('开始转换图片', uri); |
|
|
|
|
const formData = new FormData(); |
|
|
|
|
|
|
|
|
|
const filename = uri.split("/").pop() || "image.jpg"; |
|
|
|
|
const match = /\.(\w+)$/.exec(filename); |
|
|
|
|
const type = match ? `image/${match[1]}` : "image/jpeg"; |
|
|
|
|
|
|
|
|
|
console.log("开始转换图片为base64", uri); |
|
|
|
|
|
|
|
|
|
const imageUri = Platform.OS === "ios" ? uri.replace("file://", "") : uri; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const imageFetchResponse = await fetch(imageUri); |
|
|
|
|
const imageBlob = await imageFetchResponse.blob(); |
|
|
|
|
|
|
|
|
|
formData.append("image", imageBlob, filename); |
|
|
|
|
|
|
|
|
|
console.log('图片转换完成'); |
|
|
|
|
return formData; |
|
|
|
|
|
|
|
|
|
// 转换为base64
|
|
|
|
|
const reader = new FileReader(); |
|
|
|
|
const base64Promise = new Promise<string>((resolve, reject) => { |
|
|
|
|
reader.onload = () => { |
|
|
|
|
const result = reader.result as string; |
|
|
|
|
resolve(result); |
|
|
|
|
}; |
|
|
|
|
reader.onerror = reject; |
|
|
|
|
reader.readAsDataURL(imageBlob); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const base64Data = await base64Promise; |
|
|
|
|
|
|
|
|
|
// 记录图片大小信息
|
|
|
|
|
console.log( |
|
|
|
|
"原始Blob大小:", |
|
|
|
|
imageBlob.size, |
|
|
|
|
"bytes =", |
|
|
|
|
(imageBlob.size / 1024).toFixed(2), |
|
|
|
|
"KB" |
|
|
|
|
); |
|
|
|
|
console.log("Base64数据长度:", base64Data.length, "字符"); |
|
|
|
|
console.log( |
|
|
|
|
"Base64数据大小:", |
|
|
|
|
(base64Data.length * 0.75).toFixed(0), |
|
|
|
|
"bytes ≈", |
|
|
|
|
((base64Data.length * 0.75) / 1024).toFixed(2), |
|
|
|
|
"KB" |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// 提取base64数据部分（去掉data:image/jpeg;base64,前缀）
|
|
|
|
|
const base64String = base64Data.split(",")[1]; |
|
|
|
|
console.log("纯Base64字符串长度:", base64String.length); |
|
|
|
|
|
|
|
|
|
console.log("图片转换为base64完成"); |
|
|
|
|
return base64String; |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('图片转换出错:', error); |
|
|
|
|
console.error("图片转换base64出错:", error); |
|
|
|
|
throw error; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 搜索图片
|
|
|
|
|
const searchByImage = async (uri: string) => { |
|
|
|
|
if (!uri) { |
|
|
|
|
console.log('没有有效的图片URI'); |
|
|
|
|
console.log("没有有效的图片URI"); |
|
|
|
|
setLoading(false); |
|
|
|
|
setShowSkeleton(false); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
console.log('开始搜索图片:', uri); |
|
|
|
|
console.log("开始搜索图片:", uri); |
|
|
|
|
console.log("用户信息:", userStore.user); |
|
|
|
|
setLoading(true); |
|
|
|
|
setShowSkeleton(true); |
|
|
|
|
|
|
|
|
|
const formData = await uriToFormData(uri); |
|
|
|
|
|
|
|
|
|
const base64String = await uriToBase64(uri); |
|
|
|
|
|
|
|
|
|
const userId = userStore.user?.user_id || null; |
|
|
|
|
const data = { |
|
|
|
|
formData: formData as FormData, |
|
|
|
|
user_id: userStore.user?.user_id, |
|
|
|
|
type: 'formData', |
|
|
|
|
image_base64: base64String, |
|
|
|
|
user_id: userId, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
console.log('调用图片搜索API'); |
|
|
|
|
|
|
|
|
|
console.log("调用图片搜索API，用户ID:", userId); |
|
|
|
|
const response = await productApi.searchByImage(data); |
|
|
|
|
|
|
|
|
|
console.log('图片搜索完成，返回数据:', JSON.stringify(response)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("图片搜索完成，返回数据:", JSON.stringify(response)); |
|
|
|
|
|
|
|
|
|
// 确保我们有有效的产品数组
|
|
|
|
|
const productList = Array.isArray(response) ? response : []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setProducts(productList); |
|
|
|
|
setOriginalProducts(productList); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 立即更新状态，无需等待
|
|
|
|
|
setLoading(false); |
|
|
|
|
setShowSkeleton(false); |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('图片搜索出错:', error); |
|
|
|
|
} catch (error: any) { |
|
|
|
|
console.error("图片搜索出错:", error); |
|
|
|
|
// 更详细的错误处理
|
|
|
|
|
if (error.code === "ERR_NETWORK") { |
|
|
|
|
console.error("网络连接错误，请检查："); |
|
|
|
|
console.error("1. 手机是否连接到同一WiFi网络"); |
|
|
|
|
console.error("2. 开发服务器是否正在运行"); |
|
|
|
|
console.error("3. 后端API服务是否正常"); |
|
|
|
|
} |
|
|
|
|
setProducts([]); |
|
|
|
|
setOriginalProducts([]); |
|
|
|
|
setLoading(false); |
|
|
|
|
setShowSkeleton(false); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 只在组件加载时执行一次搜索
|
|
|
|
|
useEffect(() => { |
|
|
|
|
console.log('imageUri', imageUri); |
|
|
|
|
|
|
|
|
|
console.log("imageUri", imageUri); |
|
|
|
|
console.log(imageUri); |
|
|
|
|
|
|
|
|
|
// 重置状态，确保每次都是新的开始
|
|
|
|
|
imageProcessed.current = false; |
|
|
|
|
setLoading(true); |
|
|
|
|
setShowSkeleton(true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果没有图片URI，立即结束加载状态
|
|
|
|
|
if (!imageUri) { |
|
|
|
|
console.log('没有图片URI，结束加载'); |
|
|
|
|
console.log("没有图片URI，结束加载"); |
|
|
|
|
setLoading(false); |
|
|
|
|
setShowSkeleton(false); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果已经处理过图片，则跳过
|
|
|
|
|
if (imageProcessed.current) { |
|
|
|
|
console.log('已处理过图片，跳过'); |
|
|
|
|
console.log("已处理过图片，跳过"); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log('首次加载，处理图片', imageUri); |
|
|
|
|
|
|
|
|
|
console.log("首次加载，处理图片", imageUri); |
|
|
|
|
imageProcessed.current = true; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 执行图片搜索
|
|
|
|
|
searchByImage(imageUri); |
|
|
|
|
}, [imageUri]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 搜索产品的API调用
|
|
|
|
|
const searchProducts = useCallback( |
|
|
|
|
async (keyword: string, isLoadMore = false) => { |
|
|
|
|
@ -356,7 +405,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
language: "en", |
|
|
|
|
user_id: userStore.user?.user_id, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const res = await productApi.getSearchProducts(params); |
|
|
|
|
if (isLoadMore) { |
|
|
|
|
setProducts((prev) => [...prev, ...res.products]); |
|
|
|
|
@ -384,7 +433,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
}, |
|
|
|
|
[userStore.user] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 处理搜索提交
|
|
|
|
|
const handleSearch = useCallback(() => { |
|
|
|
|
if (searchText.trim()) { |
|
|
|
|
@ -398,12 +447,12 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
searchProducts(searchText.trim()); |
|
|
|
|
} |
|
|
|
|
}, [searchText, searchProducts]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 切换筛选器显示状态
|
|
|
|
|
const toggleFilter = useCallback(() => { |
|
|
|
|
setIsFilterVisible(!isFilterVisible); |
|
|
|
|
}, [isFilterVisible]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 处理点击产品
|
|
|
|
|
const handleProductPress = useCallback( |
|
|
|
|
(product: Product) => { |
|
|
|
|
@ -414,26 +463,24 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
}, |
|
|
|
|
[navigation] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 返回上一页
|
|
|
|
|
const goBack = useCallback(() => { |
|
|
|
|
navigation.goBack(); |
|
|
|
|
}, [navigation]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染列表为空时的组件
|
|
|
|
|
const renderEmptyList = useCallback( |
|
|
|
|
() => ( |
|
|
|
|
<View style={styles.emptyContainer}> |
|
|
|
|
<IconComponent name="image-outline" size={48} color="#ccc" /> |
|
|
|
|
<Text style={styles.emptyText}> |
|
|
|
|
{t("noResults")} |
|
|
|
|
</Text> |
|
|
|
|
<Text style={styles.emptyText}>{t("noResults")}</Text> |
|
|
|
|
<Text style={styles.emptySubtext}>{t("tryDifferentImage")}</Text> |
|
|
|
|
</View> |
|
|
|
|
), |
|
|
|
|
[t] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染产品项
|
|
|
|
|
const renderProductItem = useCallback( |
|
|
|
|
({ item }: { item: Product }) => ( |
|
|
|
|
@ -446,29 +493,29 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
), |
|
|
|
|
[handleProductPress, t, userStore] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 创建产品列表项的key提取器
|
|
|
|
|
const keyExtractor = useCallback( |
|
|
|
|
(item: Product, index: number) => `${item.offer_id}-${index}`, |
|
|
|
|
[] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 处理滚动事件
|
|
|
|
|
const handleScroll = useCallback((event: any) => { |
|
|
|
|
const offsetY = event.nativeEvent.contentOffset.y; |
|
|
|
|
// 当滚动超过屏幕高度的一半时显示回到顶部按钮
|
|
|
|
|
setShowBackToTop(offsetY > 300); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 回到顶部
|
|
|
|
|
const scrollToTop = useCallback(() => { |
|
|
|
|
flatListRef.current?.scrollToOffset({ offset: 0, animated: true }); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染骨架屏网格
|
|
|
|
|
const renderSkeletonGrid = useCallback(() => { |
|
|
|
|
const skeletonArray = Array(8).fill(null); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View style={styles.productGrid}> |
|
|
|
|
<FlatList |
|
|
|
|
@ -482,7 +529,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
</View> |
|
|
|
|
); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 处理排序
|
|
|
|
|
const handleSort = useCallback( |
|
|
|
|
(field: "price" | "time", order: "asc" | "desc") => { |
|
|
|
|
@ -510,7 +557,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
}, |
|
|
|
|
[] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 处理标签切换
|
|
|
|
|
const handleTabChange = useCallback( |
|
|
|
|
(tab: "default" | "volume" | "price") => { |
|
|
|
|
@ -546,7 +593,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
}, |
|
|
|
|
[handleSort, activeTab, sortOrder, originalProducts, scrollToTop] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染列表底部加载更多
|
|
|
|
|
const renderFooter = useCallback(() => { |
|
|
|
|
if (!hasMore) |
|
|
|
|
@ -564,7 +611,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
); |
|
|
|
|
return <View style={styles.footerSpace} />; |
|
|
|
|
}, [loadingMore, hasMore, t]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<SafeAreaView style={styles.safeArea}> |
|
|
|
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" /> |
|
|
|
|
@ -604,7 +651,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 标签筛选 */} |
|
|
|
|
<View style={styles.tabContainer}> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
@ -620,7 +667,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
activeTab === "default" && styles.activeTabText, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
{t('default')} |
|
|
|
|
{t("default")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
@ -636,7 +683,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
activeTab === "volume" && styles.activeTabText, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
{t('volume')} |
|
|
|
|
{t("volume")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
@ -653,12 +700,14 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
activeTab === "price" && styles.activeTabText, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
{t('price')} |
|
|
|
|
{t("price")} |
|
|
|
|
</Text> |
|
|
|
|
{activeTab === "price" && ( |
|
|
|
|
<View style={styles.tabIcon}> |
|
|
|
|
<IconComponent |
|
|
|
|
name={sortOrder === "desc" ? "chevron-down" : "chevron-up"} |
|
|
|
|
name={ |
|
|
|
|
sortOrder === "desc" ? "chevron-down" : "chevron-up" |
|
|
|
|
} |
|
|
|
|
size={16} |
|
|
|
|
color="#000" |
|
|
|
|
/> |
|
|
|
|
@ -667,7 +716,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
</View> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 搜索结果 */} |
|
|
|
|
<View style={styles.resultsContainer}> |
|
|
|
|
{/* 搜索结果标题栏和排序选项 */} |
|
|
|
|
@ -739,7 +788,7 @@ export const ImageSearchResultScreen = ({
|
|
|
|
|
</View> |
|
|
|
|
<View style={styles.sortDivider} /> |
|
|
|
|
<View style={styles.sortGroup}> |
|
|
|
|
<Text style={styles.sortLabel}>{t('time')}:</Text> |
|
|
|
|
<Text style={styles.sortLabel}>{t("time")}:</Text> |
|
|
|
|
<View style={styles.sortButtons}> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={[ |
|
|
|
|
@ -888,12 +937,12 @@ const styles = StyleSheet.create({
|
|
|
|
|
clearButton: { |
|
|
|
|
position: "absolute", |
|
|
|
|
right: 10, |
|
|
|
|
top: '50%', |
|
|
|
|
top: "50%", |
|
|
|
|
marginTop: -10, |
|
|
|
|
width: 20, |
|
|
|
|
height: 20, |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
alignItems: "center", |
|
|
|
|
justifyContent: "center", |
|
|
|
|
zIndex: 20, |
|
|
|
|
}, |
|
|
|
|
titleContainer: { |
|
|
|
|
@ -1142,4 +1191,4 @@ const styles = StyleSheet.create({
|
|
|
|
|
backgroundColor: "#EAEAEA", |
|
|
|
|
borderRadius: 4, |
|
|
|
|
}, |
|
|
|
|
});
|
|
|
|
|
}); |
|
|
|
|
|
Mac
2 weeks ago