linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

H5 批量会员完成

This commit is contained in:
linbin 2025-08-06 05:11:29 +08:00
parent a9e8dad812
commit b084ff352b
3 changed files with 806 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

427
H5/会员管理/会员等级批量编辑1.html Normal file
View File

@ -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>

379
H5/会员管理/会员等级批量编辑2.html Normal file
View File

@ -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>

BIN
大妈集市.rp
View File

Binary file not shown.