批量编辑 增加积分有效期，积分兑换设置

web/merchant/js/batch-level-edit.js

@@ -12,6 +12,9 @@ function initBatchLevelEdit() {
     
     // 绑定表单事件
     bindFormEvents();
+    
+    // 初始化新增功能区域的交互事件
+    initBatchPointRatioSettings();
 }
 
 // 绑定表单事件
@@ -104,7 +107,7 @@ function getSelectedStalls() {
 function getLevelConfigData() {
     const tbody = document.getElementById('batchLevelEditBody');
     const rows = tbody.querySelectorAll('tr');
-    const config = [];
+    const levelConfig = [];
     
     rows.forEach(row => {
         const cells = row.cells;
@@ -126,10 +129,38 @@ function getLevelConfigData() {
             birthdayDoublePoints: cells[8].querySelector('input[type="checkbox"]').checked
         };
         
-        config.push(levelData);
+        levelConfig.push(levelData);
     });
     
-    return config;
+    // 收集积分有效期设置
+    const validityDays = document.getElementById('batchValidityDays')?.value || 365;
+    
+    // 收集积分兑换比例设置
+    const spendAmount = document.getElementById('batchSpendAmount')?.value || 1;
+    const earnPoints = document.getElementById('batchEarnPoints')?.value || 1;
+    const deductPoints = document.getElementById('batchDeductPoints')?.value || 100;
+    const deductAmount = document.getElementById('batchDeductAmount')?.value || 1;
+    
+    // 收集单笔订单最大积分使用限制
+    const limitType = document.querySelector('input[name="batchLimitType"]:checked')?.value || 'none';
+    const limitPercentage = document.getElementById('batchLimitPercentage')?.value || 50;
+    const limitAmount = document.getElementById('batchLimitAmount')?.value || 100;
+    
+    return {
+        levels: levelConfig,
+        pointValidity: {
+            validityDays: parseInt(validityDays)
+        },
+        pointRatio: {
+            spendAmount: parseFloat(spendAmount),
+            earnPoints: parseInt(earnPoints),
+            deductPoints: parseInt(deductPoints),
+            deductAmount: parseFloat(deductAmount),
+            limitType: limitType,
+            limitPercentage: parseInt(limitPercentage),
+            limitAmount: parseFloat(limitAmount)
+        }
+    };
 }
 
 // 添加优惠券（重用现有功能）
@@ -162,6 +193,33 @@ async function loadCouponModalFunction() {
     }
 }
 
