568 lines
27 KiB
HTML
568 lines
27 KiB
HTML
<!-- 秒杀活动页 -->
|
||
<style>
|
||
.sk-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; }
|
||
.sk-search { position:relative; }
|
||
.sk-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); }
|
||
.sk-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.sk-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#bbb; pointer-events:none; }
|
||
|
||
.sk-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; }
|
||
.sk-stats span { display:flex; align-items:center; gap:6px; }
|
||
.sk-stats strong { color:#1a1a2e; font-weight:600; }
|
||
|
||
.sk-card { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); padding:20px; margin-bottom:16px; transition:box-shadow var(--g-transition); }
|
||
.sk-card:hover { box-shadow:var(--g-shadow-md); }
|
||
.sk-card.ended { opacity:.5; }
|
||
|
||
.sk-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
|
||
.sk-card-name { font-size:15px; font-weight:600; color:#1a1a2e; }
|
||
.sk-card-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
|
||
|
||
.sk-tag-running { background:#dcfce7; color:#22c55e; border:1px solid #bbf7d0; border-radius:6px; font-weight:600; }
|
||
.sk-tag-notstarted { background:#f0f5ff; color:var(--primary); border:1px solid #adc6ff; border-radius:6px; font-weight:600; }
|
||
.sk-tag-ended { background:#f8f9fb; color:#9ca3af; border:1px solid #e5e7eb; border-radius:6px; font-weight:600; }
|
||
|
||
/* 秒杀商品行 */
|
||
.sk-prod-list { margin-bottom:14px; }
|
||
.sk-prod-row { display:flex; align-items:center; gap:16px; padding:10px 12px; border-bottom:1px solid #f3f4f6; font-size:13px; }
|
||
.sk-prod-row:last-child { border-bottom:none; }
|
||
.sk-prod-row:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); border-radius:6px; }
|
||
.sk-prod-name { width:140px; font-weight:500; color:#1a1a2e; flex-shrink:0; }
|
||
.sk-prod-prices { display:flex; align-items:baseline; gap:8px; width:140px; flex-shrink:0; }
|
||
.sk-orig-price { color:var(--g-text-muted); text-decoration:line-through; font-size:12px; }
|
||
.sk-seckill-price { color:#ef4444; font-weight:700; font-size:16px; }
|
||
|
||
/* 进度条 */
|
||
.sk-progress-wrap { flex:1; min-width:160px; display:flex; align-items:center; gap:8px; }
|
||
.sk-progress { position:relative; height:16px; background:#f3f4f6; border-radius:8px; overflow:hidden; flex:1; }
|
||
.sk-progress-fill { height:100%; border-radius:8px; transition:width 0.3s ease; }
|
||
.sk-progress-fill.green { background:linear-gradient(90deg, #52c41a, #73d13d); }
|
||
.sk-progress-fill.orange { background:linear-gradient(90deg, #fa8c16, #ffa940); }
|
||
.sk-progress-fill.red { background:linear-gradient(90deg, #f5222d, #ff4d4f); }
|
||
.sk-progress-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2); white-space:nowrap; }
|
||
.sk-sold-out { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; background:#fff1f0; color:#f5222d; border:1px solid #ffa39e; white-space:nowrap; }
|
||
|
||
.sk-card-summary { display:flex; gap:24px; font-size:12px; color:#4b5563; margin-bottom:12px; padding:10px 12px; background:#f8f9fb; border-radius:8px; }
|
||
.sk-card-summary strong { color:#1a1a2e; font-weight:600; }
|
||
.sk-card-ft { display:flex; gap:16px; border-top:1px solid #f3f4f6; padding-top:12px; }
|
||
|
||
/* 抽屉内秒杀商品 */
|
||
.sk-drawer-prod { border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin-bottom:12px; }
|
||
.sk-drawer-prod-hd { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f8f9fb; border-bottom:1px solid #e5e7eb; }
|
||
.sk-drawer-prod-hd span { font-size:13px; font-weight:500; color:#1a1a2e; }
|
||
.sk-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); }
|
||
.sk-drawer-prod-remove:hover { color:#ef4444; background:#fef2f2; }
|
||
.sk-drawer-prod-bd { padding:10px 12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
|
||
.sk-drawer-prod-bd .sk-field { display:flex; flex-direction:column; gap:4px; }
|
||
.sk-drawer-prod-bd .sk-field label { font-size:11px; color:#6b7280; }
|
||
.sk-drawer-prod-bd .sk-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); }
|
||
.sk-drawer-prod-bd .sk-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.sk-drawer-prod-bd .sk-field input[readonly] { background:#f8f9fb; color:var(--g-text-muted); cursor:default; }
|
||
|
||
.sk-pill-group { display:flex; gap:8px; flex-wrap:wrap; }
|
||
.sk-pill { padding:6px 16px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); }
|
||
.sk-pill:hover { border-color:var(--primary); color:var(--primary); }
|
||
.sk-pill.checked { background:var(--primary); color:#fff; border-color:var(--primary); }
|
||
|
||
/* 场次设置 */
|
||
.sk-session-section { display:none; margin-top:12px; }
|
||
.sk-session-section.show { display:block; }
|
||
.sk-date-section { display:block; margin-top:12px; }
|
||
.sk-date-section.hide { display:none; }
|
||
.sk-session-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 12px; background:#f8f9fb; border-radius:6px; border:1px solid #f0f0f0; }
|
||
.sk-session-row input { width:90px; }
|
||
.sk-session-label { font-size:12px; color:var(--g-text-secondary); }
|
||
.sk-session-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); }
|
||
.sk-session-remove:hover { color:#ef4444; background:#fef2f2; }
|
||
|
||
.sk-limit-row { display:flex; align-items:center; gap:8px; }
|
||
.sk-limit-row input { width:80px; }
|
||
.sk-unit { font-size:13px; color:var(--g-text-secondary); }
|
||
|
||
.sk-preheat-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
|
||
.sk-preheat-row input { width:60px; }
|
||
</style>
|
||
|
||
<!-- 工具栏 -->
|
||
<div class="sk-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="sk-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="openSkDrawer('add')"><i data-lucide="plus" style="width:14px;height:14px;"></i>创建秒杀</button>
|
||
</div>
|
||
|
||
<!-- 统计栏 -->
|
||
<div class="sk-stats">
|
||
<span>秒杀活动 <strong>6</strong></span>
|
||
<span>进行中 <strong>2</strong></span>
|
||
<span>本月秒杀销量 <strong>860</strong>单</span>
|
||
<span>秒杀转化率 <strong>78.5%</strong></span>
|
||
</div>
|
||
|
||
<!-- 活动卡片列表 -->
|
||
<div id="skActivityList">
|
||
|
||
<!-- 午间秒杀 - 进行中 -->
|
||
<div class="sk-card">
|
||
<div class="sk-card-hd">
|
||
<span class="sk-card-name">午间秒杀</span>
|
||
<span class="g-tag sk-tag-running">进行中</span>
|
||
<span class="sk-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 11:00 - 13:00</span>
|
||
</div>
|
||
<div class="sk-prod-list">
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">招牌卤肉饭</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥22</span>
|
||
<span class="sk-seckill-price">¥9.9</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill orange" style="width:84%;"></div>
|
||
<span class="sk-progress-text">已抢 42/50</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">冰粉</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥8</span>
|
||
<span class="sk-seckill-price">¥1</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill red" style="width:100%;"></div>
|
||
<span class="sk-progress-text">已抢 50/50</span>
|
||
</div>
|
||
<span class="sk-sold-out"><i data-lucide="flame" style="width:11px;height:11px;"></i>已抢光</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-card-summary">
|
||
<span>参与人数 <strong>286</strong>人</span>
|
||
<span>成交 <strong>218</strong>单</span>
|
||
<span>转化率 <strong>76.2%</strong></span>
|
||
</div>
|
||
<div class="sk-card-ft">
|
||
<span class="g-action" onclick="openSkDrawer('edit','午间秒杀')">编辑</span>
|
||
<span class="g-action">停用</span>
|
||
<span class="g-action g-action-danger">删除</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 整点特惠 - 进行中 -->
|
||
<div class="sk-card">
|
||
<div class="sk-card-hd">
|
||
<span class="sk-card-name">整点特惠</span>
|
||
<span class="g-tag sk-tag-running">进行中</span>
|
||
<span class="sk-card-time"><i data-lucide="clock" style="width:12px;height:12px;"></i>每天 10:00 场 / 14:00 场 / 18:00 场</span>
|
||
</div>
|
||
<div class="sk-prod-list">
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">黄焖鸡米饭</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥28</span>
|
||
<span class="sk-seckill-price">¥14.9</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill orange" style="width:70%;"></div>
|
||
<span class="sk-progress-text">已抢 28/40</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">奶茶(大杯)</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥15</span>
|
||
<span class="sk-seckill-price">¥5</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill orange" style="width:70%;"></div>
|
||
<span class="sk-progress-text">已抢 35/50</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">炸鸡翅(6只)</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥25</span>
|
||
<span class="sk-seckill-price">¥12.9</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill green" style="width:60%;"></div>
|
||
<span class="sk-progress-text">已抢 18/30</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-card-summary">
|
||
<span>参与人数 <strong>198</strong>人</span>
|
||
<span>成交 <strong>156</strong>单</span>
|
||
<span>转化率 <strong>78.8%</strong></span>
|
||
</div>
|
||
<div class="sk-card-ft">
|
||
<span class="g-action" onclick="openSkDrawer('edit','整点特惠')">编辑</span>
|
||
<span class="g-action">停用</span>
|
||
<span class="g-action g-action-danger">删除</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新品首发秒杀 - 未开始 -->
|
||
<div class="sk-card">
|
||
<div class="sk-card-hd">
|
||
<span class="sk-card-name">新品首发秒杀</span>
|
||
<span class="g-tag sk-tag-notstarted">未开始</span>
|
||
<span class="sk-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-02-20 10:00 开始</span>
|
||
</div>
|
||
<div class="sk-prod-list">
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">黑松露鸡肉卷</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥38</span>
|
||
<span class="sk-seckill-price">¥19.9</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill green" style="width:0%;"></div>
|
||
<span class="sk-progress-text" style="color:#999;">0/100</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">芝士焗虾饭</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥35</span>
|
||
<span class="sk-seckill-price">¥17.5</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill green" style="width:0%;"></div>
|
||
<span class="sk-progress-text" style="color:#999;">0/80</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-card-ft">
|
||
<span class="g-action" onclick="openSkDrawer('edit','新品首发秒杀')">编辑</span>
|
||
<span class="g-action">停用</span>
|
||
<span class="g-action g-action-danger">删除</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 周年庆秒杀 - 已结束 -->
|
||
<div class="sk-card ended">
|
||
<div class="sk-card-hd">
|
||
<span class="sk-card-name">周年庆秒杀</span>
|
||
<span class="g-tag sk-tag-ended">已结束</span>
|
||
<span class="sk-card-time"><i data-lucide="calendar" style="width:12px;height:12px;"></i>2026-01-15 ~ 2026-01-17</span>
|
||
</div>
|
||
<div class="sk-prod-list">
|
||
<div class="sk-prod-row">
|
||
<span class="sk-prod-name">全场5折套餐</span>
|
||
<span class="sk-prod-prices">
|
||
<span class="sk-orig-price">¥49</span>
|
||
<span class="sk-seckill-price">¥24.5</span>
|
||
</span>
|
||
<div class="sk-progress-wrap">
|
||
<div class="sk-progress">
|
||
<div class="sk-progress-fill red" style="width:100%;"></div>
|
||
<span class="sk-progress-text">已抢 200/200</span>
|
||
</div>
|
||
<span class="sk-sold-out"><i data-lucide="flame" style="width:11px;height:11px;"></i>已抢光</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sk-card-summary">
|
||
<span>参与人数 <strong>520</strong>人</span>
|
||
<span>成交 <strong>412</strong>单</span>
|
||
</div>
|
||
<div class="sk-card-ft">
|
||
<span class="g-action" onclick="openSkDrawer('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="skDrawerMask" onclick="closeSkDrawer()"></div>
|
||
<div class="g-drawer" id="skDrawer" style="width:560px">
|
||
<div class="g-drawer-hd">
|
||
<span class="g-drawer-title" id="skDrawerTitle">创建秒杀活动</span>
|
||
<button class="g-drawer-close" onclick="closeSkDrawer()"><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="skName" placeholder="如：午间秒杀、整点特惠">
|
||
</div>
|
||
|
||
<!-- 活动类型 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">活动类型</label>
|
||
<div class="sk-pill-group">
|
||
<span class="sk-pill checked" onclick="selectSkType(this,'timed')">限时秒杀</span>
|
||
<span class="sk-pill" onclick="selectSkType(this,'hourly')">整点秒杀</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 限时秒杀：日期+时间范围 -->
|
||
<div class="g-form-group sk-date-section" id="skDateSection">
|
||
<label class="g-form-label required">活动时间</label>
|
||
<div style="display:flex;gap:8px;align-items:center;">
|
||
<input class="g-input" type="date" value="2026-02-15" style="flex:1;" placeholder="开始日期">
|
||
<span style="color:var(--g-text-muted);">~</span>
|
||
<input class="g-input" type="date" value="2026-03-15" style="flex:1;" placeholder="结束日期">
|
||
</div>
|
||
<div style="display:flex;gap:8px;align-items:center;margin-top:8px;">
|
||
<input class="g-input" type="time" value="11:00" style="flex:1;" placeholder="开始时间">
|
||
<span style="color:var(--g-text-muted);">~</span>
|
||
<input class="g-input" type="time" value="13:00" style="flex:1;" placeholder="结束时间">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 整点秒杀：场次设置 -->
|
||
<div class="g-form-group sk-session-section" id="skSessionSection">
|
||
<label class="g-form-label required">场次设置</label>
|
||
<div id="skSessionList">
|
||
<div class="sk-session-row">
|
||
<input class="g-input" type="time" value="10:00" placeholder="场次时间">
|
||
<span class="sk-session-label">持续</span>
|
||
<input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">
|
||
<span class="sk-session-label">分钟</span>
|
||
<button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
||
</div>
|
||
<div class="sk-session-row">
|
||
<input class="g-input" type="time" value="14:00" placeholder="场次时间">
|
||
<span class="sk-session-label">持续</span>
|
||
<input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">
|
||
<span class="sk-session-label">分钟</span>
|
||
<button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
||
</div>
|
||
<div class="sk-session-row">
|
||
<input class="g-input" type="time" value="18:00" placeholder="场次时间">
|
||
<span class="sk-session-label">持续</span>
|
||
<input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">
|
||
<span class="sk-session-label">分钟</span>
|
||
<button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
||
</div>
|
||
</div>
|
||
<button class="g-btn g-btn-sm" style="margin-top:4px;" onclick="addSkSession()"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加场次</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required" style="margin-bottom:10px;">秒杀商品</label>
|
||
<div id="skProductList">
|
||
<!-- 预填商品 1 -->
|
||
<div class="sk-drawer-prod">
|
||
<div class="sk-drawer-prod-hd">
|
||
<span>招牌卤肉饭</span>
|
||
<button class="sk-drawer-prod-remove" onclick="removeSkProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
||
</div>
|
||
<div class="sk-drawer-prod-bd">
|
||
<div class="sk-field">
|
||
<label>原价</label>
|
||
<input type="text" value="¥22.00" readonly>
|
||
</div>
|
||
<div class="sk-field">
|
||
<label>秒杀价</label>
|
||
<input type="number" value="9.90" step="0.01" placeholder="请输入秒杀价">
|
||
</div>
|
||
<div class="sk-field">
|
||
<label>限量(份)</label>
|
||
<input type="number" value="50" min="1" placeholder="如：50">
|
||
</div>
|
||
<div class="sk-field">
|
||
<label>每人限购</label>
|
||
<input type="number" value="1" min="0" placeholder="不限则留空">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 预填商品 2 -->
|
||
<div class="sk-drawer-prod">
|
||
<div class="sk-drawer-prod-hd">
|
||
<span>冰粉</span>
|
||
<button class="sk-drawer-prod-remove" onclick="removeSkProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>
|
||
</div>
|
||
<div class="sk-drawer-prod-bd">
|
||
<div class="sk-field">
|
||
<label>原价</label>
|
||
<input type="text" value="¥8.00" readonly>
|
||
</div>
|
||
<div class="sk-field">
|
||
<label>秒杀价</label>
|
||
<input type="number" value="1.00" step="0.01" placeholder="请输入秒杀价">
|
||
</div>
|
||
<div class="sk-field">
|
||
<label>限量(份)</label>
|
||
<input type="number" value="50" min="1" placeholder="如：50">
|
||
</div>
|
||
<div class="sk-field">
|
||
<label>每人限购</label>
|
||
<input type="number" value="1" min="0" placeholder="不限则留空">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="g-btn g-btn-sm" style="margin-top:4px;" onclick="addSkProducts()"><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="sk-pill-group">
|
||
<span class="sk-pill checked" onclick="toggleSkPill(this)">外卖</span>
|
||
<span class="sk-pill checked" onclick="toggleSkPill(this)">自提</span>
|
||
<span class="sk-pill checked" onclick="toggleSkPill(this)">堂食</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每人限购 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">每人限购</label>
|
||
<div class="sk-limit-row">
|
||
<input class="g-input" type="number" value="2" min="0" placeholder="不限则留空" style="width:100px;">
|
||
<span class="sk-unit">件</span>
|
||
</div>
|
||
<div class="g-hint">活动期间每人累计可秒杀的商品总数，留空不限</div>
|
||
</div>
|
||
|
||
<!-- 预热设置 -->
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">预热设置</label>
|
||
<div class="g-toggle-wrap">
|
||
<div class="g-toggle on" id="skPreheatToggle" onclick="this.classList.toggle('on')"></div>
|
||
<span class="g-toggle-label">开启预热</span>
|
||
</div>
|
||
<div class="sk-preheat-row">
|
||
<span class="sk-session-label">提前</span>
|
||
<input class="g-input" type="number" value="2" min="1" placeholder="小时" style="width:60px;">
|
||
<span class="sk-session-label">小时</span>
|
||
</div>
|
||
<div class="g-hint">在商品页展示秒杀预告，吸引用户提前关注</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft">
|
||
<button class="g-btn" onclick="closeSkDrawer()">取消</button>
|
||
<button class="g-btn g-btn-primary" onclick="closeSkDrawer()">保存</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* 抽屉开关 */
|
||
function openSkDrawer(mode, name) {
|
||
document.getElementById('skDrawerMask').classList.add('open');
|
||
document.getElementById('skDrawer').classList.add('open');
|
||
if (mode === 'edit') {
|
||
document.getElementById('skDrawerTitle').textContent = '编辑秒杀活动';
|
||
document.getElementById('skName').value = name || '';
|
||
} else {
|
||
document.getElementById('skDrawerTitle').textContent = '创建秒杀活动';
|
||
document.getElementById('skName').value = '';
|
||
}
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
|
||
function closeSkDrawer() {
|
||
document.getElementById('skDrawerMask').classList.remove('open');
|
||
document.getElementById('skDrawer').classList.remove('open');
|
||
}
|
||
|
||
/* 活动类型切换 */
|
||
function selectSkType(el, type) {
|
||
el.parentElement.querySelectorAll('.sk-pill').forEach(function(p) { p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
var dateSection = document.getElementById('skDateSection');
|
||
var sessionSection = document.getElementById('skSessionSection');
|
||
if (type === 'hourly') {
|
||
dateSection.classList.add('hide');
|
||
sessionSection.classList.add('show');
|
||
} else {
|
||
dateSection.classList.remove('hide');
|
||
sessionSection.classList.remove('show');
|
||
}
|
||
}
|
||
|
||
/* 场次管理 */
|
||
function addSkSession() {
|
||
var list = document.getElementById('skSessionList');
|
||
var row = document.createElement('div');
|
||
row.className = 'sk-session-row';
|
||
row.innerHTML =
|
||
'<input class="g-input" type="time" placeholder="场次时间">' +
|
||
'<span class="sk-session-label">持续</span>' +
|
||
'<input class="g-input" type="number" value="60" min="1" style="width:70px;" placeholder="分钟">' +
|
||
'<span class="sk-session-label">分钟</span>' +
|
||
'<button class="sk-session-remove" onclick="removeSkSession(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button>';
|
||
list.appendChild(row);
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
|
||
function removeSkSession(btn) {
|
||
btn.closest('.sk-session-row').remove();
|
||
}
|
||
|
||
/* 商品管理 */
|
||
function addSkProducts() {
|
||
var names = ['黄焖鸡米饭', '奶茶(大杯)', '炸鸡翅(6只)'];
|
||
var prices = ['28.00', '15.00', '25.00'];
|
||
var idx = Math.floor(Math.random() * names.length);
|
||
var list = document.getElementById('skProductList');
|
||
var div = document.createElement('div');
|
||
div.className = 'sk-drawer-prod';
|
||
div.innerHTML =
|
||
'<div class="sk-drawer-prod-hd"><span>' + names[idx] + '</span>' +
|
||
'<button class="sk-drawer-prod-remove" onclick="removeSkProduct(this)"><i data-lucide="x" style="width:14px;height:14px;"></i></button></div>' +
|
||
'<div class="sk-drawer-prod-bd">' +
|
||
'<div class="sk-field"><label>原价</label><input type="text" value="¥' + prices[idx] + '" readonly></div>' +
|
||
'<div class="sk-field"><label>秒杀价</label><input type="number" step="0.01" placeholder="请输入秒杀价"></div>' +
|
||
'<div class="sk-field"><label>限量(份)</label><input type="number" min="1" placeholder="如：50"></div>' +
|
||
'<div class="sk-field"><label>每人限购</label><input type="number" min="0" placeholder="不限则留空"></div>' +
|
||
'</div>';
|
||
list.appendChild(div);
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
|
||
function removeSkProduct(btn) {
|
||
btn.closest('.sk-drawer-prod').remove();
|
||
}
|
||
|
||
/* Pill 切换 */
|
||
function toggleSkPill(el) {
|
||
el.classList.toggle('checked');
|
||
}
|
||
|
||
/* 初始化图标 */
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
</script>
|