123 lines
4.2 KiB
JavaScript
123 lines
4.2 KiB
JavaScript
// 积分商品页面 - H5版本
|
|
|
|
let productData = [];
|
|
|
|
// 页面初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadProductData();
|
|
});
|
|
|
|
// 加载积分商品数据
|
|
function loadProductData() {
|
|
// 使用模拟数据
|
|
productData = [
|
|
{ id: 1, name: '5元优惠券', points: 500, stock: 100, description: '满50元可用', status: '上架' },
|
|
{ id: 2, name: '10元优惠券', points: 1000, stock: 50, description: '满100元可用', status: '上架' },
|
|
{ id: 3, name: '精美水杯', points: 2000, stock: 20, description: '品牌水杯', status: '上架' },
|
|
{ id: 4, name: '购物袋', points: 800, stock: 30, description: '环保购物袋', status: '下架' },
|
|
{ id: 5, name: '20元优惠券', points: 2000, stock: 0, description: '满200元可用', status: '缺货' },
|
|
{ id: 6, name: '手机支架', points: 1500, stock: 15, description: '便携手机支架', status: '上架' }
|
|
];
|
|
|
|
renderTable();
|
|
}
|
|
|
|
// 渲染表格
|
|
function renderTable() {
|
|
const tableBody = document.getElementById('product-table-body');
|
|
tableBody.innerHTML = productData.map(product => `
|
|
<tr>
|
|
<td>${product.name}</td>
|
|
<td>${product.points}</td>
|
|
<td>
|
|
<span style="color: ${product.stock === 0 ? '#f44336' : '#333'};">
|
|
${product.stock}
|
|
</span>
|
|
</td>
|
|
<td>${product.description}</td>
|
|
<td>
|
|
<span style="color: ${getStatusColor(product.status)};">
|
|
${product.status}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-small btn-primary" onclick="editProduct(${product.id})">
|
|
编辑
|
|
</button>
|
|
${product.status !== '缺货' ? `
|
|
<button class="btn btn-small"
|
|
style="background: ${product.status === '上架' ? '#f44336' : '#4CAF50'}; color: white;"
|
|
onclick="toggleProductStatus(${product.id})">
|
|
${product.status === '上架' ? '下架' : '上架'}
|
|
</button>
|
|
` : ''}
|
|
<button class="btn btn-small" onclick="addStock(${product.id})">
|
|
补货
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
// 获取状态颜色
|
|
function getStatusColor(status) {
|
|
switch(status) {
|
|
case '上架': return '#4CAF50';
|
|
case '下架': return '#ff9800';
|
|
case '缺货': return '#f44336';
|
|
default: return '#333';
|
|
}
|
|
}
|
|
|
|
// 添加商品
|
|
function addProduct() {
|
|
showNotification('打开添加商品界面', 'info');
|
|
console.log('添加新商品');
|
|
}
|
|
|
|
// 编辑商品
|
|
function editProduct(productId) {
|
|
const product = productData.find(p => p.id === productId);
|
|
if (product) {
|
|
showNotification(`编辑商品：${product.name}`, 'info');
|
|
console.log('编辑商品:', product);
|
|
}
|
|
}
|
|
|
|
// 切换商品状态
|
|
function toggleProductStatus(productId) {
|
|
const product = productData.find(p => p.id === productId);
|
|
if (product && product.status !== '缺货') {
|
|
const newStatus = product.status === '上架' ? '下架' : '上架';
|
|
|
|
confirmAction(`确定要${newStatus}商品"${product.name}"吗？`, () => {
|
|
product.status = newStatus;
|
|
renderTable();
|
|
showNotification(`商品"${product.name}"已${newStatus}`, 'success');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 补货
|
|
function addStock(productId) {
|
|
const product = productData.find(p => p.id === productId);
|
|
if (product) {
|
|
// 简单的补货逻辑，这里可以改为弹窗输入具体数量
|
|
const addAmount = 50;
|
|
product.stock += addAmount;
|
|
|
|
// 如果原来是缺货状态，改为上架
|
|
if (product.status === '缺货') {
|
|
product.status = '上架';
|
|
}
|
|
|
|
renderTable();
|
|
showNotification(`商品"${product.name}"已补货${addAmount}件`, 'success');
|
|
}
|
|
}
|
|
|
|
// 导出函数到全局
|
|
window.addProduct = addProduct;
|
|
window.editProduct = editProduct;
|
|
window.toggleProductStatus = toggleProductStatus;
|
|
window.addStock = addStock; |