343 lines
12 KiB
JavaScript
343 lines
12 KiB
JavaScript
// 等级编辑页面 - H5版本
|
||
|
||
let currentStallName = '';
|
||
let levelData = [];
|
||
|
||
// 获取URL参数
|
||
function getUrlParameter(name) {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get(name) || '';
|
||
}
|
||
|
||
// 页面初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
currentStallName = decodeURIComponent(getUrlParameter('stall'));
|
||
|
||
if (currentStallName) {
|
||
document.getElementById('page-title').textContent = `${currentStallName} - 等级编辑`;
|
||
}
|
||
|
||
loadLevelEditData();
|
||
});
|
||
|
||
// 加载等级编辑数据
|
||
function loadLevelEditData() {
|
||
// 模拟等级编辑数据
|
||
levelData = [
|
||
{
|
||
level: 'LV1',
|
||
name: '铜牌会员',
|
||
growthMin: 0,
|
||
growthMax: 100,
|
||
memberDiscount: true,
|
||
discountRate: 5,
|
||
pointExchange: false,
|
||
birthdayCoupon: false,
|
||
birthdayDoublePoints: false
|
||
},
|
||
{
|
||
level: 'LV2',
|
||
name: '银牌会员',
|
||
growthMin: 101,
|
||
growthMax: 500,
|
||
memberDiscount: true,
|
||
discountRate: 10,
|
||
pointExchange: true,
|
||
birthdayCoupon: true,
|
||
birthdayDoublePoints: true
|
||
},
|
||
{
|
||
level: 'LV3',
|
||
name: '金牌会员',
|
||
growthMin: 501,
|
||
growthMax: 1200,
|
||
memberDiscount: true,
|
||
discountRate: 15,
|
||
pointExchange: true,
|
||
birthdayCoupon: true,
|
||
birthdayDoublePoints: true
|
||
},
|
||
{
|
||
level: 'LV4',
|
||
name: '钻石会员',
|
||
growthMin: 1201,
|
||
growthMax: 9999,
|
||
memberDiscount: true,
|
||
discountRate: 20,
|
||
pointExchange: true,
|
||
birthdayCoupon: true,
|
||
birthdayDoublePoints: true
|
||
}
|
||
];
|
||
|
||
renderTable();
|
||
}
|
||
|
||
// 渲染表格
|
||
function renderTable() {
|
||
const tableBody = document.getElementById('level-edit-table');
|
||
let html = '';
|
||
|
||
levelData.forEach((level, index) => {
|
||
// 主行
|
||
html += `
|
||
<tr>
|
||
<td>${level.level}</td>
|
||
<td>
|
||
<input type="text" value="${level.name}" id="levelName_${index}"
|
||
style="width: 100%; padding: 5px; border: 1px solid #ddd;">
|
||
</td>
|
||
<td>
|
||
<button class="expand-btn" onclick="toggleLevelDetail(${index})" id="expandBtn_${index}">
|
||
展开详情
|
||
</button>
|
||
</td>
|
||
</tr>`;
|
||
|
||
// 详情行（默认隐藏）
|
||
html += `
|
||
<tr id="detailRow_${index}" class="level-detail-row hidden">
|
||
<td colspan="3">
|
||
<div class="level-detail-content">
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">成长值范围</div>
|
||
<div class="detail-input">
|
||
<input type="number" value="${level.growthMin}" id="growthMin_${index}" style="width:60px;">
|
||
-
|
||
<input type="number" value="${level.growthMax}" id="growthMax_${index}" style="width:60px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">开启会员折扣</div>
|
||
<div class="detail-input">
|
||
<label class="switch">
|
||
<input type="checkbox" ${level.memberDiscount ? 'checked' : ''}
|
||
id="memberDiscount_${index}" onchange="toggleDiscountRate(${index})">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">折扣率(%)</div>
|
||
<div class="detail-input">
|
||
<input type="number" value="${level.discountRate}" id="discountRate_${index}"
|
||
${!level.memberDiscount ? 'disabled' : ''}>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">开启积分兑换</div>
|
||
<div class="detail-input">
|
||
<label class="switch">
|
||
<input type="checkbox" ${level.pointExchange ? 'checked' : ''} id="pointExchange_${index}">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">开启生日优惠券</div>
|
||
<div class="detail-input">
|
||
<label class="switch">
|
||
<input type="checkbox" ${level.birthdayCoupon ? 'checked' : ''}
|
||
id="birthdayCoupon_${index}" onchange="toggleCouponButton(${index})">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">生日优惠券设置</div>
|
||
<div class="detail-input">
|
||
<button class="btn btn-small ${!level.birthdayCoupon ? 'hidden' : ''}"
|
||
id="addCouponBtn_${index}" onclick="addBirthdayCoupon(${index})">
|
||
添加优惠券
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-form-group">
|
||
<div class="detail-label">开启生日双倍积分</div>
|
||
<div class="detail-input">
|
||
<label class="switch">
|
||
<input type="checkbox" ${level.birthdayDoublePoints ? 'checked' : ''}
|
||
id="birthdayDoublePoints_${index}">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-actions">
|
||
${index === levelData.length - 1 ? `
|
||
<button class="btn btn-primary" onclick="addNewLevel()" style="margin-right: 10px;">
|
||
添加新等级
|
||
</button>
|
||
<button class="btn" style="background: #f44336; color: white;" onclick="deleteLevel(${index})">
|
||
删除等级
|
||
</button>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>`;
|
||
});
|
||
|
||
tableBody.innerHTML = html;
|
||
}
|
||
|
||
// 切换等级详情展开/收缩
|
||
function toggleLevelDetail(index) {
|
||
const detailRow = document.getElementById(`detailRow_${index}`);
|
||
const expandBtn = document.getElementById(`expandBtn_${index}`);
|
||
|
||
if (detailRow.classList.contains('hidden')) {
|
||
// 展开
|
||
detailRow.classList.remove('hidden');
|
||
expandBtn.textContent = '收起详情';
|
||
expandBtn.style.background = '#ff9800';
|
||
} else {
|
||
// 收起
|
||
detailRow.classList.add('hidden');
|
||
expandBtn.textContent = '展开详情';
|
||
expandBtn.style.background = '#4CAF50';
|
||
}
|
||
}
|
||
|
||
// 切换折扣率输入框状态
|
||
function toggleDiscountRate(index) {
|
||
const checkbox = document.getElementById(`memberDiscount_${index}`);
|
||
const discountInput = document.getElementById(`discountRate_${index}`);
|
||
|
||
if (checkbox.checked) {
|
||
discountInput.disabled = false;
|
||
} else {
|
||
discountInput.disabled = true;
|
||
}
|
||
}
|
||
|
||
// 切换优惠券按钮显示
|
||
function toggleCouponButton(index) {
|
||
const checkbox = document.getElementById(`birthdayCoupon_${index}`);
|
||
const addButton = document.getElementById(`addCouponBtn_${index}`);
|
||
|
||
if (checkbox.checked) {
|
||
addButton.classList.remove('hidden');
|
||
} else {
|
||
addButton.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// 添加生日优惠券
|
||
function addBirthdayCoupon(index) {
|
||
const modal = document.getElementById('coupon-modal');
|
||
modal.classList.remove('hidden');
|
||
resetCouponForm();
|
||
}
|
||
|
||
// 关闭优惠券弹窗
|
||
function closeCouponModal(event) {
|
||
// 如果event存在且点击的不是背景区域，则不关闭
|
||
if (event && event.target !== event.currentTarget) {
|
||
return;
|
||
}
|
||
|
||
const modal = document.getElementById('coupon-modal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// 重置优惠券表单
|
||
function resetCouponForm() {
|
||
document.getElementById('coupon-name').value = '生日优惠券';
|
||
document.getElementById('coupon-threshold').value = '10';
|
||
document.getElementById('coupon-discount').value = '1';
|
||
document.getElementById('coupon-validity').value = '1';
|
||
}
|
||
|
||
// 提交优惠券
|
||
function submitCoupon() {
|
||
const couponData = {
|
||
name: document.getElementById('coupon-name').value,
|
||
threshold: document.getElementById('coupon-threshold').value,
|
||
discount: document.getElementById('coupon-discount').value,
|
||
validity: document.getElementById('coupon-validity').value
|
||
};
|
||
|
||
if (!couponData.name.trim()) {
|
||
showNotification('请输入优惠券名称', 'error');
|
||
return;
|
||
}
|
||
|
||
if (parseInt(couponData.discount) >= parseInt(couponData.threshold)) {
|
||
showNotification('减免金额不能大于或等于门槛金额', 'error');
|
||
return;
|
||
}
|
||
|
||
showNotification(`成功添加优惠券：${couponData.name}`, 'success');
|
||
closeCouponModal();
|
||
}
|
||
|
||
// 删除等级
|
||
function deleteLevel(index) {
|
||
if (levelData.length <= 1) {
|
||
showNotification('至少需要保留一个等级', 'warning');
|
||
return;
|
||
}
|
||
|
||
confirmAction('确定要删除这个等级吗？', () => {
|
||
levelData.splice(index, 1);
|
||
|
||
// 重新编号等级
|
||
levelData.forEach((level, i) => {
|
||
level.level = `LV${i + 1}`;
|
||
});
|
||
|
||
renderTable();
|
||
showNotification(`删除等级成功`, 'success');
|
||
});
|
||
}
|
||
|
||
// 添加新等级
|
||
function addNewLevel() {
|
||
const newLevelNum = levelData.length + 1;
|
||
const lastLevel = levelData[levelData.length - 1];
|
||
|
||
const newLevel = {
|
||
level: `LV${newLevelNum}`,
|
||
name: `新等级${newLevelNum}`,
|
||
growthMin: lastLevel.growthMax + 1,
|
||
growthMax: lastLevel.growthMax + 1000,
|
||
memberDiscount: true,
|
||
discountRate: Math.min(lastLevel.discountRate + 5, 50),
|
||
pointExchange: true,
|
||
birthdayCoupon: true,
|
||
birthdayDoublePoints: true
|
||
};
|
||
|
||
levelData.push(newLevel);
|
||
renderTable();
|
||
showNotification(`添加新等级 LV${newLevelNum}`, 'success');
|
||
}
|
||
|
||
// 提交编辑
|
||
function submitEdit() {
|
||
const message = currentStallName ?
|
||
`${currentStallName} 等级编辑已提交` :
|
||
'等级编辑已提交';
|
||
|
||
submitAndGoBack(message);
|
||
}
|
||
|
||
// 导出函数到全局
|
||
window.toggleLevelDetail = toggleLevelDetail;
|
||
window.toggleDiscountRate = toggleDiscountRate;
|
||
window.toggleCouponButton = toggleCouponButton;
|
||
window.addBirthdayCoupon = addBirthdayCoupon;
|
||
window.closeCouponModal = closeCouponModal;
|
||
window.submitCoupon = submitCoupon;
|
||
window.deleteLevel = deleteLevel;
|
||
window.addNewLevel = addNewLevel;
|
||
window.submitEdit = submitEdit; |