Vue2购物车组件开发教程 – 前端实战技巧

new Vue({
el: ‘#app’,
data: {
products: [
{ id: 1, name: ‘Vue.js实战指南’, price: 68.5 },
{ id: 2, name: ‘JavaScript高级程序设计’, price: 99.8 },
{ id: 3, name: ‘CSS权威指南’, price: 85.0 },
{ id: 4, name: ‘前端架构设计’, price: 79.9 }
],
cart: []
},
computed: {
totalItems() {
return this.cart.reduce((total, item) => total + item.quantity, 0);
},
totalPrice() {
return this.cart.reduce((total, item) =>
total + (item.product.price * item.quantity), 0);
}
},
methods: {
addToCart(product) {
const existingItem = this.cart.find(item => item.product.id === product.id);

if (existingItem) {
existingItem.quantity++;
} else {
this.cart.push({
product: {…product},
quantity: 1
});
}

this.saveCartToLocalStorage();
},
decreaseQuantity(product) {
const existingItem = this.cart.find(item => item.product.id === product.id);

if (existingItem) {
existingItem.quantity–;

if (existingItem.quantity === 0) {
this.removeFromCart(product);
} else {
this.saveCartToLocalStorage();
}
}
},
removeFromCart(product) {
this.cart = this.cart.filter(item => item.product.id !== product.id);
this.saveCartToLocalStorage();
},
getCartItemQuantity(product) {
const item = this.cart.find(item => item.product.id === product.id);
return item ? item.quantity : 0;
},
checkout() {
if (this.cart.length === 0) return;

alert(`结算成功！总计: ¥${this.totalPrice.toFixed(2)}`);
this.cart = [];
this.saveCartToLocalStorage();
},
saveCartToLocalStorage() {
localStorage.setItem(‘vue2_cart’, JSON.stringify(this.cart));
},
loadCartFromLocalStorage() {
const savedCart = localStorage.getItem(‘vue2_cart’);
if (savedCart) {
this.cart = JSON.parse(savedCart);
}
}
},
mounted() {
this.loadCartFromLocalStorage();
}
});

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
margin: 0;
font-size: 2.5rem;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
section {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
h2 {
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-top: 0;
color: #444;
}
.product, .cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.product-info h3, .item-info h4 {
margin: 0 0 5px 0;
color: #2c3e50;
}
.price {
font-weight: bold;
color: #e74c3c;
margin: 0;
}
.product-actions, .item-controls {
display: flex;
align-items: center;
gap: 10px;
}
button {
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover:not(:disabled) {
background-color: #2980b9;
}
button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
.remove-btn {
background-color: #e74c3c;
}
.remove-btn:hover {
background-color: #c0392b;
}
.quantity {
font-weight: bold;
min-width: 30px;
text-align: center;
}
.item-total {
font-weight: bold;
color: #27ae60;
}
.cart-summary {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #eee;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 1.1rem;
}
.total-price {
font-weight: bold;
color: #27ae60;
font-size: 1.4rem;
}
.checkout-btn {
width: 100%;
padding: 12px;
background-color: #27ae60;
font-size: 1.2rem;
margin-top: 10px;
}
.checkout-btn:hover {
background-color: #219653;
}
.empty-cart {
text-align: center;
padding: 40px 0;
color: #7f8c8d;
}
footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: #7f8c8d;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}