132 lines
10 KiB
HTML
132 lines
10 KiB
HTML
<!-- 费用设置页 -->
|
||
<style>
|
||
.page-fees { max-width:960px; }
|
||
.pf-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; }
|
||
.pf-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); }
|
||
.pf-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
|
||
.pf-field label { font-size:12px; color:#6b7280; display:block; margin-bottom:6px; font-weight:500; }
|
||
.pf-field .pf-input-wrap { display:flex; align-items:center; gap:6px; }
|
||
.pf-field input[type=number] { width:140px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
|
||
.pf-field input[type=number]:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
|
||
.pf-field .pf-unit { font-size:13px; color:#4b5563; }
|
||
.pf-mode-switch { display:flex; background:#f8f9fb; border-radius:8px; padding:3px; gap:2px; width:fit-content; margin-bottom:16px; }
|
||
.pf-mode-switch-item { padding:6px 18px; border-radius:6px; font-size:13px; cursor:pointer; color:#4b5563; transition:var(--g-transition); border:none; background:none; }
|
||
.pf-mode-switch-item.active { background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--g-shadow-sm); }
|
||
.pf-toggle-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
|
||
.pf-toggle-label { font-size:13px; color:#1a1a2e; font-weight:500; }
|
||
.pf-tier-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
|
||
.pf-tier-table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; }
|
||
.pf-tier-table td { padding:10px 12px; border-bottom:1px solid #f3f4f6; color:#1a1a2e; }
|
||
.pf-tier-table tr:last-child td { border-bottom:none; }
|
||
.pf-tier-table tr:hover td { background:color-mix(in srgb, var(--primary) 3%, #fff); }
|
||
.pf-t-link { color:var(--primary); cursor:pointer; font-size:12px; margin-right:6px; transition:var(--g-transition); }
|
||
.pf-t-link:hover { text-decoration:underline; }
|
||
.pf-t-link.danger { color:#ef4444; }
|
||
.pf-other-row { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid #f3f4f6; }
|
||
.pf-other-row:last-child { border-bottom:none; }
|
||
.pf-other-info { flex:1; }
|
||
.pf-other-info .pf-other-name { font-size:13px; font-weight:500; color:#1a1a2e; margin-bottom:2px; }
|
||
.pf-other-info .pf-other-hint { font-size:11px; color:#9ca3af; }
|
||
.pf-other-input { display:flex; align-items:center; gap:6px; }
|
||
.pf-other-input input { width:100px; height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; transition:var(--g-transition); }
|
||
.pf-other-input input:disabled { background:#f8f9fb; color:#bbb; }
|
||
.pf-save-bar { margin-top:20px; display:flex; justify-content:flex-end; gap:8px; }
|
||
.pf-note { font-size:12px; color:#9ca3af; display:flex; align-items:center; gap:4px; }
|
||
</style>
|
||
|
||
<div class="page-fees">
|
||
<div class="pf-toolbar">
|
||
<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" style="padding:0; margin-bottom:16px;">
|
||
<div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">起送与配送费</div>
|
||
<div style="padding:16px 18px;">
|
||
<div class="pf-grid">
|
||
<div class="pf-field"><label>起送金额</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="15.00" step="0.01" min="0" placeholder="如：15.00" /></div><div class="g-hint">低于此金额的订单无法下单</div></div>
|
||
<div class="pf-field"><label>基础配送费</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="3.00" step="0.01" min="0" placeholder="如：3.00" /></div><div class="g-hint">每笔订单默认收取的配送费</div></div>
|
||
<div class="pf-field"><label>免配送费门槛</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="30.00" step="0.01" min="0" placeholder="如：30.00" /></div><div class="g-hint">订单满此金额免配送费，留空不启用</div></div>
|
||
</div>
|
||
<div class="pf-save-bar"><button class="g-btn">重置</button><button class="g-btn g-btn-primary">保存设置</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">包装费设置</div>
|
||
<div style="padding:16px 18px;">
|
||
<div class="pf-mode-switch">
|
||
<button class="pf-mode-switch-item active" onclick="switchPkgMode('order')">按订单收取</button>
|
||
<button class="pf-mode-switch-item" onclick="switchPkgMode('item')">按商品收取</button>
|
||
</div>
|
||
<div id="pkgModeOrder">
|
||
<div class="pf-grid">
|
||
<div class="pf-field"><label>固定包装费</label><div class="pf-input-wrap"><span class="pf-unit">¥</span><input type="number" value="2.00" step="0.01" min="0" placeholder="如：2.00" /></div><div class="g-hint">每笔订单统一收取的包装费</div></div>
|
||
</div>
|
||
<div style="margin-top:18px; padding-top:16px; border-top:1px solid #f5f5f5;">
|
||
<div class="pf-toggle-row"><label class="g-toggle-input"><input type="checkbox" id="tierToggle" onchange="toggleTiers()" checked /><span class="g-toggle-sl"></span></label><span class="pf-toggle-label">启用阶梯包装费</span></div>
|
||
<div id="tierSection">
|
||
<div class="pf-note" style="margin-bottom:10px;">启用后将按订单金额区间收取不同包装费，覆盖上方固定包装费</div>
|
||
<table class="pf-tier-table"><thead><tr><th>订单金额区间</th><th>包装费</th><th style="width:100px;">操作</th></tr></thead><tbody>
|
||
<tr><td>0 ~ 30 元</td><td>¥ 2.00</td><td><span class="pf-t-link">编辑</span><span class="pf-t-link danger">删除</span></td></tr>
|
||
<tr><td>30 ~ 60 元</td><td>¥ 3.00</td><td><span class="pf-t-link">编辑</span><span class="pf-t-link danger">删除</span></td></tr>
|
||
<tr><td>60 元以上</td><td>¥ 5.00</td><td><span class="pf-t-link">编辑</span><span class="pf-t-link danger">删除</span></td></tr>
|
||
</tbody></table>
|
||
<div style="margin-top:10px;"><button class="g-btn g-btn-sm"><i data-lucide="plus" style="width:13px;height:13px;"></i>添加阶梯</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="pkgModeItem" style="display:none;">
|
||
<div style="padding:20px; background:#fafafa; border-radius:8px; text-align:center;">
|
||
<div style="font-size:28px; margin-bottom:8px; opacity:0.4;"><i data-lucide="package" style="width:16px;height:16px"></i></div>
|
||
<div style="font-size:13px; color:#666;">每个商品单独设置包装费，请在 <span style="color:var(--primary); cursor:pointer; font-weight:500;">商品管理</span> 中配置</div>
|
||
<div style="font-size:11px; color:#999; margin-top:6px;">系统将自动汇总订单内所有商品的包装费</div>
|
||
</div>
|
||
</div>
|
||
<div class="pf-save-bar"><button class="g-btn">重置</button><button class="g-btn g-btn-primary">保存设置</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-card" style="padding:0; margin-bottom:16px;">
|
||
<div class="g-card-title" style="padding:14px 18px; margin-bottom:0; border-bottom:1px solid #f5f5f5;">其他费用<span style="font-size:11px; color:#999; font-weight:400; margin-left:8px;">可选，按需开启</span></div>
|
||
<div style="padding:16px 18px;">
|
||
<div class="pf-other-row">
|
||
<label class="g-toggle-input"><input type="checkbox" id="cutleryToggle" onchange="toggleOtherFee('cutlery')" /><span class="g-toggle-sl"></span></label>
|
||
<div class="pf-other-info"><div class="pf-other-name">餐具费</div><div class="pf-other-hint">向顾客收取一次性餐具费用，顾客可选择不需要餐具</div></div>
|
||
<div class="pf-other-input"><span class="pf-unit">¥</span><input type="number" id="cutleryInput" value="1.00" step="0.01" min="0" placeholder="如：1.00" disabled /></div>
|
||
</div>
|
||
<div class="pf-other-row">
|
||
<label class="g-toggle-input"><input type="checkbox" id="rushToggle" onchange="toggleOtherFee('rush')" /><span class="g-toggle-sl"></span></label>
|
||
<div class="pf-other-info"><div class="pf-other-name">加急费</div><div class="pf-other-hint">顾客选择加急配送时额外收取的费用</div></div>
|
||
<div class="pf-other-input"><span class="pf-unit">¥</span><input type="number" id="rushInput" value="3.00" step="0.01" min="0" placeholder="如：3.00" disabled /></div>
|
||
</div>
|
||
<div class="pf-save-bar"><button class="g-btn">重置</button><button class="g-btn g-btn-primary">保存设置</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchPkgMode(mode) {
|
||
document.querySelectorAll('.pf-mode-switch-item').forEach(function(b){b.classList.remove('active')});
|
||
event.currentTarget.classList.add('active');
|
||
document.getElementById('pkgModeOrder').style.display = mode === 'order' ? '' : 'none';
|
||
document.getElementById('pkgModeItem').style.display = mode === 'item' ? '' : 'none';
|
||
}
|
||
function toggleTiers() {
|
||
var on = document.getElementById('tierToggle').checked;
|
||
document.getElementById('tierSection').style.display = on ? '' : 'none';
|
||
}
|
||
function toggleOtherFee(type) {
|
||
if (type === 'cutlery') { document.getElementById('cutleryInput').disabled = !document.getElementById('cutleryToggle').checked; }
|
||
else if (type === 'rush') { document.getElementById('rushInput').disabled = !document.getElementById('rushToggle').checked; }
|
||
}
|
||
</script>
|