|
|
@@ -60,155 +60,153 @@ export default function CartPage() {
|
|
|
|
|
|
return (
|
|
|
<TabBarLayout activeKey="cart">
|
|
|
- <View className="min-h-screen bg-gray-50">
|
|
|
- <Navbar
|
|
|
- title="购物车"
|
|
|
- leftIcon="i-heroicons-chevron-left-20-solid"
|
|
|
- onClickLeft={() => Taro.navigateBack()}
|
|
|
- rightIcon="i-heroicons-trash-20-solid"
|
|
|
- onClickRight={() => {
|
|
|
- Taro.showModal({
|
|
|
- title: '清空购物车',
|
|
|
- content: '确定要清空购物车吗?',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- clearCart()
|
|
|
- setSelectedItems([])
|
|
|
- }
|
|
|
+ <Navbar
|
|
|
+ title="购物车"
|
|
|
+ leftIcon="i-heroicons-chevron-left-20-solid"
|
|
|
+ onClickLeft={() => Taro.navigateBack()}
|
|
|
+ rightIcon="i-heroicons-trash-20-solid"
|
|
|
+ onClickRight={() => {
|
|
|
+ Taro.showModal({
|
|
|
+ title: '清空购物车',
|
|
|
+ content: '确定要清空购物车吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ clearCart()
|
|
|
+ setSelectedItems([])
|
|
|
}
|
|
|
- })
|
|
|
- }}
|
|
|
- />
|
|
|
-
|
|
|
- <ScrollView className="h-screen pt-12">
|
|
|
- <View className="px-4 py-4">
|
|
|
- {cart.items.length === 0 ? (
|
|
|
- <View className="flex flex-col items-center justify-center py-20">
|
|
|
- <View className="i-heroicons-shopping-cart-20-solid w-16 h-16 text-gray-300 mb-4" />
|
|
|
- <Text className="text-gray-500 mb-4">购物车是空的</Text>
|
|
|
- <Button
|
|
|
- onClick={() => Taro.navigateTo({ url: '/pages/goods-list/index' })}
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <ScrollView className="flex-1">
|
|
|
+ <View className="px-4 py-4">
|
|
|
+ {cart.items.length === 0 ? (
|
|
|
+ <View className="flex flex-col items-center justify-center py-20">
|
|
|
+ <View className="i-heroicons-shopping-cart-20-solid w-16 h-16 text-gray-300 mb-4" />
|
|
|
+ <Text className="text-gray-500 mb-4">购物车是空的</Text>
|
|
|
+ <Button
|
|
|
+ onClick={() => Taro.navigateTo({ url: '/pages/goods-list/index' })}
|
|
|
+ >
|
|
|
+ 去逛逛
|
|
|
+ </Button>
|
|
|
+ </View>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ {/* 全选 */}
|
|
|
+ <View className="bg-white rounded-lg p-4 mb-4 flex items-center">
|
|
|
+ <View
|
|
|
+ className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 ${
|
|
|
+ selectedItems.length === cart.items.length
|
|
|
+ ? 'bg-blue-500 border-blue-500'
|
|
|
+ : 'border-gray-300'
|
|
|
+ }`}
|
|
|
+ onClick={toggleSelectAll}
|
|
|
>
|
|
|
- 去逛逛
|
|
|
- </Button>
|
|
|
- </View>
|
|
|
- ) : (
|
|
|
- <>
|
|
|
- {/* 全选 */}
|
|
|
- <View className="bg-white rounded-lg p-4 mb-4 flex items-center">
|
|
|
- <View
|
|
|
- className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 ${
|
|
|
- selectedItems.length === cart.items.length
|
|
|
- ? 'bg-blue-500 border-blue-500'
|
|
|
- : 'border-gray-300'
|
|
|
- }`}
|
|
|
- onClick={toggleSelectAll}
|
|
|
- >
|
|
|
- {selectedItems.length === cart.items.length && (
|
|
|
- <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
- )}
|
|
|
- </View>
|
|
|
- <Text className="text-gray-700">全选 ({cart.items.length}件商品)</Text>
|
|
|
+ {selectedItems.length === cart.items.length && (
|
|
|
+ <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
+ )}
|
|
|
</View>
|
|
|
+ <Text className="text-gray-700">全选 ({cart.items.length}件商品)</Text>
|
|
|
+ </View>
|
|
|
|
|
|
- {/* 商品列表 */}
|
|
|
- {cart.items.map((item) => (
|
|
|
- <Card key={item.id} className="mb-4">
|
|
|
- <View className="p-4">
|
|
|
- <View className="flex items-start">
|
|
|
- <View
|
|
|
- className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 mt-8 ${
|
|
|
- selectedItems.includes(item.id)
|
|
|
- ? 'bg-blue-500 border-blue-500'
|
|
|
- : 'border-gray-300'
|
|
|
- }`}
|
|
|
- onClick={() => toggleSelectItem(item.id)}
|
|
|
- >
|
|
|
- {selectedItems.includes(item.id) && (
|
|
|
- <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
- )}
|
|
|
- </View>
|
|
|
+ {/* 商品列表 */}
|
|
|
+ {cart.items.map((item) => (
|
|
|
+ <Card key={item.id} className="mb-4">
|
|
|
+ <View className="p-4">
|
|
|
+ <View className="flex items-start">
|
|
|
+ <View
|
|
|
+ className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 mt-8 ${
|
|
|
+ selectedItems.includes(item.id)
|
|
|
+ ? 'bg-blue-500 border-blue-500'
|
|
|
+ : 'border-gray-300'
|
|
|
+ }`}
|
|
|
+ onClick={() => toggleSelectItem(item.id)}
|
|
|
+ >
|
|
|
+ {selectedItems.includes(item.id) && (
|
|
|
+ <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <Image
|
|
|
+ src={item.image}
|
|
|
+ className="w-20 h-20 rounded-lg mr-3"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+
|
|
|
+ <View className="flex-1">
|
|
|
+ <Text className="text-sm font-medium text-gray-900 mb-2 line-clamp-2">
|
|
|
+ {item.name}
|
|
|
+ </Text>
|
|
|
|
|
|
- <Image
|
|
|
- src={item.image}
|
|
|
- className="w-20 h-20 rounded-lg mr-3"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
+ <Text className="text-red-500 font-bold mb-2">
|
|
|
+ ¥{item.price.toFixed(2)}
|
|
|
+ </Text>
|
|
|
|
|
|
- <View className="flex-1">
|
|
|
- <Text className="text-sm font-medium text-gray-900 mb-2 line-clamp-2">
|
|
|
- {item.name}
|
|
|
- </Text>
|
|
|
-
|
|
|
- <Text className="text-red-500 font-bold mb-2">
|
|
|
- ¥{item.price.toFixed(2)}
|
|
|
- </Text>
|
|
|
-
|
|
|
- <View className="flex items-center justify-between">
|
|
|
- <View className="flex items-center border border-gray-300 rounded">
|
|
|
- <Button
|
|
|
- size="sm"
|
|
|
- variant="ghost"
|
|
|
- className="px-2"
|
|
|
- onClick={() => updateQuantity(item.id, item.quantity - 1)}
|
|
|
- >
|
|
|
- -
|
|
|
- </Button>
|
|
|
- <Text className="px-3 py-1 border-x border-gray-300 text-sm">
|
|
|
- {item.quantity}
|
|
|
- </Text>
|
|
|
- <Button
|
|
|
- size="sm"
|
|
|
- variant="ghost"
|
|
|
- className="px-2"
|
|
|
- onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
|
|
- >
|
|
|
- +
|
|
|
- </Button>
|
|
|
- </View>
|
|
|
-
|
|
|
+ <View className="flex items-center justify-between">
|
|
|
+ <View className="flex items-center border border-gray-300 rounded">
|
|
|
<Button
|
|
|
size="sm"
|
|
|
variant="ghost"
|
|
|
- className="text-red-500"
|
|
|
- onClick={() => removeFromCart(item.id)}
|
|
|
+ className="px-2"
|
|
|
+ onClick={() => updateQuantity(item.id, item.quantity - 1)}
|
|
|
>
|
|
|
- 删除
|
|
|
+ -
|
|
|
+ </Button>
|
|
|
+ <Text className="px-3 py-1 border-x border-gray-300 text-sm">
|
|
|
+ {item.quantity}
|
|
|
+ </Text>
|
|
|
+ <Button
|
|
|
+ size="sm"
|
|
|
+ variant="ghost"
|
|
|
+ className="px-2"
|
|
|
+ onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
|
|
+ >
|
|
|
+ +
|
|
|
</Button>
|
|
|
</View>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ size="sm"
|
|
|
+ variant="ghost"
|
|
|
+ className="text-red-500"
|
|
|
+ onClick={() => removeFromCart(item.id)}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
- </Card>
|
|
|
- ))}
|
|
|
- </>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- </ScrollView>
|
|
|
+ </View>
|
|
|
+ </Card>
|
|
|
+ ))}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+ </ScrollView>
|
|
|
|
|
|
- {/* 底部结算栏 */}
|
|
|
- {cart.items.length > 0 && (
|
|
|
- <View className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3">
|
|
|
- <View className="flex items-center justify-between">
|
|
|
- <View>
|
|
|
- <Text className="text-sm text-gray-600">
|
|
|
- 已选 {selectedItems.length} 件
|
|
|
- </Text>
|
|
|
- <Text className="text-lg font-bold text-red-500">
|
|
|
- ¥{selectedItemsTotal.toFixed(2)}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- <Button
|
|
|
- onClick={handleCheckout}
|
|
|
- disabled={selectedItems.length === 0}
|
|
|
- >
|
|
|
- 去结算 ({selectedItems.length})
|
|
|
- </Button>
|
|
|
+ {/* 底部结算栏 */}
|
|
|
+ {cart.items.length > 0 && (
|
|
|
+ <View className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3">
|
|
|
+ <View className="flex items-center justify-between">
|
|
|
+ <View>
|
|
|
+ <Text className="text-sm text-gray-600">
|
|
|
+ 已选 {selectedItems.length} 件
|
|
|
+ </Text>
|
|
|
+ <Text className="text-lg font-bold text-red-500">
|
|
|
+ ¥{selectedItemsTotal.toFixed(2)}
|
|
|
+ </Text>
|
|
|
</View>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ onClick={handleCheckout}
|
|
|
+ disabled={selectedItems.length === 0}
|
|
|
+ >
|
|
|
+ 去结算 ({selectedItems.length})
|
|
|
+ </Button>
|
|
|
</View>
|
|
|
- )}
|
|
|
- </View>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
</TabBarLayout>
|
|
|
)
|
|
|
}
|