批量会员等级修改完成
This commit is contained in:
parent
9539fa5658
commit
01b43945f4
|
|
@ -0,0 +1,175 @@
|
|||
/**
|
||||
* 批量会员等级编辑功能模块
|
||||
* 提供批量编辑多个摊位的会员等级配置
|
||||
*/
|
||||
|
||||
// 页面初始化函数
|
||||
function initBatchLevelEdit() {
|
||||
console.log('批量等级编辑页面已初始化');
|
||||
|
||||
// 初始化摊位选择状态
|
||||
updateStallSelection();
|
||||
|
||||
// 绑定表单事件
|
||||
bindFormEvents();
|
||||
}
|
||||
|
||||
// 绑定表单事件
|
||||
function bindFormEvents() {
|
||||
// 可以在这里添加其他表单事件绑定
|
||||
console.log('表单事件已绑定');
|
||||
}
|
||||
|
||||
// 全选/取消全选摊位
|
||||
function selectAllStalls(checkbox) {
|
||||
const stallCheckboxes = document.querySelectorAll('.stall-checkbox input[type="checkbox"]:not([value="all"])');
|
||||
|
||||
stallCheckboxes.forEach(cb => {
|
||||
cb.checked = checkbox.checked;
|
||||
});
|
||||
|
||||
updateStallSelection();
|
||||
}
|
||||
|
||||
// 更新摊位选择状态
|
||||
function updateStallSelection() {
|
||||
const stallCheckboxes = document.querySelectorAll('.stall-checkbox input[type="checkbox"]:not([value="all"])');
|
||||
const allCheckbox = document.querySelector('.stall-checkbox input[value="all"]');
|
||||
const countElement = document.getElementById('selectedStallsCount');
|
||||
|
||||
let selectedCount = 0;
|
||||
let selectedStalls = [];
|
||||
|
||||
stallCheckboxes.forEach(cb => {
|
||||
if (cb.checked) {
|
||||
selectedCount++;
|
||||
selectedStalls.push(cb.value);
|
||||
}
|
||||
});
|
||||
|
||||
// 更新全选状态
|
||||
if (allCheckbox) {
|
||||
allCheckbox.checked = selectedCount === stallCheckboxes.length;
|
||||
allCheckbox.indeterminate = selectedCount > 0 && selectedCount < stallCheckboxes.length;
|
||||
}
|
||||
|
||||
// 更新选择计数显示
|
||||
if (countElement) {
|
||||
countElement.textContent = `已选择 ${selectedCount} 个摊位`;
|
||||
if (selectedCount > 0) {
|
||||
countElement.textContent += `：${selectedStalls.join('、')}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保存批量等级编辑
|
||||
function saveBatchLevelEdit() {
|
||||
const selectedStalls = getSelectedStalls();
|
||||
|
||||
if (selectedStalls.length === 0) {
|
||||
alert('请至少选择一个摊位');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取等级配置数据
|
||||
const levelConfig = getLevelConfigData();
|
||||
|
||||
// 模拟保存过程
|
||||
console.log('保存批量等级编辑:', {
|
||||
stalls: selectedStalls,
|
||||
config: levelConfig
|
||||
});
|
||||
|
||||
// 显示保存成功提示
|
||||
alert(`已成功为 ${selectedStalls.length} 个摊位（${selectedStalls.join('、')}）批量更新等级配置！`);
|
||||
|
||||
// 可以在这里添加实际的保存逻辑，比如发送到后端API
|
||||
}
|
||||
|
||||
// 获取选中的摊位列表
|
||||
function getSelectedStalls() {
|
||||
const selectedStalls = [];
|
||||
const stallCheckboxes = document.querySelectorAll('.stall-checkbox input[type="checkbox"]:not([value="all"])');
|
||||
|
||||
stallCheckboxes.forEach(cb => {
|
||||
if (cb.checked) {
|
||||
selectedStalls.push(cb.value);
|
||||
}
|
||||
});
|
||||
|
||||
return selectedStalls;
|
||||
}
|
||||
|
||||
// 获取等级配置数据
|
||||
function getLevelConfigData() {
|
||||
const tbody = document.getElementById('batchLevelEditBody');
|
||||
const rows = tbody.querySelectorAll('tr');
|
||||
const config = [];
|
||||
|
||||
rows.forEach(row => {
|
||||
const cells = row.cells;
|
||||
const level = cells[0].textContent;
|
||||
|
||||
const levelData = {
|
||||
level: level,
|
||||
name: cells[1].querySelector('input').value,
|
||||
growthRange: {
|
||||
start: parseInt(cells[2].querySelectorAll('input')[0].value),
|
||||
end: parseInt(cells[2].querySelectorAll('input')[1].value)
|
||||
},
|
||||
memberDiscount: {
|
||||
enabled: cells[3].querySelector('input[type="checkbox"]').checked,
|
||||
rate: parseInt(cells[4].querySelector('input').value)
|
||||
},
|
||||
pointExchange: cells[5].querySelector('input[type="checkbox"]').checked,
|
||||
birthdayCoupon: cells[6].querySelector('input[type="checkbox"]').checked,
|
||||
birthdayDoublePoints: cells[8].querySelector('input[type="checkbox"]').checked
|
||||
};
|
||||
|
||||
config.push(levelData);
|
||||
});
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
// 添加优惠券（重用现有功能）
|
||||
function addCoupon(level) {
|
||||
// 这里可以调用现有的优惠券添加功能
|
||||
// 或者实现新的批量优惠券添加逻辑
|
||||
console.log(`为等级 ${level} 添加优惠券`);
|
||||
|
||||
// 检查是否已经加载了优惠券弹窗相关功能
|
||||
if (typeof showCouponModal === 'function') {
|
||||
showCouponModal(level);
|
||||
} else {
|
||||
// 如果没有加载，可以动态加载相关功能
|
||||
loadCouponModalFunction().then(() => {
|
||||
if (typeof showCouponModal === 'function') {
|
||||
showCouponModal(level);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 动态加载优惠券弹窗功能
|
||||
async function loadCouponModalFunction() {
|
||||
try {
|
||||
// 这里可以动态加载优惠券相关的JavaScript
|
||||
console.log('动态加载优惠券功能...');
|
||||
// 实际项目中可以通过import或script标签动态加载
|
||||
} catch (error) {
|
||||
console.error('加载优惠券功能失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面清理函数
|
||||
function cleanupBatchLevelEdit() {
|
||||
console.log('清理批量等级编辑页面');
|
||||
// 清理事件监听器等资源
|
||||
}
|
||||
|
||||
// 暴露到全局作用域供HTML调用
|
||||
window.selectAllStalls = selectAllStalls;
|
||||
window.updateStallSelection = updateStallSelection;
|
||||
window.saveBatchLevelEdit = saveBatchLevelEdit;
|
||||
window.addCoupon = addCoupon;
|
||||
|
|
@ -97,8 +97,19 @@ function openLevelDetails(merchantName) {
|
|||
}
|
||||
}
|
||||
|
||||
// 打开批量等级编辑页面
|
||||
function openBatchLevelEdit() {
|
||||
const tabTitle = '批量会员等级编辑';
|
||||
if (typeof window.openTab === 'function') {
|
||||
window.openTab(tabTitle, 'batch-level-edit');
|
||||
} else {
|
||||
console.error('openTab函数未找到');
|
||||
}
|
||||
}
|
||||
|
||||
// 将函数暴露到全局作用域，以便HTML中的onclick可以调用
|
||||
window.toggleDropdown = toggleDropdown;
|
||||
window.selectAll = selectAll;
|
||||
window.updateSelection = updateSelection;
|
||||
window.openLevelDetails = openLevelDetails;
|
||||
window.openBatchLevelEdit = openBatchLevelEdit;
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
<div class="page-content">
|
||||
<div class="page-header">
|
||||
<h2>批量会员等级编辑</h2>
|
||||
<span class="page-subtitle">- 对选中摊位进行统一等级配置</span>
|
||||
</div>
|
||||
|
||||
<!-- 摊位选择区域 -->
|
||||
<div class="stall-selection-section">
|
||||
<h3>选择要编辑的摊位</h3>
|
||||
<div class="stall-checkboxes">
|
||||
<label class="stall-checkbox">
|
||||
<input type="checkbox" value="all" onchange="selectAllStalls(this)">
|
||||
<span>全选</span>
|
||||
</label>
|
||||
<label class="stall-checkbox">
|
||||
<input type="checkbox" value="牛牛蔬菜店" onchange="updateStallSelection()">
|
||||
<span>牛牛蔬菜店</span>
|
||||
</label>
|
||||
<label class="stall-checkbox">
|
||||
<input type="checkbox" value="羊羊水果店" onchange="updateStallSelection()">
|
||||
<span>羊羊水果店</span>
|
||||
</label>
|
||||
<label class="stall-checkbox">
|
||||
<input type="checkbox" value="小狗羊肉" onchange="updateStallSelection()">
|
||||
<span>小狗羊肉</span>
|
||||
</label>
|
||||
<label class="stall-checkbox">
|
||||
<input type="checkbox" value="小马猪蹄" onchange="updateStallSelection()">
|
||||
<span>小马猪蹄</span>
|
||||
</label>
|
||||
<label class="stall-checkbox">
|
||||
<input type="checkbox" value="小鱼生鲜" onchange="updateStallSelection()">
|
||||
<span>小鱼生鲜</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="selected-stalls-info">
|
||||
<span id="selectedStallsCount">已选择 0 个摊位</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="action-section">
|
||||
<button class="btn btn-primary" onclick="saveBatchLevelEdit()">批量提交</button>
|
||||
</div>
|
||||
|
||||
<!-- 等级编辑表格 -->
|
||||
<table class="table level-edit-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>等级</th>
|
||||
<th>等级名称</th>
|
||||
<th>成长值范围</th>
|
||||
<th>开启会员折扣</th>
|
||||
<th>折扣率(%)</th>
|
||||
<th>开启积分兑换</th>
|
||||
<th>开启生日优惠券</th>
|
||||
<th>生日优惠券操作</th>
|
||||
<th>开启生日双倍积分</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="batchLevelEditBody">
|
||||
<tr>
|
||||
<td>LV1</td>
|
||||
<td>
|
||||
<input type="text" value="铜牌会员" class="form-input">
|
||||
</td>
|
||||
<td>
|
||||
<div class="range-input">
|
||||
<input type="number" value="0" class="form-input range-start"> -
|
||||
<input type="number" value="100" class="form-input range-end">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" value="5" class="form-input discount-input">
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-action" onclick="addCoupon('LV1')">添加优惠券</button>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LV2</td>
|
||||
<td>
|
||||
<input type="text" value="银牌会员" class="form-input">
|
||||
</td>
|
||||
<td>
|
||||
<div class="range-input">
|
||||
<input type="number" value="101" class="form-input range-start"> -
|
||||
<input type="number" value="500" class="form-input range-end">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" value="10" class="form-input discount-input">
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-action" onclick="addCoupon('LV2')">添加优惠券</button>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LV3</td>
|
||||
<td>
|
||||
<input type="text" value="金牌会员" class="form-input">
|
||||
</td>
|
||||
<td>
|
||||
<div class="range-input">
|
||||
<input type="number" value="501" class="form-input range-start"> -
|
||||
<input type="number" value="1200" class="form-input range-end">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" value="15" class="form-input discount-input">
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-action" onclick="addCoupon('LV3')">添加优惠券</button>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LV4</td>
|
||||
<td>
|
||||
<input type="text" value="钻石会员" class="form-input">
|
||||
</td>
|
||||
<td>
|
||||
<div class="range-input">
|
||||
<input type="number" value="1201" class="form-input range-start"> -
|
||||
<input type="number" value="9999" class="form-input range-end">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" value="20" class="form-input discount-input">
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-action" onclick="addCoupon('LV4')">添加优惠券</button>
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 摊位选择区域样式 */
|
||||
.stall-selection-section {
|
||||
background-color: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.stall-selection-section h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stall-checkboxes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.stall-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.stall-checkbox:hover {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
.stall-checkbox input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stall-checkbox input[type="checkbox"]:checked + span {
|
||||
color: #2196f3;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.selected-stalls-info {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
margin-bottom: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-section .btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.level-edit-table {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.level-edit-table th,
|
||||
.level-edit-table td {
|
||||
text-align: center;
|
||||
padding: 12px 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.level-edit-table th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.level-edit-table tr:nth-child(even) {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.level-edit-table tr:hover {
|
||||
background-color: #e8f4f8;
|
||||
}
|
||||
|
||||
/* 表单输入框样式 */
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #bdc3c7;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 范围输入框样式 */
|
||||
.range-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.range-start, .range-end {
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.discount-input {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* 开关按钮调整 */
|
||||
.level-edit-table .switch {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.level-edit-table .slider {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.level-edit-table .slider:before {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.level-edit-table input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.btn-action {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
/* 表格列宽调整 */
|
||||
.level-edit-table th:nth-child(1) { width: 60px; } /* 等级 */
|
||||
.level-edit-table th:nth-child(2) { width: 100px; } /* 等级名称 */
|
||||
.level-edit-table th:nth-child(3) { width: 120px; } /* 成长值范围 */
|
||||
.level-edit-table th:nth-child(4) { width: 80px; } /* 开启会员折扣 */
|
||||
.level-edit-table th:nth-child(5) { width: 80px; } /* 折扣率 */
|
||||
.level-edit-table th:nth-child(6) { width: 80px; } /* 开启积分兑换 */
|
||||
.level-edit-table th:nth-child(7) { width: 80px; } /* 开启生日优惠券 */
|
||||
.level-edit-table th:nth-child(8) { width: 100px; } /* 生日优惠券操作 */
|
||||
.level-edit-table th:nth-child(9) { width: 80px; } /* 开启生日双倍积分 */
|
||||
</style>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<button class="btn btn-search">查询</button>
|
||||
<button class="btn btn-primary">批量会员等级编辑</button>
|
||||
<button class="btn btn-primary" onclick="openBatchLevelEdit()">批量会员等级编辑</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue