614 lines
21 KiB
JavaScript
614 lines
21 KiB
JavaScript
/**
|
||
* 会员详情页面功能
|
||
* 包含会员信息展示、成长值明细、积分明细等功能
|
||
*/
|
||
|
||
// 当前会员数据
|
||
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 = `
|
||
<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;
|
||
|
||
|
||
// 加载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 = `
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化原因:</div>
|
||
<div class="detail-value">订单消费</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">成长值增加:</div>
|
||
<div class="detail-value positive">${changeValue}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单编号:</div>
|
||
<div class="detail-value">${relatedOrder}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单总金额:</div>
|
||
<div class="detail-value">¥${generateOrderAmount()}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单归属据点:</div>
|
||
<div class="detail-value">${getRandomStore()}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">成长值受化:</div>
|
||
<div class="detail-value positive">${changeValue}</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
// 无关联订单的情况（系统奖励）
|
||
const reason = getSystemRewardReason();
|
||
detailContent = `
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化原因:</div>
|
||
<div class="detail-value">${reason}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">成长值增加:</div>
|
||
<div class="detail-value positive">${changeValue}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-description">${getRewardDescription(reason)}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
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 = `
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化原因:</div>
|
||
<div class="detail-value">订单消费</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">积分变动:</div>
|
||
<div class="detail-value ${changeValue.startsWith('+') ? 'positive' : 'negative'}">${changeValue}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单编号:</div>
|
||
<div class="detail-value">${relatedOrder}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单总金额:</div>
|
||
<div class="detail-value">¥${generateOrderAmount()}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">订单归属据点:</div>
|
||
<div class="detail-value">${getRandomStore()}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">积分受化:</div>
|
||
<div class="detail-value ${changeValue.startsWith('+') ? 'positive' : 'negative'}">${changeValue}</div>
|
||
</div>
|
||
`;
|
||
} else if (relatedOrder && (relatedOrder.includes('兑换'))) {
|
||
// 积分消耗的情况（兑换商品/优惠券）
|
||
const exchangeType = relatedOrder.includes('商品') ? '商品' : '优惠券';
|
||
const exchangeItem = getRandomExchangeItem(exchangeType);
|
||
detailContent = `
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化原因:</div>
|
||
<div class="detail-value">${relatedOrder}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">积分变动:</div>
|
||
<div class="detail-value ${changeValue.startsWith('+') ? 'positive' : 'negative'}">${changeValue}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">兑换${exchangeType}:</div>
|
||
<div class="detail-value">${exchangeItem}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">兑换数量:</div>
|
||
<div class="detail-value">1个</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-description">使用${Math.abs(parseInt(changeValue))}积分兑换${exchangeType}，兑换成功后积分将被扣除且不可退还。</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
// 无关联订单的情况（系统奖励）
|
||
const reason = getPointsRewardReason();
|
||
detailContent = `
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化原因:</div>
|
||
<div class="detail-value">${reason}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">变化时间:</div>
|
||
<div class="detail-value">${changeTime}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">积分变动:</div>
|
||
<div class="detail-value ${changeValue.startsWith('+') ? 'positive' : 'negative'}">${changeValue}</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-description">${getPointsRewardDescription(reason)}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
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; |