taibai_shopping/app/static/js/history.js

// 浏览历史页面JavaScript
let selectedItems = [];
let isSelectAll = false;

document.addEventListener('DOMContentLoaded', function() {
    // 初始化事件监听
    initEventListeners();
});

function initEventListeners() {
    // 复选框变化事件
    document.querySelectorAll('.history-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectedItems();
        });
    });
}

function updateSelectedItems() {
    selectedItems = [];
    document.querySelectorAll('.history-checkbox:checked').forEach(checkbox => {
        selectedItems.push(parseInt(checkbox.value));
    });
    
    // 更新按钮状态
    const batchBtn = document.querySelector('[onclick="batchRemove()"]');
    if (batchBtn) {
        batchBtn.disabled = selectedItems.length === 0;
    }
}

function toggleSelectAll() {
    isSelectAll = !isSelectAll;
    const checkboxes = document.querySelectorAll('.history-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = isSelectAll;
    });
    
    updateSelectedItems();
    
    // 更新按钮文本
    const selectAllBtn = document.querySelector('[onclick="toggleSelectAll()"]');
    if (selectAllBtn) {
        selectAllBtn.innerHTML = isSelectAll ? 
            '<i class="bi bi-square"></i> 取消全选' : 
            '<i class="bi bi-check-square"></i> 全选';
    }
}

function removeHistory(productId) {
    if (confirm('确定要删除这个浏览记录吗？')) {
        fetch('/history/remove', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                product_id: productId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showSuccessMessage(data.message);
                // 移除商品卡片
                const itemElement = document.querySelector(`[data-product-id="${productId}"]`);
                if (itemElement) {
                    itemElement.remove();
                }
                // 更新历史数量
                updateHistoryCount();
                // 检查是否为空
                checkEmptyState();
            } else {
                showErrorMessage(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorMessage('操作失败，请稍后再试');
        });
    }
}

function batchRemove() {
    if (selectedItems.length === 0) {
        showErrorMessage('请选择要删除的商品');
        return;
    }
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    document.getElementById('confirmMessage').textContent = 
        `确定要删除这 ${selectedItems.length} 个浏览记录吗？`;
    
    document.getElementById('confirmBtn').onclick = function() {
        performBatchRemove();
        modal.hide();
    };
    
    modal.show();
}

function performBatchRemove() {
    fetch('/history/batch-remove', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            product_ids: selectedItems
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage(data.message);
            // 移除选中的商品卡片
            selectedItems.forEach(productId => {
                const itemElement = document.querySelector(`[data-product-id="${productId}"]`);
                if (itemElement) {
                    itemElement.remove();
                }
            });
            // 重置选择状态
            selectedItems = [];
            isSelectAll = false;
            updateSelectedItems();
            // 更新历史数量
            updateHistoryCount();
            // 检查是否为空
            checkEmptyState();
        } else {
            showErrorMessage(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('批量删除失败，请稍后再试');
    });
}

function clearHistory() {
    if (confirm('确定要清空所有浏览历史吗？此操作不可恢复。')) {
        fetch('/history/clear', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showSuccessMessage(data.message);
                // 重新加载页面或显示空状态
                location.reload();
            } else {
                showErrorMessage(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorMessage('清空历史失败，请稍后再试');
        });
    }
}

function addToCart(productId) {
    // 调用购物车添加功能
    fetch('/cart/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            product_id: productId,
            quantity: 1
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage(data.message);
            // 更新购物车数量
            if (typeof updateCartBadge === 'function') {
                updateCartBadge(data.cart_count);
            }
        } else {
            showErrorMessage(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('加入购物车失败，请稍后再试');
    });
}

function addToFavorites(productId) {
    fetch('/favorite/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            product_id: productId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage(data.message);
        } else {
            showErrorMessage(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('收藏失败，请稍后再试');
    });
}

function updateHistoryCount() {
    fetch('/history/count')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 更新历史数量显示
            const badge = document.querySelector('.badge.bg-secondary');
            if (badge) {
                badge.textContent = `共 ${data.history_count} 件商品`;
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function checkEmptyState() {
    const itemsContainer = document.querySelector('.row');
    const items = itemsContainer.querySelectorAll('.history-item');
    
    if (items.length === 0) {
        // 显示空状态
        itemsContainer.innerHTML = `
            <div class="col-12">
                <div class="empty-state">
                    <div class="text-center py-5">
                        <i class="bi bi-clock-history display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">还没有浏览任何商品</h4>
                        <p class="text-muted">去逛逛，看看有什么好商品~</p>
                        <a href="/" class="btn btn-primary">
                            <i class="bi bi-house"></i> 去首页逛逛
                        </a>
                    </div>
                </div>
            </div>
        `;
    }
}

function showSuccessMessage(message) {
    // 使用现有的消息提示函数
    if (typeof showMessage === 'function') {
        showMessage(message, 'success');
    } else {
        alert(message);
    }
}

function showErrorMessage(message) {
    // 使用现有的消息提示函数
    if (typeof showMessage === 'function') {
        showMessage(message, 'error');
    } else {
        alert(message);
    }
}