dm-design/H5/merchant/js/pages/batch-edit-step1.js

// 批量编辑第一步 - 店铺选择页面

let shopList = [
    {
        id: 'shop_001',
        name: '时尚服装店',
        enabled: true,
        levels: ['lv1', 'lv2', 'lv3', 'lv4'],
        memberCount: 1250
    },
    {
        id: 'shop_002',
        name: '数码电子城',
        enabled: false,
        levels: ['lv1', 'lv2', 'lv3'],
        memberCount: 850
    },
    {
        id: 'shop_003',
        name: '美食餐厅',
        enabled: true,
        levels: ['lv1', 'lv2', 'lv3', 'lv4'],
        memberCount: 2100
    },
    {
        id: 'shop_004',
        name: '家居生活馆',
        enabled: false,
        levels: ['lv1', 'lv2'],
        memberCount: 650
    },
    {
        id: 'shop_005',
        name: '运动健身店',
        enabled: true,
        levels: ['lv1', 'lv2', 'lv3', 'lv4'],
        memberCount: 980
    },
    {
        id: 'shop_006',
        name: '母婴用品店',
        enabled: true,
        levels: ['lv1', 'lv2', 'lv3'],
        memberCount: 750
    },
    {
        id: 'shop_007',
        name: '图书文具店',
        enabled: false,
        levels: ['lv1', 'lv2'],
        memberCount: 420
    },
    {
        id: 'shop_008',
        name: '宠物用品店',
        enabled: true,
        levels: ['lv1', 'lv2', 'lv3'],
        memberCount: 380
    }
];

let selectedShops = [];

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

// 渲染店铺列表
function renderShopList() {
    const shopListContainer = document.getElementById('shop-list');
    
    const html = shopList.map(shop => `
        <div class="shop-card ${selectedShops.includes(shop.id) ? 'selected' : ''}" 
             onclick="toggleShop('${shop.id}')">
            <div class="checkbox">
                <input type="checkbox" ${selectedShops.includes(shop.id) ? 'checked' : ''} 
                       onchange="toggleShop('${shop.id}')" onclick="event.stopPropagation()">
            </div>
            <div class="shop-info">
                <div class="shop-name">${shop.name}</div>
                <div class="shop-status">
                    <span class="status-dot ${shop.enabled ? 'enabled' : 'disabled'}"></span>
                    ${shop.enabled ? '会员功能已启用' : '会员功能未启用'}
                    <span style="margin-left: 10px;">会员数: ${shop.memberCount}</span>
                </div>
                <div class="shop-levels">当前等级: ${shop.levels.join(', ')}</div>
            </div>
        </div>
    `).join('');
    
    shopListContainer.innerHTML = html;
}

// 切换店铺选择状态
function toggleShop(shopId) {
    const index = selectedShops.indexOf(shopId);
    
    if (index === -1) {
        selectedShops.push(shopId);
    } else {
        selectedShops.splice(index, 1);
    }
    
    renderShopList();
    updateSelectionSummary();
}

// 全选
function selectAll() {
    selectedShops = shopList.map(shop => shop.id);
    renderShopList();
    updateSelectionSummary();
    showNotification('已全选所有店铺', 'info');
}

// 全不选
function selectNone() {
    selectedShops = [];
    renderShopList();
    updateSelectionSummary();
    showNotification('已取消选择所有店铺', 'info');
}

// 反选
function selectReverse() {
    const allShopIds = shopList.map(shop => shop.id);
    selectedShops = allShopIds.filter(id => !selectedShops.includes(id));
    renderShopList();
    updateSelectionSummary();
    showNotification('已反选店铺', 'info');
}

// 仅选择已启用会员功能的店铺
function selectEnabled() {
    selectedShops = shopList.filter(shop => shop.enabled).map(shop => shop.id);
    renderShopList();
    updateSelectionSummary();
    const count = selectedShops.length;
    showNotification(`已选择 ${count} 个启用会员功能的店铺`, 'info');
}

// 更新选择摘要
function updateSelectionSummary() {
    const count = selectedShops.length;
    document.getElementById('selected-count').textContent = count;
    document.getElementById('btn-count').textContent = count;
    
    const nextBtn = document.getElementById('next-btn');
    if (count > 0) {
        nextBtn.disabled = false;
        nextBtn.classList.remove('btn-disabled');
    } else {
        nextBtn.disabled = true;
        nextBtn.classList.add('btn-disabled');
    }
}

// 下一步
function nextStep() {
    if (selectedShops.length === 0) {
        showNotification('请至少选择一个店铺', 'warning');
        return;
    }
    
    // 将选中的店铺信息存储到sessionStorage
    const selectedShopData = shopList.filter(shop => selectedShops.includes(shop.id));
    sessionStorage.setItem('batchEditSelectedShops', JSON.stringify(selectedShopData));
    
    // 跳转到第二步
    navigateTo('batch-edit-step2.html');
}

// 导出函数到全局
window.toggleShop = toggleShop;
window.selectAll = selectAll;
window.selectNone = selectNone;
window.selectReverse = selectReverse;
window.selectEnabled = selectEnabled;
window.nextStep = nextStep;