/**
* 会员详情页面功能
* 包含会员信息展示、成长值明细、积分明细等功能
*/
// 当前会员数据
let currentMemberData = null;
/**
* 初始化会员详情页面
*/
function initMemberDetail() {
console.log('会员详情页面已初始化');
}
/**
* 查看会员详情 - 从会员列表页面调用
* @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 = `
${tabTitle}
`;
// 添加点击事件
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;
// 加载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;
}
/**
* 显示成长值详情弹窗
* @param {string} changeTime - 变化时间
* @param {string} changeValue - 变化值
* @param {string} relatedOrder - 关联订单
*/
function showGrowthDetail(changeTime, changeValue, relatedOrder) {
const modal = document.getElementById('growthDetailModal');
const content = document.getElementById('growthDetailContent');
if (!modal || !content) return;
// 根据是否有关联订单生成不同的内容
let detailContent = '';
if (relatedOrder && relatedOrder !== '无') {
// 有关联订单的情况
detailContent = `
订单总金额:
¥${generateOrderAmount()}
订单归属据点:
${getRandomStore()}
`;
} else {
// 无关联订单的情况（系统奖励）
const reason = getSystemRewardReason();
detailContent = `
${getRewardDescription(reason)}
`;
}
content.innerHTML = detailContent;
modal.style.display = 'flex';
// 添加点击背景关闭功能
modal.onclick = function(e) {
if (e.target === modal) {
closeGrowthDetailModal();
}
};
}
/**
* 关闭成长值详情弹窗
*/
function closeGrowthDetailModal() {
const modal = document.getElementById('growthDetailModal');
if (modal) {
modal.style.display = 'none';
}
}
/**
* 生成随机订单金额
* @returns {string} 订单金额
*/
function generateOrderAmount() {
const amounts = ['270.54', '156.88', '89.99', '345.20', '128.50', '298.76', '199.99', '78.30'];
return amounts[Math.floor(Math.random() * amounts.length)];
}
/**
* 获取随机店铺
* @returns {string} 店铺名称
*/
function getRandomStore() {
const stores = ['美食餐厅', '时尚服装店', '数码电子城', '家居生活馆', '运动健身店'];
return stores[Math.floor(Math.random() * stores.length)];
}
/**
* 获取系统奖励原因
* @returns {string} 奖励原因
*/
function getSystemRewardReason() {
const reasons = ['生日奖励', '签到奖励', '活动奖励', '推荐奖励', '完善资料奖励'];
return reasons[Math.floor(Math.random() * reasons.length)];
}
/**
* 获取奖励描述
* @param {string} reason - 奖励原因
* @returns {string} 奖励描述
*/
function getRewardDescription(reason) {
const descriptions = {
'生日奖励': '会员生日当天系统自动发放的生日礼品成长值',
'签到奖励': '会员连续签到获得的成长值奖励',
'活动奖励': '参与平台活动获得的成长值奖励',
'推荐奖励': '成功推荐新会员注册获得的成长值奖励',
'完善资料奖励': '完善个人资料信息获得的成长值奖励'
};
return descriptions[reason] || '系统自动发放的成长值奖励';
}
/**
* 显示积分详情弹窗
* @param {string} changeTime - 变化时间
* @param {string} changeValue - 变化值
* @param {string} relatedOrder - 关联订单
*/
function showPointsDetail(changeTime, changeValue, relatedOrder) {
const modal = document.getElementById('pointsDetailModal');
const content = document.getElementById('pointsDetailContent');
if (!modal || !content) return;
// 根据变化值和关联订单生成不同的内容
let detailContent = '';
if (relatedOrder && relatedOrder !== '无' && !relatedOrder.includes('兑换')) {
// 有关联订单的情况（订单获得积分）
detailContent = `
订单总金额:
¥${generateOrderAmount()}
订单归属摊位:
${getRandomStore()}
`;
} else if (relatedOrder && (relatedOrder.includes('兑换'))) {
// 积分消耗的情况（兑换商品/优惠券）
const exchangeType = relatedOrder.includes('商品') ? '商品' : '优惠券';
const exchangeItem = getRandomExchangeItem(exchangeType);
detailContent = `
兑换${exchangeType}:
${exchangeItem}
使用${Math.abs(parseInt(changeValue))}积分兑换${exchangeType}，兑换成功后积分将被扣除且不可退还。
`;
} else {
// 无关联订单的情况（系统奖励）
const reason = getPointsRewardReason();
detailContent = `
${getPointsRewardDescription(reason)}
`;
}
content.innerHTML = detailContent;
modal.style.display = 'flex';
// 添加点击背景关闭功能
modal.onclick = function(e) {
if (e.target === modal) {
closePointsDetailModal();
}
};
}
/**
* 关闭积分详情弹窗
*/
function closePointsDetailModal() {
const modal = document.getElementById('pointsDetailModal');
if (modal) {
modal.style.display = 'none';
}
}
/**
* 获取随机兑换商品
* @param {string} type - 兑换类型（商品/优惠券）
* @returns {string} 兑换物品名称
*/
function getRandomExchangeItem(type) {
if (type === '商品') {
const items = ['精美水杯', '品牌T恤', '蓝牙耳机', '保温饭盒', '无线充电器', '护肤礼盒'];
return items[Math.floor(Math.random() * items.length)];
} else {
const coupons = ['满100减20优惠券', '8折通用优惠券', '满200减50优惠券', '新品9折优惠券', '免运费券'];
return coupons[Math.floor(Math.random() * coupons.length)];
}
}
/**
* 获取积分奖励原因
* @returns {string} 奖励原因
*/
function getPointsRewardReason() {
const reasons = ['签到奖励', '完成任务', '评价奖励', '邀请好友', '活动奖励', '每日任务'];
return reasons[Math.floor(Math.random() * reasons.length)];
}
/**
* 获取积分奖励描述
* @param {string} reason - 奖励原因
* @returns {string} 奖励描述
*/
function getPointsRewardDescription(reason) {
const descriptions = {
'签到奖励': '连续签到获得的积分奖励，每日签到可获得不同数量的积分',
'完成任务': '完成平台指定任务获得的积分奖励',
'评价奖励': '对购买商品进行评价后获得的积分奖励',
'邀请好友': '成功邀请好友注册并消费后获得的积分奖励',
'活动奖励': '参与平台活动获得的积分奖励',
'每日任务': '完成每日任务目标获得的积分奖励'
};
return descriptions[reason] || '系统自动发放的积分奖励';
}
// 暴露全局函数
window.viewMemberDetail_Detail = viewMemberDetail_Detail;
window.switchDetailTab = switchDetailTab;
window.closeMemberDetailTab = closeMemberDetailTab;
window.showGrowthDetail = showGrowthDetail;
window.closeGrowthDetailModal = closeGrowthDetailModal;
window.showPointsDetail = showPointsDetail;
window.closePointsDetailModal = closePointsDetailModal;