38283-vm/cart.php

<?php
$page_title = '购物车 - 豪软世界';
require_once 'includes/header.php';
?>

<main class="py-5">
    <div class="container">
        <h1 class="fw-bold text-white mb-5 d-flex align-items-center gap-3">
            <i class="bi bi-bag-check text-primary"></i> 您的购物车
        </h1>

        <div id="cart-container" class="row g-5">
            <div class="col-lg-8">
                <div class="bg-dark bg-opacity-50 rounded-5 border border-secondary border-opacity-25 overflow-hidden">
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0 align-middle">
                            <thead class="bg-white bg-opacity-5">
                                <tr>
                                    <th class="ps-4 py-4 border-0">商品信息</th>
                                    <th class="py-4 border-0">单价</th>
                                    <th class="py-4 border-0">数量</th>
                                    <th class="py-4 border-0">小计</th>
                                    <th class="pe-4 py-4 border-0 text-end">操作</th>
                                </tr>
                            </thead>
                            <tbody id="cart-items-body">
                                <!-- JS will populate this -->
                            </tbody>
                        </table>
                    </div>
                    <div id="empty-cart-msg" class="p-5 text-center" style="display:none;">
                        <i class="bi bi-cart-x fs-1 text-muted d-block mb-3"></i>
                        <h5 class="text-white">购物车空空如也</h5>
                        <p class="text-muted">快去选购您心仪的软件吧！</p>
                        <a href="/" class="btn btn-primary mt-3">前往商城</a>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="bg-dark bg-opacity-50 rounded-5 border border-secondary border-opacity-25 p-4 sticky-top" style="top: 100px; z-index: 10;">
                    <h5 class="text-white fw-bold mb-4">订单摘要</h5>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted">商品总数</span>
                        <span class="text-white fw-bold" id="summary-count">0</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4">
                        <span class="text-muted">支付币种</span>
                        <span class="text-primary fw-bold">USDT (TRC20)</span>
                    </div>
                    <hr class="border-secondary opacity-25 mb-4">
                    <div class="d-flex justify-content-between align-items-end mb-5">
                        <span class="text-white">应付总额</span>
                        <div class="text-end">
                            <div class="fs-2 fw-black text-primary" id="summary-total">0.00</div>
                            <div class="text-muted small">含支付手续费 0.00</div>
                        </div>
                    </div>
                    
                    <a href="checkout.php" id="checkout-btn" class="btn btn-primary btn-lg w-100 py-3 rounded-3 shadow mb-3">
                        <i class="bi bi-credit-card me-2"></i> 立即下单
                    </a>
                    <div class="text-center">
                        <img src="https://placehold.co/200x40/0f172a/94a3b8?text=TRUSTED+PAYMENTS" alt="Trusted" class="grayscale opacity-50">
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    renderCart();
});

function renderCart() {
    const cart = JSON.parse(localStorage.getItem('cart') || '[]');
    const body = document.getElementById('cart-items-body');
    const emptyMsg = document.getElementById('empty-cart-msg');
    const checkoutBtn = document.getElementById('checkout-btn');
    
    if (cart.length === 0) {
        body.innerHTML = '';
        emptyMsg.style.display = 'block';
        checkoutBtn.classList.add('disabled');
        updateSummary(0, 0);
        return;
    }
    
    emptyMsg.style.display = 'none';
    checkoutBtn.classList.remove('disabled');
    
    let html = '';
    let total = 0;
    let count = 0;
    
    cart.forEach((item, index) => {
        const subtotal = item.price * item.qty;
        total += subtotal;
        count += parseInt(item.qty);
        
        html += `
            <tr class="border-bottom border-secondary border-opacity-10">
                <td class="ps-4 py-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="text-white fw-bold">${item.name}</div>
                    </div>
                </td>
                <td class="py-4 text-primary fw-bold">${parseFloat(item.price).toFixed(2)}</td>
                <td class="py-4">
                    <div class="d-flex align-items-center bg-black bg-opacity-25 rounded-2 border border-secondary border-opacity-25" style="width: fit-content;">
                        <button class="btn btn-link text-white p-2" onclick="updateQty(${index}, -1)"><i class="bi bi-dash"></i></button>
                        <span class="px-2 text-white fw-bold">${item.qty}</span>
                        <button class="btn btn-link text-white p-2" onclick="updateQty(${index}, 1)"><i class="bi bi-plus"></i></button>
                    </div>
                </td>
                <td class="py-4 text-white fw-bold">${subtotal.toFixed(2)}</td>
                <td class="pe-4 py-4 text-end">
                    <button class="btn btn-link text-danger p-0" onclick="removeItem(${index})"><i class="bi bi-trash fs-5"></i></button>
                </td>
            </tr>
        `;
    });
    
    body.innerHTML = html;
    updateSummary(count, total);
}

function updateQty(index, delta) {
    let cart = JSON.parse(localStorage.getItem('cart') || '[]');
    cart[index].qty = parseInt(cart[index].qty) + delta;
    if (cart[index].qty < 1) cart[index].qty = 1;
    localStorage.setItem('cart', JSON.stringify(cart));
    renderCart();
    updateCartBadge();
}

function removeItem(index) {
    let cart = JSON.parse(localStorage.getItem('cart') || '[]');
    cart.splice(index, 1);
    localStorage.setItem('cart', JSON.stringify(cart));
    renderCart();
    updateCartBadge();
}

function updateSummary(count, total) {
    document.getElementById('summary-count').textContent = count;
    document.getElementById('summary-total').textContent = total.toFixed(2);
}
</script>

<?php require_once 'includes/footer.php'; ?>