<!-- SongAI二维码生成器组件 -->
<div style="max-width: 600px; margin: 0 auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
<h3 style="color: #4F46E5; text-align: center; margin-bottom: 20px;">二维码生成器</h3>
<div style="margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">输入内容:</label>
<input type="text" id="qrcode-content" placeholder="请输入要生成二维码的内容"
style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"/>
</div>
<button onclick="generateQrcode()"
style="width: 100%; padding: 10px; background: #4F46E5; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">
生成二维码
</button>
<div id="loading" style="text-align: center; padding: 20px; display: none;">
<div style="width: 20px; height: 20px; margin: 0 auto; border: 3px solid #f3f3f3; border-top: 3px solid #4F46E5; border-radius: 50%; animation: spin 1s linear infinite;"></div>
<p style="margin-top: 10px; color: #666;">正在生成二维码...</p>
</div>
<div id="qrcode-result" style="text-align: center; margin-top: 20px; display: none;">
<img id="qrcode-image" alt="生成的二维码" style="max-width: 100%; height: auto; margin: 0 auto;"/>
</div>
<div id="error" style="color: #dc3545; text-align: center; padding: 10px; display: none;">
生成二维码失败，请重试
</div>
</div>
<script>
function generateQrcode() {
const content = document.getElementById('qrcode-content').value;
const loading = document.getElementById('loading');
const result = document.getElementById('qrcode-result');
const image = document.getElementById('qrcode-image');
const error = document.getElementById('error');
if (!content) {
alert('请输入内容');
return;
}
// 显示加载状态
loading.style.display = 'block';
result.style.display = 'none';
error.style.display = 'none';
// 调用API生成二维码
const apiUrl = 'https://api.fohok.xin/API/mjq.php?msg=' + encodeURIComponent(content);
// 检查图片是否可用
const img = new Image();
img.onload = function() {
loading.style.display = 'none';
image.src = apiUrl;
result.style.display = 'block';
};
img.onerror = function() {
loading.style.display = 'none';
error.style.display = 'block';
};
img.src = apiUrl;
}
// 添加旋转动画
const style = document.createElement('style');
style.textContent = `
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
document.head.appendChild(style);
</script>
<!-- 二维码生成器组件结束 -->
