前端页面-新鲜采摘，每日直送

<div class="container">
    <div class="product-grid" id="product-list">
        <!-- 商品将通过 JS 动态插入 -->
    </div>
</div>

<!-- 购物车面板 -->
<div class="cart" id="shopping-cart">
    <div class="cart-header">
        <h3>🛒 我的购物车</h3>
        <button class="btn-close" id="close-cart">×</button>
    </div>
    <div class="cart-items" id="cart-items">
        <!-- 购物车商品项 -->
    </div>
    <div class="cart-total">总计: ¥<span id="cart-total">0.00</span></div>
    <button id="checkout-btn" class="btn-checkout">📦 下单结算</button>
</div>

<!-- 下单模态框 -->
<div class="modal" id="order-modal">
    <div class="modal-content">
        <h2>填写收货信息</h2>
        <form id="order-form">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" required />
            </div>
            <div class="form-group">
                <label for="phone">电话</label>
                <input type="tel" id="phone" required />
            </div>
            <div class="form-group">
                <label for="address">地址</label>
                <textarea id="address" rows="3" required></textarea>
            </div>
            <div class="form-group">
                <label>订单详情</label>
                <div id="order-summary"></div>
            </div>
            <div class="form-group">
                <strong>总金额: ¥<span id="final-total">0.00</span></strong>
            </div>
            <button type="submit" class="btn-submit">确认下单</button>
            <p id="success-message" class="success-message" style="display:none;">🎉 订单提交成功！我们将尽快为您配送。</p>
        </form>
    </div>
</div>

<script>
    // 水果商品数据
    const products = [
        { id: 1, emoji: '🍎', name: '红富士苹果', price: 12.5, desc: '来自山东的优质红富士，脆甜多汁' },
        { id: 2, emoji: '🍌', name: '进口香蕉', price: 8.8, desc: '厄瓜多尔进口，自然成熟，香甜软糯' },
        { id: 3, emoji: '🍇', name: '阳光玫瑰葡萄', price: 38.0, desc: '日本品种，果粒饱满，清甜无籽' },
        { id: 4, emoji: '🍉', name: '麒麟西瓜', price: 22.0, desc: '沙瓤爆汁，夏日解暑必备' },
        { id: 5, emoji: '🍓', name: '丹东草莓', price: 45.0, desc: '现摘现发，颗颗红润，酸甜可口' },
        { id: 6, emoji: '🍊', name: '赣南脐橙', price: 16.8, desc: '皮薄肉厚，维C满满，自然甘甜' },
        { id: 7, emoji: '🍍', name: '菲律宾凤梨', price: 28.0, desc: '无需泡盐水，直接削皮吃，纤维细腻' },
        { id: 8, emoji: '🥭', name: '台农芒果', price: 32.0, desc: '香气浓郁，果肉金黄，入口即化' }
    ];

    // 购物车数据
    let cart = [];

    // DOM 元素
    const productListEl = document.getElementById('product-list');
    const cartEl = document.getElementById('shopping-cart');
    const cartItemsEl = document.getElementById('cart-items');
    const cartTotalEl = document.getElementById('cart-total');
    const closeCartBtn = document.getElementById('close-cart');
    const checkoutBtn = document.getElementById('checkout-btn');
    const orderModal = document.getElementById('order-modal');
    const orderForm = document.getElementById('order-form');
    const orderSummary = document.getElementById('order-summary');
    const finalTotalEl = document.getElementById('final-total');
    const successMessage = document.getElementById('success-message');

    // 渲染商品列表
    function renderProducts() {
        productListEl.innerHTML = '';
        products.forEach(product => {
            const card = document.createElement('div');
            card.className = 'product-card';
            card.innerHTML = `
                <div class="product-image">${product.emoji}</div>
                <div class="product-info">
                    <h3 class="product-title">${product.name}</h3>
                    <p class="product-desc">${product.desc}</p>
                    <p class="product-price">¥${product.price.toFixed(2)}</p>
                    <button data-id="${product.id}" class="btn-add">加入购物车</button>
                </div>
            `;
            productListEl.appendChild(card);
        });

        // 绑定“加入购物车”按钮事件
        document.querySelectorAll('.btn-add').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = parseInt(e.target.dataset.id);
                addToCart(id);
            });
        });
    }

    // 添加商品到购物车
    function addToCart(productId) {
        const product = products.find(p => p.id === productId);
        if (!product) return;

        const existing = cart.find(item => item.id === productId);
        if (existing) {
            existing.quantity += 1;
        } else {
            cart.push({ ...product, quantity: 1 });
        }

        updateCart();
        cartEl.style.display = 'block'; // 显示购物车
    }

    // 更新购物车显示
    function updateCart() {
        cartItemsEl.innerHTML = '';
        let total = 0;

        cart.forEach(item => {
            const itemTotal = item.price * item.quantity;
            total += itemTotal;

            const cartItem = document.createElement('div');
            cartItem.className = 'cart-item';
            cartItem.innerHTML = `
                <span>${item.emoji} ${item.name} × ${item.quantity}</span>
                <span>¥${itemTotal.toFixed(2)}</span>
            `;
            cartItemsEl.appendChild(cartItem);
        });

        cartTotalEl.textContent = total.toFixed(2);
    }

    // 打开下单模态框
    function openOrderModal() {
        orderSummary.innerHTML = cart.map(item =>
            `<div>${item.emoji} ${item.name} × ${item.quantity} = ¥${(item.price * item.quantity).toFixed(2)}</div>`
        ).join('');
        finalTotalEl.textContent = cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2);
        orderModal.style.display = 'flex';
    }

    // 关闭模态框
    function closeModal() {
        orderModal.style.display = 'none';
        orderForm.reset();
        successMessage.style.display = 'none';
    }

    // 初始化页面
    function init() {
        renderProducts();

        // 显示/隐藏购物车
        document.addEventListener('click', (e) => {
            if (e.target.id === 'shopping-cart' || e.target.closest('.cart')) {
                cartEl.style.display = 'block';
            } else if (e.target.classList.contains('btn-close') || e.target.id === 'close-cart') {
                cartEl.style.display = 'none';
            }
        });

        // 结算按钮
        checkoutBtn.addEventListener('click', () => {
            if (cart.length === 0) {
                alert('请先添加商品到购物车！');
                return;
            }
            openOrderModal();
        });

        // 表单提交
        orderForm.addEventListener('submit', (e) => {
            e.preventDefault();
            // 这里可以发送订单到服务器
            console.log('订单提交:', {
                customer: {
                    name: document.getElementById('name').value,
                    phone: document.getElementById('phone').value,
                    address: document.getElementById('address').value
                },
                items: cart,
                total: cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
            });

            // 显示成功消息
            successMessage.style.display = 'block';
            orderForm.querySelector('.btn-submit').disabled = true;

            // 重置状态
            setTimeout(() => {
                cart = [];
                updateCart();
                closeModal();
                orderForm.querySelector('.btn-submit').disabled = false;
            }, 2000);
        });

        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target === orderModal) {
                closeModal();
            }
        });
    }

    // 启动应用
    init();
</script>