msumshk/TakeoutSaaS.Prototypes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增多渠道整合模块（渠道管理、订单聚合、菜单同步、配送调度）

Browse Source 
- 渠道管理：已接入平台卡片+待接入引导
- 订单聚合：多平台订单统一接单处理，卡片列表+详情抽屉
- 菜单同步：各平台差异价格对比，编辑价格抽屉，一键同步
- 配送调度：实时在途订单/运力管理（4家配送商+调度规则）/费用分析
- 侧边栏精简为4个子菜单，移除重复的评价管理
This commit is contained in:
MSuMshk
2026-02-13 10:36:52 +08:00
parent 98dd84fef9
commit 7ee2a91da6
5 changed files with 1433 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -731,12 +731,10 @@
<i data-lucide="chevron-right" class="menu-arrow"></i>
</div>
<div class="menu-sub" id="menu-channel">
<div class="menu-item" data-tab="聚合配送" onclick="switchTab(this, '聚合配送')"><span class="menu-label">聚合配送</span></div>
<div class="menu-item" data-tab="智能调度" onclick="switchTab(this, '智能调度')"><span class="menu-label">智能调度</span></div>
<div class="menu-item" data-tab="配送费对比" onclick="switchTab(this, '配送费对比')"><span class="menu-label">配送费对比</span></div>
<div class="menu-item" data-tab="渠道管理" onclick="switchTab(this, '渠道管理')"><span class="menu-label">渠道管理</span></div>
<div class="menu-item" data-tab="订单聚合" onclick="switchTab(this, '订单聚合')"><span class="menu-label">订单聚合</span></div>
<div class="menu-item" data-tab="菜单同步" onclick="switchTab(this, '菜单同步')"><span class="menu-label">菜单同步</span></div>
<div class="menu-item" data-tab="评价管理" onclick="switchTab(this, '评价管理')"><span class="menu-label">评价管理</span></div>
<div class="menu-item" data-tab="配送调度" onclick="switchTab(this, '配送调度')"><span class="menu-label">配送调度</span></div>
</div>
</div>
@@ -1205,6 +1203,10 @@
'采购管理': 'pages/inv-purchase.html',
'估清管理': 'pages/inv-soldout.html',
'效期管理': 'pages/inv-expiry.html',
'渠道管理': 'pages/ch-platform.html',
'订单聚合': 'pages/ch-orders.html',
'菜单同步': 'pages/ch-menu-sync.html',
'配送调度': 'pages/ch-delivery.html',
};
// Page cache

256
pages/ch-delivery.html Normal file
View File

