添加扫描条形码功能

2026-03-29 12:26:39 +08:00
parent ccf43816aa
commit 02566e20db
6 changed files with 2170 additions and 30 deletions
@@ -3,8 +3,10 @@
 <head>
    <meta charset="UTF-8">
    <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://unpkg.com/html5-qrcode"></script>
+    
    <style>
        :root {
            --primary-color: #1a73e8;
@@ -40,7 +42,6 @@
            margin-bottom: 30px; 
        }

-        /* 响应式搜索区域 */
        .search-section {
            background: var(--bg-color);
            padding: 20px;
@@ -55,7 +56,6 @@
            gap: 16px;
        }

-        /* PC端布局：搜索框占主位，日期并排 */
        @media (min-width: 768px) {
            .search-grid {
                grid-template-columns: 2fr 1fr 1fr auto;
@@ -71,8 +71,15 @@
            font-weight: 600; 
        }

+        /* 搜索框容器：容纳扫码图标 */
+        .input-with-icon {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
        .form-control { 
-            padding: 10px 14px; 
+            padding: 10px 45px 10px 14px; /* 右侧留出空间给图标 */
            border: 1px solid var(--border-color); 
            border-radius: 8px; 
            font-size: 15px; 
@@ -80,11 +87,17 @@
            height: 42px;
        }

-        .form-control:focus { 
-            outline: none; 
-            border-color: var(--primary-color); 
-            box-shadow: 0 0 0 3px rgba(26,115,232,0.1); 
+        .scan-trigger {
+            position: absolute;
+            right: 10px;
+            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 {
            height: 42px; 
@@ -96,14 +109,46 @@
            font-weight: 600; 
            cursor: pointer; 
            transition: 0.2s;
-            white-space: nowrap;
        }

-        .btn-search:hover { background: #1557b0; }
-
-        /* 响应式表格：移动端转为卡片流 */
-        .table-wrapper { overflow-x: auto; margin-top: 10px; }
+        /* 扫码弹出层 */
+        #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; }
        .result-table { width: 100%; border-collapse: collapse; min-width: 600px; }
        .result-table th { 
            text-align: left; padding: 14px; 
@@ -111,14 +156,7 @@
            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; }
-
-        @media (max-width: 640px) {
-            /* 针对超小屏幕，隐藏不重要的列，或让用户横向滚动 */
-            .hide-on-mobile { display: none; }
-            .container { padding: 16px; }
-        }
-
-        .status-valid { color: #16a34a; font-weight: 600; }
+        @media (max-width: 640px) { .hide-on-mobile { display: none; } }
        .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); }
    </style>
@@ -132,22 +170,34 @@
        <div class="search-grid">
            <div class="form-group">
                <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 class="form-group">
-                <label>颁发起（可选）</label>
+                <label>颁发起</label>
                <input type="date" id="dateStart" class="form-control">
            </div>
            <div class="form-group">
-                <label>颁发止（可选）</label>
+                <label>颁发止</label>
                <input type="date" id="dateEnd" class="form-control">
            </div>
-            <button id="searchBtn" class="btn-search">搜索</button>
+            <button id="searchBtn" class="btn-search">查询</button>
        </div>
    </div>

    <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>

@@ -157,6 +207,49 @@
    const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
    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() {
        const term = document.getElementById('searchTerm').value.trim();
        const start = document.getElementById('dateStart').value;
@@ -171,13 +264,9 @@
        display.innerHTML = '<div class="loading">正在检索数据库...</div>';

        try {
-            // 构造查询：筛选编号/姓名
            let query = sbClient.from('certificates').select('*');
-
-            // 模糊匹配编号或姓名
            query = query.or(`cert_number.ilike.%${term}%,holder_name.ilike.%${term}%`);

-            // 增加可选的时间起止限定
            if (start) query = query.gte('issue_date', start);
            if (end) query = query.lte('issue_date', end);