From 2839044a1269268e277f23f66cf2b86dcf85de3b Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期日, 09 三月 2025 13:53:27 +0800
Subject: [PATCH] 修改购物车功能
---
src/views/CartPage.vue | 82 +++++++++++++++++-----------------------
1 files changed, 35 insertions(+), 47 deletions(-)
diff --git a/src/views/CartPage.vue b/src/views/CartPage.vue
index d495154..b912a9f 100644
--- a/src/views/CartPage.vue
+++ b/src/views/CartPage.vue
@@ -1,17 +1,17 @@
<template>
<div class="container mx-auto px-4 py-8">
- <div class="bg-white rounded-lg shadow">
+ <div class="bg-white rounded-lg shadow h-[780px]">
<!-- 璐墿杞﹀ご閮� -->
<div class="p-4 border-b">
<h1 class="text-xl font-medium">璐墿杞�</h1>
</div>
<!-- 璐墿杞︿富浣� -->
- <div class="p-4">
+ <div class="p-4" style="height: calc(100% - 58px); box-sizing: border-box;">
<!-- 琛ㄥご -->
- <div class="flex items-center pb-4 border-b text-gray-500 text-sm">
+ <div class="flex items-center pb-4 border-b text-gray-500 text-sm" style=" background-color: #f4f4f4; box-sizing: border-box; padding: 10px 15px;">
<div class="w-12">
- <el-checkbox v-model="allSelected" @change="handleSelectAll" />
+ <el-checkbox v-model="allSelected" />
</div>
<div class="flex-1">鍟嗗搧</div>
<div class="w-24 text-center">鍗曚环</div>
@@ -24,10 +24,13 @@
<el-empty v-if="!cartItems.length" description="璐墿杞﹁繕鏄┖鐨�" />
<!-- 鍟嗗搧鍒楄〃 -->
- <div v-else>
- <div v-for="item in cartItems" :key="item.addID" class="flex items-center py-4 border-b">
+ <div v-else style=" height: calc(100% - 116px);overflow: auto;">
+ <div v-for="item in cartItems" :key="item.addID" class="flex items-center border-b" style="padding: 1rem;">
<div class="w-12">
- <el-checkbox v-model="item.selected" @change="updateSelectedState" />
+ <el-checkbox
+ v-model="item.selected"
+ @change="(val) => cartStore.updateItemSelected(item.addID, val)"
+ />
</div>
<div class="flex-1 flex items-center gap-4">
<el-image :src="item.image" class="w-20 h-20 object-cover rounded" />
@@ -42,7 +45,7 @@
:min="1"
:max="99"
size="small"
- @change="handleQuantityChange(item)"
+ @change="() => handleQuantityChange(item)"
/>
</div>
<div class="w-24 text-center text-red-500">
@@ -55,9 +58,9 @@
</div>
<!-- 璐墿杞﹀簳閮� -->
- <div class="flex justify-between items-center mt-4 py-4">
+ <div v-if="cartItems.length" class="flex justify-between items-center mt-4 py-4">
<div class="flex items-center gap-4">
- <el-checkbox v-model="allSelected" @change="handleSelectAll">鍏ㄩ��</el-checkbox>
+ <!-- <el-checkbox v-model="allSelected">鍏ㄩ��</el-checkbox> -->
<el-button type="text" @click="removeSelected">鍒犻櫎閫変腑</el-button>
</div>
<div class="flex items-center gap-4">
@@ -65,9 +68,13 @@
宸查�夊晢鍝� <span class="text-red-500">{{ selectedCount }}</span> 浠�
</div>
<div class="text-gray-500">
- 鍚堣锛�<span class="text-red-500 text-xl font-medium">楼{{ totalPrice.toFixed(2) }}</span>
+ 鍚堣锛�<span class=" text-lg font-bold" style="color: #16b5cb;font-size: large;">楼{{ totalPrice.toFixed(2) }}</span>
</div>
- <el-button type="primary" :disabled="!selectedCount" @click="handleCheckout">
+ <el-button
+ type="primary"
+ :disabled="!selectedCount"
+ @click="handleCheckout"
+ >
缁撶畻
</el-button>
</div>
@@ -78,7 +85,7 @@
</template>
<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCartStore } from '@/stores/useCartStore';
@@ -87,15 +94,15 @@
const cartStore = useCartStore();
// 鑾峰彇璐墿杞︽暟鎹�
-const cartItems = computed(() => {
- return cartStore.cartItems.map(item => ({
- ...item,
- selected: false
- }));
-});
+const cartItems = computed(() => cartStore.items);
// 鍏ㄩ�夌姸鎬�
-const allSelected = ref(false);
+const allSelected = computed({
+ get: () => cartItems.value.length > 0 && cartItems.value.every(item => item.selected),
+ set: (val) => {
+ cartStore.updateAllSelected(val);
+ }
+});
// 閫変腑鍟嗗搧鏁伴噺
const selectedCount = computed(() => {
@@ -106,28 +113,12 @@
const totalPrice = computed(() => {
return cartItems.value
.filter(item => item.selected)
- .reduce((total, item) => total + item.price * item.quantity, 0);
+ .reduce((total, item) => total + (item.price * item.quantity), 0);
});
-
-// 鍏ㄩ��/鍙栨秷鍏ㄩ��
-const handleSelectAll = (val: boolean) => {
- cartItems.value.forEach(item => {
- item.selected = val;
- });
-};
-
-// 鏇存柊閫変腑鐘舵��
-const updateSelectedState = () => {
- allSelected.value = cartItems.value.length > 0 &&
- cartItems.value.every(item => item.selected);
-};
// 淇敼鍟嗗搧鏁伴噺
const handleQuantityChange = (item: any) => {
- const updatedItems = cartItems.value.map(cartItem =>
- cartItem.addID === item.addID ? { ...cartItem, quantity: item.quantity } : cartItem
- );
- cartStore.setCartItems(updatedItems);
+ cartStore.updateItemQuantity(item.addID, item.quantity);
};
// 鍒犻櫎鍗曚釜鍟嗗搧
@@ -136,8 +127,7 @@
await ElMessageBox.confirm('纭畾瑕佸垹闄よ鍟嗗搧鍚楋紵', '鎻愮ず', {
type: 'warning'
});
- const updatedItems = cartItems.value.filter(cartItem => cartItem.addID !== item.addID);
- cartStore.setCartItems(updatedItems);
+ cartStore.removeFromCart(item.addID);
ElMessage.success('鍒犻櫎鎴愬姛');
} catch {
// 鐢ㄦ埛鍙栨秷鍒犻櫎
@@ -155,8 +145,11 @@
await ElMessageBox.confirm('纭畾瑕佸垹闄ら�変腑鐨勫晢鍝佸悧锛�', '鎻愮ず', {
type: 'warning'
});
- const updatedItems = cartItems.value.filter(item => !item.selected);
- cartStore.setCartItems(updatedItems);
+ cartItems.value.forEach(item => {
+ if (item.selected) {
+ cartStore.removeFromCart(item.addID);
+ }
+ });
ElMessage.success('鍒犻櫎鎴愬姛');
} catch {
// 鐢ㄦ埛鍙栨秷鍒犻櫎
@@ -171,11 +164,6 @@
}
router.push('/order-info');
};
-
-// 鐩戝惉璐墿杞︽暟鎹彉鍖�
-watch(() => cartStore.cartItems, () => {
- updateSelectedState();
-}, { deep: true });
</script>
<style scoped>
--
Gitblit v1.9.3