2688 lines
151 KiB
HTML
2688 lines
151 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>虫虫出海 - 客户端</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()">×</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()">×</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>
|