308 lines
17 KiB
JavaScript
308 lines
17 KiB
JavaScript
// 等级设置页面的Tab系统JavaScript逻辑
|
||
|
||
// 初始化页面
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
initializeSidebar();
|
||
initializeSidebarSearch();
|
||
// 默认打开等级设置Tab
|
||
openLevelSettingsTab();
|
||
});
|
||
|
||
// 打开等级设置Tab（从member-tabs.js调用）
|
||
function openLevelSettingsTab() {
|
||
if (typeof memberTabManager !== 'undefined') {
|
||
memberTabManager.showDefaultContent();
|
||
// 创建等级设置tab
|
||
const content = generateLevelSettingsContent();
|
||
memberTabManager.createTab('level-settings', '等级设置', content, false);
|
||
}
|
||
}
|
||
|
||
// 生成等级设置表格内容
|
||
function generateLevelSettingsContent() {
|
||
return `
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-lg font-medium text-gray-900">等级设置</h2>
|
||
</div>
|
||
|
||
<!-- 摊位名称筛选器 -->
|
||
<div class="mb-6 flex items-center gap-4">
|
||
<div class="flex-1 max-w-md">
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">摊位名称</label>
|
||
<div class="relative">
|
||
<button id="stall-dropdown-btn" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white text-left flex items-center justify-between" onclick="toggleStallDropdown()">
|
||
<span id="dropdown-text">请选择摊位名称...</span>
|
||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
<div id="stall-dropdown-list" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg hidden">
|
||
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||
<input type="checkbox" value="时尚服装店" class="mr-2" onchange="updateSelectedStalls()">
|
||
时尚服装店
|
||
</label>
|
||
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||
<input type="checkbox" value="数码电子城" class="mr-2" onchange="updateSelectedStalls()">
|
||
数码电子城
|
||
</label>
|
||
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||
<input type="checkbox" value="美食餐厅" class="mr-2" onchange="updateSelectedStalls()">
|
||
美食餐厅
|
||
</label>
|
||
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||
<input type="checkbox" value="家居生活馆" class="mr-2" onchange="updateSelectedStalls()">
|
||
家居生活馆
|
||
</label>
|
||
<label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
|
||
<input type="checkbox" value="运动健身店" class="mr-2" onchange="updateSelectedStalls()">
|
||
运动健身店
|
||
</label>
|
||
</div>
|
||
<div id="selected-stalls" class="mt-2 flex flex-wrap gap-2"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-7 flex gap-3">
|
||
<button id="query-btn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="filterStallTable()">
|
||
查询
|
||
</button>
|
||
<button id="batch-edit-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" onclick="openBatchLevelEditTab()">
|
||
批量会员等级编辑
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
摊位名称
|
||
</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
是否启用会员
|
||
</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
会员等级
|
||
</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
操作
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">时尚服装店</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||
</label>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('时尚服装店')">
|
||
设置等级明细
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数码电子城</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||
</label>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('数码电子城')">
|
||
设置等级明细
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">美食餐厅</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||
</label>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('美食餐厅')">
|
||
设置等级明细
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">家居生活馆</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||
</label>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('家居生活馆')">
|
||
设置等级明细
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">运动健身店</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
|
||
</label>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('运动健身店')">
|
||
设置等级明细
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 摊位筛选相关功能
|
||
let selectedStalls = [];
|
||
let dropdownOpen = false;
|
||
|
||
function toggleStallDropdown() {
|
||
const dropdown = document.getElementById('stall-dropdown-list');
|
||
const button = document.getElementById('stall-dropdown-btn');
|
||
|
||
if (dropdown && button) {
|
||
dropdownOpen = !dropdownOpen;
|
||
if (dropdownOpen) {
|
||
dropdown.classList.remove('hidden');
|
||
// 添加点击外部关闭功能
|
||
setTimeout(() => {
|
||
document.addEventListener('click', closeDropdownOnClickOutside);
|
||
}, 0);
|
||
} else {
|
||
dropdown.classList.add('hidden');
|
||
document.removeEventListener('click', closeDropdownOnClickOutside);
|
||
}
|
||
}
|
||
}
|
||
|
||
function closeDropdownOnClickOutside(event) {
|
||
const dropdown = document.getElementById('stall-dropdown-list');
|
||
const button = document.getElementById('stall-dropdown-btn');
|
||
|
||
if (dropdown && button && !dropdown.contains(event.target) && !button.contains(event.target)) {
|
||
dropdown.classList.add('hidden');
|
||
dropdownOpen = false;
|
||
document.removeEventListener('click', closeDropdownOnClickOutside);
|
||
}
|
||
}
|
||
|
||
function updateSelectedStalls() {
|
||
const checkboxes = document.querySelectorAll('#stall-dropdown-list input[type="checkbox"]');
|
||
selectedStalls = [];
|
||
|
||
checkboxes.forEach(checkbox => {
|
||
if (checkbox.checked) {
|
||
selectedStalls.push(checkbox.value);
|
||
}
|
||
});
|
||
|
||
updateDropdownText();
|
||
updateSelectedStallsDisplay();
|
||
}
|
||
|
||
function updateDropdownText() {
|
||
const dropdownText = document.getElementById('dropdown-text');
|
||
if (dropdownText) {
|
||
if (selectedStalls.length === 0) {
|
||
dropdownText.textContent = '请选择摊位名称...';
|
||
} else if (selectedStalls.length === 1) {
|
||
dropdownText.textContent = selectedStalls[0];
|
||
} else {
|
||
dropdownText.textContent = `已选择 ${selectedStalls.length} 个摊位`;
|
||
}
|
||
}
|
||
}
|
||
|
||
function updateSelectedStallsDisplay() {
|
||
const selectedDiv = document.getElementById('selected-stalls');
|
||
if (!selectedDiv) return;
|
||
|
||
selectedDiv.innerHTML = '';
|
||
|
||
selectedStalls.forEach(stall => {
|
||
const tag = document.createElement('span');
|
||
tag.className = 'inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800';
|
||
tag.innerHTML = `
|
||
${stall}
|
||
<button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-green-200" onclick="removeSelectedStall('${stall}')">
|
||
<svg class="w-2 h-2" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||
</svg>
|
||
</button>
|
||
`;
|
||
selectedDiv.appendChild(tag);
|
||
});
|
||
}
|
||
|
||
function removeSelectedStall(stallName) {
|
||
selectedStalls = selectedStalls.filter(stall => stall !== stallName);
|
||
|
||
// 更新checkbox状态
|
||
const checkboxes = document.querySelectorAll('#stall-dropdown-list input[type="checkbox"]');
|
||
checkboxes.forEach(checkbox => {
|
||
if (checkbox.value === stallName) {
|
||
checkbox.checked = false;
|
||
}
|
||
});
|
||
|
||
updateDropdownText();
|
||
updateSelectedStallsDisplay();
|
||
}
|
||
|
||
function filterStallTable() {
|
||
const tableRows = document.querySelectorAll('#tab-content-area tbody tr');
|
||
|
||
if (selectedStalls.length === 0) {
|
||
// 如果没有选择任何摊位，显示所有行
|
||
tableRows.forEach(row => {
|
||
row.style.display = '';
|
||
});
|
||
showNotification('已显示所有摊位', 'info');
|
||
} else {
|
||
// 根据选择的摊位筛选表格行
|
||
let visibleCount = 0;
|
||
tableRows.forEach(row => {
|
||
const stallNameCell = row.querySelector('td:first-child');
|
||
if (stallNameCell) {
|
||
const stallName = stallNameCell.textContent.trim();
|
||
if (selectedStalls.includes(stallName)) {
|
||
row.style.display = '';
|
||
visibleCount++;
|
||
} else {
|
||
row.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
showNotification(`已筛选显示 ${visibleCount} 个摊位`, 'success');
|
||
}
|
||
}
|
||
|
||
// 导出函数
|
||
window.openLevelSettingsTab = openLevelSettingsTab;
|
||
window.generateLevelSettingsContent = generateLevelSettingsContent;
|
||
window.openBatchLevelEditTab = openBatchLevelEditTab;
|
||
window.toggleStallDropdown = toggleStallDropdown;
|
||
window.updateSelectedStalls = updateSelectedStalls;
|
||
window.removeSelectedStall = removeSelectedStall;
|
||
window.filterStallTable = filterStallTable; |