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