@@ -0,0 +1,256 @@
<!-- 配送调度 — ch-delivery.html -->
<style>
.chd-seg-wrap { margin-bottom: 20px; }
.chd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.chd-stat-card { background: #fff; border-radius: var(--g-radius); padding: 18px 20px; border: 1px solid var(--g-border); box-shadow: var(--g-shadow-sm); transition: var(--g-transition); }
.chd-stat-card:hover { box-shadow: var(--g-shadow-md); transform: translateY(-1px); }
.chd-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.chd-stat-label i { width: 16px; height: 16px; }
.chd-stat-val { font-size: 24px; font-weight: 700; color: var(--g-text); }
.chd-stat-val.green { color: var(--g-success); }
.chd-stat-val.orange { color: var(--g-warning); }
/* 地图占位 */
.chd-map-placeholder {
height: 240px; border: 2px dashed #e5e7eb; border-radius: var(--g-radius-lg, 12px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: var(--g-text-muted); gap: 8px; margin-bottom: 20px; background: #fafafa;
}
.chd-map-placeholder i { width: 32px; height: 32px; opacity: .5; }
/* 在途订单卡片 */
.chd-order-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
padding: 16px 20px; margin-bottom: 10px; transition: var(--g-transition);
display: flex; align-items: center; gap: 16px;
}
.chd-order-card:hover { box-shadow: var(--g-shadow-md); }
.chd-order-card.urgent { border-left: 3px solid var(--g-danger); background: #fff5f5; }
.chd-order-info { flex: 1; min-width: 0; }
.chd-order-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.chd-order-no { font-family: 'SF Mono','Cascadia Code','Consolas',monospace; font-size: 12px; color: var(--g-text-secondary); }
.chd-order-mid { font-size: 13px; color: var(--g-text-secondary); display: flex; gap: 16px; }
.chd-order-mid span { display: flex; align-items: center; gap: 4px; }
.chd-order-mid i { width: 14px; height: 14px; }
.chd-order-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* 配送商卡片 */
.chd-provider-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
padding: 20px; margin-bottom: 12px; transition: var(--g-transition);
}
.chd-provider-card:hover { box-shadow: var(--g-shadow-md); }
.chd-provider-hd { display: flex; align-items: center; gap: 14px; }
.chd-provider-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
.chd-provider-name { font-size: 15px; font-weight: 600; color: var(--g-text); }
.chd-provider-desc { font-size: 12px; color: var(--g-text-muted); margin-top: 2px; }
.chd-provider-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--g-border); border-bottom: 1px solid var(--g-border); }
.chd-provider-data dt { font-size: 12px; color: var(--g-text-muted); margin-bottom: 4px; }
.chd-provider-data dd { font-size: 16px; font-weight: 700; color: var(--g-text); margin: 0; }
.chd-provider-ft { display: flex; align-items: center; justify-content: space-between; }
.chd-provider-fee { font-size: 12px; color: var(--g-text-muted); }
.chd-provider-card.disabled { opacity: .55; }
/* 调度规则 */
.chd-rules { background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border); padding: 20px; margin-top: 20px; }
.chd-rule-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: var(--g-text); }
.chd-rule-item:last-child { border-bottom: none; }
.chd-rule-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-light, #e8f0fe); color: var(--primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chd-section-hd { font-size: 15px; font-weight: 600; color: var(--g-text); padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 16px; }
/* 费用分析 */
.chd-bar-chart { margin-bottom: 24px; }
.chd-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chd-bar-label { width: 90px; font-size: 13px; color: var(--g-text); font-weight: 500; text-align: right; flex-shrink: 0; }
.chd-bar-track { flex: 1; height: 28px; background: #f3f4f6; border-radius: 6px; overflow: hidden; position: relative; }
.chd-bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: #fff; transition: width .6s ease; }
.chd-bar-val { font-size: 13px; font-weight: 600; color: var(--g-text); width: 70px; text-align: right; flex-shrink: 0; }
</style>
<!-- 分段Tab -->
<div class="chd-seg-wrap">
<div class="g-seg">
<div class="g-seg-item active" onclick="chdSwitchTab(this,'chd-tab-realtime')" data-tab="realtime">实时配送</div>
<div class="g-seg-item" onclick="chdSwitchTab(this,'chd-tab-provider')" data-tab="provider">运力管理</div>
<div class="g-seg-item" onclick="chdSwitchTab(this,'chd-tab-cost')" data-tab="cost">费用分析</div>
</div>
</div>
<!-- Tab1: 实时配送 -->
<div id="chd-tab-realtime">
<div class="chd-stats">
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="bike"></i>配送中</div><div class="chd-stat-val">12</div></div>
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="clock"></i>待取餐</div><div class="chd-stat-val orange">3</div></div>
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="timer"></i>平均配送时长</div><div class="chd-stat-val">28<span style="font-size:14px;font-weight:400;color:var(--g-text-muted);">分钟</span></div></div>
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="target"></i>今日准时率</div><div class="chd-stat-val green">94.2%</div></div>
</div>
<div class="chd-map-placeholder">
<i data-lucide="map-pin"></i>
<span style="font-size:14px;font-weight:500;">配送地图区域</span>
<span style="font-size:12px;">实时显示骑手位置与配送路线</span>
</div>
<div class="chd-section-hd">在途订单</div>
<div class="chd-order-card urgent">
<div class="chd-order-info">
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212045</span><span class="g-tag g-tag-red">即将超时</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
<div class="chd-order-mid"><span><i data-lucide="user"></i>王师傅 138****6789</span><span><i data-lucide="clock"></i>取餐 12:20 → 预计 12:50</span></div>
</div>
<div class="chd-order-actions"><a class="g-action" style="color:var(--g-danger);">催单</a><a class="g-action">联系骑手</a></div>
</div>
<div class="chd-order-card">
<div class="chd-order-info">
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212048</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
<div class="chd-order-mid"><span><i data-lucide="user"></i>李骑手 139****2345</span><span><i data-lucide="clock"></i>取餐 12:30 → 预计 13:00</span></div>
</div>
<div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
</div>
<div class="chd-order-card">
<div class="chd-order-info">
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212051</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fee2e2;color:#dc2626;">达达快送</span></div>
<div class="chd-order-mid"><span><i data-lucide="user"></i>张师傅 137****8901</span><span><i data-lucide="clock"></i>取餐 12:35 → 预计 13:10</span></div>
</div>
<div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
</div>
<div class="chd-order-card">
<div class="chd-order-info">
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212053</span><span class="g-tag g-tag-orange">待取餐</span><span class="g-tag" style="background:#f0f0f0;color:#333;">顺丰同城</span></div>
<div class="chd-order-mid"><span><i data-lucide="user"></i>陈骑手 136****5678</span><span><i data-lucide="clock"></i>预计取餐 12:45</span></div>
</div>
<div class="chd-order-actions"><a class="g-action">催取餐</a><a class="g-action">联系骑手</a></div>
</div>
<div class="chd-order-card">
<div class="chd-order-info">
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212055</span><span class="g-tag g-tag-orange">待取餐</span><span class="g-tag" style="background:#fff7e6;color:#d48806;">美团配送</span></div>
<div class="chd-order-mid"><span><i data-lucide="user"></i>赵骑手 135****4321</span><span><i data-lucide="clock"></i>预计取餐 12:48</span></div>
</div>
<div class="chd-order-actions"><a class="g-action">催取餐</a><a class="g-action">联系骑手</a></div>
</div>
<div class="chd-order-card">
<div class="chd-order-info">
<div class="chd-order-top"><span class="chd-order-no">#ORD20260212057</span><span class="g-tag g-tag-blue">配送中</span><span class="g-tag" style="background:#fee2e2;color:#dc2626;">达达快送</span></div>
<div class="chd-order-mid"><span><i data-lucide="user"></i>刘师傅 133****7654</span><span><i data-lucide="clock"></i>取餐 12:25 → 预计 12:55</span></div>
</div>
<div class="chd-order-actions"><a class="g-action">联系骑手</a></div>
</div>
</div>
<!-- Tab2: 运力管理 -->
<div id="chd-tab-provider" style="display:none;">
<p style="font-size:13px;color:var(--g-text-secondary);margin-bottom:20px;line-height:1.6;">管理已接入的配送服务商，系统将根据距离、费用、运力自动选择最优配送方案。</p>
<div class="chd-provider-card">
<div class="chd-provider-hd">
<div class="chd-provider-logo" style="background:#faad14;">美</div>
<div style="flex:1;"><div class="chd-provider-name">美团配送</div><div class="chd-provider-desc">美团专送骑手，覆盖3km</div></div>
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
</div>
<div class="chd-provider-data">
<div><dt>今日派单</dt><dd>38</dd></div>
<div><dt>平均时长</dt><dd>26分钟</dd></div>
<div><dt>准时率</dt><dd>96%</dd></div>
</div>
<div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥5 + 超3km每km加 ¥2</span></div>
</div>
<div class="chd-provider-card">
<div class="chd-provider-hd">
<div class="chd-provider-logo" style="background:#f5222d;">达</div>
<div style="flex:1;"><div class="chd-provider-name">达达快送</div><div class="chd-provider-desc">即时配送，覆盖5km</div></div>
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
</div>
<div class="chd-provider-data">
<div><dt>今日派单</dt><dd>22</dd></div>
<div><dt>平均时长</dt><dd>32分钟</dd></div>
<div><dt>准时率</dt><dd>91%</dd></div>
</div>
<div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥6 + 超3km每km加 ¥1.5</span></div>
</div>
<div class="chd-provider-card">
<div class="chd-provider-hd">
<div class="chd-provider-logo" style="background:#1a1a2e;">顺</div>
<div style="flex:1;"><div class="chd-provider-name">顺丰同城</div><div class="chd-provider-desc">高品质配送，覆盖10km</div></div>
<button class="g-toggle on" onclick="toggleSwitch(this)"></button>
</div>
<div class="chd-provider-data">
<div><dt>今日派单</dt><dd>8</dd></div>
<div><dt>平均时长</dt><dd>35分钟</dd></div>
<div><dt>准时率</dt><dd>98%</dd></div>
</div>
<div class="chd-provider-ft"><span class="chd-provider-fee">基础费 ¥8 + 超3km每km加 ¥2.5</span></div>
</div>
<div class="chd-provider-card disabled">
<div class="chd-provider-hd">
<div class="chd-provider-logo" style="background:color-mix(in srgb, var(--primary) 80%, #fff);">自</div>
<div style="flex:1;"><div class="chd-provider-name">自配送</div><div class="chd-provider-desc">自有骑手配送</div></div>
<button class="g-toggle" onclick="toggleSwitch(this)"></button>
</div>
<div class="chd-provider-data">
<div><dt>今日派单</dt><dd>—</dd></div>
<div><dt>平均时长</dt><dd>—</dd></div>
<div><dt>准时率</dt><dd>—</dd></div>
</div>
<div class="chd-provider-ft"><span class="chd-provider-fee">启用后可配置自有骑手和配送范围</span></div>
</div>
<div class="chd-rules">
<div class="chd-section-hd">智能调度规则</div>
<div class="chd-rule-item"><span class="chd-rule-num">1</span>3km内优先使用<strong style="color:var(--primary);margin:0 4px;">美团配送</strong>（费用最低）</div>
<div class="chd-rule-item"><span class="chd-rule-num">2</span>3~5km使用<strong style="color:var(--primary);margin:0 4px;">达达快送</strong></div>
<div class="chd-rule-item"><span class="chd-rule-num">3</span>5km以上使用<strong style="color:var(--primary);margin:0 4px;">顺丰同城</strong></div>
<div style="margin-top:14px;"><button class="g-btn g-btn-sm">编辑规则</button></div>
</div>
</div>
<!-- Tab3: 费用分析 -->
<div id="chd-tab-cost" style="display:none;">
<div class="chd-stats" style="grid-template-columns:repeat(3,1fr);">
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="receipt"></i>本月配送总费用</div><div class="chd-stat-val">&yen;4,860</div></div>
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="divide"></i>单均配送费</div><div class="chd-stat-val">&yen;5.2</div></div>
<div class="chd-stat-card"><div class="chd-stat-label"><i data-lucide="trending-down"></i>环比变化</div><div class="chd-stat-val green">-3.8%</div></div>
</div>
<div class="g-card" style="padding:20px;margin-bottom:20px;">
<div class="chd-section-hd">各配送商费用对比</div>
<div class="chd-bar-chart">
<div class="chd-bar-row"><span class="chd-bar-label">美团配送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:100%;background:#faad14;">&yen;2,180</div></div><span class="chd-bar-val">44.9%</span></div>
<div class="chd-bar-row"><span class="chd-bar-label">达达快送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:71%;background:#f5222d;">&yen;1,560</div></div><span class="chd-bar-val">32.1%</span></div>
<div class="chd-bar-row"><span class="chd-bar-label">顺丰同城</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:38%;background:#1a1a2e;">&yen;820</div></div><span class="chd-bar-val">16.9%</span></div>
<div class="chd-bar-row"><span class="chd-bar-label">自配送</span><div class="chd-bar-track"><div class="chd-bar-fill" style="width:14%;background:var(--primary);">&yen;300</div></div><span class="chd-bar-val">6.2%</span></div>
</div>
</div>
<div class="g-card" style="padding:20px;">
<div class="chd-section-hd">近7天配送费趋势</div>
<table class="g-table">
<thead>
<tr><th>日期</th><th style="text-align:right;">美团配送</th><th style="text-align:right;">达达快送</th><th style="text-align:right;">顺丰同城</th><th style="text-align:right;">自配送</th><th style="text-align:right;">合计</th></tr>
</thead>
<tbody>
<tr><td>2026-02-12</td><td style="text-align:right;">¥320</td><td style="text-align:right;">¥228</td><td style="text-align:right;">¥120</td><td style="text-align:right;">¥45</td><td style="text-align:right;font-weight:600;">¥713</td></tr>
<tr><td>2026-02-11</td><td style="text-align:right;">¥298</td><td style="text-align:right;">¥215</td><td style="text-align:right;">¥108</td><td style="text-align:right;">¥40</td><td style="text-align:right;font-weight:600;">¥661</td></tr>
<tr><td>2026-02-10</td><td style="text-align:right;">¥335</td><td style="text-align:right;">¥240</td><td style="text-align:right;">¥135</td><td style="text-align:right;">¥50</td><td style="text-align:right;font-weight:600;">¥760</td></tr>
<tr><td>2026-02-09</td><td style="text-align:right;">¥310</td><td style="text-align:right;">¥220</td><td style="text-align:right;">¥115</td><td style="text-align:right;">¥42</td><td style="text-align:right;font-weight:600;">¥687</td></tr>
<tr><td>2026-02-08</td><td style="text-align:right;">¥345</td><td style="text-align:right;">¥248</td><td style="text-align:right;">¥128</td><td style="text-align:right;">¥48</td><td style="text-align:right;font-weight:600;">¥769</td></tr>
<tr><td>2026-02-07</td><td style="text-align:right;">¥288</td><td style="text-align:right;">¥205</td><td style="text-align:right;">¥98</td><td style="text-align:right;">¥38</td><td style="text-align:right;font-weight:600;">¥629</td></tr>
<tr><td>2026-02-06</td><td style="text-align:right;">¥284</td><td style="text-align:right;">¥204</td><td style="text-align:right;">¥116</td><td style="text-align:right;">¥37</td><td style="text-align:right;font-weight:600;">¥641</td></tr>
</tbody>
</table>
</div>
</div>
<script>
function chdSwitchTab(el, tabId) {
el.parentElement.querySelectorAll('.g-seg-item').forEach(function(item) { item.classList.remove('active'); });
el.classList.add('active');
document.getElementById('chd-tab-realtime').style.display = tabId === 'chd-tab-realtime' ? '' : 'none';
document.getElementById('chd-tab-provider').style.display = tabId === 'chd-tab-provider' ? '' : 'none';
document.getElementById('chd-tab-cost').style.display = tabId === 'chd-tab-cost' ? '' : 'none';
}
function toggleSwitch(el) { el.classList.toggle('on'); }
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>

422
pages/ch-menu-sync.html Normal file
View File

@@ -0,0 +1,422 @@
<!-- 菜单同步页 -->
<style>
.cms-page { font-size: 13px; color: var(--g-text); }
/* ===== 统计条 ===== */
.cms-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px;
}
.cms-stat-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
padding: 16px 20px; display: flex; align-items: center; gap: 14px;
transition: box-shadow var(--g-transition);
}
.cms-stat-card:hover { box-shadow: var(--g-shadow-md); }
.cms-stat-icon {
width: 42px; height: 42px; border-radius: 10px; display: flex;
align-items: center; justify-content: center; flex-shrink: 0;
}
.cms-stat-icon.total { background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); }
.cms-stat-icon.synced { background: #f6ffed; color: var(--g-success); }
.cms-stat-icon.pending { background: #fff7e6; color: var(--g-warning); }
.cms-stat-icon.failed { background: #fff1f0; color: var(--g-danger); }
.cms-stat-info { flex: 1; }
.cms-stat-label { font-size: 12px; color: var(--g-text-muted); margin-bottom: 4px; }
.cms-stat-value { font-size: 22px; font-weight: 700; color: var(--g-text); line-height: 1; }
.cms-stat-value.danger { color: var(--g-danger); }
/* ===== 工具栏 ===== */
.cms-toolbar {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
padding: 14px 20px; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-bottom: 14px;
}
.cms-select {
height: 34px; border-radius: var(--g-radius-sm); border: 1px solid #e5e7eb;
padding: 0 10px; font-size: 13px; outline: none; min-width: 140px;
cursor: pointer; transition: all var(--g-transition); color: var(--g-text-secondary);
}
.cms-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.cms-search {
height: 34px; border-radius: var(--g-radius-sm); border: 1px solid #e5e7eb;
padding: 0 10px 0 32px; font-size: 13px; outline: none; width: 200px;
transition: all var(--g-transition); color: var(--g-text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 9px center no-repeat;
}
.cms-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.cms-spacer { flex: 1; }
/* ===== 表格卡片 ===== */
.cms-table-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
overflow: hidden;
}
.cms-table-wrap { overflow-x: auto; }
/* 平台价格单元格 */
.cms-price-cell { display: flex; align-items: center; gap: 5px; }
.cms-price-ok { color: var(--g-success); width: 14px; height: 14px; flex-shrink: 0; }
.cms-price-warn { color: var(--g-warning); width: 14px; height: 14px; flex-shrink: 0; cursor: help; }
.cms-price-fail { color: var(--g-danger); width: 14px; height: 14px; flex-shrink: 0; }
.cms-price-na { color: var(--g-text-muted); }
/* 操作列 */
.cms-actions { display: flex; align-items: center; gap: 12px; }
/* ===== 抽屉内 ===== */
.cms-readonly {
height: 34px; line-height: 34px; padding: 0 11px; background: var(--g-bg-subtle);
border: 1px solid var(--g-border); border-radius: var(--g-radius-sm);
font-size: 13px; color: var(--g-text);
}
.cms-platform-row {
display: flex; align-items: center; gap: 12px; padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
}
.cms-platform-row:last-child { border-bottom: none; }
.cms-platform-name {
width: 72px; flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--g-text);
display: flex; align-items: center; gap: 6px;
}
.cms-platform-name i { width: 16px; height: 16px; color: var(--g-text-muted); }
.cms-platform-price { flex: 1; }
.cms-platform-price .g-input { width: 100%; }
.cms-platform-price.disabled .g-input {
background: #f5f5f5; color: var(--g-text-muted); pointer-events: none;
}
.cms-follow-hint { font-size: 11px; color: var(--g-text-muted); margin-top: 4px; }
</style>
<div class="cms-page">
<!-- 统计条 -->
<div class="cms-stats">
<div class="cms-stat-card">
<div class="cms-stat-icon total"><i data-lucide="utensils-crossed" style="width:20px;height:20px"></i></div>
<div class="cms-stat-info">
<div class="cms-stat-label">本店菜品总数</div>
<div class="cms-stat-value">48</div>
</div>
</div>
<div class="cms-stat-card">
<div class="cms-stat-icon synced"><i data-lucide="check-circle-2" style="width:20px;height:20px"></i></div>
<div class="cms-stat-info">
<div class="cms-stat-label">已全平台同步</div>
<div class="cms-stat-value">42</div>
</div>
</div>
<div class="cms-stat-card">
<div class="cms-stat-icon pending"><i data-lucide="clock" style="width:20px;height:20px"></i></div>
<div class="cms-stat-info">
<div class="cms-stat-label">待同步</div>
<div class="cms-stat-value">4</div>
</div>
</div>
<div class="cms-stat-card">
<div class="cms-stat-icon failed"><i data-lucide="alert-circle" style="width:20px;height:20px"></i></div>
<div class="cms-stat-info">
<div class="cms-stat-label">同步失败</div>
<div class="cms-stat-value danger">2</div>
</div>
</div>
</div>
<!-- 工具栏 -->
<div class="cms-toolbar">
<select class="cms-select">
<option>全部分类</option>
<option>热销套餐</option>
<option>主食</option>
<option>小吃</option>
<option>饮品</option>
<option>甜品</option>
</select>
<select class="cms-select">
<option>全部状态</option>
<option>已同步</option>
<option>待同步</option>
<option>同步失败</option>
<option>部分同步</option>
</select>
<input class="cms-search" type="text" placeholder="搜索菜品名称">
<div class="cms-spacer"></div>
<button class="g-btn g-btn-primary" onclick="alert('已发起全量同步')">
<i data-lucide="refresh-cw" style="width:14px;height:14px"></i>
一键全量同步
</button>
</div>
<!-- 表格 -->
<div class="cms-table-card">
<div class="cms-table-wrap">
<table class="g-table">
<thead>
<tr>
<th style="min-width:160px">菜品名称</th>
<th style="min-width:80px">分类</th>
<th style="min-width:90px">本店价格</th>
<th style="min-width:110px">美团价格</th>
<th style="min-width:110px">饿了么价格</th>
<th style="min-width:110px">小程序价格</th>
<th style="min-width:90px">同步状态</th>
<th style="min-width:120px">操作</th>
</tr>
</thead>
<tbody>
<!-- 1. 宫保鸡丁套餐 - 已同步 -->
<tr>
<td style="font-weight:500">宫保鸡丁套餐</td>
<td><span class="g-tag g-tag-orange">热销套餐</span></td>
<td>&yen;32.00</td>
<td><span class="cms-price-cell">&yen;32.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;32.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;32.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="g-tag g-tag-green">已同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('宫保鸡丁套餐','32.00','32.00','32.00','32.00')">编辑价格</a>
</td>
</tr>
<!-- 2. 麻辣香锅(中份) - 已同步 -->
<tr>
<td style="font-weight:500">麻辣香锅(中份)</td>
<td><span class="g-tag g-tag-blue">主食</span></td>
<td>&yen;48.00</td>
<td><span class="cms-price-cell">&yen;48.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;48.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;48.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="g-tag g-tag-green">已同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('麻辣香锅(中份)','48.00','48.00','48.00','48.00')">编辑价格</a>
</td>
</tr>
<!-- 3. 牛肉面套餐 - 已同步 -->
<tr>
<td style="font-weight:500">牛肉面套餐</td>
<td><span class="g-tag g-tag-blue">主食</span></td>
<td>&yen;28.00</td>
<td><span class="cms-price-cell">&yen;28.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;28.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;28.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="g-tag g-tag-green">已同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('牛肉面套餐','28.00','28.00','28.00','28.00')">编辑价格</a>
</td>
</tr>
<!-- 4. 小龙虾(2斤) - 部分同步，饿了么价格不一致 -->
<tr>
<td style="font-weight:500">小龙虾(2斤)</td>
<td><span class="g-tag g-tag-orange">热销套餐</span></td>
<td>&yen;128.00</td>
<td><span class="cms-price-cell">&yen;128.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;138.00 <i data-lucide="alert-triangle" class="cms-price-warn" title="与本店价格不一致"></i></span></td>
<td><span class="cms-price-cell">&yen;128.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="g-tag g-tag-blue">部分同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('小龙虾(2斤)','128.00','128.00','138.00','128.00')">编辑价格</a>
</td>
</tr>
<!-- 5. 烤鱼套餐 - 已同步 -->
<tr>
<td style="font-weight:500">烤鱼套餐</td>
<td><span class="g-tag g-tag-blue">主食</span></td>
<td>&yen;68.00</td>
<td><span class="cms-price-cell">&yen;68.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;68.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;68.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="g-tag g-tag-green">已同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('烤鱼套餐','68.00','68.00','68.00','68.00')">编辑价格</a>
</td>
</tr>
<!-- 6. 炸鸡翅(6只) - 待同步 -->
<tr>
<td style="font-weight:500">炸鸡翅(6只)</td>
<td><span class="g-tag g-tag-purple">小吃</span></td>
<td>&yen;22.00</td>
<td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
<td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
<td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
<td><span class="g-tag g-tag-orange">待同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('炸鸡翅(6只)','22.00','','','')">编辑价格</a>
</td>
</tr>
<!-- 7. 珍珠奶茶 - 待同步 -->
<tr>
<td style="font-weight:500">珍珠奶茶</td>
<td><span class="g-tag g-tag-gray">饮品</span></td>
<td>&yen;15.00</td>
<td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
<td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
<td><span class="cms-price-cell cms-price-na">&mdash;</span></td>
<td><span class="g-tag g-tag-orange">待同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('珍珠奶茶','15.00','','','')">编辑价格</a>
</td>
</tr>
<!-- 8. 提拉米苏 - 同步失败 -->
<tr>
<td style="font-weight:500">提拉米苏</td>
<td><span class="g-tag g-tag-gray">甜品</span></td>
<td>&yen;28.00</td>
<td><span class="cms-price-cell">&yen;28.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
<td><span class="cms-price-cell">&yen;28.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
<td><span class="cms-price-cell">&yen;28.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
<td><span class="g-tag g-tag-red">同步失败</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('重新同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('提拉米苏','28.00','28.00','28.00','28.00')">编辑价格</a>
</td>
</tr>
<!-- 9. 美式咖啡 - 已同步 -->
<tr>
<td style="font-weight:500">美式咖啡</td>
<td><span class="g-tag g-tag-gray">饮品</span></td>
<td>&yen;18.00</td>
<td><span class="cms-price-cell">&yen;18.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;18.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="cms-price-cell">&yen;18.00 <i data-lucide="check" class="cms-price-ok"></i></span></td>
<td><span class="g-tag g-tag-green">已同步</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('美式咖啡','18.00','18.00','18.00','18.00')">编辑价格</a>
</td>
</tr>
<!-- 10. 4人聚餐套餐 - 同步失败 -->
<tr>
<td style="font-weight:500">4人聚餐套餐</td>
<td><span class="g-tag g-tag-orange">热销套餐</span></td>
<td>&yen;168.00</td>
<td><span class="cms-price-cell">&yen;168.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
<td><span class="cms-price-cell">&yen;168.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
<td><span class="cms-price-cell">&yen;168.00 <i data-lucide="x" class="cms-price-fail"></i></span></td>
<td><span class="g-tag g-tag-red">同步失败</span></td>
<td class="cms-actions">
<a class="g-action" onclick="alert('重新同步中...')">同步</a>
<a class="g-action" onclick="openDrawer('4人聚餐套餐','168.00','168.00','168.00','168.00')">编辑价格</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 分页 -->
<div style="padding: 12px 20px;">
<div class="g-pagination">
<span>共 48 条</span>
<button class="g-page-btn" disabled>&laquo;</button>
<button class="g-page-btn active">1</button>
<button class="g-page-btn">2</button>
<button class="g-page-btn">3</button>
<button class="g-page-btn">4</button>
<button class="g-page-btn">5</button>
<button class="g-page-btn">&raquo;</button>
</div>
</div>
</div>
</div>
<!-- 编辑价格抽屉 -->
<div class="g-drawer-mask" id="cmsDrawerMask" onclick="closeDrawer()"></div>
<div class="g-drawer" id="cmsDrawer" style="width:460px">
<div class="g-drawer-hd">
<div class="g-drawer-title">编辑价格</div>
<button class="g-drawer-close" onclick="closeDrawer()">&times;</button>
</div>
<div class="g-drawer-bd">
<!-- 菜品名称（只读） -->
<div class="g-form-group">
<label class="g-form-label">菜品名称</label>
<div class="cms-readonly" id="cmsName">宫保鸡丁套餐</div>
</div>
<!-- 本店价格 -->
<div class="g-form-group">
<label class="g-form-label required">本店价格</label>
<input class="g-input" id="cmsBasePrice" type="number" step="0.01" placeholder="请输入本店价格">
</div>
<div class="g-divider"></div>
<!-- 各平台价格 -->
<div class="g-form-group">
<label class="g-form-label" style="margin-bottom:12px; font-size:14px; font-weight:600;">各平台价格设置</label>
<div class="cms-follow-hint" style="margin-bottom:12px; margin-top:-8px;">关闭开关则该平台不上架此菜品，开启后默认跟随本店价格</div>
<!-- 美团 -->
<div class="cms-platform-row">
<div class="cms-platform-name">
<i data-lucide="shopping-bag"></i> 美团
</div>
<div class="g-toggle on" id="toggleMeituan" onclick="togglePlatform(event.currentTarget, 'priceMeituan')"></div>
<div class="cms-platform-price" id="priceMeituanWrap">
<input class="g-input" id="priceMeituan" type="number" step="0.01" placeholder="跟随本店价格">
</div>
</div>
<!-- 饿了么 -->
<div class="cms-platform-row">
<div class="cms-platform-name">
<i data-lucide="bike"></i> 饿了么
</div>
<div class="g-toggle on" id="toggleEleme" onclick="togglePlatform(event.currentTarget, 'priceEleme')"></div>
<div class="cms-platform-price" id="priceElemeWrap">
<input class="g-input" id="priceEleme" type="number" step="0.01" placeholder="跟随本店价格">
</div>
</div>
<!-- 小程序 -->
<div class="cms-platform-row">
<div class="cms-platform-name">
<i data-lucide="smartphone"></i> 小程序
</div>
<div class="g-toggle on" id="toggleMini" onclick="togglePlatform(event.currentTarget, 'priceMini')"></div>
<div class="cms-platform-price" id="priceMiniWrap">
<input class="g-input" id="priceMini" type="number" step="0.01" placeholder="跟随本店价格">
</div>
</div>
</div>
</div>
<div class="g-drawer-ft">
<button class="g-btn" onclick="closeDrawer()">取消</button>
<button class="g-btn g-btn-primary" onclick="closeDrawer()">保存并同步</button>
</div>
</div>
<script>
/* 抽屉开关 */
function openDrawer(name, base, mt, ele, mini) {
document.getElementById('cmsName').textContent = name;
document.getElementById('cmsBasePrice').value = base;
document.getElementById('priceMeituan').value = mt;
document.getElementById('priceEleme').value = ele;
document.getElementById('priceMini').value = mini;
document.getElementById('cmsDrawerMask').classList.add('open');
document.getElementById('cmsDrawer').classList.add('open');
}
function closeDrawer() {
document.getElementById('cmsDrawerMask').classList.remove('open');
document.getElementById('cmsDrawer').classList.remove('open');
}
/* 平台开关 */
function togglePlatform(el, inputId) {
el.classList.toggle('on');
var wrap = document.getElementById(inputId + 'Wrap');
if (el.classList.contains('on')) {
wrap.classList.remove('disabled');
} else {
wrap.classList.add('disabled');
}
}
/* 初始化图标 */
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>

441
pages/ch-orders.html Normal file
View File

@@ -0,0 +1,441 @@
<!-- 渠道订单聚合 — ch-orders.html -->
<style>
/* ---- page-private: cho- prefix ---- */
/* 统计卡片 */
.cho-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.cho-stat-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
padding: 18px 20px; transition: box-shadow var(--g-transition);
}
.cho-stat-card:hover { box-shadow: var(--g-shadow-md); }
.cho-stat-label { font-size: 13px; color: var(--g-text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cho-stat-label i { width: 15px; height: 15px; }
.cho-stat-val { font-size: 26px; font-weight: 700; color: var(--g-text); }
.cho-stat-trend { font-size: 12px; margin-left: 8px; font-weight: 500; }
.cho-stat-trend.up { color: var(--g-success); }
.cho-stat-trend.down { color: var(--g-danger); }
.cho-stat-card.urgent { border-left: 3px solid var(--g-warning); }
.cho-stat-card.urgent .cho-stat-val { color: var(--g-warning); }
/* 平台pills */
.cho-platforms { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cho-plat-pill {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
border-radius: 20px; border: 1px solid #d9d9d9; font-size: 13px;
cursor: pointer; transition: all var(--g-transition); user-select: none; background: #fff;
}
.cho-plat-pill:hover { border-color: var(--primary); }
.cho-plat-pill.active { background: color-mix(in srgb, var(--primary) 8%, #fff); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.cho-plat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cho-dot-all { background: var(--primary); }
.cho-dot-meituan { background: #ffc107; }
.cho-dot-eleme { background: #2196f3; }
.cho-dot-mini { background: #722ed1; }
/* 工具栏 */
.cho-toolbar {
background: #fff; border-radius: var(--g-radius); padding: 12px 16px;
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
border: 1px solid var(--g-border); margin-bottom: 14px;
}
.cho-search-wrap { position: relative; width: 200px; }
.cho-search-wrap .g-input { padding-left: 30px; width: 100%; }
.cho-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--g-text-muted); pointer-events: none; }
.cho-toolbar-right { margin-left: auto; }
/* 订单卡片列表 */
.cho-order-list { display: flex; flex-direction: column; gap: 10px; }
.cho-order-card {
background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
padding: 16px 20px; transition: box-shadow var(--g-transition); position: relative;
cursor: pointer;
}
.cho-order-card:hover { box-shadow: var(--g-shadow-md); }
.cho-order-card.cho-urgent { border-left: 3px solid var(--g-warning); }
.cho-order-row { display: flex; align-items: center; gap: 10px; }
.cho-order-row + .cho-order-row { margin-top: 10px; }
.cho-order-no { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 13px; color: var(--g-text); font-weight: 600; }
.cho-order-time { margin-left: auto; font-size: 12px; color: var(--g-text-muted); flex-shrink: 0; }
.cho-order-items { flex: 1; font-size: 13px; color: var(--g-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cho-order-amount { font-size: 15px; font-weight: 700; color: var(--g-text); margin-left: auto; flex-shrink: 0; }
.cho-order-customer { font-size: 12px; color: var(--g-text-muted); display: flex; align-items: center; gap: 4px; }
.cho-order-customer i { width: 13px; height: 13px; }
.cho-order-addr { font-size: 12px; color: var(--g-text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 12px; }
.cho-order-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* 已完成/已取消卡片弱化 */
.cho-order-card.cho-dimmed { opacity: 0.6; }
.cho-order-card.cho-dimmed:hover { opacity: 0.8; }
/* 平台tag自定义色 */
.cho-tag-meituan { background: #fff8e1; color: #f57f17; }
.cho-tag-eleme { background: #e3f2fd; color: #1565c0; }
.cho-tag-mini { background: #f3e5f5; color: #7b1fa2; }
/* 抽屉 */
.cho-drawer { width: 480px; }
.cho-section { margin-bottom: 22px; }
.cho-section-hd {
font-size: 14px; font-weight: 600; color: var(--g-text);
padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
}
.cho-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13px; }
.cho-info-label { color: var(--g-text-muted); }
.cho-info-val { color: var(--g-text); }
.cho-info-full { grid-column: 1 / -1; }
.cho-prod-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cho-prod-table th {
text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 500;
color: var(--g-text-muted); background: var(--g-bg-subtle); border-bottom: 1px solid var(--g-border);
}
.cho-prod-table td { padding: 8px 10px; border-bottom: 1px solid #f5f5f5; color: var(--g-text); }
.cho-sum-block { font-size: 13px; padding: 12px 10px 0; display: flex; flex-direction: column; gap: 6px; }
.cho-sum-row { display: flex; justify-content: space-between; color: var(--g-text-secondary); }
.cho-sum-total {
display: flex; justify-content: space-between; font-weight: 600; color: var(--g-text);
border-top: 1px solid var(--g-border); padding-top: 8px; margin-top: 4px;
}
</style>
<!-- 顶部统计卡片 -->
<div class="cho-stats">
<div class="cho-stat-card">
<div class="cho-stat-label"><i data-lucide="receipt"></i> 今日总单量</div>
<div class="cho-stat-val">186 <span class="cho-stat-trend up"><i data-lucide="trending-up" style="width:13px;height:13px;vertical-align:-2px;"></i> +8%</span></div>
</div>
<div class="cho-stat-card urgent">
<div class="cho-stat-label"><i data-lucide="alert-circle"></i> 待接单</div>
<div class="cho-stat-val">5</div>
</div>
<div class="cho-stat-card">
<div class="cho-stat-label"><i data-lucide="bike"></i> 配送中</div>
<div class="cho-stat-val">12</div>
</div>
<div class="cho-stat-card">
<div class="cho-stat-label"><i data-lucide="banknote"></i> 今日营收</div>
<div class="cho-stat-val" style="font-size:22px;">&yen;12,480</div>
</div>
</div>
<!-- 平台来源pills -->
<div class="cho-platforms">
<div class="cho-plat-pill active" onclick="choSwitchPlatform(event.currentTarget)">
<span class="cho-plat-dot cho-dot-all"></span> 全部 (186)
</div>
<div class="cho-plat-pill" onclick="choSwitchPlatform(event.currentTarget)">
<span class="cho-plat-dot cho-dot-meituan"></span> 美团外卖 (68)
</div>
<div class="cho-plat-pill" onclick="choSwitchPlatform(event.currentTarget)">
<span class="cho-plat-dot cho-dot-eleme"></span> 饿了么 (52)
</div>
<div class="cho-plat-pill" onclick="choSwitchPlatform(event.currentTarget)">
<span class="cho-plat-dot cho-dot-mini"></span> 自有小程序 (66)
</div>
</div>
<!-- 工具栏 -->
<div class="cho-toolbar">
<select class="g-select" style="width:130px;">
<option>全部状态</option>
<option>待接单</option>
<option>已接单</option>
<option>配送中</option>
<option>已完成</option>
<option>已取消</option>
</select>
<select class="g-select" style="width:110px;">
<option>今天</option>
<option>昨天</option>
<option>近7天</option>
</select>
<div class="cho-search-wrap">
<i data-lucide="search" style="width:14px;height:14px;"></i>
<input class="g-input" placeholder="搜索订单号/手机号">
</div>
<div class="cho-toolbar-right">
<button class="g-btn g-btn-primary"><i data-lucide="check-check" style="width:14px;height:14px;"></i> 批量接单</button>
</div>
</div>
<!-- 订单卡片列表 -->
<div class="cho-order-list">
<!-- 1. 待接单-美团 -->
<div class="cho-order-card cho-urgent" onclick="choOpenDrawer('MT20260213001')">
<div class="cho-order-row">
<span class="cho-order-no">#MT20260213001</span>
<span class="g-tag cho-tag-meituan">美团外卖</span>
<span class="g-tag g-tag-orange">待接单</span>
<span class="cho-order-time">12:32:15</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">宫保鸡丁套餐x1、米饭x1 等2件</span>
<span class="cho-order-amount">&yen;58.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 张**</span>
<span class="cho-order-addr">朝阳区建国路88号院3号楼1单元502</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<button class="g-btn g-btn-primary g-btn-sm">接单</button>
<a class="g-action g-action-danger">拒单</a>
</div>
</div>
</div>
<!-- 2. 待接单-饿了么 -->
<div class="cho-order-card cho-urgent" onclick="choOpenDrawer('EL20260213002')">
<div class="cho-order-row">
<span class="cho-order-no">#EL20260213002</span>
<span class="g-tag cho-tag-eleme">饿了么</span>
<span class="g-tag g-tag-orange">待接单</span>
<span class="cho-order-time">12:28:40</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">麻辣香锅(中辣)x1、可乐x1 等2件</span>
<span class="cho-order-amount">&yen;42.50</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 李**</span>
<span class="cho-order-addr">海淀区中关村大街1号银谷大厦8层</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<button class="g-btn g-btn-primary g-btn-sm">接单</button>
<a class="g-action g-action-danger">拒单</a>
</div>
</div>
</div>
<!-- 3. 待接单-小程序 -->
<div class="cho-order-card cho-urgent" onclick="choOpenDrawer('WX20260213003')">
<div class="cho-order-row">
<span class="cho-order-no">#WX20260213003</span>
<span class="g-tag cho-tag-mini">小程序</span>
<span class="g-tag g-tag-orange">待接单</span>
<span class="cho-order-time">12:25:08</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">牛肉面套餐x1、卤蛋x1 等2件</span>
<span class="cho-order-amount">&yen;35.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 王**</span>
<span class="cho-order-addr">西城区金融街7号英蓝国际金融中心B座</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<button class="g-btn g-btn-primary g-btn-sm">接单</button>
<a class="g-action g-action-danger">拒单</a>
</div>
</div>
</div>
<!-- 4. 已接单-美团 -->
<div class="cho-order-card" onclick="choOpenDrawer('MT20260213004')">
<div class="cho-order-row">
<span class="cho-order-no">#MT20260213004</span>
<span class="g-tag cho-tag-meituan">美团外卖</span>
<span class="g-tag g-tag-blue">已接单</span>
<span class="cho-order-time">12:15:30</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">4人聚餐套餐x1、啤酒x4 等5件</span>
<span class="cho-order-amount">&yen;126.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 赵**</span>
<span class="cho-order-addr">朝阳区望京SOHO T1 12层</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<button class="g-btn g-btn-sm"><i data-lucide="phone-call" style="width:13px;height:13px;"></i> 呼叫配送</button>
</div>
</div>
</div>
<!-- 5. 配送中-饿了么 -->
<div class="cho-order-card" onclick="choOpenDrawer('EL20260213005')">
<div class="cho-order-row">
<span class="cho-order-no">#EL20260213005</span>
<span class="g-tag cho-tag-eleme">饿了么</span>
<span class="g-tag g-tag-blue">配送中</span>
<span class="cho-order-time">11:58:12</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">烤鱼套餐(微辣)x1、凉菜拼盘x1 等3件</span>
<span class="cho-order-amount">&yen;68.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 刘**</span>
<span class="cho-order-addr">丰台区丽泽商务区16号院平安幸福中心</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<a class="g-action">催配送</a>
<a class="g-action">查看骑手</a>
</div>
</div>
</div>
<!-- 6. 配送中-小程序 -->
<div class="cho-order-card" onclick="choOpenDrawer('WX20260213006')">
<div class="cho-order-row">
<span class="cho-order-no">#WX20260213006</span>
<span class="g-tag cho-tag-mini">小程序</span>
<span class="g-tag g-tag-blue">配送中</span>
<span class="cho-order-time">11:45:50</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">拿铁咖啡x2、提拉米苏x1 等3件</span>
<span class="cho-order-amount">&yen;45.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 陈**</span>
<span class="cho-order-addr">东城区东直门外大街48号东方银座C座</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<a class="g-action">催配送</a>
<a class="g-action">查看骑手</a>
</div>
</div>
</div>
<!-- 7. 已完成-美团 -->
<div class="cho-order-card cho-dimmed" onclick="choOpenDrawer('MT20260213007')">
<div class="cho-order-row">
<span class="cho-order-no">#MT20260213007</span>
<span class="g-tag cho-tag-meituan">美团外卖</span>
<span class="g-tag g-tag-green">已完成</span>
<span class="cho-order-time">11:20:05</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">小龙虾套餐(十三香)x1、啤酒x2 等3件</span>
<span class="cho-order-amount">&yen;89.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 孙**</span>
<span class="cho-order-addr">朝阳区三里屯太古里南区S2栋</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<a class="g-action">查看详情</a>
</div>
</div>
</div>
<!-- 8. 已完成-饿了么 -->
<div class="cho-order-card cho-dimmed" onclick="choOpenDrawer('EL20260213008')">
<div class="cho-order-row">
<span class="cho-order-no">#EL20260213008</span>
<span class="g-tag cho-tag-eleme">饿了么</span>
<span class="g-tag g-tag-green">已完成</span>
<span class="cho-order-time">10:55:30</span>
</div>
<div class="cho-order-row">
<span class="cho-order-items">蛋炒饭x1、紫菜蛋花汤x1 等2件</span>
<span class="cho-order-amount">&yen;32.00</span>
</div>
<div class="cho-order-row">
<span class="cho-order-customer"><i data-lucide="user"></i> 周**</span>
<span class="cho-order-addr">海淀区五道口华清嘉园12号楼</span>
<div class="cho-order-actions" onclick="event.stopPropagation()">
<a class="g-action">查看详情</a>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="g-pagination">
<span>共 186 条</span>
<button class="g-page-btn" disabled>&lt;</button>
<button class="g-page-btn active">1</button>
<button class="g-page-btn">2</button>
<button class="g-page-btn">3</button>
<button class="g-page-btn">...</button>
<button class="g-page-btn">10</button>
<button class="g-page-btn">&gt;</button>
</div>
<!-- 订单详情抽屉 -->
<div class="g-drawer-mask" id="choDrawerMask" onclick="choCloseDrawer()"></div>
<div class="g-drawer cho-drawer" id="choDrawer">
<div class="g-drawer-hd">
<span class="g-drawer-title" id="choDrawerTitle">订单详情</span>
<button class="g-drawer-close" onclick="choCloseDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
</div>
<div class="g-drawer-bd">
<!-- 基本信息 -->
<div class="cho-section">
<div class="cho-section-hd">基本信息</div>
<div class="cho-info-grid">
<div><span class="cho-info-label">订单号：</span><span class="cho-info-val" style="font-family:monospace;">#MT20260213001</span></div>
<div><span class="cho-info-label">来源平台：</span><span class="g-tag cho-tag-meituan">美团外卖</span></div>
<div><span class="cho-info-label">订单状态：</span><span class="g-tag g-tag-orange">待接单</span></div>
<div><span class="cho-info-label">下单时间：</span><span class="cho-info-val">2026-02-13 12:32:15</span></div>
</div>
</div>
<!-- 菜品明细 -->
<div class="cho-section">
<div class="cho-section-hd">菜品明细</div>
<table class="cho-prod-table">
<thead>
<tr><th>菜品</th><th>数量</th><th>单价</th><th style="text-align:right;">小计</th></tr>
</thead>
<tbody>
<tr><td>宫保鸡丁套餐</td><td>1</td><td>&yen;45.00</td><td style="text-align:right;">&yen;45.00</td></tr>
<tr><td>米饭(加量)</td><td>1</td><td>&yen;3.00</td><td style="text-align:right;">&yen;3.00</td></tr>
</tbody>
</table>
<div class="cho-sum-block">
<div class="cho-sum-row"><span>商品总额</span><span>&yen;48.00</span></div>
<div class="cho-sum-row"><span>配送费</span><span>&yen;5.00</span></div>
<div class="cho-sum-row"><span>包装费</span><span>&yen;2.00</span></div>
<div class="cho-sum-row"><span>优惠减免</span><span style="color:var(--g-danger);">-&yen;7.00</span></div>
<div class="cho-sum-total"><span>实付金额</span><span style="color:var(--primary);font-size:15px;">&yen;58.00</span></div>
</div>
</div>
<!-- 收货信息 -->
<div class="cho-section">
<div class="cho-section-hd">收货信息</div>
<div class="cho-info-grid">
<div><span class="cho-info-label">收货人：</span><span class="cho-info-val">张**</span></div>
<div><span class="cho-info-label">联系电话：</span><span class="cho-info-val">138****6789</span></div>
<div class="cho-info-full"><span class="cho-info-label">收货地址：</span><span class="cho-info-val">北京市朝阳区建国路88号院3号楼1单元502</span></div>
</div>
</div>
<!-- 配送信息 -->
<div class="cho-section">
<div class="cho-section-hd">配送信息</div>
<div class="cho-info-grid">
<div><span class="cho-info-label">配送方式：</span><span class="cho-info-val">美团专送</span></div>
<div><span class="cho-info-label">预计送达：</span><span class="cho-info-val">13:10 前</span></div>
<div><span class="cho-info-label">骑手姓名：</span><span class="cho-info-val" style="color:var(--g-text-muted);">待分配</span></div>
<div><span class="cho-info-label">骑手电话：</span><span class="cho-info-val" style="color:var(--g-text-muted);">--</span></div>
</div>
</div>
</div>
<div class="g-drawer-ft" id="choDrawerFt">
<button class="g-btn" onclick="choCloseDrawer()">关闭</button>
<button class="g-btn g-btn-primary">接单</button>
</div>
</div>
<script>
/* 平台pill切换 */
function choSwitchPlatform(el) {
document.querySelectorAll('.cho-plat-pill').forEach(function(p) { p.classList.remove('active'); });
el.classList.add('active');
}
/* 抽屉开关 */
function choOpenDrawer(orderNo) {
document.getElementById('choDrawerTitle').textContent = '订单详情 #' + orderNo;
document.getElementById('choDrawerMask').classList.add('open');
document.getElementById('choDrawer').classList.add('open');
if (typeof lucide !== 'undefined') lucide.createIcons();
}
function choCloseDrawer() {
document.getElementById('choDrawerMask').classList.remove('open');
document.getElementById('choDrawer').classList.remove('open');
}
/* 初始化图标 */
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>

308
pages/ch-platform.html Normal file
View File

@@ -0,0 +1,308 @@
<!-- 渠道管理 - 平台接入 -->
<style>
.chp-page { display:flex; flex-direction:column; gap:20px; }
/* 顶部统计条 */
.chp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.chp-stat-item {
background:#fff; border-radius:10px; padding:18px 22px;
box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
display:flex; align-items:center; gap:14px;
}
.chp-stat-item:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
.chp-stat-icon {
width:42px; height:42px; border-radius:10px; display:flex;
align-items:center; justify-content:center; flex-shrink:0;
}
.chp-stat-icon.blue { background:color-mix(in srgb, var(--primary) 12%, #fff); color:var(--primary); }
.chp-stat-icon.green { background:color-mix(in srgb, var(--g-success) 12%, #fff); color:var(--g-success); }
.chp-stat-icon.orange { background:color-mix(in srgb, var(--g-warning) 12%, #fff); color:var(--g-warning); }
.chp-stat-icon.teal { background:color-mix(in srgb, #06b6d4 12%, #fff); color:#06b6d4; }
.chp-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:4px; }
.chp-stat-value { font-size:22px; font-weight:700; color:var(--g-text); }
.chp-stat-value .unit { font-size:13px; font-weight:400; color:var(--g-text-muted); margin-left:2px; }
.chp-sync-dot {
display:inline-block; width:7px; height:7px; border-radius:50%;
background:var(--g-success); margin-right:6px; vertical-align:middle;
animation:chp-pulse 2s infinite;
}
@keyframes chp-pulse {
0%,100% { opacity:1; }
50% { opacity:.4; }
}
/* Section 标题 */
.chp-section-hd {
font-size:15px; font-weight:600; color:var(--g-text);
padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px;
}
/* 已接入渠道卡片网格 */
.chp-channel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.chp-channel-card {
background:#fff; border-radius:10px; padding:22px 24px;
box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
display:flex; flex-direction:column; gap:16px;
}
.chp-channel-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-2px); }
.chp-card-top { display:flex; align-items:center; justify-content:space-between; }
.chp-card-top-left { display:flex; align-items:center; gap:12px; }
.chp-logo {
width:40px; height:40px; border-radius:10px; display:flex;
align-items:center; justify-content:center;
font-size:18px; font-weight:700; flex-shrink:0;
}
.chp-logo.meituan { background:#FFC107; color:#1a1a2e; }
.chp-logo.eleme { background:#2563eb; color:#fff; }
.chp-logo.mini { background:var(--primary); color:#fff; }
.chp-logo.gray { background:#e5e7eb; color:#9ca3af; }
.chp-platform-name { font-size:15px; font-weight:600; color:var(--g-text); }
.chp-shop-name { font-size:12px; color:var(--g-text-muted); margin-top:2px; }
.chp-data-row {
display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
background:#f8f9fb; border-radius:var(--g-radius); padding:14px 16px;
}
.chp-data-item { text-align:center; }
.chp-data-label { font-size:11px; color:var(--g-text-muted); margin-bottom:4px; }
.chp-data-val { font-size:18px; font-weight:700; color:var(--g-text); }
.chp-data-val .small-unit { font-size:12px; font-weight:400; color:var(--g-text-muted); }
.chp-sync-time { font-size:12px; color:var(--g-text-muted); display:flex; align-items:center; gap:4px; }
.chp-card-actions {
display:flex; align-items:center; gap:12px;
padding-top:14px; border-top:1px solid var(--g-border);
}
.chp-card-actions .spacer { flex:1; }
/* 待接入渠道 */
.chp-pending-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.chp-pending-card {
border:2px dashed #d9d9d9; border-radius:10px; padding:22px 24px;
display:flex; align-items:center; gap:16px; background:#fafafa;
transition:var(--g-transition);
}
.chp-pending-card:hover { border-color:var(--primary); background:#fff; }
.chp-pending-info { flex:1; }
.chp-pending-name { font-size:14px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
.chp-pending-desc { font-size:12px; color:var(--g-text-muted); }
.chp-btn-outline {
padding:6px 16px; border-radius:var(--g-radius-sm); font-size:13px;
border:1px solid var(--primary); color:var(--primary); background:#fff;
cursor:pointer; transition:var(--g-transition); white-space:nowrap; font-weight:500;
}
.chp-btn-outline:hover { background:var(--primary-light); }
/* 底部提示条 */
.chp-info-bar {
background:color-mix(in srgb, var(--primary) 6%, #fff);
border:1px solid color-mix(in srgb, var(--primary) 15%, #fff);
border-radius:var(--g-radius); padding:14px 18px;
font-size:13px; color:var(--g-text-secondary);
display:flex; align-items:center; gap:8px;
}
.chp-info-bar i { color:var(--primary); flex-shrink:0; }
</style>
<div class="chp-page">
<!-- 顶部统计条 -->
<div class="chp-stats">
<div class="chp-stat-item">
<div class="chp-stat-icon blue"><i data-lucide="link" style="width:20px;height:20px"></i></div>
<div>
<div class="chp-stat-label">已接入渠道</div>
<div class="chp-stat-value">3<span class="unit">个</span></div>
</div>
</div>
<div class="chp-stat-item">
<div class="chp-stat-icon orange"><i data-lucide="shopping-bag" style="width:20px;height:20px"></i></div>
<div>
<div class="chp-stat-label">今日全渠道订单</div>
<div class="chp-stat-value">186<span class="unit">单</span></div>
</div>
</div>
<div class="chp-stat-item">
<div class="chp-stat-icon green"><i data-lucide="banknote" style="width:20px;height:20px"></i></div>
<div>
<div class="chp-stat-label">今日全渠道营收</div>
<div class="chp-stat-value">¥12,480</div>
</div>
</div>
<div class="chp-stat-item">
<div class="chp-stat-icon teal"><i data-lucide="refresh-cw" style="width:20px;height:20px"></i></div>
<div>
<div class="chp-stat-label">数据最后同步</div>
<div class="chp-stat-value" style="font-size:16px;"><span class="chp-sync-dot"></span>2 分钟前</div>
</div>
</div>
</div>
<!-- 已接入渠道 -->
<div>
<div class="chp-section-hd">已接入渠道</div>
<div class="chp-channel-grid">
<!-- 美团外卖 -->
<div class="chp-channel-card">
<div class="chp-card-top">
<div class="chp-card-top-left">
<div class="chp-logo meituan">美</div>
<div>
<div class="chp-platform-name">美团外卖</div>
<div class="chp-shop-name">老三家·朝阳店</div>
</div>
</div>
<span class="g-tag g-tag-green">已连接</span>
</div>
<div class="chp-data-row">
<div class="chp-data-item">
<div class="chp-data-label">今日订单</div>
<div class="chp-data-val">68<span class="small-unit">单</span></div>
</div>
<div class="chp-data-item">
<div class="chp-data-label">今日营收</div>
<div class="chp-data-val">¥4,580</div>
</div>
<div class="chp-data-item">
<div class="chp-data-label">好评率</div>
<div class="chp-data-val">4.8<span class="small-unit">分</span></div>
</div>
</div>
<div class="chp-sync-time">
<i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：3 分钟前
</div>
<div class="chp-card-actions">
<button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
<a class="g-action" href="javascript:;">查看详情</a>
<span class="spacer"></span>
<a class="g-action g-action-danger" href="javascript:;">断开连接</a>
</div>
</div>
<!-- 饿了么 -->
<div class="chp-channel-card">
<div class="chp-card-top">
<div class="chp-card-top-left">
<div class="chp-logo eleme">饿</div>
<div>
<div class="chp-platform-name">饿了么</div>
<div class="chp-shop-name">老三家餐饮(朝阳路)</div>
</div>
</div>
<span class="g-tag g-tag-green">已连接</span>
</div>
<div class="chp-data-row">
<div class="chp-data-item">
<div class="chp-data-label">今日订单</div>
<div class="chp-data-val">52<span class="small-unit">单</span></div>
</div>
<div class="chp-data-item">
<div class="chp-data-label">今日营收</div>
<div class="chp-data-val">¥3,420</div>
</div>
<div class="chp-data-item">
<div class="chp-data-label">好评率</div>
<div class="chp-data-val">4.6<span class="small-unit">分</span></div>
</div>
</div>
<div class="chp-sync-time">
<i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：5 分钟前
</div>
<div class="chp-card-actions">
<button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
<a class="g-action" href="javascript:;">查看详情</a>
<span class="spacer"></span>
<a class="g-action g-action-danger" href="javascript:;">断开连接</a>
</div>
</div>
<!-- 自有小程序 -->
<div class="chp-channel-card">
<div class="chp-card-top">
<div class="chp-card-top-left">
<div class="chp-logo mini">自</div>
<div>
<div class="chp-platform-name">自有小程序</div>
<div class="chp-shop-name">老三家官方小程序</div>
</div>
</div>
<span class="g-tag g-tag-blue">同步中</span>
</div>
<div class="chp-data-row">
<div class="chp-data-item">
<div class="chp-data-label">今日订单</div>
<div class="chp-data-val">66<span class="small-unit">单</span></div>
</div>
<div class="chp-data-item">
<div class="chp-data-label">今日营收</div>
<div class="chp-data-val">¥4,480</div>
</div>
<div class="chp-data-item">
<div class="chp-data-label">好评率</div>
<div class="chp-data-val">4.9<span class="small-unit">分</span></div>
</div>
</div>
<div class="chp-sync-time">
<i data-lucide="clock" style="width:13px;height:13px"></i> 最后同步：实时同步
</div>
<div class="chp-card-actions">
<button class="g-btn g-btn-sm"><i data-lucide="refresh-cw" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px"></i>同步数据</button>
<a class="g-action" href="javascript:;">查看详情</a>
<span class="spacer"></span>
<a class="g-action g-action-danger" href="javascript:;">断开连接</a>
</div>
</div>
</div>
</div>
<!-- 待接入渠道 -->
<div>
<div class="chp-section-hd">更多渠道</div>
<div class="chp-pending-grid">
<div class="chp-pending-card">
<div class="chp-logo gray" style="font-size:16px;">抖</div>
<div class="chp-pending-info">
<div class="chp-pending-name">抖音团购</div>
<div class="chp-pending-desc">接入抖音本地生活，获取短视频流量</div>
</div>
<button class="chp-btn-outline">立即接入</button>
</div>
<div class="chp-pending-card">
<div class="chp-logo gray" style="font-size:16px;">快</div>
<div class="chp-pending-info">
<div class="chp-pending-name">快手本地生活</div>
<div class="chp-pending-desc">接入快手同城，覆盖下沉市场</div>
</div>
<button class="chp-btn-outline">立即接入</button>
</div>
<div class="chp-pending-card">
<div class="chp-logo gray" style="font-size:16px;">点</div>
<div class="chp-pending-info">
<div class="chp-pending-name">大众点评</div>
<div class="chp-pending-desc">同步大众点评店铺，管理团购套餐</div>
</div>
<button class="chp-btn-outline">立即接入</button>
</div>
</div>
</div>
<!-- 底部提示条 -->
<div class="chp-info-bar">
<i data-lucide="info" style="width:16px;height:16px"></i>
接入新渠道后，该渠道的订单将自动同步到「订单聚合」页面，菜单可通过「菜单同步」统一管理。
</div>
</div>
<script>
if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>