541 lines
16 KiB
HTML
541 lines
16 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>
|
||
<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> |