H5 批量会员完成
This commit is contained in:
parent
a9e8dad812
commit
b084ff352b
|
|
@ -0,0 +1,427 @@
|
||||||
|
<!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, sans-serif;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题栏 */
|
||||||
|
.header {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 步骤指示器 */
|
||||||
|
.steps {
|
||||||
|
background: white;
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px dashed #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step.active .step-number {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step.inactive .step-number {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step.active .step-text {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step.inactive .step-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step:not(:last-child)::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 操作按钮区 */
|
||||||
|
.action-buttons {
|
||||||
|
background: white;
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
border-bottom: 1px dashed #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: white;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn:hover {
|
||||||
|
border-color: #4CAF50;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选择摘要 */
|
||||||
|
.selection-summary {
|
||||||
|
background: white;
|
||||||
|
margin: 12px 16px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px dashed #4CAF50;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #4CAF50;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 店铺列表 */
|
||||||
|
.shop-list {
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-item {
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px dashed #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-item.selected {
|
||||||
|
border-color: #4CAF50;
|
||||||
|
background-color: #f8fff8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-status {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-status.enabled {
|
||||||
|
background-color: #e8f5e8;
|
||||||
|
color: #4CAF50;
|
||||||
|
border: 1px dashed #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-status.disabled {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #999;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-count {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-level {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部按钮 */
|
||||||
|
.bottom-actions {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
border-top: 1px dashed #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px;
|
||||||
|
background: white;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn {
|
||||||
|
flex: 2;
|
||||||
|
padding: 12px;
|
||||||
|
background: #4CAF50;
|
||||||
|
border: 1px dashed #4CAF50;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn:disabled {
|
||||||
|
background: #e0e0e0;
|
||||||
|
border-color: #e0e0e0;
|
||||||
|
color: #999;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部留白 */
|
||||||
|
.bottom-spacer {
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 顶部标题栏 -->
|
||||||
|
<div class="header">
|
||||||
|
<button class="back-btn">←</button>
|
||||||
|
<div class="header-title">批量会员等级编辑</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 步骤指示器 -->
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step active">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<div class="step-text">选择店铺</div>
|
||||||
|
</div>
|
||||||
|
<div class="step inactive">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div class="step-text">设置等级</div>
|
||||||
|
</div>
|
||||||
|
<div class="step inactive">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div class="step-text">确认提交</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮区 -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button class="action-btn" onclick="selectAll()">全选</button>
|
||||||
|
<button class="action-btn" onclick="selectNone()">全不选</button>
|
||||||
|
<button class="action-btn" onclick="selectReverse()">反选</button>
|
||||||
|
<button class="action-btn" onclick="selectEnabled()">仅选启用</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 选择摘要 -->
|
||||||
|
<div class="selection-summary">
|
||||||
|
选择摘要 已选择<span id="selectedCount">0</span>个店铺
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 店铺列表 -->
|
||||||
|
<div class="shop-list">
|
||||||
|
<div class="shop-item" data-enabled="true">
|
||||||
|
<input type="checkbox" class="shop-checkbox" onchange="updateSelection()">
|
||||||
|
<div class="shop-name">时尚服装店</div>
|
||||||
|
<div class="shop-info">
|
||||||
|
<div class="member-status enabled">会员功能已启用</div>
|
||||||
|
<div class="member-count">会员数1250</div>
|
||||||
|
</div>
|
||||||
|
<div class="current-level">当前等级lv1-lv4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shop-item" data-enabled="false">
|
||||||
|
<input type="checkbox" class="shop-checkbox" onchange="updateSelection()">
|
||||||
|
<div class="shop-name">数码电子城</div>
|
||||||
|
<div class="shop-info">
|
||||||
|
<div class="member-status disabled">会员功能未启用</div>
|
||||||
|
<div class="member-count">会员数850</div>
|
||||||
|
</div>
|
||||||
|
<div class="current-level">当前等级lv1-lv3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shop-item" data-enabled="true">
|
||||||
|
<input type="checkbox" class="shop-checkbox" onchange="updateSelection()">
|
||||||
|
<div class="shop-name">美食餐厅</div>
|
||||||
|
<div class="shop-info">
|
||||||
|
<div class="member-status enabled">会员功能已启用</div>
|
||||||
|
<div class="member-count">会员数2100</div>
|
||||||
|
</div>
|
||||||
|
<div class="current-level">当前等级lv1-lv4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shop-item" data-enabled="false">
|
||||||
|
<input type="checkbox" class="shop-checkbox" onchange="updateSelection()">
|
||||||
|
<div class="shop-name">家居生活馆</div>
|
||||||
|
<div class="shop-info">
|
||||||
|
<div class="member-status disabled">会员功能未启用</div>
|
||||||
|
<div class="member-count">会员数650</div>
|
||||||
|
</div>
|
||||||
|
<div class="current-level">当前等级lv1-lv2</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shop-item" data-enabled="true">
|
||||||
|
<input type="checkbox" class="shop-checkbox" onchange="updateSelection()">
|
||||||
|
<div class="shop-name">运动健身店</div>
|
||||||
|
<div class="shop-info">
|
||||||
|
<div class="member-status enabled">会员功能已启用</div>
|
||||||
|
<div class="member-count">会员数980</div>
|
||||||
|
</div>
|
||||||
|
<div class="current-level">当前等级lv1-lv4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部留白 -->
|
||||||
|
<div class="bottom-spacer"></div>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<div class="bottom-actions">
|
||||||
|
<button class="cancel-btn">取消</button>
|
||||||
|
<button class="next-btn" id="nextBtn" disabled>下一步(<span id="nextCount">0</span>)</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 更新选择状态
|
||||||
|
function updateSelection() {
|
||||||
|
const checkboxes = document.querySelectorAll('.shop-checkbox');
|
||||||
|
const shopItems = document.querySelectorAll('.shop-item');
|
||||||
|
let selectedCount = 0;
|
||||||
|
|
||||||
|
checkboxes.forEach((checkbox, index) => {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
selectedCount++;
|
||||||
|
shopItems[index].classList.add('selected');
|
||||||
|
} else {
|
||||||
|
shopItems[index].classList.remove('selected');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新选择摘要
|
||||||
|
document.getElementById('selectedCount').textContent = selectedCount;
|
||||||
|
document.getElementById('nextCount').textContent = selectedCount;
|
||||||
|
|
||||||
|
// 更新下一步按钮状态
|
||||||
|
const nextBtn = document.getElementById('nextBtn');
|
||||||
|
nextBtn.disabled = selectedCount === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全选
|
||||||
|
function selectAll() {
|
||||||
|
const checkboxes = document.querySelectorAll('.shop-checkbox');
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.checked = true;
|
||||||
|
});
|
||||||
|
updateSelection();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全不选
|
||||||
|
function selectNone() {
|
||||||
|
const checkboxes = document.querySelectorAll('.shop-checkbox');
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.checked = false;
|
||||||
|
});
|
||||||
|
updateSelection();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 反选
|
||||||
|
function selectReverse() {
|
||||||
|
const checkboxes = document.querySelectorAll('.shop-checkbox');
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.checked = !checkbox.checked;
|
||||||
|
});
|
||||||
|
updateSelection();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 仅选启用
|
||||||
|
function selectEnabled() {
|
||||||
|
const checkboxes = document.querySelectorAll('.shop-checkbox');
|
||||||
|
const shopItems = document.querySelectorAll('.shop-item');
|
||||||
|
|
||||||
|
checkboxes.forEach((checkbox, index) => {
|
||||||
|
const isEnabled = shopItems[index].getAttribute('data-enabled') === 'true';
|
||||||
|
checkbox.checked = isEnabled;
|
||||||
|
});
|
||||||
|
updateSelection();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
updateSelection();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,379 @@
|
||||||
|
<!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;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: white;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题栏 */
|
||||||
|
.header {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px dashed #28a745;
|
||||||
|
padding: 15px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
background: white;
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度条 */
|
||||||
|
.progress-section {
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-step {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle.completed {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle.current {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text.active {
|
||||||
|
color: #28a745;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-line {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15%;
|
||||||
|
right: 15%;
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px dashed #ccc;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 店铺选择区域 */
|
||||||
|
.shop-section {
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-title {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-tag {
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
background: white;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 警告提示框 */
|
||||||
|
.warning-box {
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px dashed #ffc107;
|
||||||
|
background-color: #fff3cd;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-text {
|
||||||
|
color: #856404;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 会员等级设置区域 */
|
||||||
|
.level-section {
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px dashed #28a745;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-btn {
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
background: white;
|
||||||
|
padding: 8px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-btn:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 等级表格 */
|
||||||
|
.level-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-table th,
|
||||||
|
.level-table td {
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
padding: 12px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-table th {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-btn {
|
||||||
|
border: 1px dashed #28a745;
|
||||||
|
background: white;
|
||||||
|
color: #28a745;
|
||||||
|
padding: 6px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-btn:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部操作栏 */
|
||||||
|
.action-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-top: 1px dashed #ccc;
|
||||||
|
padding: 15px 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev-btn {
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
background: white;
|
||||||
|
color: #666;
|
||||||
|
padding: 12px 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
border: 1px dashed #28a745;
|
||||||
|
background: white;
|
||||||
|
color: #28a745;
|
||||||
|
padding: 12px 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev-btn:hover,
|
||||||
|
.submit-btn:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.template-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-table {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<!-- 顶部标题栏 -->
|
||||||
|
<div class="header">
|
||||||
|
<div class="back-btn">← 返回</div>
|
||||||
|
<div class="header-title">批量会员等级编辑</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<div class="progress-section">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-line"></div>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="step-circle completed">✓</div>
|
||||||
|
<div class="step-text">选择店铺</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="step-circle current">2</div>
|
||||||
|
<div class="step-text active">设置等级</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-step">
|
||||||
|
<div class="step-circle">3</div>
|
||||||
|
<div class="step-text">确认提交</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 店铺选择区域 -->
|
||||||
|
<div class="shop-section">
|
||||||
|
<div class="shop-title">正在为以下8个店铺设置会员等级</div>
|
||||||
|
<div class="shop-tags">
|
||||||
|
<div class="shop-tag">时尚服装店</div>
|
||||||
|
<div class="shop-tag">数码电子城</div>
|
||||||
|
<div class="shop-tag">美食餐厅</div>
|
||||||
|
<div class="shop-tag">家居生活馆</div>
|
||||||
|
<div class="shop-tag">运动健身店</div>
|
||||||
|
<div class="shop-tag">母婴用品店</div>
|
||||||
|
<div class="shop-tag">图书文具店</div>
|
||||||
|
<div class="shop-tag">宠物用品店</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 警告提示框 -->
|
||||||
|
<div class="warning-box">
|
||||||
|
<div class="warning-text">
|
||||||
|
注意事项：批量设置会员等级将覆盖所选店铺的现有等级设置，请确认无误后再提交。设置完成后，用户需要重新登录才能看到等级变化。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 会员等级设置区域 -->
|
||||||
|
<div class="level-section">
|
||||||
|
|
||||||
|
|
||||||
|
<table class="level-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>等级</th>
|
||||||
|
<th>等级名称</th>
|
||||||
|
<th>等级详情</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>LV1</td>
|
||||||
|
<td class="level-name">铜牌会员</td>
|
||||||
|
<td>积分达到100分可升级，享受95折优惠</td>
|
||||||
|
<td><div class="detail-btn">展开详情</div></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>LV2</td>
|
||||||
|
<td class="level-name">银牌会员</td>
|
||||||
|
<td>积分达到500分可升级，享受9折优惠</td>
|
||||||
|
<td><div class="detail-btn">展开详情</div></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>LV3</td>
|
||||||
|
<td class="level-name">金牌会员</td>
|
||||||
|
<td>积分达到1000分可升级，享受85折优惠</td>
|
||||||
|
<td><div class="detail-btn">展开详情</div></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
|
<div class="action-bar">
|
||||||
|
<div class="prev-btn">上一步</div>
|
||||||
|
<div class="submit-btn">提交</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue