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>
413 lines
25 KiB
HTML
413 lines
25 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>
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.phone-shell {
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-200 h-screen flex items-center justify-center font-sans">
|
|
<!-- 手机外壳容器 -->
|
|
<div class="phone-shell w-[375px] h-[812px] bg-[#F5F5F7] rounded-[48px] border-[10px] border-gray-900 overflow-hidden flex flex-col relative">
|
|
<!-- 顶部蓝色背景区域 -->
|
|
<div class="bg-[#1A73E8] flex-none">
|
|
<!-- 状态栏 -->
|
|
<div class="h-11 w-full flex justify-between items-center px-8 text-white">
|
|
<span class="text-sm font-medium">09:41</span>
|
|
<div class="flex items-center gap-1.5">
|
|
<iconify-icon icon="mingcute:signal-fill" width="16"></iconify-icon>
|
|
<iconify-icon icon="mingcute:wifi-line" width="16"></iconify-icon>
|
|
<iconify-icon class="rotate-90" icon="mingcute:battery-fill" width="18"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
<!-- 导航栏 -->
|
|
<div class="h-[44px] px-4 flex items-center justify-between text-white">
|
|
<button class="flex items-center gap-1 text-sm" onclick="window.location.href='main.html'">
|
|
<iconify-icon icon="lucide:chevron-left" width="20"></iconify-icon>
|
|
<span>返回</span>
|
|
</button>
|
|
<h1 class="text-lg font-bold">分单明细</h1>
|
|
<div class="w-10"></div> <!-- 占位 -->
|
|
</div>
|
|
</div>
|
|
<!-- 搜索栏 -->
|
|
<section class="px-5 pt-4 pb-3">
|
|
<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="showFilterSheet()">
|
|
<iconify-icon class="text-lg" icon="mdi:filter-variant"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- 可滚动内容区 -->
|
|
<div class="flex-1 overflow-y-auto no-scrollbar px-5 pb-24 pt-2">
|
|
<!-- 分单列表内容 -->
|
|
<div class="space-y-4" id="suborder-list">
|
|
<!-- 分单1 -->
|
|
<div class="suborder-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 cursor-pointer transition-all relative active:scale-[0.98]" data-id="10001" onclick="toggleSuborderSelect(this)">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="select-indicator border-2 border-gray-300 bg-white rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer transition-colors"></span>
|
|
<span class="text-sm font-bold text-gray-900">10001</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="bg-indigo-100 text-indigo-500 text-[11px] font-medium px-2.5 py-0.5 rounded-full">W</span>
|
|
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
|
<div>
|
|
<span>件数：</span><span>150</span>
|
|
</div>
|
|
<div>
|
|
<span>重量：</span><span>50kg</span>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片操作菜单（默认隐藏） -->
|
|
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
|
<div class="flex items-center gap-4 pointer-events-auto">
|
|
<!-- 重置按钮 -->
|
|
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
|
重置
|
|
</button>
|
|
<!-- 回执按钮 -->
|
|
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">
|
|
回执
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分单2 -->
|
|
<div class="suborder-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 cursor-pointer transition-all relative active:scale-[0.98]" data-id="10002" onclick="toggleSuborderSelect(this)">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="select-indicator border-2 border-gray-300 bg-white rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer transition-colors"></span>
|
|
<span class="text-sm font-bold text-gray-900">10002</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="bg-amber-100 text-amber-600 text-[11px] font-medium px-2.5 py-0.5 rounded-full">E</span>
|
|
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
|
<div>
|
|
<span>件数：</span><span>120</span>
|
|
</div>
|
|
<div>
|
|
<span>重量：</span><span>40kg</span>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片操作菜单（默认隐藏） -->
|
|
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
|
<div class="flex items-center gap-4 pointer-events-auto">
|
|
<!-- 重置按钮 -->
|
|
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
|
重置
|
|
</button>
|
|
<!-- 回执按钮 -->
|
|
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">
|
|
回执
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分单3 -->
|
|
<div class="suborder-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100/50 mb-4 cursor-pointer transition-all relative active:scale-[0.98]" data-id="10003" onclick="toggleSuborderSelect(this)">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="select-indicator border-2 border-gray-300 bg-white rounded-full w-5 h-5 inline-flex items-center justify-center flex-none cursor-pointer transition-colors"></span>
|
|
<span class="text-sm font-bold text-gray-900">10003</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded-full">01</span>
|
|
<span class="bg-green-100 text-green-600 text-[11px] font-medium px-2 py-0.5 rounded-md">11</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-y-2 text-gray-500 text-[13px] mt-3">
|
|
<div>
|
|
<span>件数：</span><span>174</span>
|
|
</div>
|
|
<div>
|
|
<span>重量：</span><span>60kg</span>
|
|
</div>
|
|
</div>
|
|
<!-- 卡片操作菜单（默认隐藏） -->
|
|
<div class="card-action-overlay absolute inset-0 bg-black/40 rounded-2xl z-10 hidden flex items-center justify-center pointer-events-none">
|
|
<div class="flex items-center gap-4 pointer-events-auto">
|
|
<!-- 重置按钮 -->
|
|
<button class="bg-amber-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-amber-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); this.closest('.card-action-overlay').classList.add('hidden'); setTimeout(() => showResetStatusSheet(), 200)">
|
|
重置
|
|
</button>
|
|
<!-- 回执按钮 -->
|
|
<button class="bg-emerald-500 text-white text-[10px] font-bold w-14 h-14 rounded-full shadow-lg shadow-emerald-500/30 flex items-center justify-center leading-tight" onclick="event.stopPropagation(); window.location.href='receipt.html'">
|
|
回执
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部操作栏 -->
|
|
<div class="flex-none bg-white border-t border-gray-100">
|
|
<div class="flex items-center justify-between px-5 py-3">
|
|
<div class="flex items-center gap-2 select-all-container cursor-pointer" onclick="toggleSuborderSelectAll(this)">
|
|
<span class="radio-select-all w-5 h-5 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center transition-colors"></span>
|
|
<span class="text-sm text-gray-700 font-medium">全选</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[12px] text-[#9CA3AF]" id="suborder-count">已选 0 / 3 项</span>
|
|
<button class="bg-[#2563EB] text-white text-[15px] font-bold px-5 py-2 rounded-[10px] shadow-lg shadow-blue-500/25 active:scale-95 transition-transform" onclick="alert('申报成功')">申报</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 筛选弹框遮罩 -->
|
|
<div class="absolute inset-0 bg-black/40 z-30 hidden" id="filter-sheet-overlay" onclick="hideFilterSheet()"></div>
|
|
<!-- 筛选弹框 -->
|
|
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-40 transform translate-y-full transition-transform duration-300 ease-in-out" id="filter-sheet">
|
|
<div class="px-5 pt-5 pb-8">
|
|
<!-- 标题 -->
|
|
<div class="flex items-center justify-center mb-6 relative">
|
|
<h3 class="text-base font-bold text-gray-900">筛选条件</h3>
|
|
<button class="absolute right-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" onclick="hideFilterSheet()">
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
|
<line x1="18" x2="6" y1="6" y2="18"></line>
|
|
<line x1="6" x2="18" y1="6" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- 筛选条件区域 -->
|
|
<div class="space-y-4">
|
|
<!-- 航班日期 -->
|
|
<div>
|
|
<label class="text-sm text-gray-500 font-medium mb-1.5 block">航班日期</label>
|
|
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
|
<iconify-icon class="text-gray-400 text-lg flex-none" icon="mdi:calendar"></iconify-icon>
|
|
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none px-2" placeholder="选择日期" type="text" value="2026-07-10"/>
|
|
</div>
|
|
</div>
|
|
<!-- 航班号 -->
|
|
<div>
|
|
<label class="text-sm text-gray-500 font-medium mb-1.5 block">航班号</label>
|
|
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
|
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入航班号" type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- 代理（已改为下拉框） -->
|
|
<div>
|
|
<label class="text-sm text-gray-500 font-medium mb-1.5 block">代理</label>
|
|
<div class="relative">
|
|
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none focus:border-blue-500 focus:bg-white transition-all">
|
|
<option disabled selected value="">请选择代理</option>
|
|
<option value="马道">马道</option>
|
|
<option value="徽远">徽远</option>
|
|
<option value="中外运">中外运</option>
|
|
</select>
|
|
<iconify-icon class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xl" icon="mdi:chevron-down"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
<!-- 分单号 -->
|
|
<div>
|
|
<label class="text-sm text-gray-500 font-medium mb-1.5 block">分单号</label>
|
|
<div class="flex items-center bg-gray-50 border border-gray-200 rounded-xl h-10 px-3">
|
|
<input class="flex-1 bg-transparent text-[14px] text-gray-800 placeholder-gray-400 outline-none border-none" placeholder="请输入分单号" type="text"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部操作按钮 -->
|
|
<div class="flex gap-3 mt-6">
|
|
<button class="flex-1 py-3 text-sm font-medium text-gray-500 bg-gray-100 rounded-xl" onclick="hideFilterSheet()">重置</button>
|
|
<button class="flex-1 py-3 text-sm font-medium text-white bg-[#2563EB] rounded-xl" onclick="hideFilterSheet()">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Home Indicator 底部横条 -->
|
|
<div class="h-8 w-full flex justify-center items-center">
|
|
<div class="w-32 h-1.5 bg-black rounded-full opacity-20"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 重置状态弹框 -->
|
|
<div class="absolute inset-0 bg-black/40 z-30 hidden" id="reset-sheet-overlay" onclick="hideResetStatusSheet()"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-40 transform translate-y-full transition-transform duration-300 ease-in-out" id="reset-sheet">
|
|
<div class="px-5 pt-5 pb-8">
|
|
<!-- 标题 -->
|
|
<div class="flex items-center justify-center mb-6 relative">
|
|
<h3 class="text-base font-bold text-gray-900">重置状态</h3>
|
|
<button class="absolute right-0 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center" onclick="hideResetStatusSheet()">
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
|
<line x1="18" x2="6" y1="6" y2="18"></line>
|
|
<line x1="6" x2="18" y1="6" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- 状态下拉选择 -->
|
|
<div>
|
|
<label class="text-sm text-gray-500 font-medium mb-1.5 block">状态</label>
|
|
<select class="w-full bg-gray-50 border border-gray-200 rounded-xl h-10 px-3 text-[14px] text-gray-800 outline-none appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%202000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:14px] bg-[right_12px_center] bg-no-repeat" id="reset-status-select">
|
|
<option disabled="" selected="" value="">请选择状态</option>
|
|
<option value="">空</option>
|
|
<option value="01">01</option>
|
|
</select>
|
|
</div>
|
|
<!-- 确认按钮 -->
|
|
<button class="w-full mt-6 py-3 text-sm font-medium text-white bg-[#2563EB] rounded-xl" onclick="confirmResetStatus()">
|
|
确定
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 单选分单卡片
|
|
function toggleSuborderSelect(card) {
|
|
if (window.isLongPressing) return;
|
|
card.classList.toggle('selected');
|
|
const indicator = card.querySelector('.select-indicator');
|
|
if (card.classList.contains('selected')) {
|
|
indicator.classList.remove('border-gray-300', 'bg-white');
|
|
indicator.classList.add('bg-blue-500', 'border-blue-500');
|
|
indicator.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
|
} else {
|
|
indicator.classList.remove('bg-blue-500', 'border-blue-500');
|
|
indicator.classList.add('border-gray-300', 'bg-white');
|
|
indicator.innerHTML = '';
|
|
}
|
|
updateSuborderCount();
|
|
}
|
|
|
|
// 全选/取消全选
|
|
function toggleSuborderSelectAll(btn) {
|
|
const allCards = document.querySelectorAll('.suborder-card');
|
|
const isAllSelected = Array.from(allCards).every(card => card.classList.contains('selected'));
|
|
if (isAllSelected) {
|
|
allCards.forEach(card => {
|
|
card.classList.remove('selected');
|
|
const ci = card.querySelector('.select-indicator');
|
|
ci.classList.remove('bg-blue-500', 'border-blue-500');
|
|
ci.classList.add('border-gray-300', 'bg-white');
|
|
ci.innerHTML = '';
|
|
});
|
|
} else {
|
|
allCards.forEach(card => {
|
|
card.classList.add('selected');
|
|
const ci = card.querySelector('.select-indicator');
|
|
ci.classList.remove('border-gray-300', 'bg-white');
|
|
ci.classList.add('bg-blue-500', 'border-blue-500');
|
|
ci.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
|
});
|
|
}
|
|
updateSuborderCount();
|
|
}
|
|
|
|
// 更新底部选中数量
|
|
function updateSuborderCount() {
|
|
const selected = document.querySelectorAll('.suborder-card.selected').length;
|
|
const total = document.querySelectorAll('.suborder-card').length;
|
|
document.getElementById('suborder-count').innerText = `已选 ${selected} / ${total} 项`;
|
|
updateSelectAllState(selected, total);
|
|
}
|
|
|
|
// 同步全选按钮状态
|
|
function updateSelectAllState(selectedCount, totalCount) {
|
|
const allBtn = document.querySelector('.radio-select-all');
|
|
if (selectedCount === totalCount && totalCount > 0) {
|
|
allBtn.classList.remove('border-gray-300', 'bg-white');
|
|
allBtn.classList.add('bg-blue-500', 'border-blue-500');
|
|
allBtn.innerHTML = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
|
} else {
|
|
allBtn.classList.remove('bg-blue-500', 'border-blue-500');
|
|
allBtn.classList.add('border-gray-300', 'bg-white');
|
|
allBtn.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
// 筛选弹窗打开
|
|
function showFilterSheet() {
|
|
const overlay = document.getElementById('filter-sheet-overlay');
|
|
const sheet = document.getElementById('filter-sheet');
|
|
overlay.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
sheet.classList.remove('translate-y-full');
|
|
sheet.classList.add('translate-y-0');
|
|
}, 10);
|
|
}
|
|
|
|
// 筛选弹窗关闭
|
|
function hideFilterSheet() {
|
|
const overlay = document.getElementById('filter-sheet-overlay');
|
|
const sheet = document.getElementById('filter-sheet');
|
|
sheet.classList.add('translate-y-full');
|
|
sheet.classList.remove('translate-y-0');
|
|
setTimeout(() => {
|
|
overlay.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
|
|
// 卡片长按弹出操作菜单
|
|
window.isLongPressing = false;
|
|
document.querySelectorAll('.suborder-card').forEach(card => {
|
|
let timer;
|
|
// 鼠标按下
|
|
card.addEventListener('mousedown', e => {
|
|
if (e.target.closest('.select-indicator') || e.target.closest('button')) return;
|
|
window.isLongPressing = false;
|
|
timer = setTimeout(() => {
|
|
window.isLongPressing = true;
|
|
showSuborderActionMenu(card);
|
|
}, 600);
|
|
});
|
|
card.addEventListener('mouseup', () => { clearTimeout(timer); setTimeout(()=>{window.isLongPressing=false},50) });
|
|
card.addEventListener('mouseleave', () => { clearTimeout(timer); window.isLongPressing=false });
|
|
// 触屏兼容
|
|
card.addEventListener('touchstart', e => {
|
|
if (e.target.closest('.select-indicator') || e.target.closest('button')) return;
|
|
window.isLongPressing = false;
|
|
timer = setTimeout(() => {
|
|
window.isLongPressing = true;
|
|
showSuborderActionMenu(card);
|
|
}, 600);
|
|
});
|
|
card.addEventListener('touchend', () => { clearTimeout(timer); setTimeout(()=>{window.isLongPressing=false},50) });
|
|
card.addEventListener('touchmove', () => { clearTimeout(timer); window.isLongPressing=false });
|
|
});
|
|
|
|
function showSuborderActionMenu(card) {
|
|
document.querySelectorAll('.card-action-overlay').forEach(o => o.classList.add('hidden'));
|
|
const overlay = card.querySelector('.card-action-overlay');
|
|
if (overlay) overlay.classList.remove('hidden');
|
|
}
|
|
|
|
// 重置状态弹窗
|
|
function showResetStatusSheet() {
|
|
document.getElementById('reset-sheet-overlay').classList.remove('hidden');
|
|
document.getElementById('reset-sheet').classList.remove('translate-y-full');
|
|
}
|
|
function hideResetStatusSheet() {
|
|
document.getElementById('reset-sheet-overlay').classList.add('hidden');
|
|
document.getElementById('reset-sheet').classList.add('translate-y-full');
|
|
}
|
|
function confirmResetStatus() {
|
|
const s = document.getElementById('reset-status-select');
|
|
if (!s.value && s.selectedIndex===0) { alert('请选择状态'); return; }
|
|
alert(s.value==='' ? '已选择状态: 置空' : '已选择状态: '+s.value);
|
|
hideResetStatusSheet();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |