Files
docs/悦/头程下单/柏悦客户端.html
T

2688 lines
151 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>虫虫出海 - 客户端</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100vw; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #f5f7fa; color: #262626; display: flex; min-height: 100vh; }
/* ===== 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);
}
.sidebar.collapsed { width: 0; transform: translateX(-100%); border-right: none; overflow: hidden; }
.nav { flex: 1; overflow-y: auto; padding: 16px 12px; }
.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;
}
.nav-item:hover { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); color: #667eea; transform: translateX(3px); }
.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); }
.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;
}
.nav-item .nav-icon, .nav-group-left .nav-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-item .nav-icon svg, .nav-group-left .nav-icon svg { width: 16px; height: 16px; }
.nav-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.2), transparent); margin: 12px 8px; }
.nav-group { display: flex; flex-direction: column; }
.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;
}
.nav-group-header:hover { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); color: #667eea; }
.nav-group-header .nav-group-left { display: flex; align-items: center; gap: 10px; }
.nav-group-header .nav-arrow { font-size: 10px; color: #8c8c8c; transition: transform .3s; }
.nav-group-header.expanded .nav-arrow { transform: rotate(180deg); }
.nav-group-header.active { color: #667eea; font-weight: 600; }
.nav-sub { display: none; flex-direction: column; }
.nav-sub.expanded { display: flex; }
.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;
}
.nav-sub-item:hover { color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); }
.nav-sub-item.active { color: #fff; font-weight: 600; background: linear-gradient(135deg, #667eea, #764ba2); }
/* ===== 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);
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-menu-icon {
width: 24px; height: 20px; display: flex; flex-direction: column;
justify-content: space-between; cursor: pointer; padding: 4px 0;
}
.topbar-menu-icon span { display: block; height: 2px; background: #fff; border-radius: 3px; transition: all .3s; }
.topbar-menu-icon:hover span:first-child { width: 14px; transform: translateX(2px); }
.topbar-menu-icon:hover span:last-child { width: 14px; transform: translateX(-2px); }
.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); }
.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); }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.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);
}
.topbar-icon-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); }
.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;
}
.topbar-avatar:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(255,255,255,0.3); }
.topbar-logout { font-size: 13px; color: rgba(255,255,255,.9); cursor: pointer; transition: all .3s; padding: 6px 14px; border-radius: 8px; }
.topbar-logout:hover { color: #fff; background: rgba(255,255,255,0.15); }
/* ===== 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;
}
.main.expanded { margin-left: 0; }
/* Page content panels */
.page-content { display: none; }
.page-content.active { display: block; }
/* ===== SHARED: Page Header / Breadcrumb ===== */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 20px; font-weight: 700; color: #1e293b; }
.page-subtitle { font-size: 13px; color: #71717a; margin-top: 6px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #71717a; margin-bottom: 18px; }
.breadcrumb a { color: #71717a; text-decoration: none; transition: all .2s; }
.breadcrumb a:hover { color: #667eea; }
.link-primary { color: #667eea; text-decoration: none; font-size: 13px; transition: all .2s; }
.link-primary:hover { text-decoration: underline; color: #764ba2; }
/* 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); }
.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; }
.info-tab:last-child { border-right: none; }
.info-tab:hover { color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); }
.info-tab.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 600; }
.info-tab-content { display: none; }
.info-tab-content.active { display: block; }
/* 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); }
.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); }
.info-row { display: flex; margin-bottom: 14px; }
.info-label { width: 100px; color: #8c8c8c; font-size: 13px; flex-shrink: 0; }
.info-value { flex: 1; color: #262626; font-size: 13px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.info-doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.info-doc-table thead th { background: #fafafa; padding: 10px 12px; text-align: left; font-weight: 500; color: #8c8c8c; border-bottom: 1px solid #f0f0f0; }
.info-doc-table tbody td { padding: 12px; border-bottom: 1px solid #f5f5f5; color: #262626; }
.info-doc-table tbody tr:last-child td { border-bottom: none; }
.doc-status { color: #52c41a; font-size: 12px; }
.doc-btn { padding: 3px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 12px; color: #595959; background: #fff; cursor: pointer; }
.doc-btn:hover { border-color: #1677ff; color: #1677ff; }
.info-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.breadcrumb a:hover { color: #667eea; }
.breadcrumb .sep { color: #a1a1aa; }
.breadcrumb .current { color: #1e293b; font-weight: 500; }
/* ===== 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: 20px; overflow: hidden;
transition: all .4s cubic-bezier(.4,0,.2,1);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(102,126,234,.15); }
.card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 28px 16px; border-bottom: 1px solid rgba(102,126,234,0.1);
}
.card-title { font-size: 18px; font-weight: 700; color: #1e293b; }
.card-subtitle { font-size: 13px; color: #8c8c8c; margin-top: 4px; }
.card-body { padding: 24px 28px; }
/* ===== 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;
}
.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; box-shadow: 0 4px 15px rgba(102,126,234,0.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.45); }
.btn-default { background: rgba(255,255,255,0.9); color: #595959; border: 1.5px solid rgba(102,126,234,0.2); }
.btn-default:hover { border-color: #667eea; color: #667eea; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102,126,234,0.15); }
.btn-danger { background: rgba(255,255,255,0.9); color: #ff6b6b; border: 1.5px solid rgba(255,107,107,0.3); }
.btn-danger:hover { background: linear-gradient(135deg, rgba(255,107,107,0.05), rgba(255,77,79,0.05)); transform: translateY(-1px); }
.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); }
.btn-ghost:hover { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15)); transform: translateY(-1px); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn-purple { background: linear-gradient(135deg, #764ba2, #f093fb); color: #fff; border: none; box-shadow: 0 4px 15px rgba(118,75,162,0.35); }
.btn-purple:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(118,75,162,0.45); }
/* 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;
}
.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); }
.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; }
.btn-flat-blue:hover { background: linear-gradient(135deg, #4338ca, #6d28d9); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45); }
.btn-flat-blue:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35); }
.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); }
.btn-flat-purple:hover { background: linear-gradient(135deg, #667eea, #764ba2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(118,75,162,0.45); }
.btn-flat-red { color: #ff6b6b; border-color: rgba(255,107,107,0.3); background: rgba(255,255,255,0.9); }
.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); }
.btn-flat .icon-svg { width: 14px; height: 14px; flex-shrink: 0; }
/* ===== PAGE: 头程下单 - Form ===== */
.form-group { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; min-height: 32px; }
.form-group:last-child { margin-bottom: 0; }
.form-label { font-size: 13px; color: #595959; font-weight: 400; min-width: 80px; text-align: right; padding-top: 5px; line-height: 22px; }
.form-label .required { color: #ff4d4f; margin-right: 4px; }
.form-content { flex: 1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.radio-group { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.radio-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #262626; cursor: pointer; user-select: none; transition: all .2s; }
.radio-label:hover { color: #667eea; }
.radio-label input[type=radio] { width: 16px; height: 16px; accent-color: #667eea; cursor: pointer; margin: 0; }
.radio-label.disabled { color: #bfbfbf; cursor: not-allowed; }
.radio-label.disabled input[type=radio] { accent-color: #d9d9d9; cursor: not-allowed; }
.form-input, .form-select, .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;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
.form-input::placeholder, .form-textarea::placeholder { color: #bfbfbf; }
/* 强制表单控件不撑宽页面 */
.main .form-input, .main .form-select, .main .form-textarea { min-width: 0 !important; max-width: 100% !important; }
.main .form-content { flex: 1; min-width: 0; }
.form-textarea { width: 100%; max-width: 100%; height: 90px; padding: 12px 16px; resize: vertical; border-radius: 12px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .form-input { padding-right: 32px; }
.input-suffix { position: absolute; right: 10px; color: #bfbfbf; font-size: 14px; pointer-events: none; }
.select-wrap { position: relative; display: inline-block; }
.select-wrap .form-select { min-width: 160px; padding-right: 32px; appearance: auto; }
.date-range { display: flex; align-items: center; gap: 8px; }
.date-range .form-input { width: 160px; }
.date-sep { color: #bfbfbf; font-size: 13px; white-space: nowrap; }
/* 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); }
.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; }
.dest-tab:last-child { border-right: none; }
.dest-tab:hover { color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); }
.dest-tab.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 600; }
.dest-content { display: none; }
.dest-content.active { display: block; }
.dest-content-bulk { display: none; }
.dest-content-bulk.active { display: block; }
/* Goods table */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.table-actions { display: flex; gap: 10px; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(102,126,234,0.15); border-radius: 16px; background: rgba(255,255,255,0.95); }
table.goods-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.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; }
.goods-table thead th:first-child { width: 48px; text-align: center; }
.goods-table tbody tr { border-bottom: 1px solid rgba(102,126,234,0.08); transition: all .3s cubic-bezier(.4,0,.2,1); }
.goods-table tbody tr:last-child { border-bottom: none; }
.goods-table tbody tr:hover { background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); }
.goods-table tbody td { padding: 12px 10px; vertical-align: middle; }
.goods-table tbody td:first-child { text-align: center; color: #bfbfbf; font-size: 12px; }
.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; }
.td-input:focus, .td-input:hover { border-color: rgba(102,126,234,0.3); background: rgba(255,255,255,0.9); }
.td-input::placeholder { color: #bfbfbf; }
.empty-row td { padding: 40px 0; text-align: center; color: #bfbfbf; font-size: 13px; }
.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; }
.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); }
/* 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); }
.upload-zone:hover { border-color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); }
.upload-zone.dragover { border-color: #667eea; background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.12)); }
.upload-zone-icon { font-size: 36px; margin-bottom: 8px; }
.upload-zone-text { font-size: 14px; color: #262626; font-weight: 600; margin-bottom: 4px; }
.upload-zone-hint { font-size: 12px; color: #8c8c8c; }
.upload-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.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; }
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.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; }
.upload-preview-item .upload-remove:hover { background: #ff4d4f; }
.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; }
.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; }
.row-upload-cell:hover { border-color: #667eea; background: #f0f4ff; }
.row-upload-cell input { display: none; }
.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; }
.row-img-cell:hover { border-color: #667eea; color: #667eea; }
.row-img-cell img { width: 100%; height: 100%; object-fit: cover; }
.row-img-cell input { display: none; }
.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; }
.download-link:hover { border-color: #667eea; color: #667eea; transform: translateY(-1px); }
/* 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; }
.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); }
.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; }
.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); }
.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; }
.footer-tips { font-size: 12px; color: #8c8c8c; display: flex; align-items: center; gap: 8px; }
.footer-tips .tip-icon { color: #ffd93d; }
.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); }
.btn-submit:hover { background: linear-gradient(135deg, #764ba2, #f093fb, #667eea); box-shadow: 0 8px 25px rgba(102,126,234,.5); transform: translateY(-2px); }
.btn-submit:active { transform: translateY(0); }
/* ===== 费用预估 ===== */
.cost-estimate { margin-top: 16px; }
.cost-estimate .card-header { border-bottom: none; padding-bottom: 0; }
.cost-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.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);
}
.cost-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(102,126,234,.15);
border-color: rgba(102,126,234,.25);
}
.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);
}
.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;
}
.cost-badge.fastest { background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.cost-badge.recommend { background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 3px 10px rgba(102,126,234,.35); }
.cost-badge.economy { background: linear-gradient(135deg, #78909c, #546e7a); }
.cost-days { font-size: 26px; font-weight: 700; color: #333; margin-bottom: 14px; letter-spacing: 1px; }
.cost-price { font-size: 34px; font-weight: 800; color: #667eea; margin-bottom: 10px; line-height: 1.2; }
.cost-price span { font-size: 20px; font-weight: 600; }
.cost-desc { font-size: 13px; color: #999; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: #667eea; cursor: pointer; }
.col-checkbox { width: 36px; }
/* ===== PAGE: 订单列表 - Filter ===== */
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; align-items: center; }
.filter-item { display: flex; align-items: center; gap: 8px; }
.filter-item.span2 { grid-column: span 2; }
.filter-label { font-size: 13px; color: #595959; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.filter-input, .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); }
.filter-input:focus, .filter-select:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
.filter-input::placeholder { color: #bfbfbf; }
.date-range-wrap { display: flex; align-items: center; gap: 6px; flex: 1; }
.date-range-wrap .filter-input { flex: 1; }
.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; }
/* 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); }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.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; }
.data-table tbody td { padding: 14px 14px; border-bottom: 1px solid rgba(102,126,234,0.08); color: #262626; white-space: nowrap; }
.data-table tbody tr:hover { background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05)); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .col-checkbox { width: 40px; text-align: center; }
.data-table .col-checkbox input { cursor: pointer; }
.empty-state { text-align: center; padding: 60px 20px; color: #bfbfbf; }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state .empty-text { font-size: 14px; }
/* 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); }
.quick-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.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); }
.quick-table tbody td { padding: 16px 16px; border-bottom: 1px solid rgba(102,126,234,0.08); vertical-align: top; }
.quick-table tbody tr:last-child td { border-bottom: none; }
.quick-table .select-wrap .form-select { min-width: 120px; }
.product-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.product-line:last-child { margin-bottom: 0; }
/* Tags */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.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); }
.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); }
.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); }
.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); }
.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); }
.tag-default { background: rgba(0,0,0,0.05); color: #8c8c8c; border: 1px solid rgba(0,0,0,0.1); }
/* 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; }
.pagination-info { display: flex; align-items: center; gap: 10px; }
.pagination-ctrl { display: flex; align-items: center; gap: 6px; }
.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; }
.page-btn:hover { border-color: #667eea; color: #667eea; transform: translateY(-1px); }
.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); }
.page-btn:disabled { opacity: .5; cursor: not-allowed; border-color: rgba(0,0,0,0.1); color: #bfbfbf; }
.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); }
.page-size-select:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #bfbfbf; }
/* ===== 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;
}
.modal-overlay.show { display: flex; }
.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); } }
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 28px; border-bottom: 1px solid #f0f0f0;
}
.modal-title { font-size: 16px; font-weight: 600; color: #262626; }
.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;
}
.modal-close:hover { background: #fff1f0; color: #ff4d4f; }
.modal-body { flex: 1; overflow-y: auto; padding: 28px; }
.doc-preview { text-align: center; }
.doc-preview img { max-width: 100%; border-radius: 8px; border: 1px solid #f0f0f0; }
.doc-info { margin-top: 20px; }
.doc-info-row { display: flex; margin-bottom: 12px; font-size: 13px; }
.doc-info-label { width: 100px; color: #8c8c8c; flex-shrink: 0; }
.doc-info-value { color: #262626; flex: 1; }
.modal-footer {
display: flex; justify-content: flex-end; gap: 12px;
padding: 16px 28px; border-top: 1px solid #f0f0f0;
}
.modal-box.modal-wide { width: 920px; max-width: 92vw; }
.modal-section-title { font-size: 14px; font-weight: 600; color: #262626; margin-bottom: 16px; padding-left: 10px; border-left: 3px solid #667eea; }
.page-header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-header-actions .page-title { margin: 0; }
.page-action-group { display: flex; gap: 10px; }
.status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.status-pending { background: #fff7e6; color: #fa8c16; }
.status-processing { background: #e6f7ff; color: #1677ff; }
.status-done { background: #f6ffed; color: #52c41a; }
.status-rejected { background: #fff1f0; color: #ff4d4f; }
.link-action { color: #1677ff; font-size: 12px; cursor: pointer; margin-right: 8px; }
.link-action:hover { color: #0056b3; text-decoration: underline; }
.form-section { margin-bottom: 20px; }
.form-section:last-child { margin-bottom: 0; }
.product-table-wrap { overflow-x: auto; border: 1px solid #f0f0f0; border-radius: 10px; margin-bottom: 12px; }
.product-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.product-table thead th { background: #f8f8ff; padding: 12px; text-align: left; font-weight: 600; color: #667eea; border-bottom: 1px solid #e8e8ff; }
.product-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.product-table tbody tr:last-child td { border-bottom: none; }
.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; }
.product-table .cell-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
.text-error { color: #ff4d4f; font-size: 12px; margin-top: 4px; }
.btn-text { color: #1677ff; font-size: 13px; cursor: pointer; background: none; border: none; display: inline-flex; align-items: center; gap: 4px; }
.btn-text:hover { color: #0056b3; }
.btn-ghost { background: #fff; border: 1px solid #d9d9d9; color: #595959; padding: 8px 18px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all .2s; }
.btn-ghost:hover { border-color: #667eea; color: #667eea; }
</style>
</head>
<body>
<!-- SIDEBAR -->
<aside class="sidebar">
<nav class="nav" style="padding-top:12px;">
<div class="nav-group">
<div class="nav-group-header expanded active" onclick="toggleNavGroup(this)">
<div class="nav-group-left">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="#FF4D4F" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span> 美线头程下单
</div>
<span class="nav-arrow">▼</span>
</div>
<div class="nav-sub expanded">
<div class="nav-sub-item active" data-page="order" onclick="switchPage('order', this)">头程下单</div>
<div class="nav-sub-item" data-page="bulk" onclick="switchPage('bulk', this)">一键导入</div>
<div class="nav-sub-item" data-page="quick" onclick="switchPage('quick', this)">快速下单</div>
</div>
</div>
<div class="nav-divider"></div>
<div class="nav-group">
<div class="nav-group-header expanded" onclick="toggleNavGroup(this)">
<div class="nav-group-left">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#722ED1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg></span> 海外仓下单
</div>
<span class="nav-arrow">▼</span>
</div>
<div class="nav-sub expanded">
<a class="nav-sub-item" data-page="labeling" onclick="switchPage('labeling', this)">贴标申请</a>
<a class="nav-sub-item" data-page="label-return-in" onclick="switchPage('label-return-in', this)">退货入库</a>
<a class="nav-sub-item" data-page="label-return-swap" onclick="switchPage('label-return-swap', this)">退货换标</a>
<a class="nav-sub-item" data-page="label-return-out" onclick="switchPage('label-return-out', this)">退货出库</a>
</div>
</div>
<div class="nav-group">
<div class="nav-group-header expanded" onclick="toggleNavGroup(this)">
<div class="nav-group-left">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#1677FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span> 订单管理
</div>
<span class="nav-arrow">▼</span>
</div>
<div class="nav-sub expanded">
<a class="nav-sub-item" data-page="inbound" onclick="switchPage('inbound', this)">入库订单列表</a>
<a class="nav-sub-item" data-page="delivery" onclick="switchPage('delivery', this)">派送订单列表</a>
</div>
</div>
<div class="nav-group">
<div class="nav-group-header expanded" onclick="toggleNavGroup(this)">
<span class="nav-group-left"><span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FA8C16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg></span> 财务结算</span>
<span class="nav-arrow">▼</span>
</div>
<div class="nav-sub">
<a class="nav-sub-item" data-page="biz-fee" onclick="switchPage('biz-fee', this)">应付账单</a>
</div>
</div>
<div class="nav-divider"></div>
<a class="nav-item" data-page="company" onclick="switchPage('company', this)">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#8C8C8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4 8 4v14"/><path d="M9 9h6"/><path d="M9 13h6"/><path d="M9 17h6"/></svg></span> 公司信息
</a>
<a class="nav-item" data-page="profile" onclick="switchPage('profile', this)">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#1677FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span> 我的信息
</a>
<a class="nav-item" href="#" style="color:#ff4d4f">
<span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FF4D4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg></span> 退出登录
</a>
</nav>
</aside>
<!-- TOPBAR -->
<header class="topbar">
<div class="topbar-left">
<div class="topbar-menu-icon" onclick="toggleSidebar()">
<span style="width:20px;"></span>
<span style="width:20px;"></span>
<span style="width:20px;"></span>
</div>
<img src="logo.png" class="topbar-logo-small" alt="虫虫出海">
<div class="topbar-brand-text">虫虫出海</div>
</div>
<div class="topbar-right">
<div class="topbar-icon-btn" title="切换语言">🌐</div>
<div class="topbar-avatar" title="赵婷">赵</div>
<div class="topbar-icon-btn" title="通知">🔔</div>
<div class="topbar-icon-btn" title="数据看板全屏">📊</div>
<span class="topbar-logout">退出</span>
</div>
</header>
<!-- ========== PAGE 1: 头程下单 ========== -->
<main class="main">
<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="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>
</main>
<script>
// ===== 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>