319 lines
15 KiB
HTML
319 lines
15 KiB
HTML
<!-- 订单设置页 -->
|
||
<style>
|
||
.page-order-settings { max-width:960px; }
|
||
.os-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:10px 14px; background:#fff; }
|
||
.os-toolbar select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); }
|
||
.os-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.os-toolbar .os-page-title { font-size:15px; font-weight:600; color:var(--g-text); }
|
||
|
||
.os-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
|
||
|
||
.os-row { display:flex; align-items:flex-start; gap:16px; padding:14px 0; border-bottom:1px solid #f3f4f6; }
|
||
.os-row:last-child { border-bottom:none; }
|
||
.os-row-label { width:200px; flex-shrink:0; }
|
||
.os-row-label .os-label-main { font-size:13px; font-weight:500; color:var(--g-text); }
|
||
.os-row-label .os-label-sub { font-size:11px; color:var(--g-text-muted); margin-top:2px; }
|
||
.os-row-ctrl { flex:1; display:flex; flex-direction:column; gap:6px; }
|
||
.os-row-ctrl-inline { display:flex; align-items:center; gap:8px; }
|
||
.os-row-hint { font-size:11px; color:var(--g-text-muted); margin-top:2px; }
|
||
|
||
.os-num-input { width:120px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
|
||
.os-num-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.os-text-input { width:160px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
|
||
.os-text-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.os-suffix { font-size:13px; color:var(--g-text-secondary); white-space:nowrap; }
|
||
|
||
.os-select { height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; background:#fff; transition:var(--g-transition); min-width:140px; }
|
||
.os-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
|
||
.os-checkbox-group { display:flex; flex-wrap:wrap; gap:10px 20px; }
|
||
.os-checkbox-item { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:var(--g-text); }
|
||
.os-checkbox-item input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
|
||
|
||
.os-preview { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#f8f9fb; border:1px dashed #e5e7eb; border-radius:8px; font-size:13px; color:var(--g-text-secondary); font-family:monospace; letter-spacing:0.5px; margin-top:4px; }
|
||
|
||
.os-save-bar { position:sticky; bottom:0; background:#fff; border-top:1px solid #f0f0f0; padding:14px 18px; display:flex; justify-content:flex-end; gap:8px; margin:0 -18px -20px; border-radius:0 0 10px 10px; }
|
||
</style>
|
||
|
||
<div class="page-order-settings">
|
||
<!-- 顶部工具栏 -->
|
||
<div class="os-toolbar">
|
||
<select style="width:200px;">
|
||
<option>老三家外卖（朝阳店）</option>
|
||
<option>老三家外卖（海淀店）</option>
|
||
<option>老三家外卖（望京店）</option>
|
||
<option>老三家外卖（通州店）</option>
|
||
<option>老三家外卖（丰台店）</option>
|
||
</select>
|
||
<div style="flex:1;"></div>
|
||
<span class="os-page-title">订单设置</span>
|
||
</div>
|
||
|
||
<!-- 接单设置 -->
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div style="padding:18px 18px 0;">
|
||
<div class="os-section-hd">接单设置</div>
|
||
</div>
|
||
<div style="padding:0 18px 18px;">
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">自动接单</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">开启后新订单将自动接单</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">自动接单延迟</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="number" class="os-num-input" placeholder="如：30" value="30" />
|
||
<span class="os-suffix">秒</span>
|
||
</div>
|
||
<div class="os-row-hint">设置自动接单前的等待时间，方便商家提前查看订单</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">默认出餐时间</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="number" class="os-num-input" placeholder="如：20" value="20" />
|
||
<span class="os-suffix">分钟</span>
|
||
</div>
|
||
<div class="os-row-hint">预计出餐时间，将展示给顾客</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 超时设置 -->
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div style="padding:18px 18px 0;">
|
||
<div class="os-section-hd">超时设置</div>
|
||
</div>
|
||
<div style="padding:0 18px 18px;">
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">未接单自动取消</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="number" class="os-num-input" placeholder="如：5" value="5" />
|
||
<span class="os-suffix">分钟</span>
|
||
</div>
|
||
<div class="os-row-hint">超过该时间未接单，订单将自动取消并退款</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">催单提醒阈值</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="number" class="os-num-input" placeholder="如：10" value="10" />
|
||
<span class="os-suffix">分钟</span>
|
||
</div>
|
||
<div class="os-row-hint">订单超过该时间未出餐，系统将发送催单提醒</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提醒设置 -->
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div style="padding:18px 18px 0;">
|
||
<div class="os-section-hd">提醒设置</div>
|
||
</div>
|
||
<div style="padding:0 18px 18px;">
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">新订单提示音</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">新订单到达时播放提示音</span>
|
||
<select class="os-select" style="margin-left:12px;">
|
||
<option>叮咚提示音</option>
|
||
<option>语音播报</option>
|
||
<option>铃声提示</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">催单提示音</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">收到催单时播放提示音</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">退款提醒</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">收到退款申请时提醒</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">爆单预警</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">当待处理订单超过阈值时预警</span>
|
||
</div>
|
||
<div class="os-row-hint">开启后，待处理订单数量超过设定值时将发出预警通知</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">预警阈值</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="number" class="os-num-input" placeholder="如：20" value="20" />
|
||
<span class="os-suffix">单</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 打印设置 -->
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div style="padding:18px 18px 0;">
|
||
<div class="os-section-hd">打印设置</div>
|
||
</div>
|
||
<div style="padding:0 18px 18px;">
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">自动打印</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">接单后自动打印小票</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">打印份数</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="number" class="os-num-input" placeholder="如：2" value="2" min="1" />
|
||
<span class="os-suffix">份</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">小票模板</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<span class="g-pill checked" onclick="selectOsTemplate(this)">标准模板</span>
|
||
<span class="g-pill" onclick="selectOsTemplate(this)">简洁模板</span>
|
||
<span class="g-pill" onclick="selectOsTemplate(this)">详细模板</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">打印内容</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-checkbox-group">
|
||
<label class="os-checkbox-item"><input type="checkbox" checked />订单号</label>
|
||
<label class="os-checkbox-item"><input type="checkbox" checked />下单时间</label>
|
||
<label class="os-checkbox-item"><input type="checkbox" checked />顾客信息</label>
|
||
<label class="os-checkbox-item"><input type="checkbox" checked />商品明细</label>
|
||
<label class="os-checkbox-item"><input type="checkbox" checked />备注</label>
|
||
<label class="os-checkbox-item"><input type="checkbox" checked />配送信息</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">后厨联</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">同时打印后厨联（仅含商品和备注）</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单编号 -->
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div style="padding:18px 18px 0;">
|
||
<div class="os-section-hd">订单编号</div>
|
||
</div>
|
||
<div style="padding:0 18px 18px;">
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">编号前缀</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<input type="text" class="os-text-input" placeholder="如：DD" value="DD" id="osPrefix" oninput="updateOsPreview()" />
|
||
</div>
|
||
<div class="os-row-hint">订单号将以此前缀开头，如 DD20250212001</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">流水号位数</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<select class="os-select" id="osDigits" onchange="updateOsPreview()">
|
||
<option value="4">4位</option>
|
||
<option value="6" selected>6位</option>
|
||
<option value="8">8位</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">每日重置</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-row-ctrl-inline">
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"></div>
|
||
<span class="g-toggle-label">每天从001开始重新编号</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="os-row">
|
||
<div class="os-row-label"><div class="os-label-main">编号预览</div></div>
|
||
<div class="os-row-ctrl">
|
||
<div class="os-preview" id="osPreviewBox">
|
||
<i data-lucide="hash" style="width:14px;height:14px;opacity:0.4;"></i>
|
||
<span id="osPreviewText">DD250212000001</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部保存栏 -->
|
||
<div class="g-card" style="padding:14px 18px; margin-bottom:16px;">
|
||
<div style="display:flex; justify-content:flex-end; gap:8px;">
|
||
<button class="g-btn"><i data-lucide="rotate-ccw" style="width:14px;height:14px;"></i>重置</button>
|
||
<button class="g-btn g-btn-primary"><i data-lucide="save" style="width:14px;height:14px;"></i>保存设置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleSwitch(el) {
|
||
el.classList.toggle('on');
|
||
}
|
||
|
||
function selectOsTemplate(el) {
|
||
el.parentElement.querySelectorAll('.g-pill').forEach(function(p) { p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
}
|
||
|
||
function updateOsPreview() {
|
||
var prefix = document.getElementById('osPrefix').value || 'DD';
|
||
var digits = parseInt(document.getElementById('osDigits').value) || 6;
|
||
var now = new Date();
|
||
var y = String(now.getFullYear()).slice(2);
|
||
var m = String(now.getMonth() + 1).padStart(2, '0');
|
||
var d = String(now.getDate()).padStart(2, '0');
|
||
var seq = '1'.padStart(digits, '0');
|
||
document.getElementById('osPreviewText').textContent = prefix + y + m + d + seq;
|
||
}
|
||
|
||
/* 初始化 Lucide 图标 */
|
||
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
|
||
</script>
|