+// 初始化积分兑换比例设置的交互逻辑
+function initBatchPointRatioSettings() {
+    const limitTypeRadios = document.querySelectorAll('input[name="batchLimitType"]');
+    const percentageContainer = document.querySelector('.batch-percentage-container');
+    const fixedContainer = document.querySelector('.batch-fixed-container');
+    
+    if (limitTypeRadios.length === 0) return;
+    
+    // 积分使用限制类型变化事件
+    limitTypeRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+            const value = this.value;
+            
+            // 隐藏所有容器
+            if (percentageContainer) percentageContainer.style.display = 'none';
+            if (fixedContainer) fixedContainer.style.display = 'none';
+            
+            // 显示对应的容器
+            if (value === 'percentage' && percentageContainer) {
+                percentageContainer.style.display = 'flex';
+            } else if (value === 'fixed' && fixedContainer) {
+                fixedContainer.style.display = 'flex';
+            }
+        });
+    });
+}
+
 // 页面清理函数
 function cleanupBatchLevelEdit() {
     console.log('清理批量等级编辑页面');

web/merchant/js/level-edit.js

@@ -97,6 +97,9 @@ function initLevelEdit() {
     if (merchantName) {
         updateEditPageContent(merchantName);
     }
+    
+    // 初始化新增功能区域的交互事件
+    initPointRatioSettings();
 }
 
 // 获取当前商户名称
@@ -260,13 +263,13 @@ function saveLevelEdit() {
 // 收集表单数据
 function collectFormData() {
     const tbody = document.getElementById('levelEditBody');
-    if (!tbody) return [];
+    if (!tbody) return {};
     
     const rows = tbody.querySelectorAll('tr');
-    const data = [];
+    const levelData = [];
     
     rows.forEach((row, index) => {
-        const levelData = {
+        const data = {
             level: row.cells[0].textContent,
             name: row.querySelector('input[type="text"]').value,
             growthStart: parseInt(row.querySelector('.range-start').value),
@@ -277,10 +280,66 @@ function collectFormData() {
             birthdayCouponEnabled: row.querySelectorAll('input[type="checkbox"]')[2].checked,
             birthdayPointsEnabled: row.querySelectorAll('input[type="checkbox"]')[3].checked
         };
-        data.push(levelData);
+        levelData.push(data);
     });
     
-    return data;
+    // 收集积分有效期设置
+    const validityDays = document.getElementById('validityDays')?.value || 365;
+    
+    // 收集积分兑换比例设置
+    const spendAmount = document.getElementById('spendAmount')?.value || 1;
+    const earnPoints = document.getElementById('earnPoints')?.value || 1;
+    const deductPoints = document.getElementById('deductPoints')?.value || 100;
+    const deductAmount = document.getElementById('deductAmount')?.value || 1;
+    
+    // 收集单笔订单最大积分使用限制
+    const limitType = document.querySelector('input[name="limitType"]:checked')?.value || 'none';
+    const limitPercentage = document.getElementById('limitPercentage')?.value || 50;
+    const limitAmount = document.getElementById('limitAmount')?.value || 100;
+    
+    return {
+        levels: levelData,
+        pointValidity: {
+            validityDays: parseInt(validityDays)
+        },
+        pointRatio: {
+            spendAmount: parseFloat(spendAmount),
+            earnPoints: parseInt(earnPoints),
+            deductPoints: parseInt(deductPoints),
+            deductAmount: parseFloat(deductAmount),
+            limitType: limitType,
+            limitPercentage: parseInt(limitPercentage),
+            limitAmount: parseFloat(limitAmount)
+        }
+    };
+}
+
+
+// 初始化积分兑换比例设置的交互逻辑
+function initPointRatioSettings() {
+    const limitTypeRadios = document.querySelectorAll('input[name="limitType"]');
+    const percentageContainer = document.querySelector('.percentage-container');
+    const fixedContainer = document.querySelector('.fixed-container');
+    
+    if (limitTypeRadios.length === 0) return;
+    
+    // 积分使用限制类型变化事件
+    limitTypeRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+            const value = this.value;
+            
+            // 隐藏所有容器
+            if (percentageContainer) percentageContainer.style.display = 'none';
+            if (fixedContainer) fixedContainer.style.display = 'none';
+            
+            // 显示对应的容器
+            if (value === 'percentage' && percentageContainer) {
+                percentageContainer.style.display = 'flex';
+            } else if (value === 'fixed' && fixedContainer) {
+                fixedContainer.style.display = 'flex';
+            }
+        });
+    });
 }
 
 // 将需要在HTML中调用的函数暴露到全局作用域

web/merchant/pages/batch-level-edit.html

@@ -229,6 +229,78 @@
             </tr>
         </tbody>
     </table>
