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