eric/aerologic-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成国际出港移库/出库交接页面5.5寸手机端适配

Browse Source 
- 落地手机端双形态适配框架：同名布局+资源限定符（layout/手机、
  layout-sw600dp/平板）自动切换，DeviceUtil 设备形态判定，7个
  手机版公共组件（PhoneSearchBar/StatusTab/DataLayout/FilterPanel/
  BottomBar/StatBox/KvItem）
- 完成「国际出港移库」「国际出港出库交接」两页手机端适配，新增
  各自详情页（IntExpMoveDetailActivity/IntExpOutHandoverDetailActivity）
- 手机端首页菜单接入"出港移库""出库交接"入口
- 修复手机端进入页面先横屏后转竖屏的闪屏问题：Manifest 全项目
  192 处改为 screenOrientation="unspecified"，由 BaseActivity
  按设备形态运行时锁定方向
- 修复该方案的中间版本在平板端引入的回归（先竖后横 + UI放大1.6倍）
- AutoSize 补充手机竖屏 390×844 设计基准
- 修复 CHANGELOG.md 因脚本异常导致的内容重复损坏（膨胀至12万行），
  恢复正常结构并补充本次变更记录

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
杨建宽
2026-07-29 14:18:29 +08:00
parent 9c4588e47e
commit db062c8ee3
134 changed files with 19602 additions and 2965 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
documents/5.5寸手持端设计文件/10_进港查询/运单追踪.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>国际进港查询 - 物流跟踪</title>
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<style>
@font-face {
font-family: 'Inter';
src: local('sans-serif');
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* 模拟手机容器阴影 */
.phone-shell {
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
}
</style>
</head>
<body class="bg-gray-200 flex justify-center items-center min-h-screen p-4">
<!-- 模拟手机屏幕容器 -->
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] overflow-hidden flex flex-col relative rounded-[48px] border-[10px] border-gray-900">
<!-- 顶部蓝色区域 (包含状态栏和导航栏) -->
<div class="bg-[#1A73E8] flex-none">
<!-- 系统状态栏模拟 -->
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
<span class="text-[15px] font-bold">09:41</span>
<div class="flex gap-1.5 items-center">
<iconify-icon class="text-sm" icon="mdi:signal-cellular-3"></iconify-icon>
<iconify-icon class="text-base" icon="mdi:wifi"></iconify-icon>
<iconify-icon class="text-xl" icon="mdi:battery"></iconify-icon>
</div>
</div>
<!-- 导航栏 -->
<div class="h-[44px] px-4 flex items-center justify-between">
<button class="flex items-center text-white space-x-0.5">
<iconify-icon class="text-2xl" icon="mdi:chevron-left"></iconify-icon>
<span class="text-base">返回</span>
</button>
<h1 class="text-lg font-bold text-white absolute left-1/2 -translate-x-1/2">运单追踪</h1>
<div class="w-10"></div> <!-- 占位保持平衡 -->
</div>
</div>
<!-- 可滚动内容区 -->
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pt-6 pb-12">
<!-- 流转状态卡片 -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-5">
<!-- 运单号 Header -->
<div class="flex items-center justify-between pt-2 pb-5 mb-8 border-b border-gray-100">
<div class="text-xl font-black text-gray-900 leading-none tracking-tight">
78133358743
</div>
<span class="text-[11px] font-medium text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full border border-blue-100">国际进港</span>
</div>
<!-- 流转状态标题 -->
<div class="mb-6">
<h2 class="text-base font-semibold text-gray-700 flex items-center gap-2">
<svg class="w-4 h-4 text-gray-700 inline-block" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
流转状态
</h2>
</div>
<div class="relative pl-7 pb-2">
<div class="absolute left-[9px] top-2 bottom-4 w-[2px] bg-gray-100"></div>
<!-- 状态 1: 当前 -->
<div class="relative mb-10">
<div class="absolute -left-[27px] top-1 w-[20px] h-[20px] rounded-full bg-green-600 border-4 border-green-100 flex items-center justify-center ring-1 ring-green-600/20">
<div class="w-2 h-2 rounded-full bg-white"></div>
</div>
<div class="flex flex-col gap-1">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-green-700">原始舱单</span>
<span class="text-green-600 text-xs font-normal bg-green-50 px-2 py-0.5 rounded-full">放行状态：01</span>
</div>
<div class="text-gray-400 text-xs font-normal flex items-center gap-1.5">
<span>2026-07-10 11:03:38</span>
</div>
</div>
</div>
<!-- 状态 2 -->
<div class="relative mb-10">
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
<div class="flex flex-col">
<span class="text-sm font-bold text-gray-400">航班落地</span>
</div>
</div>
<!-- 状态 2 -->
<div class="relative mb-10">
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
<div class="flex flex-col">
<span class="text-sm font-bold text-gray-400">分拣理货</span>
</div>
</div>
<!-- 状态 3 -->
<div class="relative mb-10">
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
<div class="flex flex-col">
<span class="text-sm font-bold text-gray-400">理货申报</span>
</div>
</div>
<!-- 状态 4 -->
<div class="relative mb-10">
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
<div class="flex flex-col">
<span class="text-sm font-bold text-gray-400">海关放行</span>
</div>
</div>
<!-- 状态 5 -->
<div class="relative mb-10">
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
<div class="flex flex-col">
<span class="text-sm font-bold text-gray-400">柜台办结</span>
</div>
</div>
<!-- 状态 6 -->
<div class="relative mb-2">
<div class="absolute -left-[22px] top-1.5 w-[10px] h-[10px] rounded-full bg-gray-200 border-2 border-white"></div>
<div class="flex flex-col">
<span class="text-sm font-bold text-gray-400">提取出库</span>
</div>
</div>
</div>
</div>
<!-- 模块 4: 操作详情卡片 -> 已删除 -->
<!-- 底部占位 -->
<div class="text-center py-6">
<p class="text-[10px] text-gray-300 uppercase tracking-[0.2em] font-bold">查询信息已触底</p>
</div>
</div>
<!-- 底部 Home Indicator 模拟 -->
<div class="h-8 w-full flex justify-center items-center flex-none bg-white/60 backdrop-blur-md">
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
</div>
</div>
</body>
</html>ml&gt;