+
+    <!-- 积分有效期设置区域 -->
+    <div class="settings-section">
+        <div class="section-header">
+            <h3>积分有效期设置</h3>
+        </div>
+        <div class="settings-grid">
+            <div class="setting-item">
+                <label>有效期天数</label>
+                <div class="input-with-unit">
+                    <input type="number" class="form-input" id="batchValidityDays" min="1" max="3650" value="365">
+                    <span class="unit">天</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 金额与积分兑换比例设置区域 -->
+    <div class="settings-section">
+        <div class="section-header">
+            <h3>金额与积分兑换比例设置</h3>
+        </div>
+        <div class="settings-grid">
+            <div class="setting-item">
+                <label>消费获得积分比例</label>
+                <div class="ratio-setting">
+                    <span class="ratio-text">消费</span>
+                    <input type="number" class="form-input ratio-input" id="batchSpendAmount" min="1" value="1">
+                    <span class="ratio-text">元 = </span>
+                    <input type="number" class="form-input ratio-input" id="batchEarnPoints" min="1" value="1">
+                    <span class="ratio-text">积分</span>
+                </div>
+            </div>
+            <div class="setting-item">
+                <label>积分抵扣金额比例</label>
+                <div class="ratio-setting">
+                    <input type="number" class="form-input ratio-input" id="batchDeductPoints" min="1" value="100">
+                    <span class="ratio-text">积分 = </span>
+                    <input type="number" class="form-input ratio-input" id="batchDeductAmount" min="0.01" step="0.01" value="1">
+                    <span class="ratio-text">元</span>
+                </div>
+            </div>
+            <div class="setting-item">
+                <label>单笔订单最大积分使用限制</label>
+                <div class="limit-setting">
+                    <label class="radio-item">
+                        <input type="radio" name="batchLimitType" value="none" checked>
+                        <span class="radio-mark"></span>
+                        不限制
+                    </label>
+                    <label class="radio-item">
+                        <input type="radio" name="batchLimitType" value="percentage">
+                        <span class="radio-mark"></span>
+                        按订单金额百分比限制
+                    </label>
+                    <div class="batch-percentage-container" style="display: none;">
+                        <input type="number" class="form-input" id="batchLimitPercentage" min="1" max="100" value="50">
+                        <span class="unit">%</span>
+                    </div>
+                    <label class="radio-item">
+                        <input type="radio" name="batchLimitType" value="fixed">
+                        <span class="radio-mark"></span>
+                        按固定金额限制
+                    </label>
+                    <div class="batch-fixed-container" style="display: none;">
+                        <input type="number" class="form-input" id="batchLimitAmount" min="0.01" step="0.01" value="100">
+                        <span class="unit">元</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <style>
@@ -416,4 +488,164 @@
 .level-edit-table th:nth-child(7) { width: 80px; }  /* 开启生日优惠券 */
 .level-edit-table th:nth-child(8) { width: 100px; } /* 生日优惠券操作 */
 .level-edit-table th:nth-child(9) { width: 80px; }  /* 开启生日双倍积分 */
