<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>证书真伪查询 - 某某认证机构</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.title {
text-align: center;
font-size: 24px;
margin-bottom: 30px;
color: #333;
}
.query-form {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
}
.form-item {
flex: 1;
min-width: 200px;
}
label {
display: block;
margin-bottom: 5px;
color: #666;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 30px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
padding: 20px;
border-radius: 4px;
display: none;
}
.success {
background-color: #f0fff4;
border: 1px solid #c3e6cb;
}
.error {
background-color: #fff5f5;
border: 1px solid #f5c6cb;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
color: #333;
}
.tip {
margin-top: 10px;
font-size: 14px;
color: #999;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">认证证书真伪查询</h1>
<form class="query-form" id="queryForm">
<div class="form-item">
<label for="certNo">证书编号</label>
<input type="text" id="certNo" placeholder="请输入证书编号（如C2025001）">
</div>
<div class="form-item">
<label for="companyName">公司名称</label>
<input type="text" id="companyName" placeholder="请输入公司名称（支持模糊查询）">
</div>
<button type="submit">查询</button>
</form>
<!-- 查询结果展示 -->
<div class="result" id="resultBox"></div>
<div class="tip">
温馨提示：本查询结果仅作为证书真伪参考，最终以我司出具的纸质证书为准 | 如有疑问，请联系：400-XXXX-XXXX
</div>
</div>
<script>
// 表单提交事件
document.getElementById('queryForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交
// 获取输入值
const certNo = document.getElementById('certNo').value.trim();
const companyName = document.getElementById('companyName').value.trim();
const resultBox = document.getElementById('resultBox');
// 清空之前的结果
resultBox.style.display = 'none';
resultBox.className = 'result';
resultBox.innerHTML = '';
// 发送POST请求
fetch('cert_query.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `cert_no=${encodeURIComponent(certNo)}&company_name=${encodeURIComponent(companyName)}`
})
.then(response => response.json())
.then(data => {
// 展示结果
resultBox.style.display = 'block';
if (data.code === 1) {
// 查询成功
resultBox.className = 'result success';
let html = `<p style="color: #28a745;">${data.msg}</p>`;
// 渲染表格
html += `<table>
<tr>
<th>证书编号</th>
<th>公司名称</th>
<th>认证类型</th>
<th>颁发日期</th>
<th>到期日期</th>
<th>证书状态</th>
</tr>`;
data.data.forEach(item => {
html += `<tr>
<td>${item.cert_no}</td>
<td>${item.company_name}</td>
<td>${item.cert_type}</td>
<td>${item.issue_date}</td>
<td>${item.expire_date}</td>
<td>${item.status_text}</td>
</tr>`;
});
html += `</table>`;
resultBox.innerHTML = html;
} else {
// 查询失败
resultBox.className = 'result error';
resultBox.innerHTML = `<p style="color: #dc3545;">${data.msg}</p>`;
}
})
.catch(error => {
// 网络错误
resultBox.style.display = 'block';
resultBox.className = 'result error';
resultBox.innerHTML = `<p style="color: #dc3545;">网络异常，请稍后重试</p>`;
console.error('查询错误：', error);
});
});
</script>
</body>
</html>
