|
|
@@ -2,12 +2,12 @@ import { View, ScrollView, Text } from '@tarojs/components'
|
|
|
import { useState, useEffect } from 'react'
|
|
|
import Taro from '@tarojs/taro'
|
|
|
import { Navbar } from '@/components/ui/navbar'
|
|
|
-import { Card } from '@/components/ui/card'
|
|
|
import { Button } from '@/components/ui/button'
|
|
|
import { Image } from '@/components/ui/image'
|
|
|
import { useCart } from '@/utils/cart'
|
|
|
import { TabBarLayout } from '@/layouts/tab-bar-layout'
|
|
|
import clsx from 'clsx'
|
|
|
+import './index.css'
|
|
|
|
|
|
export default function CartPage() {
|
|
|
const { cart, updateQuantity, removeFromCart, clearCart, isLoading } = useCart()
|
|
|
@@ -56,13 +56,13 @@ export default function CartPage() {
|
|
|
}
|
|
|
|
|
|
const checkoutItems = cart.items.filter(item => selectedItems.includes(item.id))
|
|
|
-
|
|
|
+
|
|
|
// 存储选中的商品信息
|
|
|
Taro.setStorageSync('checkoutItems', {
|
|
|
items: checkoutItems,
|
|
|
totalAmount: selectedItemsTotal
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
Taro.navigateTo({
|
|
|
url: '/pages/order-submit/index'
|
|
|
})
|
|
|
@@ -70,28 +70,28 @@ export default function CartPage() {
|
|
|
|
|
|
// 骨架屏组件
|
|
|
const CartSkeleton = () => (
|
|
|
- <View className="px-4 py-4">
|
|
|
+ <View className="cart-skeleton">
|
|
|
{[...Array(3)].map((_, index) => (
|
|
|
- <Card key={index} className="mb-4">
|
|
|
- <View className="p-4">
|
|
|
- <View className="flex items-start">
|
|
|
- <View className="w-5 h-5 bg-gray-200 rounded-full mr-3 mt-8" />
|
|
|
- <View className="w-20 h-20 bg-gray-200 rounded-lg mr-3" />
|
|
|
- <View className="flex-1">
|
|
|
- <View className="h-4 bg-gray-200 rounded mb-2 w-3/4" />
|
|
|
- <View className="h-4 bg-gray-200 rounded mb-2 w-1/2" />
|
|
|
- <View className="flex items-center justify-between">
|
|
|
- <View className="flex items-center">
|
|
|
- <View className="w-6 h-6 bg-gray-200 rounded" />
|
|
|
- <View className="w-8 h-6 bg-gray-200 mx-2" />
|
|
|
- <View className="w-6 h-6 bg-gray-200 rounded" />
|
|
|
+ <View key={index} className="cart-group">
|
|
|
+ <View className="goods-item">
|
|
|
+ <View className="goods-item-info">
|
|
|
+ <View className="check-wrap">
|
|
|
+ <View className="check-icon skeleton" />
|
|
|
+ </View>
|
|
|
+ <View className="goods-sku-info">
|
|
|
+ <View className="goods-card horizontal-wrap">
|
|
|
+ <View className="goods-thumb skeleton" />
|
|
|
+ <View className="goods-body">
|
|
|
+ <View className="goods-title skeleton" />
|
|
|
+ <View className="goods-specs skeleton" />
|
|
|
+ <View className="goods-price skeleton" />
|
|
|
+ <View className="goods-stepper skeleton" />
|
|
|
</View>
|
|
|
- <View className="w-12 h-6 bg-gray-200 rounded" />
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
- </Card>
|
|
|
+ </View>
|
|
|
))}
|
|
|
</View>
|
|
|
)
|
|
|
@@ -122,206 +122,181 @@ export default function CartPage() {
|
|
|
})
|
|
|
}}
|
|
|
/>
|
|
|
-
|
|
|
+
|
|
|
<ScrollView
|
|
|
- className="flex-1"
|
|
|
+ className="cart-container"
|
|
|
scrollY
|
|
|
scrollWithAnimation
|
|
|
>
|
|
|
- <View className="px-4 py-4">
|
|
|
- {showSkeleton && cart.items.length === 0 ? (
|
|
|
- <CartSkeleton />
|
|
|
- ) : cart.items.length === 0 ? (
|
|
|
- <View className="flex flex-col items-center justify-center py-32">
|
|
|
- <View className="i-heroicons-shopping-cart-20-solid w-20 h-20 text-gray-300 mb-6" />
|
|
|
- <Text className="text-gray-500 text-lg mb-2">购物车是空的</Text>
|
|
|
- <Text className="text-gray-400 text-sm mb-6">快去挑选心仪的商品吧</Text>
|
|
|
- <Button
|
|
|
- onClick={() => Taro.navigateTo({ url: '/pages/goods-list/index' })}
|
|
|
- className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-8 py-3 rounded-full font-medium"
|
|
|
- >
|
|
|
- 立即选购
|
|
|
- </Button>
|
|
|
- </View>
|
|
|
- ) : (
|
|
|
- <View>
|
|
|
- {/* 全选和批量操作 */}
|
|
|
- <Card className="mb-4">
|
|
|
- <View className="p-4 flex items-center justify-between">
|
|
|
- <View className="flex items-center">
|
|
|
+ {showSkeleton && cart.items.length === 0 ? (
|
|
|
+ <CartSkeleton />
|
|
|
+ ) : cart.items.length === 0 ? (
|
|
|
+ <View className="cart-empty">
|
|
|
+ <View className="cart-empty-image" />
|
|
|
+ <Text className="cart-empty-tip">购物车是空的</Text>
|
|
|
+ <Button
|
|
|
+ onClick={() => Taro.navigateTo({ url: '/pages/goods-list/index' })}
|
|
|
+ className="cart-empty-btn"
|
|
|
+ >
|
|
|
+ 去首页逛逛
|
|
|
+ </Button>
|
|
|
+ </View>
|
|
|
+ ) : (
|
|
|
+ <View className="cart-content">
|
|
|
+ {/* 商品列表 */}
|
|
|
+ <View className="cart-group">
|
|
|
+ {cart.items.map((item) => (
|
|
|
+ <View key={item.id} className="goods-item">
|
|
|
+ <View className="goods-item-info">
|
|
|
+ {/* 选择框 */}
|
|
|
<View
|
|
|
- className={clsx(
|
|
|
- 'w-5 h-5 rounded-full flex items-center justify-center mr-3',
|
|
|
- selectedItems.length === cart.items.length
|
|
|
- ? 'bg-blue-500 border-blue-500'
|
|
|
- : 'border-2 border-gray-300'
|
|
|
- )}
|
|
|
- onClick={toggleSelectAll}
|
|
|
+ className="check-wrap"
|
|
|
+ onClick={() => toggleSelectItem(item.id)}
|
|
|
>
|
|
|
- {selectedItems.length === cart.items.length && (
|
|
|
- <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
- )}
|
|
|
- </View>
|
|
|
- <Text className="text-gray-900 font-medium">
|
|
|
- 全选 ({cart.items.length}件商品)
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- {selectedItems.length > 0 && (
|
|
|
- <View
|
|
|
- className="text-red-500 text-sm"
|
|
|
- onClick={() => {
|
|
|
- Taro.showModal({
|
|
|
- title: '删除选中商品',
|
|
|
- content: `确定要删除选中的${selectedItems.length}件商品吗？`,
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- selectedItems.forEach(id => removeFromCart(id))
|
|
|
- setSelectedItems([])
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }}
|
|
|
- >
|
|
|
- 删除选中
|
|
|
+ <View
|
|
|
+ className={clsx(
|
|
|
+ 'check-icon',
|
|
|
+ selectedItems.includes(item.id) ? 'selected' : ''
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {selectedItems.includes(item.id) && (
|
|
|
+ <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
</View>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- </Card>
|
|
|
|
|
|
- {/* 商品列表 */}
|
|
|
- <View className="space-y-4">
|
|
|
- {cart.items.map((item) => (
|
|
|
- <Card key={item.id} className="overflow-hidden">
|
|
|
- <View className="p-4">
|
|
|
- <View className="flex items-start">
|
|
|
- {/* 选择框 */}
|
|
|
- <View
|
|
|
- className={clsx(
|
|
|
- 'w-5 h-5 rounded-full flex items-center justify-center mr-3 mt-16 flex-shrink-0',
|
|
|
- selectedItems.includes(item.id)
|
|
|
- ? 'bg-blue-500 border-blue-500'
|
|
|
- : 'border-2 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 className="goods-sku-info">
|
|
|
+ <View className="goods-card horizontal-wrap">
|
|
|
+ {/* 商品图片 */}
|
|
|
+ <View className="goods-thumb">
|
|
|
+ <Image
|
|
|
+ src={item.image}
|
|
|
+ className="thumb-image"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ {item.stock <= 3 && (
|
|
|
+ <View className="stock-mask">
|
|
|
+ 仅剩{item.stock}件
|
|
|
+ </View>
|
|
|
)}
|
|
|
</View>
|
|
|
-
|
|
|
- {/* 商品图片 */}
|
|
|
- <Image
|
|
|
- src={item.image}
|
|
|
- className="w-24 h-24 rounded-lg mr-3 flex-shrink-0"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
-
|
|
|
+
|
|
|
{/* 商品信息 */}
|
|
|
- <View className="flex-1 min-w-0">
|
|
|
- <Text className="text-sm font-medium text-gray-900 mb-2 line-clamp-2">
|
|
|
- {item.name}
|
|
|
- </Text>
|
|
|
-
|
|
|
- <View className="mb-3">
|
|
|
- <Text className="text-red-500 font-bold text-lg">
|
|
|
- ¥{item.price.toFixed(2)}
|
|
|
- </Text>
|
|
|
- {item.originalPrice && item.originalPrice > item.price && (
|
|
|
- <Text className="text-gray-400 text-sm line-through ml-2">
|
|
|
- ¥{item.originalPrice.toFixed(2)}
|
|
|
- </Text>
|
|
|
- )}
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="flex items-center justify-between">
|
|
|
- {/* 数量选择器 */}
|
|
|
- <View className="flex items-center border border-gray-200 rounded-lg bg-gray-50">
|
|
|
- <Button
|
|
|
- size="sm"
|
|
|
- variant="ghost"
|
|
|
- className="px-2 h-8 w-8 flex items-center justify-center text-gray-600"
|
|
|
- onClick={() => updateQuantity(item.id, Math.max(1, item.quantity - 1))}
|
|
|
- disabled={item.quantity <= 1}
|
|
|
- >
|
|
|
- <View className="i-heroicons-minus-20-solid w-4 h-4" />
|
|
|
- </Button>
|
|
|
- <Text className="px-4 py-1 border-x border-gray-200 text-sm font-medium min-w-12 text-center">
|
|
|
- {item.quantity}
|
|
|
- </Text>
|
|
|
- <Button
|
|
|
- size="sm"
|
|
|
- variant="ghost"
|
|
|
- className="px-2 h-8 w-8 flex items-center justify-center text-gray-600"
|
|
|
- onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
|
|
- >
|
|
|
- <View className="i-heroicons-plus-20-solid w-4 h-4" />
|
|
|
- </Button>
|
|
|
+ <View className="goods-body">
|
|
|
+ <Text className="goods-title">{item.name}</Text>
|
|
|
+
|
|
|
+ {item.spec && (
|
|
|
+ <View className="goods-specs">
|
|
|
+ <Text className="specs-text">{item.spec}</Text>
|
|
|
+ <View className="i-heroicons-chevron-down-20-solid w-4 h-4 text-gray-400" />
|
|
|
</View>
|
|
|
-
|
|
|
- {/* 删除按钮 */}
|
|
|
+ )}
|
|
|
+
|
|
|
+ <View className="goods-price-section">
|
|
|
+ <Text className="goods-price">¥{item.price.toFixed(2)}</Text>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 数量选择器 */}
|
|
|
+ <View className="goods-stepper">
|
|
|
<Button
|
|
|
size="sm"
|
|
|
variant="ghost"
|
|
|
- className="text-red-500 p-2"
|
|
|
- onClick={() => {
|
|
|
- Taro.showModal({
|
|
|
- title: '删除商品',
|
|
|
- content: '确定要删除这个商品吗？',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- removeFromCart(item.id)
|
|
|
- setSelectedItems(prev => prev.filter(id => id !== item.id))
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }}
|
|
|
+ className="stepper-btn minus"
|
|
|
+ onClick={() => updateQuantity(item.id, Math.max(1, item.quantity - 1))}
|
|
|
+ disabled={item.quantity <= 1}
|
|
|
>
|
|
|
- <View className="i-heroicons-trash-20-solid w-4 h-4" />
|
|
|
+ <View className="i-heroicons-minus-20-solid w-3 h-3" />
|
|
|
+ </Button>
|
|
|
+ <Text className="stepper-value">{item.quantity}</Text>
|
|
|
+ <Button
|
|
|
+ size="sm"
|
|
|
+ variant="ghost"
|
|
|
+ className="stepper-btn plus"
|
|
|
+ onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
|
|
+ >
|
|
|
+ <View className="i-heroicons-plus-20-solid w-3 h-3" />
|
|
|
</Button>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
- </Card>
|
|
|
- ))}
|
|
|
- </View>
|
|
|
-
|
|
|
- {/* 底部留白 */}
|
|
|
- <View className="h-24" />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 删除按钮 */}
|
|
|
+ <View
|
|
|
+ className="delete-btn"
|
|
|
+ onClick={() => {
|
|
|
+ Taro.showModal({
|
|
|
+ title: '删除商品',
|
|
|
+ content: '确定要删除这个商品吗？',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ removeFromCart(item.id)
|
|
|
+ setSelectedItems(prev => prev.filter(id => id !== item.id))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ ))}
|
|
|
</View>
|
|
|
- )}
|
|
|
- </View>
|
|
|
+
|
|
|
+ {/* 广告区域 */}
|
|
|
+ <View className="cart-advertisement">
|
|
|
+ <Image
|
|
|
+ src="https://via.placeholder.com/300x150"
|
|
|
+ className="ad-image"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 底部留白 */}
|
|
|
+ <View className="cart-bottom-gap" />
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
</ScrollView>
|
|
|
|
|
|
- {/* 底部结算栏 - 修正TabBar遮挡问题 */}
|
|
|
+ {/* 底部结算栏 */}
|
|
|
{cart.items.length > 0 && (
|
|
|
- <View className="fixed bottom-15 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 pb-20">
|
|
|
- <View className="flex items-center justify-between">
|
|
|
- <View>
|
|
|
- <Text className="text-sm text-gray-600">
|
|
|
- 已选 {selectedItems.length} 件商品
|
|
|
- </Text>
|
|
|
- <View className="flex items-baseline">
|
|
|
- <Text className="text-red-500 font-bold text-xl">
|
|
|
- ¥{selectedItemsTotal.toFixed(2)}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <Button
|
|
|
- onClick={handleCheckout}
|
|
|
- disabled={selectedItems.length === 0}
|
|
|
+ <View className="cart-bar">
|
|
|
+ <View
|
|
|
+ className="cart-bar-check"
|
|
|
+ onClick={toggleSelectAll}
|
|
|
+ >
|
|
|
+ <View
|
|
|
className={clsx(
|
|
|
- 'px-8 py-3 rounded-full font-medium text-base',
|
|
|
- selectedItems.length > 0
|
|
|
- ? 'bg-gradient-to-r from-red-500 to-red-600 text-white shadow-lg'
|
|
|
- : 'bg-gray-300 text-gray-500'
|
|
|
+ 'check-icon',
|
|
|
+ selectedItems.length === cart.items.length ? 'selected' : ''
|
|
|
)}
|
|
|
>
|
|
|
- {selectedItems.length > 0 ? `去结算(${selectedItems.length})` : '请选择商品'}
|
|
|
- </Button>
|
|
|
+ {selectedItems.length === cart.items.length && (
|
|
|
+ <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+ <Text className="cart-bar-text">全选</Text>
|
|
|
</View>
|
|
|
+
|
|
|
+ <View className="cart-bar-total">
|
|
|
+ <View>
|
|
|
+ <Text className="total-label">总计</Text>
|
|
|
+ <Text className="total-amount">¥{selectedItemsTotal.toFixed(2)}</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ onClick={handleCheckout}
|
|
|
+ disabled={selectedItems.length === 0}
|
|
|
+ className={clsx(
|
|
|
+ 'settle-btn',
|
|
|
+ selectedItems.length > 0 ? 'active' : 'disabled'
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ 去结算({selectedItems.length})
|
|
|
+ </Button>
|
|
|
</View>
|
|
|
)}
|
|
|
</TabBarLayout>
|
yourname