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 15:46:58 +08:00
parent 7a506fb30e
commit 4f42c3ea57
7 changed files with 541 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
H5/会员管理/会员等级批量编辑1.html → H5/1 工作台/1.1 会员管理/1.1.1 等级设置/会员等级批量编辑1.html
View File

0
H5/会员管理/会员等级批量编辑2.html → H5/1 工作台/1.1 会员管理/1.1.1 等级设置/会员等级批量编辑2.html
View File

0
H5/会员管理/等级编辑.html → H5/1 工作台/1.1 会员管理/1.1.1 等级设置/等级编辑.html
View File

0
H5/会员管理/等级设置.html → H5/1 工作台/1.1 会员管理/1.1.1 等级设置/等级设置.html
View File

541
H5/1 工作台/1.1 会员管理/1.1.2 会员列表/会员列表.html Normal file
View File

@ -0,0 +1,541 @@
<!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;
color: #333;
line-height: 1.4;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 16px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header h1 {
font-size: 20px;
font-weight: 600;
}
.search-section {
background: white;
padding: 16px;
margin-bottom: 12px;
border-radius: 12px;
margin: 12px 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.search-row {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.search-row:last-child {
margin-bottom: 0;
}
.form-group {
flex: 1;
}
.form-group label {
display: block;
font-size: 12px;
color: #666;
margin-bottom: 4px;
}
.form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
background: #fafafa;
}
.form-control:focus {
outline: none;
border-color: #667eea;
background: white;
}
.search-btn {
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
width: 100%;
margin-top: 12px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
.search-btn:active {
transform: translateY(1px);
}
.stats-section {
display: flex;
gap: 12px;
padding: 0 16px;
margin-bottom: 16px;
}
.stat-card {
flex: 1;
background: white;
padding: 16px;
border-radius: 12px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.stat-number {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
color: #666;
}
.stat-card:first-child .stat-number {
color: #2196F3;
}
.stat-card:last-child .stat-number {
color: #FF9800;
}
.member-list {
padding: 0 16px;
}
.member-card {
background: white;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
position: relative;
}
.member-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
margin-right: 12px;
}
.member-info {
flex: 1;
}
.member-name {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
}
.member-id {
font-size: 12px;
color: #999;
}
.level-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: bold;
color: white;
}
.level-lv1 { background: #4CAF50; }
.level-lv2 { background: #2196F3; }
.level-lv3 { background: #FF9800; }
.level-lv4 { background: #F44336; }
.member-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.detail-item {
font-size: 12px;
}
.detail-label {
color: #666;
margin-bottom: 2px;
}
.detail-value {
color: #333;
font-weight: 500;
}
.member-actions {
text-align: right;
}
.detail-btn {
background: #667eea;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
}
.detail-btn:active {
background: #5a6fd8;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 16px;
gap: 8px;
}
.page-btn {
padding: 8px 12px;
border: 1px solid #e0e0e0;
background: white;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
}
.page-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.page-info {
font-size: 12px;
color: #666;
margin: 0 8px;
}
.store-tag {
display: inline-block;
background: #f0f0f0;
color: #666;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
margin-bottom: 4px;
}
/* Avatar colors */
.avatar-blue { background: #2196F3; }
.avatar-green { background: #4CAF50; }
.avatar-red { background: #F44336; }
.avatar-orange { background: #FF9800; }
.avatar-purple { background: #9C27B0; }
@media (max-width: 480px) {
.search-row {
flex-direction: column;
}
.member-details {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="header">
<h1>会员列表</h1>
</div>
<div class="search-section">
<div class="search-row">
<div class="form-group">
<label>所属店铺</label>
<select class="form-control">
<option>全部店铺</option>
<option>总店</option>
<option>分店1</option>
<option>分店2</option>
</select>
</div>
<div class="form-group">
<label>会员等级</label>
<select class="form-control">
<option>全部等级</option>
<option>LV1</option>
<option>LV2</option>
<option>LV3</option>
<option>LV4</option>
</select>
</div>
</div>
<div class="search-row">
<div class="form-group">
<label>用户昵称</label>
<input type="text" class="form-control" placeholder="请输入用户昵称">
</div>
<div class="form-group">
<label>手机号</label>
<input type="text" class="form-control" placeholder="请输入手机号">
</div>
</div>
<div class="search-row">
<div class="form-group">
<label>注册时间</label>
<input type="date" class="form-control">
</div>
</div>
<button class="search-btn" onclick="searchMembers()">筛选查询</button>
</div>
<div class="stats-section">
<div class="stat-card">
<div class="stat-number">1,247</div>
<div class="stat-label">会员总数</div>
</div>
<div class="stat-card">
<div class="stat-number">23</div>
<div class="stat-label">今日新增</div>
</div>
</div>
<div class="member-list">
<div class="member-card">
<div class="member-header">
<div class="avatar avatar-blue">张</div>
<div class="member-info">
<div class="member-name">张小明</div>
<div class="member-id">ID: 001234</div>
</div>
<span class="level-badge level-lv2">LV2</span>
</div>
<div class="store-tag">总店</div>
<div class="member-details">
<div class="detail-item">
<div class="detail-label">手机号</div>
<div class="detail-value">138****1234</div>
</div>
<div class="detail-item">
<div class="detail-label">生日</div>
<div class="detail-value">1990-01-15</div>
</div>
<div class="detail-item">
<div class="detail-label">注册时间</div>
<div class="detail-value">2024-01-15 10:30:25</div>
</div>
</div>
<div class="member-actions">
<button class="detail-btn" onclick="viewDetails('001234')">详情</button>
</div>
</div>
<div class="member-card">
<div class="member-header">
<div class="avatar avatar-green">李</div>
<div class="member-info">
<div class="member-name">李美丽</div>
<div class="member-id">ID: 001235</div>
</div>
<span class="level-badge level-lv1">LV1</span>
</div>
<div class="store-tag">分店1</div>
<div class="member-details">
<div class="detail-item">
<div class="detail-label">手机号</div>
<div class="detail-value">139****5678</div>
</div>
<div class="detail-item">
<div class="detail-label">生日</div>
<div class="detail-value">1985-03-22</div>
</div>
<div class="detail-item">
<div class="detail-label">注册时间</div>
<div class="detail-value">2024-01-14 14:20:18</div>
</div>
</div>
<div class="member-actions">
<button class="detail-btn" onclick="viewDetails('001235')">详情</button>
</div>
</div>
<div class="member-card">
<div class="member-header">
<div class="avatar avatar-red">王</div>
<div class="member-info">
<div class="member-name">王大力</div>
<div class="member-id">ID: 001236</div>
</div>
<span class="level-badge level-lv3">LV3</span>
</div>
<div class="store-tag">总店</div>
<div class="member-details">
<div class="detail-item">
<div class="detail-label">手机号</div>
<div class="detail-value">136****9876</div>
</div>
<div class="detail-item">
<div class="detail-label">生日</div>
<div class="detail-value">1992-07-08</div>
</div>
<div class="detail-item">
<div class="detail-label">注册时间</div>
<div class="detail-value">2024-01-13 09:15:42</div>
</div>
</div>
<div class="member-actions">
<button class="detail-btn" onclick="viewDetails('001236')">详情</button>
</div>
</div>
<div class="member-card">
<div class="member-header">
<div class="avatar avatar-orange">陈</div>
<div class="member-info">
<div class="member-name">陈小芳</div>
<div class="member-id">ID: 001237</div>
</div>
<span class="level-badge level-lv4">LV4</span>
</div>
<div class="store-tag">分店2</div>
<div class="member-details">
<div class="detail-item">
<div class="detail-label">手机号</div>
<div class="detail-value">135****4321</div>
</div>
<div class="detail-item">
<div class="detail-label">生日</div>
<div class="detail-value">1988-11-30</div>
</div>
<div class="detail-item">
<div class="detail-label">注册时间</div>
<div class="detail-value">2024-01-12 16:45:33</div>
</div>
</div>
<div class="member-actions">
<button class="detail-btn" onclick="viewDetails('001237')">详情</button>
</div>
</div>
<div class="member-card">
<div class="member-header">
<div class="avatar avatar-purple">刘</div>
<div class="member-info">
<div class="member-name">刘强东</div>
<div class="member-id">ID: 001238</div>
</div>
<span class="level-badge level-lv2">LV2</span>
</div>
<div class="store-tag">分店1</div>
<div class="member-details">
<div class="detail-item">
<div class="detail-label">手机号</div>
<div class="detail-value">137****8765</div>
</div>
<div class="detail-item">
<div class="detail-label">生日</div>
<div class="detail-value">1995-05-12</div>
</div>
<div class="detail-item">
<div class="detail-label">注册时间</div>
<div class="detail-value">2024-01-11 11:30:15</div>
</div>
</div>
<div class="member-actions">
<button class="detail-btn" onclick="viewDetails('001238')">详情</button>
</div>
</div>
</div>
<div class="pagination">
<button class="page-btn">首页</button>
<button class="page-btn">上一页</button>
<span class="page-info">第1页，共63页</span>
<button class="page-btn">下一页</button>
<button class="page-btn">尾页</button>
</div>
<script>
function searchMembers() {
// 模拟搜索功能
alert('搜索功能已触发！');
// 这里可以添加实际的搜索逻辑
}
function viewDetails(memberId) {
// 模拟查看详情功能
alert(`查看会员 ${memberId} 的详细信息`);
// 这里可以添加跳转到详情页面的逻辑
}
// 添加触摸反馈
document.addEventListener('touchstart', function(e) {
if (e.target.classList.contains('member-card')) {
e.target.style.transform = 'scale(0.98)';
}
});
document.addEventListener('touchend', function(e) {
if (e.target.classList.contains('member-card')) {
e.target.style.transform = 'scale(1)';
}
});
// 模拟加载更多数据
let isLoading = false;
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 1000 && !isLoading) {
isLoading = true;
// 这里可以添加加载更多数据的逻辑
setTimeout(() => {
isLoading = false;
}, 1000);
}
});
</script>
</body>
</html>

0
H5/会员管理/会员管理.html → H5/1 工作台/1.1 会员管理/总功能菜单.html
View File

BIN
大妈集市.rp
View File

Binary file not shown.