You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
9.5 KiB
328 lines
9.5 KiB
<!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;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #006987 0%, #0084a8 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 28px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.search-section {
|
|
padding: 30px;
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: #006987;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 12px 30px;
|
|
background: #006987;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.search-btn:hover {
|
|
background: #0084a8;
|
|
}
|
|
|
|
.search-btn:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #666;
|
|
display: none;
|
|
}
|
|
|
|
.error {
|
|
background: #fee;
|
|
color: #c33;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.results {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.result-item {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.result-item:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.result-item h3 {
|
|
color: #006987;
|
|
margin-bottom: 15px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.result-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #666;
|
|
font-size: 13px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.info-value {
|
|
color: #333;
|
|
font-size: 15px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 64px;
|
|
margin-bottom: 20px;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔍 公司信息查询</h1>
|
|
<p>输入公司名称，查询企业详细信息</p>
|
|
</div>
|
|
|
|
<div class="search-section">
|
|
<form class="search-form" id="searchForm" onsubmit="searchCompany(event)">
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
id="companyName"
|
|
placeholder="请输入公司名称..."
|
|
required
|
|
>
|
|
<button type="submit" class="search-btn" id="searchBtn">查询</button>
|
|
</form>
|
|
|
|
<div class="error" id="errorMsg"></div>
|
|
<div class="loading" id="loading">查询中，请稍候...</div>
|
|
|
|
<div class="results" id="results">
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">🏢</div>
|
|
<p>请输入公司名称进行查询</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function searchCompany(event) {
|
|
event.preventDefault();
|
|
|
|
const companyName = document.getElementById('companyName').value.trim();
|
|
if (!companyName) {
|
|
showError('请输入公司名称');
|
|
return;
|
|
}
|
|
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
const loading = document.getElementById('loading');
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
const results = document.getElementById('results');
|
|
|
|
// 重置状态
|
|
hideError();
|
|
searchBtn.disabled = true;
|
|
loading.style.display = 'block';
|
|
results.innerHTML = '';
|
|
|
|
// 调用API
|
|
fetch(`/api/mobile/other/company?company_name=${encodeURIComponent(companyName)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
loading.style.display = 'none';
|
|
searchBtn.disabled = false;
|
|
|
|
console.log('API Response:', data); // 调试信息
|
|
|
|
// 处理两种返回格式：
|
|
// 1. 直接返回数组：[{...}, {...}]
|
|
// 2. 包装格式：{code: 200, data: [...]}
|
|
let companies = null;
|
|
|
|
if (Array.isArray(data)) {
|
|
// 直接返回数组
|
|
companies = data;
|
|
} else if (data.code === 200 && Array.isArray(data.data)) {
|
|
// 包装格式
|
|
companies = data.data;
|
|
} else if (data.errcode) {
|
|
// 错误格式
|
|
showError(data.errmsg || '查询失败');
|
|
results.innerHTML = '<div class="no-results">查询失败</div>';
|
|
return;
|
|
}
|
|
|
|
if (companies && companies.length > 0) {
|
|
displayResults(companies);
|
|
} else {
|
|
showError('未找到相关公司信息');
|
|
results.innerHTML = '<div class="no-results">未找到相关公司信息</div>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
loading.style.display = 'none';
|
|
searchBtn.disabled = false;
|
|
showError('查询失败，请稍后重试');
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
function displayResults(companies) {
|
|
const results = document.getElementById('results');
|
|
|
|
if (!companies || companies.length === 0) {
|
|
results.innerHTML = '<div class="no-results">未找到相关公司信息</div>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
companies.forEach(company => {
|
|
html += `
|
|
<div class="result-item">
|
|
<h3>${escapeHtml(company.name || '')}</h3>
|
|
<div class="result-info">
|
|
${getInfoItem('统一社会信用代码', company.creditCode)}
|
|
${getInfoItem('法人代表', company.operName)}
|
|
${getInfoItem('注册状态', company.status)}
|
|
${getInfoItem('成立日期', company.startDate)}
|
|
${getInfoItem('密钥编号', company.keyNo)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
results.innerHTML = html;
|
|
}
|
|
|
|
function getInfoItem(label, value) {
|
|
if (!value && value !== 0) {
|
|
return '';
|
|
}
|
|
return `
|
|
<div class="info-item">
|
|
<div class="info-label">${escapeHtml(label)}</div>
|
|
<div class="info-value">${escapeHtml(value)}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
|
|
function showError(message) {
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
errorMsg.textContent = message;
|
|
errorMsg.style.display = 'block';
|
|
}
|
|
|
|
function hideError() {
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
errorMsg.style.display = 'none';
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
if (!text) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|