419 lines
12 KiB
HTML
419 lines
12 KiB
HTML
|
<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>
|