biss/Letters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加扫描条形码功能
Vercel Deploy / deploy (push) Successful in 1m9s
Details

Browse Source
This commit is contained in:
biss
2026-03-29 12:26:39 +08:00
Unverified
parent ccf43816aa
commit 02566e20db
6 changed files with 2170 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
certs/img/1405816120001.svg
+205
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.1 MiB

certs/img/1405816120005.svg
+176
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.1 MiB

certs/img/1405816120006.svg
+181
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.1 MiB

certs/img/ZS20260002.svg
+746
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.1 MiB

certs/img/ZS20260003.svg
+743
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.1 MiB

certs/index.html
+118 -29
View File
@@ -3,8 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surpass 荣誉证书查询系统</title> <title>荣誉证书查询系统 - 集成扫码</title>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<style> <style>
:root { :root {
--primary-color: #1a73e8; --primary-color: #1a73e8;
@@ -40,7 +42,6 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
/* 响应式搜索区域 */
.search-section { .search-section {
background: var(--bg-color); background: var(--bg-color);
padding: 20px; padding: 20px;
@@ -55,7 +56,6 @@
gap: 16px; gap: 16px;
} }
/* PC端布局：搜索框占主位，日期并排 */
@media (min-width: 768px) { @media (min-width: 768px) {
.search-grid { .search-grid {
grid-template-columns: 2fr 1fr 1fr auto; grid-template-columns: 2fr 1fr 1fr auto;
@@ -71,8 +71,15 @@
font-weight: 600; font-weight: 600;
} }
/* 搜索框容器：容纳扫码图标 */
.input-with-icon {
position: relative;
display: flex;
align-items: center;
}
.form-control { .form-control {
padding: 10px 14px; padding: 10px 45px 10px 14px; /* 右侧留出空间给图标 */
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
font-size: 15px; font-size: 15px;
@@ -80,11 +87,17 @@
height: 42px; height: 42px;
} }
.form-control:focus { .scan-trigger {
outline: none; position: absolute;
border-color: var(--primary-color); right: 10px;
box-shadow: 0 0 0 3px rgba(26,115,232,0.1); cursor: pointer;
color: var(--primary-color);
padding: 5px;
display: flex;
align-items: center;
transition: transform 0.2s;
} }
.scan-trigger:hover { transform: scale(1.1); }
.btn-search { .btn-search {
height: 42px; height: 42px;
@@ -96,14 +109,46 @@
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
white-space: nowrap;
} }
.btn-search:hover { background: #1557b0; } /* 扫码弹出层 */
#scanner-overlay {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
z-index: 9999;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
/* 响应式表格：移动端转为卡片流 */ #reader {
width: 100%;
max-width: 400px;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.scanner-controls {
margin-top: 20px;
display: flex;
gap: 15px;
}
.btn-cancel {
padding: 10px 24px;
background: #ef4444;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* 原有表格样式 */
.table-wrapper { overflow-x: auto; margin-top: 10px; } .table-wrapper { overflow-x: auto; margin-top: 10px; }
.result-table { width: 100%; border-collapse: collapse; min-width: 600px; } .result-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.result-table th { .result-table th {
text-align: left; padding: 14px; text-align: left; padding: 14px;
@@ -111,14 +156,7 @@
font-size: 13px; border-bottom: 2px solid var(--border-color); font-size: 13px; border-bottom: 2px solid var(--border-color);
} }
.result-table td { padding: 14px; border-bottom: 1px solid var(--bg-color); font-size: 14px; } .result-table td { padding: 14px; border-bottom: 1px solid var(--bg-color); font-size: 14px; }
@media (max-width: 640px) { .hide-on-mobile { display: none; } }
@media (max-width: 640px) {
/* 针对超小屏幕，隐藏不重要的列，或让用户横向滚动 */
.hide-on-mobile { display: none; }
.container { padding: 16px; }
}
.status-valid { color: #16a34a; font-weight: 600; }
.btn-link { color: var(--primary-color); text-decoration: none; cursor: pointer; font-weight: 600; } .btn-link { color: var(--primary-color); text-decoration: none; cursor: pointer; font-weight: 600; }
.loading, .no-result { text-align: center; padding: 40px; color: var(--text-muted); } .loading, .no-result { text-align: center; padding: 40px; color: var(--text-muted); }
</style> </style>
@@ -132,22 +170,34 @@
<div class="search-grid"> <div class="search-grid">
<div class="form-group"> <div class="form-group">
<label>编号 / 姓名</label> <label>编号 / 姓名</label>
<input type="text" id="searchTerm" class="form-control" placeholder="输入证书编号或持有人"> <div class="input-with-icon">
<input type="text" id="searchTerm" class="form-control" placeholder="输入或扫码查询">
<div class="scan-trigger" id="startScanBtn" title="扫描条形码/二维码">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path><rect x="7" y="7" width="10" height="10"></rect></svg>
</div>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>颁发起（可选）</label> <label>颁发起</label>
<input type="date" id="dateStart" class="form-control"> <input type="date" id="dateStart" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>颁发止（可选）</label> <label>颁发止</label>
<input type="date" id="dateEnd" class="form-control"> <input type="date" id="dateEnd" class="form-control">
</div> </div>
<button id="searchBtn" class="btn-search">搜索</button> <button id="searchBtn" class="btn-search">查询</button>
</div> </div>
</div> </div>
<div id="resultsArea"> <div id="resultsArea">
<div class="no-result">请输入信息开始检索</div> <div class="no-result">请输入信息或点击右侧图标扫码</div>
</div>
</div>
<div id="scanner-overlay">
<div id="reader"></div>
<div class="scanner-controls">
<button class="btn-cancel" id="stopScanBtn">退出扫描</button>
</div> </div>
</div> </div>
@@ -157,6 +207,49 @@
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU'; const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
const sbClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); const sbClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
// 初始化扫码器
const html5QrCode = new Html5Qrcode("reader");
const scannerOverlay = document.getElementById('scanner-overlay');
// --- 扫码逻辑 ---
document.getElementById('startScanBtn').addEventListener('click', async () => {
scannerOverlay.style.display = 'flex';
// 扫码配置：qrbox 设为长方形有助于识别条形码
const config = {
fps: 15,
qrbox: { width: 300, height: 180 },
aspectRatio: 1.0
};
try {
await html5QrCode.start(
{ facingMode: "environment" }, // 使用后置摄像头
config,
(decodedText) => {
// 识别成功
document.getElementById('searchTerm').value = decodedText;
closeScanner();
handleSearch(); // 自动执行查询
},
(errorMessage) => { /* 扫描中不抛出错误 */ }
);
} catch (err) {
alert("无法启动摄像头，请检查 HTTPS 权限或设备连接");
scannerOverlay.style.display = 'none';
}
});
async function closeScanner() {
if (html5QrCode.isScanning) {
await html5QrCode.stop();
}
scannerOverlay.style.display = 'none';
}
document.getElementById('stopScanBtn').addEventListener('click', closeScanner);
// --- 查询逻辑 ---
async function handleSearch() { async function handleSearch() {
const term = document.getElementById('searchTerm').value.trim(); const term = document.getElementById('searchTerm').value.trim();
const start = document.getElementById('dateStart').value; const start = document.getElementById('dateStart').value;
@@ -171,13 +264,9 @@
display.innerHTML = '<div class="loading">正在检索数据库...</div>'; display.innerHTML = '<div class="loading">正在检索数据库...</div>';
try { try {
// 构造查询：筛选编号/姓名
let query = sbClient.from('certificates').select('*'); let query = sbClient.from('certificates').select('*');
// 模糊匹配编号或姓名
query = query.or(`cert_number.ilike.%${term}%,holder_name.ilike.%${term}%`); query = query.or(`cert_number.ilike.%${term}%,holder_name.ilike.%${term}%`);
// 增加可选的时间起止限定
if (start) query = query.gte('issue_date', start); if (start) query = query.gte('issue_date', start);
if (end) query = query.lte('issue_date', end); if (end) query = query.lte('issue_date', end);