前端各页面对接数据

pages/mall/consumer/cart copy.uvue

@@ -168,6 +168,8 @@
 <script setup lang="uts">
 import { ref, computed, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { CartItem } from '@/utils/supabaseService.uts'
 
 // 响应式数据
 const cartItems = ref<any[]>([])
@@ -289,23 +291,46 @@ onShow(() => {
 })
 
 // 加载数据
-const loadCartData = () => {
+const loadCartData = async () => {
 	loading.value = true
 	
-	// 从本地存储加载购物车数据
-	const cartData = uni.getStorageSync('cart')
-	if (cartData) {
-		try {
-			cartItems.value = JSON.parse(cartData as string) as any[]
-		} catch (e) {
-			console.error('解析购物车数据失败', e)
+	try {
+		// 从Supabase获取购物车数据
+		const dbCartItems = await supabaseService.getCartItems()
+		console.log('从Supabase获取购物车数据:', dbCartItems)
+		
+		// 将数据库CartItem映射为页面CartItem格式
+		cartItems.value = dbCartItems.map((item: CartItem) => ({
+			id: item.id, // 购物车项ID
+			productId: item.product_id, // 商品ID
+			shopId: item.shop_id || 'shop_default', // 店铺ID
+			shopName: item.shop_name || '自营店铺', // 店铺名称
+			name: item.product_name || '商品名称', // 商品名称
+			price: item.product_price || 0, // 商品价格
+			image: item.product_image || '/static/images/default-product.png', // 商品图片
+			spec: item.product_specification || '默认规格', // 商品规格
+			quantity: item.quantity, // 数量
+			selected: item.selected // 是否选中
+		}))
+		
+		// 同时更新本地存储作为缓存
+		uni.setStorageSync('cart', JSON.stringify(cartItems.value))
+		console.log('购物车数据已从数据库加载，数量:', cartItems.value.length)
+	} catch (error) {
+		console.error('从Supabase加载购物车数据失败:', error)
+		// 如果数据库加载失败，尝试从本地存储恢复
+		const cartData = uni.getStorageSync('cart')
+		if (cartData) {
+			try {
+				cartItems.value = JSON.parse(cartData as string) as any[]
+				console.log('使用本地存储购物车数据，数量:', cartItems.value.length)
+			} catch (e) {
+				console.error('解析购物车数据失败', e)
+				cartItems.value = []
+			}
+		} else {
 			cartItems.value = []
 		}
-	} else {
-		// 如果本地没有数据，使用Mock数据（可选，或者直接为空）
-		// 为了演示效果，这里可以保留一部分Mock数据，或者初始化为空
-		// cartItems.value = [...mockCartItems]
-		cartItems.value = [] 
 	}
 	
 	setTimeout(() => {
@@ -315,22 +340,42 @@ const loadCartData = () => {
 	}, 500)
 }
 
-// 监听购物车数据变化并保存到本地存储
+// 保存购物车数据到本地存储（作为缓存）
 const saveCartData = () => {
 	uni.setStorageSync('cart', JSON.stringify(cartItems.value))
 }
 
-// 商品操作 - 增加保存逻辑
-const toggleSelect = (itemId: string) => {
+// 商品操作 - 切换选择状态
+const toggleSelect = async (itemId: string) => {
 	const index = cartItems.value.findIndex(item => item.id === itemId)
 	if (index !== -1) {
-		cartItems.value[index].selected = !cartItems.value[index].selected
-		cartItems.value = [...cartItems.value] // 触发响应式更新
-		saveCartData()
+		const newSelected = !cartItems.value[index].selected
+		
+		try {
+			// 更新数据库中的选择状态
+			const success = await supabaseService.updateCartItemSelection(itemId, newSelected)
+			if (success) {
+				cartItems.value[index].selected = newSelected
+				cartItems.value = [...cartItems.value] // 触发响应式更新
+				saveCartData()
+			} else {
+				console.error('更新购物车项选择状态失败')
+				uni.showToast({
+					title: '操作失败',
+					icon: 'none'
+				})
+			}
+		} catch (error) {
+			console.error('更新购物车项选择状态异常:', error)
+			uni.showToast({
+				title: '操作失败',
+				icon: 'none'
+			})
+		}
 	}
 }
 
-const toggleShopSelect = (shopId: string) => {
+const toggleShopSelect = async (shopId: string) => {
 	const group = cartGroups.value.find((g: any) => g.shopId === shopId)
 	if (!group) return
 	
@@ -338,56 +383,164 @@ const toggleShopSelect = (shopId: string) => {
 	const isAllShopSelected = (group.items as any[]).every((item: any) => item.selected)
 	const newState = !isAllShopSelected
 	
-	// 更新该店铺下所有商品的状态
-	cartItems.value.forEach(item => {
-		if (item.shopId === shopId) {
-			item.selected = newState
+	// 获取该店铺下所有购物车项的ID
+	const cartItemIds = cartItems.value
+		.filter(item => item.shopId === shopId)
+		.map(item => item.id)
+	
+	if (cartItemIds.length === 0) return
+	
+	try {
+		// 批量更新数据库中的选择状态
+		const success = await supabaseService.batchUpdateCartItemSelection(cartItemIds, newState)
+		if (success) {
+			// 更新本地状态
+			cartItems.value.forEach(item => {
+				if (item.shopId === shopId) {
+					item.selected = newState
+				}
+			})
+			cartItems.value = [...cartItems.value]
+			saveCartData()
+		} else {
+			console.error('批量更新购物车项选择状态失败')
+			uni.showToast({
+				title: '操作失败',
+				icon: 'none'
+			})
 		}
-	})
-	cartItems.value = [...cartItems.value]
-	saveCartData()
-}
-
-const toggleSelectAll = () => {
-	const newSelectedState = !allSelected.value
-	cartItems.value = cartItems.value.map(item => ({
-		...item,
-		selected: newSelectedState
-	}))
-	saveCartData()
-}
-
-const increaseQuantity = (itemId: string) => {
-	const index = cartItems.value.findIndex(item => item.id === itemId)
-	if (index !== -1) {
-		cartItems.value[index].quantity++
-		cartItems.value = [...cartItems.value]
-		saveCartData()
+	} catch (error) {
+		console.error('批量更新购物车项选择状态异常:', error)
+		uni.showToast({
+			title: '操作失败',
+			icon: 'none'
+		})
 	}
 }
 
-const decreaseQuantity = (itemId: string) => {
+const toggleSelectAll = async () => {
+	const newSelectedState = !allSelected.value
+	
+	// 获取所有购物车项的ID
+	const cartItemIds = cartItems.value.map(item => item.id)
+	
+	if (cartItemIds.length === 0) return
+	
+	try {
+		// 批量更新数据库中的选择状态
+		const success = await supabaseService.batchUpdateCartItemSelection(cartItemIds, newSelectedState)
+		if (success) {
+			// 更新本地状态
+			cartItems.value = cartItems.value.map(item => ({
+				...item,
+				selected: newSelectedState
+			}))
+			saveCartData()
+		} else {
+			console.error('批量更新全选状态失败')
+			uni.showToast({
+				title: '操作失败',
+				icon: 'none'
+			})
+		}
+	} catch (error) {
+		console.error('批量更新全选状态异常:', error)
+		uni.showToast({
+			title: '操作失败',
+			icon: 'none'
+		})
+	}
+}
+
+const increaseQuantity = async (itemId: string) => {
+	const index = cartItems.value.findIndex(item => item.id === itemId)
+	if (index !== -1) {
+		const newQuantity = cartItems.value[index].quantity + 1
+		
+		try {
+			// 更新数据库中的数量
+			const success = await supabaseService.updateCartItemQuantity(itemId, newQuantity)
+			if (success) {
+				cartItems.value[index].quantity = newQuantity
+				cartItems.value = [...cartItems.value]
+				saveCartData()
+			} else {
+				console.error('更新购物车项数量失败')
+				uni.showToast({
+					title: '操作失败',
+					icon: 'none'
+				})
+			}
+		} catch (error) {
+			console.error('更新购物车项数量异常:', error)
+			uni.showToast({
+				title: '操作失败',
+				icon: 'none'
+			})
+		}
+	}
+}
+
+const decreaseQuantity = async (itemId: string) => {
 	const index = cartItems.value.findIndex(item => item.id === itemId)
 	if (index !== -1) {
 		if (cartItems.value[index].quantity > 1) {
-			cartItems.value[index].quantity--
-			cartItems.value = [...cartItems.value]
-			saveCartData()
+			const newQuantity = cartItems.value[index].quantity - 1
+			
+			try {
+				// 更新数据库中的数量
+				const success = await supabaseService.updateCartItemQuantity(itemId, newQuantity)
+				if (success) {
+					cartItems.value[index].quantity = newQuantity
+					cartItems.value = [...cartItems.value]
+					saveCartData()
+				} else {
+					console.error('更新购物车项数量失败')
+					uni.showToast({
+						title: '操作失败',
+						icon: 'none'
+					})
+				}
+			} catch (error) {
+				console.error('更新购物车项数量异常:', error)
+				uni.showToast({
+					title: '操作失败',
+					icon: 'none'
+				})
+			}
 		} else {
 			// 数量为1时，询问是否删除
 			uni.showModal({
 				title: '提示',
 				content: '确定要从购物车移除该商品吗？',
-				success: (res) => {
+				success: async (res) => {
 					if (res.confirm) {
-						cartItems.value.splice(index, 1)
-						cartItems.value = [...cartItems.value]
-						saveCartData()
-						
-						uni.showToast({
-							title: '已移除',
-							icon: 'none'
-						})
+						try {
+							// 从数据库删除购物车项
+							const success = await supabaseService.deleteCartItem(itemId)
+							if (success) {
+								cartItems.value.splice(index, 1)
+								cartItems.value = [...cartItems.value]
+								saveCartData()
+								
+								uni.showToast({
+									title: '已移除',
+									icon: 'success'
+								})
+							} else {
+								console.error('删除购物车项失败')
+								uni.showToast({
+									title: '删除失败',
+									icon: 'none'
+								})
+							}
+						} catch (error) {
+							console.error('删除购物车项异常:', error)
+							uni.showToast({
+								title: '删除失败',
+								icon: 'none'
+							})
+						}
 					}
 				}
 			})
@@ -395,8 +548,8 @@ const decreaseQuantity = (itemId: string) => {
 	}
 }
 
-// 删除商品 - 增加保存逻辑
-const deleteSelectedItems = () => {
+// 删除商品 - 批量删除选中的商品
+const deleteSelectedItems = async () => {
 	if (selectedCount.value === 0) {
 		uni.showToast({
 			title: '请选择要删除的商品',
@@ -408,70 +561,75 @@ const deleteSelectedItems = () => {
 	uni.showModal({
 		title: '提示',
 		content: `确定要删除选中的 ${selectedCount.value} 件商品吗？`,
-		success: (res) => {
+		success: async (res) => {
 			if (res.confirm) {
-				cartItems.value = cartItems.value.filter(item => !item.selected)
-				saveCartData()
+				// 获取选中的购物车项ID
+				const selectedCartItemIds = cartItems.value
+					.filter(item => item.selected)
+					.map(item => item.id)
 				
-				// 如果购物车删空了，退出管理模式
-				if (cartItems.value.length === 0) {
-					isManageMode.value = false
+				try {
+					// 批量从数据库删除购物车项
+					const success = await supabaseService.batchDeleteCartItems(selectedCartItemIds)
+					if (success) {
+						// 更新本地状态
+						cartItems.value = cartItems.value.filter(item => !item.selected)
+						saveCartData()
+						
+						// 如果购物车删空了，退出管理模式
+						if (cartItems.value.length === 0) {
+							isManageMode.value = false
+						}
+						
+						uni.showToast({
+							title: '删除成功',
+							icon: 'success'
+						})
+					} else {
+						console.error('批量删除购物车项失败')
+						uni.showToast({
+							title: '删除失败',
+							icon: 'none'
+						})
+					}
+				} catch (error) {
+					console.error('批量删除购物车项异常:', error)
+					uni.showToast({
+						title: '删除失败',
+						icon: 'none'
+					})
 				}
-				uni.showToast({
-					title: '删除成功',
-					icon: 'success'
-				})
 			}
 		}
 	})
 }
 
-const addToCart = (product: any) => {
-	// 获取现有购物车数据
-	const cartData = uni.getStorageSync('cart')
-	let currentItems: any[] = []
-	
-	if (cartData) {
-		try {
-			currentItems = JSON.parse(cartData as string) as any[]
-		} catch (e) {
-			console.error('解析购物车数据失败', e)
+const addToCart = async (product: any) => {
+	try {
+		// 调用SupabaseService添加商品到购物车
+		const success = await supabaseService.addToCart(product.id, 1, product.skuId)
+		if (success) {
+			uni.showToast({
+				title: '已添加到购物车',
+				icon: 'success'
+			})
+			
+			// 重新加载购物车数据
+			loadCartData()
+		} else {
+			console.error('添加商品到购物车失败')
+			uni.showToast({
+				title: '添加失败',
+				icon: 'none'
+			})
 		}
-	}
-	
-	// 检查商品是否已存在 (使用商品ID匹配，因为推荐商品没有SKU)
-	const existingItem = currentItems.find((item: any) => 
-		item.productId === product.id || item.id === product.id
-	)
-	
-	if (existingItem) {
-		existingItem.quantity++
-	} else {
-		// 添加新商品
-		currentItems.push({
-			id: product.id, // 商品ID（因为没有SKU）
-			productId: product.id, // 同样存储商品ID
-			shopId: product.shopId || 'shop_recommend',
-			shopName: product.shopName || '推荐好物',
-			name: product.name,
-			price: product.price,
-			image: product.image,
-			spec: product.specification || '默认规格', // 优先使用商品自带的规格
-			quantity: 1,
-			selected: true
+	} catch (error) {
+		console.error('添加商品到购物车异常:', error)
+		uni.showToast({
+			title: '添加失败',
+			icon: 'none'
 		})
 	}
-	
-	// 保存回存储
-	uni.setStorageSync('cart', JSON.stringify(currentItems))
-	
-	uni.showToast({
-		title: '已添加到购物车',
-		icon: 'success'
-	})
-	
-	// 立即刷新当前列表
-	loadCartData()
 }
 
 // 导航函数