473 lines
26 KiB
HTML
473 lines
26 KiB
HTML
<!-- 限时折扣页 -->
|
|
<style>
|
|
.fs-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
|
|
.fs-search { position:relative; }
|
|
.fs-search input { height:34px; padding:0 10px 0 32px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; width:200px; transition:var(--g-transition); }
|
|
.fs-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.fs-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
|
|
.fs-stats { display:flex; gap:24px; margin-bottom:16px; padding:10px 16px; background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); font-size:13px; color:#4b5563; }
|
|
.fs-stats span { display:flex; align-items:center; gap:6px; }
|
|
.fs-stats strong { color:#1a1a2e; font-weight:600; }
|
|
.fs-card { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:20px; margin-bottom:16px; transition:box-shadow var(--g-transition); }
|
|
.fs-card:hover { box-shadow:var(--g-shadow-md); }
|
|
.fs-card.ended { opacity:.5; }
|
|
.fs-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
|
|
.fs-card-name { font-size:15px; font-weight:600; color:#1a1a2e; }
|
|
.fs-card-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
|
|
.fs-tag-running { background:#dcfce7; color:#22c55e; border:1px solid #bbf7d0; border-radius:6px; font-weight:600; }
|
|
.fs-tag-ended { background:#f8f9fb; color:#9ca3af; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; }
|
|
.fs-prod-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
|
|
.fs-prod-table th { background:#f8f9fb; padding:8px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; font-size:12px; }
|
|
.fs-prod-table td { padding:8px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
|
|
.fs-prod-table tr:last-child td { border-bottom:none; }
|
|
.fs-prod-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
|
|
.fs-orig-price { color:var(--g-text-muted); text-decoration:line-through; font-size:12px; }
|
|
.fs-disc-price { color:#ef4444; font-weight:600; }
|
|
.fs-disc-rate { display:inline-block; padding:1px 6px; border-radius:4px; background:#fff1f0; color:#ef4444; font-size:11px; font-weight:600; }
|
|
.fs-card-summary { display:flex; gap:24px; font-size:12px; color:#4b5563; margin-bottom:12px; padding:10px 12px; background:#f8f9fb; border-radius:8px; }
|
|
.fs-card-summary strong { color:#1a1a2e; font-weight:600; }
|
|
.fs-card-ft { display:flex; gap:16px; border-top:1px solid #f3f4f6; padding-top:12px; }
|
|
/* 抽屉内折扣商品列表 */
|
|
.fs-drawer-prod { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin-bottom:12px; }
|
|
.fs-drawer-prod-hd { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f8f9fb; border-bottom:1px solid #e5e7eb; }
|
|
.fs-drawer-prod-hd span { font-size:13px; font-weight:500; color:#1a1a2e; }
|
|
.fs-drawer-prod-remove { background:none; border:none; color:#9ca3af; cursor:pointer; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; transition:var(--g-transition); }
|
|
.fs-drawer-prod-remove:hover { color:#ef4444; background:#fef2f2; }
|
|
.fs-drawer-prod-bd { padding:10px 12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
|
|
.fs-drawer-prod-bd .fs-field { display:flex; flex-direction:column; gap:4px; }
|
|
.fs-drawer-prod-bd .fs-field label { font-size:11px; color:#6b7280; }
|
|
.fs-drawer-prod-bd .fs-field input { width:100px; height:30px; padding:0 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; outline:none; transition:var(--g-transition); }
|
|
.fs-drawer-prod-bd .fs-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
|
.fs-drawer-prod-bd .fs-field input[readonly] { background:#f8f9fb; color:var(--g-text-muted); cursor:default; }
|
|
.fs-drawer-prod-bd .fs-field .fs-auto-rate { font-size:12px; color:#ef4444; font-weight:600; min-width:36px; line-height:30px; }
|
|
.fs-pill-group { display:flex; gap:8px; flex-wrap:wrap; }
|
|
.fs-pill { padding:6px 16px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); }
|
|
.fs-pill:hover { border-color:var(--primary); color:var(--primary); }
|
|
.fs-pill.checked { background:var(--primary); color:#fff; border-color:var(--primary); }
|
|
.fs-limit-row { display:flex; align-items:center; gap:8px; }
|
|
.fs-limit-row input { width:80px; }
|
|
.fs-limit-row .fs-unit { font-size:13px; color:var(--g-text-secondary); }
|
|
.fs-tag-recurring { background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; border-radius:6px; font-weight:600; }
|
|
.fs-tag-notstarted { background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; border-radius:6px; font-weight:600; }
|
|
.fs-recur-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; }
|
|
.fs-day-sel { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
|
|
.fs-day { width:40px; height:28px; border-radius:14px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; color:#9ca3af; background:#f8f9fb; cursor:pointer; transition:var(--g-transition); }
|
|
.fs-day.active { background:var(--primary); color:#fff; border-color:var(--primary); }
|
|
.fs-day-quick { display:flex; gap:6px; }
|
|
.fs-cycle-section { display:none; }
|
|
.fs-cycle-section.show { display:block; }
|
|
.fs-date-section { display:block; }
|
|
.fs-date-section.hide { display:none; }
|
|
</style>
|
|
|
|
<div class="fs-toolbar">
|
|
<select class="g-select" style="width:200px;">
|
|
<option>老三家外卖（朝阳店）</option>
|
|
<option>老三家外卖（海淀店）</option>
|
|
<option>老三家外卖（望京店）</option>
|
|
<option>老三家外卖（通州店）</option>
|
|
<option>老三家外卖（丰台店）</option>
|
|
</select>
|
|
<select class="g-select" style="width:120px;">
|
|
<option value="">全部状态</option>
|
|
<option>进行中</option>
|
|
<option>已结束</option>
|
|
<option>未开始</option>
|
|
</select>
|
|
<div class="fs-search">
|
|
<i data-lucide="search" style="width:14px;height:14px;"></i>
|
|
<input type="text" placeholder="搜索活动名称…" />
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<button class="g-btn g-btn-primary" onclick="openFsDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>创建限时折扣</button>
|
|
</div>
|
|
|
|
<div class="fs-stats">
|
|
<span>活动总数 <strong>6</strong></span>
|
|
<span>进行中 <strong>3</strong></span>
|
|
<span>参与商品 <strong>18</strong>件</span>
|
|
<span>本月折扣销量 <strong>560</strong>单</span>
|
|
</div>
|
|
|
|
<!-- 活动卡片列表 -->
|
|
<div id="fsActivityList">
|
|
|
|
<!-- 午市特惠 - 进行中 -->
|
|
<div class="fs-card">
|
|
<div class="fs-card-hd">
|
|
<span class="fs-card-name">午市特惠</span>
|
|
<span class="g-tag fs-tag-running">进行中</span>
|
|
<span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 11:00 - 14:00</span>
|
|
<span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-01-01 ~ 2026-03-31</span>
|
|
</div>
|
|
<table class="fs-prod-table">
|
|
<thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>香辣鸡腿堡套餐</td><td class="fs-orig-price">¥32.00</td><td class="fs-disc-price">¥25.60</td><td><span class="fs-disc-rate">8折</span></td><td>2件/人</td><td>86</td></tr>
|
|
<tr><td>牛肉拌面</td><td class="fs-orig-price">¥28.00</td><td class="fs-disc-price">¥19.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>52</td></tr>
|
|
<tr><td>招牌卤肉饭</td><td class="fs-orig-price">¥22.00</td><td class="fs-disc-price">¥17.60</td><td><span class="fs-disc-rate">8折</span></td><td>2件/人</td><td>42</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="fs-card-summary">
|
|
<span>活动销量 <strong>180</strong>单</span>
|
|
<span>折扣总额 <strong>¥1,260</strong></span>
|
|
</div>
|
|
<div class="fs-card-ft">
|
|
<span class="g-action" onclick="openFsDrawer('edit','午市特惠')">编辑</span>
|
|
<span class="g-action">停用</span>
|
|
<span class="g-action g-action-danger">删除</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新品尝鲜 - 进行中 -->
|
|
<div class="fs-card">
|
|
<div class="fs-card-hd">
|
|
<span class="fs-card-name">新品尝鲜</span>
|
|
<span class="g-tag fs-tag-running">进行中</span>
|
|
<span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 10:00 - 22:00</span>
|
|
<span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-02-01 ~ 2026-02-28</span>
|
|
</div>
|
|
<table class="fs-prod-table">
|
|
<thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>黑松露鸡肉卷</td><td class="fs-orig-price">¥38.00</td><td class="fs-disc-price">¥26.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>67</td></tr>
|
|
<tr><td>芝士焗虾饭</td><td class="fs-orig-price">¥35.00</td><td class="fs-disc-price">¥28.00</td><td><span class="fs-disc-rate">8折</span></td><td>1件/人</td><td>45</td></tr>
|
|
<tr><td>抹茶冰淇淋</td><td class="fs-orig-price">¥18.00</td><td class="fs-disc-price">¥9.00</td><td><span class="fs-disc-rate">5折</span></td><td>2件/人</td><td>120</td></tr>
|
|
<tr><td>鲜榨牛油果汁</td><td class="fs-orig-price">¥22.00</td><td class="fs-disc-price">¥15.40</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>38</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="fs-card-summary">
|
|
<span>活动销量 <strong>270</strong>单</span>
|
|
<span>折扣总额 <strong>¥2,480</strong></span>
|
|
</div>
|
|
<div class="fs-card-ft">
|
|
<span class="g-action" onclick="openFsDrawer('edit','新品尝鲜')">编辑</span>
|
|
<span class="g-action">停用</span>
|
|
<span class="g-action g-action-danger">删除</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 周末狂欢 - 已结束 -->
|
|
<div class="fs-card ended">
|
|
<div class="fs-card-hd">
|
|
<span class="fs-card-name">周末狂欢</span>
|
|
<span class="g-tag fs-tag-ended">已结束</span>
|
|
<span class="fs-recur-badge"><i data-lucide="repeat" style="width:11px;height:11px;"></i>每周六、日</span>
|
|
<span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>17:00 - 21:00</span>
|
|
<span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2025-12-01 ~ 2026-01-31</span>
|
|
</div>
|
|
<table class="fs-prod-table">
|
|
<thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>烤鸡翅拼盘</td><td class="fs-orig-price">¥48.00</td><td class="fs-disc-price">¥33.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>95</td></tr>
|
|
<tr><td>小龙虾套餐</td><td class="fs-orig-price">¥68.00</td><td class="fs-disc-price">¥47.60</td><td><span class="fs-disc-rate">7折</span></td><td>1件/人</td><td>62</td></tr>
|
|
<tr><td>啤酒6连包</td><td class="fs-orig-price">¥36.00</td><td class="fs-disc-price">¥21.60</td><td><span class="fs-disc-rate">6折</span></td><td>2件/人</td><td>78</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="fs-card-summary">
|
|
<span>活动销量 <strong>235</strong>单</span>
|
|
<span>折扣总额 <strong>¥3,920</strong></span>
|
|
</div>
|
|
<div class="fs-card-ft">
|
|
<span class="g-action" onclick="openFsDrawer('edit','周末狂欢')">编辑</span>
|
|
<span class="g-action">启用</span>
|
|
<span class="g-action g-action-danger">删除</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 疯狂星期四 - 进行中(周期循环) -->
|
|
<div class="fs-card">
|
|
<div class="fs-card-hd">
|
|
<span class="fs-card-name">疯狂星期四</span>
|
|
<span class="g-tag fs-tag-running">进行中</span>
|
|
<span class="fs-recur-badge"><i data-lucide="repeat" style="width:11px;height:11px;"></i>每周四</span>
|
|
<span class="fs-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>11:00 - 22:00</span>
|
|
<span class="fs-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>长期有效</span>
|
|
</div>
|
|
<table class="fs-prod-table">
|
|
<thead><tr><th>商品名</th><th>原价</th><th>折扣价</th><th>折扣力度</th><th>限购</th><th>已售</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>香辣鸡腿堡</td><td class="fs-orig-price">¥22.00</td><td class="fs-disc-price">¥9.90</td><td><span class="fs-disc-rate">4.5折</span></td><td>2件/人</td><td>326</td></tr>
|
|
<tr><td>黄金脆皮鸡</td><td class="fs-orig-price">¥39.90</td><td class="fs-disc-price">¥19.90</td><td><span class="fs-disc-rate">5折</span></td><td>1件/人</td><td>218</td></tr>
|
|
<tr><td>薯条(大)</td><td class="fs-orig-price">¥16.00</td><td class="fs-disc-price">¥6.00</td><td><span class="fs-disc-rate">3.8折</span></td><td>3件/人</td><td>485</td></tr>
|
|
<tr><td>可乐(大杯)</td><td class="fs-orig-price">¥12.00</td><td class="fs-disc-price">¥1.00</td><td><span class="fs-disc-rate">0.8折</span></td><td>1件/人</td><td>512</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="fs-card-summary">
|
|
<span>活动销量 <strong>1,541</strong>单</span>
|
|
<span>折扣总额 <strong>¥18,260</strong></span>
|
|
<span>已循环 <strong>12</strong>周</span>
|
|
</div>
|
|
<div class="fs-card-ft">
|
|
<span class="g-action" onclick="openFsDrawer('edit','疯狂星期四')">编辑</span>
|
|
<span class="g-action">停用</span>
|
|
<span class="g-action g-action-danger">删除</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="g-pagination" style="margin-top:8px;">
|
|
<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"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
|
|
<span style="font-size:12px;color:var(--g-text-muted);margin-left:8px;">共 6 条</span>
|
|
</div>
|
|
|
|
<!-- 创建/编辑抽屉 -->
|
|
<div class="g-drawer-mask" id="fsDrawerMask" onclick="closeFsDrawer()"></div>
|
|
<div class="g-drawer" id="fsDrawer" style="width:560px">
|
|
<div class="g-drawer-hd">
|
|
<span class="g-drawer-title" id="fsDrawerTitle">创建限时折扣</span>
|
|
<button class="g-drawer-close" onclick="closeFsDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
|
</div>
|
|
<div class="g-drawer-bd">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">活动名称</label>
|
|
<input class="g-input" id="fsName" placeholder="请输入活动名称，如：午市特惠、新品尝鲜">
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">活动周期</label>
|
|
<div class="fs-pill-group" style="margin-bottom:10px;">
|
|
<span class="fs-pill checked" onclick="selectFsCycle(this,'once')">一次性活动</span>
|
|
<span class="fs-pill" onclick="selectFsCycle(this,'recurring')">周期循环</span>
|
|
</div>
|
|
<div class="g-hint">周期循环适合固定日期的促销，如"疯狂星期四"、"周末特惠"</div>
|
|
</div>
|
|
<div class="g-form-group fs-date-section" id="fsDateSection">
|
|
<label class="g-form-label required">活动时间</label>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<input class="g-input" type="date" id="fsDateStart" value="2026-02-01" style="flex:1;">
|
|
<span style="color:var(--g-text-muted);">~</span>
|
|
<input class="g-input" type="date" id="fsDateEnd" value="2026-03-31" style="flex:1;">
|
|
</div>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">每日时段</label>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<input class="g-input" type="time" id="fsTimeStart" value="11:00" style="flex:1;">
|
|
<span style="color:var(--g-text-muted);">~</span>
|
|
<input class="g-input" type="time" id="fsTimeEnd" value="14:00" style="flex:1;">
|
|
</div>
|
|
<div class="g-hint">留空则全天有效</div>
|
|
</div>
|
|
<div class="g-form-group fs-cycle-section" id="fsCycleSection">
|
|
<label class="g-form-label required">循环日期</label>
|
|
<div class="fs-day-sel" id="fsDaySel">
|
|
<span class="fs-day" onclick="toggleFsDay(this)">周一</span>
|
|
<span class="fs-day" onclick="toggleFsDay(this)">周二</span>
|
|
<span class="fs-day" onclick="toggleFsDay(this)">周三</span>
|
|
<span class="fs-day active" onclick="toggleFsDay(this)">周四</span>
|
|
<span class="fs-day" onclick="toggleFsDay(this)">周五</span>
|
|
<span class="fs-day" onclick="toggleFsDay(this)">周六</span>
|
|
<span class="fs-day" onclick="toggleFsDay(this)">周日</span>
|
|
</div>
|
|
<div class="fs-day-quick">
|
|
<button class="g-btn g-btn-sm" onclick="fsDayQuick('weekday')">工作日</button>
|
|
<button class="g-btn g-btn-sm" onclick="fsDayQuick('weekend')">周末</button>
|
|
<button class="g-btn g-btn-sm" onclick="fsDayQuick('all')">全选</button>
|
|
</div>
|
|
<div class="g-hint" style="margin-top:8px;">活动将在选中的每个星期自动生效，无需手动开启</div>
|
|
</div>
|
|
|
|
<!-- 折扣商品 -->
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required" style="margin-bottom:10px;">折扣商品</label>
|
|
<div id="fsProductList">
|
|
<!-- 预填商品 1 -->
|
|
<div class="fs-drawer-prod">
|
|
<div class="fs-drawer-prod-hd">
|
|
<span>香辣鸡腿堡套餐</span>
|
|
<button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
<div class="fs-drawer-prod-bd">
|
|
<div class="fs-field">
|
|
<label>原价</label>
|
|
<input type="text" value="¥32.00" readonly>
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>折扣价</label>
|
|
<input type="number" value="25.60" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)">
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>折扣</label>
|
|
<span class="fs-auto-rate">8折</span>
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>限购/人</label>
|
|
<input type="number" value="2" min="0" placeholder="不限则留空">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 预填商品 2 -->
|
|
<div class="fs-drawer-prod">
|
|
<div class="fs-drawer-prod-hd">
|
|
<span>牛肉拌面</span>
|
|
<button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
<div class="fs-drawer-prod-bd">
|
|
<div class="fs-field">
|
|
<label>原价</label>
|
|
<input type="text" value="¥28.00" readonly>
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>折扣价</label>
|
|
<input type="number" value="19.60" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)">
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>折扣</label>
|
|
<span class="fs-auto-rate">7折</span>
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>限购/人</label>
|
|
<input type="number" value="1" min="0" placeholder="不限则留空">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 预填商品 3 -->
|
|
<div class="fs-drawer-prod">
|
|
<div class="fs-drawer-prod-hd">
|
|
<span>招牌卤肉饭</span>
|
|
<button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
<div class="fs-drawer-prod-bd">
|
|
<div class="fs-field">
|
|
<label>原价</label>
|
|
<input type="text" value="¥22.00" readonly>
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>折扣价</label>
|
|
<input type="number" value="17.60" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)">
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>折扣</label>
|
|
<span class="fs-auto-rate">8折</span>
|
|
</div>
|
|
<div class="fs-field">
|
|
<label>限购/人</label>
|
|
<input type="number" value="2" min="0" placeholder="不限则留空">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="g-btn g-btn-sm" style="margin-top:4px;" onclick="openProductPicker({title:'添加折扣商品',subtitle:'限时折扣',onConfirm:addFsProducts})"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加商品</button>
|
|
</div>
|
|
|
|
<!-- 适用渠道 -->
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">适用渠道</label>
|
|
<div class="fs-pill-group">
|
|
<span class="fs-pill checked" onclick="toggleFsPill(this)">外卖配送</span>
|
|
<span class="fs-pill checked" onclick="toggleFsPill(this)">到店自取</span>
|
|
<span class="fs-pill" onclick="toggleFsPill(this)">堂食点餐</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 限购设置 -->
|
|
<div class="g-form-group">
|
|
<label class="g-form-label">每人限购</label>
|
|
<div class="fs-limit-row">
|
|
<input class="g-input" type="number" value="5" min="0" placeholder="不限则留空" style="width:100px;">
|
|
<span class="fs-unit">件</span>
|
|
</div>
|
|
<div class="g-hint">活动期间每人累计可购买的折扣商品总数，留空不限</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-drawer-ft">
|
|
<button class="g-btn" onclick="closeFsDrawer()">取消</button>
|
|
<button class="g-btn g-btn-primary" onclick="closeFsDrawer()">保存</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openFsDrawer(mode, name) {
|
|
document.getElementById('fsDrawerMask').classList.add('open');
|
|
document.getElementById('fsDrawer').classList.add('open');
|
|
if (mode === 'edit') {
|
|
document.getElementById('fsDrawerTitle').textContent = '编辑限时折扣';
|
|
document.getElementById('fsName').value = name || '';
|
|
} else {
|
|
document.getElementById('fsDrawerTitle').textContent = '创建限时折扣';
|
|
document.getElementById('fsName').value = '';
|
|
}
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
|
|
function closeFsDrawer() {
|
|
document.getElementById('fsDrawerMask').classList.remove('open');
|
|
document.getElementById('fsDrawer').classList.remove('open');
|
|
}
|
|
|
|
function removeFsProduct(btn) {
|
|
btn.closest('.fs-drawer-prod').remove();
|
|
}
|
|
|
|
function toggleFsPill(el) {
|
|
el.classList.toggle('checked');
|
|
}
|
|
|
|
/* 自动计算折扣率 */
|
|
function calcFsRate(input) {
|
|
var row = input.closest('.fs-drawer-prod-bd');
|
|
var origText = row.querySelector('input[readonly]').value.replace(/[¥,]/g, '');
|
|
var orig = parseFloat(origText);
|
|
var disc = parseFloat(input.value);
|
|
var rateEl = row.querySelector('.fs-auto-rate');
|
|
if (orig > 0 && disc > 0 && disc <= orig) {
|
|
var r = Math.round((disc / orig) * 10);
|
|
rateEl.textContent = r + '折';
|
|
} else {
|
|
rateEl.textContent = '-';
|
|
}
|
|
}
|
|
|
|
/* 活动周期切换 */
|
|
function selectFsCycle(el, type) {
|
|
el.parentElement.querySelectorAll('.fs-pill').forEach(function(p) { p.classList.remove('checked'); });
|
|
el.classList.add('checked');
|
|
var dateSection = document.getElementById('fsDateSection');
|
|
var cycleSection = document.getElementById('fsCycleSection');
|
|
if (type === 'recurring') {
|
|
dateSection.classList.add('hide');
|
|
cycleSection.classList.add('show');
|
|
} else {
|
|
dateSection.classList.remove('hide');
|
|
cycleSection.classList.remove('show');
|
|
}
|
|
}
|
|
|
|
function toggleFsDay(el) {
|
|
el.classList.toggle('active');
|
|
}
|
|
|
|
function fsDayQuick(mode) {
|
|
var days = document.querySelectorAll('#fsDaySel .fs-day');
|
|
days.forEach(function(d, i) {
|
|
if (mode === 'all') d.classList.add('active');
|
|
else if (mode === 'weekday') d.classList.toggle('active', i < 5);
|
|
else if (mode === 'weekend') d.classList.toggle('active', i >= 5);
|
|
});
|
|
}
|
|
|
|
/* 商品选择器回调 */
|
|
function addFsProducts(items) {
|
|
var list = document.getElementById('fsProductList');
|
|
items.forEach(function(p) {
|
|
var price = p.price || (Math.floor(Math.random() * 30 + 15) + '.00');
|
|
var div = document.createElement('div');
|
|
div.className = 'fs-drawer-prod';
|
|
div.innerHTML =
|
|
'<div class="fs-drawer-prod-hd"><span>' + p.name + '</span>' +
|
|
'<button class="fs-drawer-prod-remove" onclick="removeFsProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button></div>' +
|
|
'<div class="fs-drawer-prod-bd">' +
|
|
'<div class="fs-field"><label>原价</label><input type="text" value="¥' + price + '" readonly></div>' +
|
|
'<div class="fs-field"><label>折扣价</label><input type="number" step="0.01" placeholder="请输入折扣价" oninput="calcFsRate(this)"></div>' +
|
|
'<div class="fs-field"><label>折扣</label><span class="fs-auto-rate">-</span></div>' +
|
|
'<div class="fs-field"><label>限购/人</label><input type="number" min="0" placeholder="不限则留空"></div>' +
|
|
'</div>';
|
|
list.appendChild(div);
|
|
});
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
</script>
|