628 lines
20 KiB
HTML
628 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>批量会员编辑</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: #f8f9fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 页面头部 */
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
padding: 20px 0;
|
|
border-bottom: 1px dashed #ccc;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.submit-btn {
|
|
background: white;
|
|
border: 1px dashed #999;
|
|
padding: 10px 24px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: #f5f5f5;
|
|
border-color: #666;
|
|
}
|
|
|
|
/* 会员等级表格 */
|
|
.member-levels {
|
|
background: white;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.levels-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.levels-table th,
|
|
.levels-table td {
|
|
padding: 12px 8px;
|
|
text-align: center;
|
|
border: 1px dashed #ddd;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.levels-table th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #555;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.levels-table td {
|
|
background: white;
|
|
}
|
|
|
|
/* 表格输入框 */
|
|
.table-input {
|
|
width: 100%;
|
|
max-width: 120px;
|
|
padding: 6px 8px;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.table-input:focus {
|
|
outline: none;
|
|
border-color: #999;
|
|
}
|
|
|
|
.range-input {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.range-input input {
|
|
max-width: 60px;
|
|
}
|
|
|
|
/* 开关按钮 */
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 24px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
border: 1px dashed #999;
|
|
transition: .4s;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #999;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* 等级名称 */
|
|
.level-number {
|
|
font-weight: 600;
|
|
color: #666;
|
|
}
|
|
|
|
/* 设置优惠券按钮 */
|
|
.add-coupon-btn {
|
|
background: white;
|
|
border: 1px dashed #ccc;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-coupon-btn:hover {
|
|
border-color: #999;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
/* 积分设置区域 */
|
|
.points-settings {
|
|
background: white;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.setting-item {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.setting-label {
|
|
min-width: 150px;
|
|
font-weight: 500;
|
|
color: #555;
|
|
}
|
|
|
|
.setting-input {
|
|
padding: 8px 12px;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
width: 120px;
|
|
}
|
|
|
|
.setting-input:focus {
|
|
outline: none;
|
|
border-color: #999;
|
|
}
|
|
|
|
.setting-text {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 抵扣比例设置 */
|
|
.exchange-settings {
|
|
background: white;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.exchange-item {
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
color: #555;
|
|
}
|
|
|
|
.exchange-value {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
/* 限制设置 */
|
|
.limit-settings {
|
|
background: white;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.radio-item input[type="radio"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: #666;
|
|
}
|
|
|
|
.radio-item label {
|
|
font-size: 14px;
|
|
color: #555;
|
|
cursor: pointer;
|
|
}
|
|
.section {
|
|
border: 1px dashed #ccc;
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.store-selection {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px dashed #ccc;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selected-count {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.page-header {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.levels-table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.levels-table th,
|
|
.levels-table td {
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.table-input {
|
|
max-width: 80px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.setting-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.setting-label {
|
|
min-width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 页面头部 -->
|
|
<div class="page-header">
|
|
<h1 class="page-title">批量会员编辑</h1>
|
|
<button class="submit-btn">提交</button>
|
|
</div>
|
|
<!-- 门店选择区域 -->
|
|
<div class="section">
|
|
<div class="section-title">选择要编辑的门店区域</div>
|
|
<div class="store-selection">
|
|
<div class="checkbox-item">
|
|
<div class="checkbox"></div>
|
|
<span>全选</span>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<div class="checkbox"></div>
|
|
<span>牛牛蔬菜店</span>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<div class="checkbox"></div>
|
|
<span>羊羊水果店</span>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<div class="checkbox"></div>
|
|
<span>小狗羊肉</span>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<div class="checkbox"></div>
|
|
<span>小马猪蹄</span>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<div class="checkbox"></div>
|
|
<span>小鱼生鲜</span>
|
|
</div>
|
|
<div class="selected-count">已选择 0 个门店</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 会员等级表格 -->
|
|
<div class="member-levels">
|
|
<h2 class="section-title">会员等级设置</h2>
|
|
<table class="levels-table">
|
|
<thead>
|
|
<tr>
|
|
<th>等级</th>
|
|
<th>等级名称</th>
|
|
<th>成长值范围</th>
|
|
<th>开启会员折扣</th>
|
|
<th>折扣率%</th>
|
|
<th>开启积分抵扣</th>
|
|
<th>开启生日优惠券</th>
|
|
<th>生日优惠券操作</th>
|
|
<th>开启生日双倍积分</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="level-number">LV1</span></td>
|
|
<td><input type="text" class="table-input" value="青铜会员" placeholder="等级名称"></td>
|
|
<td>
|
|
<div class="range-input">
|
|
<input type="number" class="table-input" value="0" min="0">
|
|
<span>-</span>
|
|
<input type="number" class="table-input" value="999" min="0">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td><input type="number" class="table-input" value="95" min="0" max="100" step="0.1"></td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td><button class="add-coupon-btn">设置优惠券</button></td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="level-number">LV2</span></td>
|
|
<td><input type="text" class="table-input" value="白银会员" placeholder="等级名称"></td>
|
|
<td>
|
|
<div class="range-input">
|
|
<input type="number" class="table-input" value="1000" min="0">
|
|
<span>-</span>
|
|
<input type="number" class="table-input" value="2999" min="0">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td><input type="number" class="table-input" value="90" min="0" max="100" step="0.1"></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="add-coupon-btn">设置优惠券</button></td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="level-number">LV3</span></td>
|
|
<td><input type="text" class="table-input" value="黄金会员" placeholder="等级名称"></td>
|
|
<td>
|
|
<div class="range-input">
|
|
<input type="number" class="table-input" value="3000" min="0">
|
|
<span>-</span>
|
|
<input type="number" class="table-input" value="5999" min="0">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td><input type="number" class="table-input" value="85" min="0" max="100" step="0.1"></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="add-coupon-btn">设置优惠券</button></td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="level-number">LV4</span></td>
|
|
<td><input type="text" class="table-input" value="钻石会员" placeholder="等级名称"></td>
|
|
<td>
|
|
<div class="range-input">
|
|
<input type="number" class="table-input" value="6000" min="0">
|
|
<span>-</span>
|
|
<input type="number" class="table-input" value="99999" min="0">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td><input type="number" class="table-input" value="80" min="0" max="100" step="0.1"></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="add-coupon-btn">设置优惠券</button></td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 积分有效期设置 -->
|
|
<div class="points-settings">
|
|
<h2 class="section-title">积分有效期设置</h2>
|
|
<div class="setting-item">
|
|
<label class="setting-label">有效期天数</label>
|
|
<input type="number" class="setting-input" value="365" min="1">
|
|
<span class="setting-text">天</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 金额与积分抵扣比例设置 -->
|
|
<div class="exchange-settings">
|
|
<h2 class="section-title">金额与积分抵扣比例设置</h2>
|
|
<div class="exchange-item">
|
|
<span>消费获得积分比例：消费</span>
|
|
<span class="exchange-value">1</span>
|
|
<span>元 =</span>
|
|
<span class="exchange-value">1</span>
|
|
<span>积分</span>
|
|
</div>
|
|
<div class="exchange-item">
|
|
<span>积分抵扣金额比例：</span>
|
|
<input type="number" class="setting-input" value="100" min="1" style="width: 80px; display: inline-block;">
|
|
<span>积分 =</span>
|
|
<span class="exchange-value">1</span>
|
|
<span>元</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 单笔订单最大积分使用限制 -->
|
|
<div class="limit-settings">
|
|
<h2 class="section-title">单笔订单最大积分使用限制</h2>
|
|
<div class="radio-group">
|
|
<div class="radio-item">
|
|
<input type="radio" id="no-limit" name="limit-type" value="no-limit" checked>
|
|
<label for="no-limit">不限制</label>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" id="percentage-limit" name="limit-type" value="percentage">
|
|
<label for="percentage-limit">按订单金额百分比限制</label>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" id="fixed-limit" name="limit-type" value="fixed">
|
|
<label for="fixed-limit">按固定金额限制</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |