324 lines
9.9 KiB
JavaScript
324 lines
9.9 KiB
JavaScript
|
/**
|
|||
|
|
* 会员详情页面功能
|
|||
|
|
* 包含会员信息展示、成长值明细、积分明细等功能
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 当前会员数据
|
|||
|
|
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;
|