679 lines
31 KiB
HTML
679 lines
31 KiB
HTML
<!-- 次卡管理页 -->
|
||
<style>
|
||
.page-pk { max-width:1100px; }
|
||
|
||
/* 分段 Tab */
|
||
.pk-seg { display:flex; background:#f5f5f5; border-radius:var(--g-radius); overflow:hidden; border:1px solid #e8e8e8; width:fit-content; margin-bottom:16px; }
|
||
.pk-seg-item {
|
||
padding:8px 28px; font-size:13px; cursor:pointer; color:var(--g-text-muted);
|
||
transition:all var(--g-transition); user-select:none; border-right:1px solid #e8e8e8;
|
||
background:transparent; border-top:none; border-bottom:none; border-left:none;
|
||
}
|
||
.pk-seg-item:last-child { border-right:none; }
|
||
.pk-seg-item:hover { color:var(--g-text-secondary); background:#f0f0f0; }
|
||
.pk-seg-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.06); }
|
||
|
||
/* 统计卡片 */
|
||
.pk-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
|
||
.pk-stat-card {
|
||
background:#fff; border-radius:10px; padding:16px 20px;
|
||
box-shadow:var(--g-shadow-sm); transition:all var(--g-transition);
|
||
}
|
||
.pk-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.pk-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
|
||
.pk-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
|
||
.pk-stat-value.primary { color:var(--primary); }
|
||
.pk-stat-value.green { color:var(--g-success); }
|
||
.pk-stat-value.orange { color:var(--g-warning); }
|
||
|
||
/* 工具栏 */
|
||
.pk-toolbar {
|
||
display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;
|
||
box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff;
|
||
}
|
||
.pk-toolbar select, .pk-toolbar input[type="text"] {
|
||
height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
|
||
font-size:13px; outline:none; transition:all var(--g-transition); background:#fff;
|
||
}
|
||
.pk-toolbar select:focus, .pk-toolbar input[type="text"]:focus {
|
||
border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
|
||
}
|
||
|
||
/* 次卡网格 */
|
||
.pk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
|
||
.pk-card {
|
||
background:#fff; border-radius:12px; overflow:hidden;
|
||
box-shadow:var(--g-shadow-sm); transition:all var(--g-transition); display:flex;
|
||
}
|
||
.pk-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.pk-card.pk-off { opacity:.55; }
|
||
.pk-card-cover {
|
||
width:140px; min-height:160px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
|
||
color:#fff; font-size:28px; font-weight:700; position:relative;
|
||
}
|
||
.pk-card-cover .pk-cover-icon { opacity:.3; position:absolute; }
|
||
.pk-card-cover-label { position:relative; z-index:1; text-align:center; line-height:1.3; }
|
||
.pk-card-cover-label small { display:block; font-size:12px; font-weight:400; opacity:.8; }
|
||
.pk-card-bd { flex:1; padding:16px; display:flex; flex-direction:column; }
|
||
.pk-card-name { font-size:15px; font-weight:600; color:var(--g-text); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
|
||
.pk-card-price { margin-bottom:8px; display:flex; align-items:baseline; gap:6px; }
|
||
.pk-card-price-now { font-size:22px; font-weight:700; color:var(--g-danger); }
|
||
.pk-card-price-orig { font-size:13px; color:var(--g-text-muted); text-decoration:line-through; }
|
||
.pk-card-info { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
|
||
.pk-info-tag {
|
||
font-size:11px; padding:2px 8px; border-radius:4px; background:#f5f5f5; color:var(--g-text-secondary);
|
||
}
|
||
.pk-card-meta { font-size:12px; color:var(--g-text-muted); margin-bottom:10px; display:flex; gap:14px; }
|
||
.pk-card-ft { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:10px; border-top:1px solid #f5f5f5; }
|
||
.pk-card-ft .g-tag { margin-left:auto; }
|
||
|
||
/* scope tag 颜色 */
|
||
.pk-scope-tag { font-size:11px; font-weight:500; padding:1px 6px; border-radius:4px; }
|
||
.pk-scope-tag.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
|
||
.pk-scope-tag.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
|
||
.pk-scope-tag.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
|
||
.pk-scope-tag.purple { background:color-mix(in srgb, #7c3aed 12%, #fff); color:#7c3aed; }
|
||
|
||
/* 使用记录 */
|
||
.pk-rec-member { display:flex; flex-direction:column; gap:2px; }
|
||
.pk-rec-member-name { font-size:13px; font-weight:500; color:var(--g-text); }
|
||
.pk-rec-member-phone { font-size:12px; color:var(--g-text-muted); }
|
||
.pk-rec-status { display:inline-flex; align-items:center; gap:4px; font-size:12px; }
|
||
.pk-rec-status::before { content:''; width:6px; height:6px; border-radius:50%; }
|
||
.pk-rec-status.green::before { background:var(--g-success); }
|
||
.pk-rec-status.orange::before { background:var(--g-warning); }
|
||
.pk-rec-status.gray::before { background:#bbb; }
|
||
|
||
/* 抽屉内上传 */
|
||
.pk-upload-placeholder {
|
||
width:100%; height:100px; border:2px dashed #d9d9d9; border-radius:var(--g-radius);
|
||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||
color:var(--g-text-muted); font-size:13px; gap:6px; cursor:pointer;
|
||
transition:all var(--g-transition); background:var(--g-bg-subtle);
|
||
}
|
||
.pk-upload-placeholder:hover { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, #fff); }
|
||
|
||
/* 通知 pill 多选 */
|
||
.pk-notify-pills { display:flex; gap:10px; }
|
||
.pk-notify-pills .g-pill { position:relative; padding-left:24px; }
|
||
.pk-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);
|
||
}
|
||
.pk-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");
|
||
}
|
||
|
||
/* section 标题 */
|
||
.pk-section-hd {
|
||
font-size:15px; font-weight:600; color:var(--g-text);
|
||
padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
|
||
}
|
||
|
||
/* 适用范围选中项 */
|
||
.pk-scope-items { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
|
||
.pk-scope-item {
|
||
display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#f5f5f5;
|
||
border-radius:6px; font-size:12px; color:var(--g-text-secondary);
|
||
}
|
||
.pk-scope-item button {
|
||
background:none; border:none; color:var(--g-text-muted); cursor:pointer; padding:0; line-height:1;
|
||
}
|
||
.pk-scope-item button:hover { color:var(--g-danger); }
|
||
</style>
|
||
|
||
<div class="page-pk">
|
||
<!-- 分段 Tab -->
|
||
<div class="pk-seg">
|
||
<button class="pk-seg-item active" onclick="switchPkTab(this, 'list')">次卡列表</button>
|
||
<button class="pk-seg-item" onclick="switchPkTab(this, 'records')">使用记录</button>
|
||
</div>
|
||
|
||
<!-- ==================== TAB 1: 次卡列表 ==================== -->
|
||
<div id="pkTabList">
|
||
|
||
<!-- 统计 -->
|
||
<div class="pk-stats">
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">在售次卡</div>
|
||
<div class="pk-stat-value primary">3</div>
|
||
</div>
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">累计售出</div>
|
||
<div class="pk-stat-value">287张</div>
|
||
</div>
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">累计收入</div>
|
||
<div class="pk-stat-value green">¥18,640</div>
|
||
</div>
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">使用中</div>
|
||
<div class="pk-stat-value orange">124张</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工具栏 -->
|
||
<div class="pk-toolbar">
|
||
<select style="width:120px;">
|
||
<option value="">全部状态</option>
|
||
<option>上架</option>
|
||
<option>下架</option>
|
||
</select>
|
||
<input type="text" placeholder="搜索次卡名称" style="width:200px;">
|
||
<div style="flex:1;"></div>
|
||
<button class="g-btn g-btn-primary" onclick="openPkDrawer()">
|
||
<i data-lucide="plus" style="width:14px;height:14px;"></i>创建次卡
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 次卡网格 -->
|
||
<div class="pk-grid">
|
||
|
||
<!-- 卡1: 咖啡月卡 -->
|
||
<div class="pk-card">
|
||
<div class="pk-card-cover" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);">
|
||
<i data-lucide="coffee" class="pk-cover-icon" style="width:60px;height:60px;"></i>
|
||
<div class="pk-card-cover-label">30<small>次</small></div>
|
||
</div>
|
||
<div class="pk-card-bd">
|
||
<div class="pk-card-name">咖啡月卡<span class="pk-scope-tag blue">指定分类</span></div>
|
||
<div class="pk-card-price">
|
||
<span class="pk-card-price-now">¥99</span>
|
||
<span class="pk-card-price-orig">¥150</span>
|
||
</div>
|
||
<div class="pk-card-info">
|
||
<span class="pk-info-tag">30天有效</span>
|
||
<span class="pk-info-tag">完全免费</span>
|
||
<span class="pk-info-tag">每日限1次</span>
|
||
</div>
|
||
<div class="pk-card-meta">
|
||
<span>已售 156</span>
|
||
<span>使用中 68</span>
|
||
</div>
|
||
<div class="pk-card-ft">
|
||
<a class="g-action" onclick="openPkDrawer()">编辑</a>
|
||
<a class="g-action">下架</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
<span class="g-tag g-tag-green">上架</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡2: 早餐周卡 -->
|
||
<div class="pk-card">
|
||
<div class="pk-card-cover" style="background:linear-gradient(135deg,#f59e0b,#f97316);">
|
||
<i data-lucide="sunrise" class="pk-cover-icon" style="width:60px;height:60px;"></i>
|
||
<div class="pk-card-cover-label">7<small>次</small></div>
|
||
</div>
|
||
<div class="pk-card-bd">
|
||
<div class="pk-card-name">早餐周卡<span class="pk-scope-tag green">指定标签</span></div>
|
||
<div class="pk-card-price">
|
||
<span class="pk-card-price-now">¥29</span>
|
||
<span class="pk-card-price-orig">¥56</span>
|
||
</div>
|
||
<div class="pk-card-info">
|
||
<span class="pk-info-tag">7天有效</span>
|
||
<span class="pk-info-tag">完全免费</span>
|
||
<span class="pk-info-tag">每日限1次</span>
|
||
</div>
|
||
<div class="pk-card-meta">
|
||
<span>已售 89</span>
|
||
<span>使用中 34</span>
|
||
</div>
|
||
<div class="pk-card-ft">
|
||
<a class="g-action" onclick="openPkDrawer()">编辑</a>
|
||
<a class="g-action">下架</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
<span class="g-tag g-tag-green">上架</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡3: 奶茶畅饮卡 -->
|
||
<div class="pk-card">
|
||
<div class="pk-card-cover" style="background:linear-gradient(135deg,#ec4899,#f43f5e);">
|
||
<i data-lucide="cup-soda" class="pk-cover-icon" style="width:60px;height:60px;"></i>
|
||
<div class="pk-card-cover-label">15<small>次</small></div>
|
||
</div>
|
||
<div class="pk-card-bd">
|
||
<div class="pk-card-name">奶茶畅饮卡<span class="pk-scope-tag purple">指定商品</span></div>
|
||
<div class="pk-card-price">
|
||
<span class="pk-card-price-now">¥59</span>
|
||
<span class="pk-card-price-orig">¥120</span>
|
||
</div>
|
||
<div class="pk-card-info">
|
||
<span class="pk-info-tag">15天有效</span>
|
||
<span class="pk-info-tag">上限¥20/次</span>
|
||
<span class="pk-info-tag">不限次/日</span>
|
||
</div>
|
||
<div class="pk-card-meta">
|
||
<span>已售 42</span>
|
||
<span>使用中 22</span>
|
||
</div>
|
||
<div class="pk-card-ft">
|
||
<a class="g-action" onclick="openPkDrawer()">编辑</a>
|
||
<a class="g-action">下架</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
<span class="g-tag g-tag-green">上架</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡4: 午餐次卡（已下架） -->
|
||
<div class="pk-card pk-off">
|
||
<div class="pk-card-cover" style="background:linear-gradient(135deg,#64748b,#94a3af);">
|
||
<i data-lucide="utensils" class="pk-cover-icon" style="width:60px;height:60px;"></i>
|
||
<div class="pk-card-cover-label">20<small>次</small></div>
|
||
</div>
|
||
<div class="pk-card-bd">
|
||
<div class="pk-card-name">午餐次卡<span class="pk-scope-tag blue">指定分类</span></div>
|
||
<div class="pk-card-price">
|
||
<span class="pk-card-price-now">¥199</span>
|
||
<span class="pk-card-price-orig">¥300</span>
|
||
</div>
|
||
<div class="pk-card-info">
|
||
<span class="pk-info-tag">30天有效</span>
|
||
<span class="pk-info-tag">完全免费</span>
|
||
<span class="pk-info-tag">每日限1次</span>
|
||
</div>
|
||
<div class="pk-card-meta">
|
||
<span>已售 0</span>
|
||
<span>使用中 0</span>
|
||
</div>
|
||
<div class="pk-card-ft">
|
||
<a class="g-action" onclick="openPkDrawer()">编辑</a>
|
||
<a class="g-action">上架</a>
|
||
<a class="g-action g-action-danger">删除</a>
|
||
<span class="g-tag g-tag-gray">下架</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== TAB 2: 使用记录 ==================== -->
|
||
<div id="pkTabRecords" style="display:none;">
|
||
|
||
<!-- 筛选工具栏 -->
|
||
<div class="pk-toolbar">
|
||
<select style="width:130px;">
|
||
<option value="">全部次卡</option>
|
||
<option>咖啡月卡</option>
|
||
<option>早餐周卡</option>
|
||
<option>奶茶畅饮卡</option>
|
||
</select>
|
||
<select style="width:120px;">
|
||
<option value="">全部状态</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="pk-stats" style="grid-template-columns:repeat(3,1fr);">
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">今日使用</div>
|
||
<div class="pk-stat-value primary">18</div>
|
||
</div>
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">本月使用</div>
|
||
<div class="pk-stat-value">342</div>
|
||
</div>
|
||
<div class="pk-stat-card">
|
||
<div class="pk-stat-label">即将过期（7天内）</div>
|
||
<div class="pk-stat-value orange">15张</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>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="font-family:monospace;font-size:12px;">PK20260212001</td>
|
||
<td><div class="pk-rec-member"><span class="pk-rec-member-name">张三</span><span class="pk-rec-member-phone">138****6789</span></div></td>
|
||
<td>咖啡月卡</td>
|
||
<td>美式咖啡</td>
|
||
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 08:30</td>
|
||
<td><span style="font-weight:600;color:var(--primary);">22/30</span></td>
|
||
<td><span class="pk-rec-status green">正常使用</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace;font-size:12px;">PK20260212002</td>
|
||
<td><div class="pk-rec-member"><span class="pk-rec-member-name">李四</span><span class="pk-rec-member-phone">139****1234</span></div></td>
|
||
<td>早餐周卡</td>
|
||
<td>鸡蛋灌饼</td>
|
||
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-12 07:45</td>
|
||
<td><span style="font-weight:600;color:var(--primary);">3/7</span></td>
|
||
<td><span class="pk-rec-status green">正常使用</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace;font-size:12px;">PK20260211003</td>
|
||
<td><div class="pk-rec-member"><span class="pk-rec-member-name">王五</span><span class="pk-rec-member-phone">137****5678</span></div></td>
|
||
<td>奶茶畅饮卡</td>
|
||
<td>珍珠奶茶（补差价¥5）</td>
|
||
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 15:20</td>
|
||
<td><span style="font-weight:600;color:var(--g-warning);">2/15</span></td>
|
||
<td><span class="pk-rec-status orange">即将用完</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace;font-size:12px;">PK20260211004</td>
|
||
<td><div class="pk-rec-member"><span class="pk-rec-member-name">赵六</span><span class="pk-rec-member-phone">136****4321</span></div></td>
|
||
<td>咖啡月卡</td>
|
||
<td>拿铁</td>
|
||
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-11 09:10</td>
|
||
<td><span style="font-weight:600;color:var(--g-text-muted);">0/30</span></td>
|
||
<td><span class="pk-rec-status gray">已用完</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace;font-size:12px;">PK20260210005</td>
|
||
<td><div class="pk-rec-member"><span class="pk-rec-member-name">孙七</span><span class="pk-rec-member-phone">135****8765</span></div></td>
|
||
<td>早餐周卡</td>
|
||
<td>豆浆油条套餐</td>
|
||
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 07:30</td>
|
||
<td><span style="font-weight:600;color:var(--g-text-muted);">0/7</span></td>
|
||
<td><span class="pk-rec-status gray">已过期</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-family:monospace;font-size:12px;">PK20260210006</td>
|
||
<td><div class="pk-rec-member"><span class="pk-rec-member-name">周八</span><span class="pk-rec-member-phone">133****2222</span></div></td>
|
||
<td>咖啡月卡</td>
|
||
<td>卡布奇诺</td>
|
||
<td style="font-size:12px;color:var(--g-text-secondary);">2026-02-10 10:45</td>
|
||
<td><span style="font-weight:600;color:var(--primary);">15/30</span></td>
|
||
<td><span class="pk-rec-status green">正常使用</span></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>
|
||
|
||
<!-- ==================== 创建/编辑次卡抽屉 ==================== -->
|
||
<div class="g-drawer-mask" id="pkDrawerMask" onclick="closePkDrawer()"></div>
|
||
<div class="g-drawer" id="pkDrawer" style="width:520px;">
|
||
<div class="g-drawer-hd">
|
||
<span class="g-drawer-title">创建次卡</span>
|
||
<button class="g-drawer-close" onclick="closePkDrawer()">×</button>
|
||
</div>
|
||
<div class="g-drawer-bd">
|
||
|
||
<!-- 次卡名称 -->
|
||
<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 class="pk-upload-placeholder">
|
||
<i data-lucide="upload-cloud" style="width:24px;height:24px;"></i>
|
||
<span>点击上传封面</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 价格 -->
|
||
<div style="display:flex;gap:12px;">
|
||
<div class="g-form-group" style="flex:1;">
|
||
<label class="g-form-label required">售价</label>
|
||
<input class="g-input" type="number" placeholder="如：99" min="0" step="0.01">
|
||
</div>
|
||
<div class="g-form-group" style="flex:1;">
|
||
<label class="g-form-label">原价</label>
|
||
<input class="g-input" type="number" placeholder="如：150（划线价）" min="0" step="0.01">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 总次数 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">总次数</label>
|
||
<input class="g-input" type="number" placeholder="如：30" min="1">
|
||
<div class="g-hint">购买后可使用的总次数</div>
|
||
</div>
|
||
|
||
<!-- 有效期 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">有效期</label>
|
||
<div style="display:flex;gap:10px;margin-bottom:8px;">
|
||
<span class="g-pill checked" onclick="selectPkValidity(this,'days')">固定天数</span>
|
||
<span class="g-pill" onclick="selectPkValidity(this,'range')">日期范围</span>
|
||
</div>
|
||
<div id="pkValidityDays">
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">购买后</span>
|
||
<input class="g-input" type="number" placeholder="如：30" min="1" style="width:100px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">天内有效</span>
|
||
</div>
|
||
</div>
|
||
<div id="pkValidityRange" style="display:none;">
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<input class="g-input" type="date" style="width:160px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">至</span>
|
||
<input class="g-input" type="date" style="width:160px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-divider"></div>
|
||
|
||
<!-- 适用范围 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">适用范围</label>
|
||
<div style="display:flex;gap:10px;margin-bottom:8px;">
|
||
<span class="g-pill checked" onclick="selectPkScope(this,'all')">全部商品</span>
|
||
<span class="g-pill" onclick="selectPkScope(this,'category')">指定分类</span>
|
||
<span class="g-pill" onclick="selectPkScope(this,'tag')">指定标签</span>
|
||
<span class="g-pill" onclick="selectPkScope(this,'product')">指定商品</span>
|
||
</div>
|
||
<div id="pkScopeAll">
|
||
<div class="g-hint">持卡可兑换店内任意商品</div>
|
||
</div>
|
||
<div id="pkScopeCategory" style="display:none;">
|
||
<select class="g-select" style="width:100%;">
|
||
<option value="">请选择商品分类</option>
|
||
<option>热饮</option>
|
||
<option>冷饮</option>
|
||
<option>早餐</option>
|
||
<option>午餐套餐</option>
|
||
<option>小食甜点</option>
|
||
</select>
|
||
<div class="pk-scope-items">
|
||
<span class="pk-scope-item">热饮 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
|
||
<span class="pk-scope-item">冷饮 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
|
||
</div>
|
||
<div class="g-hint">可多选，持卡可兑换所选分类下的任意商品</div>
|
||
</div>
|
||
<div id="pkScopeTag" style="display:none;">
|
||
<select class="g-select" style="width:100%;">
|
||
<option value="">请选择商品标签</option>
|
||
<option>早餐系列</option>
|
||
<option>人气爆款</option>
|
||
<option>新品上市</option>
|
||
<option>轻食健康</option>
|
||
</select>
|
||
<div class="pk-scope-items">
|
||
<span class="pk-scope-item">早餐系列 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
|
||
</div>
|
||
<div class="g-hint">可多选，持卡可兑换带有所选标签的商品</div>
|
||
</div>
|
||
<div id="pkScopeProduct" style="display:none;">
|
||
<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="pk-scope-items">
|
||
<span class="pk-scope-item">美式咖啡 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
|
||
<span class="pk-scope-item">拿铁 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
|
||
<span class="pk-scope-item">卡布奇诺 <button onclick="this.parentElement.remove()"><i data-lucide="x" style="width:12px;height:12px;"></i></button></span>
|
||
</div>
|
||
<div class="g-hint">可多选，持卡仅可兑换指定的商品</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用模式 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">使用模式</label>
|
||
<div style="display:flex;gap:10px;margin-bottom:8px;">
|
||
<span class="g-pill checked" onclick="selectPkUsageMode(this,'free')">完全免费</span>
|
||
<span class="g-pill" onclick="selectPkUsageMode(this,'cap')">金额上限</span>
|
||
</div>
|
||
<div id="pkModeFree">
|
||
<div class="g-hint">每次使用免费兑换一件适用范围内的商品，不限原价</div>
|
||
</div>
|
||
<div id="pkModeCap" style="display:none;">
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">每次使用上限</span>
|
||
<input class="g-input" type="number" placeholder="如：20" min="0" step="0.01" style="width:100px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">元</span>
|
||
</div>
|
||
<div class="g-hint">超出上限部分由顾客补差价</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-divider"></div>
|
||
|
||
<!-- 使用规则 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">每日限用</label>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">次/天</span>
|
||
</div>
|
||
<div class="g-hint">留空或填0表示不限制每日使用次数</div>
|
||
</div>
|
||
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">每单限用</label>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">次/单</span>
|
||
</div>
|
||
<div class="g-hint">同一订单内可使用的次数，如一单点5杯可用5次</div>
|
||
</div>
|
||
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">每人限购</label>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<input class="g-input" type="number" placeholder="不限" min="0" style="width:100px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">张</span>
|
||
</div>
|
||
<div class="g-hint">留空或填0表示不限制购买数量</div>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:24px;margin-bottom:16px;">
|
||
<div style="display:flex;align-items:center;gap:10px;">
|
||
<span style="font-size:13px;color:var(--g-text);">允许转赠</span>
|
||
<div class="g-toggle" onclick="toggleSwitch(this)"></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 class="g-hint">到期后未使用完的次数处理方式</div>
|
||
</div>
|
||
|
||
<!-- 描述 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">次卡描述</label>
|
||
<textarea class="g-textarea" rows="3" placeholder="请输入次卡说明，如使用规则、适用门店等"></textarea>
|
||
</div>
|
||
|
||
<!-- 到账通知 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">购买通知</label>
|
||
<div class="pk-notify-pills">
|
||
<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="closePkDrawer()">取消</button>
|
||
<button class="g-btn g-btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* Tab 切换 */
|
||
function switchPkTab(el, tab) {
|
||
document.querySelectorAll('.pk-seg-item').forEach(function(item) { item.classList.remove('active'); });
|
||
el.classList.add('active');
|
||
document.getElementById('pkTabList').style.display = tab === 'list' ? '' : 'none';
|
||
document.getElementById('pkTabRecords').style.display = tab === 'records' ? '' : 'none';
|
||
}
|
||
|
||
/* Toggle 开关 */
|
||
function toggleSwitch(el) { el.classList.toggle('on'); }
|
||
function togglePill(el) { el.classList.toggle('checked'); }
|
||
|
||
/* 有效期类型切换 */
|
||
function selectPkValidity(el, type) {
|
||
el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
document.getElementById('pkValidityDays').style.display = type === 'days' ? '' : 'none';
|
||
document.getElementById('pkValidityRange').style.display = type === 'range' ? '' : 'none';
|
||
}
|
||
|
||
/* 适用范围切换 */
|
||
function selectPkScope(el, scope) {
|
||
el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
document.getElementById('pkScopeAll').style.display = scope === 'all' ? '' : 'none';
|
||
document.getElementById('pkScopeCategory').style.display = scope === 'category' ? '' : 'none';
|
||
document.getElementById('pkScopeTag').style.display = scope === 'tag' ? '' : 'none';
|
||
document.getElementById('pkScopeProduct').style.display = scope === 'product' ? '' : 'none';
|
||
}
|
||
|
||
/* 使用模式切换 */
|
||
function selectPkUsageMode(el, mode) {
|
||
el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
document.getElementById('pkModeFree').style.display = mode === 'free' ? '' : 'none';
|
||
document.getElementById('pkModeCap').style.display = mode === 'cap' ? '' : 'none';
|
||
}
|
||
|
||
/* 抽屉开关 */
|
||
function openPkDrawer() {
|
||
document.getElementById('pkDrawerMask').classList.add('open');
|
||
document.getElementById('pkDrawer').classList.add('open');
|
||
}
|
||
function closePkDrawer() {
|
||
document.getElementById('pkDrawerMask').classList.remove('open');
|
||
document.getElementById('pkDrawer').classList.remove('open');
|
||
}
|
||
|
||
/* 初始化 Lucide 图标 */
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|