332 lines
11 KiB
HTML
332 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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;
|
|
--bg-color: #f8fafc;
|
|
--card-bg: #ffffff;
|
|
--text-main: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border-color: #e2e8f0;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
background: var(--bg-color);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
margin: 0; padding: 10px;
|
|
color: var(--text-main);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 20px auto;
|
|
background: var(--card-bg);
|
|
padding: 24px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: var(--primary-color);
|
|
font-size: clamp(20px, 5vw, 26px);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.search-section {
|
|
background: var(--bg-color);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.search-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.search-grid {
|
|
grid-template-columns: 2fr 1fr 1fr auto;
|
|
align-items: end;
|
|
}
|
|
}
|
|
|
|
.form-group { display: flex; flex-direction: column; }
|
|
.form-group label {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 搜索框容器：容纳扫码图标 */
|
|
.input-with-icon {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-control {
|
|
padding: 10px 45px 10px 14px; /* 右侧留出空间给图标 */
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
height: 42px;
|
|
}
|
|
|
|
.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;
|
|
padding: 0 30px;
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
/* 扫码弹出层 */
|
|
#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;
|
|
background: #f1f5f9; color: var(--text-muted);
|
|
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; } }
|
|
.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>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>证书查询系统</h1>
|
|
|
|
<div class="search-section">
|
|
<div class="search-grid">
|
|
<div class="form-group">
|
|
<label>编号 / 姓名</label>
|
|
<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>
|
|
<input type="date" id="dateStart" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>颁发止</label>
|
|
<input type="date" id="dateEnd" class="form-control">
|
|
</div>
|
|
<button id="searchBtn" class="btn-search">查询</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultsArea">
|
|
<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>
|
|
|
|
<script>
|
|
// Supabase 配置
|
|
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
|
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;
|
|
const end = document.getElementById('dateEnd').value;
|
|
const display = document.getElementById('resultsArea');
|
|
|
|
if (!term) {
|
|
alert("请输入证书编号或持有人姓名");
|
|
return;
|
|
}
|
|
|
|
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);
|
|
|
|
const { data, error } = await query.order('issue_date', { ascending: false });
|
|
|
|
if (error) throw error;
|
|
renderResults(data);
|
|
|
|
} catch (err) {
|
|
display.innerHTML = `<div style="color:#dc2626; text-align:center;">检索失败: ${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function renderResults(data) {
|
|
const display = document.getElementById('resultsArea');
|
|
if (!data || data.length === 0) {
|
|
display.innerHTML = '<div class="no-result">未找到匹配的证书</div>';
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<div class="table-wrapper">
|
|
<table class="result-table">
|
|
<thead>
|
|
<tr>
|
|
<th>证书编号</th>
|
|
<th>持有人</th>
|
|
<th class="hide-on-mobile">荣誉标题</th>
|
|
<th>颁发日期</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
data.forEach(item => {
|
|
html += `
|
|
<tr>
|
|
<td><strong>${item.cert_number}</strong></td>
|
|
<td>${item.holder_name}</td>
|
|
<td class="hide-on-mobile">${item.honor_title}</td>
|
|
<td>${item.issue_date || '-'}</td>
|
|
<td><a class="btn-link" onclick="goToDetail('${item.id}')">详情</a></td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
display.innerHTML = html;
|
|
}
|
|
|
|
function goToDetail(id) {
|
|
window.location.href = `certificate.html?id=${id}`;
|
|
}
|
|
|
|
document.getElementById('searchBtn').addEventListener('click', handleSearch);
|
|
document.getElementById('searchTerm').addEventListener('keypress', e => {
|
|
if (e.key === 'Enter') handleSearch();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |