453 lines
12 KiB
HTML
453 lines
12 KiB
HTML
<div class="page-content">
|
|
<div class="page-header">
|
|
<h2 id="merchantName">时尚服装店</h2>
|
|
<span class="page-subtitle">- 等级编辑</span>
|
|
</div>
|
|
|
|
<!-- 操作按钮区域 -->
|
|
<div class="action-section">
|
|
<button class="btn btn-primary" onclick="saveLevelEdit()">提交</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="levelEditBody">
|
|
<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;
|
|
}
|
|
|
|
.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; } /* 开启生日双倍积分 */
|
|
|
|
/* 优惠券弹窗样式 */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 8px;
|
|
width: 400px;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: #999;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
padding: 20px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.required {
|
|
color: #e74c3c;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.input-with-dropdown {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.input-with-dropdown .form-input {
|
|
flex: 1;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.dropdown-btn {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #f8f9fa;
|
|
color: #6c757d;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: 1px solid #007bff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style> |