feat: 完成国际出港移库/出库交接页面5.5寸手机端适配
- 落地手机端双形态适配框架：同名布局+资源限定符（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:
134
documents/5.5寸手持端设计文件/11_进港移库/photo.html
Normal file
134
documents/5.5寸手持端设计文件/11_进港移库/photo.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<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: 'PingFang SC';
|
||||
src: local('PingFang SC');
|
||||
}
|
||||
body {
|
||||
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background-color: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center" onclick="closeWin()">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">拍照上传</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1 overflow-y-auto p-4 bg-[#f5f6fa]">
|
||||
<div class="bg-white rounded-xl p-5 shadow">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold">运单照片上传</h2>
|
||||
</div>
|
||||
|
||||
<div id="previewWrap" class="grid grid-cols-3 gap-2 mb-4 min-h-[100px]"></div>
|
||||
|
||||
<input type="file" id="fileInput" accept="image/*" capture="camera" multiple class="hidden">
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 bg-blue-600 text-white py-2 rounded" onclick="fileInput.click()">
|
||||
拍照/上传
|
||||
</button>
|
||||
<button class="flex-1 bg-green-600 text-white py-2 rounded" onclick="submitPhotos()">
|
||||
确认提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const awb = sessionStorage.getItem('currentAwb');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const previewWrap = document.getElementById('previewWrap');
|
||||
let fileList = [];
|
||||
|
||||
// 选择图片
|
||||
fileInput.onchange = function () {
|
||||
for (let file of this.files) {
|
||||
const url = URL.createObjectURL(file);
|
||||
fileList.push({ file, url });
|
||||
renderPreview();
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染预览
|
||||
function renderPreview() {
|
||||
previewWrap.innerHTML = '';
|
||||
fileList.forEach((item, idx) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'relative border rounded h-20 overflow-hidden';
|
||||
div.innerHTML = `
|
||||
<img src="${item.url}" class="w-full h-full object-cover">
|
||||
<button onclick="delImg(${idx})"
|
||||
class="absolute top-1 right-1 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center">
|
||||
×
|
||||
</button>
|
||||
`;
|
||||
previewWrap.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
function delImg(index) {
|
||||
fileList.splice(index, 1);
|
||||
renderPreview();
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submitPhotos() {
|
||||
const urls = fileList.map(item => item.url);
|
||||
sessionStorage.setItem('uploadedPhotos', JSON.stringify(urls));
|
||||
closeWin();
|
||||
}
|
||||
|
||||
function closeWin() {
|
||||
window.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
831
documents/5.5寸手持端设计文件/11_进港移库/进港移库.html
Normal file
831
documents/5.5寸手持端设计文件/11_进港移库/进港移库.html
Normal file
@@ -0,0 +1,831 @@
|
||||
<!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>
|
||||
<!-- 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: #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.phone-container {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
background-color: #f5f6fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 8px solid #1a1a1a;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.page {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.page.active {
|
||||
display: flex;
|
||||
}
|
||||
#filter-panel {
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
#filter-panel.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.overlay {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.overlay.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.btn-active:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.custom-checkbox-round {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.custom-checkbox-round:checked {
|
||||
background-color: #2563EB;
|
||||
border-color: #2563EB;
|
||||
}
|
||||
.custom-checkbox-round:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* 长按拍照浮层核心样式 */
|
||||
.card-action-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 20px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-action-overlay.show {
|
||||
display: flex;
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* 卡片必须相对定位，浮层才能盖住自身 */
|
||||
.pending-card, #list-shipped > div {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-container">
|
||||
<!-- 状态栏 -->
|
||||
<div class="h-10 w-full flex justify-between items-center px-8 flex-none bg-[#2563EB] text-white">
|
||||
<span class="text-xs font-semibold">09:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<iconify-icon icon="mdi:signal" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:wifi" width="14"></iconify-icon>
|
||||
<iconify-icon icon="mdi:battery" width="18"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表首页 -->
|
||||
<div class="page active" id="page-home">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="alert('返回首页')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">进港移库</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容区域 -->
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-24">
|
||||
<!-- 搜索栏 -->
|
||||
<section class="px-4 pt-4 pb-3 bg-white">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center bg-white border border-gray-200 shadow-sm rounded-[12px] h-10 px-3 gap-2 flex-1">
|
||||
<iconify-icon class="text-gray-400 text-lg flex-none" icon="mdi:magnify"></iconify-icon>
|
||||
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none rounded-lg px-2" placeholder="搜索运单号" type="text"/>
|
||||
<button class="flex-none text-blue-500">
|
||||
<iconify-icon class="text-lg" icon="mdi:qrcode-scan"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<button class="bg-white p-2.5 rounded-full shadow-sm border border-gray-200 text-[#2563EB] flex items-center justify-center flex-none" onclick="toggleFilterDrawer(true)">
|
||||
<iconify-icon class="text-xl" icon="mdi:filter-variant"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="flex bg-white border-b sticky top-0 z-20">
|
||||
<button class="flex-1 py-3 text-sm font-bold text-[#1F2937] border-b-2 border-[#1F2937] transition-all" id="tab-pending" onclick="switchTab('pending')">
|
||||
待移库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
<button class="flex-1 py-3 text-sm font-bold text-gray-400 border-b-2 border-transparent transition-all" id="tab-shipped" onclick="switchTab('shipped')">
|
||||
已移库 <span class="bg-[#DBEAF6] text-[#2563EB] text-[11px] font-medium px-1.5 py-0.5 rounded-md ml-1.5">3</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 待移库列表 -->
|
||||
<div class="p-3 pt-4 space-y-3" id="list-pending">
|
||||
<!-- 卡片1 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363573</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">NOR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">100件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end border-t border-gray-100 pt-3">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363573', status: '待移库', agent: 'NOR', pieces: '100', weight: '200', goodsName: '电子元器件', carrier: 'MU', route: 'HFE-NKG-LAX', location: 'A区-03货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 拍照浮层 -->
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363573')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片2 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363574</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">PER</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">85件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">150kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-PEK-LAX</span>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end border-t border-gray-100 pt-3">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363574', status: '待移库', agent: 'PER', pieces: '85', weight: '150', goodsName: '服装鞋帽', carrier: 'CA', route: 'HFE-PEK-LAX', location: 'B区-05货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363574')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 卡片3 -->
|
||||
<div class="pending-card bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="handleCheckboxClick(this, event)" type="checkbox"/>
|
||||
<div class="text-[#2563EB] text-[15px] font-bold">78133363575</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="bg-orange-100 text-orange-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">待移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">200件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">450kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end border-t border-gray-100 pt-3">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363575', status: '待移库', agent: 'DHL', pieces: '200', weight: '450', goodsName: '精密模具', carrier: '3U', route: 'HFE-NKG-LAX', location: 'C区-01货位', code: 'NOR', counterPerson: '--', counterTime: '--', outboundPerson: '', outboundTime: ''})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363575')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已移库列表 -->
|
||||
<div class="p-3 pt-4 space-y-3 hidden" id="list-shipped">
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363001</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">NOR</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">50件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">80kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363001', status: '已移库', agent: 'NOR', pieces: '50', weight: '80', pickupNo: 'TH20260701001', goodsName: '精密仪器', carrier: 'MU', route: 'HFE-NKG-LAX', location: 'B区-05货位', code: 'NOR', counterTime: '2026-07-05 10:30', counterPerson: '张三', outboundTime: '2026-07-05 11:45', outboundPerson: '张三'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363001')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363002</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">PER</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">120件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">300kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-PEK-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363002', status: '已移库', agent: 'PER', pieces: '120', weight: '300', pickupNo: 'TH20260702002', goodsName: '鲜花绿植', carrier: 'CA', route: 'HFE-PEK-LAX', location: 'A区-08货位', code: 'NOR', counterTime: '2026-07-06 09:15', counterPerson: '王五', outboundTime: '2026-07-06 10:30', outboundPerson: '赵六'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363002')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-3 overflow-hidden"
|
||||
onmousedown="startLongPress(this, event)"
|
||||
onmouseup="endLongPress()"
|
||||
onmouseleave="endLongPress()"
|
||||
ontouchstart="startLongPress(this, event)"
|
||||
ontouchmove="cancelLongPress()"
|
||||
ontouchend="endLongPress()">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-[#1F2937] text-[15px] font-bold">78133363003</div>
|
||||
<div class="flex items-center gap-1 text-[#1F2937] text-[13px] font-medium">
|
||||
<iconify-icon class="text-[#10B981]" icon="mdi:check-circle" width="16"></iconify-icon>
|
||||
<span>已移库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-3 flex items-center gap-1">
|
||||
<iconify-icon icon="mdi:airplane" class="text-gray-500 text-[14px]"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">航班信息：20260709/MU2311</span>
|
||||
</div>
|
||||
<div class="bg-[#F3F4F6] rounded-lg p-3 grid grid-cols-3 text-center">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#9CA3AF] text-[11px]">特码</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">DHL</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">件数</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">75件</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-gray-200">
|
||||
<span class="text-[#9CA3AF] text-[11px]">重量</span>
|
||||
<span class="text-[#1F2937] text-[14px] font-semibold">160kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:account-outline"></iconify-icon>
|
||||
<span class="text-[#6B7280] text-[13px]">出运路径：HFE-NKG-LAX</span>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-end border-t border-gray-50 pt-2">
|
||||
<div class="text-[#2563EB] text-[14px] font-medium flex items-center cursor-pointer btn-active" onclick="showDetail({id: '78133363003', status: '已移库', agent: 'DHL', pieces: '75', weight: '160', pickupNo: 'TH20260703003', goodsName: '生鲜食品', carrier: '3U', route: 'HFE-NKG-LAX', location: 'D区-02货位', code: 'NOR', counterTime: '2026-07-06 14:00', counterPerson: '钱七', outboundTime: '2026-07-06 15:20', outboundPerson: '孙八'})">
|
||||
查看详情 <iconify-icon icon="mdi:chevron-right" width="16"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action-overlay" onclick="closeSelf(this)">
|
||||
<button class="bg-purple-500 text-white w-14 h-14 rounded-full shadow-lg shadow-purple-500/30 flex items-center justify-center text-[10px] font-bold leading-tight" onclick="event.stopPropagation();goToPhoto('78133363003')">拍照</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-4 pb-4" id="bottom-toolbar">
|
||||
<div class="px-4 flex items-center w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="custom-checkbox-round" id="select-all-cb" onclick="toggleSelePERll(this.checked)" type="checkbox"/>
|
||||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0</span> 项</span>
|
||||
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 btn-active" onclick="alert('移库操作')">
|
||||
移库
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运单详情页面 -->
|
||||
<div class="page" id="page-detail">
|
||||
<div class="bg-[#2563EB] text-white h-12 flex items-center justify-between px-4 flex-none">
|
||||
<div class="flex items-center btn-active" onclick="switchPage('page-home')">
|
||||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||||
<span class="text-sm font-bold -ml-1">返回</span>
|
||||
</div>
|
||||
<h1 class="text-lg font-medium">运单详情</h1>
|
||||
<div class="w-16"></div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar pb-8 p-4">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<div class="bg-[#2563EB] px-4 py-3 flex justify-between items-center text-white">
|
||||
<span class="font-bold text-[17px] leading-tight" id="detail-awb">781-22222620</span>
|
||||
<div class="flex items-center text-[13px] font-normal opacity-90">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full mr-1.5"></span>
|
||||
<span id="detail-time">2026-05-10 08:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-[#EF4444] text-white text-[11px] px-1.5 py-0.5 rounded leading-tight font-medium">国际进港</span>
|
||||
<span class="text-[13px] font-normal text-[#666666] border-l border-gray-300 pl-2">普通货物运输</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[22px] font-bold text-[#111827] mb-3" id="detail-goods-name">电子元器件</div>
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">件数</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-count">55</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">重量</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-weight">622.00 kg</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">特码</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-code">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">代理</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-agent">NOR</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">出运路径</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-medium" id="detail-route">HFE-PEK-LAX</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-[2px]">
|
||||
<div class="text-[12px] text-[#9CA3AF] font-normal">承运人</div>
|
||||
<div class="text-[15px] text-[#1F2937] font-bold" id="detail-carrier">MU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移库信息卡片-->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 hidden" id="detail-outbound-card">
|
||||
<div class="bg-[#10B981] px-4 py-2.5">
|
||||
<span class="text-white font-semibold text-[15px]">移库信息</span>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-3 grid grid-cols-2 gap-y-3">
|
||||
<div class="flex flex-col" id="detail-outbound-person-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">移库人</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-person">-</span>
|
||||
</div>
|
||||
<div class="flex flex-col" id="detail-outbound-time-row">
|
||||
<span class="text-[12px] text-[#9CA3AF] font-normal mb-[2px]">移库时间</span>
|
||||
<span class="text-[14px] text-[#1F2937] font-medium" id="detail-outbound-time">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常照片-->
|
||||
<div class="mt-4 bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
|
||||
<div class="bg-[#F9971E] px-4 py-3 flex items-center">
|
||||
<span class="text-white font-semibold text-[15px]">异常照片</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div id="image-preview-list" class="grid grid-cols-3 gap-3">
|
||||
<div class="border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg">+</div>
|
||||
<div class="border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg">+</div>
|
||||
<div class="border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部筛选遮罩 -->
|
||||
<div class="overlay absolute inset-0 z-30" id="filter-overlay" onclick="toggleFilterDrawer(false)"></div>
|
||||
|
||||
<!-- 筛选弹窗 -->
|
||||
<div class="absolute bottom-0 w-full bg-white rounded-t-3xl z-50 p-6 shadow-2xl overflow-hidden" id="filter-panel">
|
||||
<div class="relative flex items-center justify-center mb-6">
|
||||
<h2 class="text-center text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||||
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
|
||||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- 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>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[14px] text-gray-700 mb-1.5">特码</label>
|
||||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between text-gray-400">
|
||||
<span class="text-sm">请选择特码</span>
|
||||
<iconify-icon icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-[14px] text-gray-700 mb-1.5">运单类型</label>
|
||||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between text-gray-400">
|
||||
<span class="text-sm">请选择特码</span>
|
||||
<iconify-icon icon="mdi:chevron-down"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 pt-2">
|
||||
<button class="flex-1 bg-white border border-gray-300 text-gray-600 py-3.5 rounded-xl font-bold btn-active" onclick="alert('已重置')">
|
||||
重置
|
||||
</button>
|
||||
<button class="flex-1 bg-[#2563EB] text-white py-3.5 rounded-xl font-bold shadow-lg shadow-blue-500/20 btn-active" onclick="toggleFilterDrawer(false)">
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页面切换
|
||||
function switchPage(pageId) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById(pageId).classList.add('active');
|
||||
if(pageId === 'page-detail'){
|
||||
document.querySelector('#page-detail .no-scrollbar').scrollTop = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab切换
|
||||
function switchTab(type) {
|
||||
const tabPending = document.getElementById('tab-pending');
|
||||
const tabShipped = document.getElementById('tab-shipped');
|
||||
const listPending = document.getElementById('list-pending');
|
||||
const listShipped = document.getElementById('list-shipped');
|
||||
const bottomToolbar = document.getElementById('bottom-toolbar');
|
||||
|
||||
if (type === 'pending') {
|
||||
tabPending.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabPending.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.add('text-gray-400', 'border-transparent');
|
||||
tabShipped.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listPending.classList.remove('hidden');
|
||||
listShipped.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'flex';
|
||||
} else {
|
||||
tabShipped.classList.add('text-[#1F2937]', 'border-[#1F2937]');
|
||||
tabShipped.classList.remove('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.add('text-gray-400', 'border-transparent');
|
||||
tabPending.classList.remove('text-[#1F2937]', 'border-[#1F2937]');
|
||||
|
||||
listShipped.classList.remove('hidden');
|
||||
listPending.classList.add('hidden');
|
||||
bottomToolbar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
function toggleSelePERll(checked) {
|
||||
const checkboxes = document.querySelectorAll('.item-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = checked;
|
||||
});
|
||||
updateSelectionCount();
|
||||
}
|
||||
|
||||
// 单选
|
||||
function handleCheckboxClick(checkbox, event) {
|
||||
event.stopPropagation();
|
||||
updateSelectionCount();
|
||||
const allBox = document.getElementById('select-all-cb');
|
||||
const all = Array.from(document.querySelectorAll('.item-checkbox')).every(i => i.checked);
|
||||
allBox.checked = all;
|
||||
}
|
||||
|
||||
// 更新选中数量
|
||||
function updateSelectionCount() {
|
||||
const cnt = document.querySelectorAll('.item-checkbox:checked').length;
|
||||
document.getElementById('selected-count').textContent = cnt;
|
||||
}
|
||||
|
||||
// 图片存储全局对象
|
||||
let photoStore = {};
|
||||
|
||||
// 查看详情
|
||||
function showDetail(data) {
|
||||
if (!data) return;
|
||||
const setText = (id, val) => {
|
||||
const el = document.getElementById(id);
|
||||
if(el) el.textContent = val || '-';
|
||||
};
|
||||
setText('detail-awb', data.id);
|
||||
setText('detail-goods-name', data.goodsName);
|
||||
setText('detail-count', data.pieces);
|
||||
setText('detail-weight', data.weight + (String(data.weight).includes('kg') ? '' : ' kg'));
|
||||
setText('detail-code', data.code);
|
||||
setText('detail-agent', data.agent);
|
||||
setText('detail-carrier', data.carrier);
|
||||
setText('detail-route', data.route || 'HFE-PEK-LAX');
|
||||
|
||||
// 渲染图片：最多3格，有图显示图片，空位虚线+占位
|
||||
const list = document.getElementById('image-preview-list');
|
||||
list.innerHTML = '';
|
||||
const imgs = photoStore[data.id] || [];
|
||||
const maxSlot = 3;
|
||||
for(let i = 0; i < maxSlot; i++){
|
||||
if(imgs[i]){
|
||||
// 已有图片
|
||||
const imgWrap = document.createElement('div');
|
||||
imgWrap.className = 'border border-gray-200 rounded-lg h-24 overflow-hidden';
|
||||
imgWrap.innerHTML = `<img src="${imgs[i]}" class="w-full h-full object-cover">`;
|
||||
list.appendChild(imgWrap);
|
||||
}else{
|
||||
// 空虚线占位框
|
||||
const emptyBox = document.createElement('div');
|
||||
emptyBox.className = 'border border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center text-gray-400 text-lg';
|
||||
emptyBox.textContent = '+';
|
||||
list.appendChild(emptyBox);
|
||||
}
|
||||
}
|
||||
|
||||
const outboundCard = document.getElementById('detail-outbound-card');
|
||||
if(data.status === '待移库'){
|
||||
outboundCard.classList.add('hidden');
|
||||
}else{
|
||||
outboundCard.classList.remove('hidden');
|
||||
setText('detail-outbound-person', data.outboundPerson);
|
||||
setText('detail-outbound-time', data.outboundTime);
|
||||
}
|
||||
switchPage('page-detail');
|
||||
}
|
||||
|
||||
// 筛选抽屉
|
||||
function toggleFilterDrawer(show) {
|
||||
const panel = document.getElementById('filter-panel');
|
||||
const overlay = document.getElementById('filter-overlay');
|
||||
if(show){
|
||||
panel.classList.add('show');
|
||||
overlay.classList.add('show');
|
||||
}else{
|
||||
panel.classList.remove('show');
|
||||
overlay.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== 长按拍照完整逻辑 =====================
|
||||
let longPressTimer = null;
|
||||
const LONG_PRESS_DELAY = 600;
|
||||
let isShowOverlay = false;
|
||||
|
||||
// 关闭单个遮罩
|
||||
function closeSelf(dom) {
|
||||
dom.classList.remove('show');
|
||||
isShowOverlay = false;
|
||||
}
|
||||
// 关闭全部遮罩
|
||||
function closeAllOverlay() {
|
||||
document.querySelectorAll('.card-action-overlay').forEach(item => {
|
||||
item.classList.remove('show');
|
||||
})
|
||||
isShowOverlay = false;
|
||||
}
|
||||
// 开始长按
|
||||
function startLongPress(cardDom, e) {
|
||||
if (e) e.preventDefault();
|
||||
if (isShowOverlay) return;
|
||||
closeAllOverlay();
|
||||
clearTimeout(longPressTimer);
|
||||
longPressTimer = setTimeout(() => {
|
||||
cardDom.querySelector('.card-action-overlay').classList.add('show');
|
||||
isShowOverlay = true;
|
||||
}, LONG_PRESS_DELAY)
|
||||
}
|
||||
// 滑动取消长按
|
||||
function cancelLongPress() {
|
||||
if (!isShowOverlay) clearTimeout(longPressTimer);
|
||||
}
|
||||
// 松开鼠标/手指
|
||||
function endLongPress() {
|
||||
clearTimeout(longPressTimer);
|
||||
}
|
||||
// 跳转拍照页，传递运单号
|
||||
function goToPhoto(awb) {
|
||||
sessionStorage.setItem('currentAwb', awb);
|
||||
window.open('photo.html', '_blank');
|
||||
}
|
||||
// 页面加载读取上传图片
|
||||
window.onload = function() {
|
||||
const uploadData = sessionStorage.getItem('uploadedPhotos');
|
||||
const awb = sessionStorage.getItem('currentAwb');
|
||||
if(uploadData && awb) {
|
||||
photoStore[awb] = JSON.parse(uploadData);
|
||||
sessionStorage.removeItem('uploadedPhotos');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user