951
documents/5.5寸手持端设计文件/10_进港查询/进港查询.html Normal file
View File

@@ -0,0 +1,951 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>进港查询</title>
<!-- Tailwind CSS (本地) -->
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<!-- Iconify 图标 -->
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<style>
@font-face {
font-family: 'PingFang SC';
src: local('PingFang SC');
}
body {
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #e5e7eb;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
/* 隐藏滚动条但保留功能 */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.status-tag {
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
.tag-occupied { background-color: #dcfce7; color: #22c55e; } /* 已出库 - 绿色 */
.tag-available { background-color: #dcfce7; color: #22c55e; } /* 已出库 - 绿色 */
.tag-repair { background-color: #fce7e7; color: #ef4444; } /* 离港 - 红色 */
/* 页面切换动画 */
.page {
position: absolute;
inset: 0;
transition: transform 0.3s ease-in-out;
background-color: #f3f4f6;
display: flex;
flex-direction: column;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.page::-webkit-scrollbar {
display: none;
}
.page-hidden-right { transform: translateX(100%); }
.page-hidden-left { transform: translateX(-100%); }
/* 统一的深蓝色调 */
.bg-header-blue { background-color: #2563EB; }
/* 标签页样式 */
.tab-item {
position: relative;
padding: 12px 0;
color: #999;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
text-align: center;
}
.tab-item.active {
color: #2563eb;
font-weight: bold;
}
.tab-item::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: #2563eb;
transition: width 0.3s ease;
}
.tab-item.active::after {
width: 40%;
}
/* ========== 筛选弹窗样式 提升层级+动画稳定 ========== */
.filter-overlay {
position: absolute;
inset: 0;
background-color: rgba(0,0,0,0.4);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.filter-overlay.show {
opacity: 1;
visibility: visible;
}
.filter-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 20px;
z-index: 10000;
transform: translateY(100%);
transition: transform 0.25s ease-out;
max-height: 80vh;
overflow-y: auto;
}
.filter-sheet.show {
transform: translateY(0);
}
/* 筛选输入框统一样式 */
.filter-input {
width: 100%;
height: 40px;
padding: 0 12px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
outline: none;
box-sizing: border-box;
}
.filter-input:focus {
border-color: #2563EB;
}
/* 下拉框箭头浅灰色 + 全浏览器兼容修复 */
select.filter-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 36px;
}
/* 清除IE默认下拉箭头 */
select.filter-input::-ms-expand {
display: none;
}
</style>
</head>
<body>
<div class="w-[375px] h-[812px] bg-[#F3F4F6] overflow-hidden flex flex-col relative shadow-2xl rounded-[40px] border-[8px] border-gray-800">
<!-- 状态栏 -->
<div class="bg-header-blue flex-none z-50">
<div class="flex justify-between items-center px-6 pt-3 pb-1 text-[12px] font-medium text-white">
<span>09:41</span>
<div class="flex gap-1.5 items-center">
<iconify-icon icon="material-symbols:signal-cellular-4-bar-rounded"></iconify-icon>
<iconify-icon icon="material-symbols:wifi"></iconify-icon>
<iconify-icon icon="material-symbols:battery-full-rounded"></iconify-icon>
</div>
</div>
</div>
<!-- 筛选弹窗容器 移到最外层，层级提升 -->
<div class="filter-overlay" id="filterOverlay"></div>
<div class="filter-sheet" id="filterSheet">
<!-- 顶部标题栏 -->
<div class="relative flex items-center justify-center mb-6">
<button class="absolute right-0 top-0 text-gray-400" onclick="closeFilter()">
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
</button>
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
</div>
<!-- 筛选表单区域 -->
<div class="space-y-4 mb-7">
<!-- 1.航班日期 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">航班日期起</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择航班日期" readonly="" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:calendar" width="18"></iconify-icon>
</div>
</div>
<!-- 1.航班日期 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">航班日期止</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择航班日期" readonly="" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:calendar" width="18"></iconify-icon>
</div>
</div>
<!-- 2.航班号 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">航班号</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入航班号" type="text" id="filterFlightNo">
</div>
</div>
<!-- 3.代理 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">代理</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择代理" readonly="" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
</div>
</div>
<!-- 4.特码 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">特码</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择特码" readonly="" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
</div>
</div>
<!-- 5.始发站 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">始发站</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入始发站" type="text" id="filterOrigin">
</div>
</div>
<!-- 6.运单类型 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">运单类型</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择运单类型" readonly="" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
</div>
</div>
<!-- 7.业务类型 -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">业务类型</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择业务类型" readonly="" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
</div>
</div>
<!-- 8.品名(中) -->
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">品名(中)</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入中文品名" type="text" id="filterCnName">
</div>
</div>
</div>
<!-- 底部操作按钮 -->
<div class="flex gap-3">
<button class="flex-1 h-11 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium" onclick="resetFilter()">重置</button>
<button class="flex-1 h-11 bg-[#2563EB] text-white rounded-lg text-sm font-medium" onclick="confirmFilter()">确定</button>
</div>
</div>
<!-- 页面主容器 -->
<div class="flex-1 relative overflow-hidden">
<!-- 列表页 -->
<div class="page z-10" id="listPage">
<!-- 头部 -->
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
<button class="flex items-center text-white text-sm absolute left-4">
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
<span>返回</span>
</button>
<h1 class="mx-auto text-white font-bold text-lg">进港查询</h1>
</header>
<!-- 搜索栏 筛选按钮已移除边框 -->
<div class="p-3 bg-transparent flex items-center gap-3 border-b border-gray-100 flex-none">
<div class="flex-1 bg-white rounded-xl flex items-center px-3 py-[10px] gap-2 border border-gray-50">
<iconify-icon class="text-[#9ca3af] text-lg" icon="mdi:magnify"></iconify-icon>
<input class="bg-transparent text-[14px] w-full outline-none text-gray-700 placeholder-[#9ca3af]" placeholder="搜索运单号" type="text"/>
<iconify-icon class="text-[#2563eb] text-lg" icon="mdi:qrcode-scan" onclick="alert('开启扫码功能')"></iconify-icon>
</div>
<!-- 筛选按钮 无圆形实线边框 -->
<button id="filterBtn" class="w-10 h-10 flex items-center justify-center bg-white rounded-full relative z-[99999]">
<iconify-icon class="text-[#2563eb] text-xl" icon="mdi:filter-variant"></iconify-icon>
</button>
</div>
<!-- 统计标签 -->
<div class="flex items-center gap-2 px-4 pb-3">
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#2563EB]">
<div class="text-[11px] text-gray-500">总票数</div>
<div class="text-[22px] font-bold text-[#2563EB] leading-tight mt-0.5">4</div>
</div>
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-orange-500">
<div class="text-[11px] text-gray-500">已入库</div>
<div class="text-[22px] font-bold text-orange-500 leading-tight mt-0.5">2</div>
</div>
<div class="flex-1 bg-white rounded-lg px-3 py-2.5 shadow-sm border-l-[4px] border-l-[#10B981]">
<div class="text-[11px] text-gray-500">已出库</div>
<div class="text-[22px] font-bold text-[#10B981] leading-tight mt-0.5">2</div>
</div>
</div>
<!-- ULD 列表内容 -->
<div class="p-3 space-y-3 pb-24 overflow-y-auto hide-scrollbar">
<!-- 卡片 1 -->
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363396')">
<div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<span class="font-bold text-[#1a1a1a]">78133363396</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
</div>
</div>
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
<span>件数：444</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
<span>重量：555</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
<span>代理人：中外运</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
<span>特码：DGR</span>
</div>
</div>
</div>
<!-- 卡片 2 -->
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363397')">
<div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<span class="font-bold text-[#1a1a1a]">78133363397</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
</div>
</div>
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
<span>件数：120</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
<span>重量：320</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
<span>代理人：徽远</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
<span>特码：PER</span>
</div>
</div>
</div>
<!-- 卡片 3 -->
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363398')">
<div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<span class="font-bold text-[#1a1a1a]">78133363398</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已入库</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
</div>
</div>
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
<span>件数：268</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
<span>重量：780</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
<span>代理人：中外运</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
<span>特码：NOR</span>
</div>
</div>
</div>
<!-- 卡片 4 -->
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363399')">
<div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<span class="font-bold text-[#1a1a1a]">78133363399</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
</div>
</div>
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
<span>件数：85</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
<span>重量：210</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
<span>代理人：徽远</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
<span>特码：DGR</span>
</div>
</div>
</div>
<!-- 卡片 5 -->
<div class="bg-white rounded-xl p-4 shadow-sm active:bg-gray-50 transition-colors border border-gray-50 cursor-pointer" onclick="showDetail('78133363400')">
<div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<span class="font-bold text-[#1a1a1a]">78133363400</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">已出库</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right"></iconify-icon>
</div>
</div>
<div class="grid grid-cols-2 gap-y-2 text-[13px] text-gray-500">
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:package-variant-closed"></iconify-icon>
<span>件数：350</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:weight-kilogram"></iconify-icon>
<span>重量：430</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-tie"></iconify-icon>
<span>代理人：中外运</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:tag-outline"></iconify-icon>
<span>特码：PER</span>
</div>
</div>
</div>
</div>
</div>
<!-- 详情页 -->
<div class="page z-20 page-hidden-right !bg-[#f0f2f5]" id="detailPage">
<!-- 头部 -->
<header class="bg-header-blue pt-2 pb-4 px-4 flex items-center relative flex-none">
<button class="flex items-center text-white text-sm absolute left-4 active:opacity-70" onclick="goBack()">
<iconify-icon class="text-xl" icon="mdi:chevron-left"></iconify-icon>
<span>返回</span>
</button>
<h1 class="mx-auto text-white font-bold text-lg">进港货物</h1>
<div class="absolute right-4 flex items-center">
<iconify-icon class="text-red-500 text-2xl" icon="mdi:file-document-edit-outline"></iconify-icon>
</div>
</header>
<!-- 标签页 -->
<div class="bg-white px-4 border-b border-gray-200 flex-none">
<div class="flex justify-around">
<div class="tab-item active cursor-pointer" onclick="switchTab(0)">运单信息</div>
<div class="tab-item cursor-pointer" onclick="switchTab(1)">仓库信息</div>
<div class="tab-item cursor-pointer" onclick="switchTab(2)">库位信息</div>
</div>
</div>
<!-- 详情内容区 -->
<div class="flex-1 overflow-y-auto hide-scrollbar">
<!-- 运单信息标签页 -->
<div class="tab-pane p-3 space-y-3" id="tab-content-0">
<!-- 卡片1：基本信息 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
<span class="text-xs font-semibold text-gray-800" id="det-uldTitle">基本信息</span>
</div>
<div class="p-3 grid grid-cols-2 gap-2">
<!-- Row 1 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单号</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billNo"></span>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">代理人</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-agent"></span>
</div>
<!-- Row 2 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">特码</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-code"></span>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">承运人</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-carrier"></span>
</div>
<!-- Row 3 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发港</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-route"></span>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">中转站</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
</div>
<!-- Row 4 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-dest"></span>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">UN编号</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-unNo"></span>
</div>
<!-- Row 5 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-lockStatus-container">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5" id="det-lockStatus-label">锁定状态</span>
<div id="det-lockStatus-wrapper">
<span class="text-xs font-semibold" id="det-lockStatus"></span>
</div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">包装类型</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-packType"></span>
</div>
<!-- Row 6 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">业务类型</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-type"></span>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-outboundTime"></span>
</div>
<!-- Row 7 运单类型单独一行 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单类型</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-billType"></span>
</div>
<!-- Row 8 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(中)</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameCn"></span>
</div>
<!-- Row 9 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">品名(英)</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-itemNameEn"></span>
</div>
<!-- Row 10 -->
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center col-span-2">
<span class="text-[10px] text-gray-500 text-[14px] mb-0.5">备注</span>
<span class="text-xs text-gray-800 font-semibold truncate" id="det-remark"></span>
</div>
</div>
</div>
<!-- 卡片2：件重信息 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
<span class="text-xs font-semibold text-gray-800">件重信息</span>
</div>
<div class="p-3 grid grid-cols-3 gap-2">
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单件数</div>
<div class="text-xs text-gray-800 font-semibold" id="det-pieces"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">运单重量</div>
<div class="text-xs text-gray-800 font-semibold" id="det-weight"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">计费重量</div>
<div class="text-xs text-gray-800 font-semibold" id="det-calcWeight"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">已出库件数</div>
<div class="text-xs text-gray-800 font-semibold" id="det-inPieces"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">已出库重量</div>
<div class="text-xs text-gray-800 font-semibold" id="det-inWeight"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center opacity-0">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">—</div>
<div class="text-xs text-gray-800 font-semibold">—</div>
</div>
</div>
</div>
<!-- 卡片3：回执信息 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="px-4 py-2.5 flex items-center border-b border-gray-100">
<div class="w-1 h-4 bg-blue-500 rounded-full inline-block mr-2"></div>
<span class="text-xs font-semibold text-gray-800">回执信息</span>
</div>
<div class="p-3 grid grid-cols-3 gap-2">
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">原始舱单</div>
<div class="text-xs text-gray-800 font-semibold" id="det-originalManifest"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">理货报告</div>
<div class="text-xs text-gray-800 font-semibold" id="det-tallyReport"></div>
</div>
<div class="bg-gray-50/30 rounded-lg p-2.5 flex flex-col justify-center" id="det-customsRelease-container">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">海关放行</div>
<div id="det-customsRelease-wrapper">
<div class="text-xs font-semibold" id="det-customsRelease"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 仓库信息标签页 -->
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-1"></div>
<!-- 库位信息标签页 -->
<div class="tab-pane p-3 space-y-3 hidden" id="tab-content-2"></div>
</div>
</div>
</div>
</div>
<script>
const uldData = {
'78133363396': {
billNo: '78133363396', agent: '中外运', code: 'DGR',
pieces: '444', weight: '555.0', type: '普通货物运输',
inPieces: '444', inWeight: '555.0', calcWeight: '555.0',
carrier: 'CA', route: 'LAX', packType: '纸箱',
billType: '国际进港（国际直航）', unNo: '—', dest: 'HFE',
itemNameCn: '电子元器件', itemNameEn: 'Electronic Components',
lockStatus: '未锁定', outboundTime: '—', remark: '需冷藏存储',
originalManifest: '01', tallyReport: '01', customsRelease: '11',
warehouse: [
{ batch: '1', pieces: 200, weight: 300.0, flightDate: '2026-07-08', flightNo: 'CA1234',route: 'LAX',dest: 'HFE', time: '2026-07-08 14:30:00' },
{ batch: '2', pieces: 244, weight: 255.0, flightDate: '2026-07-09', flightNo: 'CA5678',route: 'LAX',dest: 'HFE', time: '2026-07-09 09:10:46' }
],
locations: [
{ id: 'A-01-001', inPerson: '张三', inTime: '2026-07-08 14:30', outPerson: '李四', outTime: '2026-07-09 10:00' },
{ id: 'B-02-005', inPerson: '王五', inTime: '2026-07-09 09:10', outPerson: '—', outTime: '—' }
]
},
'78133363397': {
billNo: '78133363397', agent: '徽远', code: 'PER',
pieces: '120', weight: '320.0', type: '普通货物运输',
inPieces: '120', inWeight: '320.0', calcWeight: '320.0',
carrier: 'MU', route: 'PVG-NRT', packType: '托盘',
billType: '国际进港（国际直航）', unNo: '—', dest: 'PVG',
itemNameCn: '服装', itemNameEn: 'Garments',
lockStatus: '未锁定', outboundTime: '—', remark: '易碎品，轻拿轻放',
originalManifest: '01', tallyReport: '01', customsRelease: '11',
warehouse: [
{ batch: '3', pieces: 60, weight: 150.0, flightDate: '2026-07-07', flightNo: 'MU123',route: 'LAX',dest: 'HFE', time: '2026-07-07 16:20:00' },
{ batch: '4', pieces: 60, weight: 170.0, flightDate: '2026-07-08', flightNo: 'MU456',route: 'LAX',dest: 'HFE', time: '2026-07-08 11:00:00' }
],
locations: [
{ id: 'A-03-012', inPerson: '赵六', inTime: '2026-07-07 16:20', outPerson: '钱七', outTime: '2026-07-08 14:00' },
{ id: 'C-01-008', inPerson: '孙八', inTime: '2026-07-08 11:00', outPerson: '—', outTime: '—' }
]
},
'78133363398': {
billNo: '78133363398', agent: '中外运', code: 'NOR',
pieces: '268', weight: '780.0', type: '普通货物运输',
inPieces: '268', inWeight: '780.0', calcWeight: '780.0',
carrier: 'CZ', route: 'CAN-AMS', packType: '托盘',
billType: '国际进港（国际直航）', unNo: '—', dest: 'CAN',
itemNameCn: '机械设备', itemNameEn: 'Machinery Equipment',
lockStatus: '锁定', outboundTime: '2026-07-09 08:00', remark: '需叉车装卸',
originalManifest: '01', tallyReport: '01', customsRelease: '11',
warehouse: [
{ batch: '5', pieces: 150, weight: 420.0, flightDate: '2026-07-08', flightNo: 'CZ789',route: 'LAX',dest: 'HFE', time: '2026-07-08 22:15:00' },
{ batch: '6', pieces: 118, weight: 360.0, flightDate: '2026-07-09', flightNo: 'CZ012',route: 'LAX',dest: 'HFE', time: '2026-07-09 06:30:00' },
{ batch: '7', pieces: 100, weight: 200.0, flightDate: '2026-07-09', flightNo: 'CZ345',route: 'LAX',dest: 'HFE', time: '2026-07-09 13:00:00' }
],
locations: [
{ id: 'B-01-003', inPerson: '张三', inTime: '2026-07-08 22:15', outPerson: '李四', outTime: '2026-07-09 06:00' },
{ id: 'A-02-010', inPerson: '王五', inTime: '2026-07-09 06:30', outPerson: '—', outTime: '—' },
{ id: 'C-03-007', inPerson: '赵六', inTime: '2026-07-09 13:00', outPerson: '—', outTime: '—' }
]
},
'78133363399': {
billNo: '78133363399', agent: '徽远', code: 'DGR',
pieces: '85', weight: '210.0', type: '危险品运输',
inPieces: '85', inWeight: '210.0', calcWeight: '210.0',
carrier: '3U', route: 'CTU-SIN', packType: '铁箱',
billType: '国际进港（国际直航）', unNo: 'UN3480', dest: 'CTU',
itemNameCn: '锂电池', itemNameEn: 'Lithium Battery',
lockStatus: '锁定', outboundTime: '—', remark: '危险品，单独存放',
originalManifest: '01', tallyReport: '01', customsRelease: '11',
warehouse: [
{ batch: '8', pieces: 45, weight: 110.0, flightDate: '2026-07-08', flightNo: '3U678',route: 'LAX',dest: 'HFE', time: '2026-07-08 18:00:00' },
{ batch: '9', pieces: 40, weight: 100.0, flightDate: '2026-07-09', flightNo: '3U901',route: 'LAX',dest: 'HFE', time: '2026-07-09 07:45:00' }
],
locations: [
{ id: 'D-01-002', inPerson: '钱七', inTime: '2026-07-08 18:00', outPerson: '孙八', outTime: '2026-07-09 08:00' },
{ id: 'A-04-015', inPerson: '张三', inTime: '2026-07-09 07:45', outPerson: '—', outTime: '—' }
]
},
'78133363400': {
billNo: '78133363400', agent: '中外运', code: 'PER',
pieces: '350', weight: '430.0', type: '普通货物运输',
inPieces: '350', inWeight: '430.0', calcWeight: '430.0',
carrier: 'HU', route: 'HKG-HFE', packType: '纸箱',
billType: '国际进港（国际直航）', unNo: '—', dest: 'HFE',
itemNameCn: '食品', itemNameEn: 'Food Products',
lockStatus: '未锁定', outboundTime: '2026-07-09 11:30', remark: '保质期至2026-12',
originalManifest: '01', tallyReport: '01', customsRelease: '11',
warehouse: [
{ batch: '10', pieces: 180, weight: 220.0, flightDate: '2026-07-07', flightNo: 'HU234',route: 'LAX',dest: 'HFE', time: '2026-07-07 20:00:00' },
{ batch: '11', pieces: 170, weight: 210.0, flightDate: '2026-07-09', flightNo: 'HU567',route: 'LAX',dest: 'HFE', time: '2026-07-09 10:30:00' }
],
locations: [
{ id: 'B-02-011', inPerson: '李四', inTime: '2026-07-07 20:00', outPerson: '王五', outTime: '2026-07-08 16:00' },
{ id: 'C-01-009', inPerson: '赵六', inTime: '2026-07-09 10:30', outPerson: '—', outTime: '—' }
]
}
};
// 核心修复：等待DOM全部渲染完成后再绑定点击事件，避免获取元素为null
document.addEventListener('DOMContentLoaded', function() {
const filterOverlay = document.getElementById('filterOverlay');
const filterSheet = document.getElementById('filterSheet');
const filterBtn = document.getElementById('filterBtn');
// 点击遮罩空白关闭，添加self防止弹窗内部点击穿透关闭
filterOverlay.addEventListener('click', function(e) {
if (e.target === filterOverlay) {
closeFilter();
}
});
// 筛选按钮点击打开弹窗
filterBtn.addEventListener('click', openFilter);
});
// 打开筛选弹窗
function openFilter() {
const filterOverlay = document.getElementById('filterOverlay');
const filterSheet = document.getElementById('filterSheet');
filterOverlay.classList.add('show');
setTimeout(() => filterSheet.classList.add('show'), 10);
}
// 关闭筛选弹窗
function closeFilter() {
const filterOverlay = document.getElementById('filterOverlay');
const filterSheet = document.getElementById('filterSheet');
filterSheet.classList.remove('show');
setTimeout(() => filterOverlay.classList.remove('show'), 250);
}
// 重置所有筛选输入框
function resetFilter() {
document.querySelectorAll('.filter-input').forEach(input => {
input.value = '';
});
}
// 确定筛选（模拟查询，可对接后端筛选逻辑）
function confirmFilter() {
const params = {
flightDate: document.getElementById('filterFlightDate').value,
flightNo: document.getElementById('filterFlightNo').value,
agent: document.getElementById('filterAgent').value,
code: document.getElementById('filterCode').value,
origin: document.getElementById('filterOrigin').value,
billType: document.getElementById('filterBillType').value,
bizType: document.getElementById('filterBizType').value,
cnName: document.getElementById('filterCnName').value
};
console.log('筛选参数：', params);
alert('筛选执行成功，控制台可查看筛选条件');
closeFilter();
}
function showDetail(id) {
const listPage = document.getElementById('listPage');
const detailPage = document.getElementById('detailPage');
const data = uldData[id];
if (data) {
document.getElementById('det-uldTitle').innerText = '基本信息';
document.getElementById('det-billNo').innerText = data.billNo;
document.getElementById('det-agent').innerText = data.agent;
document.getElementById('det-code').innerText = data.code;
document.getElementById('det-carrier').innerText = data.carrier;
document.getElementById('det-route').innerText = data.route;
document.getElementById('det-dest').innerText = data.dest;
document.getElementById('det-billType').innerText = data.billType;
document.getElementById('det-unNo').innerText = data.unNo;
// 锁定状态渲染
const lockStatusEl = document.getElementById('det-lockStatus');
if (data.lockStatus === '锁定') {
lockStatusEl.innerHTML = '<iconify-icon icon="mdi:lock" class="mr-1"></iconify-icon>锁定';
lockStatusEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-red-50 text-red-600 inline-flex items-center';
} else {
lockStatusEl.innerHTML = '—';
lockStatusEl.className = 'text-xs font-semibold text-gray-800';
}
document.getElementById('det-packType').innerText = data.packType;
document.getElementById('det-type').innerText = data.type;
document.getElementById('det-outboundTime').innerText = data.outboundTime || '—';
document.getElementById('det-itemNameCn').innerText = data.itemNameCn || '—';
document.getElementById('det-itemNameEn').innerText = data.itemNameEn || '—';
document.getElementById('det-remark').innerText = data.remark || '—';
// 件重信息
document.getElementById('det-pieces').innerText = data.pieces;
document.getElementById('det-weight').innerText = data.weight;
document.getElementById('det-calcWeight').innerText = data.calcWeight;
document.getElementById('det-inPieces').innerText = data.inPieces;
document.getElementById('det-inWeight').innerText = data.inWeight;
// 海关放行标签
const customsReleaseEl = document.getElementById('det-customsRelease');
if (data.customsRelease === '11') {
customsReleaseEl.innerText = '已放行';
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-600 inline-block';
} else {
customsReleaseEl.innerText = data.customsRelease || '未放行';
customsReleaseEl.className = 'text-xs font-semibold px-2 py-0.5 rounded-md bg-gray-100 text-gray-600 inline-block';
}
// 渲染仓库批次列表
const warehouseContainer = document.getElementById('tab-content-1');
warehouseContainer.innerHTML = '';
data.warehouse.forEach(item => {
warehouseContainer.innerHTML += `
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
<div class="flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
<span class="text-xs font-semibold text-gray-900">批次号: ${item.batch}</span>
</div>
</div>
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">件数</div>
<div class="text-xs font-semibold text-gray-800">${item.pieces}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">重量</div>
<div class="text-xs font-semibold text-gray-800">${parseFloat(item.weight).toFixed(1)} kg</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班日期</div>
<div class="text-xs font-semibold text-gray-800">${item.flightDate}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">航班号</div>
<div class="text-xs font-semibold text-gray-800">${item.flightNo}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">始发站</div>
<div class="text-xs font-semibold text-gray-800">${item.route}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">目的站</div>
<div class="text-xs font-semibold text-gray-800">${item.dest}</div>
</div>
</div>
</div>`;
});
// 渲染库位信息
const locationContainer = document.getElementById('tab-content-2');
locationContainer.innerHTML = '';
data.locations.forEach(loc => {
locationContainer.innerHTML += `
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="flex justify-between items-center pt-3 pb-1.5 px-3 mb-2 border-b border-gray-100">
<div class="flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block"></span>
<span class="text-xs font-bold text-gray-900">${loc.id}</span>
</div>
</div>
<div class="grid grid-cols-2 gap-1.5 px-3 pb-2">
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库人</div>
<div class="text-xs font-semibold text-gray-800">${loc.inPerson}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">入库时间</div>
<div class="text-xs font-semibold text-gray-800">${loc.inTime}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库人</div>
<div class="text-xs ${loc.outPerson === '—' ? 'text-gray-500 text-[14px]' : 'text-gray-800'} font-semibold">${loc.outPerson}</div>
</div>
<div class="bg-gray-50/50 rounded-lg p-2">
<div class="text-[10px] text-gray-500 text-[14px] mb-0.5">出库时间</div>
<div class="text-xs ${loc.outTime === '—' ? 'text-gray-500 text-[14px]' : 'text-gray-800'} font-semibold">${loc.outTime}</div>
</div>
</div>
</div>`;
});
}
switchTab(0);
listPage.classList.add('page-hidden-left');
detailPage.classList.remove('page-hidden-right');
}
function goBack() {
const listPage = document.getElementById('listPage');
const detailPage = document.getElementById('detailPage');
listPage.classList.remove('page-hidden-left');
detailPage.classList.add('page-hidden-right');
}
function switchTab(index) {
const tabs = document.querySelectorAll('.tab-item');
const contents = document.querySelectorAll('.tab-pane');
tabs.forEach((tab, i) => {
if (i === index) {
tab.classList.add('active');
contents[i].classList.remove('hidden');
} else {
tab.classList.remove('active');
contents[i].classList.add('hidden');
}
});
}
// 搜索框聚焦监听
document.querySelector('input[placeholder="搜索ULD编号"]').addEventListener('focus', () => {
console.log('搜索框已激活');
});
</script>
</div>
</body>
</html>