msumshk/TakeoutSaaS.Prototypes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 积分商城兑换记录、次卡管理、满赠/第二份半价、营销日历

Browse Source 
- 积分商城: 新增兑换记录tab、到账通知、核销抽屉、商品类型标签
- 次卡管理: 新页面，支持完全免费/金额上限两种模式，4种适用范围
- 满减活动: 扩展支持满赠(买X赠Y)和第二份半价，抽屉联动切换
- 营销日历: 甘特图总览所有活动，冲突提示，类型图例
- 会员管理: 动态等级、开关式权益配置(上次遗留同步提交)
This commit is contained in:
MSuMshk
2026-02-12 15:50:58 +08:00
parent 7463c595a2
commit e16c30791e
6 changed files with 1849 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
pages/mbr-points.html
View File

@@ -76,7 +76,11 @@
align-items:center; justify-content:center; color:#ccc;
}
.pt-prod-bd { padding:14px 16px; }
.pt-prod-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:8px; }
.pt-prod-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.pt-type-tag { font-size:11px; font-weight:500; padding:1px 6px; border-radius:4px; flex-shrink:0; }
.pt-type-tag.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
.pt-type-tag.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
.pt-type-tag.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
.pt-prod-price { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:6px; }
.pt-prod-price .pt-cash { font-size:13px; font-weight:500; color:var(--g-text-secondary); margin-left:4px; }
.pt-prod-meta { display:flex; gap:16px; font-size:12px; color:var(--g-text-muted); margin-bottom:10px; }
@@ -98,6 +102,29 @@
/* 兑换方式 pill 组 */
.pt-exchange-pills { display:flex; gap:10px; }
/* 通知 pill 多选 */
.pt-notify-pills { display:flex; gap:10px; }
.pt-notify-pills .g-pill { position:relative; padding-left:24px; }
.pt-notify-pills .g-pill::before {
content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%);
width:12px; height:12px; border:1.5px solid #ccc; border-radius:3px; transition:all var(--g-transition);
}
.pt-notify-pills .g-pill.checked::before {
background:var(--primary); border-color:var(--primary);
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 兑换记录表格 */
.pt-rec-status { display:inline-flex; align-items:center; gap:4px; font-size:12px; }
.pt-rec-status::before { content:''; width:6px; height:6px; border-radius:50%; }
.pt-rec-status.green::before { background:var(--g-success); }
.pt-rec-status.orange::before { background:var(--g-warning); }
.pt-rec-status.gray::before { background:#bbb; }
.pt-rec-status.red::before { background:var(--g-danger); }
.pt-rec-member { display:flex; flex-direction:column; gap:2px; }
.pt-rec-member-name { font-size:13px; font-weight:500; color:var(--g-text); }
.pt-rec-member-phone { font-size:12px; color:var(--g-text-muted); }
/* 保存栏 */
.pt-save-bar { margin-top:20px; display:flex; justify-content:flex-end; }
</style>
@@ -107,6 +134,7 @@
<div class="pt-seg">
<button class="pt-seg-item active" onclick="switchPtTab(this, 'rules')">积分规则</button>
<button class="pt-seg-item" onclick="switchPtTab(this, 'products')">兑换商品</button>
<button class="pt-seg-item" onclick="switchPtTab(this, 'records')">兑换记录</button>
</div>
<!-- ==================== TAB 1: 积分规则 ==================== -->
@@ -214,7 +242,7 @@
<div class="pt-prod-card">
<div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
<div class="pt-prod-bd">
<div class="pt-prod-name">可乐兑换券</div>
<div class="pt-prod-name">可乐兑换券<span class="pt-type-tag blue">商品</span></div>
<div class="pt-prod-price">100积分</div>
<div class="pt-prod-meta">
<span>库存 50</span>
@@ -233,7 +261,7 @@
<div class="pt-prod-card">
<div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
<div class="pt-prod-bd">
<div class="pt-prod-name">凉拌黄瓜</div>
<div class="pt-prod-name">凉拌黄瓜<span class="pt-type-tag blue">商品</span></div>
<div class="pt-prod-price">200积分</div>
<div class="pt-prod-meta">
<span>库存 30</span>
@@ -252,7 +280,7 @@
<div class="pt-prod-card">
<div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
<div class="pt-prod-bd">
<div class="pt-prod-name">满20减5券</div>
<div class="pt-prod-name">满20减5券<span class="pt-type-tag green">优惠券</span></div>
<div class="pt-prod-price">300积分</div>
<div class="pt-prod-meta">
<span>库存 100</span>
@@ -271,7 +299,7 @@
<div class="pt-prod-card">
<div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
<div class="pt-prod-bd">
<div class="pt-prod-name">招牌奶茶</div>
<div class="pt-prod-name">招牌奶茶<span class="pt-type-tag blue">商品</span></div>
<div class="pt-prod-price">500积分<span class="pt-cash">+ ¥3.00</span></div>
<div class="pt-prod-meta">
<span>库存 20</span>
@@ -290,7 +318,7 @@
<div class="pt-prod-card">
<div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
<div class="pt-prod-bd">
<div class="pt-prod-name">双人套餐券</div>
<div class="pt-prod-name">双人套餐券<span class="pt-type-tag green">优惠券</span></div>
<div class="pt-prod-price">1000积分</div>
<div class="pt-prod-meta">
<span>库存 10</span>
@@ -309,7 +337,7 @@
<div class="pt-prod-card pt-off">
<div class="pt-prod-img"><i data-lucide="image" style="width:32px;height:32px;"></i></div>
<div class="pt-prod-bd">
<div class="pt-prod-name">定制保温杯</div>
<div class="pt-prod-name">定制保温杯<span class="pt-type-tag orange">实物</span></div>
<div class="pt-prod-price">2000积分</div>
<div class="pt-prod-meta">
<span>库存 0</span>
@@ -326,6 +354,145 @@
</div>
</div>
<!-- ==================== TAB 3: 兑换记录 ==================== -->
<div id="ptTabRecords" style="display:none;">
<!-- 筛选工具栏 -->
<div class="pt-toolbar">
<select style="width:120px;">
<option value="">全部类型</option>
<option>兑换商品</option>
<option>兑换优惠券</option>
<option>兑换实物</option>
</select>
<select style="width:120px;">
<option value="">全部状态</option>
<option>待领取</option>
<option>已发放</option>
<option>已完成</option>
<option>已取消</option>
</select>
<input type="text" placeholder="搜索会员/商品名称" style="width:200px;">
<div style="flex:1;"></div>
<button class="g-btn g-btn-sm"><i data-lucide="download" style="width:13px;height:13px;"></i>导出</button>
</div>
<!-- 统计 -->
<div class="pt-stats" style="grid-template-columns:repeat(3,1fr);">
<div class="pt-stat-card">
<div class="pt-stat-label">今日兑换</div>
<div class="pt-stat-value primary">12</div>
</div>
<div class="pt-stat-card">
<div class="pt-stat-label">待领取实物</div>
<div class="pt-stat-value orange">3</div>
</div>
<div class="pt-stat-card">
<div class="pt-stat-label">本月消耗积分</div>
<div class="pt-stat-value">8,400</div>
</div>
</div>
<!-- 兑换记录表格 -->
<div class="g-card" style="padding:0;">
<table class="g-table">
<thead>
<tr>
<th>兑换单号</th>
<th>会员</th>
<th>兑换商品</th>
<th>类型</th>
<th>消耗积分</th>
<th>兑换时间</th>
<th>状态</th>
<th style="width:100px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260212001</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">张三</span><span class="pt-rec-member-phone">138****6789</span></div></td>
<td>定制保温杯</td>
<td><span class="pt-type-tag orange">实物</span></td>
<td style="font-weight:600;">2,000</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 10:30</td>
<td><span class="pt-rec-status orange">待领取</span></td>
<td><a class="g-action" onclick="openPtVerifyDrawer()">核销</a><a class="g-action">详情</a></td>
</tr>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260212002</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">李四</span><span class="pt-rec-member-phone">139****1234</span></div></td>
<td>可乐兑换券</td>
<td><span class="pt-type-tag blue">商品</span></td>
<td style="font-weight:600;">100</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 09:45</td>
<td><span class="pt-rec-status green">已发放</span></td>
<td><a class="g-action">详情</a></td>
</tr>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260211003</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">王五</span><span class="pt-rec-member-phone">137****5678</span></div></td>
<td>满20减5券</td>
<td><span class="pt-type-tag green">优惠券</span></td>
<td style="font-weight:600;">300</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 18:20</td>
<td><span class="pt-rec-status green">已发放</span></td>
<td><a class="g-action">详情</a></td>
</tr>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260211004</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">赵六</span><span class="pt-rec-member-phone">136****4321</span></div></td>
<td>定制保温杯</td>
<td><span class="pt-type-tag orange">实物</span></td>
<td style="font-weight:600;">2,000</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 14:10</td>
<td><span class="pt-rec-status orange">待领取</span></td>
<td><a class="g-action" onclick="openPtVerifyDrawer()">核销</a><a class="g-action">详情</a></td>
</tr>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260210005</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">孙七</span><span class="pt-rec-member-phone">135****8765</span></div></td>
<td>招牌奶茶</td>
<td><span class="pt-type-tag blue">商品</span></td>
<td style="font-weight:600;">500</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 16:55</td>
<td><span class="pt-rec-status green">已完成</span></td>
<td><a class="g-action">详情</a></td>
</tr>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260210006</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">周八</span><span class="pt-rec-member-phone">133****2222</span></div></td>
<td>双人套餐券</td>
<td><span class="pt-type-tag green">优惠券</span></td>
<td style="font-weight:600;">1,000</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 11:30</td>
<td><span class="pt-rec-status gray">已取消</span></td>
<td><a class="g-action">详情</a></td>
</tr>
<tr>
<td style="font-family:monospace;font-size:12px;">PT20260209007</td>
<td><div class="pt-rec-member"><span class="pt-rec-member-name">吴九</span><span class="pt-rec-member-phone">131****9999</span></div></td>
<td>定制保温杯</td>
<td><span class="pt-type-tag orange">实物</span></td>
<td style="font-weight:600;">2,000</td>
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-09 09:00</td>
<td><span class="pt-rec-status green">已完成</span></td>
<td><a class="g-action">详情</a></td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="g-pagination" style="margin-top:16px;">
<button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
<button class="g-page-btn active">1</button>
<button class="g-page-btn">2</button>
<button class="g-page-btn">3</button>
<button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
</div>
</div>
</div>
<!-- ==================== 添加/编辑兑换商品抽屉 ==================== -->
@@ -337,15 +504,77 @@
</div>
<div class="g-drawer-bd">
<!-- 商品名称 -->
<!-- 兑换类型 -->
<div class="g-form-group">
<label class="g-form-label required">商品名称</label>
<input class="g-input" placeholder="请输入兑换商品名称">
<label class="g-form-label required">兑换类型</label>
<div class="pt-exchange-pills">
<span class="g-pill checked" onclick="selectPtRedeemType(this, 'product')">兑换商品</span>
<span class="g-pill" onclick="selectPtRedeemType(this, 'coupon')">兑换优惠券</span>
<span class="g-pill" onclick="selectPtRedeemType(this, 'physical')">兑换实物</span>
</div>
<div class="g-hint" id="ptRedeemHintProduct">顾客兑换后系统自动发放商品兑换券，下单时该商品免费</div>
<div class="g-hint" id="ptRedeemHintCoupon" style="display:none;">顾客兑换后优惠券直接发到券包</div>
<div class="g-hint" id="ptRedeemHintPhysical" style="display:none;">实物商品需到店自提，不走线上履约</div>
</div>
<!-- 兑换商品：选择商品 -->
<div id="ptFieldProduct">
<div class="g-form-group">
<label class="g-form-label required">关联商品</label>
<div id="ptSelectedProduct" style="display:none;padding:10px 12px;background:#f8f9fb;border-radius:8px;border:1px solid #e5e7eb;margin-bottom:8px;display:flex;align-items:center;gap:10px;">
<div style="width:40px;height:40px;background:#eee;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#bbb;flex-shrink:0;"><i data-lucide="image" style="width:18px;height:18px;"></i></div>
<div style="flex:1;">
<div style="font-size:13px;font-weight:500;">招牌奶茶</div>
<div style="font-size:12px;color:var(--g-text-muted);">原价 ¥15.00</div>
</div>
<button style="background:none;border:none;color:var(--g-text-muted);cursor:pointer;" onclick="this.parentElement.style.display='none'"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
</div>
<button class="g-btn g-btn-sm" onclick="openProductPicker({title:'选择兑换商品',subtitle:'积分商城',onConfirm:function(){}})"><i data-lucide="plus" style="width:13px;height:13px;"></i>选择商品/套餐</button>
<div class="g-hint">兑换后系统自动生成该商品的兑换券</div>
</div>
</div>
<!-- 兑换优惠券：选择券 -->
<div id="ptFieldCoupon" style="display:none;">
<div class="g-form-group">
<label class="g-form-label required">关联优惠券</label>
<select class="g-select" style="width:100%;">
<option value="">请选择优惠券</option>
<option>新用户满减券（满50减15）</option>
<option>全场8折券</option>
<option>免配送费券</option>
<option>满30减5券</option>
<option>满80减20券</option>
</select>
<div class="g-hint">选择已在优惠券管理中创建的券，兑换后直接发到顾客券包</div>
</div>
</div>
<!-- 兑换实物：名称+描述 -->
<div id="ptFieldPhysical" style="display:none;">
<div class="g-form-group">
<label class="g-form-label required">实物名称</label>
<input class="g-input" placeholder="如：定制保温杯、品牌帆布袋">
</div>
<div class="g-form-group">
<label class="g-form-label">领取方式</label>
<div style="display:flex;gap:8px;">
<span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">到店自提</span>
<span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">快递配送</span>
</div>
</div>
</div>
<!-- 商品名称（展示名） -->
<div class="g-form-group">
<label class="g-form-label required">展示名称</label>
<input class="g-input" placeholder="如：招牌奶茶兑换券、满50减15券">
<div class="g-hint">顾客在积分商城看到的名称</div>
</div>
<!-- 商品图片 -->
<div class="g-form-group">
<label class="g-form-label">商品图片</label>
<label class="g-form-label">展示图片</label>
<div class="pt-upload-placeholder">
<i data-lucide="upload-cloud" style="width:28px;height:28px;"></i>
<span>点击上传商品图片</span>
@@ -354,8 +583,8 @@
<!-- 兑换方式 -->
<div class="g-form-group">
<label class="g-form-label required">兑换方式</label>
<div class="pt-exchange-pills">
<label class="g-form-label required">兑换积分</label>
<div class="pt-exchange-pills" style="margin-bottom:8px;">
<span class="g-pill checked" onclick="selectPtExchangeType(this, 'points')">纯积分</span>
<span class="g-pill" onclick="selectPtExchangeType(this, 'mixed')">积分+现金</span>
</div>
@@ -397,6 +626,16 @@
<textarea class="g-textarea" rows="4" placeholder="请输入商品描述信息，如使用规则、有效期等"></textarea>
</div>
<!-- 到账通知 -->
<div class="g-form-group">
<label class="g-form-label">到账通知</label>
<div class="pt-notify-pills" id="ptNotifyPills">
<span class="g-pill checked" onclick="togglePill(this)">站内消息</span>
<span class="g-pill" onclick="togglePill(this)">短信通知</span>
</div>
<div class="g-hint">选择兑换成功后通知顾客的方式，实物商品建议开启短信通知</div>
</div>
</div>
<div class="g-drawer-ft">
<button class="g-btn" onclick="closePtDrawer()">取消</button>
@@ -404,6 +643,54 @@
</div>
</div>
<!-- ==================== 核销抽屉 ==================== -->
<div class="g-drawer-mask" id="ptVerifyMask" onclick="closePtVerifyDrawer()"></div>
<div class="g-drawer" id="ptVerifyDrawer" style="width:440px;">
<div class="g-drawer-hd">
<span class="g-drawer-title">兑换核销</span>
<button class="g-drawer-close" onclick="closePtVerifyDrawer()">&times;</button>
</div>
<div class="g-drawer-bd">
<!-- 兑换信息 -->
<div style="background:#f8f9fb;border-radius:10px;padding:16px;margin-bottom:20px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
<div style="width:48px;height:48px;background:#eee;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#bbb;flex-shrink:0;"><i data-lucide="image" style="width:22px;height:22px;"></i></div>
<div>
<div style="font-size:14px;font-weight:600;color:var(--g-text);margin-bottom:2px;">定制保温杯</div>
<span class="pt-type-tag orange">实物</span>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px;">
<div><span style="color:var(--g-text-muted);">兑换单号</span><div style="font-family:monospace;margin-top:2px;">PT20260212001</div></div>
<div><span style="color:var(--g-text-muted);">消耗积分</span><div style="font-weight:600;color:var(--primary);margin-top:2px;">2,000</div></div>
<div><span style="color:var(--g-text-muted);">兑换会员</span><div style="margin-top:2px;">张三 (138****6789)</div></div>
<div><span style="color:var(--g-text-muted);">兑换时间</span><div style="margin-top:2px;">2026-02-12 10:30</div></div>
</div>
</div>
<!-- 核销方式 -->
<div class="g-form-group">
<label class="g-form-label">核销方式</label>
<div style="display:flex;gap:10px;">
<span class="g-pill checked" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">扫码核销</span>
<span class="g-pill" onclick="this.parentElement.querySelectorAll('.g-pill').forEach(function(p){p.classList.remove('checked')});this.classList.add('checked')">手动核销</span>
</div>
</div>
<!-- 备注 -->
<div class="g-form-group">
<label class="g-form-label">核销备注</label>
<textarea class="g-textarea" rows="2" placeholder="可选，如：顾客已到店领取"></textarea>
</div>
</div>
<div class="g-drawer-ft">
<button class="g-btn" onclick="closePtVerifyDrawer()">取消</button>
<button class="g-btn g-btn-primary">确认核销</button>
</div>
</div>
<script>
/* Tab 切换 */
function switchPtTab(el, tab) {
@@ -411,6 +698,7 @@
el.classList.add('active');
document.getElementById('ptTabRules').style.display = tab === 'rules' ? '' : 'none';
document.getElementById('ptTabProducts').style.display = tab === 'products' ? '' : 'none';
document.getElementById('ptTabRecords').style.display = tab === 'records' ? '' : 'none';
}
/* Toggle 开关 */
@@ -426,9 +714,29 @@
hint.style.display = el.textContent.trim() === '按年清零' ? '' : 'none';
}
/* 兑换方式 pill 单选 */
/* 兑换类型切换（商品/优惠券/实物） */
function selectPtRedeemType(el, type) {
el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
el.classList.add('checked');
document.getElementById('ptFieldProduct').style.display = type === 'product' ? '' : 'none';
document.getElementById('ptFieldCoupon').style.display = type === 'coupon' ? '' : 'none';
document.getElementById('ptFieldPhysical').style.display = type === 'physical' ? '' : 'none';
document.getElementById('ptRedeemHintProduct').style.display = type === 'product' ? '' : 'none';
document.getElementById('ptRedeemHintCoupon').style.display = type === 'coupon' ? '' : 'none';
document.getElementById('ptRedeemHintPhysical').style.display = type === 'physical' ? '' : 'none';
/* 自动设置通知默认值：实物默认勾选短信 */
var pills = document.querySelectorAll('#ptNotifyPills .g-pill');
if (type === 'physical') {
pills.forEach(function(p) { p.classList.add('checked'); });
} else {
pills[0].classList.add('checked');
pills[1].classList.remove('checked');
}
}
/* 兑换方式 pill 单选（纯积分/积分+现金） */
function selectPtExchangeType(el, type) {
document.querySelectorAll('.pt-exchange-pills .g-pill').forEach(function(p) { p.classList.remove('checked'); });
el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
el.classList.add('checked');
document.getElementById('ptCashField').style.display = type === 'mixed' ? '' : 'none';
}
@@ -443,6 +751,21 @@
document.getElementById('ptDrawer').classList.remove('open');
}
/* 通知 pill 多选 */
function togglePill(el) {
el.classList.toggle('checked');
}
/* 核销抽屉 */
function openPtVerifyDrawer() {
document.getElementById('ptVerifyMask').classList.add('open');
document.getElementById('ptVerifyDrawer').classList.add('open');
}
function closePtVerifyDrawer() {
document.getElementById('ptVerifyMask').classList.remove('open');
document.getElementById('ptVerifyDrawer').classList.remove('open');
}
/* 初始化 Lucide 图标 */
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>