feat(积分商城): 商家端支持积分换购和积分优惠购
- 商家端后台积分商城功能更新，增加“积分换购”和“积分优惠购”两种模式。 - “添加积分商品”页面支持两种模式的独立设置。 - “积分商城”管理页面重构，统一了编辑弹窗，并为不同模式提供差异化配置。 - 删除了旧的弹窗文件，将逻辑整合。 - 更新了相关的原型文件。
This commit is contained in:
parent
8ee3ab19b6
commit
281db90590
|
|
@ -208,7 +208,22 @@
|
|||
transform: none;
|
||||
}
|
||||
|
||||
.add-btn:disabled:hover {
|
||||
.add-btn.discount {
|
||||
background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
|
||||
}
|
||||
|
||||
.add-btn.discount:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 8px rgba(230, 126, 34, 0.3);
|
||||
}
|
||||
|
||||
.add-btn.discount:disabled {
|
||||
background: #95a5a6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.add-btn.discount:disabled:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -275,7 +290,7 @@
|
|||
}
|
||||
|
||||
.product-details {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
|
|
@ -332,6 +347,12 @@
|
|||
border: 1px solid #27ae60;
|
||||
}
|
||||
|
||||
.points-status.discount {
|
||||
background: #fff3cd;
|
||||
color: #e67e22;
|
||||
border: 1px solid #e67e22;
|
||||
}
|
||||
|
||||
.points-status.inactive {
|
||||
background: #f8f8f8;
|
||||
color: #666;
|
||||
|
|
@ -561,68 +582,71 @@
|
|||
<div class="product-list" id="productList">
|
||||
<div class="product-card">
|
||||
<div class="product-info">
|
||||
<div class="product-name">猪肉<span class="points-status inactive">普通商品</span></div>
|
||||
<div class="product-name">猪肉</div>
|
||||
<div class="product-details">
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">猪肉铺</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">ID:</span>
|
||||
<span class="detail-value">1212</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">库存:</span>
|
||||
<span class="detail-value">150件</span>
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">猪肉铺</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">规格:</span>
|
||||
<span class="detail-value">大份</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-price">¥2</div>
|
||||
</div>
|
||||
<button class="add-btn" onclick="addToPointsMall('1212', '猪肉')">添加为积分商品</button>
|
||||
<button class="add-btn" onclick="addToPointsMall('1212', '猪肉', 'exchange')" style="margin-bottom: 8px;">添加为积分换购商品</button>
|
||||
<button class="add-btn discount" onclick="addToPointsMall('1212', '猪肉', 'discount')">添加为积分优惠购商品</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<div class="product-info">
|
||||
<div class="product-name">牛肉<span class="points-status active">积分商品</span></div>
|
||||
<div class="product-name">牛肉</div>
|
||||
<div class="product-details">
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">牛肉铺</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">ID:</span>
|
||||
<span class="detail-value">1213</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">库存:</span>
|
||||
<span class="detail-value">80件</span>
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">牛肉铺</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">规格:</span>
|
||||
<span class="detail-value">小份</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-price">¥5</div>
|
||||
</div>
|
||||
<button class="add-btn" onclick="addToPointsMall('1213', '牛肉')" disabled>已是积分商品</button>
|
||||
<button class="add-btn" onclick="addToPointsMall('1213', '牛肉', 'exchange')" style="margin-bottom: 8px;">添加为积分换购商品</button>
|
||||
<button class="add-btn discount" onclick="addToPointsMall('1213', '牛肉', 'discount')">添加为积分优惠购商品</button>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<div class="product-info">
|
||||
<div class="product-name">鸡肉<span class="points-status inactive">普通商品</span></div>
|
||||
<div class="product-name">鸡肉</div>
|
||||
<div class="product-details">
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">鸡肉铺</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">ID:</span>
|
||||
<span class="detail-value">1214</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">库存:</span>
|
||||
<span class="detail-value">200件</span>
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">鸡肉铺</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">规格:</span>
|
||||
<span class="detail-value">无</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-price">¥3</div>
|
||||
</div>
|
||||
<button class="add-btn" onclick="addToPointsMall('1214', '鸡肉')">添加为积分商品</button>
|
||||
<button class="add-btn" onclick="addToPointsMall('1214', '鸡肉', 'exchange')" style="margin-bottom: 8px;">添加为积分换购商品</button>
|
||||
<button class="add-btn discount" onclick="addToPointsMall('1214', '鸡肉', 'discount')">添加为积分优惠购商品</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -642,27 +666,55 @@
|
|||
<div class="modal-overlay" id="exchangeModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">添加积分商品确认</h3>
|
||||
<h3 class="modal-title" id="modalTitle">添加积分商品确认</h3>
|
||||
<button class="modal-close" onclick="closeExchangeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="exchange-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">商品ID</span>
|
||||
<span class="info-value" id="modalProductId">-</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">商品名称</span>
|
||||
<span class="info-value" id="modalProductName">-</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">当前库存</span>
|
||||
<span class="info-value" id="modalProductStock">-</span>
|
||||
<span class="info-label">归属摊位</span>
|
||||
<span class="info-value" id="modalProductShop">-</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">规格名称</span>
|
||||
<span class="info-value" id="modalProductSpec">-</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">SKU-ID</span>
|
||||
<span class="info-value" id="modalProductSkuId">-</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">商品原价</span>
|
||||
<span class="info-value" id="modalProductPrice">-</span>
|
||||
</div>
|
||||
<div class="info-item" id="pointsRequiredRow">
|
||||
<span class="info-label">兑换所需积分</span>
|
||||
<input type="number" class="info-input highlight" id="modalPointsRequired" min="1" placeholder="请输入积分">
|
||||
</div>
|
||||
<div class="info-item" id="discountPointsRow" style="display: none;">
|
||||
<span class="info-label">优惠购所需积分</span>
|
||||
<input type="number" class="info-input highlight" id="modalDiscountPoints" min="1" placeholder="请输入优惠购所需积分">
|
||||
</div>
|
||||
<div class="info-item" id="discountPriceRow" style="display: none;">
|
||||
<span class="info-label">优惠购商品价格</span>
|
||||
<input type="number" class="info-input" id="modalDiscountPrice" min="0" step="0.01" placeholder="请输入优惠购价格">
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">最大可兑换数量</span>
|
||||
<input type="number" class="info-input" id="modalMaxExchange" min="1" placeholder="请输入数量">
|
||||
</div>
|
||||
<div class="info-item" id="exchangeNoticeRow" style="display: none;">
|
||||
<span class="info-label" style="color: #999; font-size: 12px; font-weight: normal;">说明</span>
|
||||
<span class="info-value" style="color: #999; font-size: 12px; font-weight: normal;">固定支付0.01，商业支付要求</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
@ -678,16 +730,17 @@
|
|||
|
||||
// 模拟商品数据
|
||||
const allProducts = [
|
||||
{id: '1212', name: '猪肉', shop: '猪肉铺', price: 2, stock: 150, isPointsProduct: false, pointsRequired: 200, maxExchangeCount: 50},
|
||||
{id: '1213', name: '牛肉', shop: '牛肉铺', price: 5, stock: 80, isPointsProduct: true, pointsRequired: 500, maxExchangeCount: 30},
|
||||
{id: '1214', name: '鸡肉', shop: '鸡肉铺', price: 3, stock: 200, isPointsProduct: false, pointsRequired: 300, maxExchangeCount: 80},
|
||||
{id: '1215', name: '鱼肉', shop: '鱼肉铺', price: 8, stock: 60, isPointsProduct: true, pointsRequired: 800, maxExchangeCount: 25},
|
||||
{id: '1216', name: '虾', shop: '海鲜铺', price: 12, stock: 45, isPointsProduct: false, pointsRequired: 1200, maxExchangeCount: 20},
|
||||
{id: '1217', name: '蟹', shop: '海鲜铺', price: 25, stock: 30, isPointsProduct: false, pointsRequired: 2500, maxExchangeCount: 15},
|
||||
{id: '1212', name: '猪肉', shop: '猪肉铺', spec: '大份', price: 2, stock: 150, skuId: 'SKU1212001', exchangeType: 'none', pointsRequired: 200, maxExchangeCount: 50, discountPoints: 50},
|
||||
{id: '1213', name: '牛肉', shop: '牛肉铺', spec: '小份', price: 5, stock: 80, skuId: 'SKU1213002', exchangeType: 'exchange', pointsRequired: 500, maxExchangeCount: 30, discountPoints: 100},
|
||||
{id: '1214', name: '鸡肉', shop: '鸡肉铺', spec: '无', price: 3, stock: 200, skuId: 'SKU1214003', exchangeType: 'none', pointsRequired: 300, maxExchangeCount: 80, discountPoints: 80},
|
||||
{id: '1215', name: '鱼肉', shop: '鱼肉铺', spec: '中份', price: 8, stock: 60, skuId: 'SKU1215004', exchangeType: 'discount', pointsRequired: 800, maxExchangeCount: 25, discountPoints: 200},
|
||||
{id: '1216', name: '虾', shop: '海鲜铺', spec: '特大', price: 12, stock: 45, skuId: 'SKU1216005', exchangeType: 'none', pointsRequired: 1200, maxExchangeCount: 20, discountPoints: 300},
|
||||
{id: '1217', name: '蟹', shop: '海鲜铺', spec: '精选', price: 25, stock: 30, skuId: 'SKU1217006', exchangeType: 'none', pointsRequired: 2500, maxExchangeCount: 15, discountPoints: 500},
|
||||
];
|
||||
|
||||
let filteredProducts = [...allProducts];
|
||||
let currentEditingProduct = null;
|
||||
let currentExchangeType = null;
|
||||
|
||||
function showToast(message, type = 'success') {
|
||||
const toast = document.getElementById('toast');
|
||||
|
|
@ -740,54 +793,77 @@
|
|||
}
|
||||
|
||||
productList.innerHTML = pageProducts.map(product => {
|
||||
const statusClass = product.isPointsProduct ? 'active' : 'inactive';
|
||||
const statusText = product.isPointsProduct ? '积分商品' : '普通商品';
|
||||
const buttonText = product.isPointsProduct ? '已是积分商品' : '添加为积分商品';
|
||||
const buttonDisabled = product.isPointsProduct ? 'disabled' : '';
|
||||
|
||||
return `
|
||||
<div class="product-card">
|
||||
<div class="product-info">
|
||||
<div class="product-name">${product.name}<span class="points-status ${statusClass}">${statusText}</span></div>
|
||||
<div class="product-name">${product.name}</div>
|
||||
<div class="product-details">
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">${product.shop}</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">ID:</span>
|
||||
<span class="detail-value">${product.id}</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">库存:</span>
|
||||
<span class="detail-value">${product.stock}件</span>
|
||||
<span class="detail-label">店铺:</span>
|
||||
<span class="detail-value">${product.shop}</span>
|
||||
</div>
|
||||
<div class="product-detail">
|
||||
<span class="detail-label">规格:</span>
|
||||
<span class="detail-value">${product.spec}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-price">¥${product.price}</div>
|
||||
</div>
|
||||
<button class="add-btn" onclick="addToPointsMall('${product.id}', '${product.name}')" ${buttonDisabled}>${buttonText}</button>
|
||||
<button class="add-btn" onclick="addToPointsMall('${product.id}', '${product.name}', 'exchange')" style="margin-bottom: 8px;">添加为积分换购商品</button>
|
||||
<button class="add-btn discount" onclick="addToPointsMall('${product.id}', '${product.name}', 'discount')">添加为积分优惠购商品</button>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function addToPointsMall(productId, productName) {
|
||||
// 检查是否已经是积分商品
|
||||
function addToPointsMall(productId, productName, exchangeType) {
|
||||
const product = allProducts.find(p => p.id === productId);
|
||||
if (product && product.isPointsProduct) {
|
||||
showToast(`${productName} 已经是积分商品了！`, 'error');
|
||||
return;
|
||||
}
|
||||
if (!product) return;
|
||||
|
||||
if (product) {
|
||||
currentEditingProduct = product;
|
||||
showExchangeModal(product);
|
||||
}
|
||||
currentExchangeType = exchangeType;
|
||||
showExchangeModal(product, exchangeType);
|
||||
}
|
||||
|
||||
function showExchangeModal(product) {
|
||||
function showExchangeModal(product, exchangeType) {
|
||||
// 更新弹窗标题
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const pointsRequiredRow = document.getElementById('pointsRequiredRow');
|
||||
const discountPointsRow = document.getElementById('discountPointsRow');
|
||||
const discountPriceRow = document.getElementById('discountPriceRow');
|
||||
const exchangeNoticeRow = document.getElementById('exchangeNoticeRow');
|
||||
|
||||
if (exchangeType === 'exchange') {
|
||||
modalTitle.textContent = '添加积分换购商品确认';
|
||||
pointsRequiredRow.style.display = 'flex';
|
||||
discountPointsRow.style.display = 'none';
|
||||
discountPriceRow.style.display = 'none';
|
||||
exchangeNoticeRow.style.display = 'flex';
|
||||
} else if (exchangeType === 'discount') {
|
||||
modalTitle.textContent = '添加积分优惠购商品确认';
|
||||
pointsRequiredRow.style.display = 'none';
|
||||
discountPointsRow.style.display = 'flex';
|
||||
discountPriceRow.style.display = 'flex';
|
||||
exchangeNoticeRow.style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('modalProductId').textContent = product.id;
|
||||
document.getElementById('modalProductName').textContent = product.name;
|
||||
document.getElementById('modalProductStock').textContent = `${product.stock}件`;
|
||||
document.getElementById('modalProductShop').textContent = product.shop;
|
||||
document.getElementById('modalProductSpec').textContent = product.spec;
|
||||
document.getElementById('modalProductSkuId').textContent = product.skuId || product.id;
|
||||
document.getElementById('modalProductPrice').textContent = `¥${product.price}`;
|
||||
|
||||
if (exchangeType === 'exchange') {
|
||||
document.getElementById('modalPointsRequired').value = product.pointsRequired;
|
||||
} else if (exchangeType === 'discount') {
|
||||
document.getElementById('modalDiscountPoints').value = product.discountPoints;
|
||||
document.getElementById('modalDiscountPrice').value = product.discountPrice || product.price;
|
||||
}
|
||||
|
||||
document.getElementById('modalMaxExchange').value = product.maxExchangeCount;
|
||||
|
||||
// 清除之前的错误状态
|
||||
|
|
@ -801,15 +877,19 @@
|
|||
document.getElementById('exchangeModal').classList.remove('show');
|
||||
document.body.style.overflow = 'auto';
|
||||
currentEditingProduct = null;
|
||||
currentExchangeType = null;
|
||||
}
|
||||
|
||||
function validateInputs() {
|
||||
const pointsInput = document.getElementById('modalPointsRequired');
|
||||
const discountPointsInput = document.getElementById('modalDiscountPoints');
|
||||
const discountPriceInput = document.getElementById('modalDiscountPrice');
|
||||
const maxExchangeInput = document.getElementById('modalMaxExchange');
|
||||
|
||||
let isValid = true;
|
||||
|
||||
// 验证积分输入
|
||||
// 验证积分输入（根据类型）
|
||||
if (currentExchangeType === 'exchange') {
|
||||
const pointsValue = parseInt(pointsInput.value);
|
||||
if (!pointsValue || pointsValue < 1) {
|
||||
pointsInput.classList.add('error');
|
||||
|
|
@ -818,6 +898,25 @@
|
|||
} else {
|
||||
pointsInput.classList.remove('error');
|
||||
}
|
||||
} else if (currentExchangeType === 'discount') {
|
||||
const discountValue = parseInt(discountPointsInput.value);
|
||||
if (!discountValue || discountValue < 1) {
|
||||
discountPointsInput.classList.add('error');
|
||||
showToast('优惠购所需积分必须大于0', 'error');
|
||||
isValid = false;
|
||||
} else {
|
||||
discountPointsInput.classList.remove('error');
|
||||
}
|
||||
|
||||
const discountPriceValue = parseFloat(discountPriceInput.value);
|
||||
if (isNaN(discountPriceValue) || discountPriceValue < 0) {
|
||||
discountPriceInput.classList.add('error');
|
||||
showToast('优惠购商品价格必须大于等于0', 'error');
|
||||
isValid = false;
|
||||
} else {
|
||||
discountPriceInput.classList.remove('error');
|
||||
}
|
||||
}
|
||||
|
||||
// 验证数量输入
|
||||
const maxExchangeValue = parseInt(maxExchangeInput.value);
|
||||
|
|
@ -838,11 +937,13 @@
|
|||
|
||||
function clearInputErrors() {
|
||||
document.getElementById('modalPointsRequired').classList.remove('error');
|
||||
document.getElementById('modalDiscountPoints').classList.remove('error');
|
||||
document.getElementById('modalDiscountPrice').classList.remove('error');
|
||||
document.getElementById('modalMaxExchange').classList.remove('error');
|
||||
}
|
||||
|
||||
function confirmAddToPointsMall() {
|
||||
if (!currentEditingProduct) return;
|
||||
if (!currentEditingProduct || !currentExchangeType) return;
|
||||
|
||||
// 验证输入
|
||||
if (!validateInputs()) {
|
||||
|
|
@ -850,18 +951,36 @@
|
|||
}
|
||||
|
||||
const confirmBtn = document.getElementById('confirmBtn');
|
||||
const pointsRequired = parseInt(document.getElementById('modalPointsRequired').value);
|
||||
const maxExchangeCount = parseInt(document.getElementById('modalMaxExchange').value);
|
||||
|
||||
let pointsValue = 0;
|
||||
let discountPriceValue = 0;
|
||||
let successMessage = '';
|
||||
|
||||
if (currentExchangeType === 'exchange') {
|
||||
pointsValue = parseInt(document.getElementById('modalPointsRequired').value);
|
||||
successMessage = `${currentEditingProduct.name} 已成功添加到积分换购商城！需要${pointsValue}积分，最多可兑换${maxExchangeCount}件`;
|
||||
} else if (currentExchangeType === 'discount') {
|
||||
pointsValue = parseInt(document.getElementById('modalDiscountPoints').value);
|
||||
discountPriceValue = parseFloat(document.getElementById('modalDiscountPrice').value);
|
||||
successMessage = `${currentEditingProduct.name} 已成功添加到积分优惠购商城！需要${pointsValue}积分，优惠购价格¥${discountPriceValue}，最多可购买${maxExchangeCount}件`;
|
||||
}
|
||||
|
||||
confirmBtn.disabled = true;
|
||||
confirmBtn.textContent = '添加中...';
|
||||
|
||||
setTimeout(() => {
|
||||
// 更新数据状态，使用用户输入的值
|
||||
currentEditingProduct.isPointsProduct = true;
|
||||
currentEditingProduct.pointsRequired = pointsRequired;
|
||||
// 更新数据状态
|
||||
currentEditingProduct.exchangeType = currentExchangeType;
|
||||
currentEditingProduct.maxExchangeCount = maxExchangeCount;
|
||||
|
||||
if (currentExchangeType === 'exchange') {
|
||||
currentEditingProduct.pointsRequired = pointsValue;
|
||||
} else if (currentExchangeType === 'discount') {
|
||||
currentEditingProduct.discountPoints = pointsValue;
|
||||
currentEditingProduct.discountPrice = discountPriceValue;
|
||||
}
|
||||
|
||||
// 重新渲染当前页面
|
||||
renderProducts();
|
||||
|
||||
|
|
@ -872,7 +991,7 @@
|
|||
confirmBtn.disabled = false;
|
||||
confirmBtn.textContent = '确认添加';
|
||||
|
||||
showToast(`${currentEditingProduct.name} 已成功添加到积分商城！需要${pointsRequired}积分，最多可兑换${maxExchangeCount}件`);
|
||||
showToast(successMessage);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
|
@ -939,6 +1058,18 @@
|
|||
}
|
||||
});
|
||||
|
||||
document.getElementById('modalDiscountPoints').addEventListener('input', function() {
|
||||
if (this.classList.contains('error')) {
|
||||
this.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('modalDiscountPrice').addEventListener('input', function() {
|
||||
if (this.classList.contains('error')) {
|
||||
this.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('modalMaxExchange').addEventListener('input', function() {
|
||||
if (this.classList.contains('error')) {
|
||||
this.classList.remove('error');
|
||||
|
|
|
|||
|
|
@ -376,6 +376,118 @@
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.product-info-section {
|
||||
background: #f8f9fa;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 40px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
background: #f8f9fa;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quantity-btn:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.quantity-btn:active {
|
||||
background: #dee2e6;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
border: none;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quantity-input:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.radio-option input[type="radio"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
accent-color: #007AFF;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
color: #333;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.info-display {
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 800px;
|
||||
|
|
@ -486,6 +598,8 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header" id="modalTitle">添加商品</div>
|
||||
<div class="modal-body">
|
||||
<!-- 添加模式 -->
|
||||
<div id="addMode" style="display: none;">
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">商品名称</label>
|
||||
<input type="text" class="filter-input" id="modalProductName" placeholder="请输入商品名称">
|
||||
|
|
@ -503,7 +617,7 @@
|
|||
</div>
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">积分使用模式</label>
|
||||
<select class="filter-select" id="modalPoints">
|
||||
<select class="filter-select" id="modalPoints" onchange="updatePointsMode()">
|
||||
<option value="">请选择积分使用模式</option>
|
||||
<option value="积分换购">积分换购</option>
|
||||
<option value="积分优惠购">积分优惠购</option>
|
||||
|
|
@ -514,9 +628,122 @@
|
|||
<input type="number" class="filter-input" id="modalStock" placeholder="请输入库存数量">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑模式 - 积分换购 -->
|
||||
<div id="editModeExchange" style="display: none;">
|
||||
<div class="product-info-section">
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品ID:</span>
|
||||
<span class="info-value" id="displayProductId"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品名称:</span>
|
||||
<span class="info-value" id="displayProductName"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">归属摊位:</span>
|
||||
<span class="info-value" id="displayStore"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">规格名称:</span>
|
||||
<span class="info-value" id="displaySpec"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">SKU-ID:</span>
|
||||
<span class="info-value" id="displaySkuId"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品原价:</span>
|
||||
<span class="info-value" id="displayPrice"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">添加库存(负数代表减少库存) <span class="required">*</span></label>
|
||||
<div class="quantity-control">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalStockEdit', -1)">-</button>
|
||||
<input type="number" class="filter-input quantity-input" id="modalStockEdit" value="10">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalStockEdit', 1)">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">积分类型</label>
|
||||
<div class="info-display">积分换购</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">兑换所需积分设置 <span class="required">*</span></label>
|
||||
<div class="quantity-control">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalPoints', -1)">-</button>
|
||||
<input type="number" class="filter-input quantity-input" id="modalPointsRequired" value="1" min="1">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalPointsRequired', 1)">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">最低兑换金额（商业支付最少0.01元）</label>
|
||||
<input type="text" class="filter-input" id="modalMinAmount" value="0.01元" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑模式 - 积分优惠购 -->
|
||||
<div id="editModeDiscount" style="display: none;">
|
||||
<div class="product-info-section">
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品ID:</span>
|
||||
<span class="info-value" id="displayProductIdDiscount"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品名称:</span>
|
||||
<span class="info-value" id="displayProductNameDiscount"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">归属摊位:</span>
|
||||
<span class="info-value" id="displayStoreDiscount"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">规格名称:</span>
|
||||
<span class="info-value" id="displaySpecDiscount"></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品原价:</span>
|
||||
<span class="info-value" id="displayPriceDiscount"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">添加库存(负数代表减少库存) <span class="required">*</span></label>
|
||||
<div class="quantity-control">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalStockEditDiscount', -1)">-</button>
|
||||
<input type="number" class="filter-input quantity-input" id="modalStockEditDiscount" value="10">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalStockEditDiscount', 1)">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">积分类型</label>
|
||||
<div class="info-display">积分优惠购</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">积分抵扣金额设置 <span class="required">*</span></label>
|
||||
<input type="number" step="0.01" class="filter-input" id="modalDiscountAmount" placeholder="请输入积分抵扣金额" min="0.01">
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label class="filter-label">所需积分数量 <span class="required">*</span></label>
|
||||
<div class="quantity-control">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalDiscountPoints', -1)">-</button>
|
||||
<input type="number" class="filter-input quantity-input" id="modalDiscountPoints" value="100" min="1">
|
||||
<button type="button" class="quantity-btn" onclick="changeQuantity('modalDiscountPoints', 1)">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons">
|
||||
<button class="btn btn-secondary" onclick="hideModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveProduct()">保存</button>
|
||||
<button class="btn btn-primary" onclick="saveProduct()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -533,7 +760,11 @@
|
|||
originalStatus: '上架',
|
||||
pointsMode: '积分换购',
|
||||
stock: 10,
|
||||
enabled: true
|
||||
enabled: true,
|
||||
skuId: '19410514277450383601',
|
||||
pointsRequired: 50,
|
||||
discountAmount: null,
|
||||
discountPoints: null
|
||||
},
|
||||
{
|
||||
id: '002',
|
||||
|
|
@ -544,7 +775,11 @@
|
|||
originalStatus: '上架',
|
||||
pointsMode: '积分优惠购',
|
||||
stock: 10,
|
||||
enabled: true
|
||||
enabled: true,
|
||||
skuId: '19410514277450383602',
|
||||
pointsRequired: null,
|
||||
discountAmount: 2.00,
|
||||
discountPoints: 100
|
||||
},
|
||||
{
|
||||
id: '003',
|
||||
|
|
@ -555,7 +790,11 @@
|
|||
originalStatus: '下架',
|
||||
pointsMode: '积分换购',
|
||||
stock: 2,
|
||||
enabled: false
|
||||
enabled: false,
|
||||
skuId: '19410514277450383603',
|
||||
pointsRequired: 35,
|
||||
discountAmount: null,
|
||||
discountPoints: null
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -812,12 +1051,45 @@
|
|||
const product = pointsDiscountProducts[index];
|
||||
if (!product) return;
|
||||
|
||||
document.getElementById('modalTitle').textContent = '编辑商品';
|
||||
document.getElementById('modalProductName').value = product.name;
|
||||
document.getElementById('modalStore').value = product.store;
|
||||
document.getElementById('modalPrice').value = product.price;
|
||||
document.getElementById('modalPoints').value = product.pointsMode;
|
||||
document.getElementById('modalStock').value = product.stock;
|
||||
document.getElementById('modalTitle').textContent = '已选择商品';
|
||||
|
||||
// 隐藏所有模式
|
||||
document.getElementById('addMode').style.display = 'none';
|
||||
document.getElementById('editModeExchange').style.display = 'none';
|
||||
document.getElementById('editModeDiscount').style.display = 'none';
|
||||
|
||||
if (product.pointsMode === '积分换购') {
|
||||
// 显示积分换购编辑模式
|
||||
document.getElementById('editModeExchange').style.display = 'block';
|
||||
|
||||
// 填充商品信息
|
||||
document.getElementById('displayProductId').textContent = product.id;
|
||||
document.getElementById('displayProductName').textContent = product.name;
|
||||
document.getElementById('displayStore').textContent = product.store;
|
||||
document.getElementById('displaySpec').textContent = product.spec;
|
||||
document.getElementById('displaySkuId').textContent = product.skuId;
|
||||
document.getElementById('displayPrice').textContent = `¥${product.price.toFixed(2)}`;
|
||||
|
||||
// 设置可编辑字段
|
||||
document.getElementById('modalStockEdit').value = product.stock;
|
||||
document.getElementById('modalPointsRequired').value = product.pointsRequired || 1;
|
||||
} else {
|
||||
// 显示积分优惠购编辑模式
|
||||
document.getElementById('editModeDiscount').style.display = 'block';
|
||||
|
||||
// 填充商品信息
|
||||
document.getElementById('displayProductIdDiscount').textContent = product.id;
|
||||
document.getElementById('displayProductNameDiscount').textContent = product.name;
|
||||
document.getElementById('displayStoreDiscount').textContent = product.store;
|
||||
document.getElementById('displaySpecDiscount').textContent = product.spec;
|
||||
document.getElementById('displayPriceDiscount').textContent = `¥${product.price.toFixed(2)}`;
|
||||
|
||||
// 设置可编辑字段
|
||||
document.getElementById('modalStockEditDiscount').value = product.stock;
|
||||
document.getElementById('modalDiscountAmount').value = product.discountAmount || '';
|
||||
document.getElementById('modalDiscountPoints').value = product.discountPoints || 100;
|
||||
}
|
||||
|
||||
currentEditId = index;
|
||||
document.getElementById('productModal').style.display = 'block';
|
||||
} else {
|
||||
|
|
@ -827,6 +1099,13 @@
|
|||
|
||||
function showAddModal() {
|
||||
document.getElementById('modalTitle').textContent = '添加商品';
|
||||
|
||||
// 显示添加模式，隐藏编辑模式
|
||||
document.getElementById('addMode').style.display = 'block';
|
||||
document.getElementById('editModeExchange').style.display = 'none';
|
||||
document.getElementById('editModeDiscount').style.display = 'none';
|
||||
|
||||
// 清空表单
|
||||
document.getElementById('modalProductName').value = '';
|
||||
document.getElementById('modalStore').value = '';
|
||||
document.getElementById('modalPrice').value = '';
|
||||
|
|
@ -842,6 +1121,45 @@
|
|||
}
|
||||
|
||||
function saveProduct() {
|
||||
if (currentEditId !== null) {
|
||||
// 编辑模式
|
||||
const product = pointsDiscountProducts[currentEditId];
|
||||
|
||||
if (product.pointsMode === '积分换购') {
|
||||
// 积分换购模式
|
||||
const stock = parseInt(document.getElementById('modalStockEdit').value);
|
||||
const pointsRequired = parseInt(document.getElementById('modalPointsRequired').value);
|
||||
|
||||
if (stock === null || stock === undefined || !pointsRequired) {
|
||||
alert('请填写所有必填字段');
|
||||
return;
|
||||
}
|
||||
|
||||
pointsDiscountProducts[currentEditId] = {
|
||||
...product,
|
||||
stock,
|
||||
pointsRequired
|
||||
};
|
||||
} else {
|
||||
// 积分优惠购模式
|
||||
const stock = parseInt(document.getElementById('modalStockEditDiscount').value);
|
||||
const discountAmount = parseFloat(document.getElementById('modalDiscountAmount').value);
|
||||
const discountPoints = parseInt(document.getElementById('modalDiscountPoints').value);
|
||||
|
||||
if (stock === null || stock === undefined || !discountAmount || !discountPoints) {
|
||||
alert('请填写所有必填字段');
|
||||
return;
|
||||
}
|
||||
|
||||
pointsDiscountProducts[currentEditId] = {
|
||||
...product,
|
||||
stock,
|
||||
discountAmount,
|
||||
discountPoints
|
||||
};
|
||||
}
|
||||
} else {
|
||||
// 添加模式
|
||||
const name = document.getElementById('modalProductName').value;
|
||||
const store = document.getElementById('modalStore').value;
|
||||
const price = parseFloat(document.getElementById('modalPrice').value);
|
||||
|
|
@ -853,13 +1171,9 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if (currentEditId !== null) {
|
||||
pointsDiscountProducts[currentEditId] = {
|
||||
...pointsDiscountProducts[currentEditId],
|
||||
name, store, price, pointsMode, stock
|
||||
};
|
||||
} else {
|
||||
const newId = String(Math.max(...pointsDiscountProducts.map(p => parseInt(p.id))) + 1).padStart(3, '0');
|
||||
const newSkuId = `1941051427745038360${newId}`;
|
||||
|
||||
pointsDiscountProducts.push({
|
||||
id: newId,
|
||||
name,
|
||||
|
|
@ -869,7 +1183,11 @@
|
|||
originalStatus: '上架',
|
||||
pointsMode,
|
||||
stock,
|
||||
enabled: true
|
||||
enabled: true,
|
||||
skuId: newSkuId,
|
||||
pointsRequired: pointsMode === '积分换购' ? Math.floor(price * 10) : null,
|
||||
discountAmount: pointsMode === '积分优惠购' ? Math.floor(price * 0.2 * 100) / 100 : null,
|
||||
discountPoints: pointsMode === '积分优惠购' ? 100 : null
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -877,6 +1195,24 @@
|
|||
renderPointsDiscountProducts();
|
||||
}
|
||||
|
||||
// 数量控制函数
|
||||
function changeQuantity(inputId, change) {
|
||||
const input = document.getElementById(inputId);
|
||||
const currentValue = parseInt(input.value) || 0;
|
||||
// 对于库存设置允许负数，其他字段保持最小值限制
|
||||
if (inputId.includes('Stock')) {
|
||||
input.value = currentValue + change;
|
||||
} else {
|
||||
const newValue = Math.max(0, currentValue + change);
|
||||
input.value = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新积分模式函数（用于添加模式）
|
||||
function updatePointsMode() {
|
||||
// 预留函数，可以在选择积分模式时进行相关处理
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
const modal = document.getElementById('productModal');
|
||||
if (e.target === modal) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>已选择商品</title>
|
||||
<title>积分优惠购 - 已选择商品</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -46,6 +46,15 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
.points-type-badge {
|
||||
background: #52c41a;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -179,83 +188,14 @@
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 10px 32px 10px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
.price-info {
|
||||
background: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.limit-setting {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.limit-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.limit-select {
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio-option input[type="radio"] {
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-option label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.exchange-only,
|
||||
.discount-only {
|
||||
transition: opacity 0.3s ease;
|
||||
font-size: 13px;
|
||||
color: #d46b08;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
|
|
@ -323,7 +263,10 @@
|
|||
<body>
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">已选择商品</h2>
|
||||
<h2 class="modal-title">
|
||||
已选择商品
|
||||
<span class="points-type-badge">积分优惠购</span>
|
||||
</h2>
|
||||
<button class="close-btn" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -369,52 +312,21 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">积分类型 <span class="required">*</span></label>
|
||||
<div class="radio-group">
|
||||
<div class="radio-option">
|
||||
<input type="radio" id="pointsDiscount" name="pointsType" value="discount" checked onchange="toggleFieldsByType()">
|
||||
<label for="pointsDiscount">积分优惠购</label>
|
||||
</div>
|
||||
<div class="radio-option">
|
||||
<input type="radio" id="pointsExchange" name="pointsType" value="exchange" onchange="toggleFieldsByType()">
|
||||
<label for="pointsExchange">积分换购</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 积分换购专用字段 -->
|
||||
<div class="form-group exchange-only">
|
||||
<label class="form-label">兑换所需积分设置 <span class="required">*</span></label>
|
||||
<div class="number-input-group">
|
||||
<button class="number-btn" onclick="decreasePoints()">-</button>
|
||||
<input type="number" class="number-input" id="pointsInput" value="1" min="1">
|
||||
<button class="number-btn" onclick="increasePoints()">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最低兑换金额 -->
|
||||
<div class="form-group exchange-only">
|
||||
<label class="form-label">最低兑换金额（商业支付最少0.01元）</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" class="form-input" value="0.01元" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 积分优惠购专用字段 -->
|
||||
<div class="form-group discount-only" style="display: none;">
|
||||
<label class="form-label">优惠购所需积分 <span class="required">*</span></label>
|
||||
<div class="number-input-group">
|
||||
<button class="number-btn" onclick="decreaseDiscountPoints()">-</button>
|
||||
<input type="number" class="number-input" id="discountPointsInput" value="1" min="1">
|
||||
<input type="number" class="number-input" id="discountPointsInput" value="100" min="1">
|
||||
<button class="number-btn" onclick="increaseDiscountPoints()">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group discount-only" style="display: none;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">优惠购商品价格 <span class="required">*</span></label>
|
||||
<div class="input-wrapper">
|
||||
<input type="number" class="form-input" id="discountPriceInput" placeholder="请输入优惠购价格" step="0.01" min="0">
|
||||
<input type="number" class="form-input" id="discountPriceInput" placeholder="请输入优惠购价格" step="0.01" min="0" value="8.80">
|
||||
</div>
|
||||
<div class="price-info">
|
||||
提示：用户需要支付 <span id="discountPointsDisplay">100</span> 积分 + ¥<span id="discountPriceDisplay">8.80</span> 即可购买此商品
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -426,24 +338,11 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
// 积分设置（兑换专用）
|
||||
function increasePoints() {
|
||||
const input = document.getElementById('pointsInput');
|
||||
input.value = parseInt(input.value) + 1;
|
||||
}
|
||||
|
||||
function decreasePoints() {
|
||||
const input = document.getElementById('pointsInput');
|
||||
const currentValue = parseInt(input.value);
|
||||
if (currentValue > 1) {
|
||||
input.value = currentValue - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 优惠购积分设置
|
||||
function increaseDiscountPoints() {
|
||||
const input = document.getElementById('discountPointsInput');
|
||||
input.value = parseInt(input.value) + 1;
|
||||
updatePriceInfo();
|
||||
}
|
||||
|
||||
function decreaseDiscountPoints() {
|
||||
|
|
@ -451,6 +350,7 @@
|
|||
const currentValue = parseInt(input.value);
|
||||
if (currentValue > 1) {
|
||||
input.value = currentValue - 1;
|
||||
updatePriceInfo();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -468,59 +368,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 更新价格提示信息
|
||||
function updatePriceInfo() {
|
||||
const points = document.getElementById('discountPointsInput').value;
|
||||
const price = document.getElementById('discountPriceInput').value;
|
||||
|
||||
document.getElementById('discountPointsDisplay').textContent = points;
|
||||
document.getElementById('discountPriceDisplay').textContent = price || '0.00';
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
// 这里可以添加关闭弹窗的逻辑
|
||||
console.log('关闭弹窗');
|
||||
// 实际应用中可能会隐藏弹窗或者跳转页面
|
||||
// window.close(); // 如果是新窗口
|
||||
// 或者隐藏弹窗元素
|
||||
}
|
||||
|
||||
// 切换字段显示
|
||||
function toggleFieldsByType() {
|
||||
const pointsType = document.querySelector('input[name="pointsType"]:checked').value;
|
||||
const exchangeFields = document.querySelectorAll('.exchange-only');
|
||||
const discountFields = document.querySelectorAll('.discount-only');
|
||||
|
||||
if (pointsType === 'exchange') {
|
||||
// 积分换购：显示兑换字段，隐藏优惠购字段
|
||||
exchangeFields.forEach(field => field.style.display = 'block');
|
||||
discountFields.forEach(field => field.style.display = 'none');
|
||||
} else if (pointsType === 'discount') {
|
||||
// 积分优惠购：隐藏兑换字段，显示优惠购字段
|
||||
exchangeFields.forEach(field => field.style.display = 'none');
|
||||
discountFields.forEach(field => field.style.display = 'block');
|
||||
}
|
||||
}
|
||||
|
||||
// 确认选择
|
||||
function confirmSelection() {
|
||||
const pointsType = document.querySelector('input[name="pointsType"]:checked').value;
|
||||
const stock = document.getElementById('stockInput').value;
|
||||
|
||||
let data = {
|
||||
productId: '192401649879976960',
|
||||
productName: '黑木耳100g',
|
||||
shopName: '牛生蔬菜店',
|
||||
skuId: '194105142774503836',
|
||||
pointsType: pointsType,
|
||||
stock: stock
|
||||
};
|
||||
|
||||
if (pointsType === 'exchange') {
|
||||
// 积分换购验证
|
||||
const points = document.getElementById('pointsInput').value;
|
||||
|
||||
if (!points || !stock) {
|
||||
alert('请填写所有必填项');
|
||||
return;
|
||||
}
|
||||
|
||||
data.points = points;
|
||||
} else if (pointsType === 'discount') {
|
||||
// 积分优惠购验证
|
||||
const discountPoints = document.getElementById('discountPointsInput').value;
|
||||
const discountPrice = document.getElementById('discountPriceInput').value;
|
||||
|
||||
|
|
@ -529,14 +393,30 @@
|
|||
return;
|
||||
}
|
||||
|
||||
data.discountPoints = discountPoints;
|
||||
data.discountPrice = discountPrice;
|
||||
if (parseFloat(discountPrice) < 0) {
|
||||
alert('优惠购价格不能为负数');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
productId: '192401649879976960',
|
||||
productName: '黑木耳',
|
||||
shopName: '牛生蔬菜店',
|
||||
skuId: '194105142774503836',
|
||||
pointsType: 'discount',
|
||||
stock: stock,
|
||||
discountPoints: discountPoints,
|
||||
discountPrice: discountPrice
|
||||
};
|
||||
|
||||
console.log('提交数据:', data);
|
||||
alert('设置成功！');
|
||||
alert('积分优惠购设置成功！');
|
||||
}
|
||||
|
||||
// 监听价格输入变化
|
||||
document.getElementById('discountPriceInput').addEventListener('input', updatePriceInfo);
|
||||
document.getElementById('discountPointsInput').addEventListener('input', updatePriceInfo);
|
||||
|
||||
// 键盘事件处理
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
|
|
@ -551,9 +431,9 @@
|
|||
}
|
||||
});
|
||||
|
||||
// 页面加载时初始化字段显示
|
||||
// 页面加载时初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
toggleFieldsByType();
|
||||
updatePriceInfo();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,449 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>积分换购 - 已选择商品</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.points-type-badge {
|
||||
background: #fa8c16;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.number-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.number-input-group:focus-within {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.number-btn {
|
||||
width: 32px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.number-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.number-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.exchange-info {
|
||||
background: #fff2e8;
|
||||
border: 1px solid #ffbb96;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #d4380d;
|
||||
}
|
||||
|
||||
.exchange-note {
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #0050b3;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: white;
|
||||
color: #666;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #bfbfbf;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.modal {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: 100vh;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">
|
||||
已选择商品
|
||||
<span class="points-type-badge">积分换购</span>
|
||||
</h2>
|
||||
<button class="close-btn" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="product-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品ID:</span>
|
||||
<span class="info-value">192401649879976960</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品名称:</span>
|
||||
<span class="info-value">黑木耳</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">归属摊位:</span>
|
||||
<span class="info-value">牛生蔬菜店</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">规格名称:</span>
|
||||
<span class="info-value">小份</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">SKU-ID:</span>
|
||||
<span class="info-value">194105142774503836</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">商品原价:</span>
|
||||
<span class="info-value">¥12.80</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">当前剩余库存:</span>
|
||||
<span class="info-value">50</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">添加库存（负数代表减少库存） <span class="required">*</span></label>
|
||||
<div class="number-input-group">
|
||||
<button class="number-btn" onclick="decreaseStock()">-</button>
|
||||
<input type="number" class="number-input" id="stockInput" value="10" min="0">
|
||||
<button class="number-btn" onclick="increaseStock()">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">兑换所需积分设置 <span class="required">*</span></label>
|
||||
<div class="number-input-group">
|
||||
<button class="number-btn" onclick="decreasePoints()">-</button>
|
||||
<input type="number" class="number-input" id="pointsInput" value="1280" min="1">
|
||||
<button class="number-btn" onclick="increasePoints()">+</button>
|
||||
</div>
|
||||
<div class="exchange-info">
|
||||
用户需要支付 <span id="pointsDisplay">1280</span> 积分 + ¥0.01 即可兑换此商品
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">最低兑换金额（商业支付最少0.01元）</label>
|
||||
<div class="input-wrapper">
|
||||
<input type="text" class="form-input" value="¥0.01" readonly>
|
||||
</div>
|
||||
<div class="exchange-note">
|
||||
提示：为符合商业支付规范，用户在使用积分兑换时仍需支付最少0.01元的金额
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-cancel" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmSelection()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 积分设置（兑换专用）
|
||||
function increasePoints() {
|
||||
const input = document.getElementById('pointsInput');
|
||||
input.value = parseInt(input.value) + 10;
|
||||
updateExchangeInfo();
|
||||
}
|
||||
|
||||
function decreasePoints() {
|
||||
const input = document.getElementById('pointsInput');
|
||||
const currentValue = parseInt(input.value);
|
||||
if (currentValue > 1) {
|
||||
input.value = Math.max(1, currentValue - 10);
|
||||
updateExchangeInfo();
|
||||
}
|
||||
}
|
||||
|
||||
// 库存设置
|
||||
function increaseStock() {
|
||||
const input = document.getElementById('stockInput');
|
||||
input.value = parseInt(input.value) + 1;
|
||||
}
|
||||
|
||||
function decreaseStock() {
|
||||
const input = document.getElementById('stockInput');
|
||||
const currentValue = parseInt(input.value);
|
||||
if (currentValue > 0) {
|
||||
input.value = currentValue - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新兑换信息提示
|
||||
function updateExchangeInfo() {
|
||||
const points = document.getElementById('pointsInput').value;
|
||||
document.getElementById('pointsDisplay').textContent = points;
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
console.log('关闭弹窗');
|
||||
}
|
||||
|
||||
// 确认选择
|
||||
function confirmSelection() {
|
||||
const stock = document.getElementById('stockInput').value;
|
||||
const points = document.getElementById('pointsInput').value;
|
||||
|
||||
if (!points || !stock) {
|
||||
alert('请填写所有必填项');
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseInt(points) < 1) {
|
||||
alert('兑换积分不能小于1');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
productId: '192401649879976960',
|
||||
productName: '黑木耳',
|
||||
shopName: '牛生蔬菜店',
|
||||
skuId: '194105142774503836',
|
||||
pointsType: 'exchange',
|
||||
stock: stock,
|
||||
points: points,
|
||||
minPayment: 0.01
|
||||
};
|
||||
|
||||
console.log('提交数据:', data);
|
||||
alert('积分换购设置成功！');
|
||||
}
|
||||
|
||||
// 监听积分输入变化
|
||||
document.getElementById('pointsInput').addEventListener('input', updateExchangeInfo);
|
||||
|
||||
// 键盘事件处理
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 点击背景关闭弹窗
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target === document.body) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载时初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateExchangeInfo();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue