商品收藏

app/screens/ProductDetailScreen.tsx

@@ -29,7 +29,7 @@ import HeartRedIcon from "../components/HeartIconRed";
 import ShareIcon from "../components/ShareIcon";
 import { Image as ExpoImage, ImageBackground } from "expo-image";
 import useUserStore from "../store/user";
-import { getSubjectTransLanguage,getSkuTransLanguage } from "../utils/languageUtils";
+import { getSubjectTransLanguage } from "../utils/languageUtils";
 import { useTranslation } from "react-i18next";
 import { getBurialPointData } from "../store/burialPoint";
 import useBurialPointStore from "../store/burialPoint";
@@ -609,17 +609,7 @@ export const ProductDetailScreen = () => {
                         <TouchableOpacity
                           onPress={() => {
                             setIsHeartRed(!isHeartRed);
-                            Alert.alert("收藏成功", "是否我的查看收藏", [
+                            productApi.collectProduct(route.params.offer_id);
-                              {
-                                text: "取消",
-                                onPress: () => console.log("取消 pressed"),
-                                style: "cancel",
-                              },
-                              {
-                                text: "确定",
-                                onPress: () => console.log("确定 pressed"),
-                              },
-                            ]);
                           }}
                         >
                           {isHeartRed ? (

app/screens/function/Collection.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   View,
   Text,
@@ -9,34 +9,52 @@ import {
   SafeAreaView,
   StatusBar,
   Platform,
+  ActivityIndicator,
+  RefreshControl,
+  Alert,
 } from "react-native";
 import widthUtils from "../../utils/widthUtils";
 import fontSize from "../../utils/fontsizeUtils";
 import BackIcon from "../../components/BackIcon";
 import { useNavigation } from "@react-navigation/native";
+import { productApi } from "../../services/api/productApi";
 
+// 收藏商品项组件
 const FavoriteItem = ({
-  image,
+  favoriteItem,
-  title,
+  onDelete,
-  price,
 }: {
-  image: string;
+  favoriteItem: any;
-  title: string;
+  onDelete: (favoriteId: number) => void;
-  price: number;
 }) => {
+  const product = favoriteItem.product;
+  
   return (
     <View style={styles.item}>
-      <Image source={{ uri: image }} style={styles.image} />
+      <Image 
+        source={{ uri: product.product_image_urls[0] || 'https://via.placeholder.com/100' }} 
+        style={styles.image} 
+      />
       <View style={styles.info}>
         <Text style={styles.title} numberOfLines={2}>
-          {title}
+          {product.subject_trans || product.subject}
+        </Text>
+        <Text style={styles.price}>
+          {product.currency}{product.min_price}
+          {product.vip_discount > 0 && (
+            <Text style={styles.originalPrice}>
+              {product.currency}{product.original_min_price}
+            </Text>
+          )}
         </Text>
-        <Text style={styles.price}>￥{price}</Text>
         <View style={styles.actions}>
           <TouchableOpacity style={[styles.btn, styles.cart]}>
             <Text style={styles.cartText}>加入购物车</Text>
           </TouchableOpacity>
-          <TouchableOpacity style={[styles.btn, styles.delete]}>
+          <TouchableOpacity 
+            style={[styles.btn, styles.delete]}
+            onPress={() => onDelete(favoriteItem.favorite_id)}
+          >
             <Text style={styles.deleteText}>删除</Text>
           </TouchableOpacity>
         </View>
@@ -47,57 +65,149 @@ const FavoriteItem = ({
 
 export const Collection = () => {
   const navigation = useNavigation();
-  const data = [
+  
-    {
+  // 状态管理
-      id: "1",
+  const [favorites, setFavorites] = useState<any[]>([]);
-      image: "https://img.alicdn.com/imgextra/i1/1234567890/O1CN01Item1.jpg",
+  const [loading, setLoading] = useState(true);
-      title: "韩版宽松休闲卫衣女春秋款薄款学生ins潮",
+  const [loadingMore, setLoadingMore] = useState(false);
-      price: 89.0,
+  const [refreshing, setRefreshing] = useState(false);
-    },
+  const [hasMore, setHasMore] = useState(true);
-    {
+  const [currentPage, setCurrentPage] = useState(1);
-      id: "2",
+  const [total, setTotal] = useState(0);
-      image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
+  
-      title: "小米无线蓝牙耳机半入耳式 轻巧便携",
+  const PAGE_SIZE = 10;
-      price: 129.0,
+
-    },
+  // 获取收藏列表
-    {
+  const fetchFavorites = useCallback(async (page: number = 1, isRefresh: boolean = false) => {
-      id: "3",
+    try {
-      image: "https://img.alicdn.com/imgextra/i3/3234567890/O1CN01Item3.jpg",
+      if (!isRefresh && page === 1) {
-      title: "华为MateBook X Pro 2020款 13.9英寸全面屏笔记本电脑",
+        setLoading(true);
-      price: 10999.0,
+      } else if (!isRefresh && page > 1) {
-    },
+        setLoadingMore(true);
-    {
+      }
-        id: "4",
+
-        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
+      const response = await productApi.getCollectProductList(page, PAGE_SIZE);
-        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
+      
-        price: 129.0,
+      if (isRefresh || page === 1) {
-      },
+        setFavorites(response.items);
-      {
+        setCurrentPage(1);
-        id: "5",
+      } else {
-        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
+        // 避免重复添加数据
-        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
+        setFavorites(prev => {
-        price: 129.0,
+          const newItems = response.items.filter(
-      },
+            newItem => !prev.some(existingItem => existingItem.favorite_id === newItem.favorite_id)
-      {
+          );
-        id: "6",
+          return [...prev, ...newItems];
-        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
+        });
-        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
+      }
-        price: 129.0,
+      
-      },
+      setTotal(response.total);
-      {
+      setHasMore(response.items.length === PAGE_SIZE && favorites.length + response.items.length < response.total);
-        id: "7",
+      
-        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
+      if (!isRefresh && page > 1) {
-        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
+        setCurrentPage(page);
-        price: 129.0,
+      }
-      },
+      
-      {
+    } catch (error) {
-        id: "82",
+      console.error("获取收藏列表失败:", error);
-        image: "https://img.alicdn.com/imgextra/i2/2234567890/O1CN01Item2.jpg",
+      Alert.alert("错误", "获取收藏列表失败，请重试");
-        title: "小米无线蓝牙耳机半入耳式 轻巧便携",
+    } finally {
-        price: 129.0,
+      setLoading(false);
-      },
+      setLoadingMore(false);
-    // 可以继续添加更多商品
+      setRefreshing(false);
-  ];
+    }
+  }, [favorites.length]);
+
+  // 初始化加载
+  useEffect(() => {
+    fetchFavorites(1);
+  }, []);
+
+  // 下拉刷新
+  const handleRefresh = useCallback(() => {
+    if (refreshing) return;
+    setRefreshing(true);
+    fetchFavorites(1, true);
+  }, [refreshing, fetchFavorites]);
+
+  // 触底加载更多
+  const handleLoadMore = useCallback(() => {
+    if (!hasMore || loadingMore || loading) return;
+    fetchFavorites(currentPage + 1);
+  }, [hasMore, loadingMore, loading, currentPage, fetchFavorites]);
+
+  // 删除收藏
+  const handleDelete = useCallback(async (favoriteId: number) => {
+    Alert.alert(
+      "确认删除",
+      "确定要删除这个收藏吗？",
+      [
+        { text: "取消", style: "cancel" },
+        {
+          text: "删除",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              // 这里需要调用删除收藏的API，如果API没有提供，先在前端删除
+              setFavorites(prev => prev.filter(item => item.favorite_id !== favoriteId));
+              setTotal(prev => prev - 1);
+            } catch (error) {
+              console.error("删除收藏失败:", error);
+              Alert.alert("错误", "删除失败，请重试");
+            }
+          }
+        }
+      ]
+    );
+  }, []);
+
+  // 滚动事件处理
+  const handleScroll = useCallback((event: any) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+    
+    if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
+      handleLoadMore();
+    }
+  }, [handleLoadMore]);
+
+  // 渲染加载指示器
+  const renderLoadingIndicator = () => (
+    <View style={styles.loadingContainer}>
+      <ActivityIndicator size="large" color="#ff5100" />
+      <Text style={styles.loadingText}>加载中...</Text>
+    </View>
+  );
+
+  // 渲染底部加载更多指示器
+  const renderFooter = () => {
+    if (loadingMore) {
+      return (
+        <View style={styles.footerContainer}>
+          <ActivityIndicator size="small" color="#ff5100" />
+          <Text style={styles.footerText}>加载更多...</Text>
+        </View>
+      );
+    }
+    
+    if (!hasMore && favorites.length > 0) {
+      return (
+        <View style={styles.footerContainer}>
+          <Text style={styles.footerText}>没有更多数据了</Text>
+        </View>
+      );
+    }
+    
+    return null;
+  };
+
+  // 渲染空状态
+  const renderEmptyState = () => (
+    <View style={styles.emptyContainer}>
+      <Text style={styles.emptyText}>暂无收藏商品</Text>
+      <Text style={styles.emptySubtext}>去逛逛，收藏喜欢的商品吧</Text>
+    </View>
+  );
 
   return (
     <SafeAreaView style={styles.safeArea}>
@@ -110,14 +220,43 @@ export const Collection = () => {
           >
             <BackIcon size={fontSize(22)} />
           </TouchableOpacity>
-          <Text style={styles.titles}>我的收藏</Text>
+          <Text style={styles.titles}>我的收藏 ({total})</Text>
           <View style={styles.placeholder} />
         </View>
-        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+        
-          {data.map((item) => (
+        {loading ? (
-            <FavoriteItem key={item.id} {...item} />
+          renderLoadingIndicator()
-          ))}
+        ) : (
-        </ScrollView>
+          <ScrollView 
+            style={styles.container} 
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+              <RefreshControl
+                refreshing={refreshing}
+                onRefresh={handleRefresh}
+                colors={["#ff5100"]}
+                tintColor="#ff5100"
+              />
+            }
+            onScroll={handleScroll}
+            scrollEventThrottle={16}
+          >
+            {favorites.length === 0 ? (
+              renderEmptyState()
+            ) : (
+              <>
+                {favorites.map((item) => (
+                  <FavoriteItem 
+                    key={item.favorite_id} 
+                    favoriteItem={item}
+                    onDelete={handleDelete}
+                  />
+                ))}
+                {renderFooter()}
+              </>
+            )}
+          </ScrollView>
+        )}
       </View>
     </SafeAreaView>
   );
@@ -172,6 +311,8 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
     borderBottomWidth: 1,
     borderBottomColor: "#eee",
+    marginBottom: 8,
+    borderRadius: 8,
   },
   image: {
     width: widthUtils(100, 100).width,
@@ -193,29 +334,75 @@ const styles = StyleSheet.create({
     color: "#f40",
     fontSize: fontSize(16),
     marginBottom: 10,
+    fontWeight: "600",
+  },
+  originalPrice: {
+    color: "#999",
+    fontSize: fontSize(14),
+    textDecorationLine: "line-through",
+    marginLeft: 8,
   },
   actions: {
     flexDirection: "row",
     gap: 8,
   },
   btn: {
-    paddingVertical: 4,
+    flex: 1,
-    paddingHorizontal: 10,
+    paddingVertical: 6,
-    borderRadius: 3,
+    paddingHorizontal: 12,
-    borderWidth: 1,
+    borderRadius: 4,
+    alignItems: "center",
   },
   cart: {
-    borderColor: "#ff5000",
+    backgroundColor: "#ff5100",
   },
   delete: {
-    borderColor: "#ccc",
+    backgroundColor: "#f5f5f5",
+    borderWidth: 1,
+    borderColor: "#ddd",
   },
   cartText: {
-    fontSize: fontSize(12),
+    color: "#fff",
-    color: "#ff5000",
+    fontSize: fontSize(14),
   },
   deleteText: {
+    color: "#666",
+    fontSize: fontSize(14),
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 100,
+  },
+  loadingText: {
+    marginTop: 10,
+    color: "#666",
+    fontSize: fontSize(14),
+  },
+  footerContainer: {
+    paddingVertical: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  footerText: {
+    color: "#999",
     fontSize: fontSize(12),
+    marginTop: 5,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 100,
+  },
+  emptyText: {
+    fontSize: fontSize(16),
+    color: "#666",
+    marginBottom: 8,
+  },
+  emptySubtext: {
+    fontSize: fontSize(14),
     color: "#999",
   },
 });

app/services/api/productApi.ts

@@ -193,6 +193,40 @@ export interface HotTerms {
   terms: string[];
 }
 
+
+interface SuccessfulResponse {
+  total: number;
+  page: number;
+  page_size: number;
+  items: FavoriteItem[];
+}
+
+interface FavoriteItem {
+  favorite_id: number;
+  user_id: number;
+  offer_id: number;
+  create_time: string; // ISO 8601 date string
+  product: Favorite;
+}
+
+interface Favorite {
+  offer_id: number;
+  subject: string;
+  subject_trans: string;
+  subject_trans_en: string;
+  subject_trans_ar: string;
+  product_image_urls: string[];
+  min_price: number;
+  max_price: number;
+  original_min_price: number;
+  original_max_price: number;
+  currency: string;
+  vip_discount: number;
+  vip_level: number;
+  discount_percent: number;
+  sold_out: number;
+}
+
   // 搜索商品
   export const productApi = {
     // 搜索商品
@@ -218,6 +252,20 @@ export interface HotTerms {
         return apiService.post<Products>('/api/search/image_search/?user_id='+data.user_id,{
           image_base64: data.image_base64
         });
+    },
+    // 收藏商品
+    collectProduct: (offer_id: string) => {
+        return apiService.post<Products>(`/api/favorites/`,{
+          offer_id:offer_id
+        });
+    },
+    // 收藏商品列表
+    getCollectProductList: (page:number,page_size:number) => {
+        return apiService.get<SuccessfulResponse>(`/api/favorites/?page=${page}&page_size=${page_size}`);
+    },
+    // 删除收藏商品
+    deleteCollectProduct: (offer_id: number) => {
+        return apiService.delete<Products>(`/api/favorites/${offer_id}/`);
     }
   }