Files
docs/悦/官网头程下单/workbench.html
T
2026-08-05 09:49:02 +08:00

4210 lines
243 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虫虫出海 CHONGCHONG GLOBAL | 工作台</title>
<meta name="description" content="虫虫出海工作台 - 海外采购、美国本土卡车、美本土散板一键下单。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
green: '#4CAF50',
greenDark: '#2E7D32',
blue: '#1565C0',
blueDark: '#0D47A1',
teal: '#00838F',
light: '#F0F7FF',
dark: '#0A1628'
}
},
fontFamily: {
sans: ['Inter', 'Noto Sans SC', 'system-ui', 'sans-serif'],
},
boxShadow: {
'card': '0 10px 40px rgba(10, 22, 40, 0.08)',
'card-hover': '0 20px 60px rgba(10, 22, 40, 0.15)',
}
}
}
}
</script>
<style>
* { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; overflow-x: hidden; }
.btn-primary {
background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(21, 101, 192, 0.35);
}
.btn-accent {
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
transition: all 0.3s ease;
}
.btn-accent:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.35);
}
/* 语言切换器 */
.lang-switcher {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 9999px;
padding: 3px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.lang-switcher button {
font-size: 12px;
font-weight: 600;
padding: 4px 9px;
border-radius: 9999px;
color: rgba(255, 255, 255, 0.9);
transition: all 0.25s ease;
white-space: nowrap;
}
.lang-switcher button:hover { color: #fff; }
.lang-switcher button.active { background: #fff; color: #0D47A1; }
/* ===== 下单工作台 Dashboard ===== */
.dash-view { animation: fadeIn 0.4s ease; }
.dash-card {
background: #fff;
border: 1px solid #eef2f7;
border-radius: 1.25rem;
box-shadow: 0 10px 40px rgba(10, 22, 40, 0.06);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.dash-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 60px rgba(10, 22, 40, 0.14);
border-color: rgba(21, 101, 192, 0.35);
}
.dash-form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
font-size: 0.95rem;
color: #1f2937;
background: #fff;
transition: all 0.2s ease;
}
.dash-form-input:focus {
border-color: #1565C0;
box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}
.dash-form-input::placeholder { color: #9ca3af; }
.dash-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
.dash-label .req { color: #ef4444; margin-left: 2px; }
.seg-input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0.65rem 1.1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
cursor: pointer;
font-size: 0.9rem;
color: #475569;
background: #fff;
transition: all 0.2s ease;
user-select: none;
}
.seg-pill:hover { border-color: #cbd5e1; }
.seg-input:checked + .seg-pill {
border-color: #1565C0;
background: #EAF2FD;
color: #0D47A1;
font-weight: 600;
box-shadow: 0 0 0 1px #1565C0 inset;
}
.dash-topbar {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid #eef2f7;
}
.dash-sidebar {
width: 250px;
flex-shrink: 0;
background: linear-gradient(180deg, #0B1F3A 0%, #0C2A52 100%);
color: #fff;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
padding: 1.25rem 0.875rem;
}
.dash-sidebar-brand {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.55rem 1.1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 0.6rem;
}
.dash-sidebar-brand .brand-name { font-weight: 700; font-size: 1rem; line-height: 1.15; }
.dash-sidebar-brand .brand-sub { font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45); }
.dash-nav { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
.dash-nav-group {
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4); padding: 0.85rem 0.75rem 0.35rem;
}
.dash-nav-link {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.72rem 0.85rem; border-radius: 0.75rem;
color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; font-weight: 500;
cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.dash-nav-link i { width: 1.2rem; text-align: center; font-size: 0.95rem; }
.dash-nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.dash-nav-link.active {
background: linear-gradient(90deg, #1565C0, #1E88E5); color: #fff;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.4);
}
.dash-sidebar-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.9rem;
display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch;
}
.dash-sidebar-bottom #langSwitcherDash { align-self: center; }
.dash-logout-btn {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.6rem; border-radius: 0.7rem; font-size: 0.88rem; font-weight: 600;
background: rgba(239, 68, 68, 0.12); color: #fca5a5; cursor: pointer;
transition: all 0.2s ease;
}
.dash-logout-btn:hover { background: rgba(239, 68, 68, 0.22); color: #fff; }
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-menu-btn {
display: none; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
align-items: center; justify-content: center; color: #374151;
background: #f1f5f9; cursor: pointer;
}
.dash-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 45; }
.dash-overlay.show { display: block; }
.dash-right {
width: 320px; flex-shrink: 0;
background: #fff; border-left: 1px solid #eef2f7;
padding: 1.25rem 1rem;
position: sticky; top: 3.5rem; align-self: flex-start;
max-height: calc(100vh - 3.5rem); overflow-y: auto;
}
.dash-right.dash-right-hidden { display: none !important; }
.dash-topup-btn {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.45rem 0.9rem; border-radius: 0.7rem;
font-size: 0.85rem; font-weight: 600; cursor: pointer;
color: #fff; background: linear-gradient(135deg, #1565C0, #00BFA5);
border: none; box-shadow: 0 4px 14px rgba(21,101,192,0.3);
transition: all 0.2s ease;
}
.dash-topup-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21,101,192,0.4); }
.dash-topup-btn i { font-size: 0.95rem; }
.topup-overlay {
position: fixed; inset: 0; background: rgba(15,23,42,0.55);
display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.topup-overlay.hidden { display: none; }
.topup-modal {
width: 380px; max-width: 100%; background: #fff; border-radius: 1.25rem;
box-shadow: 0 24px 60px rgba(0,0,0,0.25); overflow: hidden; animation: topupIn .25s ease;
}
@keyframes topupIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.topup-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid #eef2f7; }
.topup-head h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.topup-close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: #94a3b8; cursor: pointer; }
.topup-close:hover { color: #475569; }
.topup-body { padding: 1.25rem; }
.topup-amount-label { font-size: 0.85rem; color: #475569; margin-bottom: 0.5rem; }
.topup-amount-input {
display: flex; align-items: center; gap: 0.5rem;
border: 1.5px solid rgba(21,101,192,0.25); border-radius: 0.8rem;
padding: 0 0.9rem; height: 3rem; margin-bottom: 1.1rem; transition: border-color .2s, box-shadow .2s;
}
.topup-amount-input:focus-within { border-color: #1565C0; box-shadow: 0 0 0 4px rgba(21,101,192,0.1); }
.topup-amount-input .cur { font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.topup-amount-input input { flex: 1; min-width: 0; border: none; outline: none; font-size: 1.05rem; font-weight: 600; color: #0f172a; background: transparent; }
.topup-presets { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.topup-preset { flex: 1; padding: 0.5rem; border-radius: 0.6rem; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 0.85rem; color: #475569; cursor: pointer; transition: all .2s; }
.topup-preset:hover { border-color: #1565C0; color: #1565C0; }
.topup-preset.active { background: linear-gradient(135deg, rgba(21,101,192,0.1), rgba(0,191,165,0.1)); border-color: #1565C0; color: #1565C0; font-weight: 600; }
.topup-methods { display: flex; gap: 0.75rem; margin-bottom: 1.1rem; }
.topup-method {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.7rem; border-radius: 0.8rem; border: 1.5px solid #e2e8f0; background: #fff;
font-size: 0.9rem; font-weight: 600; color: #475569; cursor: pointer; transition: all .2s;
}
.topup-method i { font-size: 1.2rem; }
.topup-method[data-method="wechat"] i { color: #09bb07; }
.topup-method[data-method="alipay"] i { color: #1677ff; }
.topup-method.active { border-color: #1565C0; background: linear-gradient(135deg, rgba(21,101,192,0.06), rgba(0,191,165,0.06)); color: #0f172a; }
.topup-qr {
display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
padding: 1.2rem; background: #f8fafc; border-radius: 0.9rem; border: 1px dashed #cbd5e1;
}
.topup-qr-box { width: 150px; height: 150px; border-radius: 0.8rem; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; }
.topup-qr-box .fa-weixin { color: #09bb07; }
.topup-qr-box .fa-alipay { color: #1677ff; }
.topup-qr-tip { font-size: 0.82rem; color: #64748b; text-align: center; }
.topup-foot { display: flex; gap: 0.75rem; padding: 0 1.25rem 1.25rem; }
.topup-foot button { flex: 1; padding: 0.7rem; border-radius: 0.8rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; transition: all .2s; }
.topup-cancel { background: #f1f5f9; color: #475569; }
.topup-cancel:hover { background: #e2e8f0; }
.topup-confirm { background: linear-gradient(135deg, #1565C0, #00BFA5); color: #fff; box-shadow: 0 4px 14px rgba(21,101,192,0.3); }
.topup-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21,101,192,0.4); }
.dash-right-card {
background: #f8fafc; border: 1px solid #eef2f7;
border-radius: 0.85rem; padding: 1rem; margin-bottom: 0.85rem;
}
.dash-right-card h4 {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: #94a3b8; margin-bottom: 0.9rem;
}
.dash-account { display: flex; align-items: center; gap: 0.75rem; }
.dash-account-avatar {
width: 2.75rem; height: 2.75rem; border-radius: 0.8rem;
background: linear-gradient(135deg, #1565C0, #00BFA5); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.dash-account-name { font-weight: 700; color: #0f172a; font-size: 0.95rem; line-height: 1.2; }
.dash-account-type { font-size: 0.75rem; color: #64748b; margin-top: 0.15rem; }
.dash-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px dashed #e2e8f0; }
.dash-stat-row:last-child { border-bottom: none; }
.dash-stat-label { font-size: 0.85rem; color: #475569; }
.dash-stat-value { font-weight: 700; color: #0f172a; font-size: 0.95rem; }
.dash-help-item {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.6rem 0.55rem; border-radius: 0.6rem; cursor: pointer;
color: #334155; font-size: 0.9rem; transition: background 0.2s, color 0.2s;
}
.dash-help-item:hover { background: #eef2f7; color: #1565C0; }
.dash-help-item i { color: #00BFA5; width: 1.15rem; text-align: center; }
.dash-tip {
background: linear-gradient(135deg, rgba(0,191,165,0.08), rgba(21,101,192,0.08));
border: 1px solid rgba(0,191,165,0.22); border-radius: 1rem;
padding: 0.9rem; font-size: 0.82rem; color: #475569; line-height: 1.65;
}
.dash-tip i { color: #00BFA5; margin-right: 0.4rem; }
.dash-empty { padding: 1rem; color: #94a3b8; }
.dash-empty i { font-size: 3rem; color: #cbd5e1; margin-bottom: 1rem; display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.dash-sidebar {
position: fixed; left: 0; top: 0; z-index: 50;
transform: translateX(-100%); transition: transform 0.3s ease;
}
.dash-sidebar.open { transform: translateX(0); }
.dash-menu-btn { display: inline-flex; }
}
/* ===== 折叠分组菜单(来自柏悦客户端,统一为 workbench 样式)===== */
.dash-nav-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 0.5rem 0.75rem; }
.dash-menu-group { display: flex; flex-direction: column; }
.dash-menu-group-header {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.62rem 0.85rem; border-radius: 0.7rem;
color: rgba(255, 255, 255, 0.6); font-size: 0.86rem; font-weight: 600;
cursor: pointer; transition: all 0.2s ease; user-select: none; white-space: nowrap;
}
.dash-menu-group-header:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.dash-menu-group-header .g-icon { width: 1.2rem; text-align: center; font-size: 0.92rem; }
.dash-menu-group-header .g-title { flex: 1; }
.dash-menu-group-header .g-arrow { font-size: 0.62rem; transition: transform 0.3s ease; }
.dash-menu-group-header.collapsed .g-arrow { transform: rotate(-90deg); }
.dash-menu-sub {
display: flex; flex-direction: column; gap: 0.12rem; overflow: hidden;
max-height: 600px; opacity: 1; margin-top: 0.12rem;
transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.2s ease;
}
.dash-menu-sub.collapsed { max-height: 0; opacity: 0; margin-top: 0; }
.dash-nav-link.sub { padding-left: 2.55rem; font-size: 0.88rem; font-weight: 500; }
.dash-nav-link.sub i { font-size: 0.8rem; opacity: 0.65; }
.dash-nav-link.logout { color: #fca5a5; background: rgba(239, 68, 68, 0.10); margin-top: 0.2rem; }
.dash-nav-link.logout:hover { background: rgba(239, 68, 68, 0.22); color: #fff; }
/* ===== 柏悦客户端组件样式(已统一作用域到 .client-shell)===== */
.client-shell * {
box-sizing: border-box; margin: 0; padding: 0; }
.client-shell html, .client-shell body {
overflow-x: hidden; max-width: 100vw; }
.client-shell body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #f5f7fa; color: #262626; display: flex; min-height: 100vh; }
.client-shell /* ===== SIDEBAR ===== */
.sidebar {
width: 240px; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.3);
display: flex; flex-direction: column;
position: fixed; left: 0; top: 64px; bottom: 0;
z-index: 100; box-shadow: 2px 0 20px rgba(0,0,0,.08);
transition: all .3s cubic-bezier(.4,0,.2,1);
}
.client-shell .sidebar.collapsed {
width: 0; transform: translateX(-100%); border-right: none; overflow: hidden; }
.client-shell .nav {
flex: 1; overflow-y: auto; padding: 16px 12px; }
.client-shell .nav-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; font-size: 13px; color: #595959;
cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative; text-decoration: none; border-radius: 10px;
}
.client-shell .nav-item:hover {
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); color: #667eea; transform: translateX(3px); }
.client-shell .nav-item.active {
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 500; box-shadow: 0 4px 15px rgba(102,126,234,0.3); }
.client-shell .nav-item.active::before {
content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
width: 4px; height: 24px; background: linear-gradient(135deg, #667eea, #f093fb); border-radius: 0 4px 4px 0;
}
.client-shell .nav-item .nav-icon, .client-shell .nav-group-left .nav-icon {
width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.client-shell .nav-item .nav-icon svg, .client-shell .nav-group-left .nav-icon svg {
width: 16px; height: 16px; }
.client-shell .nav-divider {
height: 1px; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.2), transparent); margin: 12px 8px; }
.client-shell .nav-group {
display: flex; flex-direction: column; }
.client-shell .nav-group-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; font-size: 13px; color: #595959;
cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); user-select: none;
border-radius: 10px;
}
.client-shell .nav-group-header:hover {
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); color: #667eea; }
.client-shell .nav-group-header .nav-group-left {
display: flex; align-items: center; gap: 10px; }
.client-shell .nav-group-header .nav-arrow {
font-size: 10px; color: #8c8c8c; transition: transform .3s; }
.client-shell .nav-group-header.expanded .nav-arrow {
transform: rotate(180deg); }
.client-shell .nav-group-header.active {
color: #667eea; font-weight: 600; }
.client-shell .nav-sub {
display: none; flex-direction: column; }
.client-shell .nav-sub.expanded {
display: flex; }
.client-shell .nav-sub-item {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px 10px 40px; font-size: 13px; color: #8c8c8c;
cursor: pointer; text-decoration: none; transition: all .3s cubic-bezier(.4,0,.2,1);
border-radius: 8px;
}
.client-shell .nav-sub-item:hover {
color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); }
.client-shell .nav-sub-item.active {
color: #fff; font-weight: 600; background: linear-gradient(135deg, #667eea, #764ba2); }
.client-shell /* ===== TOPBAR ===== */
.topbar {
position: fixed; top: 0; left: 0; right: 0; height: 64px;
background: linear-gradient(135deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95), rgba(240,147,251,0.95));
backdrop-filter: blur(20px); display: flex; align-items: center;
justify-content: space-between; padding: 0 28px; z-index: 99;
box-shadow: 0 4px 30px rgba(102,126,234,.35);
border-bottom: 1px solid rgba(255,255,255,.2);
}
.client-shell .topbar-left {
display: flex; align-items: center; gap: 18px; }
.client-shell .topbar-menu-icon {
width: 24px; height: 20px; display: flex; flex-direction: column;
justify-content: space-between; cursor: pointer; padding: 4px 0;
}
.client-shell .topbar-menu-icon span {
display: block; height: 2px; background: #fff; border-radius: 3px; transition: all .3s; }
.client-shell .topbar-menu-icon:hover span:first-child {
width: 14px; transform: translateX(2px); }
.client-shell .topbar-menu-icon:hover span:last-child {
width: 14px; transform: translateX(-2px); }
.client-shell .topbar-logo-small {
width: 36px; height: 36px; object-fit: contain; display: block; border-radius: 10px; background: rgba(255,255,255,0.9); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.client-shell .topbar-brand-text {
font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.client-shell .topbar-right {
display: flex; align-items: center; gap: 18px; }
.client-shell .topbar-icon-btn {
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; cursor: pointer; color: #fff; font-size: 16px; transition: all .3s;
background: rgba(255,255,255,0.1);
}
.client-shell .topbar-icon-btn:hover {
background: rgba(255,255,255,0.25); transform: scale(1.1); }
.client-shell .topbar-avatar {
width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.15));
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; border: 2px solid rgba(255,255,255,0.4);
transition: all .3s;
}
.client-shell .topbar-avatar:hover {
transform: scale(1.1); box-shadow: 0 4px 15px rgba(255,255,255,0.3); }
.client-shell .topbar-logout {
font-size: 13px; color: rgba(255,255,255,.9); cursor: pointer; transition: all .3s; padding: 6px 14px; border-radius: 8px; }
.client-shell .topbar-logout:hover {
color: #fff; background: rgba(255,255,255,0.15); }
.client-shell /* ===== MAIN CONTENT ===== */
.main {
margin-left: 240px; margin-top: 64px; flex: 1;
padding: 28px; min-height: calc(100vh - 64px);
transition: all .3s cubic-bezier(.4,0,.2,1);
max-width: calc(100vw - 0px); overflow-x: hidden;
}
.client-shell .main.expanded {
margin-left: 0; }
.client-shell /* Page content panels */
.page-content {
display: none; }
.client-shell .page-content.active {
display: block; }
.client-shell /* ===== SHARED: Page Header / Breadcrumb ===== */
.page-header {
display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.client-shell .page-title {
font-size: 20px; font-weight: 700; color: #1e293b; }
.client-shell .page-subtitle {
font-size: 13px; color: #71717a; margin-top: 6px; }
.client-shell .breadcrumb {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: #71717a; margin-bottom: 18px; }
.client-shell .breadcrumb a {
color: #71717a; text-decoration: none; transition: all .2s; }
.client-shell .breadcrumb a:hover {
color: #667eea; }
.client-shell .link-primary {
color: #667eea; text-decoration: none; font-size: 13px; transition: all .2s; }
.client-shell .link-primary:hover {
text-decoration: underline; color: #764ba2; }
.client-shell /* Company info tabs */
.info-tabs {
display: flex; gap: 0; border: 1.5px solid rgba(102,126,234,0.2); border-radius: 14px; overflow: hidden; width: fit-content; margin-bottom: 20px; background: rgba(255,255,255,0.95); }
.client-shell .info-tab {
padding: 12px 32px; font-size: 13px; cursor: pointer; color: #595959; background: transparent; border: none; transition: all .3s cubic-bezier(.4,0,.2,1); border-right: 1px solid rgba(102,126,234,0.15); font-weight: 500; }
.client-shell .info-tab:last-child {
border-right: none; }
.client-shell .info-tab:hover {
color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); }
.client-shell .info-tab.active {
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 600; }
.client-shell .info-tab-content {
display: none; }
.client-shell .info-tab-content.active {
display: block; }
.client-shell .balance-card {
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08));
border: 1px solid rgba(102,126,234,0.22); border-radius: 14px;
padding: 18px 22px; margin-bottom: 18px; }
.client-shell .balance-label {
font-size: 13px; color: #64748b; margin-bottom: 4px; }
.client-shell .balance-amount {
font-size: 1.6rem; font-weight: 700; color: #4338ca; line-height: 1.1; }
.client-shell .balance-actions {
display: flex; align-items: center; gap: 10px; }
.client-shell .balance-detail-btn {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px;
border: 1px solid rgba(102,126,234,0.38); border-radius: 8px; background: #fff;
color: #4f46e5; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.client-shell .balance-detail-btn:hover {
border-color: #667eea; background: rgba(102,126,234,0.07); transform: translateY(-1px); }
.balance-detail-modal { width: 760px; }
.balance-detail-summary {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.balance-summary-item {
padding: 14px 16px; border: 1px solid #e8edf5; border-radius: 12px; background: #f8fafc; }
.balance-summary-label { color: #64748b; font-size: 12px; margin-bottom: 5px; }
.balance-summary-value { color: #0f172a; font-size: 19px; font-weight: 700; }
.balance-summary-value.income { color: #059669; }
.balance-summary-value.expense { color: #e11d48; }
.balance-detail-filter {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; margin-bottom: 14px; padding: 12px; border-radius: 12px; background: #f8fafc; }
.balance-quick-periods { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.balance-period-btn {
padding: 6px 11px; border: 1px solid #dbe3ef; border-radius: 7px; background: #fff;
color: #64748b; font-size: 12px; cursor: pointer; transition: all .2s ease; }
.balance-period-btn:hover, .balance-period-btn.active {
border-color: #667eea; background: rgba(102,126,234,.08); color: #4f46e5; }
.balance-date-range { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.balance-date-range input {
width: 142px; padding: 6px 9px; border: 1px solid #dbe3ef; border-radius: 7px;
background: #fff; color: #334155; font-size: 12px; outline: none; }
.balance-date-range input:focus { border-color: #667eea; box-shadow: 0 0 0 2px rgba(102,126,234,.1); }
.balance-filter-action {
padding: 7px 13px; border: 0; border-radius: 7px; background: #4f46e5;
color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.balance-filter-reset { background: #fff; border: 1px solid #dbe3ef; color: #64748b; }
.balance-detail-table-wrap { overflow-x: auto; border: 1px solid #e8edf5; border-radius: 12px; }
.balance-detail-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 13px; }
.balance-detail-table th {
padding: 11px 14px; background: #f8fafc; color: #64748b; font-weight: 600; text-align: left; white-space: nowrap; }
.balance-detail-table td { padding: 13px 14px; border-top: 1px solid #eef2f7; color: #334155; white-space: nowrap; }
.balance-detail-table .amount-in { color: #059669; font-weight: 600; }
.balance-detail-table .amount-out { color: #e11d48; font-weight: 600; }
.balance-status {
display: inline-flex; padding: 3px 9px; border-radius: 999px; background: #ecfdf5; color: #059669; font-size: 11px; }
.balance-empty-row td { padding: 30px 14px; color: #94a3b8; text-align: center; }
.balance-detail-note { margin-top: 12px; color: #94a3b8; font-size: 12px; text-align: right; }
@media (max-width: 640px) {
.client-shell .balance-card { align-items: flex-start; gap: 16px; flex-direction: column; }
.client-shell .balance-actions { width: 100%; }
.client-shell .balance-actions button { flex: 1; justify-content: center; }
.balance-detail-summary { grid-template-columns: 1fr; }
}
.client-shell /* Company info cards */
.info-card {
background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 18px; padding: 28px; box-shadow: 0 8px 32px rgba(0,0,0,.08); border: 1px solid rgba(255,255,255,0.4); }
.client-shell .info-section-title {
font-size: 15px; font-weight: 700; color: #667eea; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(102,126,234,0.1); }
.client-shell .info-row {
display: flex; margin-bottom: 14px; }
.client-shell .info-label {
width: 100px; color: #8c8c8c; font-size: 13px; flex-shrink: 0; }
.client-shell .info-value {
flex: 1; color: #262626; font-size: 13px; }
.client-shell .info-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.client-shell .info-doc-table {
width: 100%; border-collapse: collapse; font-size: 13px; }
.client-shell .info-doc-table thead th {
background: #fafafa; padding: 10px 12px; text-align: left; font-weight: 500; color: #8c8c8c; border-bottom: 1px solid #f0f0f0; }
.client-shell .info-doc-table tbody td {
padding: 12px; border-bottom: 1px solid #f5f5f5; color: #262626; }
.client-shell .info-doc-table tbody tr:last-child td {
border-bottom: none; }
.client-shell .doc-status {
color: #52c41a; font-size: 12px; }
.client-shell .doc-btn {
padding: 3px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 12px; color: #595959; background: #fff; cursor: pointer; }
.client-shell .doc-btn:hover {
border-color: #1677ff; color: #1677ff; }
.client-shell .info-two-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.client-shell .breadcrumb a:hover {
color: #667eea; }
.client-shell .breadcrumb .sep {
color: #a1a1aa; }
.client-shell .breadcrumb .current {
color: #1e293b; font-weight: 500; }
.client-shell /* ===== SHARED: Card ===== */
.card {
background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
border: 1px solid rgba(255,255,255,0.4);
margin-bottom: 14px; overflow: hidden;
transition: all .4s cubic-bezier(.4,0,.2,1);
}
.client-shell .card:hover {
transform: translateY(-2px); box-shadow: 0 12px 40px rgba(102,126,234,.15); }
.client-shell .card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px 14px; border-bottom: 1px solid rgba(102,126,234,0.1);
}
.client-shell .card-title {
font-size: 18px; font-weight: 700; color: #1e293b; }
.client-shell .card-subtitle {
font-size: 13px; color: #8c8c8c; margin-top: 4px; }
.client-shell .card-body {
padding: 18px 20px; }
.client-shell /* ===== SHARED: Buttons ===== */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px; border-radius: 12px; font-size: 13px;
cursor: pointer; border: none; transition: all .3s cubic-bezier(.4,0,.2,1); font-family: inherit;
font-weight: 500;
}
.client-shell .btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; box-shadow: 0 4px 15px rgba(102,126,234,0.35); }
.client-shell .btn-primary:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.45); }
.client-shell .btn-default {
background: rgba(255,255,255,0.9); color: #595959; border: 1.5px solid rgba(102,126,234,0.2); }
.client-shell .btn-default:hover {
border-color: #667eea; color: #667eea; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102,126,234,0.15); }
.client-shell .btn-danger {
background: rgba(255,255,255,0.9); color: #ff6b6b; border: 1.5px solid rgba(255,107,107,0.3); }
.client-shell .btn-danger:hover {
background: linear-gradient(135deg, rgba(255,107,107,0.05), rgba(255,77,79,0.05)); transform: translateY(-1px); }
.client-shell .btn-ghost {
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); color: #667eea; border: 1px solid rgba(102,126,234,0.2); }
.client-shell .btn-ghost:hover {
background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15)); transform: translateY(-1px); }
.client-shell .btn-sm {
padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.client-shell .btn-purple {
background: linear-gradient(135deg, #764ba2, #f093fb); color: #fff; border: none; box-shadow: 0 4px 15px rgba(118,75,162,0.35); }
.client-shell .btn-purple:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(118,75,162,0.45); }
.client-shell /* Flat toolbar buttons */
.btn-flat {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 10px; font-size: 13px;
cursor: pointer; border: 1.5px solid rgba(102,126,234,0.2); transition: all .3s cubic-bezier(.4,0,.2,1);
font-family: inherit; background: rgba(255,255,255,0.9); color: #595959;
}
.client-shell .btn-flat:hover {
border-color: #667eea; color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); transform: translateY(-1px); }
.client-shell .btn-flat-blue {
background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35); border-radius: 10px; padding: 10px 20px; font-weight: 500; }
.client-shell .btn-flat-blue:hover {
background: linear-gradient(135deg, #4338ca, #6d28d9); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45); }
.client-shell .btn-flat-blue:active {
transform: translateY(0); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35); }
.client-shell .btn-flat-purple {
background: linear-gradient(135deg, #764ba2, #f093fb); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(118,75,162,0.35); }
.client-shell .btn-flat-purple:hover {
background: linear-gradient(135deg, #667eea, #764ba2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(118,75,162,0.45); }
.client-shell .btn-flat-red {
color: #ff6b6b; border-color: rgba(255,107,107,0.3); background: rgba(255,255,255,0.9); }
.client-shell .btn-flat-red:hover {
background: linear-gradient(135deg, rgba(255,107,107,0.08), rgba(255,77,79,0.08)); border-color: #ff6b6b; transform: translateY(-1px); }
.client-shell .btn-flat .icon-svg {
width: 14px; height: 14px; flex-shrink: 0; }
.client-shell /* ===== PAGE: 头程下单 - Form ===== */
.form-group {
display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; min-height: 32px; }
.client-shell .form-group:last-child {
margin-bottom: 0; }
.client-shell .form-label {
font-size: 13px; color: #595959; font-weight: 400; min-width: 80px; text-align: right; padding-top: 5px; line-height: 22px; }
.client-shell .form-label .required {
color: #ff4d4f; margin-right: 4px; }
.client-shell .form-content {
flex: 1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.client-shell .radio-group {
display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.client-shell .radio-label {
display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #262626; cursor: pointer; user-select: none; transition: all .2s; }
.client-shell .radio-label:hover {
color: #667eea; }
.client-shell .radio-label input[type=radio] {
width: 16px; height: 16px; accent-color: #667eea; cursor: pointer; margin: 0; }
.client-shell .radio-label.disabled {
color: #bfbfbf; cursor: not-allowed; }
.client-shell .radio-label.disabled input[type=radio] {
accent-color: #d9d9d9; cursor: not-allowed; }
.client-shell .form-input, .client-shell .form-select, .client-shell .form-textarea {
height: 40px; padding: 0 16px; border: 1.5px solid rgba(102,126,234,0.2); border-radius: 10px;
font-size: 13px; color: #262626; background: rgba(255,255,255,0.95); outline: none; transition: all .3s cubic-bezier(.4,0,.2,1); font-family: inherit;
}
.client-shell .form-input:focus, .client-shell .form-select:focus, .client-shell .form-textarea:focus {
border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
.client-shell .form-input::placeholder, .client-shell .form-textarea::placeholder {
color: #bfbfbf; }
.client-shell /* 强制表单控件不撑宽页面 */
.main .form-input, .client-shell .main .form-select, .client-shell .main .form-textarea {
min-width: 0 !important; max-width: 100% !important; }
.client-shell .main .form-content {
flex: 1; min-width: 0; }
.client-shell .form-textarea {
width: 100%; max-width: 100%; height: 90px; padding: 12px 16px; resize: vertical; border-radius: 12px; }
.client-shell .input-wrap {
position: relative; display: flex; align-items: center; }
.client-shell .input-wrap .form-input {
padding-right: 32px; }
.client-shell .input-suffix {
position: absolute; right: 10px; color: #bfbfbf; font-size: 14px; pointer-events: none; }
.client-shell .select-wrap {
position: relative; display: inline-block; }
.client-shell .select-wrap .form-select {
min-width: 160px; padding-right: 32px; appearance: auto; }
.client-shell .date-range {
display: flex; align-items: center; gap: 8px; }
.client-shell .date-range .form-input {
width: 160px; }
.client-shell .date-sep {
color: #bfbfbf; font-size: 13px; white-space: nowrap; }
.client-shell /* Dest type tabs */
.dest-type-tabs {
display: flex; gap: 0; border: 1.5px solid rgba(102,126,234,0.2); border-radius: 14px; overflow: hidden; width: fit-content; background: rgba(255,255,255,0.95); }
.client-shell .dest-tab {
padding: 10px 28px; font-size: 13px; cursor: pointer; color: #595959; background: transparent; border: none; transition: all .3s cubic-bezier(.4,0,.2,1); border-right: 1px solid rgba(102,126,234,0.15); font-weight: 500; }
.client-shell .dest-tab:last-child {
border-right: none; }
.client-shell .dest-tab:hover {
color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); }
.client-shell .dest-tab.active {
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 600; }
.client-shell .dest-content {
display: none; }
.client-shell .dest-content.active {
display: block; }
.client-shell .dest-content-bulk {
display: none; }
.client-shell .dest-content-bulk.active {
display: block; }
.client-shell /* Goods table */
.table-toolbar {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.client-shell .table-actions {
display: flex; gap: 10px; }
.client-shell .table-wrap {
overflow-x: auto; border: 1px solid rgba(102,126,234,0.15); border-radius: 16px; background: rgba(255,255,255,0.95); }
.client-shell table.goods-table {
width: 100%; border-collapse: collapse; font-size: 12px; }
.client-shell .goods-table thead th {
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); border-bottom: 1px solid rgba(102,126,234,0.15); padding: 14px 10px; text-align: left; font-weight: 600; color: #667eea; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.client-shell .goods-table thead th:first-child {
width: 48px; text-align: center; }
.client-shell .goods-table tbody tr {
border-bottom: 1px solid rgba(102,126,234,0.08); transition: all .3s cubic-bezier(.4,0,.2,1); }
.client-shell .goods-table tbody tr:last-child {
border-bottom: none; }
.client-shell .goods-table tbody tr:hover {
background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); }
.client-shell .goods-table tbody td {
padding: 12px 10px; vertical-align: middle; }
.client-shell .goods-table tbody td:first-child {
text-align: center; color: #bfbfbf; font-size: 12px; }
.client-shell .td-input {
width: 100%; height: 36px; padding: 0 10px; border: 1.5px solid transparent; border-radius: 8px; font-size: 12px; color: #262626; background: transparent; outline: none; transition: all .3s cubic-bezier(.4,0,.2,1); font-family: inherit; }
.client-shell .td-input:focus, .client-shell .td-input:hover {
border-color: rgba(102,126,234,0.3); background: rgba(255,255,255,0.9); }
.client-shell .td-input::placeholder {
color: #bfbfbf; }
.client-shell .empty-row td {
padding: 28px 0; text-align: center; color: #bfbfbf; font-size: 13px; }
.client-shell .upload-link {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #667eea; cursor: pointer; padding: 10px 22px; border: 2px dashed rgba(102,126,234,0.4); border-radius: 12px; background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); transition: all .3s cubic-bezier(.4,0,.2,1); font-weight: 600; }
.client-shell .upload-link:hover {
background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1)); border-color: #667eea; transform: translateY(-1px); }
.client-shell /* Upload zone (image upload) */
.upload-zone {
border: 2px dashed rgba(102,126,234,0.4); border-radius: 14px; padding: 32px 20px; text-align: center; cursor: pointer; background: linear-gradient(135deg, rgba(102,126,234,0.03), rgba(118,75,162,0.03)); transition: all .3s cubic-bezier(.4,0,.2,1); }
.client-shell .upload-zone:hover {
border-color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); }
.client-shell .upload-zone.dragover {
border-color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.12)); }
.client-shell .upload-zone-icon {
font-size: 36px; margin-bottom: 8px; }
.client-shell .upload-zone-text {
font-size: 14px; color: #262626; font-weight: 600; margin-bottom: 4px; }
.client-shell .upload-zone-hint {
font-size: 12px; color: #8c8c8c; }
.client-shell .upload-preview {
display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.client-shell .upload-preview-item {
position: relative; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(102,126,234,0.2); background: #fff; }
.client-shell .upload-preview-item img {
width: 100%; height: 100%; object-fit: cover; }
.client-shell .upload-preview-item .upload-remove {
position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; line-height: 1; }
.client-shell .upload-preview-item .upload-remove:hover {
background: #ff4d4f; }
.client-shell .upload-preview-item .upload-filename {
position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; background: rgba(0,0,0,0.55); color: #fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-shell .row-upload-cell {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 10px; border: 1px dashed #d9d9d9; border-radius: 6px; font-size: 12px; color: #667eea; background: #fafafa; }
.client-shell .row-upload-cell:hover {
border-color: #667eea; background: #f0f4ff; }
.client-shell .row-upload-cell input {
display: none; }
.client-shell .row-img-cell {
width: 60px; height: 60px; border: 1px dashed #d9d9d9; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #bfbfbf; font-size: 18px; background: #fafafa; position: relative; overflow: hidden; }
.client-shell .row-img-cell:hover {
border-color: #667eea; color: #667eea; }
.client-shell .row-img-cell img {
width: 100%; height: 100%; object-fit: cover; }
.client-shell .row-img-cell input {
display: none; }
.client-shell .download-link {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #595959; text-decoration: none; padding: 10px 22px; border: 1.5px solid rgba(102,126,234,0.2); border-radius: 12px; background: rgba(255,255,255,0.95); transition: all .3s cubic-bezier(.4,0,.2,1); font-weight: 500; }
.client-shell .download-link:hover {
border-color: #667eea; color: #667eea; transform: translateY(-1px); }
.client-shell /* Action row buttons — outlined style matching screenshots */
.btn-outline-blue {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 2px solid #667eea; border-radius: 12px; color: #667eea; background: rgba(255,255,255,0.9); font-size: 13px; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); font-family: inherit; font-weight: 500; }
.client-shell .btn-outline-blue:hover {
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(102,126,234,0.35); }
.client-shell .btn-outline-red {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 2px solid #ff6b6b; border-radius: 12px; color: #ff6b6b; background: rgba(255,255,255,0.9); font-size: 13px; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); font-family: inherit; font-weight: 500; }
.client-shell .btn-outline-red:hover {
background: linear-gradient(135deg, #ff6b6b, #ff8787); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(255,107,107,0.35); }
.client-shell .form-footer {
background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 16px; padding: 20px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.08); border: 1px solid rgba(255,255,255,0.4); position: sticky; bottom: 0; z-index: 50; }
.client-shell .footer-tips {
font-size: 12px; color: #8c8c8c; display: flex; align-items: center; gap: 8px; }
.client-shell .footer-tips .tip-icon {
color: #ffd93d; }
.client-shell .btn-submit {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); color: #fff; border: none; padding: 12px 48px; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 6px 20px rgba(102,126,234,.4); }
.client-shell .btn-submit:hover {
background: linear-gradient(135deg, #764ba2, #f093fb, #667eea); box-shadow: 0 8px 25px rgba(102,126,234,.5); transform: translateY(-2px); }
.client-shell .btn-submit:active {
transform: translateY(0); }
.client-shell /* ===== 费用预估 ===== */
.cost-estimate {
margin-top: 16px; }
.client-shell .cost-estimate .card-header {
border-bottom: none; padding-bottom: 0; }
.client-shell .cost-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.client-shell .cost-card {
background: #fff; border-radius: 20px; padding: 28px 20px; text-align: center;
cursor: pointer; transition: all .35s cubic-bezier(.4,0,.2,1);
border: 2px solid rgba(102,126,234,.08);
position: relative;
box-shadow: 0 2px 12px rgba(102,126,234,.04);
}
.client-shell .cost-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(102,126,234,.15);
border-color: rgba(102,126,234,.25);
}
.client-shell .cost-card.active {
background: linear-gradient(135deg, rgba(102,126,234,.06), rgba(118,75,162,.06));
border-color: #667eea;
box-shadow: 0 6px 24px rgba(102,126,234,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
.client-shell .cost-badge {
position: absolute; top: -10px; right: 18px;
padding: 4px 14px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #fff;
line-height: 1.4;
}
.client-shell .cost-badge.fastest {
background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.client-shell .cost-badge.recommend {
background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 3px 10px rgba(102,126,234,.35); }
.client-shell .cost-badge.economy {
background: linear-gradient(135deg, #78909c, #546e7a); }
.client-shell .cost-days {
font-size: 26px; font-weight: 700; color: #333; margin-bottom: 14px; letter-spacing: 1px; }
.client-shell .cost-price {
font-size: 34px; font-weight: 800; color: #667eea; margin-bottom: 10px; line-height: 1.2; }
.client-shell .cost-price span {
font-size: 20px; font-weight: 600; }
.client-shell .cost-desc {
font-size: 13px; color: #999; }
.client-shell input[type=checkbox] {
width: 16px; height: 16px; accent-color: #667eea; cursor: pointer; }
.client-shell .col-checkbox {
width: 36px; }
.client-shell /* ===== PAGE: 订单列表 - Filter ===== */
.filter-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; align-items: center; }
.client-shell .filter-item {
display: flex; align-items: center; gap: 8px; }
.client-shell .filter-item.span2 {
grid-column: span 2; }
.client-shell .filter-label {
font-size: 13px; color: #595959; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.client-shell .filter-input, .client-shell .filter-select {
flex: 1; height: 40px; padding: 0 16px; border: 1.5px solid rgba(102,126,234,0.2); border-radius: 10px; font-size: 13px; color: #262626; background: rgba(255,255,255,0.95); outline: none; font-family: inherit; min-width: 0; transition: all .3s cubic-bezier(.4,0,.2,1); }
.client-shell .filter-input:focus, .client-shell .filter-select:focus {
border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
.client-shell .filter-input::placeholder {
color: #bfbfbf; }
.client-shell .date-range-wrap {
display: flex; align-items: center; gap: 6px; flex: 1; }
.client-shell .date-range-wrap .filter-input {
flex: 1; }
.client-shell .filter-actions {
display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(79, 70, 229, 0.1); flex-wrap: wrap; }
.client-shell /* Data table */
.table-wrap-simple {
overflow-x: auto; border: 1px solid rgba(102,126,234,0.15); border-radius: 16px; background: rgba(255,255,255,0.95); }
.client-shell .data-table {
width: 100%; border-collapse: collapse; font-size: 12px; }
.client-shell .data-table thead th {
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); padding: 14px 14px; text-align: left; font-weight: 600; color: #667eea; border-bottom: 1px solid rgba(102,126,234,0.15); white-space: nowrap; }
.client-shell .data-table tbody td {
padding: 14px 14px; border-bottom: 1px solid rgba(102,126,234,0.08); color: #262626; white-space: nowrap; }
.client-shell .data-table tbody tr:hover {
background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); }
.client-shell .data-table tbody tr:last-child td {
border-bottom: none; }
.client-shell .data-table .col-checkbox {
width: 40px; text-align: center; }
.client-shell .data-table .col-checkbox input {
cursor: pointer; }
.client-shell .empty-state {
text-align: center; padding: 60px 20px; color: #bfbfbf; }
.client-shell .empty-state .empty-icon {
font-size: 48px; margin-bottom: 12px; }
.client-shell .empty-state .empty-text {
font-size: 14px; }
.client-shell /* Quick Order Table */
.quick-table-wrap {
border: 1px solid rgba(102,126,234,0.15); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.95); }
.client-shell .quick-table {
width: 100%; border-collapse: collapse; font-size: 13px; }
.client-shell .quick-table thead th {
background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); padding: 14px 16px; text-align: left; font-weight: 600; color: #667eea; border-bottom: 1px solid rgba(102,126,234,0.15); }
.client-shell .quick-table tbody td {
padding: 16px 16px; border-bottom: 1px solid rgba(102,126,234,0.08); vertical-align: top; }
.client-shell .quick-table tbody tr:last-child td {
border-bottom: none; }
.client-shell .quick-table .select-wrap .form-select {
min-width: 120px; }
.client-shell .product-line {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.client-shell .product-line:last-child {
margin-bottom: 0; }
.client-shell /* Tags */
.tag {
display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.client-shell .tag-blue {
background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15)); color: #667eea; border: 1px solid rgba(102,126,234,0.3); }
.client-shell .tag-success {
background: linear-gradient(135deg, rgba(82,196,26,0.12), rgba(116,227,101,0.12)); color: #52c41a; border: 1px solid rgba(82,196,26,0.3); }
.client-shell .tag-warning {
background: linear-gradient(135deg, rgba(255,217,61,0.15), rgba(250,173,20,0.15)); color: #faad14; border: 1px solid rgba(250,173,20,0.3); }
.client-shell .tag-error {
background: linear-gradient(135deg, rgba(255,107,107,0.12), rgba(255,77,79,0.12)); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.3); }
.client-shell .tag-info {
background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15)); color: #667eea; border: 1px solid rgba(102,126,234,0.3); }
.client-shell .tag-default {
background: rgba(0,0,0,0.05); color: #8c8c8c; border: 1px solid rgba(0,0,0,0.1); }
.client-shell /* Pagination */
.pagination-bar {
display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-top: 1px solid rgba(102,126,234,0.1); font-size: 13px; color: #8c8c8c; }
.client-shell .pagination-info {
display: flex; align-items: center; gap: 10px; }
.client-shell .pagination-ctrl {
display: flex; align-items: center; gap: 6px; }
.client-shell .page-btn {
min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(102,126,234,0.2); background: rgba(255,255,255,0.95); border-radius: 10px; font-size: 13px; color: #595959; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); padding: 0 10px; font-weight: 500; }
.client-shell .page-btn:hover {
border-color: #667eea; color: #667eea; transform: translateY(-1px); }
.client-shell .page-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(102,126,234,0.35); }
.client-shell .page-btn:disabled {
opacity: .5; cursor: not-allowed; border-color: rgba(0,0,0,0.1); color: #bfbfbf; }
.client-shell .page-size-select {
height: 36px; padding: 0 12px; border: 1.5px solid rgba(102,126,234,0.2); border-radius: 10px; font-size: 13px; background: rgba(255,255,255,0.95); outline: none; transition: all .3s cubic-bezier(.4,0,.2,1); }
.client-shell .page-size-select:focus {
border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
.client-shell /* Scrollbar */
::-webkit-scrollbar {
width: 6px; height: 6px; }
.client-shell ::-webkit-scrollbar-track {
background: transparent; }
.client-shell ::-webkit-scrollbar-thumb {
background: #d9d9d9; border-radius: 3px; }
.client-shell ::-webkit-scrollbar-thumb:hover {
background: #bfbfbf; }
.client-shell /* ===== Modal ===== */
.modal-overlay {
display: none; position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
align-items: center; justify-content: center;
}
.client-shell .modal-overlay.show {
display: flex; }
.client-shell .modal-box {
background: #fff; border-radius: 16px; width: 600px; max-width: 90vw;
max-height: 85vh; overflow: hidden; display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
animation: modalIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.client-shell .modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 28px; border-bottom: 1px solid #f0f0f0;
}
.client-shell .modal-title {
font-size: 16px; font-weight: 600; color: #262626; }
.client-shell .modal-close {
width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 8px;
cursor: pointer; font-size: 18px; color: #8c8c8c; transition: all .2s;
display: flex; align-items: center; justify-content: center;
}
.client-shell .modal-close:hover {
background: #fff1f0; color: #ff4d4f; }
.client-shell .modal-body {
flex: 1; overflow-y: auto; padding: 28px; }
.client-shell .doc-preview {
text-align: center; }
.client-shell .doc-preview img {
max-width: 100%; border-radius: 8px; border: 1px solid #f0f0f0; }
.client-shell .doc-info {
margin-top: 20px; }
.client-shell .doc-info-row {
display: flex; margin-bottom: 12px; font-size: 13px; }
.client-shell .doc-info-label {
width: 100px; color: #8c8c8c; flex-shrink: 0; }
.client-shell .doc-info-value {
color: #262626; flex: 1; }
.client-shell .modal-footer {
display: flex; justify-content: flex-end; gap: 12px;
padding: 16px 28px; border-top: 1px solid #f0f0f0;
}
.client-shell .modal-box.modal-wide {
width: 920px; max-width: 92vw; }
.client-shell .modal-section-title {
font-size: 14px; font-weight: 600; color: #262626; margin-bottom: 12px; padding-left: 10px; border-left: 3px solid #667eea; }
.client-shell .page-header-actions {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.client-shell .page-header-actions .page-title {
margin: 0; }
.client-shell .page-action-group {
display: flex; gap: 10px; }
.client-shell .status-badge {
display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.client-shell .status-pending {
background: #fff7e6; color: #fa8c16; }
.client-shell .status-processing {
background: #e6f7ff; color: #1677ff; }
.client-shell .status-done {
background: #f6ffed; color: #52c41a; }
.client-shell .status-rejected {
background: #fff1f0; color: #ff4d4f; }
.client-shell .link-action {
color: #1677ff; font-size: 12px; cursor: pointer; margin-right: 8px; }
.client-shell .link-action:hover {
color: #0056b3; text-decoration: underline; }
.client-shell .form-section {
margin-bottom: 14px; }
.client-shell .form-section:last-child {
margin-bottom: 0; }
.client-shell .product-table-wrap {
overflow-x: auto; border: 1px solid #f0f0f0; border-radius: 10px; margin-bottom: 12px; }
.client-shell .product-table {
width: 100%; border-collapse: collapse; font-size: 12px; }
.client-shell .product-table thead th {
background: #f8f8ff; padding: 12px; text-align: left; font-weight: 600; color: #667eea; border-bottom: 1px solid #e8e8ff; }
.client-shell .product-table tbody td {
padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.client-shell .product-table tbody tr:last-child td {
border-bottom: none; }
.client-shell .product-table .cell-input {
width: 100%; min-width: 100px; height: 34px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 12px; outline: none; }
.client-shell .product-table .cell-input:focus {
border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
.client-shell .text-error {
color: #ff4d4f; font-size: 12px; margin-top: 4px; }
.client-shell .btn-text {
color: #1677ff; font-size: 13px; cursor: pointer; background: none; border: none; display: inline-flex; align-items: center; gap: 4px; }
.client-shell .btn-text:hover {
color: #0056b3; }
.client-shell .btn-ghost {
background: #fff; border: 1px solid #d9d9d9; color: #595959; padding: 8px 18px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all .2s; }
.client-shell .btn-ghost:hover {
border-color: #667eea; color: #667eea; }
</style>
</head>
<body class="text-gray-800 antialiased bg-gray-50">
<!-- Toast 提示 -->
<div id="toast" class="fixed top-24 left-1/2 -translate-x-1/2 z-[60] opacity-0 pointer-events-none transition-all duration-300 transform -translate-y-4">
<div class="bg-gray-900 text-white px-6 py-3 rounded-full shadow-2xl flex items-center space-x-2">
<i class="fas fa-info-circle text-brand-green"></i>
<span id="toastMessage">提示信息</span>
</div>
</div>
<!-- 工作台 -->
<section id="workbench" class="min-h-screen flex">
<aside id="dashSidebar" class="dash-sidebar">
<div class="dash-sidebar-brand">
<img src="assets/logo.png" alt="虫虫出海" style="width:161px;height:60px;object-fit:contain;">
</div>
<nav class="dash-nav">
<!-- 业务总览(工作台首页) -->
<a class="dash-nav-link active" data-view="Home" onclick="dashNavigate('Home', this)">
<i class="fas fa-gauge-high"></i><span data-i18n="m_overview">业务总览</span>
</a>
<!-- 头程物流 -->
<div class="dash-menu-group">
<div class="dash-menu-group-header" onclick="toggleDashGroup(this)">
<span class="g-icon"><i class="fas fa-ship"></i></span>
<span class="g-title" data-i18n="m_g_head">头程物流</span>
<span class="g-arrow"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="dash-menu-sub">
<a class="dash-nav-link sub" data-gicon="fa-file-invoice" data-gtitle="m_head_order" data-gsub="m_head_order_sub" onclick="dashNavigate('order', this)"><i class="fas fa-file-invoice"></i><span data-i18n="m_head_order">头程下单</span></a>
<a class="dash-nav-link sub" data-gicon="fa-file-import" data-gtitle="m_head_bulk" data-gsub="m_head_bulk_sub" onclick="dashNavigate('bulk', this)"><i class="fas fa-file-import"></i><span data-i18n="m_head_bulk">一键导入</span></a>
<a class="dash-nav-link sub" data-gicon="fa-bolt" data-gtitle="m_head_quick" data-gsub="m_head_quick_sub" onclick="dashNavigate('quick', this)"><i class="fas fa-bolt"></i><span data-i18n="m_head_quick">快速下单</span></a>
</div>
</div>
<!-- 出海下单 -->
<div class="dash-menu-group">
<div class="dash-menu-group-header" onclick="toggleDashGroup(this)">
<span class="g-icon"><i class="fas fa-plane-departure"></i></span>
<span class="g-title" data-i18n="m_g_sea">出海下单</span>
<span class="g-arrow"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="dash-menu-sub">
<a class="dash-nav-link sub" data-view="Procurement" onclick="dashNavigate('Procurement', this)"><i class="fas fa-shopping-cart"></i><span data-i18n="m_proc">海外采购</span></a>
<a class="dash-nav-link sub" data-view="Truck" onclick="dashNavigate('Truck', this)"><i class="fas fa-truck-moving"></i><span data-i18n="m_truck">美国本土卡</span></a>
<a class="dash-nav-link sub" data-view="Pallet" onclick="dashNavigate('Pallet', this)"><i class="fas fa-pallet"></i><span data-i18n="m_pallet">美本土散板</span></a>
</div>
</div>
<!-- 海外仓 -->
<div class="dash-menu-group">
<div class="dash-menu-group-header" onclick="toggleDashGroup(this)">
<span class="g-icon"><i class="fas fa-warehouse"></i></span>
<span class="g-title" data-i18n="m_g_overseas">海外仓</span>
<span class="g-arrow"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="dash-menu-sub">
<a class="dash-nav-link sub" data-gicon="fa-tags" data-gtitle="m_ov_label" data-gsub="m_ov_label_sub" onclick="dashNavigate('labeling', this)"><i class="fas fa-tags"></i><span data-i18n="m_ov_label">贴标申请</span></a>
<a class="dash-nav-link sub" data-gicon="fa-box-open" data-gtitle="m_ov_rin" data-gsub="m_ov_rin_sub" onclick="dashNavigate('label-return-in', this)"><i class="fas fa-box-open"></i><span data-i18n="m_ov_rin">退货入库</span></a>
<a class="dash-nav-link sub" data-gicon="fa-retweet" data-gtitle="m_ov_rswap" data-gsub="m_ov_rswap_sub" onclick="dashNavigate('label-return-swap', this)"><i class="fas fa-retweet"></i><span data-i18n="m_ov_rswap">退货换标</span></a>
<a class="dash-nav-link sub" data-gicon="fa-arrow-up-from-bracket" data-gtitle="m_ov_rout" data-gsub="m_ov_rout_sub" onclick="dashNavigate('label-return-out', this)"><i class="fas fa-arrow-up-from-bracket"></i><span data-i18n="m_ov_rout">退货出库</span></a>
</div>
</div>
<!-- 订单管理 -->
<div class="dash-menu-group">
<div class="dash-menu-group-header" onclick="toggleDashGroup(this)">
<span class="g-icon"><i class="fas fa-clipboard-list"></i></span>
<span class="g-title" data-i18n="m_g_order">订单管理</span>
<span class="g-arrow"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="dash-menu-sub">
<a class="dash-nav-link sub" data-gicon="fa-boxes-stacked" data-gtitle="m_inbound" data-gsub="m_inbound_sub" onclick="dashNavigate('inbound', this)"><i class="fas fa-boxes-stacked"></i><span data-i18n="m_inbound">入库订单列表</span></a>
<a class="dash-nav-link sub" data-gicon="fa-truck-ramp-box" data-gtitle="m_delivery" data-gsub="m_delivery_sub" onclick="dashNavigate('delivery', this)"><i class="fas fa-truck-ramp-box"></i><span data-i18n="m_delivery">派送订单列表</span></a>
</div>
</div>
<!-- 财务结算 -->
<div class="dash-menu-group">
<div class="dash-menu-group-header" onclick="toggleDashGroup(this)">
<span class="g-icon"><i class="fas fa-file-invoice-dollar"></i></span>
<span class="g-title" data-i18n="m_g_fin">财务结算</span>
<span class="g-arrow"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="dash-menu-sub">
<a class="dash-nav-link sub" data-gicon="fa-money-bill-wave" data-gtitle="m_bizfee" data-gsub="m_bizfee_sub" onclick="dashNavigate('biz-fee', this)"><i class="fas fa-money-bill-wave"></i><span data-i18n="m_bizfee">应付账单</span></a>
</div>
</div>
<div class="dash-nav-divider"></div>
<!-- 设置类 -->
<a class="dash-nav-link" data-gicon="fa-building" data-gtitle="m_company" data-gsub="m_company_sub" onclick="dashNavigate('company', this)">
<i class="fas fa-building"></i><span data-i18n="m_company">公司信息</span>
</a>
<a class="dash-nav-link" data-gicon="fa-user" data-gtitle="m_profile" data-gsub="m_profile_sub" onclick="dashNavigate('profile', this)">
<i class="fas fa-user"></i><span data-i18n="m_profile">我的信息</span>
</a>
<a class="dash-nav-link logout" onclick="doLogout()">
<i class="fas fa-sign-out-alt"></i><span data-i18n="dash_logout">退出登录</span>
</a>
</nav>
<div class="dash-sidebar-bottom">
<div id="langSwitcherDash" class="lang-switcher flex">
<button data-lang="zh">中</button>
<button data-lang="en">EN</button>
<button data-lang="es">🇲🇽</button>
</div>
</div>
</aside>
<!-- 移动端遮罩 -->
<div id="dashOverlay" class="dash-overlay" onclick="toggleDashSidebar()"></div>
<!-- 主内容区 -->
<div class="dash-main">
<header class="dash-topbar sticky top-0 z-30">
<div class="px-4 sm:px-5 lg:px-6 h-14 flex items-center justify-between">
<div class="flex items-center space-x-3">
<button class="dash-menu-btn" onclick="toggleDashSidebar()"><i class="fas fa-bars"></i></button>
<span class="text-sm text-gray-500" id="dashUserName">Hi, 客户</span>
</div>
<div class="flex items-center space-x-4">
<button class="dash-topup-btn" onclick="openTopup()"><i class="fas fa-wallet"></i><span data-i18n="dash_topup">充值</span></button>
<a href="index.html" class="text-sm text-gray-600 hover:text-brand-blue font-medium px-3 py-2 transition-colors" data-i18n="dash_home_link">返回官网</a>
</div>
</div>
</header>
<div class="flex flex-1 min-h-0">
<main class="flex-1 px-4 sm:px-5 lg:px-6 py-5 min-w-0">
<!-- 视图1:选择业务 -->
<div id="dashViewHome" class="dash-view">
<div class="mb-6">
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-3" data-i18n="dash_welcome_title">选择业务,快速下单</h1>
<p class="text-gray-500" data-i18n="dash_welcome_sub">请选择您需要的业务类型,填写信息后提交订单,我们将尽快为您安排。</p>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="dash-card p-6" onclick="openOrder('Procurement')">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-blue to-brand-blueDark flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-shopping-cart"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="dash_biz1_title">海外采购</h3>
<p class="text-sm text-gray-500 mb-6" data-i18n="dash_biz1_desc">采购代购 · 验货质检 · 集中发货</p>
<span class="inline-flex items-center text-brand-blue font-semibold text-sm">
<span data-i18n="dash_start">开始下单</span><i class="fas fa-arrow-right ml-2"></i>
</span>
</div>
<div class="dash-card p-6" onclick="openOrder('Truck')">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-green to-brand-greenDark flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-truck-moving"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="dash_biz2_title">美国本土卡</h3>
<p class="text-sm text-gray-500 mb-6" data-i18n="dash_biz2_desc">港口提柜 · 仓到仓 · 仓到门</p>
<span class="inline-flex items-center text-brand-green font-semibold text-sm">
<span data-i18n="dash_start">开始下单</span><i class="fas fa-arrow-right ml-2"></i>
</span>
</div>
<div class="dash-card p-6" onclick="openOrder('Pallet')">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-teal to-cyan-700 flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-pallet"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2" data-i18n="dash_biz3_title">美本土散板</h3>
<p class="text-sm text-gray-500 mb-6" data-i18n="dash_biz3_desc">拼车拼载 · 打盘服务 · 灵活派送</p>
<span class="inline-flex items-center text-brand-teal font-semibold text-sm">
<span data-i18n="dash_start">开始下单</span><i class="fas fa-arrow-right ml-2"></i>
</span>
</div>
</div>
</div>
<!-- 视图2:海外采购下单 -->
<div id="dashViewProcurement" class="dash-view hidden">
<button onclick="goHome()" class="inline-flex items-center text-gray-500 hover:text-brand-blue mb-6 text-sm font-medium">
<i class="fas fa-arrow-left mr-2"></i><span data-i18n="dash_back">返回业务选择</span>
</button>
<div class="bg-white rounded-2xl shadow-card border border-gray-100 p-6 lg:p-8 w-full">
<div class="flex items-center space-x-3 mb-8">
<div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-blue to-brand-blueDark flex items-center justify-center text-white text-lg"><i class="fas fa-shopping-cart"></i></div>
<h2 class="text-2xl font-bold text-gray-900" data-i18n="po_title">海外采购下单</h2>
</div>
<form class="order-form space-y-4" data-order="海外采购 Overseas Sourcing">
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="po_category">采购品类</span><span class="req">*</span></label>
<input type="text" name="采购品类" required class="dash-form-input" placeholder="如:家居用品 / 3C 配件" data-i18n-ph="po_category_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="po_spec">商品规格</span></label>
<input type="text" name="商品规格" class="dash-form-input" placeholder="如:尺寸 / 颜色 / 材质" data-i18n-ph="po_spec_ph">
</div>
</div>
<div>
<label class="dash-label"><span data-i18n="po_link">商品链接</span></label>
<input type="url" name="商品链接" class="dash-form-input" placeholder="https://" data-i18n-ph="po_link_ph">
</div>
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="po_qty">采购数量</span><span class="req">*</span></label>
<input type="number" min="1" name="采购数量" required class="dash-form-input" placeholder="0" data-i18n-ph="po_qty_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="po_price">预算单价</span></label>
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">$</span>
<input type="number" min="0" step="0.01" name="预算单价($)" class="dash-form-input pl-8" placeholder="0.00" data-i18n-ph="po_price_ph">
</div>
</div>
</div>
<div>
<label class="dash-label"><span data-i18n="po_address">收货地址</span></label>
<input type="text" name="收货地址" class="dash-form-input" placeholder="请输入收货地址" data-i18n-ph="po_address_ph">
</div>
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="po_contact">联系人</span><span class="req">*</span></label>
<input type="text" name="联系人" required class="dash-form-input" placeholder="请输入联系人姓名" data-i18n-ph="po_contact_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="po_phone">联系电话</span><span class="req">*</span></label>
<input type="tel" name="联系电话" required class="dash-form-input" placeholder="请输入联系电话" data-i18n-ph="po_phone_ph">
</div>
</div>
<div>
<label class="dash-label"><span data-i18n="po_note">订单备注</span></label>
<textarea name="订单备注" rows="3" class="dash-form-input" placeholder="其他需求说明(选填)" data-i18n-ph="po_note_ph"></textarea>
</div>
<div class="flex gap-3 pt-2">
<button type="submit" class="btn-primary text-white font-bold px-8 py-3.5 rounded-xl" data-i18n="dash_submit">提交订单</button>
<button type="button" onclick="goHome()" class="px-8 py-3.5 rounded-xl border border-gray-200 text-gray-600 font-medium hover:bg-gray-50" data-i18n="dash_cancel">取消</button>
</div>
</form>
</div>
</div>
<!-- 视图3:美国本土卡下单 -->
<div id="dashViewTruck" class="dash-view hidden">
<button onclick="goHome()" class="inline-flex items-center text-gray-500 hover:text-brand-blue mb-6 text-sm font-medium">
<i class="fas fa-arrow-left mr-2"></i><span data-i18n="dash_back">返回业务选择</span>
</button>
<div class="bg-white rounded-2xl shadow-card border border-gray-100 p-6 lg:p-8 w-full">
<div class="flex items-center space-x-3 mb-8">
<div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-green to-brand-greenDark flex items-center justify-center text-white text-lg"><i class="fas fa-truck-moving"></i></div>
<h2 class="text-2xl font-bold text-gray-900" data-i18n="tk_title">美国本土卡下单</h2>
</div>
<form class="order-form space-y-6" data-order="美国本土卡 US Trucking">
<div>
<label class="dash-label"><span data-i18n="ts_type">运输类型</span><span class="req">*</span></label>
<div class="flex flex-wrap gap-3">
<label><input type="radio" name="运输类型" value="港口提柜" class="seg-input" checked><span class="seg-pill"><i class="fas fa-anchor text-xs"></i><span data-i18n="ts_type_port">港口提柜</span></span></label>
<label><input type="radio" name="运输类型" value="仓到仓" class="seg-input"><span class="seg-pill"><i class="fas fa-warehouse text-xs"></i><span data-i18n="ts_type_w2w">仓到仓</span></span></label>
<label><input type="radio" name="运输类型" value="仓到门" class="seg-input"><span class="seg-pill"><i class="fas fa-door-open text-xs"></i><span data-i18n="ts_type_w2d">仓到门</span></span></label>
</div>
</div>
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="ts_origin">起运地</span><span class="req">*</span></label>
<input type="text" name="起运地" required class="dash-form-input" placeholder="城市 / 港口 / 州" data-i18n-ph="ts_origin_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="ts_dest">目的地</span><span class="req">*</span></label>
<input type="text" name="目的地" required class="dash-form-input" placeholder="城市 / 州" data-i18n-ph="ts_dest_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="ts_origin_addr">详细地址</span></label>
<input type="text" name="起运详细地址" class="dash-form-input" placeholder="街道 / 门牌" data-i18n-ph="ts_origin_addr_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="ts_dest_addr">详细地址 / 码头 / 仓号</span></label>
<input type="text" name="目的详细地址/码头/仓号" class="dash-form-input" placeholder="地址 / 码头 / 仓号" data-i18n-ph="ts_dest_addr_ph">
</div>
</div>
<div>
<label class="dash-label mb-3"><i class="fas fa-box mr-1 text-gray-400"></i><span data-i18n="cargo_title">货物信息</span></label>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_container">柜型</label>
<select name="柜型" class="dash-form-input">
<option value="20GP">20GP</option>
<option value="40GP">40GP</option>
<option value="40HQ">40HQ</option>
<option value="45HQ">45HQ</option>
<option value="LTL" data-i18n="cargo_container_ltl">散货/托盘</option>
</select>
</div>
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_pieces">件数</label>
<input type="number" min="0" name="件数" class="dash-form-input" placeholder="0">
</div>
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_weight">总重量 (kg)</label>
<input type="number" min="0" step="0.01" name="总重量(kg)" class="dash-form-input" placeholder="0">
</div>
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_volume">总体积 (m³)</label>
<input type="number" min="0" step="0.01" name="总体积(m³)" class="dash-form-input" placeholder="0">
</div>
</div>
</div>
<div>
<label class="dash-label mb-3"><i class="fas fa-user mr-1 text-gray-400"></i><span data-i18n="contact_title">联系人信息</span></label>
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="contact_name">联系人</span><span class="req">*</span></label>
<input type="text" name="联系人" required class="dash-form-input" placeholder="请输入联系人姓名" data-i18n-ph="contact_name_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="contact_phone">联系方式</span><span class="req">*</span></label>
<input type="text" name="联系方式" required class="dash-form-input" placeholder="电话 / 微信 / 邮箱" data-i18n-ph="contact_phone_ph">
</div>
</div>
</div>
<div class="max-w-xs">
<label class="dash-label"><span data-i18n="req_time">要求时间</span></label>
<input type="date" name="要求时间" class="dash-form-input">
</div>
<div class="flex gap-3 pt-2">
<button type="submit" class="btn-primary text-white font-bold px-8 py-3.5 rounded-xl" data-i18n="dash_submit">提交订单</button>
<button type="button" onclick="goHome()" class="px-8 py-3.5 rounded-xl border border-gray-200 text-gray-600 font-medium hover:bg-gray-50" data-i18n="dash_cancel">取消</button>
</div>
</form>
</div>
</div>
<!-- 视图4:美本土散板下单 -->
<div id="dashViewPallet" class="dash-view hidden">
<button onclick="goHome()" class="inline-flex items-center text-gray-500 hover:text-brand-blue mb-6 text-sm font-medium">
<i class="fas fa-arrow-left mr-2"></i><span data-i18n="dash_back">返回业务选择</span>
</button>
<div class="bg-white rounded-2xl shadow-card border border-gray-100 p-6 lg:p-8 w-full">
<div class="flex items-center space-x-3 mb-8">
<div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-teal to-cyan-700 flex items-center justify-center text-white text-lg"><i class="fas fa-pallet"></i></div>
<h2 class="text-2xl font-bold text-gray-900" data-i18n="pl_title">美本土散板下单</h2>
</div>
<form class="order-form space-y-6" data-order="美本土散板 US Pallet">
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="pl_method">运输方式</span><span class="req">*</span></label>
<div class="flex flex-wrap gap-3">
<label><input type="radio" name="运输方式" value="拼车" class="seg-input" checked><span class="seg-pill"><span data-i18n="pl_method_pool">拼车</span></span></label>
<label><input type="radio" name="运输方式" value="优先拼载" class="seg-input"><span class="seg-pill"><span data-i18n="pl_method_priority">优先拼载</span></span></label>
</div>
</div>
<div>
<label class="dash-label"><span data-i18n="pl_palletize">是否打盘</span><span class="req">*</span></label>
<div class="flex flex-wrap gap-3">
<label><input type="radio" name="是否打盘" value="是" class="seg-input" checked><span class="seg-pill"><span data-i18n="pl_yes">是</span></span></label>
<label><input type="radio" name="是否打盘" value="否" class="seg-input"><span class="seg-pill"><span data-i18n="pl_no">否</span></span></label>
</div>
</div>
</div>
<div>
<label class="dash-label"><span data-i18n="ts_type">运输类型</span><span class="req">*</span></label>
<div class="flex flex-wrap gap-3">
<label><input type="radio" name="运输类型" value="港口提柜" class="seg-input" checked><span class="seg-pill"><i class="fas fa-anchor text-xs"></i><span data-i18n="ts_type_port">港口提柜</span></span></label>
<label><input type="radio" name="运输类型" value="仓到仓" class="seg-input"><span class="seg-pill"><i class="fas fa-warehouse text-xs"></i><span data-i18n="ts_type_w2w">仓到仓</span></span></label>
<label><input type="radio" name="运输类型" value="仓到门" class="seg-input"><span class="seg-pill"><i class="fas fa-door-open text-xs"></i><span data-i18n="ts_type_w2d">仓到门</span></span></label>
</div>
</div>
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="ts_origin">起运地</span><span class="req">*</span></label>
<input type="text" name="起运地" required class="dash-form-input" placeholder="城市 / 港口 / 州" data-i18n-ph="ts_origin_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="ts_dest">目的地</span><span class="req">*</span></label>
<input type="text" name="目的地" required class="dash-form-input" placeholder="城市 / 州" data-i18n-ph="ts_dest_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="ts_origin_addr">详细地址</span></label>
<input type="text" name="起运详细地址" class="dash-form-input" placeholder="街道 / 门牌" data-i18n-ph="ts_origin_addr_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="ts_dest_addr">详细地址 / 码头 / 仓号</span></label>
<input type="text" name="目的详细地址/码头/仓号" class="dash-form-input" placeholder="地址 / 码头 / 仓号" data-i18n-ph="ts_dest_addr_ph">
</div>
</div>
<div>
<label class="dash-label mb-3"><i class="fas fa-box mr-1 text-gray-400"></i><span data-i18n="cargo_title">货物信息</span></label>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_container">柜型</label>
<select name="柜型" class="dash-form-input">
<option value="20GP">20GP</option>
<option value="40GP">40GP</option>
<option value="40HQ">40HQ</option>
<option value="45HQ">45HQ</option>
<option value="LTL" data-i18n="cargo_container_ltl">散货/托盘</option>
</select>
</div>
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_pieces">件数</label>
<input type="number" min="0" name="件数" class="dash-form-input" placeholder="0">
</div>
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_weight">总重量 (kg)</label>
<input type="number" min="0" step="0.01" name="总重量(kg)" class="dash-form-input" placeholder="0">
</div>
<div>
<label class="text-xs text-gray-500 mb-1 block" data-i18n="cargo_volume">总体积 (m³)</label>
<input type="number" min="0" step="0.01" name="总体积(m³)" class="dash-form-input" placeholder="0">
</div>
</div>
</div>
<div>
<label class="dash-label mb-3"><i class="fas fa-user mr-1 text-gray-400"></i><span data-i18n="contact_title">联系人信息</span></label>
<div class="grid sm:grid-cols-2 gap-5">
<div>
<label class="dash-label"><span data-i18n="contact_name">联系人</span><span class="req">*</span></label>
<input type="text" name="联系人" required class="dash-form-input" placeholder="请输入联系人姓名" data-i18n-ph="contact_name_ph">
</div>
<div>
<label class="dash-label"><span data-i18n="contact_phone">联系方式</span><span class="req">*</span></label>
<input type="text" name="联系方式" required class="dash-form-input" placeholder="电话 / 微信 / 邮箱" data-i18n-ph="contact_phone_ph">
</div>
</div>
</div>
<div class="max-w-xs">
<label class="dash-label"><span data-i18n="req_time">要求时间</span></label>
<input type="date" name="要求时间" class="dash-form-input">
</div>
<div class="flex gap-3 pt-2">
<button type="submit" class="btn-primary text-white font-bold px-8 py-3.5 rounded-xl" data-i18n="dash_submit">提交订单</button>
<button type="button" onclick="goHome()" class="px-8 py-3.5 rounded-xl border border-gray-200 text-gray-600 font-medium hover:bg-gray-50" data-i18n="dash_cancel">取消</button>
</div>
</form>
</div>
</div>
<!-- 视图5:我的订单 -->
<div id="dashViewOrders" class="dash-view hidden">
<div class="bg-white rounded-2xl shadow-card border border-gray-100 p-10 lg:p-14 max-w-3xl mx-auto text-center">
<div class="dash-empty">
<i class="fas fa-clipboard-list"></i>
<h3 class="text-xl font-bold text-gray-700 mb-2" data-i18n="dash_orders_empty">暂无订单</h3>
<p class="text-gray-500" data-i18n="dash_orders_hint">您还没有提交任何订单,前往「业务总览」选择服务开始下单吧。</p>
</div>
</div>
</div>
<!-- 视图6:柏悦客户端全部页面(已并入,统一作用域 .client-shell) -->
<div id="dashViewClient" class="dash-view hidden client-shell">
<div class="page-content active" id="page-order">
<div class="page-header">
<div>
<div class="page-title">头程下单</div>
<div class="page-subtitle">填写货物信息,创建新的头程运输订单</div>
</div>
</div>
<!-- SECTION 1: 基本信息 -->
<div class="card">
<div class="card-header" style="flex-direction:column;align-items:flex-start;">
<div class="card-title">客户下单</div>
<div class="card-subtitle">创建新订单</div>
</div>
<div class="card-body">
<div class="form-group">
<div class="form-label"><span class="required">*</span>取货方式</div>
<div class="form-content">
<div class="dest-type-tabs" id="pickup-tabs">
<button class="dest-tab active" onclick="setPickupTab(this,'express')">自送货-快递</button>
<button class="dest-tab" onclick="setPickupTab(this,'pickup')">我司提货(有取货费)</button>
<button class="dest-tab" onclick="setPickupTab(this,'truck')">自送货-卡车</button>
</div>
</div>
</div>
<!-- 自送货-快递 -->
<div class="dest-content active" id="pickup-express">
<div class="form-group">
<div class="form-label">预计送达时间</div>
<div class="form-content">
<input type="datetime-local" class="form-input" placeholder="请选择预计送达时间" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">快递单号</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入快递单号" style="min-width:300px;">
</div>
</div>
</div>
<!-- 我司提货 -->
<div class="dest-content" id="pickup-pickup">
<div class="form-group">
<div class="form-label"><span class="required">*</span>提货地址</div>
<div class="form-content">
<textarea class="form-input" placeholder="请输入提货详细地址" style="min-width:400px;height:80px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>提货时间</div>
<div class="form-content">
<input type="datetime-local" class="form-input" placeholder="请选择提货时间" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">联系人</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入联系人姓名" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">联系电话</div>
<div class="form-content">
<input type="tel" class="form-input" placeholder="请输入联系电话" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">提货备注</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="如:小区门禁、特殊要求等" style="min-width:300px;">
</div>
</div>
</div>
<!-- 自送货-卡车 -->
<div class="dest-content" id="pickup-truck">
<div class="form-group">
<div class="form-label"><span class="required">*</span>预计到达时间</div>
<div class="form-content">
<input type="datetime-local" class="form-input" placeholder="请选择预计到达时间" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">车牌号</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入车牌号" style="min-width:200px;">
</div>
</div>
<div class="form-group">
<div class="form-label">司机姓名</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入司机姓名" style="min-width:200px;">
</div>
</div>
<div class="form-group">
<div class="form-label">司机电话</div>
<div class="form-content">
<input type="tel" class="form-input" placeholder="请输入司机电话" style="min-width:200px;">
</div>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>收货仓</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="warehouse"> 义乌仓</label>
<label class="radio-label"><input type="radio" name="warehouse"> 深圳仓</label>
<label class="radio-label"><input type="radio" name="warehouse"> 青岛仓</label>
<label class="radio-label"><input type="radio" name="warehouse"> 上海仓</label>
<label class="radio-label"><input type="radio" name="warehouse"> 宁波仓</label>
<label class="radio-label"><input type="radio" name="warehouse"> 厦门仓</label>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>渠道</div>
<div class="form-content">
<div class="select-wrap">
<select class="form-select">
<option value="">请选择</option>
<option>美线普货专线</option>
<option>美线敏感货专线</option>
<option>美线快线</option>
<option>美线FBA直送</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>买单/退税</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="tax"> 买单</label>
<label class="radio-label"><input type="radio" name="tax"> 退税</label>
</div>
</div>
<div class="form-group">
<div class="form-label">是否整柜</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="container"> 整柜</label>
<label class="radio-label"><input type="radio" name="container"> 散货</label>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>是否商检</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="inspection"> 是</label>
<label class="radio-label"><input type="radio" name="inspection"> 否</label>
</div>
</div>
<div class="form-group">
<div class="form-label">船期</div>
<div class="form-content">
<div class="date-range">
<div class="input-wrap"><input type="date" class="form-input" placeholder="开船时间"></div>
<div class="input-wrap"><input type="date" class="form-input" placeholder="到港时间"></div>
</div>
</div>
</div>
<div class="form-group" style="align-items:flex-start;">
<div class="form-label" style="padding-top:6px;">备注NOTE</div>
<div class="form-content">
<textarea class="form-textarea" placeholder="请填写订单备注信息(选填)"></textarea>
</div>
</div>
</div>
</div>
<!-- SECTION 2: 目的地信息 -->
<div class="card">
<div class="card-header" style="flex-direction:column;align-items:flex-start;">
<div class="card-title">目的地信息</div>
</div>
<div class="card-body">
<div class="form-group">
<div class="form-label">目的仓类型</div>
<div class="form-content">
<div class="dest-type-tabs" id="dest-tabs">
<button class="dest-tab active" onclick="setDestTab(this,'fba')">FBA仓</button>
<button class="dest-tab" onclick="setDestTab(this,'overseas')">海外仓</button>
<button class="dest-tab" onclick="setDestTab(this,'private')">私人仓</button>
</div>
</div>
</div>
<!-- FBA仓 -->
<div class="dest-content active" id="dest-fba">
<div class="form-group"><div class="form-label"><span class="required">*</span>亚马逊仓代码</div><div class="form-content"><div class="input-wrap"><input type="text" class="form-input" placeholder="请输入亚马逊仓代码,如 ONT8、LAX9" style="min-width:280px;padding-right:48px;"><span style="position:absolute;right:10px;font-size:11px;color:#bfbfbf;">搜索</span></div></div></div>
<div class="form-group"><div class="form-label">收件人姓名</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件人姓名" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label">收件人电话</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件人电话" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label">收件地址</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件地址" style="min-width:400px;"></div></div>
<div class="form-group"><div class="form-label">货件编号</div><div class="form-content"><input type="text" class="form-input" placeholder="Shipment ID" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label">跟踪编号</div><div class="form-content"><input type="text" class="form-input" placeholder="Reference ID" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label">期望到达时间</div><div class="form-content"><input type="date" class="form-input" placeholder="请选择期望到达时间" style="min-width:200px;"></div></div>
<div class="form-group"><div class="form-label"></div><div class="form-content"><button class="btn btn-ghost" onclick="alert('查看最新报价')">💰 查看最新报价</button></div></div>
</div>
<!-- 海外仓 -->
<div class="dest-content" id="dest-overseas">
<div class="form-group"><div class="form-label"><span class="required">*</span>海外仓</div><div class="form-content"><div class="select-wrap"><select class="form-select" style="min-width:280px;"><option value="">请选择海外仓</option><option>美西仓 - 洛杉矶</option><option>美东仓 - 纽瓦克</option><option>美中仓 - 芝加哥</option><option>美南仓 - 达拉斯</option><option>萨凡纳仓</option></select></div></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件人姓名</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件人姓名" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件人电话</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件人电话" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件国家</div><div class="form-content"><div class="select-wrap"><select class="form-select" style="min-width:280px;"><option value="">请选择国家</option><option>美国</option><option>加拿大</option><option>墨西哥</option></select></div></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件地址</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件详细地址" style="min-width:400px;"></div></div>
<div class="form-group"><div class="form-label">邮编</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入邮编" style="min-width:200px;"></div></div>
<div class="form-group"><div class="form-label">期望到达时间</div><div class="form-content"><input type="date" class="form-input" placeholder="请选择期望到达时间" style="min-width:200px;"></div></div>
<div class="form-group"><div class="form-label"></div><div class="form-content"><button class="btn btn-ghost" onclick="alert('查看最新报价')">💰 查看最新报价</button></div></div>
</div>
<!-- 私人仓 -->
<div class="dest-content" id="dest-private">
<div class="form-group"><div class="form-label"><span class="required">*</span>收件人姓名</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件人姓名" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件人电话</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件人电话" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件国家</div><div class="form-content"><div class="select-wrap"><select class="form-select" style="min-width:280px;"><option value="">请选择国家</option><option>美国</option><option>加拿大</option><option>墨西哥</option></select></div></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>州/省</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入州/省" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>城市</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入城市" style="min-width:280px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>收件地址</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入收件详细地址" style="min-width:400px;"></div></div>
<div class="form-group"><div class="form-label"><span class="required">*</span>邮编</div><div class="form-content"><input type="text" class="form-input" placeholder="请输入邮编" style="min-width:200px;"></div></div>
<div class="form-group"><div class="form-label">期望到达时间</div><div class="form-content"><input type="date" class="form-input" placeholder="请选择期望到达时间" style="min-width:200px;"></div></div>
<div class="form-group"><div class="form-label"></div><div class="form-content"><button class="btn btn-ghost" onclick="alert('查看最新报价')">💰 查看最新报价</button></div></div>
</div>
</div>
</div>
<!-- SECTION 3: 货物明细 -->
<div class="card">
<div class="card-header"><div class="card-title">货物明细</div></div>
<div class="card-body">
<div class="table-toolbar">
<div class="table-actions">
<label class="upload-link"><input type="file" accept=".xlsx,.xls" style="display:none" onchange="alert('Excel已选择:'+this.files[0]?.name)"> 📤 上传 Excel</label>
<a class="download-link" href="#">⬇️ 下载模板</a>
</div>
<div class="table-actions">
<button class="btn-flat" onclick="addRow()"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>添加行</button>
<button class="btn-flat btn-flat-red" onclick="deleteSelectedRows()"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>删除所选行</button>
</div>
</div>
<div class="table-wrap">
<table class="goods-table" id="goods-table">
<thead>
<tr>
<th class="col-checkbox"><input type="checkbox" id="check-all-goods" onchange="toggleAllGoods(this)"></th>
<th>#</th>
<th style="min-width:130px">SKU NO. <span style="font-size:10px;color:#faad14;">FBA必填</span></th>
<th style="min-width:90px">中文品名</th>
<th style="min-width:60px">图片</th>
<th style="min-width:130px">英文品名</th>
<th style="min-width:100px">报关 HS CODE</th>
<th style="min-width:100px">清关 HS CODE</th>
<th>箱规长 cm</th><th>箱规宽 cm</th><th>箱规高 cm</th>
<th>每箱数量</th><th>箱数</th><th>总毛重</th><th>总体积</th><th>总数量</th><th>总净重</th>
<th style="min-width:110px">清关申报单价 USD</th>
<th style="min-width:110px">清关申报金额 USD</th>
<th style="min-width:100px">材质</th><th style="min-width:100px">用途</th>
<th style="min-width:80px">型号</th><th style="min-width:80px">品牌</th>
<th style="min-width:110px">产品规格 长×宽×高</th>
<th style="min-width:130px">货件编号 <span style="font-size:10px;color:#faad14;">必填</span></th>
<th style="min-width:130px">跟踪编号 <span style="font-size:10px;color:#faad14;">必填</span></th>
<th style="min-width:120px">UPC NO. <span style="font-size:10px;color:#faad14;">FBA必填</span></th>
<th style="min-width:100px">备注</th>
</tr>
</thead>
<tbody id="goods-tbody">
<tr class="empty-row" id="empty-row">
<td colspan="28" style="text-align:center;padding:40px;color:#bfbfbf;">
<div style="font-size:32px;margin-bottom:8px;">📦</div>
<div style="font-size:13px;">暂无货物明细,请点击「添加行」或上传 Excel</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top:12px;display:flex;align-items:center;gap:16px;font-size:12px;color:#8c8c8c;">
<span>💡 FBA货物仓储/散货/快递时,SKU NO.、UPC NO. 为必填项</span>
<span>•</span>
<span>亚马逊货物,货件编号和跟踪编号为必填项</span>
</div>
</div>
</div>
<!-- SECTION 4: 费用预估 -->
<div class="card cost-estimate">
<div class="card-header"><div class="card-title">费用预估</div></div>
<div class="card-body">
<div class="cost-cards" id="cost-cards">
<div class="cost-card" onclick="selectCost(this,0)">
<span class="cost-badge fastest">最快</span>
<div class="cost-days">10天</div>
<div class="cost-price"><span>¥</span> 3,310</div>
<div class="cost-desc">优先配送,时效保障</div>
</div>
<div class="cost-card active" onclick="selectCost(this,1)">
<span class="cost-badge recommend">推荐</span>
<div class="cost-days">13天</div>
<div class="cost-price"><span>¥</span> 2,990</div>
<div class="cost-desc">性价比之选</div>
</div>
<div class="cost-card" onclick="selectCost(this,2)">
<span class="cost-badge economy">经济</span>
<div class="cost-days">16天</div>
<div class="cost-price"><span>¥</span> 2,500</div>
<div class="cost-desc">经济实惠</div>
</div>
</div>
</div>
</div>
<div class="form-footer">
<div class="footer-tips"><span class="tip-icon">⚠️</span> 提交前请确认货物信息准确无误,提交后不可修改货物明细</div>
<div style="display:flex;gap:12px;align-items:center;justify-content:center;">
<button class="btn btn-default" onclick="alert('已重置表单')">重置</button>
<button class="btn-submit" onclick="submitOrder()">✈️ 提交订单</button>
</div>
</div>
</div>
<!-- ========== PAGE 2: 入库订单列表 ========== -->
<div class="page-content" id="page-inbound">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">入库订单列表</span></div>
<div class="page-title" style="margin-bottom:16px;">入库订单列表</div>
<div class="card">
<div class="card-body">
<div class="filter-grid">
<div class="filter-item"><span class="filter-label">订单号</span><input type="text" class="filter-input" placeholder="请输入订单号"></div>
<div class="filter-item"><span class="filter-label">收货仓</span><select class="filter-select"><option value="">全部</option><option>义乌仓</option><option>深圳仓</option><option>青岛仓</option><option>上海仓</option><option>宁波仓</option><option>厦门仓</option></select></div>
<div class="filter-item"><span class="filter-label">渠道名称</span><select class="filter-select"><option value="">全部</option><option>美线普货专线</option><option>美线敏感货专线</option><option>美线快线</option><option>美线FBA直送</option></select></div>
<div class="filter-item"><span class="filter-label">客户姓名/手机号</span><input type="text" class="filter-input" placeholder="请输入"></div>
<div class="filter-item span2"><span class="filter-label">创建时间</span><div class="date-range-wrap"><input type="date" class="filter-input"><span class="date-sep">~</span><input type="date" class="filter-input"></div></div>
<div class="filter-item"><span class="filter-label">付款状态</span><select class="filter-select"><option value="">全部</option><option>已付款</option><option>未付款</option><option>部分付款</option></select></div>
<div class="filter-item"><span class="filter-label">出货状态</span><select class="filter-select"><option value="">全部</option><option>已出货</option><option>未出货</option><option>出货中</option></select></div>
<div class="filter-item"><span class="filter-label">操作状态</span><select class="filter-select"><option value="">全部</option><option>待处理</option><option>处理中</option><option>已完成</option><option>已取消</option></select></div>
<div class="filter-item"><span class="filter-label">目的仓类型</span><select class="filter-select"><option value="">全部</option><option>FBA仓</option><option>海外仓</option><option>私人仓</option></select></div>
</div>
<div class="filter-actions">
<button class="btn-flat btn-flat-blue"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>下载唛头</button>
<button class="btn-flat btn-flat-blue"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>导出订单尾程信息</button>
<button class="btn-flat btn-flat-blue"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>查询</button>
<button class="btn-flat btn-flat-blue"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>重置查询条件</button>
<button class="btn-flat btn-flat-blue"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>重置所有状态</button>
</div>
</div>
</div>
<div class="card">
<div class="table-wrap-simple">
<table class="data-table" id="inbound-table">
<thead>
<tr>
<th class="col-checkbox"><input type="checkbox" onchange="toggleAllTable('inbound-table', this)"></th>
<th>单号</th><th>件数</th><th>重量(kg)</th><th>入方编码</th><th>渠道名</th><th>目的仓类型</th><th>客户</th><th>收货公司</th><th>规格型号</th><th>状态</th><th>总数量</th><th>总毛重</th><th>总净重</th><th>总体积</th><th>清关申报单价</th><th>清关申报金额</th><th>材质</th><th>用途</th><th>品牌</th><th>创建时间</th><th>跟踪编号</th><th>国际单号</th><th>操作人</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr class="empty-state"><td colspan="25"><div class="empty-icon">📦</div><div class="empty-text">暂无数据</div></td></tr>
</tbody>
</table>
</div>
<div class="pagination-bar">
<div class="pagination-info"><span>共 <strong>0</strong> 条</span><select class="page-size-select"><option>10 条/页</option><option>20 条/页</option><option>50 条/页</option><option>100 条/页</option></select></div>
<div class="pagination-ctrl"><button class="page-btn" disabled>上一页</button><button class="page-btn active">1</button><button class="page-btn" disabled>下一页</button></div>
</div>
</div>
</div>
<!-- ========== PAGE 3: 派送订单列表 ========== -->
<div class="page-content" id="page-delivery">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">派送订单列表</span></div>
<div class="page-title" style="margin-bottom:16px;">派送订单列表</div>
<div class="card">
<div class="card-body">
<div class="filter-grid">
<div class="filter-item"><span class="filter-label">订单号</span><input type="text" class="filter-input" placeholder="请输入订单号"></div>
<div class="filter-item"><span class="filter-label">派送仓</span><select class="filter-select"><option value="">全部</option><option>洛杉矶仓</option><option>纽约仓</option><option>芝加哥仓</option><option>达拉斯仓</option><option>萨凡纳仓</option></select></div>
<div class="filter-item"><span class="filter-label">渠道名称</span><select class="filter-select"><option value="">全部</option><option>美线普货专线</option><option>美线敏感货专线</option><option>美线快线</option><option>美线FBA直送</option></select></div>
<div class="filter-item"><span class="filter-label">客户姓名/手机号</span><input type="text" class="filter-input" placeholder="请输入"></div>
<div class="filter-item span2"><span class="filter-label">创建时间</span><div class="date-range-wrap"><input type="date" class="filter-input"><span class="date-sep">~</span><input type="date" class="filter-input"></div></div>
<div class="filter-item"><span class="filter-label">付款状态</span><select class="filter-select"><option value="">全部</option><option>已付款</option><option>未付款</option><option>部分付款</option></select></div>
<div class="filter-item"><span class="filter-label">派送状态</span><select class="filter-select"><option value="">全部</option><option>待派送</option><option>派送中</option><option>已派送</option><option>派送失败</option></select></div>
<div class="filter-item"><span class="filter-label">操作状态</span><select class="filter-select"><option value="">全部</option><option>待处理</option><option>处理中</option><option>已完成</option><option>已取消</option></select></div>
<div class="filter-item"><span class="filter-label">目的仓类型</span><select class="filter-select"><option value="">全部</option><option>FBA仓</option><option>海外仓</option><option>私人仓</option></select></div>
</div>
<div class="filter-actions">
<button class="btn-flat btn-flat-blue"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>查询</button>
<button class="btn-flat"><svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>重置</button>
</div>
</div>
</div>
<div class="card">
<div class="table-wrap-simple">
<table class="data-table" id="delivery-table">
<thead>
<tr>
<th class="col-checkbox"><input type="checkbox" onchange="toggleAllTable('delivery-table', this)"></th>
<th>单号</th><th>件数</th><th>重量(kg)</th><th>入方编码</th><th>渠道名</th><th>目的仓类型</th><th>客户</th><th>收货公司</th><th>规格型号</th><th>派送状态</th><th>总数量</th><th>总毛重</th><th>总净重</th><th>总体积</th><th>清关申报单价</th><th>清关申报金额</th><th>材质</th><th>用途</th><th>品牌</th><th>创建时间</th><th>跟踪编号</th><th>国际单号</th><th>操作人</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr class="empty-state"><td colspan="25"><div class="empty-icon">📦</div><div class="empty-text">暂无数据</div></td></tr>
</tbody>
</table>
</div>
<div class="pagination-bar">
<div class="pagination-info"><span>共 <strong>0</strong> 条</span><select class="page-size-select"><option>10 条/页</option><option>20 条/页</option><option>50 条/页</option><option>100 条/页</option></select></div>
<div class="pagination-ctrl"><button class="page-btn" disabled>上一页</button><button class="page-btn active">1</button><button class="page-btn" disabled>下一页</button></div>
</div>
</div>
</div>
<!-- ========== PAGE: 海外仓下单 ========== -->
<div class="page-content" id="page-labeling">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">海外仓下单</span></div>
<div class="page-title" style="margin-bottom:16px;">海外仓下单</div>
<!-- 订单信息 -->
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div class="info-section-title" style="margin-bottom:18px;">订单信息</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;">
<div class="form-group">
<div class="form-label"><span class="required">*</span>客户单号</div>
<div class="form-content"><input type="text" class="form-input" placeholder="请输入客户单号" style="width:100%;max-width:360px;"></div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>目的海外仓</div>
<div class="form-content">
<select class="form-input" style="width:100%;max-width:360px;">
<option value="">请选择</option>
<option>美西海外仓-ONT8</option>
<option>美西海外仓-LAX9</option>
<option>美东海外仓-ATL2</option>
<option>美东海外仓-EWR4</option>
<option>美中海外仓-MDW2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>贴标截止时间</div>
<div class="form-content"><input type="datetime-local" class="form-input" style="width:100%;max-width:360px;"></div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>联系人</div>
<div class="form-content"><input type="text" class="form-input" placeholder="请输入联系人" style="width:100%;max-width:360px;"></div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>联系电话</div>
<div class="form-content"><input type="text" class="form-input" placeholder="请输入联系电话" style="width:100%;max-width:360px;"></div>
</div>
<div class="form-group" style="grid-column:1 / -1;">
<div class="form-label">备注</div>
<div class="form-content"><textarea class="form-textarea" placeholder="请输入备注信息" style="max-width:760px;height:70px;"></textarea></div>
</div>
</div>
</div>
</div>
<!-- 面单贴标文件 -->
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div class="info-section-title" style="margin-bottom:18px;">面单贴标文件</div>
<div class="upload-zone" id="label-upload-zone" onclick="document.getElementById('label-file-input').click()">
<div class="upload-zone-icon">📎</div>
<div class="upload-zone-text">点击或拖拽图片到此处上传</div>
<div class="upload-zone-hint">支持 PNG / JPG / JPEG 格式,可上传多张</div>
<input type="file" id="label-file-input" accept="image/*" multiple style="display:none;" onchange="handleLabelFiles(this.files)">
</div>
<div class="upload-preview" id="label-preview"></div>
</div>
</div>
<!-- 货物明细 -->
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
<div class="info-section-title" style="margin:0;">货物明细</div>
<div style="display:flex;gap:10px;">
<button class="btn btn-primary" onclick="addLabelingRow()" style="font-size:12px;padding:6px 16px;">+ 添加行</button>
<button class="btn btn-default" onclick="clearLabelingRows()" style="font-size:12px;padding:6px 16px;">清空</button>
</div>
</div>
<div class="table-wrap-simple">
<table class="data-table" id="labeling-table">
<thead>
<tr>
<th class="col-checkbox"><input type="checkbox" onchange="toggleAllTable('labeling-table', this)"></th>
<th>商品SKU<span style="color:#ff4d4f;">*</span></th>
<th>商品图片</th>
<th>中文品名<span style="color:#ff4d4f;">*</span></th>
<th>总箱数<span style="color:#ff4d4f;">*</span></th>
<th>通知移仓件数(箱数)<span style="color:#ff4d4f;">*</span></th>
<th>货件编号<span style="color:#ff4d4f;">*</span></th>
<th>追踪编码</th>
<th>换标新SKU<span style="color:#ff4d4f;">*</span></th>
<th>贴标要求</th>
<th>上传换标文件</th>
<th>操作</th>
</tr>
</thead>
<tbody id="labeling-tbody">
<tr class="empty-state"><td colspan="12"><div class="empty-icon">📦</div><div class="empty-text">暂无货物明细,请点击「添加行」</div></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 提交按钮 -->
<div class="form-footer">
<div class="footer-tips"><span class="tip-icon">⚠️</span> 提交后海外仓将按要求进行换标贴标,请确认货物信息准确</div>
<div style="display:flex;gap:12px;align-items:center;justify-content:center;">
<button class="btn btn-default" onclick="alert('已重置')">重置</button>
<button class="btn-submit" onclick="submitLabeling()">🏷️ 提交贴标申请</button>
</div>
</div>
</div>
<!-- ========== PAGE: 退货入库 ========== -->
<div class="page-content" id="page-label-return-in">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">退货入库</span></div>
<div class="page-header-actions">
<div class="page-title">退货入库</div>
<div class="page-action-group">
<button class="btn btn-primary" onclick="openReturnInModal()">+ 新建</button>
<button class="btn btn-default" onclick="alert('导出Excel')">导出Excel</button>
</div>
</div>
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div class="filter-grid" style="grid-template-columns:200px 1fr 160px 120px 80px 80px;">
<div class="filter-item">
<select class="filter-select"><option value="">全部FBA仓库</option><option>FBA ONT8</option><option>FBA CLT2</option><option>FBA MEM1</option><option>DE Frankfurt</option><option>FBA IND9</option></select>
</div>
<div class="filter-item">
<input type="text" class="filter-input" placeholder="退货单号">
</div>
<div class="filter-item">
<select class="filter-select"><option value="">全部状态</option><option>待接收</option><option>已接收</option></select>
</div>
<button class="btn-flat btn-flat-blue" onclick="alert('查询')">查询</button>
<button class="btn-flat" onclick="alert('重置')">重置</button>
</div>
</div>
</div>
<div class="card">
<div class="table-wrap-simple">
<table class="data-table">
<thead>
<tr>
<th>退货单号</th><th>FBA仓库</th><th>商品SKU</th><th>中文品名</th><th>箱数</th><th>退货原因</th><th>状态</th><th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>RTN20260701001</td><td>FBA ONT8</td><td>SKU-A1001</td><td>蓝牙耳机套件</td><td>6</td><td>客户退货-质量问题</td>
<td><span class="status-badge status-pending">待接收</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTN20260701002</td><td>FBA CLT2</td><td>SKU-B2002</td><td>手机保护壳</td><td>10</td><td>客户退货-七天无理由</td>
<td><span class="status-badge status-processing">已接收</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTN20260701003</td><td>FBA MEM1</td><td>SKU-C3003</td><td>充电器套装</td><td>14</td><td>亚马逊移除-不可售</td>
<td><span class="status-badge status-pending">待接收</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTN20260701004</td><td>DE Frankfurt</td><td>SKU-D4004</td><td>LED台灯</td><td>8</td><td>客户退货-尺寸不符</td>
<td><span class="status-badge status-processing">已接收</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTN20260701005</td><td>FBA IND9</td><td>SKU-E5005</td><td>收纳盒组合</td><td>16</td><td>亚马逊移除-可售</td>
<td><span class="status-badge status-pending">待接收</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-bar">
<div class="pagination-info"><span>共 <strong>5</strong> 条</span></div>
<div class="pagination-ctrl"><button class="page-btn" disabled>上一页</button><button class="page-btn active">1</button><button class="page-btn" disabled>下一页</button></div>
</div>
</div>
</div>
<!-- ========== PAGE: 退货换标 ========== -->
<div class="page-content" id="page-label-return-swap">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">退货换标</span></div>
<div class="page-header-actions">
<div class="page-title">退货换标</div>
<div class="page-action-group">
<button class="btn btn-primary" onclick="alert('新建换标单')">+ 新建换标单</button>
<button class="btn btn-default" onclick="alert('导出Excel')">导出Excel</button>
</div>
</div>
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div class="filter-grid" style="grid-template-columns:200px 1fr 160px 120px 80px 80px;">
<div class="filter-item">
<select class="filter-select"><option value="">全部FBA仓库</option><option>FBA ONT8</option><option>FBA CLT2</option><option>FBA MEM1</option><option>DE Frankfurt</option><option>FBA IND9</option></select>
</div>
<div class="filter-item">
<input type="text" class="filter-input" placeholder="商品SKU">
</div>
<div class="filter-item">
<select class="filter-select"><option value="">全部状态</option><option>待换标</option><option>换标中</option><option>已完成</option></select>
</div>
<button class="btn-flat btn-flat-blue" onclick="alert('查询')">查询</button>
<button class="btn-flat" onclick="alert('重置')">重置</button>
</div>
</div>
</div>
<div class="card">
<div class="table-wrap-simple">
<table class="data-table">
<thead>
<tr>
<th>换标单号</th><th>FBA仓库</th><th>商品SKU</th><th>中文品名</th><th>箱数</th><th>贴标要求</th><th>状态</th><th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>RRL20260710001</td><td>FBA ONT8</td><td>SKU-A1001</td><td>蓝牙耳机套件</td><td>6</td><td>全覆盖换标</td>
<td><span class="status-badge status-pending">待换标</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RRL20260711002</td><td>FBA CLT2</td><td>SKU-B2002</td><td>手机保护壳</td><td>10</td><td>加贴新标</td>
<td><span class="status-badge status-processing">换标中</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RRL20260712003</td><td>FBA MEM1</td><td>SKU-C3003</td><td>充电器套装</td><td>14</td><td>移除原标+换标</td>
<td><span class="status-badge status-done">已完成</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RRL20260713004</td><td>DE Frankfurt</td><td>SKU-D4004</td><td>LED台灯</td><td>8</td><td>全覆盖换标</td>
<td><span class="status-badge status-pending">待换标</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RRL20260714005</td><td>FBA IND9</td><td>SKU-E5005</td><td>收纳盒组合</td><td>16</td><td>加贴新标</td>
<td><span class="status-badge status-processing">换标中</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-bar">
<div class="pagination-info"><span>共 <strong>5</strong> 条</span></div>
<div class="pagination-ctrl"><button class="page-btn" disabled>上一页</button><button class="page-btn active">1</button><button class="page-btn" disabled>下一页</button></div>
</div>
</div>
</div>
<!-- ========== PAGE: 退货出库 ========== -->
<div class="page-content" id="page-label-return-out">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">退货出库</span></div>
<div class="page-header-actions">
<div class="page-title">退货出库</div>
<div class="page-action-group">
<button class="btn btn-primary" onclick="alert('新建出库单')">+ 新建出库单</button>
<button class="btn btn-default" onclick="alert('导出Excel')">导出Excel</button>
</div>
</div>
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div class="filter-grid" style="grid-template-columns:200px 1fr 160px 120px 80px 80px;">
<div class="filter-item">
<select class="filter-select"><option value="">全部FBA仓库</option><option>FBA ONT8</option><option>FBA CLT2</option><option>FBA MEM1</option><option>DE Frankfurt</option><option>FBA IND9</option></select>
</div>
<div class="filter-item">
<input type="text" class="filter-input" placeholder="出库单号">
</div>
<div class="filter-item">
<select class="filter-select"><option value="">全部状态</option><option>待出库</option><option>已出库</option></select>
</div>
<button class="btn-flat btn-flat-blue" onclick="alert('查询')">查询</button>
<button class="btn-flat" onclick="alert('重置')">重置</button>
</div>
</div>
</div>
<div class="card">
<div class="table-wrap-simple">
<table class="data-table">
<thead>
<tr>
<th>出库单号</th><th>FBA仓库</th><th>目的仓</th><th>商品SKU</th><th>中文品名</th><th>箱数</th><th>状态</th><th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>RTO20260715001</td><td>FBA ONT8</td><td>FBA LAX9</td><td>SKU-A1001</td><td>蓝牙耳机套件</td><td>6</td>
<td><span class="status-badge status-pending">待出库</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTO20260716002</td><td>FBA CLT2</td><td>FBA SBD1</td><td>SKU-B2002</td><td>手机保护壳</td><td>10</td>
<td><span class="status-badge status-done">已出库</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTO20260717003</td><td>FBA MEM1</td><td>FBA FTW1</td><td>SKU-C3003</td><td>充电器套装</td><td>14</td>
<td><span class="status-badge status-pending">待出库</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTO20260718004</td><td>DE Frankfurt</td><td>DE Munich</td><td>SKU-D4004</td><td>LED台灯</td><td>8</td>
<td><span class="status-badge status-done">已出库</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
<tr>
<td>RTO20260719005</td><td>FBA IND9</td><td>FBA LAS1</td><td>SKU-E5005</td><td>收纳盒组合</td><td>16</td>
<td><span class="status-badge status-pending">待出库</span></td>
<td><span class="link-action">查看</span><span class="link-action">编辑</span></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-bar">
<div class="pagination-info"><span>共 <strong>5</strong> 条</span></div>
<div class="pagination-ctrl"><button class="page-btn" disabled>上一页</button><button class="page-btn active">1</button><button class="page-btn" disabled>下一页</button></div>
</div>
</div>
</div>
<!-- PAGE: 一键导入(FBA批量下单) -->
<div class="page-content" id="page-bulk">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="sep-item">美线头程下单</span><span class="sep">/</span><span class="current">一键导入(FBA批量下单)</span></div>
<div class="page-title" style="margin-bottom:16px;">一键导入(FBA批量下单)</div>
<!-- 基本信息 -->
<div class="card" style="margin-bottom:12px;">
<div class="card-body">
<div class="form-group">
<div class="form-label"><span class="required">*</span>取货方式</div>
<div class="form-content">
<div class="dest-type-tabs" id="pickup-tabs-bulk">
<button class="dest-tab active" onclick="setPickupTabBulk(this,'express')">自送货-快递</button>
<button class="dest-tab" onclick="setPickupTabBulk(this,'pickup')">我司提货(有取货费)</button>
<button class="dest-tab" onclick="setPickupTabBulk(this,'truck')">自送货-卡车</button>
</div>
</div>
</div>
<!-- 自送货-快递 -->
<div class="dest-content-bulk active" id="pickup-bulk-express">
<div class="form-group">
<div class="form-label">预计送达时间</div>
<div class="form-content">
<input type="datetime-local" class="form-input" placeholder="请选择预计送达时间" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">快递单号</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入快递单号" style="min-width:300px;">
</div>
</div>
</div>
<!-- 我司提货 -->
<div class="dest-content-bulk" id="pickup-bulk-pickup">
<div class="form-group">
<div class="form-label"><span class="required">*</span>提货地址</div>
<div class="form-content">
<textarea class="form-input" placeholder="请输入提货详细地址" style="min-width:400px;height:80px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>提货时间</div>
<div class="form-content">
<input type="datetime-local" class="form-input" placeholder="请选择提货时间" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">联系人</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入联系人姓名" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">联系电话</div>
<div class="form-content">
<input type="tel" class="form-input" placeholder="请输入联系电话" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">提货备注</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="如:小区门禁、特殊要求等" style="min-width:300px;">
</div>
</div>
</div>
<!-- 自送货-卡车 -->
<div class="dest-content-bulk" id="pickup-bulk-truck">
<div class="form-group">
<div class="form-label"><span class="required">*</span>预计到达时间</div>
<div class="form-content">
<input type="datetime-local" class="form-input" placeholder="请选择预计到达时间" style="min-width:280px;">
</div>
</div>
<div class="form-group">
<div class="form-label">车牌号</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入车牌号" style="min-width:200px;">
</div>
</div>
<div class="form-group">
<div class="form-label">司机姓名</div>
<div class="form-content">
<input type="text" class="form-input" placeholder="请输入司机姓名" style="min-width:200px;">
</div>
</div>
<div class="form-group">
<div class="form-label">司机电话</div>
<div class="form-content">
<input type="tel" class="form-input" placeholder="请输入司机电话" style="min-width:200px;">
</div>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>收货仓</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="bulk-wh"> 义乌仓</label>
<label class="radio-label"><input type="radio" name="bulk-wh"> 深圳仓</label>
<label class="radio-label"><input type="radio" name="bulk-wh"> 青岛仓</label>
<label class="radio-label"><input type="radio" name="bulk-wh"> 上海仓</label>
<label class="radio-label"><input type="radio" name="bulk-wh"> 宁波仓</label>
<label class="radio-label"><input type="radio" name="bulk-wh"> 厦门仓</label>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>渠道</div>
<div class="form-content">
<select class="form-select" style="width:220px;">
<option value="">请选择渠道</option>
<option>美线普货专线</option>
<option>美线敏感货专线</option>
<option>美线快线</option>
<option>美线FBA直送</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>买单/退税</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="bulk-tax"> 买单</label>
<label class="radio-label"><input type="radio" name="bulk-tax"> 退税</label>
</div>
</div>
<div class="form-group">
<div class="form-label">是否整柜</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="bulk-container"> 整柜</label>
<label class="radio-label"><input type="radio" name="bulk-container"> 散货</label>
</div>
</div>
<div class="form-group">
<div class="form-label"><span class="required">*</span>是否商检</div>
<div class="form-content">
<label class="radio-label"><input type="radio" name="bulk-inspect"> 是</label>
<label class="radio-label"><input type="radio" name="bulk-inspect"> 否</label>
</div>
</div>
<div class="form-group">
<div class="form-label">船期</div>
<div class="form-content">
<div class="date-range">
<input type="date" class="form-input" style="width:160px;">
<span class="date-sep">~</span>
<input type="date" class="form-input" style="width:160px;">
</div>
</div>
</div>
<div class="form-group" style="align-items:flex-start;">
<div class="form-label" style="padding-top:6px;">备注NOTE</div>
<div class="form-content">
<textarea class="form-textarea" placeholder="请填写订单备注信息(选填)"></textarea>
</div>
</div>
</div>
</div>
<!-- 货物明细表格 -->
<div class="card" style="margin-bottom:12px;">
<div style="padding:16px 16px 12px;border-bottom:1px solid #f0f0f0;">
<div style="font-size:14px;font-weight:500;color:#262626;margin-bottom:12px;">货物明细</div>
<!-- 上传/下载按钮行 -->
<div style="display:flex;gap:10px;align-items:center;margin-bottom:10px;">
<label class="upload-link" style="cursor:pointer;">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
上传 Excel<input type="file" accept=".xlsx,.xls" style="display:none;" onchange="alert('已选择:'+(this.files[0]?.name||''))">
</label>
<a class="download-link" href="#">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
下载模板
</a>
</div>
</div>
<div style="overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:12px;" id="bulk-table">
<thead>
<tr style="background:#fafafa;">
<th style="width:36px;padding:10px 8px;border-bottom:1px solid #f0f0f0;text-align:center;"><input type="checkbox" id="bulk-check-all" onchange="toggleBulkAll(this)"></th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">序号</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">目的仓类型</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">亚马逊仓代码</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">货件编号(ShipmentID)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">跟踪编号(ReferenceID)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">收件人</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">收件地址</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">产品英文名称</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">FNSKU</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">ASIN</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">单品申报价值(USD)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">总件数</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">箱数</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">每箱件数</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">长(cm)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">宽(cm)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">高(cm)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">毛重(kg)</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">是否带电</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">是否含液体</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">是否纯电</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">海关品名</th>
<th style="padding:10px 8px;border-bottom:1px solid #f0f0f0;white-space:nowrap;font-weight:500;color:#8c8c8c;text-align:left;">备注</th>
</tr>
</thead>
<tbody id="bulk-tbody">
<tr id="bulk-empty-row">
<td colspan="24" style="padding:40px 0;text-align:center;color:#bfbfbf;">
<div style="font-size:28px;margin-bottom:8px;">📦</div>
<div style="font-size:13px;">暂无数据,请点击「添加行」或导入 Excel</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 添加行/删除行按钮 — 表格下方 -->
<div style="padding:12px 16px;border-top:1px solid #f0f0f0;display:flex;gap:10px;align-items:center;">
<button class="btn-outline-blue" onclick="addBulkRow()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
添加行
</button>
<button class="btn-outline-red" onclick="deleteBulkRows()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
删除行
</button>
</div>
</div>
<!-- 底部按钮 -->
<div class="form-footer">
<div class="footer-tips"><span class="tip-icon">⚠</span>提交前请确认货物明细信息无误</div>
<div style="display:flex;gap:8px;">
<button class="btn btn-default" onclick="alert('已保存草稿')">保存草稿</button>
<button class="btn btn-primary" onclick="alert('提交成功!')">提交订单</button>
</div>
</div>
</div>
<!-- PAGE: 快速下单 -->
<div class="page-content" id="page-quick">
<div class="page-header">
<h1 class="page-title">快速下单</h1>
</div>
<div class="card">
<div class="card-header" style="flex-direction:column;align-items:flex-start;border-bottom:1px solid #f0f0f0;">
<div class="card-title">客户下单</div>
<div class="card-subtitle" style="line-height:1.6;">
快速下单:只需输入来源目的仓产品SKU/箱数,即可下单<br>
每行数据提交成功后给客户生成一个订单,支持一行订单多个产品SKU情况
</div>
</div>
<div class="card-body">
<div class="quick-table-wrap">
<table class="quick-table">
<thead>
<tr>
<th style="width:140px;">选择渠道</th>
<th style="width:160px;">目的仓</th>
<th style="width:160px;">操作</th>
<th>产品信息:产品SKU/箱数</th>
</tr>
</thead>
<tbody id="quick-rows">
<tr class="quick-row">
<td>
<div class="select-wrap">
<select class="form-select">
<option value="">请选择</option>
<option>美线普货专线</option>
<option>美线敏感货专线</option>
<option>美线快线</option>
<option>美线FBA直送</option>
</select>
</div>
</td>
<td>
<label class="radio-label" style="display:block;margin-bottom:4px;"><input type="radio" name="dest1"> FBA</label>
<label class="radio-label" style="display:block;margin-bottom:4px;"><input type="radio" name="dest1"> 海外仓</label>
<label class="radio-label" style="display:block;"><input type="radio" name="dest1"> 私人仓</label>
</td>
<td>
<a href="javascript:void(0)" onclick="addProduct(this)" style="color:#1677ff;font-size:13px;">+ 添加产品</a>
<a href="javascript:void(0)" onclick="delQuickRow(this)" style="color:#ff4d4f;font-size:13px;margin-left:10px;">- 删除本行</a>
</td>
<td>
<div class="product-line">
<input type="text" class="form-input" placeholder="产品SKU" style="width:140px;">
<input type="number" class="form-input" value="0" style="width:80px;text-align:center;">
<a href="javascript:void(0)" onclick="delProduct(this)" style="color:#ff4d4f;font-size:13px;">- 删除此产品</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top:12px;">
<button class="btn btn-ghost" onclick="addQuickRow()" style="font-size:13px;">+ 新增一行</button>
</div>
<div style="text-align:center;margin-top:24px;">
<button class="btn btn-primary" onclick="submitQuickOrder()">提交订单</button>
</div>
</div>
</div>
</div>
<!-- ========== PAGE: 应付账单 ========== -->
<div class="page-content" id="page-biz-fee">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">账单结果</span></div>
<div class="page-title" style="margin-bottom:16px;">账单列表</div>
<div class="card">
<div class="table-wrap-simple" style="overflow-x:auto;">
<table class="data-table" id="finance-table">
<thead>
<tr>
<th>#</th>
<th>操作</th>
<th>状态</th>
<th>单据状态</th>
<th>账单编号</th>
<th>创建日期</th>
<th>币种</th>
<th>汇率</th>
<th>开票日期</th>
<th>最近一次收款日期</th>
<th>账期(天)</th>
<th>应付金额</th>
<th>已付金额</th>
<th>备注</th>
<th>总金额</th>
<th>退票结果日</th>
<th>退款到期日</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="#" class="link-primary" onclick="viewBillDetail('Y2407069');return false;">查看明细</a></td>
<td><span class="tag tag-success">已确认</span></td>
<td><span class="tag tag-success">已确认</span></td>
<td>Y2407069</td>
<td>2024-07-04 13:53:13</td>
<td>CNY</td>
<td>7.26</td>
<td>—</td>
<td>2024-08-03</td>
<td>30</td>
<td>10160.5</td>
<td>0</td>
<td>0</td>
<td>2024-08-03</td>
<td>2024-07-04</td>
</tr>
<tr>
<td>2</td>
<td><a href="#" class="link-primary" onclick="viewBillDetail('Y2506061');return false;">查看明细</a></td>
<td><span class="tag tag-error">已作废</span></td>
<td><span class="tag tag-error">已作废</span></td>
<td>Y2506061</td>
<td>2025-05-02 09:09:57</td>
<td>CNY</td>
<td>7.11</td>
<td>—</td>
<td>2025-06-01</td>
<td>30</td>
<td>267769.75</td>
<td>0</td>
<td>0</td>
<td>2025-06-08</td>
<td>2025-05-09</td>
</tr>
<tr>
<td>3</td>
<td><a href="#" class="link-primary" onclick="viewBillDetail('Y2508075');return false;">查看明细</a></td>
<td><span class="tag tag-error">已作废</span></td>
<td><span class="tag tag-error">已作废</span></td>
<td>Y2508075</td>
<td>2025-05-09 09:50:08</td>
<td>CNY</td>
<td>7.11</td>
<td>—</td>
<td>—</td>
<td>30</td>
<td>913.6</td>
<td>0</td>
<td>0</td>
<td>2025-06-08</td>
<td>2025-05-09</td>
</tr>
<tr>
<td>4</td>
<td><a href="#" class="link-primary" onclick="viewBillDetail('Y2508047');return false;">查看明细</a></td>
<td><span class="tag tag-success">已确认</span></td>
<td><span class="tag tag-success">已确认</span></td>
<td>Y2508047</td>
<td>2025-05-05 16:13:05</td>
<td>CNY</td>
<td>7.22</td>
<td>—</td>
<td>—</td>
<td>30</td>
<td>202858</td>
<td>0</td>
<td>0</td>
<td>2025-06-05</td>
<td>2025-05-05</td>
</tr>
<tr>
<td>5</td>
<td><a href="#" class="link-primary" onclick="viewBillDetail('Y2507049');return false;">查看明细</a></td>
<td><span class="tag tag-success">已确认</span></td>
<td><span class="tag tag-success">已确认</span></td>
<td>Y2507049</td>
<td>2025-07-08 10:50:18</td>
<td>CNY</td>
<td>7.2</td>
<td>—</td>
<td>—</td>
<td>30</td>
<td>202881.6</td>
<td>0</td>
<td>0</td>
<td>2025-08-07</td>
<td>2025-07-08</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-bar">
<div class="pagination-info"><span>共 <strong>11</strong> 条</span></div>
<div class="pagination-ctrl">
<button class="page-btn" disabled>上一页</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">4</button>
<button class="page-btn">下一页</button>
</div>
</div>
</div>
</div>
<!-- ========== PAGE: 账单明细 ========== -->
<div class="page-content" id="page-bill-detail">
<div class="breadcrumb"><a href="#" onclick="switchPage('biz-fee');return false;">首页</a><span class="sep">/</span><a href="#" onclick="switchPage('biz-fee');return false;">应付账单</a><span class="sep">/</span><span class="current">账单明细</span></div>
<div class="page-title" style="margin-bottom:16px;">账单明细 <span id="detail-bill-no" style="font-size:14px;color:#8c8c8c;font-weight:400;margin-left:8px;"></span></div>
<div class="card">
<div class="table-wrap-simple" style="overflow-x:auto;">
<table class="data-table" id="bill-detail-table">
<thead>
<tr>
<th>#</th>
<th>入仓单号</th>
<th>SKU</th>
<th>渠道</th>
<th>FBA仓</th>
<th>FBA编号</th>
<th>箱数</th>
<th>毛重</th>
<th>体积</th>
<th>费用类型</th>
<th>币种</th>
<th>账单金额</th>
<th>入仓时间</th>
<th>出仓时间</th>
<th>结算结束日</th>
<th>结算起始日</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>PCHWK24061161</td>
<td>海外仓日用</td>
<td>洛杉矶普船海卡包税</td>
<td>—</td>
<td>—</td>
<td>6</td>
<td>106</td>
<td>0.292</td>
<td>运费</td>
<td>人民币</td>
<td>0</td>
<td>2024-06-11</td>
<td>—</td>
<td>2024-06-11</td>
<td>2024-07-11</td>
</tr>
<tr>
<td>2</td>
<td>BYHWK24061281</td>
<td>海外仓日用</td>
<td>美森加班海卡包税</td>
<td>—</td>
<td>—</td>
<td>37</td>
<td>654</td>
<td>1.799</td>
<td>运费</td>
<td>人民币</td>
<td>0</td>
<td>2024-06-12</td>
<td>—</td>
<td>2024-06-12</td>
<td>2024-07-12</td>
</tr>
<tr>
<td>3</td>
<td>PCHWK24061739</td>
<td>海外仓日用</td>
<td>洛杉矶普船海卡包税</td>
<td>—</td>
<td>—</td>
<td>2</td>
<td>36</td>
<td>0.097</td>
<td>运费</td>
<td>人民币</td>
<td>0</td>
<td>2024-06-17</td>
<td>—</td>
<td>2024-06-17</td>
<td>2024-07-17</td>
</tr>
<tr>
<td>4</td>
<td>PCHWK24062923</td>
<td>海外仓日用</td>
<td>洛杉矶普船海卡包税</td>
<td>—</td>
<td>—</td>
<td>2</td>
<td>36</td>
<td>0.097</td>
<td>运费</td>
<td>人民币</td>
<td>0</td>
<td>2024-06-29</td>
<td>—</td>
<td>2024-07-01</td>
<td>2024-07-31</td>
</tr>
<tr>
<td>5</td>
<td>PCHWK24062971</td>
<td>小白快递</td>
<td>洛杉矶普船海卡包税</td>
<td>—</td>
<td>—</td>
<td>5</td>
<td>1462</td>
<td>8.77</td>
<td>叉车费</td>
<td>人民币</td>
<td>130</td>
<td>2024-06-29</td>
<td>—</td>
<td>2024-07-03</td>
<td>2024-08-02</td>
</tr>
<tr>
<td>6</td>
<td>PCHWK24063021</td>
<td>小白快递</td>
<td>洛杉矶普船海卡包税</td>
<td>—</td>
<td>—</td>
<td>29</td>
<td>1175</td>
<td>7.045</td>
<td>运费</td>
<td>人民币</td>
<td>6932.5</td>
<td>2024-06-11</td>
<td>—</td>
<td>2024-07-04</td>
<td>2024-08-03</td>
</tr>
<tr>
<td>7</td>
<td>PCHWK24062971</td>
<td>小白快递</td>
<td>洛杉矶普船海卡包税</td>
<td>—</td>
<td>—</td>
<td>5</td>
<td>1462</td>
<td>8.77</td>
<td>运费</td>
<td>人民币</td>
<td>9503</td>
<td>2024-06-29</td>
<td>—</td>
<td>2024-07-04</td>
<td>2024-08-03</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ========== PAGE: 公司信息 ========== -->
<div class="page-content" id="page-company">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">公司信息</span></div>
<div class="page-title" style="margin-bottom:16px;">公司信息</div>
<div class="info-tabs">
<button class="info-tab active" onclick="setInfoTab(this,'basic')">企业基本信息</button>
<button class="info-tab" onclick="setInfoTab(this,'contact')">联系信息</button>
<button class="info-tab" onclick="setInfoTab(this,'qualify')">资质文件</button>
</div>
<!-- Tab 1: 企业基本信息 -->
<div class="info-tab-content active" id="info-basic">
<div class="info-card">
<div class="info-section-title">企业基本信息</div>
<div class="info-grid">
<div class="info-row">
<div class="info-label">公司名称</div>
<div class="info-value">华远贸易有限公司</div>
</div>
<div class="info-row">
<div class="info-label">统一信用代码</div>
<div class="info-value">91110108MA01XXXXXX</div>
</div>
<div class="info-row">
<div class="info-label">企业类型</div>
<div class="info-value">有限责任公司</div>
</div>
<div class="info-row">
<div class="info-label">注册地</div>
<div class="info-value">北京市朝阳区</div>
</div>
<div class="info-row">
<div class="info-label">成立日期</div>
<div class="info-value">2018-06-15</div>
</div>
<div class="info-row">
<div class="info-label">注册资本</div>
<div class="info-value">500万人民币</div>
</div>
<div class="info-row">
<div class="info-label"><span style="color:#ff4d4f;margin-right:4px;">*</span>法人姓名</div>
<div class="info-value">李明华</div>
</div>
<div class="info-row">
<div class="info-label"><span style="color:#ff4d4f;margin-right:4px;">*</span>法人电话</div>
<div class="info-value">139****8866</div>
</div>
</div>
</div>
</div>
<!-- Tab 2: 联系信息 -->
<div class="info-tab-content" id="info-contact">
<div class="info-card">
<div class="info-section-title">联系信息</div>
<div class="info-grid">
<div class="info-row">
<div class="info-label">联系人</div>
<div class="info-value">张伟</div>
</div>
<div class="info-row">
<div class="info-label">手机</div>
<div class="info-value">138****6789</div>
</div>
<div class="info-row">
<div class="info-label">邮箱</div>
<div class="info-value">zhangwei@huayuan.com</div>
</div>
<div class="info-row">
<div class="info-label">微信</div>
<div class="info-value">zhangwei_hy</div>
</div>
<div class="info-row" style="grid-column: 1 / -1;">
<div class="info-label">地址</div>
<div class="info-value">北京市朝阳区建国路88号</div>
</div>
</div>
</div>
</div>
<!-- Tab 3: 资质文件 -->
<div class="info-tab-content" id="info-qualify">
<div class="info-card">
<div class="info-section-title">资质文件</div>
<table class="info-doc-table">
<thead>
<tr>
<th>文件类型</th>
<th>状态</th>
<th>有效期</th>
<th style="width:80px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>营业执照</td>
<td><span class="doc-status">已验证</span></td>
<td>2028-06-15</td>
<td><button class="doc-btn" onclick="viewDoc('营业执照','2028-06-15','已验证')">查看</button></td>
</tr>
<tr>
<td>法人身份证</td>
<td><span class="doc-status">已验证</span></td>
<td>2030-01-01</td>
<td><button class="doc-btn" onclick="viewDoc('法人身份证','2030-01-01','已验证')">查看</button></td>
</tr>
<tr>
<td>货代资质证书</td>
<td><span class="doc-status">已验证</span></td>
<td>2027-03-01</td>
<td><button class="doc-btn" onclick="viewDoc('货代资质证书','2027-03-01','已验证')">查看</button></td>
</tr>
<tr>
<td>银行开户许可证</td>
<td><span class="doc-status">已验证</span></td>
<td>长期有效</td>
<td><button class="doc-btn" onclick="viewDoc('银行开户许可证','长期有效','已验证')">查看</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ========== PAGE: 我的信息 ========== -->
<div class="page-content" id="page-profile">
<div class="breadcrumb"><a href="#" onclick="switchPage('order');return false;">首页</a><span class="sep">/</span><span class="current">我的信息</span></div>
<div class="page-title" style="margin-bottom:16px;">我的信息</div>
<!-- 账户余额 -->
<div class="balance-card">
<div class="balance-info">
<div class="balance-label" data-i18n="m_balance">账户余额</div>
<div class="balance-amount">¥ <span id="profileBalance">12,850.00</span></div>
</div>
<div class="balance-actions">
<button class="balance-detail-btn" onclick="openBalanceDetails()"><i class="fas fa-list-ul"></i>余额明细</button>
<button class="btn btn-primary" onclick="openTopup()" style="font-size:13px;padding:8px 22px;">充值</button>
</div>
</div>
<div class="info-tabs">
<button class="info-tab active" onclick="setProfileTab(this,'base')">基本信息</button>
<button class="info-tab" onclick="setProfileTab(this,'password')">修改密码</button>
</div>
<!-- Tab 1: 基本信息 -->
<div class="info-tab-content active" id="profile-base">
<div class="info-card">
<div class="info-section-title" style="display:flex;justify-content:space-between;align-items:center;">
基本信息
<button class="btn btn-primary" id="btn-edit-profile" onclick="toggleEditProfile(true)" style="font-size:12px;padding:6px 18px;">编辑</button>
</div>
<!-- 查看模式 -->
<div class="info-grid" id="profile-view">
<div class="info-row">
<div class="info-label">用户名</div>
<div class="info-value">zhangwei</div>
</div>
<div class="info-row">
<div class="info-label">真实姓名</div>
<div class="info-value">张伟</div>
</div>
<div class="info-row">
<div class="info-label">手机号</div>
<div class="info-value">138****6789</div>
</div>
<div class="info-row">
<div class="info-label">邮箱</div>
<div class="info-value">zhangwei@huayuan.com</div>
</div>
<div class="info-row">
<div class="info-label">微信</div>
<div class="info-value">zhangwei_hy</div>
</div>
<div class="info-row">
<div class="info-label">所属公司</div>
<div class="info-value">华远贸易有限公司</div>
</div>
</div>
<!-- 编辑模式 -->
<div class="info-grid" id="profile-edit" style="display:none;">
<div class="info-row">
<div class="info-label">用户名</div>
<div class="info-value"><input type="text" class="form-input" value="zhangwei" style="width:260px;"></div>
</div>
<div class="info-row">
<div class="info-label">真实姓名</div>
<div class="info-value"><input type="text" class="form-input" value="张伟" style="width:260px;"></div>
</div>
<div class="info-row">
<div class="info-label">手机号</div>
<div class="info-value"><input type="text" class="form-input" value="138****6789" style="width:260px;"></div>
</div>
<div class="info-row">
<div class="info-label">邮箱</div>
<div class="info-value"><input type="text" class="form-input" value="zhangwei@huayuan.com" style="width:260px;"></div>
</div>
<div class="info-row">
<div class="info-label">微信</div>
<div class="info-value"><input type="text" class="form-input" value="zhangwei_hy" style="width:260px;"></div>
</div>
<div class="info-row">
<div class="info-label">所属公司</div>
<div class="info-value"><input type="text" class="form-input" value="华远贸易有限公司" style="width:260px;" disabled></div>
</div>
</div>
<div id="profile-actions" style="margin-top:20px;padding-top:16px;border-top:1px solid #f0f0f0;display:none;">
<button class="btn btn-primary" onclick="saveProfile()">保存修改</button>
<button class="btn btn-default" onclick="cancelEditProfile()" style="margin-left:10px;">取消</button>
</div>
</div>
</div>
<!-- Tab 2: 修改密码 -->
<div class="info-tab-content" id="profile-password">
<div class="info-card" style="max-width:480px;">
<div class="info-section-title">修改密码</div>
<div class="form-row" style="margin-bottom:16px;">
<label class="form-label" style="width:100px;">当前密码</label>
<input type="password" class="form-input" placeholder="请输入当前密码" style="width:260px;">
</div>
<div class="form-row" style="margin-bottom:16px;">
<label class="form-label" style="width:100px;">新密码</label>
<input type="password" class="form-input" placeholder="请输入新密码" style="width:260px;">
</div>
<div class="form-row" style="margin-bottom:16px;">
<label class="form-label" style="width:100px;">确认新密码</label>
<input type="password" class="form-input" placeholder="请再次输入新密码" style="width:260px;">
</div>
<div style="margin-top:20px;padding-top:16px;border-top:1px solid #f0f0f0;">
<button class="btn btn-primary" onclick="changePassword()">确认修改</button>
</div>
</div>
</div>
</div>
<!-- ========== MODAL: 资质文件查看 ========== -->
<div class="modal-overlay" id="doc-modal" onclick="if(event.target===this)closeDocModal()">
<div class="modal-box">
<div class="modal-header">
<div class="modal-title" id="doc-modal-title">资质文件查看</div>
<button class="modal-close" onclick="closeDocModal()">&times;</button>
</div>
<div class="modal-body">
<div class="doc-preview">
<div style="width:100%;height:320px;background:linear-gradient(135deg,#f5f7fa,#e8ecf1);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;">
<div style="font-size:64px;">📄</div>
<div style="font-size:14px;color:#8c8c8c;" id="doc-placeholder-text">文件预览</div>
</div>
</div>
<div class="doc-info">
<div class="doc-info-row"><div class="doc-info-label">文件类型</div><div class="doc-info-value" id="doc-modal-type">-</div></div>
<div class="doc-info-row"><div class="doc-info-label">验证状态</div><div class="doc-info-value" id="doc-modal-status">-</div></div>
<div class="doc-info-row"><div class="doc-info-label">有效期</div><div class="doc-info-value" id="doc-modal-expire">-</div></div>
<div class="doc-info-row"><div class="doc-info-label">上传时间</div><div class="doc-info-value" id="doc-modal-upload">2024-03-10</div></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="closeDocModal()">关闭</button>
<button class="btn btn-primary" onclick="alert('开始下载文件...')">下载文件</button>
</div>
</div>
</div>
<!-- ========== MODAL: 新建退货入库单 ========== -->
<div class="modal-overlay" id="return-in-modal" onclick="if(event.target===this)closeReturnInModal()">
<div class="modal-box modal-wide">
<div class="modal-header">
<div class="modal-title">新建退货入库单</div>
<button class="modal-close" onclick="closeReturnInModal()">&times;</button>
</div>
<div class="modal-body">
<div class="form-section">
<div class="modal-section-title">基础信息</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;">
<div class="form-group">
<div class="form-label"><span class="required">*</span>仓库</div>
<div class="form-content">
<select class="form-input" style="width:100%;">
<option value="">请选择</option>
<option>FBA ONT8</option>
<option>FBA CLT2</option>
<option>FBA MEM1</option>
<option>DE Frankfurt</option>
<option>FBA IND9</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-label">移除订单Order ID</div>
<div class="form-content"><input type="text" class="form-input" placeholder="请输入移除订单Order ID" style="width:100%;"></div>
</div>
<div class="form-group" style="grid-column:1 / -1;">
<div class="form-label">备注</div>
<div class="form-content">
<textarea class="form-textarea" placeholder="请输入备注" style="width:100%;height:70px;max-width:100%;"></textarea>
<div style="text-align:right;font-size:12px;color:#bfbfbf;">0/255</div>
</div>
</div>
</div>
</div>
<div class="form-section">
<div class="modal-section-title">产品信息</div>
<div class="product-table-wrap">
<table class="product-table" id="return-in-product-table">
<thead>
<tr>
<th><span class="required">*</span>物流承运商</th>
<th><span class="required">*</span>物流跟踪号</th>
<th><span class="required">*</span>SKU</th>
<th><span class="required">*</span>产品名称</th>
<th><span class="required">*</span>FNSKU</th>
<th><span class="required">*</span>退件数量</th>
<th>操作</th>
</tr>
</thead>
<tbody id="return-in-product-tbody">
<tr>
<td><input type="text" class="cell-input" placeholder="物流承运商"></td>
<td><input type="text" class="cell-input" placeholder="物流跟踪号"></td>
<td>—</td>
<td>—</td>
<td><input type="text" class="cell-input" placeholder="FNSKU"></td>
<td><input type="number" class="cell-input" placeholder="数量"></td>
<td><button class="btn-text" style="color:#ff4d4f;" onclick="this.closest('tr').remove()">删除</button></td>
</tr>
</tbody>
</table>
</div>
<div style="display:flex;justify-content:center;margin:12px 0;">
<button class="btn-text" onclick="alert('选择产品')"><span style="font-size:14px;">◎</span> 选择产品</button>
</div>
<button class="btn-ghost" onclick="addReturnInProductRow()">+ 添加产品</button>
</div>
</div>
<div class="modal-footer">
<button class="btn-ghost" onclick="closeReturnInModal()">取消</button>
<button class="btn btn-primary" onclick="submitReturnInModal()">提交</button>
<button class="btn btn-default" onclick="saveReturnInDraft()">保存草稿</button>
</div>
</div>
</div>
</div>
</main>
<!-- 右侧信息栏 -->
<aside id="dashRight" class="dash-right hidden lg:flex flex-col">
<div class="dash-right-card">
<h4 data-i18n="right_account_title">账户信息</h4>
<div class="dash-account">
<div class="dash-account-avatar" id="dashAvatar">C</div>
<div>
<div class="dash-account-name" id="dashAccountName">虫虫出海客户</div>
<div class="dash-account-type" data-i18n="right_account_type">企业客户</div>
</div>
</div>
</div>
<div class="dash-right-card">
<h4 data-i18n="right_stat_title">数据概览</h4>
<div class="dash-stat-row">
<span class="dash-stat-label" data-i18n="right_stat_progress">进行中订单</span>
<span class="dash-stat-value" id="statProgress">0</span>
</div>
<div class="dash-stat-row">
<span class="dash-stat-label" data-i18n="right_stat_done">已完成订单</span>
<span class="dash-stat-value" id="statDone">0</span>
</div>
<div class="dash-stat-row">
<span class="dash-stat-label" data-i18n="right_stat_month">本月下单</span>
<span class="dash-stat-value" id="statMonth">0</span>
</div>
</div>
<div class="dash-right-card">
<h4 data-i18n="right_help_title">帮助与支持</h4>
<div class="dash-help-item" onclick="showToast(t('right_help_cs_toast'))">
<i class="fas fa-headset"></i><span data-i18n="right_help_cs">联系客服</span>
</div>
<div class="dash-help-item" onclick="showToast(t('right_help_faq_toast'))">
<i class="fas fa-question-circle"></i><span data-i18n="right_help_faq">常见问题</span>
</div>
<div class="dash-help-item" onclick="showToast(t('right_help_quote_toast'))">
<i class="fas fa-tag"></i><span data-i18n="right_help_quote">获取报价</span>
</div>
</div>
<div class="dash-tip">
<i class="fas fa-lightbulb"></i>
<span data-i18n="right_tip_text">提交订单后,专属客户经理将在 24 小时内与您联系,确认运输方案与报价。</span>
</div>
</aside>
</div>
</div>
</section>
<!-- 充值弹窗 -->
<div id="topupModal" class="topup-overlay hidden" onclick="if(event.target===this)closeTopup()">
<div class="topup-modal">
<div class="topup-head">
<h3 data-i18n="dash_topup_title">账户充值</h3>
<button class="topup-close" onclick="closeTopup()" aria-label="关闭">&times;</button>
</div>
<div class="topup-body">
<div class="topup-amount-label" data-i18n="dash_topup_amount">充值金额</div>
<div class="topup-amount-input">
<span class="cur">¥</span>
<input type="number" id="topupAmount" value="100" min="1" step="1">
</div>
<div class="topup-presets" id="topupPresets">
<button class="topup-preset" onclick="setTopupAmount(50,this)">¥50</button>
<button class="topup-preset active" onclick="setTopupAmount(100,this)">¥100</button>
<button class="topup-preset" onclick="setTopupAmount(200,this)">¥200</button>
<button class="topup-preset" onclick="setTopupAmount(500,this)">¥500</button>
</div>
<div class="topup-methods">
<button class="topup-method active" data-method="wechat" onclick="selectPay('wechat',this)"><i class="fab fa-weixin"></i><span data-i18n="dash_pay_wechat">微信支付</span></button>
<button class="topup-method" data-method="alipay" onclick="selectPay('alipay',this)"><i class="fab fa-alipay"></i><span data-i18n="dash_pay_alipay">支付宝</span></button>
</div>
<div class="topup-qr">
<div class="topup-qr-box"><i id="topupQrIcon" class="fab fa-weixin"></i></div>
<div class="topup-qr-tip" id="topupQrTip" data-i18n="dash_topup_scan_wechat">请使用微信扫一扫完成支付</div>
</div>
</div>
<div class="topup-foot">
<button class="topup-cancel" onclick="closeTopup()" data-i18n="dash_cancel">取消</button>
<button class="topup-confirm" onclick="confirmTopup()" data-i18n="dash_topup_confirm">确认充值</button>
</div>
</div>
</div>
<!-- 余额明细弹窗 -->
<div id="balanceDetailsModal" class="topup-overlay hidden" onclick="if(event.target===this)closeBalanceDetails()">
<div class="topup-modal balance-detail-modal">
<div class="topup-head">
<h3>余额明细</h3>
<button class="topup-close" onclick="closeBalanceDetails()" aria-label="关闭">&times;</button>
</div>
<div class="topup-body">
<div class="balance-detail-summary">
<div class="balance-summary-item">
<div class="balance-summary-label">当前余额</div>
<div class="balance-summary-value">¥12,850.00</div>
</div>
<div class="balance-summary-item">
<div class="balance-summary-label">本月收入</div>
<div class="balance-summary-value income">+¥8,000.00</div>
</div>
<div class="balance-summary-item">
<div class="balance-summary-label">本月支出</div>
<div class="balance-summary-value expense">-¥3,260.00</div>
</div>
</div>
<div class="balance-detail-filter">
<div class="balance-quick-periods" id="balanceQuickPeriods">
<button class="balance-period-btn" onclick="setBalancePeriod('today',this)">今天</button>
<button class="balance-period-btn" onclick="setBalancePeriod(7,this)">近7天</button>
<button class="balance-period-btn" onclick="setBalancePeriod('month',this)">本月</button>
<button class="balance-period-btn active" onclick="setBalancePeriod(30,this)">近30天</button>
</div>
<div class="balance-date-range">
<input type="date" id="balanceStartDate" aria-label="开始日期">
<span>至</span>
<input type="date" id="balanceEndDate" aria-label="结束日期">
<button class="balance-filter-action" onclick="filterBalanceDetails()">查询</button>
<button class="balance-filter-action balance-filter-reset" onclick="resetBalanceFilter()">重置</button>
</div>
</div>
<div class="balance-detail-table-wrap">
<table class="balance-detail-table">
<thead><tr><th>交易时间</th><th>业务类型</th><th>关联单号</th><th>收支金额</th><th>交易后余额</th><th>状态</th></tr></thead>
<tbody id="balanceDetailRows">
<tr data-balance-date="2026-07-28"><td>2026-07-28 14:32</td><td>账户充值</td><td>CZ20260728001</td><td class="amount-in">+¥5,000.00</td><td>¥12,850.00</td><td><span class="balance-status">已完成</span></td></tr>
<tr data-balance-date="2026-07-25"><td>2026-07-25 10:18</td><td>运费扣款</td><td>BY2607250086</td><td class="amount-out">-¥1,860.00</td><td>¥7,850.00</td><td><span class="balance-status">已完成</span></td></tr>
<tr data-balance-date="2026-07-20"><td>2026-07-20 16:45</td><td>账户充值</td><td>CZ20260720003</td><td class="amount-in">+¥3,000.00</td><td>¥9,710.00</td><td><span class="balance-status">已完成</span></td></tr>
<tr data-balance-date="2026-07-16"><td>2026-07-16 09:26</td><td>运费扣款</td><td>BY2607160032</td><td class="amount-out">-¥1,400.00</td><td>¥6,710.00</td><td><span class="balance-status">已完成</span></td></tr>
<tr class="balance-empty-row" id="balanceEmptyRow" hidden><td colspan="6">所选时间范围内暂无余额明细</td></tr>
</tbody>
</table>
</div>
<div class="balance-detail-note" id="balanceDetailNote">仅展示近 30 天余额流水</div>
</div>
</div>
</div>
<script>
// 工作台交互
function setDashUser(name) {
const display = name ? name : '虫虫出海客户';
const topEl = document.getElementById('dashUserName');
if (topEl) topEl.textContent = 'Hi, ' + display;
const accEl = document.getElementById('dashAccountName');
if (accEl) accEl.textContent = display;
const avEl = document.getElementById('dashAvatar');
if (avEl) avEl.textContent = display.charAt(0).toUpperCase();
}
const BUILTIN_VIEWS = ['Home', 'Procurement', 'Truck', 'Pallet', 'Orders'];
const CLIENT_PAGES = ['order', 'bulk', 'quick', 'labeling', 'label-return-in', 'label-return-swap', 'label-return-out', 'inbound', 'delivery', 'biz-fee', 'company', 'profile'];
let currentGenericEl = null;
function dashNavigate(name, el) {
document.querySelectorAll('#workbench .dash-view').forEach(v => v.classList.add('hidden'));
if (BUILTIN_VIEWS.indexOf(name) !== -1) {
const view = document.getElementById('dashView' + name);
if (view) view.classList.remove('hidden');
} else if (CLIENT_PAGES.indexOf(name) !== -1) {
const cv = document.getElementById('dashViewClient');
if (cv) cv.classList.remove('hidden');
if (typeof switchPage === 'function') switchPage(name);
} else {
if (el) { populateGeneric(el); currentGenericEl = el; }
const gv = document.getElementById('dashViewGeneric');
if (gv) gv.classList.remove('hidden');
}
document.querySelectorAll('.dash-nav-link').forEach(l => l.classList.remove('active'));
if (el) el.classList.add('active');
const right = document.getElementById('dashRight');
if (right) right.classList.toggle('dash-right-hidden', name !== 'Home');
window.scrollTo(0, 0);
closeDashSidebar();
}
function goHome() {
const link = document.querySelector('.dash-nav-link[data-view="Home"]');
dashNavigate('Home', link);
}
function toggleDashGroup(header) {
header.classList.toggle('collapsed');
const sub = header.parentElement.querySelector('.dash-menu-sub');
if (sub) sub.classList.toggle('collapsed');
}
function populateGeneric(el) {
const icon = el.getAttribute('data-gicon') || 'fa-layer-group';
const title = t(el.getAttribute('data-gtitle') || 'm_coming');
const sub = t(el.getAttribute('data-gsub') || 'm_coming_sub');
const ic = document.getElementById('genericIcon');
if (ic) ic.className = 'fas ' + icon;
const ti = document.getElementById('genericTitle');
if (ti) ti.textContent = title;
const su = document.getElementById('genericSub');
if (su) su.textContent = sub;
}
function toggleDashSidebar() {
const sb = document.getElementById('dashSidebar');
const ov = document.getElementById('dashOverlay');
if (!sb) return;
const open = sb.classList.toggle('open');
if (ov) ov.classList.toggle('show', open);
document.body.style.overflow = open ? 'hidden' : '';
}
function closeDashSidebar() {
const sb = document.getElementById('dashSidebar');
const ov = document.getElementById('dashOverlay');
if (sb) sb.classList.remove('open');
if (ov) ov.classList.remove('show');
document.body.style.overflow = '';
}
function openOrder(type) {
const link = document.querySelector('.dash-nav-link[data-view="' + type + '"]');
dashNavigate(type, link);
}
function doLogout() {
showToast(t('toast_logout'));
setTimeout(() => { window.location.href = 'index.html'; }, 700);
}
// 订单表单提交
document.querySelectorAll('.order-form').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
showToast(t('toast_order_ok'));
this.reset();
setTimeout(() => goHome(), 1200);
});
});
// ====== 多语言 i18n ======
const i18n = {
zh: {
dash_home_link: "返回官网", dash_logout: "退出登录",
dash_topup: "充值", m_balance: "账户余额", dash_topup_title: "账户充值", dash_topup_amount: "充值金额", dash_topup_confirm: "确认充值", dash_pay_wechat: "微信支付", dash_pay_alipay: "支付宝", dash_topup_scan_wechat: "请使用微信扫一扫完成支付", dash_topup_scan_alipay: "请使用支付宝扫一扫完成支付", dash_topup_ok: "已提交充值 ¥{amt}({method}),请尽快完成支付",
dash_welcome_title: "选择业务,快速下单", dash_welcome_sub: "请选择您需要的业务类型,填写信息后提交订单,我们将尽快为您安排。",
dash_biz1_title: "海外采购", dash_biz1_desc: "采购代购 · 验货质检 · 集中发货",
dash_biz2_title: "美国本土卡", dash_biz2_desc: "港口提柜 · 仓到仓 · 仓到门",
dash_biz3_title: "美本土散板", dash_biz3_desc: "拼车拼载 · 打盘服务 · 灵活派送",
dash_start: "开始下单", dash_back: "返回业务选择", dash_submit: "提交订单", dash_cancel: "取消",
po_title: "海外采购下单", po_category: "采购品类", po_category_ph: "如:家居用品 / 3C 配件",
po_spec: "商品规格", po_spec_ph: "如:尺寸 / 颜色 / 材质", po_link: "商品链接", po_link_ph: "https://",
po_qty: "采购数量", po_qty_ph: "0", po_price: "预算单价", po_price_ph: "0.00",
po_address: "收货地址", po_address_ph: "请输入收货地址", po_contact: "联系人", po_contact_ph: "请输入联系人姓名",
po_phone: "联系电话", po_phone_ph: "请输入联系电话", po_note: "订单备注", po_note_ph: "其他需求说明(选填)",
tk_title: "美国本土卡下单",
pl_title: "美本土散板下单", pl_method: "运输方式", pl_method_pool: "拼车", pl_method_priority: "优先拼载",
pl_palletize: "是否打盘", pl_yes: "是", pl_no: "否",
ts_type: "运输类型", ts_type_port: "港口提柜", ts_type_w2w: "仓到仓", ts_type_w2d: "仓到门",
ts_origin: "起运地", ts_origin_ph: "城市 / 港口 / 州", ts_dest: "目的地", ts_dest_ph: "城市 / 州",
ts_origin_addr: "详细地址", ts_origin_addr_ph: "街道 / 门牌",
ts_dest_addr: "详细地址 / 码头 / 仓号", ts_dest_addr_ph: "地址 / 码头 / 仓号",
cargo_title: "货物信息", cargo_container: "柜型", cargo_container_ltl: "散货/托盘",
cargo_pieces: "件数", cargo_weight: "总重量 (kg)", cargo_volume: "总体积 (m³)",
req_time: "要求时间", contact_title: "联系人信息", contact_name: "联系人", contact_name_ph: "请输入联系人姓名", contact_phone: "联系方式", contact_phone_ph: "电话 / 微信 / 邮箱",
toast_logout: "已退出登录", toast_order_ok: "订单提交成功,我们将尽快为您安排!",
dash_menu_main: "主导航", dash_menu_overview: "业务总览", dash_menu_proc: "海外采购",
dash_menu_truck: "美国本土卡", dash_menu_pallet: "美本土散板", dash_menu_orders: "我的订单",
dash_orders_empty: "暂无订单", dash_orders_hint: "您还没有提交任何订单,前往「业务总览」选择服务开始下单吧。",
right_account_title: "账户信息", right_account_type: "企业客户",
right_stat_title: "数据概览", right_stat_progress: "进行中订单", right_stat_done: "已完成订单", right_stat_month: "本月下单",
right_help_title: "帮助与支持", right_help_cs: "联系客服", right_help_faq: "常见问题", right_help_quote: "获取报价",
right_help_cs_toast: "客服热线:400-XXX-XXXX(工作日 9:00-18:00)", right_help_faq_toast: "常见问题页面即将上线", right_help_quote_toast: "报价顾问将尽快与您联系",
right_tip_text: "提交订单后,专属客户经理将在 24 小时内与您联系,确认运输方案与报价。"
},
en: {
dash_home_link: "Back to Site", dash_logout: "Log Out",
dash_topup: "Top Up", m_balance: "Account Balance", dash_topup_title: "Account Top Up", dash_topup_amount: "Amount", dash_topup_confirm: "Confirm Top Up", dash_pay_wechat: "WeChat Pay", dash_pay_alipay: "Alipay", dash_topup_scan_wechat: "Scan with WeChat to pay", dash_topup_scan_alipay: "Scan with Alipay to pay", dash_topup_ok: "Top up ¥{amt} ({method}) submitted, please complete payment",
dash_welcome_title: "Choose a Service to Order", dash_welcome_sub: "Select the service you need, fill in the details, and submit your order — we will arrange it for you shortly.",
dash_biz1_title: "Overseas Sourcing", dash_biz1_desc: "Sourcing · Inspection · Consolidation",
dash_biz2_title: "US Domestic Trucking", dash_biz2_desc: "Port Pickup · Warehouse-to-Warehouse · Door-to-Door",
dash_biz3_title: "US Pallet Break", dash_biz3_desc: "Pooled Freight · Palletizing · Flexible Delivery",
dash_start: "Start Order", dash_back: "Back to Services", dash_submit: "Submit Order", dash_cancel: "Cancel",
po_title: "Overseas Sourcing Order", po_category: "Product Category", po_category_ph: "e.g. Home goods / 3C accessories",
po_spec: "Specs", po_spec_ph: "e.g. Size / Color / Material", po_link: "Product Link", po_link_ph: "https://",
po_qty: "Quantity", po_qty_ph: "0", po_price: "Budget Unit Price", po_price_ph: "0.00",
po_address: "Shipping Address", po_address_ph: "Enter shipping address", po_contact: "Contact Name", po_contact_ph: "Enter contact name",
po_phone: "Contact Phone", po_phone_ph: "Enter phone number", po_note: "Order Notes", po_note_ph: "Other requirements (optional)",
tk_title: "US Domestic Trucking Order",
pl_title: "US Pallet Break Order", pl_method: "Transport Mode", pl_method_pool: "Pooled", pl_method_priority: "Priority Load",
pl_palletize: "Palletize?", pl_yes: "Yes", pl_no: "No",
ts_type: "Transport Type", ts_type_port: "Port Pickup", ts_type_w2w: "Warehouse to Warehouse", ts_type_w2d: "Warehouse to Door",
ts_origin: "Origin", ts_origin_ph: "City / Port / State", ts_dest: "Destination", ts_dest_ph: "City / State",
ts_origin_addr: "Detailed Address", ts_origin_addr_ph: "Street / Number",
ts_dest_addr: "Detailed Address / Pier / WH No.", ts_dest_addr_ph: "Address / Pier / WH No.",
cargo_title: "Cargo Info", cargo_container: "Container Type", cargo_container_ltl: "Loose / Pallet",
cargo_pieces: "Pieces", cargo_weight: "Total Weight (kg)", cargo_volume: "Total Volume (m³)",
req_time: "Required By", contact_title: "Contact Info", contact_name: "Contact Person", contact_name_ph: "Enter contact name", contact_phone: "Contact Number", contact_phone_ph: "Phone / WeChat / Email",
toast_logout: "Logged out", toast_order_ok: "Order submitted! We will arrange it for you shortly.",
dash_menu_main: "Main Menu", dash_menu_overview: "Overview", dash_menu_proc: "Overseas Sourcing",
dash_menu_truck: "US Trucking", dash_menu_pallet: "US Pallet Break", dash_menu_orders: "My Orders",
dash_orders_empty: "No Orders Yet", dash_orders_hint: "You haven't placed any orders yet. Go to Overview to start a new order.",
right_account_title: "Account", right_account_type: "Enterprise Client",
right_stat_title: "Overview", right_stat_progress: "In Progress", right_stat_done: "Completed", right_stat_month: "This Month",
right_help_title: "Help & Support", right_help_cs: "Contact Support", right_help_faq: "FAQ", right_help_quote: "Get a Quote",
right_help_cs_toast: "Support Hotline: 400-XXX-XXXX (Mon-Fri 9:00-18:00)", right_help_faq_toast: "FAQ page coming soon", right_help_quote_toast: "A quoting specialist will contact you shortly",
right_tip_text: "After you submit an order, your dedicated account manager will contact you within 24 hours to confirm the shipping plan and quote."
},
es: {
dash_home_link: "Volver al sitio", dash_logout: "Cerrar sesión",
dash_topup: "Recargar", m_balance: "Saldo de cuenta", dash_topup_title: "Recarga de cuenta", dash_topup_amount: "Monto", dash_topup_confirm: "Confirmar recarga", dash_pay_wechat: "WeChat Pay", dash_pay_alipay: "Alipay", dash_topup_scan_wechat: "Escanea con WeChat para pagar", dash_topup_scan_alipay: "Escanea con Alipay para pagar", dash_topup_ok: "Recarga de ¥{amt} ({method}) enviada, completa el pago",
dash_welcome_title: "Elige un servicio para pedir", dash_welcome_sub: "Selecciona el servicio que necesitas, completa los datos y envía tu pedido; lo gestionaremos lo antes posible.",
dash_biz1_title: "Abastecimiento en el extranjero", dash_biz1_desc: "Compras · Inspección · Consolidación",
dash_biz2_title: "Transporte por camión en EE.UU.", dash_biz2_desc: "Recogida en puerto · Almacén a almacén · Puerta a puerta",
dash_biz3_title: "Despaletizado en EE.UU.", dash_biz3_desc: "Carga compartida · Paletizado · Entrega flexible",
dash_start: "Iniciar pedido", dash_back: "Volver a servicios", dash_submit: "Enviar pedido", dash_cancel: "Cancelar",
po_title: "Pedido de abastecimiento", po_category: "Categoría del producto", po_category_ph: "ej. Artículos para el hogar / Accesorios 3C",
po_spec: "Especificaciones", po_spec_ph: "ej. Tamaño / Color / Material", po_link: "Enlace del producto", po_link_ph: "https://",
po_qty: "Cantidad", po_qty_ph: "0", po_price: "Precio unitario estimado", po_price_ph: "0.00",
po_address: "Dirección de envío", po_address_ph: "Ingresa la dirección de envío", po_contact: "Persona de contacto", po_contact_ph: "Ingresa el nombre de contacto",
po_phone: "Teléfono de contacto", po_phone_ph: "Ingresa el teléfono", po_note: "Notas del pedido", po_note_ph: "Otros requisitos (opcional)",
tk_title: "Pedido de camión en EE.UU.",
pl_title: "Pedido de despaletizado en EE.UU.", pl_method: "Modo de transporte", pl_method_pool: "Carga compartida", pl_method_priority: "Carga prioritaria",
pl_palletize: "¿Paletizar?", pl_yes: "Sí", pl_no: "No",
ts_type: "Tipo de transporte", ts_type_port: "Recogida en puerto", ts_type_w2w: "Almacén a almacén", ts_type_w2d: "Almacén a puerta",
ts_origin: "Origen", ts_origin_ph: "Ciudad / Puerto / Estado", ts_dest: "Destino", ts_dest_ph: "Ciudad / Estado",
ts_origin_addr: "Dirección detallada", ts_origin_addr_ph: "Calle / Número",
ts_dest_addr: "Dirección / Muelle / N.º almacén", ts_dest_addr_ph: "Dirección / Muelle / N.º almacén",
cargo_title: "Información de carga", cargo_container: "Tipo de contenedor", cargo_container_ltl: "Carga suelta / Paleta",
cargo_pieces: "Piezas", cargo_weight: "Peso total (kg)", cargo_volume: "Volumen total (m³)",
req_time: "Fecha requerida", contact_title: "Información de contacto", contact_name: "Persona de contacto", contact_name_ph: "Ingrese el nombre de contacto", contact_phone: "Número de contacto", contact_phone_ph: "Teléfono / WeChat / Email",
toast_logout: "Sesión cerrada", toast_order_ok: "¡Pedido enviado! Lo gestionaremos lo antes posible.",
dash_menu_main: "Menú principal", dash_menu_overview: "Resumen", dash_menu_proc: "Abastecimiento",
dash_menu_truck: "Camión en EE.UU.", dash_menu_pallet: "Despaletizado", dash_menu_orders: "Mis pedidos",
dash_orders_empty: "Sin pedidos", dash_orders_hint: "Aún no has enviado pedidos. Ve a Resumen para empezar uno nuevo.",
right_account_title: "Cuenta", right_account_type: "Cliente Empresarial",
right_stat_title: "Resumen", right_stat_progress: "En Progreso", right_stat_done: "Completados", right_stat_month: "Este Mes",
right_help_title: "Ayuda y Soporte", right_help_cs: "Contactar Soporte", right_help_faq: "Preguntas Frecuentes", right_help_quote: "Obtener Cotización",
right_help_cs_toast: "Línea de soporte: 400-XXX-XXXX (Lun-Vie 9:00-18:00)", right_help_faq_toast: "Página de preguntas próximamente", right_help_quote_toast: "Un especialista en cotización te contactará pronto",
right_tip_text: "Después de enviar el pedido, tu ejecutivo de cuenta te contactará en 24 horas para confirmar el plan de envío y la cotización."
}
};
let currentLang = localStorage.getItem('cc_lang') || 'zh';
function t(key) {
return (i18n[currentLang] && i18n[currentLang][key] !== undefined) ? i18n[currentLang][key] : key;
}
function applyLanguage(lang) {
if (!i18n[lang]) lang = 'zh';
currentLang = lang;
const langAttr = lang === 'zh' ? 'zh-CN' : (lang === 'es' ? 'es-MX' : 'en');
document.documentElement.setAttribute('lang', langAttr);
document.querySelectorAll('[data-i18n]').forEach(el => {
const k = el.getAttribute('data-i18n');
if (i18n[lang][k] !== undefined) el.textContent = i18n[lang][k];
});
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
const k = el.getAttribute('data-i18n-ph');
if (i18n[lang][k] !== undefined) el.setAttribute('placeholder', i18n[lang][k]);
});
document.querySelectorAll('#langSwitcherDash [data-lang]').forEach(b => {
b.classList.toggle('active', b.getAttribute('data-lang') === lang);
});
if (currentGenericEl) populateGeneric(currentGenericEl);
try { localStorage.setItem('cc_lang', lang); } catch (e) {}
}
document.querySelectorAll('#langSwitcherDash [data-lang]').forEach(b => {
b.addEventListener('click', () => applyLanguage(b.getAttribute('data-lang')));
});
// Toast 提示
function showToast(message) {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = message;
toast.classList.remove('opacity-0', 'pointer-events-none', '-translate-y-4');
toast.classList.add('opacity-100', 'translate-y-0');
setTimeout(() => {
toast.classList.add('opacity-0', 'pointer-events-none', '-translate-y-4');
toast.classList.remove('opacity-100', 'translate-y-0');
}, 3000);
}
// 充值弹窗
function openTopup() {
document.getElementById('topupModal').classList.remove('hidden');
}
function closeTopup() {
document.getElementById('topupModal').classList.add('hidden');
}
function openBalanceDetails() {
document.getElementById('balanceDetailsModal').classList.remove('hidden');
if (!document.getElementById('balanceStartDate').value) {
const defaultPeriod = document.querySelector('#balanceQuickPeriods .balance-period-btn.active');
setBalancePeriod(30, defaultPeriod);
}
}
function closeBalanceDetails() {
document.getElementById('balanceDetailsModal').classList.add('hidden');
}
function formatBalanceDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return year + '-' + month + '-' + day;
}
function setBalancePeriod(period, el) {
const end = new Date();
const start = new Date(end);
if (period === 'today') {
// 开始和结束均为今天
} else if (period === 'month') {
start.setDate(1);
} else {
start.setDate(end.getDate() - Number(period) + 1);
}
document.getElementById('balanceStartDate').value = formatBalanceDate(start);
document.getElementById('balanceEndDate').value = formatBalanceDate(end);
document.querySelectorAll('#balanceQuickPeriods .balance-period-btn').forEach(btn => btn.classList.remove('active'));
if (el) el.classList.add('active');
filterBalanceDetails();
}
function filterBalanceDetails() {
const start = document.getElementById('balanceStartDate').value;
const end = document.getElementById('balanceEndDate').value;
if (start && end && start > end) {
showToast('开始日期不能晚于结束日期');
return;
}
let visibleCount = 0;
document.querySelectorAll('#balanceDetailRows tr[data-balance-date]').forEach(row => {
const date = row.dataset.balanceDate;
const visible = (!start || date >= start) && (!end || date <= end);
row.hidden = !visible;
if (visible) visibleCount++;
});
document.getElementById('balanceEmptyRow').hidden = visibleCount !== 0;
document.getElementById('balanceDetailNote').textContent = start || end
? (start || '最早') + ' 至 ' + (end || '今天') + ',共 ' + visibleCount + ' 条流水'
: '全部时间,共 ' + visibleCount + ' 条流水';
}
function resetBalanceFilter() {
const buttons = document.querySelectorAll('#balanceQuickPeriods .balance-period-btn');
setBalancePeriod(30, buttons[buttons.length - 1]);
}
function setTopupAmount(v, el) {
document.getElementById('topupAmount').value = v;
document.querySelectorAll('#topupPresets .topup-preset').forEach(b => b.classList.remove('active'));
if (el) el.classList.add('active');
}
function selectPay(method, el) {
document.querySelectorAll('.topup-method').forEach(b => b.classList.remove('active'));
if (el) el.classList.add('active');
const icon = document.getElementById('topupQrIcon');
const tip = document.getElementById('topupQrTip');
if (method === 'wechat') {
icon.className = 'fab fa-weixin';
tip.setAttribute('data-i18n', 'dash_topup_scan_wechat');
tip.textContent = t('dash_topup_scan_wechat');
} else {
icon.className = 'fab fa-alipay';
tip.setAttribute('data-i18n', 'dash_topup_scan_alipay');
tip.textContent = t('dash_topup_scan_alipay');
}
}
function confirmTopup() {
const amt = document.getElementById('topupAmount').value || '0';
const method = document.querySelector('.topup-method.active').getAttribute('data-method');
const mp = method === 'wechat' ? t('dash_pay_wechat') : t('dash_pay_alipay');
const num = parseFloat(amt);
if (!isNaN(num)) {
accountBalance += num;
renderBalance();
}
showToast(t('dash_topup_ok').replace('{amt}', amt).replace('{method}', mp));
closeTopup();
}
let accountBalance = 12850.00;
function renderBalance() {
const el = document.getElementById('profileBalance');
if (el) el.textContent = accountBalance.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
applyLanguage(currentLang);
renderBalance();
// 尝试从官网登录带入用户名(URL ?user=xxx)
const params = new URLSearchParams(window.location.search);
const userParam = params.get('user');
if (userParam) {
setDashUser(decodeURIComponent(userParam));
}
// 默认首页显示右侧信息栏,其他页面隐藏
const right = document.getElementById('dashRight');
if (right) right.classList.remove('dash-right-hidden');
});
applyLanguage(currentLang);
/* ===== 柏悦客户端交互逻辑(原样并入)===== */
// ===== Page switching =====
function switchPage(pageId, clickedEl) {
// Hide all pages
document.querySelectorAll('.page-content').forEach(p => p.classList.remove('active'));
// Show target
const target = document.getElementById('page-' + pageId);
if (target) target.classList.add('active');
// Update sidebar active state
document.querySelectorAll('.nav-item, .nav-sub-item').forEach(el => el.classList.remove('active'));
document.querySelectorAll('.nav-group-header').forEach(h => h.classList.remove('active'));
if (clickedEl) {
clickedEl.classList.add('active');
} else {
// Find by data-page
const el = document.querySelector('[data-page="' + pageId + '"]');
if (el) el.classList.add('active');
}
// For 美线头程下单 sub-items, highlight parent group header
if (pageId === 'order' || pageId === 'bulk' || pageId === 'quick') {
const orderGroup = document.querySelector('.nav-group:first-of-type');
if (orderGroup) {
const header = orderGroup.querySelector('.nav-group-header');
const sub = orderGroup.querySelector('.nav-sub');
if (header) header.classList.add('active');
if (header && !header.classList.contains('expanded')) {
header.classList.add('expanded');
sub.classList.add('expanded');
}
}
}
// For 订单管理 sub-items, expand the group
if (pageId === 'inbound' || pageId === 'delivery') {
const groups = document.querySelectorAll('.nav-group');
groups.forEach(g => {
const header = g.querySelector('.nav-group-header');
const sub = g.querySelector('.nav-sub');
if (header && header.textContent.includes('订单管理')) {
header.classList.add('active');
if (!header.classList.contains('expanded')) {
header.classList.add('expanded');
sub.classList.add('expanded');
}
}
});
}
// For 海外仓下单, expand the group
if (pageId === 'labeling' || pageId === 'label-return-in' || pageId === 'label-return-swap' || pageId === 'label-return-out') {
const groups = document.querySelectorAll('.nav-group');
groups.forEach(g => {
const header = g.querySelector('.nav-group-header');
const sub = g.querySelector('.nav-sub');
if (header && header.textContent.includes('海外仓下单')) {
header.classList.add('active');
if (!header.classList.contains('expanded')) {
header.classList.add('expanded');
sub.classList.add('expanded');
}
}
});
}
}
// ===== 新建退货入库单弹窗 =====
function openReturnInModal() {
document.getElementById('return-in-modal').classList.add('show');
}
function closeReturnInModal() {
document.getElementById('return-in-modal').classList.remove('show');
}
function addReturnInProductRow() {
var tbody = document.getElementById('return-in-product-tbody');
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="text" class="cell-input" placeholder="物流承运商"></td>' +
'<td><input type="text" class="cell-input" placeholder="物流跟踪号"></td>' +
'<td>—</td><td>—</td>' +
'<td><input type="text" class="cell-input" placeholder="FNSKU"></td>' +
'<td><input type="number" class="cell-input" placeholder="数量"></td>' +
'<td><button class="btn-text" style="color:#ff4d4f;" onclick="this.closest(\'tr\').remove()">删除</button></td>';
tbody.appendChild(tr);
}
function submitReturnInModal() {
alert('退货入库单已提交!');
closeReturnInModal();
}
function saveReturnInDraft() {
alert('已保存为草稿');
closeReturnInModal();
}
// ===== Sidebar toggle =====
function toggleSidebar() {
document.querySelector('.sidebar').classList.toggle('collapsed');
document.querySelector('.main').classList.toggle('expanded');
}
// ===== Nav group toggle =====
function toggleNavGroup(header) {
header.classList.toggle('expanded');
const sub = header.nextElementSibling;
if (sub) sub.classList.toggle('expanded');
}
// ===== View bill detail =====
function viewBillDetail(billNo) {
document.querySelectorAll('.page-content').forEach(p => p.classList.remove('active'));
const target = document.getElementById('page-bill-detail');
if (target) target.classList.add('active');
const label = document.getElementById('detail-bill-no');
if (label) label.textContent = '账单号:' + billNo;
}
// ===== Company info tab toggle =====
function setInfoTab(el, type) {
document.querySelectorAll('.info-tabs .info-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
document.querySelectorAll('.info-tab-content').forEach(c => c.classList.remove('active'));
const target = document.getElementById('info-' + type);
if (target) target.classList.add('active');
}
// ===== 资质文件查看弹窗 =====
function viewDoc(type, expire, status) {
document.getElementById('doc-modal-title').textContent = type + ' - 文件查看';
document.getElementById('doc-modal-type').textContent = type;
document.getElementById('doc-modal-status').textContent = status;
document.getElementById('doc-modal-expire').textContent = expire;
document.getElementById('doc-placeholder-text').textContent = type + ' 预览';
document.getElementById('doc-modal').classList.add('show');
}
function closeDocModal() {
document.getElementById('doc-modal').classList.remove('show');
}
// ===== Profile tab toggle =====
function setProfileTab(el, type) {
document.querySelectorAll('.info-tabs .info-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
document.querySelectorAll('.info-tab-content').forEach(c => c.classList.remove('active'));
const target = document.getElementById('profile-' + type);
if (target) target.classList.add('active');
}
function toggleEditProfile(editing) {
document.getElementById('profile-view').style.display = editing ? 'none' : '';
document.getElementById('profile-edit').style.display = editing ? '' : 'none';
document.getElementById('btn-edit-profile').style.display = editing ? 'none' : '';
document.getElementById('profile-actions').style.display = editing ? '' : 'none';
if (editing) {
var firstInput = document.querySelector('#profile-edit input:not([disabled])');
if (firstInput) firstInput.focus();
}
}
function cancelEditProfile() {
// 恢复原始值
var fields = ['zhangwei','张伟','138****6789','zhangwei@huayuan.com','zhangwei_hy'];
var inputs = document.querySelectorAll('#profile-edit input:not([disabled])');
inputs.forEach(function(input, i) { if (fields[i]) input.value = fields[i]; });
toggleEditProfile(false);
}
function saveProfile() {
alert('保存成功!');
// 将编辑框的值同步到查看模式
var inputs = document.querySelectorAll('#profile-edit input:not([disabled])');
var viewValues = document.querySelectorAll('#profile-view .info-value');
inputs.forEach(function(input, i) {
if (viewValues[i]) viewValues[i].textContent = input.value;
});
toggleEditProfile(false);
}
function changePassword() { alert('密码修改成功!'); }
// ===== 海外仓下单 =====
function handleLabelFiles(files) {
var preview = document.getElementById('label-preview');
Array.from(files).forEach(function(file) {
if (!file.type.startsWith('image/')) return;
var reader = new FileReader();
reader.onload = function(e) {
var item = document.createElement('div');
item.className = 'upload-preview-item';
item.innerHTML = '<img src="'+e.target.result+'"><div class="upload-remove" onclick="this.parentElement.remove()">×</div><div class="upload-filename">'+file.name+'</div>';
preview.appendChild(item);
};
reader.readAsDataURL(file);
});
document.getElementById('label-file-input').value = '';
}
(function() {
var zone = document.getElementById('label-upload-zone');
if (!zone) return;
zone.addEventListener('dragover', function(e) { e.preventDefault(); zone.classList.add('dragover'); });
zone.addEventListener('dragleave', function() { zone.classList.remove('dragover'); });
zone.addEventListener('drop', function(e) {
e.preventDefault();
zone.classList.remove('dragover');
if (e.dataTransfer.files) handleLabelFiles(e.dataTransfer.files);
});
})();
function addLabelingRow() {
var tbody = document.getElementById('labeling-tbody');
var empty = tbody.querySelector('.empty-state');
if (empty) tbody.innerHTML = '';
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="checkbox"></td>' +
'<td><input type="text" class="form-input" style="width:140px;"></td>' +
'<td><label class="row-img-cell" onclick="this.querySelector(\'input\').click()">+<input type="file" accept="image/*" onchange="previewRowImage(this)"></label></td>' +
'<td><input type="text" class="form-input" style="width:140px;"></td>' +
'<td><input type="number" class="form-input" style="width:80px;"></td>' +
'<td><input type="number" class="form-input" style="width:90px;"></td>' +
'<td><input type="text" class="form-input" style="width:130px;"></td>' +
'<td><input type="text" class="form-input" style="width:140px;"></td>' +
'<td><input type="text" class="form-input" style="width:130px;"></td>' +
'<td><select class="form-input" style="width:110px;"><option>仅换标</option><option>换标+贴标</option><option>仅贴标</option></select></td>' +
'<td><label class="row-upload-cell" onclick="this.querySelector(\'input\').click()">📎 上传<input type="file" onchange="labelingFileName(this)"></label></td>' +
'<td><button class="btn btn-default" style="font-size:12px;padding:4px 10px;color:#ff4d4f;" onclick="this.closest(\'tr\').remove()">删除</button></td>';
tbody.appendChild(tr);
}
function clearLabelingRows() {
if (!confirm('确认清空所有货物明细?')) return;
var tbody = document.getElementById('labeling-tbody');
tbody.innerHTML = '<tr class="empty-state"><td colspan="12"><div class="empty-icon">📦</div><div class="empty-text">暂无货物明细,请点击「添加行」</div></td></tr>';
}
function previewRowImage(input) {
if (!input.files || !input.files[0]) return;
var reader = new FileReader();
reader.onload = function(e) {
var label = input.parentElement;
label.innerHTML = '<img src="'+e.target.result+'"><input type="file" accept="image/*" onchange="previewRowImage(this)">';
};
reader.readAsDataURL(input.files[0]);
}
function labelingFileName(input) {
if (!input.files || !input.files[0]) return;
var label = input.parentElement;
label.innerHTML = '✓ '+input.files[0].name+'<input type="file" onchange="labelingFileName(this)">';
}
function submitLabeling() {
var tbody = document.getElementById('labeling-tbody');
if (tbody.querySelector('.empty-state')) {
alert('请至少添加一行货物明细');
return;
}
alert('贴标申请已提交!系统将通知海外仓进行换标贴标。');
}
// ===== Dest tab toggle =====
function setDestTab(el, type) {
document.querySelectorAll('#dest-tabs .dest-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
document.querySelectorAll('.dest-content').forEach(c => c.classList.remove('active'));
const target = document.getElementById('dest-' + type);
if (target) target.classList.add('active');
}
// ===== Pickup tab toggle =====
function setPickupTab(el, type) {
document.querySelectorAll('#pickup-tabs .dest-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
document.querySelectorAll('.dest-content').forEach(c => c.classList.remove('active'));
const target = document.getElementById('pickup-' + type);
if (target) target.classList.add('active');
}
// ===== Bulk Pickup tab toggle =====
function setPickupTabBulk(el, type) {
document.querySelectorAll('#pickup-tabs-bulk .dest-tab').forEach(tab => tab.classList.remove('active'));
el.classList.add('active');
document.querySelectorAll('.dest-content-bulk').forEach(c => c.classList.remove('active'));
const target = document.getElementById('pickup-bulk-' + type);
if (target) target.classList.add('active');
}
// ===== Bulk order table =====
let bulkRowCount = 0;
function addBulkRow() {
bulkRowCount++;
const emptyRow = document.getElementById('bulk-empty-row');
if (emptyRow) emptyRow.remove();
const tbody = document.getElementById('bulk-tbody');
const cols = ['FBA仓','','','','','','','','','','','1','1','1','','','','是','否','否','',''];
const inputs = cols.map((v, i) => {
if (i === 0) return `<select style="width:80px;height:28px;border:1px solid transparent;border-radius:4px;font-size:12px;background:transparent;padding:0 4px;" onmouseover="this.style.borderColor='#d9d9d9'" onmouseout="this.style.borderColor='transparent'"><option>FBA仓</option><option>海外仓</option><option>私人仓</option></select>`;
if ([17,18,19].includes(i)) return `<select style="width:60px;height:28px;border:1px solid transparent;border-radius:4px;font-size:12px;background:transparent;padding:0 4px;" onmouseover="this.style.borderColor='#d9d9d9'" onmouseout="this.style.borderColor='transparent'"><option>否</option><option>是</option></select>`;
return `<input type="text" value="${v}" style="width:100%;min-width:80px;height:28px;padding:0 6px;border:1px solid transparent;border-radius:4px;font-size:12px;background:transparent;outline:none;" onmouseover="this.style.borderColor='#d9d9d9'" onmouseout="if(document.activeElement!==this)this.style.borderColor='transparent'" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='transparent'" placeholder="">`;
});
const tr = document.createElement('tr');
tr.style.borderBottom = '1px solid #f5f5f5';
tr.innerHTML = `<td style="padding:6px 8px;text-align:center;"><input type="checkbox" class="bulk-row-check"></td>
<td style="padding:6px 8px;text-align:center;color:#bfbfbf;font-size:12px;">${bulkRowCount}</td>
${inputs.map(inp => `<td style="padding:4px 6px;">${inp}</td>`).join('')}`;
tbody.appendChild(tr);
}
function deleteBulkRows() {
document.querySelectorAll('.bulk-row-check:checked').forEach(cb => cb.closest('tr').remove());
if (!document.getElementById('bulk-tbody').querySelector('tr:not(#bulk-empty-row)')) {
bulkRowCount = 0;
document.getElementById('bulk-tbody').innerHTML = '<tr id="bulk-empty-row"><td colspan="24" style="padding:40px 0;text-align:center;color:#bfbfbf;"><div style="font-size:28px;margin-bottom:8px;">📦</div><div style="font-size:13px;">暂无数据,请点击「添加行」或导入 Excel</div></td></tr>';
}
}
function toggleBulkAll(el) {
document.querySelectorAll('.bulk-row-check').forEach(cb => cb.checked = el.checked);
}
// ===== Goods table row management =====
let rowCount = 0;
function addRow() {
rowCount++;
const emptyRow = document.getElementById('empty-row');
if (emptyRow) emptyRow.remove();
const tbody = document.getElementById('goods-tbody');
const row = document.createElement('tr');
row.dataset.rowId = rowCount;
row.innerHTML = `
<td><input type="checkbox" class="row-check"></td>
<td style="text-align:center;color:#8c8c8c;font-size:11px;">${rowCount}</td>
<td><input class="td-input" placeholder="SKU编号"></td>
<td><input class="td-input" placeholder="中文品名"></td>
<td><label style="cursor:pointer;display:flex;align-items:center;justify-content:center;height:30px;width:40px;border:1px dashed #d9d9d9;border-radius:4px;font-size:16px;color:#bfbfbf;" title="上传图片">+</label></td>
<td><input class="td-input" placeholder="English Name"></td>
<td><input class="td-input" placeholder="HS Code"></td>
<td><input class="td-input" placeholder="HS Code"></td>
<td><input class="td-input" type="number" placeholder="L" style="width:60px"></td>
<td><input class="td-input" type="number" placeholder="W" style="width:60px"></td>
<td><input class="td-input" type="number" placeholder="H" style="width:60px"></td>
<td><input class="td-input" type="number" placeholder="0"></td>
<td><input class="td-input" type="number" placeholder="0"></td>
<td><input class="td-input" type="number" placeholder="0.00"></td>
<td><input class="td-input" type="number" placeholder="0.000"></td>
<td><input class="td-input" type="number" placeholder="0"></td>
<td><input class="td-input" type="number" placeholder="0.00"></td>
<td><input class="td-input" type="number" placeholder="0.00"></td>
<td><input class="td-input" type="number" placeholder="0.00"></td>
<td><input class="td-input" placeholder="材质"></td>
<td><input class="td-input" placeholder="用途"></td>
<td><input class="td-input" placeholder="型号"></td>
<td><input class="td-input" placeholder="品牌"></td>
<td><input class="td-input" placeholder="L×W×H cm"></td>
<td><input class="td-input" placeholder="SHIPMENT ID"></td>
<td><input class="td-input" placeholder="REFERENCE ID"></td>
<td><input class="td-input" placeholder="UPC编号"></td>
<td><input class="td-input" placeholder="备注"></td>
`;
tbody.appendChild(row);
}
function deleteSelectedRows() {
const checkboxes = document.querySelectorAll('.row-check:checked');
if (checkboxes.length === 0) { alert('请先勾选要删除的行'); return; }
checkboxes.forEach(cb => cb.closest('tr').remove());
if (document.querySelectorAll('#goods-tbody tr').length === 0) {
document.getElementById('goods-tbody').innerHTML = `<tr class="empty-row" id="empty-row"><td colspan="28" style="text-align:center;padding:40px;color:#bfbfbf;"><div style="font-size:32px;margin-bottom:8px;">📦</div><div style="font-size:13px;">暂无货物明细,请点击「添加行」或上传 Excel</div></td></tr>`;
rowCount = 0;
}
document.querySelectorAll('#goods-tbody tr:not(.empty-row)').forEach((row, i) => {
const numCell = row.cells[1];
if (numCell) numCell.textContent = i + 1;
});
}
function toggleAllGoods(el) {
document.querySelectorAll('.row-check').forEach(cb => cb.checked = el.checked);
}
function toggleAllTable(tableId, el) {
document.querySelectorAll('#' + tableId + ' tbody input[type=checkbox]').forEach(cb => cb.checked = el.checked);
}
function submitOrder() {
const rows = document.querySelectorAll('#goods-tbody tr:not(.empty-row)');
if (rows.length === 0) {
alert('请至少添加一行货物明细后再提交');
return;
}
alert('订单提交成功!系统将发送确认通知至您的联系邮箱。');
}
// ===== 费用预估选择 =====
let selectedCostIndex = 1;
function selectCost(el, index) {
selectedCostIndex = index;
document.querySelectorAll('.cost-card').forEach(c => c.classList.remove('active'));
el.classList.add('active');
}
// ===== Quick Order functions =====
let quickRowIndex = 2;
function addQuickRow() {
const tbody = document.getElementById('quick-rows');
const tr = document.createElement('tr');
tr.className = 'quick-row';
tr.innerHTML = `
<td>
<div class="select-wrap">
<select class="form-select">
<option value="">请选择</option>
<option>美线普货专线</option>
<option>美线敏感货专线</option>
<option>美线快线</option>
<option>美线FBA直送</option>
</select>
</div>
</td>
<td>
<label class="radio-label" style="display:block;margin-bottom:4px;"><input type="radio" name="dest${quickRowIndex}"> FBA</label>
<label class="radio-label" style="display:block;margin-bottom:4px;"><input type="radio" name="dest${quickRowIndex}"> 海外仓</label>
<label class="radio-label" style="display:block;"><input type="radio" name="dest${quickRowIndex}"> 私人仓</label>
</td>
<td>
<a href="javascript:void(0)" onclick="addProduct(this)" style="color:#1677ff;font-size:13px;">+ 添加产品</a>
<a href="javascript:void(0)" onclick="delQuickRow(this)" style="color:#ff4d4f;font-size:13px;margin-left:10px;">- 删除本行</a>
</td>
<td>
<div class="product-line">
<input type="text" class="form-input" placeholder="产品SKU" style="width:140px;">
<input type="number" class="form-input" value="0" style="width:80px;text-align:center;">
<a href="javascript:void(0)" onclick="delProduct(this)" style="color:#ff4d4f;font-size:13px;">- 删除此产品</a>
</div>
</td>
`;
tbody.appendChild(tr);
quickRowIndex++;
}
function delQuickRow(el) {
const rows = document.querySelectorAll('#quick-rows .quick-row');
if (rows.length <= 1) { alert('至少需要保留一行'); return; }
el.closest('tr').remove();
}
function addProduct(el) {
const td = el.closest('tr').querySelector('td:last-child');
const div = document.createElement('div');
div.className = 'product-line';
div.innerHTML = `
<input type="text" class="form-input" placeholder="产品SKU" style="width:140px;">
<input type="number" class="form-input" value="0" style="width:80px;text-align:center;">
<a href="javascript:void(0)" onclick="delProduct(this)" style="color:#ff4d4f;font-size:13px;">- 删除此产品</a>
`;
td.appendChild(div);
}
function delProduct(el) {
const td = el.closest('td');
const lines = td.querySelectorAll('.product-line');
if (lines.length <= 1) { alert('每行至少需要保留一个产品'); return; }
el.closest('.product-line').remove();
}
function submitQuickOrder() {
alert('快速订单提交成功!');
}
</script>
</body>
</html>