linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

批量会员等级修改完成

This commit is contained in:
linbin 2025-08-01 16:40:17 +08:00
parent 9539fa5658
commit 01b43945f4
4 changed files with 607 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
new_web/merchant/js/batch-level-edit.js Normal file
View File

@ -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;

13
new_web/merchant/js/level-settings.js
View File

@ -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.openLevelDetails = openLevelDetails;
window.openBatchLevelEdit = openBatchLevelEdit;

419
new_web/merchant/pages/batch-level-edit.html Normal file
View File

@ -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>

2
new_web/merchant/pages/level-settings.html
View File

@ -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>