+
+/* 设置区域样式 */
+.settings-section {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 20px;
+    overflow: hidden;
+}
+
+.section-header {
+    background-color: #f8f9fa;
+    padding: 16px 20px;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.section-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.settings-grid {
+    padding: 20px;
+    display: grid;
+    gap: 20px;
+}
+
+.setting-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.setting-item label {
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+}
+
+/* 输入框带单位样式 */
+.input-with-unit {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.input-with-unit .form-input {
+    width: 120px;
+    text-align: left;
+}
+
+.unit {
+    color: #666;
+    font-size: 14px;
+    min-width: 20px;
+}
+
+/* 比例设置样式 */
+.ratio-setting {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.ratio-text {
+    color: #333;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+.ratio-input {
+    width: 80px;
+    text-align: center;
+}
+
+/* 单选框样式 */
+.radio-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-bottom: 12px;
+}
+
+.radio-item input[type="radio"] {
+    display: none;
+}
+
+.radio-mark {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #bdc3c7;
+    border-radius: 50%;
+    position: relative;
+    transition: all 0.2s;
+}
+
+.radio-item input[type="radio"]:checked + .radio-mark {
+    border-color: #3498db;
+}
+
+.radio-item input[type="radio"]:checked + .radio-mark:after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #3498db;
+}
+
+/* 限制设置样式 */
+.limit-setting {
+    background-color: #f8f9fa;
+    padding: 16px;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.batch-percentage-container,
+.batch-fixed-container {
+    margin-left: 26px;
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.batch-percentage-container .form-input,
+.batch-fixed-container .form-input {
+    width: 100px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .settings-grid {
+        padding: 16px;
+        gap: 16px;
+    }
+    
+    .section-header {
+        padding: 12px 16px;
+    }
+    
+    .ratio-setting {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .input-with-unit .form-input,
+    .ratio-input {
+        width: 100px;
+    }
+}
 </style>

web/merchant/pages/level-edit.html

@@ -195,6 +195,78 @@
             </tr>
         </tbody>
     </table>
+
+    <!-- 积分有效期设置区域 -->
+    <div class="settings-section">
+        <div class="section-header">
+            <h3>积分有效期设置</h3>
+        </div>
+        <div class="settings-grid">
+            <div class="setting-item">
+                <label>有效期天数</label>
+                <div class="input-with-unit">
+                    <input type="number" class="form-input" id="validityDays" min="1" max="3650" value="365">
+                    <span class="unit">天</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 金额与积分兑换比例设置区域 -->
+    <div class="settings-section">
+        <div class="section-header">
+            <h3>金额与积分兑换比例设置</h3>
+        </div>
+        <div class="settings-grid">
+            <div class="setting-item">
+                <label>消费获得积分比例</label>
+                <div class="ratio-setting">
+                    <span class="ratio-text">消费</span>
+                    <input type="number" class="form-input ratio-input" id="spendAmount" min="1" value="1">
+                    <span class="ratio-text">元 = </span>
+                    <input type="number" class="form-input ratio-input" id="earnPoints" min="1" value="1">
+                    <span class="ratio-text">积分</span>
+                </div>
+            </div>
+            <div class="setting-item">
+                <label>积分抵扣金额比例</label>
+                <div class="ratio-setting">
+                    <input type="number" class="form-input ratio-input" id="deductPoints" min="1" value="100">
+                    <span class="ratio-text">积分 = </span>
+                    <input type="number" class="form-input ratio-input" id="deductAmount" min="0.01" step="0.01" value="1">
+                    <span class="ratio-text">元</span>
+                </div>
+            </div>
+            <div class="setting-item">
+                <label>单笔订单最大积分使用限制</label>
+                <div class="limit-setting">
+                    <label class="radio-item">
+                        <input type="radio" name="limitType" value="none" checked>
+                        <span class="radio-mark"></span>
+                        不限制
+                    </label>
+                    <label class="radio-item">
+                        <input type="radio" name="limitType" value="percentage">
+                        <span class="radio-mark"></span>
+                        按订单金额百分比限制
+                    </label>
+                    <div class="percentage-container" style="display: none;">
+                        <input type="number" class="form-input" id="limitPercentage" min="1" max="100" value="50">
+                        <span class="unit">%</span>
+                    </div>
+                    <label class="radio-item">
+                        <input type="radio" name="limitType" value="fixed">
+                        <span class="radio-mark"></span>
+                        按固定金额限制
+                    </label>
+                    <div class="fixed-container" style="display: none;">
+                        <input type="number" class="form-input" id="limitAmount" min="0.01" step="0.01" value="100">
+                        <span class="unit">元</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <style>
@@ -450,4 +522,166 @@
 .btn-primary:hover {
     background-color: #0056b3;
 }
+
+/* 设置区域样式 */
+.settings-section {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 20px;
+    overflow: hidden;
+}
+
+.section-header {
+    background-color: #f8f9fa;
+    padding: 16px 20px;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.section-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.settings-grid {
+    padding: 20px;
+    display: grid;
+    gap: 20px;
+}
+
+.setting-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.setting-item label {
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+}
+
+
+/* 输入框带单位样式 */
+.input-with-unit {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.input-with-unit .form-input {
+    width: 120px;
+    text-align: left;
+}
+
+.unit {
+    color: #666;
+    font-size: 14px;
+    min-width: 20px;
+}
+
+
+/* 比例设置样式 */
+.ratio-setting {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.ratio-text {
+    color: #333;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+.ratio-input {
+    width: 80px;
+    text-align: center;
+}
+
+/* 单选框样式 */
+.radio-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-bottom: 12px;
+}
+
+.radio-item input[type="radio"] {
+    display: none;
+}
+
+.radio-mark {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #bdc3c7;
+    border-radius: 50%;
+    position: relative;
+    transition: all 0.2s;
+}
+
+.radio-item input[type="radio"]:checked + .radio-mark {
+    border-color: #3498db;
+}
+
+.radio-item input[type="radio"]:checked + .radio-mark:after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #3498db;
+}
+
+/* 限制设置样式 */
+.limit-setting {
+    background-color: #f8f9fa;
+    padding: 16px;
+    border-radius: 6px;
+    border: 1px solid #e9ecef;
+}
+
+.percentage-container,
+.fixed-container {
+    margin-left: 26px;
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.percentage-container .form-input,
+.fixed-container .form-input {
+    width: 100px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .settings-grid {
+        padding: 16px;
+        gap: 16px;
+    }
+    
+    .section-header {
+        padding: 12px 16px;
+    }
+    
+    .ratio-setting {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .input-with-unit .form-input,
+    .ratio-input {
+        width: 100px;
+    }
+}
 </style>