220 lines
6.1 KiB
JavaScript
220 lines
6.1 KiB
JavaScript
let selectedItems = new Set();
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateSelectAllState();
|
|
updateTotalPrice();
|
|
});
|
|
|
|
// 全选/取消全选
|
|
document.getElementById('selectAll').addEventListener('change', function() {
|
|
const checkboxes = document.querySelectorAll('.item-checkbox:not(:disabled)');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = this.checked;
|
|
if (this.checked) {
|
|
selectedItems.add(parseInt(checkbox.value));
|
|
} else {
|
|
selectedItems.delete(parseInt(checkbox.value));
|
|
}
|
|
});
|
|
updateTotalPrice();
|
|
});
|
|
|
|
// 单个商品选择
|
|
document.querySelectorAll('.item-checkbox').forEach(checkbox => {
|
|
checkbox.addEventListener('change', function() {
|
|
const cartId = parseInt(this.value);
|
|
if (this.checked) {
|
|
selectedItems.add(cartId);
|
|
} else {
|
|
selectedItems.delete(cartId);
|
|
}
|
|
updateSelectAllState();
|
|
updateTotalPrice();
|
|
});
|
|
});
|
|
|
|
// 更新全选状态
|
|
function updateSelectAllState() {
|
|
const selectAllCheckbox = document.getElementById('selectAll');
|
|
const availableCheckboxes = document.querySelectorAll('.item-checkbox:not(:disabled)');
|
|
const checkedCheckboxes = document.querySelectorAll('.item-checkbox:not(:disabled):checked');
|
|
|
|
if (availableCheckboxes.length === 0) {
|
|
selectAllCheckbox.disabled = true;
|
|
selectAllCheckbox.checked = false;
|
|
} else {
|
|
selectAllCheckbox.disabled = false;
|
|
selectAllCheckbox.checked = availableCheckboxes.length === checkedCheckboxes.length;
|
|
}
|
|
}
|
|
|
|
// 更新总价
|
|
function updateTotalPrice() {
|
|
let totalPrice = 0;
|
|
let selectedCount = 0;
|
|
|
|
selectedItems.forEach(cartId => {
|
|
const cartItem = document.querySelector(`[data-cart-id="${cartId}"]`);
|
|
if (cartItem) {
|
|
const itemTotal = parseFloat(cartItem.querySelector('.item-total').textContent);
|
|
const quantity = parseInt(cartItem.querySelector('.quantity-input').value);
|
|
totalPrice += itemTotal;
|
|
selectedCount += quantity;
|
|
}
|
|
});
|
|
|
|
document.getElementById('selectedCount').textContent = selectedCount;
|
|
document.getElementById('selectedTotal').textContent = totalPrice.toFixed(2);
|
|
document.getElementById('finalTotal').textContent = totalPrice.toFixed(2);
|
|
|
|
// 更新结算按钮状态
|
|
const checkoutBtn = document.getElementById('checkoutBtn');
|
|
checkoutBtn.disabled = selectedItems.size === 0;
|
|
}
|
|
|
|
// 修改数量
|
|
function changeQuantity(cartId, delta) {
|
|
const input = document.querySelector(`[data-cart-id="${cartId}"]`);
|
|
const currentValue = parseInt(input.value);
|
|
const newValue = currentValue + delta;
|
|
|
|
if (newValue >= 1 && newValue <= parseInt(input.max)) {
|
|
updateQuantity(cartId, newValue);
|
|
}
|
|
}
|
|
|
|
// 更新数量
|
|
function updateQuantity(cartId, quantity) {
|
|
if (quantity < 1) return;
|
|
|
|
fetch('/cart/update', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
cart_id: cartId,
|
|
quantity: parseInt(quantity)
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 更新页面显示
|
|
const cartItem = document.querySelector(`[data-cart-id="${cartId}"]`);
|
|
cartItem.querySelector('.quantity-input').value = quantity;
|
|
cartItem.querySelector('.item-total').textContent = data.item_total.toFixed(2);
|
|
|
|
// 更新总价
|
|
updateTotalPrice();
|
|
|
|
// 更新全局购物车数量
|
|
updateCartBadge(data.cart_count);
|
|
|
|
showSuccessMessage('数量更新成功');
|
|
} else {
|
|
alert(data.message);
|
|
// 恢复原始值
|
|
location.reload();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('更新失败');
|
|
location.reload();
|
|
});
|
|
}
|
|
|
|
// 删除商品
|
|
function removeItem(cartId) {
|
|
if (!confirm('确定要删除这件商品吗?')) {
|
|
return;
|
|
}
|
|
|
|
fetch('/cart/remove', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
cart_id: cartId
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 从页面中移除商品
|
|
const cartItem = document.querySelector(`[data-cart-id="${cartId}"]`);
|
|
cartItem.remove();
|
|
|
|
// 从选中列表中移除
|
|
selectedItems.delete(cartId);
|
|
|
|
// 更新显示
|
|
updateSelectAllState();
|
|
updateTotalPrice();
|
|
updateCartBadge(data.cart_count);
|
|
|
|
showSuccessMessage('商品已删除');
|
|
|
|
// 如果购物车为空,刷新页面
|
|
if (data.cart_count === 0) {
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 1000);
|
|
}
|
|
} else {
|
|
alert(data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('删除失败');
|
|
});
|
|
}
|
|
|
|
// 清空购物车
|
|
function clearCart() {
|
|
if (!confirm('确定要清空购物车吗?')) {
|
|
return;
|
|
}
|
|
|
|
fetch('/cart/clear', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showSuccessMessage('购物车已清空');
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 1000);
|
|
} else {
|
|
alert(data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('清空失败');
|
|
});
|
|
}
|
|
|
|
// 去结算
|
|
function checkout() {
|
|
if (selectedItems.size === 0) {
|
|
alert('请选择要购买的商品');
|
|
return;
|
|
}
|
|
|
|
const params = new URLSearchParams();
|
|
selectedItems.forEach(cartId => {
|
|
params.append('items', cartId);
|
|
});
|
|
|
|
window.location.href = `/cart/checkout?${params.toString()}`;
|
|
}
|