nailaoyun/nl-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化购物车

Browse Source
This commit is contained in:
年糕崽崽
2025-05-29 16:58:38 +08:00
parent dc91dccd53
commit f3137097ff
1 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ShoppingCartDrawer.vue
View File

@@ -7,7 +7,7 @@
>
<div class="cart-content h-full flex flex-col">
<!-- 购物车列表 -->
<div class="cart-items flex-1 overflow-y-auto">
<div class="cart-items flex-1 overflow-y-auto p-4">
<div v-if="items.length === 0" class="empty-cart text-center py-8">
<div class="text-6xl mb-4">🛒</div>
<p class="text-gray-500">购物车是空的</p>
@@ -20,7 +20,7 @@
<div
v-for="(item, index) in items"
:key="`${item.productId}-${item.color}-${item.size}`"
class="cart-item p-4 border border-gray-200 rounded-lg"
class="cart-item p-4 border border-gray-200 rounded-lg shadow-sm transition duration-300 ease-in-out hover:shadow-md"
>
<div class="flex space-x-3">
<!-- 商品图片 -->
@@ -74,9 +74,9 @@
</div>
<!-- 底部结算 -->
<div v-if="items.length > 0" class="cart-footer border-t pt-4 mt-4">
<div v-if="items.length > 0" class="cart-footer border-t pt-4 mt-4 p-4">
<!-- 优惠信息 -->
<div class="discount-info mb-4 p-3 bg-yellow-50 rounded-lg">
<div class="discount-info mb-4 p-3 bg-yellow-50 rounded-lg shadow-sm">
<div class="flex items-center justify-between text-sm">
<span>满减优惠</span>
<span class="text-orange-600">-¥{{ discountAmount }}</span>
@@ -90,7 +90,7 @@
<div class="total-section mb-4">
<div class="flex justify-between items-center mb-2">
<span>商品总计：</span>
<span>¥{{ subtotal }}</span>
<span class="text-red-600">¥{{ subtotal }}</span>
</div>
<div class="flex justify-between items-center mb-2">
<span>运费：</span>
@@ -110,7 +110,7 @@
<el-button
type="primary"
size="large"
class="w-full"
class="w-full py-3 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
@click="handleCheckout"
>
去结算 ({{ totalQuantity }})
@@ -119,7 +119,7 @@
<!-- 继续购物 -->
<el-button
size="large"
class="w-full mt-2"
class="w-full py-3 mt-2 rounded-lg border border-gray-300 hover:border-red-300 hover:text-red-600 transition duration-300 ease-in-out"
@click="drawerVisible = false"
>
继续购物
@@ -199,4 +199,15 @@ const handleCheckout = () => {
.empty-cart {
@apply text-gray-400;
}
</style>
.el-button--primary {
background-color: #dc3545;
border-color: #dc3545;
color: white;
}
.el-button--primary:hover {
background-color: #c82333;
border-color: #bd2130;
}
</style>