881 lines
62 KiB
HTML
881 lines
62 KiB
HTML
<!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.5rem 1.25rem;
|
||
position: sticky; top: 4rem; align-self: flex-start;
|
||
max-height: calc(100vh - 4rem); overflow-y: auto;
|
||
}
|
||
.dash-right-card {
|
||
background: #f8fafc; border: 1px solid #eef2f7;
|
||
border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem;
|
||
}
|
||
.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: 1.1rem; 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; }
|
||
}
|
||
</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">
|
||
<div class="dash-nav-group" data-i18n="dash_menu_main">主导航</div>
|
||
<a class="dash-nav-link active" data-view="Home" onclick="goDash('Home')"><i class="fas fa-th-large"></i><span data-i18n="dash_menu_overview">业务总览</span></a>
|
||
<a class="dash-nav-link" data-view="Procurement" onclick="goDash('Procurement')"><i class="fas fa-shopping-cart"></i><span data-i18n="dash_menu_proc">海外采购</span></a>
|
||
<a class="dash-nav-link" data-view="Truck" onclick="goDash('Truck')"><i class="fas fa-truck-moving"></i><span data-i18n="dash_menu_truck">美国本土卡</span></a>
|
||
<a class="dash-nav-link" data-view="Pallet" onclick="goDash('Pallet')"><i class="fas fa-pallet"></i><span data-i18n="dash_menu_pallet">美本土散板</span></a>
|
||
<a class="dash-nav-link" data-view="Orders" onclick="goDash('Orders')"><i class="fas fa-clipboard-list"></i><span data-i18n="dash_menu_orders">我的订单</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>
|
||
<button class="dash-logout-btn" onclick="doLogout()"><i class="fas fa-sign-out-alt"></i><span data-i18n="dash_logout">退出登录</span></button>
|
||
</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-6 lg:px-10 h-16 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>
|
||
<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>
|
||
</header>
|
||
<div class="flex flex-1 min-h-0">
|
||
<main class="flex-1 px-4 sm:px-6 lg:px-10 py-8 min-w-0">
|
||
<!-- 视图1:选择业务 -->
|
||
<div id="dashViewHome" class="dash-view">
|
||
<div class="mb-10">
|
||
<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-6">
|
||
<div class="dash-card p-8" 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-8" 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-8" 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="showDashView('Home')" 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-8 lg:p-10 max-w-3xl">
|
||
<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-5" 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="showDashView('Home')" 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="showDashView('Home')" 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-8 lg:p-10 max-w-3xl">
|
||
<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="showDashView('Home')" 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="showDashView('Home')" 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-8 lg:p-10 max-w-3xl">
|
||
<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="showDashView('Home')" 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>
|
||
</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>
|
||
|
||
<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();
|
||
}
|
||
function showDashView(name) {
|
||
document.querySelectorAll('#workbench .dash-view').forEach(v => v.classList.add('hidden'));
|
||
const view = document.getElementById('dashView' + name);
|
||
if (view) view.classList.remove('hidden');
|
||
document.querySelectorAll('.dash-nav-link').forEach(l => l.classList.toggle('active', l.getAttribute('data-view') === name));
|
||
window.scrollTo(0, 0);
|
||
}
|
||
function goDash(name) {
|
||
showDashView(name);
|
||
closeDashSidebar();
|
||
}
|
||
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) {
|
||
showDashView(type);
|
||
}
|
||
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(() => showDashView('Home'), 1200);
|
||
});
|
||
});
|
||
|
||
// ====== 多语言 i18n ======
|
||
const i18n = {
|
||
zh: {
|
||
dash_home_link: "返回官网", dash_logout: "退出登录",
|
||
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_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_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);
|
||
});
|
||
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);
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
applyLanguage(currentLang);
|
||
// 尝试从官网登录带入用户名(URL ?user=xxx)
|
||
const params = new URLSearchParams(window.location.search);
|
||
const userParam = params.get('user');
|
||
if (userParam) {
|
||
setDashUser(decodeURIComponent(userParam));
|
||
}
|
||
});
|
||
applyLanguage(currentLang);
|
||
</script>
|
||
</body>
|
||
</html>
|