473 lines
29 KiB
HTML
473 lines
29 KiB
HTML
<!-- 营业时间页 -->
|
|
<style>
|
|
.page-hours { max-width:960px; }
|
|
.ph-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; }
|
|
.ph-card-header { padding:14px 18px; font-size:14px; font-weight:600; color:#1a1a2e; background:#f8f9fb; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; border-radius:10px 10px 0 0; }
|
|
.ph-card-body { padding:16px 18px; }
|
|
.week-grid { display:flex; flex-direction:column; gap:0; }
|
|
.week-row { display:grid; grid-template-columns:80px 1fr auto; align-items:center; padding:12px 0; border-bottom:1px solid #f3f4f6; gap:12px; transition:var(--g-transition); }
|
|
.week-row:last-child { border-bottom:none; }
|
|
.week-row:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); }
|
|
.week-day { font-size:13px; font-weight:500; color:#1a1a2e; }
|
|
.week-day .day-en { font-size:11px; color:#9ca3af; font-weight:400; }
|
|
.week-slots { display:flex; flex-wrap:wrap; gap:8px; }
|
|
.time-slot { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:6px; font-size:12px; background:#f6ffed; border:1px solid #b7eb8f; color:#389e0d; }
|
|
.time-slot.delivery { background:#e6f7ff; border-color:#91d5ff; color:#1890ff; }
|
|
.time-slot.pickup { background:#fff7e6; border-color:#ffd591; color:#d46b08; }
|
|
.time-slot .slot-type { font-weight:600; }
|
|
.time-slot .slot-time { color:inherit; opacity:0.85; }
|
|
.time-slot .slot-cap { font-size:10px; opacity:0.7; }
|
|
.week-actions { display:flex; gap:4px; }
|
|
.week-edit { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; color:#9ca3af; border:none; background:none; transition:var(--g-transition); }
|
|
.week-edit:hover { background:#f8f9fb; color:var(--primary); }
|
|
.week-closed { font-size:12px; color:#9ca3af; font-style:italic; }
|
|
.holiday-table { width:100%; border-collapse:collapse; font-size:13px; }
|
|
.holiday-table th { background:#f8f9fb; padding:8px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; }
|
|
.holiday-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
|
|
.holiday-table tr:last-child td { border-bottom:none; }
|
|
.holiday-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
|
|
.h-tag { display:inline-block; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:600; }
|
|
.h-tag.closed { background:#fff2f0; color:#ef4444; }
|
|
.h-tag.special { background:#fff7e6; color:#f59e0b; }
|
|
.h-link { color:var(--primary); cursor:pointer; font-size:12px; margin-right:8px; transition:var(--g-transition); }
|
|
.h-link:hover { text-decoration:underline; }
|
|
.h-link.danger { color:#ef4444; }
|
|
.ph-legend { display:flex; gap:16px; font-size:12px; color:#9ca3af; margin-bottom:12px; }
|
|
.ph-legend span { display:flex; align-items:center; gap:4px; }
|
|
.ph-legend-dot { width:10px; height:10px; border-radius:2px; }
|
|
/* Type pills */
|
|
.ph-type-pills { display:flex; gap:8px; }
|
|
.ph-type-pill { padding:6px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
|
|
.ph-type-pill.tp-biz.active { background:#f6ffed; border-color:#b7eb8f; color:#389e0d; font-weight:600; }
|
|
.ph-type-pill.tp-del.active { background:#e6f7ff; border-color:#91d5ff; color:#1890ff; font-weight:600; }
|
|
.ph-type-pill.tp-pick.active { background:#fff7e6; border-color:#ffd591; color:#d46b08; font-weight:600; }
|
|
/* Day pills */
|
|
.ph-day-pills { display:flex; gap:6px; flex-wrap:wrap; }
|
|
.ph-day-pill { width:42px; height:34px; border-radius:8px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; display:flex; align-items:center; justify-content:center; transition:var(--g-transition); }
|
|
.ph-day-pill.selected { background:var(--primary); border-color:var(--primary); color:#fff; }
|
|
.ph-quick-btns { display:flex; gap:8px; margin-top:8px; }
|
|
.ph-quick-btn { font-size:11px; color:var(--primary); cursor:pointer; background:none; border:none; padding:0; transition:var(--g-transition); }
|
|
.ph-quick-btn:hover { text-decoration:underline; }
|
|
/* Edit drawer slot cards */
|
|
.ph-slot-card { background:#f8f9fb; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin-bottom:10px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
|
|
.ph-slot-tag { padding:3px 10px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; }
|
|
.ph-slot-tag.st-biz { background:#f6ffed; border:1px solid #b7eb8f; color:#389e0d; }
|
|
.ph-slot-tag.st-del { background:#e6f7ff; border:1px solid #91d5ff; color:#1890ff; }
|
|
.ph-slot-tag.st-pick { background:#fff7e6; border:1px solid #ffd591; color:#d46b08; }
|
|
.ph-slot-fields { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
|
|
.ph-slot-fields label { font-size:11px; color:#9ca3af; font-weight:500; }
|
|
.ph-slot-fields input { width:100px; }
|
|
.ph-slot-del { width:28px; height:28px; border:none; background:none; cursor:pointer; color:#bbb; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:var(--g-transition); }
|
|
.ph-slot-del:hover { background:#fff2f0; color:#ef4444; }
|
|
.ph-add-dashed { width:100%; height:40px; border:1px dashed #e5e7eb; border-radius:10px; background:none; cursor:pointer; color:#9ca3af; font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px; transition:var(--g-transition); }
|
|
.ph-add-dashed:hover { border-color:var(--primary); color:var(--primary); }
|
|
/* Toggle row */
|
|
.ph-toggle-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
|
|
.ph-toggle-hint { font-size:12px; color:#ef4444; margin-left:8px; display:none; }
|
|
/* Holiday drawer */
|
|
.ph-hol-type-pills { display:flex; gap:8px; }
|
|
.ph-hol-type-pill { padding:6px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
|
|
.ph-hol-type-pill.ht-closed.active { background:#fff2f0; border-color:#ffa39e; color:#ef4444; font-weight:600; }
|
|
.ph-hol-type-pill.ht-special.active { background:#fff7e6; border-color:#ffd591; color:#f59e0b; font-weight:600; }
|
|
.ph-date-mode { display:flex; gap:8px; margin-bottom:10px; }
|
|
.ph-date-mode-pill { padding:4px 12px; border-radius:8px; font-size:12px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; color:#4b5563; transition:var(--g-transition); }
|
|
.ph-date-mode-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
|
|
</style>
|
|
|
|
<div class="page-hours">
|
|
<div class="ph-toolbar">
|
|
<select class="g-select" style="width:200px;">
|
|
<option>老三家外卖（朝阳店）</option>
|
|
<option>老三家外卖（海淀店）</option>
|
|
<option>老三家外卖（望京店）</option>
|
|
<option>老三家外卖（通州店）</option>
|
|
<option>老三家外卖（丰台店）</option>
|
|
</select>
|
|
<div style="flex:1;"></div>
|
|
<button class="g-btn" onclick="openCopyStoreModal('复制营业时间到其他门店')">
|
|
<i data-lucide="copy" style="width:14px;height:14px;"></i>复制到其他门店
|
|
</button>
|
|
</div>
|
|
|
|
<div class="g-card">
|
|
<div class="ph-card-header">
|
|
每周营业时间
|
|
<button class="g-btn g-btn-primary" style="height:28px;font-size:12px;" onclick="openHoursDrawer('add')">
|
|
<i data-lucide="plus" style="width:13px;height:13px;"></i>添加时段
|
|
</button>
|
|
</div>
|
|
<div class="ph-card-body">
|
|
<div class="ph-legend">
|
|
<span><span class="ph-legend-dot" style="background:#b7eb8f;"></span>营业</span>
|
|
<span><span class="ph-legend-dot" style="background:#91d5ff;"></span>配送</span>
|
|
<span><span class="ph-legend-dot" style="background:#ffd591;"></span>自提</span>
|
|
</div>
|
|
<div class="week-grid">
|
|
<div class="week-row">
|
|
<div class="week-day">周一<div class="day-en">Monday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
|
|
<div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周一')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
<div class="week-row">
|
|
<div class="week-day">周二<div class="day-en">Tuesday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
|
|
<div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周二')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
<div class="week-row">
|
|
<div class="week-day">周三<div class="day-en">Wednesday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
|
|
<div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周三')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
<div class="week-row">
|
|
<div class="week-day">周四<div class="day-en">Thursday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-22:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-21:30</span><span class="slot-cap">50单/h</span></div>
|
|
<div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-21:00</span></div>
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周四')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
<div class="week-row">
|
|
<div class="week-day">周五<div class="day-en">Friday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-23:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-22:30</span><span class="slot-cap">80单/h</span></div>
|
|
<div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-22:00</span></div>
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周五')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
<div class="week-row">
|
|
<div class="week-day">周六<div class="day-en">Saturday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">09:00-23:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:00-22:30</span><span class="slot-cap">80单/h</span></div>
|
|
<div class="time-slot pickup"><span class="slot-type">自提</span><span class="slot-time">09:00-22:00</span></div>
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周六')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
<div class="week-row">
|
|
<div class="week-day">周日<div class="day-en">Sunday</div></div>
|
|
<div class="week-slots">
|
|
<div class="time-slot"><span class="slot-type">营业</span><span class="slot-time">10:00-22:00</span></div>
|
|
<div class="time-slot delivery"><span class="slot-type">配送</span><span class="slot-time">10:30-21:30</span><span class="slot-cap">60单/h</span></div>
|
|
|
|
</div>
|
|
<div class="week-actions"><button class="week-edit" onclick="openHoursDrawer('editDay','周日')"><i data-lucide="pencil" style="width:14px;height:14px;"></i></button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-card">
|
|
<div class="ph-card-header">
|
|
节假日 / 特殊日期
|
|
<button class="g-btn g-btn-primary" style="height:28px;font-size:12px;" onclick="openHolidayDrawer('add')">
|
|
<i data-lucide="plus" style="width:13px;height:13px;"></i>添加日期
|
|
</button>
|
|
</div>
|
|
<div class="ph-card-body" style="padding:0;">
|
|
<table class="holiday-table">
|
|
<thead><tr><th>日期</th><th>类型</th><th>时间</th><th>原因</th><th style="width:100px;">操作</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>2026-02-17 ~ 2026-02-19</td><td><span class="h-tag closed">休息</span></td><td>全天</td><td>春节假期</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-02-17 ~ 2026-02-19',type:'closed',time:'',reason:'春节假期'})">编辑</a><a class="h-link danger">删除</a></td></tr>
|
|
<tr><td>2026-04-05</td><td><span class="h-tag closed">休息</span></td><td>全天</td><td>清明节</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-04-05',type:'closed',time:'',reason:'清明节'})">编辑</a><a class="h-link danger">删除</a></td></tr>
|
|
<tr><td>2026-02-14</td><td><span class="h-tag special">特殊营业</span></td><td>09:00 - 23:30</td><td>情人节延长营业</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-02-14',type:'special',time:'09:00-23:30',reason:'情人节延长营业'})">编辑</a><a class="h-link danger">删除</a></td></tr>
|
|
<tr><td>2026-05-01</td><td><span class="h-tag special">特殊营业</span></td><td>10:00 - 20:00</td><td>劳动节缩短营业</td><td><a class="h-link" onclick="openHolidayDrawer('edit',{date:'2026-05-01',type:'special',time:'10:00-20:00',reason:'劳动节缩短营业'})">编辑</a><a class="h-link danger">删除</a></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加时段抽屉 -->
|
|
<div class="g-drawer-mask" id="hoursDrawerMask" onclick="closeHoursDrawer()"></div>
|
|
<div class="g-drawer" id="addSlotDrawer" style="width:480px;">
|
|
<div class="g-drawer-hd">
|
|
<span class="g-drawer-title">添加时段</span>
|
|
<button class="g-drawer-close" onclick="closeHoursDrawer()"><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>
|
|
<div class="ph-type-pills">
|
|
<button class="ph-type-pill tp-biz active" onclick="selectSlotType('biz',this)">营业</button>
|
|
<button class="ph-type-pill tp-del" onclick="selectSlotType('del',this)">配送</button>
|
|
<button class="ph-type-pill tp-pick" onclick="selectSlotType('pick',this)">自提</button>
|
|
</div>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">适用星期</label>
|
|
<div class="ph-day-pills" id="addDayPills">
|
|
<button class="ph-day-pill selected" onclick="toggleDayPill(this)">周一</button>
|
|
<button class="ph-day-pill selected" onclick="toggleDayPill(this)">周二</button>
|
|
<button class="ph-day-pill selected" onclick="toggleDayPill(this)">周三</button>
|
|
<button class="ph-day-pill selected" onclick="toggleDayPill(this)">周四</button>
|
|
<button class="ph-day-pill selected" onclick="toggleDayPill(this)">周五</button>
|
|
<button class="ph-day-pill" onclick="toggleDayPill(this)">周六</button>
|
|
<button class="ph-day-pill" onclick="toggleDayPill(this)">周日</button>
|
|
</div>
|
|
<div class="ph-quick-btns">
|
|
<button class="ph-quick-btn" onclick="quickSelectDays('all')">全选</button>
|
|
<button class="ph-quick-btn" onclick="quickSelectDays('weekday')">工作日</button>
|
|
<button class="ph-quick-btn" onclick="quickSelectDays('weekend')">周末</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">开始时间</label>
|
|
<input type="time" class="g-input" value="09:00" style="width:100%;" />
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">结束时间</label>
|
|
<input type="time" class="g-input" value="22:00" style="width:100%;" />
|
|
</div>
|
|
</div>
|
|
<div class="g-form-group" id="addCapField" style="display:none;">
|
|
<label class="g-form-label">容量上限</label>
|
|
<div style="display:flex; align-items:center; gap:6px;">
|
|
<input type="number" class="g-input" value="50" style="width:120px;" />
|
|
<span style="font-size:13px; color:#666;">单/小时</span>
|
|
</div>
|
|
<div class="g-hint">该时段内每小时最大接单量</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="closeHoursDrawer()">取消</button>
|
|
<button class="g-btn g-btn-primary" onclick="closeHoursDrawer()">确认添加</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑时段抽屉 -->
|
|
<div class="g-drawer" id="editDayDrawer" style="width:520px;">
|
|
<div class="g-drawer-hd">
|
|
<span class="g-drawer-title" id="editDayTitle">编辑时段 - 周一</span>
|
|
<button class="g-drawer-close" onclick="closeHoursDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
|
</div>
|
|
<div class="g-drawer-bd">
|
|
<div class="ph-toggle-row">
|
|
<button class="g-toggle on" id="dayOpenToggle" onclick="toggleDayOpen(this)"></button>
|
|
<span class="g-toggle-label">今日营业</span>
|
|
<span class="ph-toggle-hint" id="dayClosedHint">该日休息，不接单</span>
|
|
</div>
|
|
|
|
<div id="editSlotList">
|
|
<div class="ph-slot-card">
|
|
<span class="ph-slot-tag st-biz">营业</span>
|
|
<div class="ph-slot-fields">
|
|
<div><label>开始</label><input type="time" class="g-input" value="09:00" /></div>
|
|
<div><label>结束</label><input type="time" class="g-input" value="22:00" /></div>
|
|
</div>
|
|
<button class="ph-slot-del"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
<div class="ph-slot-card">
|
|
<span class="ph-slot-tag st-del">配送</span>
|
|
<div class="ph-slot-fields">
|
|
<div><label>开始</label><input type="time" class="g-input" value="10:00" /></div>
|
|
<div><label>结束</label><input type="time" class="g-input" value="21:30" /></div>
|
|
<div><label>容量</label><input type="number" class="g-input" value="50" style="width:70px;" /><span style="font-size:11px;color:#999;margin-left:3px;">单/h</span></div>
|
|
</div>
|
|
<button class="ph-slot-del"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
<div class="ph-slot-card">
|
|
<span class="ph-slot-tag st-pick">自提</span>
|
|
<div class="ph-slot-fields">
|
|
<div><label>开始</label><input type="time" class="g-input" value="09:00" /></div>
|
|
<div><label>结束</label><input type="time" class="g-input" value="21:00" /></div>
|
|
</div>
|
|
<button class="ph-slot-del"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="ph-add-dashed" style="margin-top:4px;" onclick="addSlotRow()">
|
|
<i data-lucide="plus" style="width:14px;height:14px;"></i>添加时段
|
|
</button>
|
|
</div>
|
|
<div class="g-drawer-ft">
|
|
<button class="g-btn" onclick="closeHoursDrawer()">取消</button>
|
|
<button class="g-btn g-btn-primary" onclick="closeHoursDrawer()">保存修改</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 节假日抽屉 -->
|
|
<div class="g-drawer" id="holidayDrawer" style="width:480px;">
|
|
<div class="g-drawer-hd">
|
|
<span class="g-drawer-title" id="holidayDrawerTitle">添加日期</span>
|
|
<button class="g-drawer-close" onclick="closeHoursDrawer()"><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>
|
|
<div class="ph-hol-type-pills">
|
|
<button class="ph-hol-type-pill ht-closed active" onclick="selectHolType('closed',this)">休息</button>
|
|
<button class="ph-hol-type-pill ht-special" onclick="selectHolType('special',this)">特殊营业</button>
|
|
</div>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">日期</label>
|
|
<div class="ph-date-mode">
|
|
<button class="ph-date-mode-pill active" onclick="switchDateMode('single',this)">单日</button>
|
|
<button class="ph-date-mode-pill" onclick="switchDateMode('range',this)">日期范围</button>
|
|
</div>
|
|
<div id="holDateSingle">
|
|
<input type="date" class="g-input" id="holDate1" value="2026-05-01" style="width:100%;" />
|
|
</div>
|
|
<div id="holDateRange" style="display:none;">
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<input type="date" class="g-input" id="holDateFrom" value="2026-05-01" style="flex:1;" />
|
|
<span style="color:#999;">~</span>
|
|
<input type="date" class="g-input" id="holDateTo" value="2026-05-03" style="flex:1;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-form-group" id="holTimeGroup" style="display:none;">
|
|
<label class="g-form-label">营业时间</label>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
|
|
<div>
|
|
<label style="font-size:11px;color:#999;">开始</label>
|
|
<input type="time" class="g-input" id="holTimeStart" value="09:00" style="width:100%;" />
|
|
</div>
|
|
<div>
|
|
<label style="font-size:11px;color:#999;">结束</label>
|
|
<input type="time" class="g-input" id="holTimeEnd" value="22:00" style="width:100%;" />
|
|
</div>
|
|
</div>
|
|
<div class="g-hint">特殊营业日的营业时间段</div>
|
|
</div>
|
|
<div class="g-form-group">
|
|
<label class="g-form-label required">原因</label>
|
|
<input type="text" class="g-input" id="holReason" placeholder="如：春节假期、情人节延长营业" style="width:100%;" />
|
|
</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="closeHoursDrawer()">取消</button>
|
|
<button class="g-btn g-btn-primary" id="holSubmitBtn" onclick="closeHoursDrawer()">确认添加</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openHoursDrawer(mode, dayName) {
|
|
document.getElementById('hoursDrawerMask').classList.add('open');
|
|
if (mode === 'add') {
|
|
document.getElementById('addSlotDrawer').classList.add('open');
|
|
} else if (mode === 'editDay') {
|
|
document.getElementById('editDayTitle').textContent = '编辑时段 - ' + dayName;
|
|
document.getElementById('editDayDrawer').classList.add('open');
|
|
}
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
function closeHoursDrawer() {
|
|
document.getElementById('hoursDrawerMask').classList.remove('open');
|
|
document.getElementById('addSlotDrawer').classList.remove('open');
|
|
document.getElementById('editDayDrawer').classList.remove('open');
|
|
document.getElementById('holidayDrawer').classList.remove('open');
|
|
}
|
|
function selectSlotType(type, el) {
|
|
el.parentElement.querySelectorAll('.ph-type-pill').forEach(function(b){ b.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
document.getElementById('addCapField').style.display = type === 'del' ? '' : 'none';
|
|
}
|
|
function toggleDayPill(el) {
|
|
el.classList.toggle('selected');
|
|
}
|
|
function quickSelectDays(mode) {
|
|
var pills = document.querySelectorAll('#addDayPills .ph-day-pill');
|
|
var weekdays = ['周一','周二','周三','周四','周五'];
|
|
var weekends = ['周六','周日'];
|
|
pills.forEach(function(p) {
|
|
var day = p.textContent;
|
|
if (mode === 'all') p.classList.add('selected');
|
|
else if (mode === 'weekday') { weekdays.includes(day) ? p.classList.add('selected') : p.classList.remove('selected'); }
|
|
else if (mode === 'weekend') { weekends.includes(day) ? p.classList.add('selected') : p.classList.remove('selected'); }
|
|
});
|
|
}
|
|
function toggleDayOpen(el) {
|
|
el.classList.toggle('on');
|
|
var isOn = el.classList.contains('on');
|
|
document.getElementById('dayClosedHint').style.display = isOn ? 'none' : 'inline';
|
|
document.getElementById('editSlotList').style.opacity = isOn ? '1' : '0.4';
|
|
document.getElementById('editSlotList').style.pointerEvents = isOn ? '' : 'none';
|
|
}
|
|
function openHolidayDrawer(mode, data) {
|
|
document.getElementById('hoursDrawerMask').classList.add('open');
|
|
document.getElementById('holidayDrawer').classList.add('open');
|
|
if (mode === 'edit' && data) {
|
|
document.getElementById('holidayDrawerTitle').textContent = '编辑日期';
|
|
document.getElementById('holSubmitBtn').textContent = '保存修改';
|
|
document.getElementById('holReason').value = data.reason || '';
|
|
// set type pill
|
|
document.querySelectorAll('.ph-hol-type-pill').forEach(function(b){ b.classList.remove('active'); });
|
|
if (data.type === 'closed') document.querySelector('.ht-closed').classList.add('active');
|
|
else document.querySelector('.ht-special').classList.add('active');
|
|
document.getElementById('holTimeGroup').style.display = data.type === 'special' ? '' : 'none';
|
|
if (data.time) {
|
|
var parts = data.time.replace(/\s/g,'').split('-');
|
|
if (parts.length === 2) {
|
|
document.getElementById('holTimeStart').value = parts[0];
|
|
document.getElementById('holTimeEnd').value = parts[1];
|
|
}
|
|
}
|
|
// set date
|
|
if (data.date && data.date.includes('~')) {
|
|
switchDateMode('range', document.querySelectorAll('.ph-date-mode-pill')[1]);
|
|
var dp = data.date.split('~').map(function(s){ return s.trim(); });
|
|
document.getElementById('holDateFrom').value = dp[0];
|
|
document.getElementById('holDateTo').value = dp[1];
|
|
} else {
|
|
switchDateMode('single', document.querySelectorAll('.ph-date-mode-pill')[0]);
|
|
document.getElementById('holDate1').value = data.date || '';
|
|
}
|
|
} else {
|
|
document.getElementById('holidayDrawerTitle').textContent = '添加日期';
|
|
document.getElementById('holSubmitBtn').textContent = '确认添加';
|
|
document.getElementById('holReason').value = '';
|
|
document.querySelectorAll('.ph-hol-type-pill').forEach(function(b){ b.classList.remove('active'); });
|
|
document.querySelector('.ht-closed').classList.add('active');
|
|
document.getElementById('holTimeGroup').style.display = 'none';
|
|
switchDateMode('single', document.querySelectorAll('.ph-date-mode-pill')[0]);
|
|
}
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
function selectHolType(type, el) {
|
|
el.parentElement.querySelectorAll('.ph-hol-type-pill').forEach(function(b){ b.classList.remove('active'); });
|
|
el.classList.add('active');
|
|
document.getElementById('holTimeGroup').style.display = type === 'special' ? '' : 'none';
|
|
}
|
|
function switchDateMode(mode, el) {
|
|
document.querySelectorAll('.ph-date-mode-pill').forEach(function(b){ b.classList.remove('active'); });
|
|
if (el) el.classList.add('active');
|
|
document.getElementById('holDateSingle').style.display = mode === 'single' ? '' : 'none';
|
|
document.getElementById('holDateRange').style.display = mode === 'range' ? '' : 'none';
|
|
}
|
|
function addSlotRow() {
|
|
var list = document.getElementById('editSlotList');
|
|
if (!list) return;
|
|
var cards = list.querySelectorAll('.ph-slot-card');
|
|
if (cards.length > 0) {
|
|
var clone = cards[cards.length - 1].cloneNode(true);
|
|
clone.querySelectorAll('input').forEach(function(inp){ inp.value = ''; });
|
|
list.appendChild(clone);
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
}
|
|
</script>
|