323 lines
11 KiB
JavaScript
323 lines
11 KiB
JavaScript
|
// 等级编辑页面的JavaScript逻辑
|
||
|
|
|
||
|
|
let currentShopName = '';
|
||
|
|
let currentLevels = [];
|
||
|
|
|
||
|
|
// 获取URL参数
|
||
|
|
function getUrlParameter(name) {
|
||
|
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||
|
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||
|
|
const results = regex.exec(location.search);
|
||
|
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
currentShopName = getUrlParameter('shop');
|
||
|
|
if (currentShopName) {
|
||
|
|
document.getElementById('page-title').textContent = `${currentShopName} - 等级编辑`;
|
||
|
|
loadLevelEditData();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 加载等级编辑数据
|
||
|
|
function loadLevelEditData() {
|
||
|
|
// 模拟等级编辑数据
|
||
|
|
currentLevels = [
|
||
|
|
{
|
||
|
|
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
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
renderLevelEditTable();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 渲染等级编辑表格
|
||
|
|
function renderLevelEditTable() {
|
||
|
|
const tableBody = document.getElementById('level-edit-table-body');
|
||
|
|
tableBody.innerHTML = currentLevels.map((level, index) => `
|
||
|
|
<tr>
|
||
|
|
<td class="px-3 py-3 text-sm text-gray-900">${level.level}</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<input type="text" value="${level.name}" class="w-full text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none" id="levelName_${index}">
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<div class="flex items-center gap-1">
|
||
|
|
<input type="number" value="${level.growthMin}" class="w-16 text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none" id="growthMin_${index}">
|
||
|
|
<span class="text-gray-500">-</span>
|
||
|
|
<input type="number" value="${level.growthMax}" class="w-16 text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none" id="growthMax_${index}">
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<input type="checkbox" ${level.memberDiscount ? 'checked' : ''} id="memberDiscount_${index}" onchange="toggleDiscountRate(${index})">
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<input type="number" value="${level.discountRate}" class="w-16 text-sm border border-gray-300 rounded px-2 py-1 focus:border-green-500 focus:outline-none ${!level.memberDiscount ? 'bg-gray-100' : ''}" id="discountRate_${index}" ${!level.memberDiscount ? 'disabled' : ''}>
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<input type="checkbox" ${level.pointExchange ? 'checked' : ''} id="pointExchange_${index}">
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<input type="checkbox" ${level.birthdayCoupon ? 'checked' : ''} id="birthdayCoupon_${index}" onchange="toggleCouponButton(${index})">
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<button class="px-3 py-1 text-xs text-green-600 border border-green-600 rounded hover:bg-green-50 transition-colors ${!level.birthdayCoupon ? 'hidden' : ''}" id="addCouponBtn_${index}" onclick="addBirthdayCoupon(${index})">
|
||
|
|
添加优惠券
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<input type="checkbox" ${level.birthdayDoublePoints ? 'checked' : ''} id="birthdayDoublePoints_${index}">
|
||
|
|
</td>
|
||
|
|
<td class="px-3 py-3">
|
||
|
|
<div class="flex gap-2">
|
||
|
|
${index === currentLevels.length - 1 ? `
|
||
|
|
<button class="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700" onclick="addNewLevel()">
|
||
|
|
添加
|
||
|
|
</button>
|
||
|
|
` : ''}
|
||
|
|
<button class="px-2 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700" onclick="deleteLevel(${index})">
|
||
|
|
删除
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 切换折扣率输入框状态
|
||
|
|
function toggleDiscountRate(index) {
|
||
|
|
const checkbox = document.getElementById(`memberDiscount_${index}`);
|
||
|
|
const discountInput = document.getElementById(`discountRate_${index}`);
|
||
|
|
|
||
|
|
if (checkbox && discountInput) {
|
||
|
|
if (checkbox.checked) {
|
||
|
|
discountInput.disabled = false;
|
||
|
|
discountInput.classList.remove('bg-gray-100');
|
||
|
|
} else {
|
||
|
|
discountInput.disabled = true;
|
||
|
|
discountInput.classList.add('bg-gray-100');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 切换优惠券按钮显示
|
||
|
|
function toggleCouponButton(index) {
|
||
|
|
const checkbox = document.getElementById(`birthdayCoupon_${index}`);
|
||
|
|
const addButton = document.getElementById(`addCouponBtn_${index}`);
|
||
|
|
|
||
|
|
if (checkbox && addButton) {
|
||
|
|
if (checkbox.checked) {
|
||
|
|
addButton.classList.remove('hidden');
|
||
|
|
} else {
|
||
|
|
addButton.classList.add('hidden');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加生日优惠券
|
||
|
|
function addBirthdayCoupon(index) {
|
||
|
|
// 显示弹窗
|
||
|
|
const modal = document.getElementById('coupon-modal');
|
||
|
|
if (modal) {
|
||
|
|
modal.classList.remove('hidden');
|
||
|
|
resetCouponForm();
|
||
|
|
console.log('显示添加生日优惠券弹窗，等级索引:', index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭优惠券弹窗
|
||
|
|
function closeCouponModal(event) {
|
||
|
|
// 如果点击的是弹窗背景，则关闭弹窗
|
||
|
|
if (event && event.target !== event.currentTarget) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const modal = document.getElementById('coupon-modal');
|
||
|
|
if (modal) {
|
||
|
|
modal.classList.add('hidden');
|
||
|
|
console.log('关闭优惠券弹窗');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 重置优惠券表单
|
||
|
|
function resetCouponForm() {
|
||
|
|
const form = document.getElementById('coupon-form');
|
||
|
|
if (form) {
|
||
|
|
// 重置为默认值
|
||
|
|
document.getElementById('coupon-name').value = '生日优惠券';
|
||
|
|
document.getElementById('coupon-threshold').value = '10';
|
||
|
|
document.getElementById('coupon-discount').value = '1';
|
||
|
|
document.getElementById('coupon-validity').value = '1';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 调整门槛金额
|
||
|
|
function adjustThreshold(delta) {
|
||
|
|
const input = document.getElementById('coupon-threshold');
|
||
|
|
if (input) {
|
||
|
|
const currentValue = parseInt(input.value) || 0;
|
||
|
|
const newValue = Math.max(0, currentValue + delta);
|
||
|
|
input.value = newValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 调整减免金额
|
||
|
|
function adjustDiscount(delta) {
|
||
|
|
const input = document.getElementById('coupon-discount');
|
||
|
|
if (input) {
|
||
|
|
const currentValue = parseInt(input.value) || 0;
|
||
|
|
const newValue = Math.max(0, currentValue + delta);
|
||
|
|
input.value = newValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交优惠券
|
||
|
|
function submitCoupon() {
|
||
|
|
const form = document.getElementById('coupon-form');
|
||
|
|
if (!form) return;
|
||
|
|
|
||
|
|
// 获取表单数据
|
||
|
|
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 (!couponData.threshold || couponData.threshold < 0) {
|
||
|
|
showNotification('请输入有效的门槛金额', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!couponData.discount || couponData.discount < 0) {
|
||
|
|
showNotification('请输入有效的减免金额', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (parseInt(couponData.discount) >= parseInt(couponData.threshold)) {
|
||
|
|
showNotification('减免金额不能大于或等于门槛金额', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交成功
|
||
|
|
console.log('提交优惠券数据:', couponData);
|
||
|
|
showNotification(`成功添加优惠券：${couponData.name}`, 'success');
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
closeCouponModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除等级行
|
||
|
|
function deleteLevel(index) {
|
||
|
|
if (currentLevels.length <= 1) {
|
||
|
|
showNotification('至少需要保留一个等级', 'warning');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
currentLevels.splice(index, 1);
|
||
|
|
|
||
|
|
// 重新编号等级
|
||
|
|
currentLevels.forEach((level, i) => {
|
||
|
|
level.level = `LV${i + 1}`;
|
||
|
|
});
|
||
|
|
|
||
|
|
renderLevelEditTable();
|
||
|
|
showNotification(`删除等级 ${index + 1}`, 'success');
|
||
|
|
console.log('删除等级:', index);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加新等级
|
||
|
|
function addNewLevel() {
|
||
|
|
const newLevelNum = currentLevels.length + 1;
|
||
|
|
const lastLevel = currentLevels[currentLevels.length - 1];
|
||
|
|
|
||
|
|
const newLevel = {
|
||
|
|
level: `LV${newLevelNum}`,
|
||
|
|
name: `${getLevelName(newLevelNum)}会员`,
|
||
|
|
growthMin: lastLevel.growthMax + 1,
|
||
|
|
growthMax: lastLevel.growthMax + 1000,
|
||
|
|
memberDiscount: true,
|
||
|
|
discountRate: Math.min(lastLevel.discountRate + 5, 50),
|
||
|
|
pointExchange: true,
|
||
|
|
birthdayCoupon: true,
|
||
|
|
birthdayDoublePoints: true
|
||
|
|
};
|
||
|
|
|
||
|
|
currentLevels.push(newLevel);
|
||
|
|
renderLevelEditTable();
|
||
|
|
showNotification(`添加新等级 LV${newLevelNum}`, 'success');
|
||
|
|
console.log('添加新等级:', newLevel);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取等级名称
|
||
|
|
function getLevelName(levelNum) {
|
||
|
|
const names = ['铜牌', '银牌', '金牌', '钻石', '黑钻', '至尊', '王者', '传奇'];
|
||
|
|
return names[levelNum - 1] || `LV${levelNum}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交等级编辑
|
||
|
|
function submitLevelEdit() {
|
||
|
|
showNotification(`${currentShopName} 等级编辑已提交`, 'success');
|
||
|
|
console.log('提交等级编辑:', currentShopName);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 导出函数
|
||
|
|
window.toggleDiscountRate = toggleDiscountRate;
|
||
|
|
window.toggleCouponButton = toggleCouponButton;
|
||
|
|
window.addBirthdayCoupon = addBirthdayCoupon;
|
||
|
|
window.closeCouponModal = closeCouponModal;
|
||
|
|
window.resetCouponForm = resetCouponForm;
|
||
|
|
window.adjustThreshold = adjustThreshold;
|
||
|
|
window.adjustDiscount = adjustDiscount;
|
||
|
|
window.addCouponThreshold = addCouponThreshold;
|
||
|
|
window.submitCoupon = submitCoupon;
|
||
|
|
window.deleteLevel = deleteLevel;
|
||
|
|
window.addNewLevel = addNewLevel;
|
||
|
|
window.submitLevelEdit = submitLevelEdit;
|