YANG JIANKUAN
db062c8ee3
- 落地手机端双形态适配框架：同名布局+资源限定符（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>
951 lines
53 KiB
HTML
951 lines
53 KiB
HTML
<!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> |