linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(积分商城): 重构积分商城功能，增加积分优惠和双倍积分模式 

- 商家端APP和Web的积分商城功能重构，提供更灵活的积分营销方式。
- 商家端APP积分商城页面增加Tab切换，用于区分管理“积分优惠”和“双倍积分”商品。
- 优化了商家端APP积分商城页面的UI和交互，包括商品启用开关、编辑和添加逻辑。
- 修复了商家端Web积分商城页面表格中多余的复选框。
- 更新了相关的原型设计文件。
This commit is contained in:
linbin 2025-08-19 00:59:37 +08:00
parent feb0fcfdf7
commit 8ee3ab19b6
3 changed files with 439 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

527
商家端APP/1 工作台/1.1 会员管理/1.1.3 积分商城/积分商城.html
View File

@ -23,6 +23,54 @@
padding: 0 16px;
}
.tabs {
background: #fff;
margin: 12px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
.tab-buttons {
display: flex;
background: #f8f9fa;
}
.tab-button {
flex: 1;
padding: 16px;
background: none;
border: none;
font-size: 16px;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.tab-button.active {
color: #007AFF;
background: #fff;
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: #007AFF;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.header {
background: #fff;
padding: 16px 0;
@ -149,6 +197,51 @@
transform: scale(0.95);
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 28px;
}
.slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #007AFF;
}
input:checked + .slider:before {
transform: translateX(22px);
}
.product-list {
margin-bottom: 80px;
}
@ -174,10 +267,6 @@
font-weight: 600;
}
.product-checkbox {
width: 20px;
height: 20px;
}
.product-name {
font-size: 16px;
@ -311,37 +400,87 @@
</div>
<div class="container">
<div class="tabs">
<div class="tab-buttons">
<button class="tab-button active" onclick="switchTab(event, 'points-discount')">积分优惠</button>
<button class="tab-button" onclick="switchTab(event, 'double-points')">双倍积分</button>
</div>
</div>
<div id="points-discount" class="tab-content active">
<div class="filter-section">
<div class="filter-row">
<label class="filter-label">商铺</label>
<select class="filter-select" id="storeSelect">
<option value="">请选择商铺</option>
<option value="生生蔬菜店">生生蔬菜店</option>
<select class="filter-select" id="storeSelect1">
<option value="">生生蔬菜店</option>
<option value="其他店铺">其他店铺</option>
</select>
</div>
<div class="filter-row">
<label class="filter-label">商品ID</label>
<input type="text" class="filter-input" id="productId" placeholder="请输入商品ID">
<input type="text" class="filter-input" id="productId1" placeholder="请输入商品ID">
</div>
<div class="filter-row">
<label class="filter-label">商品名称</label>
<input type="text" class="filter-input" id="productName" placeholder="请输入商品名称">
<input type="text" class="filter-input" id="productName1" placeholder="请输入商品名称">
</div>
<div class="filter-buttons">
<button class="btn btn-primary" onclick="searchProducts()">查询</button>
<button class="btn btn-secondary" onclick="resetFilters()">重置</button>
<button class="btn btn-primary" onclick="searchProducts(1)">查询</button>
<button class="btn btn-secondary" onclick="resetFilters(1)">重置</button>
</div>
</div>
<div class="product-list" id="productList">
<div class="loading" id="loading">加载中...</div>
<div class="product-list" id="productList1">
<div class="loading" id="loading1">加载中...</div>
</div>
</div>
<button class="add-button" onclick="showAddModal()">+</button>
<div id="double-points" class="tab-content">
<div class="filter-section">
<div class="filter-row">
<label class="filter-label">商铺</label>
<select class="filter-select" id="storeSelect2">
<option value="">生生蔬菜店</option>
<option value="其他店铺">其他店铺</option>
</select>
</div>
<div class="filter-row">
<label class="filter-label">商品ID</label>
<input type="text" class="filter-input" id="productId2" placeholder="请输入商品ID">
</div>
<div class="filter-row">
<label class="filter-label">商品名称</label>
<input type="text" class="filter-input" id="productName2" placeholder="请输入商品名称">
</div>
<div class="filter-row">
<label class="filter-label">是否启用双倍积分</label>
<select class="filter-select" id="doublePointsFilter">
<option value="all">全部</option>
<option value="enabled">启用</option>
<option value="disabled">关闭</option>
</select>
</div>
<div class="filter-buttons">
<button class="btn btn-primary" onclick="searchProducts(2)">查询</button>
<button class="btn btn-secondary" onclick="resetFilters(2)">重置</button>
</div>
</div>
<div class="product-list" id="productList2">
<div class="loading" id="loading2">加载中...</div>
</div>
</div>
</div>
<button class="add-button" onclick="showAddModal()" id="addButton1" style="display: block;">+</button>
<button class="add-button" onclick="showAddModal()" id="addButton2" style="display: none;">+</button>
<div class="modal" id="productModal">
<div class="modal-content">
@ -363,8 +502,12 @@
<input type="number" step="0.01" class="filter-input" id="modalPrice" placeholder="请输入商品价格">
</div>
<div class="filter-row">
<label class="filter-label">兑换积分</label>
<input type="number" class="filter-input" id="modalPoints" placeholder="请输入兑换积分">
<label class="filter-label">积分使用模式</label>
<select class="filter-select" id="modalPoints">
<option value="">请选择积分使用模式</option>
<option value="积分换购">积分换购</option>
<option value="积分优惠购">积分优惠购</option>
</select>
</div>
<div class="filter-row">
<label class="filter-label">剩余兑换库存</label>
@ -379,40 +522,101 @@
</div>
<script>
let products = [
// 积分优惠商品数据
let pointsDiscountProducts = [
{
name: '黑木耳100g',
id: '001',
name: '黑木耳',
spec: '小份',
store: '生生蔬菜店',
price: 5.50,
points: 1,
price: 5.00,
originalStatus: '上架',
pointsMode: '积分换购',
stock: 10,
exchanged: 0,
createdTime: '2024-01-15 09:30:00'
enabled: true
},
{
name: '苦瓜200g',
id: '002',
name: '黑木耳',
spec: '大份',
store: '生生蔬菜店',
price: 3.80,
points: 1,
price: 8.00,
originalStatus: '上架',
pointsMode: '积分优惠购',
stock: 10,
exchanged: 0,
createdTime: '2024-01-16 14:20:00'
enabled: true
},
{
name: '番茄500g',
id: '003',
name: '番茄',
spec: '无',
store: '生生蔬菜店',
price: 8.90,
points: 2,
price: 3.50,
originalStatus: '下架',
pointsMode: '积分换购',
stock: 2,
exchanged: 0,
createdTime: '2024-01-17 10:45:00'
enabled: false
}
];
// 双倍积分商品数据
let doublePointsProducts = [
{
id: '001',
name: '黑木耳',
store: '生生蔬菜店',
price: 5.00,
originalStatus: '上架',
enabled: true
},
{
id: '002',
name: '黑木耳',
store: '生生蔬菜店',
price: 8.00,
originalStatus: '上架',
enabled: true
},
{
id: '003',
name: '番茄',
store: '生生蔬菜店',
price: 3.50,
originalStatus: '下架',
enabled: false
},
{
id: '004',
name: '冬瓜',
store: '生生蔬菜店',
price: 12.00,
originalStatus: '上架',
enabled: true
},
{
id: '005',
name: '土豆',
store: '生生蔬菜店',
price: 6.00,
originalStatus: '上架',
enabled: true
},
{
id: '006',
name: '白萝卜',
store: '生生蔬菜店',
price: 4.50,
originalStatus: '上架',
enabled: true
}
];
let currentTab = 1; // 1: 积分优惠, 2: 双倍积分
let currentEditId = null;
function renderProducts(productsToRender = products) {
const productList = document.getElementById('productList');
// 渲染积分优惠商品
function renderPointsDiscountProducts(productsToRender = pointsDiscountProducts) {
const productList = document.getElementById('productList1');
if (productsToRender.length === 0) {
productList.innerHTML = `
@ -426,63 +630,199 @@
productList.innerHTML = productsToRender.map((product, index) => `
<div class="product-card">
<div class="product-header">
<div class="product-name">${product.name}</div>
<input type="checkbox" class="product-checkbox">
<div class="product-id">ID: ${product.id}</div>
</div>
<div class="product-name">${product.name}</div>
<div class="product-info">
<div class="info-item">
<span class="info-label">规格名称</span>
<span class="info-value">${product.spec}</span>
</div>
<div class="info-item">
<span class="info-label">归属店铺</span>
<span class="info-value">${product.store}</span>
</div>
<div class="info-item">
<span class="info-label">商品价格</span>
<span class="info-value">¥${product.price}</span>
<span class="info-label">商品原价</span>
<span class="info-value">¥${product.price.toFixed(2)}</span>
</div>
<div class="info-item">
<span class="info-label">兑换积分</span>
<span class="info-value">${product.points}</span>
<span class="info-label">原有商品状态</span>
<span class="info-value">${product.originalStatus}</span>
</div>
<div class="info-item">
<span class="info-label">积分使用模式</span>
<span class="info-value">${product.pointsMode}</span>
</div>
<div class="info-item">
<span class="info-label">剩余库存</span>
<span class="info-value">${product.stock}</span>
</div>
<div class="info-item">
<span class="info-label">已兑换数量</span>
<span class="info-value">${product.exchanged}</span>
</div>
<div class="info-item">
<span class="info-label">成为积分商品时间</span>
<span class="info-value">${product.createdTime}</span>
<span class="info-label">启用状态</span>
<label class="switch">
<input type="checkbox" ${product.enabled ? 'checked' : ''} onchange="toggleProduct(1, ${index})">
<span class="slider"></span>
</label>
</div>
</div>
<div class="product-actions">
<button class="btn-small btn-success" onclick="editProduct(${index})">编辑</button>
<button class="btn-small btn-danger" onclick="deleteProduct(${index})">删除</button>
<button class="btn-small btn-success" onclick="editProduct(1, ${index})">编辑</button>
</div>
</div>
`).join('');
}
function searchProducts() {
const storeFilter = document.getElementById('storeSelect').value;
const idFilter = document.getElementById('productId').value.toLowerCase();
const nameFilter = document.getElementById('productName').value.toLowerCase();
// 渲染双倍积分商品
function renderDoublePointsProducts(productsToRender = doublePointsProducts) {
const productList = document.getElementById('productList2');
const filteredProducts = products.filter(product => {
const matchStore = !storeFilter || product.store === storeFilter;
const matchName = !nameFilter || product.name.toLowerCase().includes(nameFilter);
return matchStore && matchName;
});
renderProducts(filteredProducts);
if (productsToRender.length === 0) {
productList.innerHTML = `
<div class="empty-state">
<div>暂无商品数据</div>
</div>
`;
return;
}
function resetFilters() {
document.getElementById('storeSelect').value = '';
document.getElementById('productId').value = '';
document.getElementById('productName').value = '';
renderProducts();
productList.innerHTML = productsToRender.map((product, index) => `
<div class="product-card">
<div class="product-header">
<div class="product-id">ID: ${product.id}</div>
</div>
<div class="product-name">${product.name}</div>
<div class="product-info">
<div class="info-item">
<span class="info-label">归属店铺</span>
<span class="info-value">${product.store}</span>
</div>
<div class="info-item">
<span class="info-label">商品原价</span>
<span class="info-value">¥${product.price.toFixed(2)}</span>
</div>
<div class="info-item">
<span class="info-label">原有商品状态</span>
<span class="info-value">${product.originalStatus}</span>
</div>
<div class="info-item">
<span class="info-label">是否启用</span>
<label class="switch">
<input type="checkbox" ${product.enabled ? 'checked' : ''} onchange="toggleProduct(2, ${index})">
<span class="slider"></span>
</label>
</div>
</div>
</div>
`).join('');
}
function searchProducts(tabIndex) {
if (tabIndex === 1) {
const storeFilter = document.getElementById('storeSelect1').value;
const idFilter = document.getElementById('productId1').value.toLowerCase();
const nameFilter = document.getElementById('productName1').value.toLowerCase();
const filteredProducts = pointsDiscountProducts.filter(product => {
const matchStore = !storeFilter || product.store === storeFilter;
const matchId = !idFilter || product.id.toLowerCase().includes(idFilter);
const matchName = !nameFilter || product.name.toLowerCase().includes(nameFilter);
return matchStore && matchId && matchName;
});
renderPointsDiscountProducts(filteredProducts);
} else {
const storeFilter = document.getElementById('storeSelect2').value;
const idFilter = document.getElementById('productId2').value.toLowerCase();
const nameFilter = document.getElementById('productName2').value.toLowerCase();
const enabledFilter = document.getElementById('doublePointsFilter').value;
const filteredProducts = doublePointsProducts.filter(product => {
const matchStore = !storeFilter || product.store === storeFilter;
const matchId = !idFilter || product.id.toLowerCase().includes(idFilter);
const matchName = !nameFilter || product.name.toLowerCase().includes(nameFilter);
let matchEnabled = true;
if (enabledFilter === 'enabled') {
matchEnabled = product.enabled;
} else if (enabledFilter === 'disabled') {
matchEnabled = !product.enabled;
}
return matchStore && matchId && matchName && matchEnabled;
});
renderDoublePointsProducts(filteredProducts);
}
}
function resetFilters(tabIndex) {
if (tabIndex === 1) {
document.getElementById('storeSelect1').value = '';
document.getElementById('productId1').value = '';
document.getElementById('productName1').value = '';
renderPointsDiscountProducts();
} else {
document.getElementById('storeSelect2').value = '';
document.getElementById('productId2').value = '';
document.getElementById('productName2').value = '';
document.getElementById('doublePointsFilter').value = 'all';
renderDoublePointsProducts();
}
}
function switchTab(evt, tabName) {
const tabcontent = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
const tablinks = document.getElementsByClassName("tab-button");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
// 切换添加按钮的显示
if (tabName === 'points-discount') {
document.getElementById('addButton1').style.display = 'block';
document.getElementById('addButton2').style.display = 'none';
currentTab = 1;
} else {
document.getElementById('addButton1').style.display = 'none';
document.getElementById('addButton2').style.display = 'block';
currentTab = 2;
}
}
function toggleProduct(tabIndex, index) {
if (tabIndex === 1) {
pointsDiscountProducts[index].enabled = !pointsDiscountProducts[index].enabled;
renderPointsDiscountProducts();
} else {
doublePointsProducts[index].enabled = !doublePointsProducts[index].enabled;
renderDoublePointsProducts();
}
}
function editProduct(tabIndex, index) {
if (tabIndex === 1) {
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;
currentEditId = index;
document.getElementById('productModal').style.display = 'block';
} else {
alert('双倍积分功能暂无编辑功能');
}
}
function showAddModal() {
@ -496,27 +836,6 @@
document.getElementById('productModal').style.display = 'block';
}
function editProduct(index) {
const product = products[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.points;
document.getElementById('modalStock').value = product.stock;
currentEditId = index;
document.getElementById('productModal').style.display = 'block';
}
function deleteProduct(index) {
if (confirm('确定要删除这个商品吗？')) {
products.splice(index, 1);
renderProducts();
}
}
function hideModal() {
document.getElementById('productModal').style.display = 'none';
currentEditId = null;
@ -526,35 +845,36 @@
const name = document.getElementById('modalProductName').value;
const store = document.getElementById('modalStore').value;
const price = parseFloat(document.getElementById('modalPrice').value);
const points = parseInt(document.getElementById('modalPoints').value);
const pointsMode = document.getElementById('modalPoints').value;
const stock = parseInt(document.getElementById('modalStock').value);
if (!name || !store || !price || !points || !stock) {
if (!name || !store || !price || !pointsMode || !stock) {
alert('请填写所有必填字段');
return;
}
if (currentEditId !== null) {
products[currentEditId] = {
...products[currentEditId],
name, store, price, points, stock
pointsDiscountProducts[currentEditId] = {
...pointsDiscountProducts[currentEditId],
name, store, price, pointsMode, stock
};
} else {
const now = new Date();
const createdTime = now.getFullYear() + '-' +
String(now.getMonth() + 1).padStart(2, '0') + '-' +
String(now.getDate()).padStart(2, '0') + ' ' +
String(now.getHours()).padStart(2, '0') + ':' +
String(now.getMinutes()).padStart(2, '0') + ':' +
String(now.getSeconds()).padStart(2, '0');
products.push({
name, store, price, points, stock, exchanged: 0, createdTime
const newId = String(Math.max(...pointsDiscountProducts.map(p => parseInt(p.id))) + 1).padStart(3, '0');
pointsDiscountProducts.push({
id: newId,
name,
spec: '无',
store,
price,
originalStatus: '上架',
pointsMode,
stock,
enabled: true
});
}
hideModal();
renderProducts();
renderPointsDiscountProducts();
}
document.addEventListener('click', function(e) {
@ -565,7 +885,8 @@
});
setTimeout(() => {
renderProducts();
renderPointsDiscountProducts();
renderDoublePointsProducts();
}, 500);
</script>
</body>

33
商家端web/2.1 营销工具/2.1.1 会员功能/积分商城/积分商城.html
View File

@ -335,9 +335,6 @@
<table class="data-table">
<thead>
<tr>
<th width="50">
<input type="checkbox" class="checkbox">
</th>
<th width="100">商品ID</th>
<th width="150">商品名称</th>
<th width="150">规格名称</th>
@ -352,9 +349,6 @@
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>001</td>
<td>黑木耳</td>
<td>小份</td>
@ -376,9 +370,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>002</td>
<td>黑木耳</td>
<td>大份</td>
@ -400,9 +391,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>003</td>
<td>番茄</td>
<td>无</td>
@ -469,9 +457,6 @@
<table class="data-table">
<thead>
<tr>
<th width="50">
<input type="checkbox" class="checkbox">
</th>
<th width="100">商品ID</th>
<th width="150">商品名称</th>
<th width="150">归属店铺</th>
@ -482,9 +467,6 @@
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>001</td>
<td>黑木耳</td>
<td>生生蔬菜店</td>
@ -498,9 +480,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>002</td>
<td>黑木耳</td>
<td>生生蔬菜店</td>
@ -514,9 +493,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>003</td>
<td>番茄</td>
<td>生生蔬菜店</td>
@ -530,9 +506,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>004</td>
<td>冬瓜</td>
<td>生生蔬菜店</td>
@ -546,9 +519,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>005</td>
<td>土豆</td>
<td>生生蔬菜店</td>
@ -562,9 +532,6 @@
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>006</td>
<td>白萝卜</td>
<td>生生蔬菜店</td>

BIN
大妈集市.rp
View File

Binary file not shown.