<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">批量导出发货信息</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<style>
:root {
--bg: #0f1117;
--bg-elevated: #181a24;
--card: #1e2030;
--card-hover: #252840;
--border: #2a2d42;
--fg: #e8e9f0;
--fg-muted: #8b8fa3;
--accent: #f59e0b;
--accent-glow: rgba(245, 158, 11, 0.15);
--success: #10b981;
--danger: #ef4444;
--info: #06b6d4;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Sans SC', sans-serif;
background: var(--bg);
color: var(--fg);
min-height: 100vh;
overflow-x: hidden;
}
/* 背景装饰 */
.bg-decoration {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bg-decoration::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
border-radius: 50%;
animation: floatBlob 20s ease-in-out infinite;
}
.bg-decoration::after {
content: '';
position: absolute;
bottom: -15%;
left: -5%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(6,182,212,0.04) 0%, transparent 70%);
border-radius: 50%;
animation: floatBlob 25s ease-in-out infinite reverse;
}
@keyframes floatBlob {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -40px) scale(1.05); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}
/* 网格背景 */
.grid-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(42,45,66,0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(42,45,66,0.3) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 100%);
}
.app-container {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
padding: 24px;
}
/* 头部 */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
flex-wrap: wrap;
gap: 16px;
}
.app-header .logo-area {
display: flex;
align-items: center;
gap: 14px;
}
.logo-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--accent), #d97706);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #000;
box-shadow: 0 4px 20px rgba(245,158,11,0.25);
}
.app-title {
font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.5px;
}
.app-subtitle {
font-size: 13px;
color: var(--fg-muted);
margin-top: 2px;
}
/* 统计卡片 */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 22px;
display: flex;
align-items: center;
gap: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
border-radius: 50%;
opacity: 0.06;
transform: translate(20px, -20px);
}
.stat-card:hover {
border-color: rgba(245,158,11,0.3);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.stat-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.stat-value {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1;
}
.stat-label {
font-size: 13px;
color: var(--fg-muted);
margin-top: 4px;
}
/* 工具栏 */
.toolbar {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.search-box {
position: relative;
flex: 1;
min-width: 220px;
}
.search-box i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--fg-muted);
font-size: 14px;
}
.search-box input {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 14px 10px 40px;
color: var(--fg);
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.search-box input::placeholder { color: var(--fg-muted); }
.search-box input:focus { border-color: var(--accent); }
.filter-select {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 36px 10px 14px;
color: var(--fg);
font-size: 14px;
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8fa3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color 0.2s;
}
.filter-select:focus { border-color: var(--accent); }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
font-family: inherit;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), #d97706);
color: #000;
box-shadow: 0 2px 12px rgba(245,158,11,0.25);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(245,158,11,0.4);
}
.btn-secondary {
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border);
}
.btn-secondary:hover {
border-color: var(--accent);
background: var(--card-hover);
}
.btn-danger {
background: rgba(239,68,68,0.1);
color: var(--danger);
border: 1px solid rgba(239,68,68,0.2);
}
.btn-danger:hover {
background: rgba(239,68,68,0.2);
}
.btn-success {
background: rgba(16,185,129,0.1);
color: var(--success);
border: 1px solid rgba(16,185,129,0.2);
}
.btn-success:hover {
background: rgba(16,185,129,0.2);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
}
/* 表格容器 */
.table-container {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
margin-bottom: 20px;
}
.table-scroll {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 900px;
}
thead {
background: var(--bg-elevated);
}
thead th {
padding: 14px 16px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: color 0.2s;
}
thead th:hover { color: var(--accent); }
thead th .sort-icon { margin-left: 4px; font-size: 10px; opacity: 0.4; }
thead th.sorted .sort-icon { opacity: 1; color: var(--accent); }
tbody tr {
border-bottom: 1px solid rgba(42,45,66,0.5);
transition: background 0.15s;
}
tbody tr:hover { background: var(--card-hover); }
tbody tr.selected { background: rgba(245,158,11,0.06); }
tbody td {
padding: 14px 16px;
font-size: 14px;
white-space: nowrap;
}
/* 复选框 */
.custom-checkbox {
width: 18px;
height: 18px;
border: 2px solid var(--border);
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.custom-checkbox:hover { border-color: var(--accent); }
.custom-checkbox.checked {
background: var(--accent);
border-color: var(--accent);
}
.custom-checkbox.checked::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 10px;
color: #000;
}
/* 状态标签 */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.status-badge .dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.status-pending { background: rgba(245,158,11,0.1); color: #fbbf24; }
.status-pending .dot { background: #fbbf24; }
.status-shipped { background: rgba(6,182,212,0.1); color: #22d3ee; }
.status-shipped .dot { background: #22d3ee; }
.status-delivered { background: rgba(16,185,129,0.1); color: #34d399; }
.status-delivered .dot { background: #34d399; }
.status-returned { background: rgba(239,68,68,0.1); color: #f87171; }
.status-returned .dot { background: #f87171; }
/* 底部操作栏 */
.bottom-bar {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.selected-info {
font-size: 14px;
color: var(--fg-muted);
}
.selected-info strong {
color: var(--accent);
font-weight: 700;
}
.pagination {
display: flex;
align-items: center;
gap: 4px;
}
.page-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
font-family: 'Space Grotesk', sans-serif;
}
.page-btn:hover { border-color: var(--accent); color: var(--fg); }
.page-btn.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
font-weight: 700;
}
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* Toast 通知 */
.toast-container {
position: fixed;
top: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
animation: toastIn 0.35s ease;
min-width: 280px;
}
.toast.toast-out { animation: toastOut 0.3s ease forwards; }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-info .toast-icon { color: var(--info); }
@keyframes toastIn {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(40px); }
}
/* 模态框 */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal {
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
max-width: 520px;
width: 90%;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal { transform: scale(1) translateY(0); }
.modal-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.modal-desc {
font-size: 14px;
color: var(--fg-muted);
margin-bottom: 24px;
line-height: 1.6;
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* 导出选项 */
.export-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
.export-option {
background: var(--bg-elevated);
border: 2px solid var(--border);
border-radius: 12px;
padding: 16px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.export-option:hover { border-color: rgba(245,158,11,0.3); }
.export-option.active { border-color: var(--accent); background: var(--accent-glow); }
.export-option i { font-size: 28px; margin-bottom: 8px; display: block; }
.export-option .label { font-size: 14px; font-weight: 600; }
.export-option .desc { font-size: 11px; color: var(--fg-muted); margin-top: 4px; }
/* 进度条 */
.progress-bar {
width: 100%;
height: 4px;
background: var(--bg-elevated);
border-radius: 2px;
overflow: hidden;
margin-top: 16px;
display: none;
}
.progress-bar.active { display: block; }
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #d97706);
border-radius: 2px;
width: 0%;
transition: width 0.3s ease;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--fg-muted);
}
.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
.empty-state p { font-size: 15px; }
/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
/* 响应式 */
@media (max-width: 768px) {
.app-container { padding: 16px; }
.app-title { font-size: 20px; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.toolbar { flex-direction: column; align-items: stretch; }
.search-box { min-width: auto; }
.export-options { grid-template-columns: 1fr; }
.bottom-bar { flex-direction: column; align-items: stretch; text-align: center; }
.pagination { justify-content: center; }
}
/* 动画入场 */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in {
animation: fadeUp 0.5s ease both;
}
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="bg-decoration"></div>
<div class="grid-bg"></div>
<div class="app-container">
<!-- 头部 -->
<header class="app-header animate-in">
<div class="logo-area">
<div class="logo-icon"><i class="fa-solid fa-truck-fast"></i></div>
<div>
<div class="app-title">发货信息管理</div>
<div class="app-subtitle">批量查询、筛选与导出发货数据</div>
</div>
</div>
<div style="display:flex; gap:10px;">
<button class="btn btn-secondary" onclick="addSampleData()">
<i class="fa-solid fa-plus"></i> 添加示例
</button>
<button class="btn btn-primary" onclick="openExportModal()">
<i class="fa-solid fa-file-export"></i> 批量导出
</button>
</div>
</header>
<!-- 统计卡片 -->
<div class="stats-row animate-in delay-1">
<div class="stat-card">
<div class="stat-icon" style="background:rgba(245,158,11,0.1);color:#fbbf24;">
<i class="fa-solid fa-box"></i>
</div>
<div>
<div class="stat-value" id="statTotal">0</div>
<div class="stat-label">总订单数</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:rgba(245,158,11,0.1);color:#fbbf24;">
<i class="fa-solid fa-clock"></i>
</div>
<div>
<div class="stat-value" id="statPending">0</div>
<div class="stat-label">待发货</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:rgba(6,182,212,0.1);color:#22d3ee;">
<i class="fa-solid fa-shipping-fast"></i>
</div>
<div>
<div class="stat-value" id="statShipped">0</div>
<div class="stat-label">运输中</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:rgba(16,185,129,0.1);color:#34d399;">
<i class="fa-solid fa-circle-check"></i>
</div>
<div>
<div class="stat-value" id="statDelivered">0</div>
<div class="stat-label">已签收</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:rgba(239,68,68,0.1);color:#f87171;">
<i class="fa-solid fa-rotate-left"></i>
</div>
<div>
<div class="stat-value" id="statReturned">0</div>
<div class="stat-label">已退回</div>
</div>
</div>
</div>
<!-- 工具栏 -->
<div class="toolbar animate-in delay-2">
<div class="search-box">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" id="searchInput" placeholder="搜索订单号、收件人、物流单号..." oninput="handleSearch()">
</div>
<select class="filter-select" id="statusFilter" onchange="handleFilter()">
<option value="all">全部状态</option>
<option value="待发货">待发货</option>
<option value="已发货">已发货</option>
<option value="已签收">已签收</option>
<option value="已退回">已退回</option>
</select>
<select class="filter-select" id="carrierFilter" onchange="handleFilter()">
<option value="all">全部物流</option>
<option value="顺丰速运">顺丰速运</option>
<option value="中通快递">中通快递</option>
<option value="圆通速递">圆通速递</option>
<option value="韵达快递">韵达快递</option>
<option value="京东物流">京东物流</option>
<option value="极兔速递">极兔速递</option>
</select>
<select class="filter-select" id="dateFilter" onchange="handleFilter()">
<option value="all">全部时间</option>
<option value="7">近7天</option>
<option value="30">近30天</option>
<option value="90">近90天</option>
</select>
<button class="btn btn-secondary btn-sm" onclick="resetFilters()">
<i class="fa-solid fa-arrow-rotate-left"></i> 重置
</button>
</div>
<!-- 表格 -->
<div class="table-container animate-in delay-3">
<div class="table-scroll">
<table>
<thead>
<tr>
<th style="width:44px;">
<div class="custom-checkbox" id="selectAll" onclick="toggleSelectAll()"></div>
</th>
<th onclick="sortBy('orderNo')">订单号 <i class="fa-solid fa-sort sort-icon"></i></th>
<th onclick="sortBy('date')">下单日期 <i class="fa-solid fa-sort sort-icon"></i></th>
<th onclick="sortBy('recipient')">收件人 <i class="fa-solid fa-sort sort-icon"></i></th>
<th>联系电话</th>
<th>收货地址</th>
<th>商品名称</th>
<th onclick="sortBy('quantity')">数量 <i class="fa-solid fa-sort sort-icon"></i></th>
<th>物流公司</th>
<th>物流单号</th>
<th onclick="sortBy('status')">状态 <i class="fa-solid fa-sort sort-icon"></i></th>
<th style="width:80px;">操作</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
</div>
<div class="empty-state" id="emptyState" style="display:none;">
<i class="fa-solid fa-inbox"></i>
<p>暂无匹配的发货记录</p>
</div>
</div>
<!-- 底部操作栏 -->
<div class="bottom-bar animate-in delay-4">
<div class="selected-info">
已选择 <strong id="selectedCount">0</strong> 条记录，
共 <strong id="filteredTotal">0</strong> 条匹配
</div>
<div style="display:flex; align-items:center; gap:12px;">
<button class="btn btn-success btn-sm" onclick="exportSelected('csv')" id="exportCsvBtn" disabled>
<i class="fa-solid fa-file-csv"></i> 导出CSV
</button>
<button class="btn btn-success btn-sm" onclick="exportSelected('excel')" id="exportExcelBtn" disabled>
<i class="fa-solid fa-file-excel"></i> 导出Excel
</button>
<button class="btn btn-danger btn-sm" onclick="deleteSelected()" id="deleteBtn" disabled>
<i class="fa-solid fa-trash"></i> 删除选中
</button>
</div>
<div class="pagination" id="pagination"></div>
</div>
</div>
<!-- 导出模态框 -->
<div class="modal-overlay" id="exportModal">
<div class="modal">
<div class="modal-title">批量导出发货信息</div>
<div class="modal-desc">选择导出格式和范围，系统将生成对应文件供下载。</div>
<div class="export-options">
<div class="export-option active" data-format="excel" onclick="selectExportFormat(this)">
<i class="fa-solid fa-file-excel" style="color:#34d399;"></i>
<div class="label">Excel 格式</div>
<div class="desc">.xlsx · 支持筛选排序</div>
</div>
<div class="export-option" data-format="csv" onclick="selectExportFormat(this)">
<i class="fa-solid fa-file-csv" style="color:#22d3ee;"></i>
<div class="label">CSV 格式</div>
<div class="desc">.csv · 通用兼容</div>
</div>
</div>
<div style="margin-bottom:20px;">
<label style="font-size:13px; color:var(--fg-muted); display:block; margin-bottom:8px;">导出范围</label>
<div style="display:flex; gap:10px;">
<label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px;">
<input type="radio" name="exportScope" value="selected" id="scopeSelected" style="accent-color:var(--accent);">
仅选中项 (<span id="modalSelectedCount">0</span>条)
</label>
<label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px;">
<input type="radio" name="exportScope" value="filtered" id="scopeFiltered" checked style="accent-color:var(--accent);">
当前筛选结果 (<span id="modalFilteredCount">0</span>条)
</label>
<label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px;">
<input type="radio" name="exportScope" value="all" style="accent-color:var(--accent);">
全部数据 (<span id="modalAllCount">0</span>条)
</label>
</div>
</div>
<div class="progress-bar" id="exportProgress">
<div class="progress-fill" id="exportProgressFill"></div>
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="closeExportModal()">取消</button>
<button class="btn btn-primary" onclick="doExport()" id="confirmExportBtn">
<i class="fa-solid fa-download"></i> 确认导出
</button>
</div>
</div>
</div>
<!-- 删除确认模态框 -->
<div class="modal-overlay" id="deleteModal">
<div class="modal">
<div class="modal-title">确认删除</div>
<div class="modal-desc">确定要删除选中的 <strong id="deleteCount" style="color:var(--danger);">0</strong> 条发货记录吗？此操作不可撤销。</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="closeDeleteModal()">取消</button>
<button class="btn btn-danger" onclick="confirmDelete()">
<i class="fa-solid fa-trash"></i> 确认删除
</button>
</div>
</div>
</div>
<!-- Toast 容器 -->
<div class="toast-container" id="toastContainer"></div>
<script>
// ========== 数据 ==========
const recipients = ['张伟', '李娜', '王芳', '刘洋', '陈明', '杨丽', '赵强', '黄敏', '周杰', '吴秀英', '徐磊', '孙艳', '马超', '朱婷', '胡建华', '郭晓', '何雪', '林峰', '罗敏', '梁志远'];
const products = ['无线蓝牙耳机', '机械键盘', '手机壳', '充电宝', '智能手表', '平板支架', 'USB-C数据线', '鼠标垫', '显示器挂灯', '摄像头', '移动硬盘', '路由器', '蓝牙音箱', '笔记本散热器', 'Type-C扩展坞'];
const carriers = ['顺丰速运', '中通快递', '圆通速递', '韵达快递', '京东物流', '极兔速递'];
const statuses = ['待发货', '已发货', '已签收', '已退回'];
const cities = [
'北京市朝阳区建国路88号', '上海市浦东新区陆家嘴环路1000号', '广州市天河区天河路385号',
'深圳市南山区科技园南路16号', '杭州市西湖区文三路478号', '成都市武侯区天府大道999号',
'南京市鼓楼区中山北路30号', '武汉市江汉区解放大道688号', '重庆市渝中区解放碑步行街1号',
'西安市雁塔区高新路56号', '苏州市工业园区星湖街328号', '长沙市岳麓区麓山南路36号',
'郑州市金水区花园路100号', '青岛市市南区香港中路76号
（图片来源网络，侵删）
