会员详情
This commit is contained in:
parent
01b43945f4
commit
a13bd3f55e
|
|
@ -0,0 +1,339 @@
|
|||
/* 会员详情页面样式 */
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #e5e7eb;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.detail-header h2 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 会员信息卡片 */
|
||||
.member-info-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.member-info-header {
|
||||
padding: 16px 20px;
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.member-info-header h3 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.member-info-content {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.member-basic {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-avatar-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.large-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.member-basic-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.member-id,
|
||||
.member-phone,
|
||||
.member-birth {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.member-assets {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.growth-icon {
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.growth-icon::before {
|
||||
content: '📈';
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.points-icon {
|
||||
background: #dcfce7;
|
||||
}
|
||||
|
||||
.points-icon::before {
|
||||
content: '💰';
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.coupon-icon {
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.coupon-icon::before {
|
||||
content: '🎫';
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.asset-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.asset-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* 详情标签页 */
|
||||
.detail-tabs {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-headers {
|
||||
display: flex;
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-header.active {
|
||||
color: #2563eb;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.tab-header.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.tab-header:hover:not(.active) {
|
||||
color: #374151;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 详情表格 */
|
||||
.detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-table th {
|
||||
background: #f9fafb;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.detail-table td {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.detail-table tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #059669;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #dc2626;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.detail-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 表格底部 */
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.table-pagination span {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.table-pagination span:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.member-info-content {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.member-assets {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.tab-headers {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-table th,
|
||||
.detail-table td {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,380 @@
|
|||
/* 会员查看页面专用样式 */
|
||||
|
||||
/* 筛选区域样式 */
|
||||
.filter-section {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-item label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.filter-item select,
|
||||
.filter-item input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.filter-item input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.filter-actions .btn {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-actions .btn:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
/* 统计信息样式 */
|
||||
.stats-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.member-icon {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.member-icon::before {
|
||||
content: "👥";
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.new-member-icon {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.new-member-icon::before {
|
||||
content: "✨";
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 表格容器样式 */
|
||||
.table-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 会员表格样式 */
|
||||
.member-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.member-table thead {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.member-table th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.member-table th:first-child {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.member-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.member-table td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.member-table tbody tr:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* 排序图标样式 */
|
||||
.sort-icon {
|
||||
color: #9ca3af;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sort-icon:hover {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* 头像样式 */
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.green-avatar {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.orange-avatar {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.red-avatar {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.purple-avatar {
|
||||
background: #8b5cf6;
|
||||
}
|
||||
|
||||
.pink-avatar {
|
||||
background: #ec4899;
|
||||
}
|
||||
|
||||
.blue-avatar {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
/* 等级徽章样式 */
|
||||
.level-badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
min-width: 36px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.level-badge.lv1 {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.level-badge.lv2 {
|
||||
background: #ddd6fe;
|
||||
color: #6b21a8;
|
||||
}
|
||||
|
||||
.level-badge.lv3 {
|
||||
background: #fecaca;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.level-badge.lv4 {
|
||||
background: #a7f3d0;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* 详情链接样式 */
|
||||
.detail-link {
|
||||
color: #10b981;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-link:hover {
|
||||
color: #059669;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-section {
|
||||
background: #fff;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-info select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pagination-controls span {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.pagination-controls span:hover {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.pagination-controls input {
|
||||
width: 50px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 复选框样式优化 */
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.filter-row {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-row {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.member-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.member-table th,
|
||||
.member-table td {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.pagination-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
/**
|
||||
* 会员详情页面功能
|
||||
* 包含会员信息展示、成长值明细、积分明细等功能
|
||||
*/
|
||||
|
||||
// 当前会员数据
|
||||
let currentMemberData = null;
|
||||
|
||||
/**
|
||||
* 初始化会员详情页面
|
||||
*/
|
||||
function initMemberDetail() {
|
||||
console.log('会员详情页面已初始化');
|
||||
loadMemberDetailCSS();
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载会员详情页面专用CSS
|
||||
*/
|
||||
function loadMemberDetailCSS() {
|
||||
if (!document.getElementById('memberDetailCSS')) {
|
||||
const link = document.createElement('link');
|
||||
link.id = 'memberDetailCSS';
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'css/member-detail.css';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看会员详情 - 从会员列表页面调用
|
||||
* @param {string} memberId - 会员ID
|
||||
*/
|
||||
function viewMemberDetail_Detail(memberId) {
|
||||
console.log('打开会员详情页面:', memberId);
|
||||
|
||||
// 获取会员数据
|
||||
const memberData = getMemberData(memberId);
|
||||
if (!memberData) {
|
||||
alert('会员信息不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
currentMemberData = memberData;
|
||||
|
||||
// 使用系统的openTab功能打开新标签页
|
||||
const tabTitle = `会员详情-${memberData.nickname}`;
|
||||
|
||||
// 检查是否已经打开了该会员的详情页
|
||||
const existingTab = Array.from(document.querySelectorAll('.tab')).find(tab =>
|
||||
tab.querySelector('span').textContent === tabTitle
|
||||
);
|
||||
|
||||
if (existingTab) {
|
||||
// 如果已存在，直接激活该标签页
|
||||
window.switchTab(existingTab.id);
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建自定义的会员详情标签页
|
||||
createMemberDetailTab(tabTitle, memberData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建会员详情标签页
|
||||
* @param {string} tabTitle - 标签页标题
|
||||
* @param {Object} memberData - 会员数据
|
||||
*/
|
||||
async function createMemberDetailTab(tabTitle, memberData) {
|
||||
try {
|
||||
// 使用全局的tab计数器
|
||||
window.tabCounter++;
|
||||
const tabId = `tab-${window.tabCounter}`;
|
||||
const contentId = `content-${window.tabCounter}`;
|
||||
|
||||
// 创建新的tab
|
||||
const tabBar = document.querySelector('.tab-bar');
|
||||
const newTab = document.createElement('div');
|
||||
newTab.className = 'tab';
|
||||
newTab.id = tabId;
|
||||
newTab.innerHTML = `
|
||||
<span>${tabTitle}</span>
|
||||
<button class="close-btn" onclick="closeTab('${tabId}')" aria-label="关闭">×</button>
|
||||
`;
|
||||
|
||||
// 添加点击事件
|
||||
newTab.addEventListener('click', function(e) {
|
||||
if (!e.target.classList.contains('close-btn')) {
|
||||
window.switchTab(tabId);
|
||||
}
|
||||
});
|
||||
|
||||
tabBar.appendChild(newTab);
|
||||
|
||||
// 创建对应的内容区域
|
||||
const contentArea = document.querySelector('.content-area');
|
||||
const newContent = document.createElement('div');
|
||||
newContent.className = 'tab-content';
|
||||
newContent.id = contentId;
|
||||
|
||||
// 先加载CSS样式
|
||||
loadMemberDetailCSS();
|
||||
|
||||
// 加载HTML内容
|
||||
const response = await fetch('pages/member-detail.html');
|
||||
const htmlContent = await response.text();
|
||||
newContent.innerHTML = htmlContent;
|
||||
|
||||
contentArea.appendChild(newContent);
|
||||
|
||||
// 更新页面内容为具体会员数据
|
||||
updateMemberDetailContent(newContent, memberData);
|
||||
|
||||
// 初始化标签页功能
|
||||
initDetailTabs(newContent);
|
||||
|
||||
// 激活新创建的tab
|
||||
window.switchTab(tabId);
|
||||
|
||||
} catch (error) {
|
||||
console.error('创建会员详情标签页失败:', error);
|
||||
alert('打开会员详情失败，请重试');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新会员详情页面内容
|
||||
* @param {HTMLElement} container - 页面容器
|
||||
* @param {Object} memberData - 会员数据
|
||||
*/
|
||||
function updateMemberDetailContent(container, memberData) {
|
||||
// 更新标题
|
||||
const title = container.querySelector('.detail-header h2');
|
||||
if (title) {
|
||||
title.textContent = `会员详情-${memberData.nickname}`;
|
||||
}
|
||||
|
||||
// 更新头像
|
||||
const avatar = container.querySelector('.avatar');
|
||||
if (avatar) {
|
||||
avatar.textContent = memberData.nickname.charAt(0);
|
||||
avatar.className = `avatar large-avatar ${memberData.avatarClass}`;
|
||||
}
|
||||
|
||||
// 更新基本信息
|
||||
const nameEl = container.querySelector('.member-name');
|
||||
if (nameEl) nameEl.textContent = memberData.nickname;
|
||||
|
||||
const idEl = container.querySelector('.member-id');
|
||||
if (idEl) idEl.textContent = `会员系统编号：${memberData.systemId}`;
|
||||
|
||||
const phoneEl = container.querySelector('.member-phone');
|
||||
if (phoneEl) phoneEl.textContent = `会员手机号：${memberData.phone}`;
|
||||
|
||||
const birthEl = container.querySelector('.member-birth');
|
||||
if (birthEl) birthEl.textContent = `会员生日：${memberData.birthday}`;
|
||||
|
||||
// 更新资产信息
|
||||
const growthValue = container.querySelector('.asset-item:nth-child(1) .asset-value');
|
||||
if (growthValue) growthValue.textContent = memberData.growthValue;
|
||||
|
||||
const pointsValue = container.querySelector('.asset-item:nth-child(2) .asset-value');
|
||||
if (pointsValue) pointsValue.textContent = memberData.points;
|
||||
|
||||
const couponsValue = container.querySelector('.asset-item:nth-child(3) .asset-value');
|
||||
if (couponsValue) couponsValue.textContent = memberData.coupons;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化详情标签页功能
|
||||
* @param {HTMLElement} container - 页面容器
|
||||
*/
|
||||
function initDetailTabs(container) {
|
||||
// 确保成长值明细标签页默认激活
|
||||
const growthTab = container.querySelector('#growthTab');
|
||||
const pointsTab = container.querySelector('#pointsTab');
|
||||
const growthHeader = container.querySelector('.tab-header:first-child');
|
||||
const pointsHeader = container.querySelector('.tab-header:last-child');
|
||||
|
||||
if (growthTab && pointsTab && growthHeader && pointsHeader) {
|
||||
growthTab.classList.add('active');
|
||||
pointsTab.classList.remove('active');
|
||||
growthHeader.classList.add('active');
|
||||
pointsHeader.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换详情标签页
|
||||
* @param {Event} event - 点击事件
|
||||
* @param {string} tabName - 标签页名称
|
||||
*/
|
||||
function switchDetailTab(event, tabName) {
|
||||
const container = event.target.closest('.page-content');
|
||||
if (!container) return;
|
||||
|
||||
// 移除所有激活状态
|
||||
const allHeaders = container.querySelectorAll('.tab-header');
|
||||
const allContents = container.querySelectorAll('.tab-content');
|
||||
|
||||
allHeaders.forEach(header => header.classList.remove('active'));
|
||||
allContents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
// 激活当前标签页
|
||||
event.target.classList.add('active');
|
||||
|
||||
const targetTab = container.querySelector(`#${tabName}Tab`);
|
||||
if (targetTab) {
|
||||
targetTab.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭会员详情标签页
|
||||
*/
|
||||
function closeMemberDetailTab() {
|
||||
// 获取当前活动的标签页
|
||||
const activeTab = document.querySelector('.tab-item.active');
|
||||
if (activeTab) {
|
||||
const tabId = activeTab.getAttribute('data-tab');
|
||||
closeTab(tabId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取会员数据 - 模拟数据
|
||||
* @param {string} memberId - 会员ID
|
||||
* @returns {Object|null} 会员数据
|
||||
*/
|
||||
function getMemberData(memberId) {
|
||||
const mockMembers = {
|
||||
'M001': {
|
||||
id: 'M001',
|
||||
nickname: '张三',
|
||||
systemId: '二',
|
||||
phone: '138****1234',
|
||||
birthday: '1990-05-15',
|
||||
avatarClass: 'green-avatar',
|
||||
growthValue: 1250,
|
||||
points: 890,
|
||||
coupons: 5,
|
||||
level: 'LV2',
|
||||
store: '时尚服装店',
|
||||
registerTime: '2024-01-15 14:30:25'
|
||||
},
|
||||
'M002': {
|
||||
id: 'M002',
|
||||
nickname: '李四',
|
||||
systemId: '三',
|
||||
phone: '139****5678',
|
||||
birthday: '1985-08-20',
|
||||
avatarClass: 'orange-avatar',
|
||||
growthValue: 800,
|
||||
points: 650,
|
||||
coupons: 3,
|
||||
level: 'LV1',
|
||||
store: '数码电子城',
|
||||
registerTime: '2024-02-20 09:15:30'
|
||||
},
|
||||
'M003': {
|
||||
id: 'M003',
|
||||
nickname: '王五',
|
||||
systemId: '四',
|
||||
phone: '136****9012',
|
||||
birthday: '1992-12-08',
|
||||
avatarClass: 'red-avatar',
|
||||
growthValue: 1850,
|
||||
points: 1200,
|
||||
coupons: 8,
|
||||
level: 'LV3',
|
||||
store: '美食餐厅',
|
||||
registerTime: '2024-03-10 16:45:12'
|
||||
},
|
||||
'M004': {
|
||||
id: 'M004',
|
||||
nickname: '赵六',
|
||||
systemId: '五',
|
||||
phone: '137****3456',
|
||||
birthday: '1988-03-25',
|
||||
avatarClass: 'purple-avatar',
|
||||
growthValue: 600,
|
||||
points: 420,
|
||||
coupons: 2,
|
||||
level: 'LV1',
|
||||
store: '家居生活馆',
|
||||
registerTime: '2024-04-05 11:20:45'
|
||||
},
|
||||
'M005': {
|
||||
id: 'M005',
|
||||
nickname: '孙七',
|
||||
systemId: '六',
|
||||
phone: '135****7890',
|
||||
birthday: '1995-07-12',
|
||||
avatarClass: 'pink-avatar',
|
||||
growthValue: 2500,
|
||||
points: 1800,
|
||||
coupons: 12,
|
||||
level: 'LV4',
|
||||
store: '运动健身店',
|
||||
registerTime: '2024-05-22 13:55:18'
|
||||
},
|
||||
'M006': {
|
||||
id: 'M006',
|
||||
nickname: '周八',
|
||||
systemId: '七',
|
||||
phone: '134****2468',
|
||||
birthday: '1991-11-30',
|
||||
avatarClass: 'blue-avatar',
|
||||
growthValue: 1100,
|
||||
points: 750,
|
||||
coupons: 4,
|
||||
level: 'LV2',
|
||||
store: '时尚服装店',
|
||||
registerTime: '2024-06-18 08:35:22'
|
||||
}
|
||||
};
|
||||
|
||||
return mockMembers[memberId] || null;
|
||||
}
|
||||
|
||||
// 暴露全局函数
|
||||
window.viewMemberDetail_Detail = viewMemberDetail_Detail;
|
||||
window.switchDetailTab = switchDetailTab;
|
||||
window.closeMemberDetailTab = closeMemberDetailTab;
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
/**
|
||||
* 会员查看页面功能
|
||||
* 会员列表的查看、筛选和分页功能
|
||||
*/
|
||||
|
||||
// 页面初始化函数（必需）
|
||||
function initMemberView() {
|
||||
console.log('会员查看页面已初始化');
|
||||
loadMemberViewCSS();
|
||||
initMemberTable();
|
||||
bindMemberEvents();
|
||||
}
|
||||
|
||||
// 加载专用CSS
|
||||
function loadMemberViewCSS() {
|
||||
if (!document.getElementById('memberViewCSS')) {
|
||||
const link = document.createElement('link');
|
||||
link.id = 'memberViewCSS';
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'css/member-view.css';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化会员表格
|
||||
function initMemberTable() {
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.addEventListener('change', toggleSelectAll);
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
function bindMemberEvents() {
|
||||
// 筛选查询按钮事件已在HTML中绑定onclick
|
||||
|
||||
// 分页大小改变事件
|
||||
const pageSizeSelect = document.getElementById('pageSize');
|
||||
if (pageSizeSelect) {
|
||||
pageSizeSelect.addEventListener('change', handlePageSizeChange);
|
||||
}
|
||||
}
|
||||
|
||||
// 全选切换
|
||||
function toggleSelectAll() {
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
const memberCheckboxes = document.querySelectorAll('#memberTableBody input[type="checkbox"]');
|
||||
|
||||
memberCheckboxes.forEach(checkbox => {
|
||||
checkbox.checked = selectAllCheckbox.checked;
|
||||
});
|
||||
}
|
||||
|
||||
// 筛选查询功能
|
||||
function searchMembers() {
|
||||
const storeFilter = document.getElementById('storeFilter').value;
|
||||
const nicknameFilter = document.getElementById('nicknameFilter').value;
|
||||
const levelFilter = document.getElementById('levelFilter').value;
|
||||
const registrationDate = document.getElementById('registrationDate').value;
|
||||
|
||||
console.log('筛选条件:', {
|
||||
store: storeFilter,
|
||||
nickname: nicknameFilter,
|
||||
level: levelFilter,
|
||||
date: registrationDate
|
||||
});
|
||||
|
||||
// 这里实现筛选逻辑
|
||||
filterMemberTable(storeFilter, nicknameFilter, levelFilter, registrationDate);
|
||||
}
|
||||
|
||||
// 筛选表格数据
|
||||
function filterMemberTable(store, nickname, level, date) {
|
||||
const tableBody = document.getElementById('memberTableBody');
|
||||
const rows = tableBody.querySelectorAll('tr');
|
||||
|
||||
rows.forEach(row => {
|
||||
let showRow = true;
|
||||
|
||||
// 店铺筛选
|
||||
if (store && row.cells[1].textContent !== store) {
|
||||
showRow = false;
|
||||
}
|
||||
|
||||
// 昵称筛选
|
||||
if (nickname && !row.cells[4].textContent.toLowerCase().includes(nickname.toLowerCase())) {
|
||||
showRow = false;
|
||||
}
|
||||
|
||||
// 等级筛选
|
||||
if (level && !row.cells[6].textContent.includes(level)) {
|
||||
showRow = false;
|
||||
}
|
||||
|
||||
// 日期筛选（简单日期匹配）
|
||||
if (date && !row.cells[8].textContent.includes(date)) {
|
||||
showRow = false;
|
||||
}
|
||||
|
||||
row.style.display = showRow ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// 查看会员详情
|
||||
function viewMemberDetail(memberId) {
|
||||
console.log('查看会员详情:', memberId);
|
||||
|
||||
// 先加载会员详情模块
|
||||
loadMemberDetailModule().then(() => {
|
||||
// 调用会员详情模块的函数
|
||||
if (window.viewMemberDetail_Detail) {
|
||||
window.viewMemberDetail_Detail(memberId);
|
||||
} else {
|
||||
console.error('会员详情模块未正确加载');
|
||||
alert('页面加载失败，请重试');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('加载会员详情模块失败:', error);
|
||||
alert('页面加载失败，请重试');
|
||||
});
|
||||
}
|
||||
|
||||
// 动态加载会员详情模块
|
||||
async function loadMemberDetailModule() {
|
||||
// 检查是否已经加载
|
||||
if (window.memberDetailModuleLoaded) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = 'js/member-detail.js';
|
||||
script.onload = () => {
|
||||
window.memberDetailModuleLoaded = true;
|
||||
resolve();
|
||||
};
|
||||
script.onerror = () => {
|
||||
reject(new Error('Failed to load member-detail.js'));
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
// 处理分页大小改变
|
||||
function handlePageSizeChange() {
|
||||
const pageSize = document.getElementById('pageSize').value;
|
||||
console.log('分页大小改为:', pageSize);
|
||||
|
||||
// 这里实现分页逻辑
|
||||
// 实际项目中会重新请求数据或重新分页显示
|
||||
}
|
||||
|
||||
// 排序功能
|
||||
function sortTable(columnIndex, sortType = 'asc') {
|
||||
const table = document.querySelector('.member-table');
|
||||
const tbody = table.querySelector('tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const aValue = a.cells[columnIndex].textContent.trim();
|
||||
const bValue = b.cells[columnIndex].textContent.trim();
|
||||
|
||||
if (sortType === 'asc') {
|
||||
return aValue.localeCompare(bValue, 'zh-CN');
|
||||
} else {
|
||||
return bValue.localeCompare(aValue, 'zh-CN');
|
||||
}
|
||||
});
|
||||
|
||||
// 重新插入排序后的行
|
||||
rows.forEach(row => tbody.appendChild(row));
|
||||
}
|
||||
|
||||
// 重置筛选条件
|
||||
function resetFilters() {
|
||||
document.getElementById('storeFilter').value = '';
|
||||
document.getElementById('nicknameFilter').value = '';
|
||||
document.getElementById('levelFilter').value = '';
|
||||
document.getElementById('registrationDate').value = '';
|
||||
|
||||
// 显示所有行
|
||||
const tableBody = document.getElementById('memberTableBody');
|
||||
const rows = tableBody.querySelectorAll('tr');
|
||||
rows.forEach(row => {
|
||||
row.style.display = '';
|
||||
});
|
||||
}
|
||||
|
||||
// 暴露到全局作用域供HTML调用
|
||||
window.searchMembers = searchMembers;
|
||||
window.viewMemberDetail = viewMemberDetail;
|
||||
window.resetFilters = resetFilters;
|
||||
window.sortTable = sortTable;
|
||||
|
||||
// 页面清理函数（可选）
|
||||
function cleanupMemberView() {
|
||||
// 清理事件监听器等
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
if (selectAllCheckbox) {
|
||||
selectAllCheckbox.removeEventListener('change', toggleSelectAll);
|
||||
}
|
||||
|
||||
const pageSizeSelect = document.getElementById('pageSize');
|
||||
if (pageSizeSelect) {
|
||||
pageSizeSelect.removeEventListener('change', handlePageSizeChange);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<div class="page-content">
|
||||
<div class="detail-header">
|
||||
<h2>会员详情-张三</h2>
|
||||
<button class="btn btn-secondary close-btn" onclick="closeMemberDetailTab()">关闭</button>
|
||||
</div>
|
||||
|
||||
<!-- 会员基本信息 -->
|
||||
<div class="member-info-card">
|
||||
<div class="member-info-header">
|
||||
<h3>会员信息</h3>
|
||||
</div>
|
||||
<div class="member-info-content">
|
||||
<div class="member-basic">
|
||||
<div class="member-avatar-section">
|
||||
<div class="avatar large-avatar green-avatar">张</div>
|
||||
<div class="member-basic-info">
|
||||
<div class="member-name">张三</div>
|
||||
<div class="member-id">会员系统编号：二</div>
|
||||
<div class="member-phone">会员手机号：138****1234</div>
|
||||
<div class="member-birth">会员生日：1990-05-15</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="member-assets">
|
||||
<div class="asset-item">
|
||||
<div class="asset-icon growth-icon"></div>
|
||||
<div class="asset-info">
|
||||
<div class="asset-label">会员成长值</div>
|
||||
<div class="asset-value">1250</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asset-item">
|
||||
<div class="asset-icon points-icon"></div>
|
||||
<div class="asset-info">
|
||||
<div class="asset-label">会员积分</div>
|
||||
<div class="asset-value">890</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asset-item">
|
||||
<div class="asset-icon coupon-icon"></div>
|
||||
<div class="asset-info">
|
||||
<div class="asset-label">会员优惠券</div>
|
||||
<div class="asset-value">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情标签页 -->
|
||||
<div class="detail-tabs">
|
||||
<div class="tab-headers">
|
||||
<button class="tab-header active" onclick="switchDetailTab(event, 'growth')">会员成长值明细</button>
|
||||
<button class="tab-header" onclick="switchDetailTab(event, 'points')">会员积分明细</button>
|
||||
</div>
|
||||
|
||||
<!-- 会员成长值明细 -->
|
||||
<div id="growthTab" class="tab-content active">
|
||||
<div class="table-container">
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>变化时间</th>
|
||||
<th>成长值变动</th>
|
||||
<th>关联订单</th>
|
||||
<th>详情</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2025-07-24 17:20</td>
|
||||
<td class="positive">+35</td>
|
||||
<td>ORD9296</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-07-12 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-07-10 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-29 17:20</td>
|
||||
<td class="positive">+20</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-17 17:20</td>
|
||||
<td class="positive">+55</td>
|
||||
<td>ORD2063</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-02 17:20</td>
|
||||
<td class="positive">+20</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-20 17:20</td>
|
||||
<td class="positive">+81</td>
|
||||
<td>ORD5387</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-16 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-10 17:20</td>
|
||||
<td class="positive">+50</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-04 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-25 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-18 17:20</td>
|
||||
<td class="positive">+50</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-16 17:20</td>
|
||||
<td class="positive">+20</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-04 17:20</td>
|
||||
<td class="positive">+20</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-01 17:20</td>
|
||||
<td class="positive">+10</td>
|
||||
<td>ORD3911</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-03-24 17:20</td>
|
||||
<td class="positive">+20</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-03-10 17:20</td>
|
||||
<td class="positive">+95</td>
|
||||
<td>ORD8321</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-02-28 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-02-18 17:20</td>
|
||||
<td class="positive">+100</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-02-04 17:20</td>
|
||||
<td class="positive">+20</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-footer">
|
||||
<span>共 20 条记录</span>
|
||||
<div class="table-pagination">
|
||||
<span>上一页</span>
|
||||
<span>第 1 页，共 1 页</span>
|
||||
<span>下一页</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 会员积分明细 -->
|
||||
<div id="pointsTab" class="tab-content">
|
||||
<div class="table-container">
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>变化时间</th>
|
||||
<th>积分变动</th>
|
||||
<th>关联订单</th>
|
||||
<th>详情</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2025-07-24 17:20</td>
|
||||
<td class="positive">+25</td>
|
||||
<td>ORD9296</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-07-20 15:30</td>
|
||||
<td class="negative">-50</td>
|
||||
<td>兑换商品</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-07-12 17:20</td>
|
||||
<td class="positive">+80</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-07-10 17:20</td>
|
||||
<td class="positive">+60</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-29 17:20</td>
|
||||
<td class="positive">+15</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-25 14:20</td>
|
||||
<td class="negative">-100</td>
|
||||
<td>兑换优惠券</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-17 17:20</td>
|
||||
<td class="positive">+45</td>
|
||||
<td>ORD2063</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-06-02 17:20</td>
|
||||
<td class="positive">+15</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-20 17:20</td>
|
||||
<td class="positive">+65</td>
|
||||
<td>ORD5387</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-16 17:20</td>
|
||||
<td class="positive">+80</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-12 10:30</td>
|
||||
<td class="negative">-30</td>
|
||||
<td>兑换商品</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-10 17:20</td>
|
||||
<td class="positive">+40</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-05-04 17:20</td>
|
||||
<td class="positive">+80</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-25 17:20</td>
|
||||
<td class="positive">+70</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-18 17:20</td>
|
||||
<td class="positive">+35</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-16 17:20</td>
|
||||
<td class="positive">+15</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-04 17:20</td>
|
||||
<td class="positive">+15</td>
|
||||
<td>无</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-01 17:20</td>
|
||||
<td class="positive">+8</td>
|
||||
<td>ORD3911</td>
|
||||
<td><a href="#" class="detail-link">详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-footer">
|
||||
<span>共 18 条记录</span>
|
||||
<div class="table-pagination">
|
||||
<span>上一页</span>
|
||||
<span>第 1 页，共 1 页</span>
|
||||
<span>下一页</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,70 +1,173 @@
|
|||
<div class="page-content">
|
||||
<h2>会员查看</h2>
|
||||
<div class="form-group">
|
||||
<label>搜索会员:</label>
|
||||
<input type="text" placeholder="请输入会员姓名或手机号">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>会员等级:</label>
|
||||
<select>
|
||||
<option value="">全部等级</option>
|
||||
<option value="normal">普通会员</option>
|
||||
<option value="silver">银牌会员</option>
|
||||
<option value="gold">金牌会员</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">搜索</button>
|
||||
<button class="btn">重置</button>
|
||||
<h2>会员列表</h2>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>会员ID</th>
|
||||
<th>姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>等级</th>
|
||||
<th>积分</th>
|
||||
<th>注册时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>M001</td>
|
||||
<td>张小明</td>
|
||||
<td>138****1234</td>
|
||||
<td>金牌会员</td>
|
||||
<td>8,500</td>
|
||||
<td>2024-01-15</td>
|
||||
<td>
|
||||
<button class="btn">查看详情</button>
|
||||
<button class="btn">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>M002</td>
|
||||
<td>李小红</td>
|
||||
<td>139****5678</td>
|
||||
<td>银牌会员</td>
|
||||
<td>2,300</td>
|
||||
<td>2024-02-20</td>
|
||||
<td>
|
||||
<button class="btn">查看详情</button>
|
||||
<button class="btn">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>M003</td>
|
||||
<td>王小刚</td>
|
||||
<td>137****9012</td>
|
||||
<td>普通会员</td>
|
||||
<td>450</td>
|
||||
<td>2024-03-10</td>
|
||||
<td>
|
||||
<button class="btn">查看详情</button>
|
||||
<button class="btn">编辑</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<label>店铺</label>
|
||||
<select id="storeFilter">
|
||||
<option value="">全部店铺</option>
|
||||
<option value="时尚服装店">时尚服装店</option>
|
||||
<option value="数码电子城">数码电子城</option>
|
||||
<option value="美食餐厅">美食餐厅</option>
|
||||
<option value="家居生活馆">家居生活馆</option>
|
||||
<option value="运动健身店">运动健身店</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>用户昵称</label>
|
||||
<input type="text" id="nicknameFilter" placeholder="请输入用户昵称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>会员等级</label>
|
||||
<select id="levelFilter">
|
||||
<option value="">全部等级</option>
|
||||
<option value="LV1">LV1</option>
|
||||
<option value="LV2">LV2</option>
|
||||
<option value="LV3">LV3</option>
|
||||
<option value="LV4">LV4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>注册时间</label>
|
||||
<input type="date" id="registrationDate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button class="btn btn-primary" onclick="searchMembers()">筛选查询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-item">
|
||||
<div class="stats-icon member-icon"></div>
|
||||
<div class="stats-content">
|
||||
<div class="stats-label">会员总数</div>
|
||||
<div class="stats-value">1,247</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<div class="stats-icon new-member-icon"></div>
|
||||
<div class="stats-content">
|
||||
<div class="stats-label">今日新增</div>
|
||||
<div class="stats-value">23</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 会员列表表格 -->
|
||||
<div class="table-container">
|
||||
<table class="member-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" id="selectAll"></th>
|
||||
<th>所属摊位 <span class="sort-icon">↕</span></th>
|
||||
<th>用户ID <span class="sort-icon">↕</span></th>
|
||||
<th>用户头像</th>
|
||||
<th>用户昵称 <span class="sort-icon">↕</span></th>
|
||||
<th>手机号</th>
|
||||
<th>会员等级 <span class="sort-icon">↕</span></th>
|
||||
<th>生日</th>
|
||||
<th>注册时间 <span class="sort-icon">↕</span></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="memberTableBody">
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>时尚服装店</td>
|
||||
<td>M001</td>
|
||||
<td><div class="avatar green-avatar">张</div></td>
|
||||
<td>张三</td>
|
||||
<td>138****1234</td>
|
||||
<td><span class="level-badge lv2">LV2</span></td>
|
||||
<td>1990-05-15</td>
|
||||
<td>2024-01-15 14:30:25</td>
|
||||
<td><a href="#" class="detail-link" onclick="viewMemberDetail('M001')">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>数码电子城</td>
|
||||
<td>M002</td>
|
||||
<td><div class="avatar orange-avatar">李</div></td>
|
||||
<td>李四</td>
|
||||
<td>139****5678</td>
|
||||
<td><span class="level-badge lv1">LV1</span></td>
|
||||
<td>1985-08-20</td>
|
||||
<td>2024-02-20 09:15:30</td>
|
||||
<td><a href="#" class="detail-link" onclick="viewMemberDetail('M002')">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>美食餐厅</td>
|
||||
<td>M003</td>
|
||||
<td><div class="avatar red-avatar">王</div></td>
|
||||
<td>王五</td>
|
||||
<td>136****9012</td>
|
||||
<td><span class="level-badge lv3">LV3</span></td>
|
||||
<td>1992-12-08</td>
|
||||
<td>2024-03-10 16:45:12</td>
|
||||
<td><a href="#" class="detail-link" onclick="viewMemberDetail('M003')">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>家居生活馆</td>
|
||||
<td>M004</td>
|
||||
<td><div class="avatar purple-avatar">赵</div></td>
|
||||
<td>赵六</td>
|
||||
<td>137****3456</td>
|
||||
<td><span class="level-badge lv1">LV1</span></td>
|
||||
<td>1988-03-25</td>
|
||||
<td>2024-04-05 11:20:45</td>
|
||||
<td><a href="#" class="detail-link" onclick="viewMemberDetail('M004')">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>运动健身店</td>
|
||||
<td>M005</td>
|
||||
<td><div class="avatar pink-avatar">孙</div></td>
|
||||
<td>孙七</td>
|
||||
<td>135****7890</td>
|
||||
<td><span class="level-badge lv4">LV4</span></td>
|
||||
<td>1995-07-12</td>
|
||||
<td>2024-05-22 13:55:18</td>
|
||||
<td><a href="#" class="detail-link" onclick="viewMemberDetail('M005')">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>时尚服装店</td>
|
||||
<td>M006</td>
|
||||
<td><div class="avatar blue-avatar">周</div></td>
|
||||
<td>周八</td>
|
||||
<td>134****2468</td>
|
||||
<td><span class="level-badge lv2">LV2</span></td>
|
||||
<td>1991-11-30</td>
|
||||
<td>2024-06-18 08:35:22</td>
|
||||
<td><a href="#" class="detail-link" onclick="viewMemberDetail('M006')">详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-section">
|
||||
<div class="pagination-info">
|
||||
显示
|
||||
<select id="pageSize">
|
||||
<option value="20" selected>20</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
条记录，共 1,247 条
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<span>首页</span>
|
||||
<span>上一页</span>
|
||||
<span>第 <input type="number" value="1" min="1" max="63"> 页，共 63 页</span>
|
||||
<span>下一页</span>
|
||||
<span>尾页</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue