322 lines
10 KiB
HTML
322 lines
10 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.completed {
|
||
color: #4CAF50;
|
||
}
|
||
.step.active .step-number, .step.completed .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;
|
||
}
|
||
.step-line.completed {
|
||
background: #4CAF50;
|
||
}
|
||
.selected-shops-sidebar {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
border-left: 4px solid #4CAF50;
|
||
}
|
||
.sidebar-title {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.sidebar-title .icon {
|
||
margin-right: 8px;
|
||
font-size: 16px;
|
||
}
|
||
.selected-shops-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.shop-tag {
|
||
background: #e8f5e8;
|
||
color: #2e7d2e;
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
border: 1px solid #c8e6c8;
|
||
}
|
||
.level-settings-container {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.settings-header {
|
||
background: #4CAF50;
|
||
color: white;
|
||
padding: 15px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.template-actions {
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
.template-actions button {
|
||
flex: 1;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
background: white;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
.level-detail-row {
|
||
background: #f8f9fa;
|
||
border-top: 2px solid #4CAF50;
|
||
}
|
||
.level-detail-content {
|
||
padding: 15px;
|
||
border-left: 3px solid #4CAF50;
|
||
margin: 10px 0;
|
||
}
|
||
.detail-form-group {
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.detail-form-group:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.detail-label {
|
||
font-weight: bold;
|
||
color: #333;
|
||
flex: 1;
|
||
font-size: 14px;
|
||
}
|
||
.detail-input {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
.detail-input input {
|
||
width: 80px;
|
||
padding: 5px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
}
|
||
.detail-actions {
|
||
margin-top: 15px;
|
||
text-align: center;
|
||
padding-top: 15px;
|
||
border-top: 2px solid #eee;
|
||
}
|
||
.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;
|
||
}
|
||
.page-content {
|
||
padding-bottom: 80px;
|
||
}
|
||
.expand-btn {
|
||
background: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
.expand-btn:hover {
|
||
background: #45a049;
|
||
}
|
||
.warning-notice {
|
||
background: #fff3cd;
|
||
border: 1px solid #ffeaa7;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
margin: 15px 0;
|
||
color: #856404;
|
||
}
|
||
.warning-notice .icon {
|
||
margin-right: 8px;
|
||
}
|
||
</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 completed">
|
||
<div class="step-number">✓</div>
|
||
<span>选择店铺</span>
|
||
</div>
|
||
<div class="step-line completed"></div>
|
||
<div class="step active">
|
||
<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="selected-shops-sidebar">
|
||
<div class="sidebar-title">
|
||
<span class="icon">🏪</span>
|
||
<span>正在为以下 <span id="shop-count">0</span> 个店铺设置会员等级</span>
|
||
</div>
|
||
<div class="selected-shops-list" id="selected-shops-list">
|
||
<!-- 选中的店铺标签将在这里显示 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 警告提示 -->
|
||
<div class="warning-notice">
|
||
<span class="icon">⚠️</span>
|
||
<strong>注意：</strong>此操作将覆盖所选店铺的现有会员等级设置，请谨慎操作。
|
||
</div>
|
||
|
||
<!-- 等级设置容器 -->
|
||
<div class="level-settings-container">
|
||
<div class="settings-header">
|
||
会员等级设置
|
||
</div>
|
||
|
||
<!-- 模板操作 -->
|
||
<div class="template-actions">
|
||
<button onclick="loadTemplate('default')">加载默认模板</button>
|
||
<button onclick="loadTemplate('premium')">加载高级模板</button>
|
||
<button onclick="resetSettings()">重置设置</button>
|
||
</div>
|
||
|
||
<!-- 等级编辑表格 -->
|
||
<table class="simple-table">
|
||
<thead>
|
||
<tr>
|
||
<th>等级</th>
|
||
<th>等级名称</th>
|
||
<th>等级详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="level-edit-table">
|
||
<!-- 数据将通过JavaScript动态填充 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<div class="action-buttons">
|
||
<button class="btn btn-secondary" onclick="previousStep()">上一步</button>
|
||
<button class="btn btn-primary" onclick="nextStep()">预览设置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优惠券弹窗 -->
|
||
<div id="coupon-modal" class="coupon-modal hidden" onclick="closeCouponModal(event)">
|
||
<div class="coupon-modal-content" onclick="event.stopPropagation()">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
||
<h3>添加优惠券</h3>
|
||
<button onclick="closeCouponModal()" style="background: none; border: none; font-size: 18px;">×</button>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">优惠券名称</label>
|
||
<input type="text" id="coupon-name" class="form-input" value="生日优惠券">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">优惠券门槛金额</label>
|
||
<input type="number" id="coupon-threshold" class="form-input" value="10" min="0">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">优惠券减免金额</label>
|
||
<input type="number" id="coupon-discount" class="form-input" value="1" min="0">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">优惠券有效时间</label>
|
||
<select id="coupon-validity" class="form-select">
|
||
<option value="1">1天</option>
|
||
<option value="7">7天</option>
|
||
<option value="30">30天</option>
|
||
<option value="90">90天</option>
|
||
<option value="365">1年</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="text-align: right; margin-top: 20px;">
|
||
<button class="btn btn-secondary" onclick="closeCouponModal()">取消</button>
|
||
<button class="btn btn-primary" onclick="submitCoupon()">确认添加</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../js/mobile-common.js"></script>
|
||
<script src="../js/pages/batch-edit-step2.js"></script>
|
||
</body>
|
||
</html> |