210 lines
5.9 KiB
HTML
210 lines
5.9 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>
|
|
<link rel="stylesheet" href="../css/mobile.css">
|
|
<style>
|
|
.step-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 20px 0;
|
|
padding: 0 20px;
|
|
}
|
|
.step {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ccc;
|
|
}
|
|
.step.active {
|
|
color: #4CAF50;
|
|
font-weight: bold;
|
|
}
|
|
.step.active .step-number {
|
|
background: #4CAF50;
|
|
color: white;
|
|
}
|
|
.step-number {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: #ccc;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
margin-right: 8px;
|
|
}
|
|
.step-line {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: #ccc;
|
|
margin: 0 10px;
|
|
}
|
|
.shop-selection {
|
|
margin: 20px 0;
|
|
}
|
|
.shop-card {
|
|
background: white;
|
|
border: 2px solid #f0f0f0;
|
|
border-radius: 8px;
|
|
margin: 10px 0;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.shop-card.selected {
|
|
border-color: #4CAF50;
|
|
background: #f8fff8;
|
|
}
|
|
.shop-card .checkbox {
|
|
margin-right: 15px;
|
|
}
|
|
.shop-info {
|
|
flex: 1;
|
|
}
|
|
.shop-name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.shop-status {
|
|
font-size: 12px;
|
|
color: #666;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
.status-dot.enabled {
|
|
background: #4CAF50;
|
|
}
|
|
.status-dot.disabled {
|
|
background: #ccc;
|
|
}
|
|
.shop-levels {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 3px;
|
|
}
|
|
.selection-summary {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #4CAF50;
|
|
}
|
|
.summary-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
}
|
|
.selected-count {
|
|
color: #4CAF50;
|
|
font-weight: bold;
|
|
}
|
|
.action-buttons {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
padding: 15px 20px;
|
|
border-top: 1px solid #eee;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.action-buttons .btn {
|
|
flex: 1;
|
|
}
|
|
.batch-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
.batch-actions button {
|
|
flex: 1;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.batch-actions button:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
.page-content {
|
|
padding-bottom: 80px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<!-- 页面头部 -->
|
|
<div class="page-header">
|
|
<button class="back-btn" onclick="goBack()">←</button>
|
|
<div class="page-title">批量会员等级编辑</div>
|
|
</div>
|
|
|
|
<!-- 步骤指示器 -->
|
|
<div class="step-indicator">
|
|
<div class="step active">
|
|
<div class="step-number">1</div>
|
|
<span>选择店铺</span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<span>设置等级</span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<span>确认提交</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页面内容 -->
|
|
<div class="page-content">
|
|
<!-- 批量操作按钮 -->
|
|
<div class="batch-actions">
|
|
<button onclick="selectAll()">全选</button>
|
|
<button onclick="selectNone()">全不选</button>
|
|
<button onclick="selectReverse()">反选</button>
|
|
<button onclick="selectEnabled()">仅选启用</button>
|
|
</div>
|
|
|
|
<!-- 选择摘要 -->
|
|
<div class="selection-summary">
|
|
<div class="summary-title">选择摘要</div>
|
|
<div>已选择 <span class="selected-count" id="selected-count">0</span> 个店铺</div>
|
|
</div>
|
|
|
|
<!-- 店铺选择列表 -->
|
|
<div class="shop-selection" id="shop-list">
|
|
<!-- 店铺列表将通过JavaScript动态填充 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<div class="action-buttons">
|
|
<button class="btn btn-secondary" onclick="goBack()">取消</button>
|
|
<button class="btn btn-primary" onclick="nextStep()" id="next-btn" disabled>
|
|
下一步 (<span id="btn-count">0</span>)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/mobile-common.js"></script>
|
|
<script src="../js/pages/batch-edit-step1.js"></script>
|
|
</body>
|
|
</html> |