89 lines
3.0 KiB
PHP
89 lines
3.0 KiB
PHP
<?php
|
||
/**
|
||
* PerToolBox Front - 二维码生成器页面
|
||
*
|
||
* Copyright (C) 2024 Sea Network Technology Studio
|
||
* Author: Canglan <admin@sea-studio.top>
|
||
* License: AGPL v3
|
||
*/
|
||
|
||
require_once '../config.php';
|
||
include_once '../header.php';
|
||
include_once '../sidebar.php';
|
||
?>
|
||
|
||
<div class="main-content">
|
||
<div class="card">
|
||
<h1 class="text-2xl font-bold mb-6">📱 二维码生成器</h1>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<label class="form-label">内容/链接：</label>
|
||
<textarea id="content" rows="4" placeholder="输入文本或URL..." class="form-input mb-4"></textarea>
|
||
|
||
<label class="form-label">尺寸：<span id="sizeValue">10</span></label>
|
||
<input type="range" id="size" min="5" max="20" value="10" class="w-full mb-4">
|
||
|
||
<button id="generateBtn" class="btn btn-primary w-full">生成二维码</button>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div id="qrContainer" class="bg-gray-50 rounded-lg p-4 min-h-[300px] flex items-center justify-center">
|
||
<div class="text-gray-400">点击生成二维码</div>
|
||
</div>
|
||
<button id="downloadBtn" class="btn btn-secondary mt-4 hidden">下载二维码</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentQRCode = null;
|
||
|
||
async function generateQR() {
|
||
const content = document.getElementById('content').value.trim();
|
||
if (!content) {
|
||
alert('请输入内容');
|
||
return;
|
||
}
|
||
|
||
const size = parseInt(document.getElementById('size').value);
|
||
|
||
try {
|
||
// 使用 URLSearchParams 发送表单数据
|
||
const formData = new URLSearchParams();
|
||
formData.append('content', content);
|
||
formData.append('size', size);
|
||
|
||
const data = await apiRequest('/qrcode/generate', {
|
||
method: 'POST',
|
||
body: formData // 不需要设置 headers，apiRequest 会自动处理
|
||
});
|
||
|
||
currentQRCode = data.qr_code;
|
||
document.getElementById('qrContainer').innerHTML = `<img src="${data.qr_code}" alt="二维码" class="max-w-full mx-auto">`;
|
||
document.getElementById('downloadBtn').classList.remove('hidden');
|
||
} catch (error) {
|
||
console.error('生成失败:', error);
|
||
alert('生成失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
function downloadQR() {
|
||
if (currentQRCode) {
|
||
const link = document.createElement('a');
|
||
link.download = 'qrcode.png';
|
||
link.href = currentQRCode;
|
||
link.click();
|
||
}
|
||
}
|
||
|
||
document.getElementById('size').addEventListener('input', (e) => {
|
||
document.getElementById('sizeValue').textContent = e.target.value;
|
||
});
|
||
document.getElementById('generateBtn').addEventListener('click', generateQR);
|
||
document.getElementById('downloadBtn').addEventListener('click', downloadQR);
|
||
|
||
</script>
|
||
|
||
<?php include_once '../footer.php'; ?>
|