dm-design/H5/merchant/js/pages/point-products.js

// 积分商品页面 - H5版本

let productData = [];

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
    loadProductData();
});

// 加载积分商品数据
function loadProductData() {
    // 使用模拟数据
    productData = [
        { id: 1, name: '5元优惠券', points: 500, stock: 100, description: '满50元可用', status: '上架' },
        { id: 2, name: '10元优惠券', points: 1000, stock: 50, description: '满100元可用', status: '上架' },
        { id: 3, name: '精美水杯', points: 2000, stock: 20, description: '品牌水杯', status: '上架' },
        { id: 4, name: '购物袋', points: 800, stock: 30, description: '环保购物袋', status: '下架' },
        { id: 5, name: '20元优惠券', points: 2000, stock: 0, description: '满200元可用', status: '缺货' },
        { id: 6, name: '手机支架', points: 1500, stock: 15, description: '便携手机支架', status: '上架' }
    ];

    renderTable();
}

// 渲染表格
function renderTable() {
    const tableBody = document.getElementById('product-table-body');
    tableBody.innerHTML = productData.map(product => `
        <tr>
            <td>${product.name}</td>
            <td>${product.points}</td>
            <td>
                <span style="color: ${product.stock === 0 ? '#f44336' : '#333'};">
                    ${product.stock}
                </span>
            </td>
            <td>${product.description}</td>
            <td>
                <span style="color: ${getStatusColor(product.status)};">
                    ${product.status}
                </span>
            </td>
            <td>
                <button class="btn btn-small btn-primary" onclick="editProduct(${product.id})">
                    编辑
                </button>
                ${product.status !== '缺货' ? `
                    <button class="btn btn-small" 
                            style="background: ${product.status === '上架' ? '#f44336' : '#4CAF50'}; color: white;" 
                            onclick="toggleProductStatus(${product.id})">
                        ${product.status === '上架' ? '下架' : '上架'}
                    </button>
                ` : ''}
                <button class="btn btn-small" onclick="addStock(${product.id})">
                    补货
                </button>
            </td>
        </tr>
    `).join('');
}

// 获取状态颜色
function getStatusColor(status) {
    switch(status) {
        case '上架': return '#4CAF50';
        case '下架': return '#ff9800';
        case '缺货': return '#f44336';
        default: return '#333';
    }
}

// 添加商品
function addProduct() {
    showNotification('打开添加商品界面', 'info');
    console.log('添加新商品');
}

// 编辑商品
function editProduct(productId) {
    const product = productData.find(p => p.id === productId);
    if (product) {
        showNotification(`编辑商品：${product.name}`, 'info');
        console.log('编辑商品:', product);
    }
}

// 切换商品状态
function toggleProductStatus(productId) {
    const product = productData.find(p => p.id === productId);
    if (product && product.status !== '缺货') {
        const newStatus = product.status === '上架' ? '下架' : '上架';
        
        confirmAction(`确定要${newStatus}商品"${product.name}"吗？`, () => {
            product.status = newStatus;
            renderTable();
            showNotification(`商品"${product.name}"已${newStatus}`, 'success');
        });
    }
}

// 补货
function addStock(productId) {
    const product = productData.find(p => p.id === productId);
    if (product) {
        // 简单的补货逻辑，这里可以改为弹窗输入具体数量
        const addAmount = 50;
        product.stock += addAmount;
        
        // 如果原来是缺货状态，改为上架
        if (product.status === '缺货') {
            product.status = '上架';
        }
        
        renderTable();
        showNotification(`商品"${product.name}"已补货${addAmount}件`, 'success');
    }
}

// 导出函数到全局
window.addProduct = addProduct;
window.editProduct = editProduct;
window.toggleProductStatus = toggleProductStatus;
window.addStock = addStock;