xxk/qrcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
ljp 2025-03-07 15:26:41 +08:00
parent 896b54128d
commit 05870256aa
Signed by: ljp
GPG Key ID: 72439F1F5C7BC795
8 changed files with 4704 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
default.json
View File

@ -5,8 +5,6 @@
"list": [ "list": [
{ "deptCode": "30800", "deptName": "VIP" }, { "deptCode": "30800", "deptName": "VIP" },
{ "deptCode": "30900", "deptName": "口腔预防科" }, { "deptCode": "30900", "deptName": "口腔预防科" },
{ "deptCode": "32100", "deptName": "科研实验室" },
{ "deptCode": "32200", "deptName": "教学实验室" },
{ "deptCode": "32300", "deptName": "口腔全科" }, { "deptCode": "32300", "deptName": "口腔全科" },
{ "deptCode": "30200", "deptName": "牙体牙髓科" }, { "deptCode": "30200", "deptName": "牙体牙髓科" },
{ "deptCode": "30300", "deptName": "儿童口腔科" }, { "deptCode": "30300", "deptName": "儿童口腔科" },
@ -16,7 +14,6 @@
{ "deptCode": "30700", "deptName": "颌面外科门诊" }, { "deptCode": "30700", "deptName": "颌面外科门诊" },
{ "deptCode": "30100", "deptName": "牙周科" }, { "deptCode": "30100", "deptName": "牙周科" },
{ "deptCode": "31000", "deptName": "黏膜科" }, { "deptCode": "31000", "deptName": "黏膜科" },
{ "deptCode": "10700", "deptName": "院感科" },
{ "deptCode": "32400", "deptName": "急诊科" } { "deptCode": "32400", "deptName": "急诊科" }
] ]
} }

56
index.html
View File

@ -4,20 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维码生成器</title> <title>二维码生成器</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <link rel="stylesheet" href="./semantic.min.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="./style.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="./jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <script src="./semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script> <script src="./qrcode.min.js"></script>
</head> </head>
<body> <body>
<div class="ui container"> <div class="ui container">
<div class="ui basic center aligned segment"> <h2 class="ui blue header center aligned">二维码生成器</h2>
<h2 class="ui blue header">
<i class="qrcode icon"></i>
<div class="content">二维码生成器</div>
</h2>
</div>
<div class="ui two column centered grid"> <div class="ui two column centered grid">
<div class="column"> <div class="column">
@ -25,34 +20,45 @@
<div class="content form-content"> <div class="content form-content">
<div class="ui form"> <div class="ui form">
<div class="field"> <div class="field">
<label><i class="heading icon"></i>二维码标题</label> <label>二维码标题</label>
<div class="ui fluid input">
<input type="text" id="qrTitle" value="扫码签到"> <input type="text" id="qrTitle" value="扫码签到">
</div> </div>
<div class="field">
<label>选择预定义内容</label>
<div class="ui fluid search selection dropdown" id="deptSelector">
<input type="hidden" name="department">
<div class="default text">选择或搜索科室</div>
<div class="menu"></div>
</div>
</div> </div>
<div class="required field"> <div class="required field">
<label><i class="edit icon"></i>输入内容</label> <label>输入内容</label>
<textarea id="qrContent" placeholder="请输入要生成二维码的内容"></textarea> <textarea id="qrContent" placeholder="请输入要生成二维码的内容"></textarea>
</div> </div>
<div class="field"> <div class="field">
<label><i class="font icon"></i>底部文字</label> <label>底部文字</label>
<textarea id="centerText" placeholder="请输入要在二维码下方显示的文字"></textarea> <textarea id="centerText" placeholder="请输入要在二维码下方显示的文字"></textarea>
</div> </div>
<div class="field button-container"> <div class="field button-container">
<div class="ui two buttons"> <div class="ui fluid buttons">
<button class="ui primary labeled icon button" id="generateBtn"> <button class="ui primary button" id="generateBtn">生成二维码</button>
<i class="sync icon"></i> <button class="ui button" id="printBtn">打印二维码</button>
生成二维码
</button>
<button class="ui labeled icon button" id="printBtn">
<i class="print icon"></i>
打印二维码
</button>
</div> </div>
</div> </div>
<div class="ui info message print-tips">
<div class="header">打印设置建议</div>
<ul class="list">
<li>纸张大小: A4</li>
<li>打印方式: 单面</li>
<li>缩放比例: 100%</li>
<li>边距: 无</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -71,7 +77,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 打印专用容器 -->
<div id="print-container" class="print-only"></div> <div id="print-container" class="print-only"></div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

4154
jquery.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

0
qrcode.js → qrcode.min.js vendored
View File

68
script.js
View File

@ -1,10 +1,12 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
// 缓存DOM元素
const qrContent = document.getElementById("qrContent"); const qrContent = document.getElementById("qrContent");
const qrTitle = document.getElementById("qrTitle"); const qrTitle = document.getElementById("qrTitle");
const centerText = document.getElementById("centerText"); const centerText = document.getElementById("centerText");
const generateBtn = document.getElementById("generateBtn"); const generateBtn = document.getElementById("generateBtn");
const printBtn = document.getElementById("printBtn"); const printBtn = document.getElementById("printBtn");
const qrcodeDiv = document.getElementById("qrcode"); const qrcodeDiv = document.getElementById("qrcode");
const deptSelector = $('#deptSelector');
// 初始化表单验证 // 初始化表单验证
$('.ui.form').form({ $('.ui.form').form({
@ -13,6 +15,52 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}); });
// 加载科室数据
fetch('default.json')
.then(response => response.json())
.then(data => {
// 填充科室下拉菜单
const menuItems = data.list.map(dept =>
`<div class="item" data-value="${dept.deptCode}" data-dept-name="${dept.deptName}">${dept.deptName}</div>`
).join('');
deptSelector.find('.menu').html(menuItems);
// 初始化下拉菜单
deptSelector.dropdown({
onChange: function(value) {
if (!value) return;
const deptName = $(this).find(`.item[data-value="${value}"]`).attr('data-dept-name');
// 生成URL
let url = data.baseUrl;
if (data.type === 'searchParams') {
url += `?deptCode=${value}&deptName=${deptName}`;
} else {
url += `/${value}`;
}
qrContent.value = url;
// 更新标题和底部文字
if (!qrTitle.value.trim()) {
qrTitle.value = data.title;
}
centerText.value = deptName;
// 自动生成二维码
generateQRCode();
}
});
// 保存配置数据
window.configData = data;
})
.catch(error => {
console.error('加载科室数据失败:', error);
alert('加载科室数据失败，请刷新页面重试');
});
// 生成按钮点击事件 // 生成按钮点击事件
generateBtn.addEventListener("click", function() { generateBtn.addEventListener("click", function() {
if (!qrContent.value.trim()) { if (!qrContent.value.trim()) {
@ -29,12 +77,9 @@ document.addEventListener("DOMContentLoaded", function () {
return; return;
} }
// 确保二维码已经生成
if (!qrcodeDiv.querySelector('canvas')) { if (!qrcodeDiv.querySelector('canvas')) {
generateQRCode(); generateQRCode();
setTimeout(() => { setTimeout(preparePrintAndPrint, 300);
preparePrintAndPrint();
}, 300);
} else { } else {
preparePrintAndPrint(); preparePrintAndPrint();
} }
@ -48,7 +93,6 @@ document.addEventListener("DOMContentLoaded", function () {
return; return;
} }
// 准备打印内容
const printContainer = document.getElementById('print-container'); const printContainer = document.getElementById('print-container');
printContainer.innerHTML = ''; printContainer.innerHTML = '';
@ -65,7 +109,7 @@ document.addEventListener("DOMContentLoaded", function () {
const textSize = 24; const textSize = 24;
const padding = 40; const padding = 40;
// 计算文字行数 // 计算文字行数和高度
const textLines = text ? text.split('\n').length : 0; const textLines = text ? text.split('\n').length : 0;
const textHeight = textLines * textSize * 1.5; const textHeight = textLines * textSize * 1.5;
@ -120,10 +164,7 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
} }
// 添加到打印容器
printContainer.appendChild(printCanvas); printContainer.appendChild(printCanvas);
// 开始打印
window.print(); window.print();
} catch (err) { } catch (err) {
@ -145,15 +186,15 @@ document.addEventListener("DOMContentLoaded", function () {
const qrWidth = Math.min(containerWidth * 0.9, containerHeight * 0.7); const qrWidth = Math.min(containerWidth * 0.9, containerHeight * 0.7);
// 文字大小 // 文字大小
const titleSize = Math.max(24, Math.floor(qrWidth * 0.06)); const titleSize = Math.max(24, Math.floor(qrWidth * .06));
const textSize = Math.max(18, Math.floor(qrWidth * 0.05)); const textSize = Math.max(18, Math.floor(qrWidth * .05));
const padding = Math.floor(qrWidth * 0.08); const padding = Math.floor(qrWidth * .08);
const title = qrTitle.value.trim(); const title = qrTitle.value.trim();
const text = centerText.value.trim(); const text = centerText.value.trim();
// 计算二维码实际大小 // 计算二维码实际大小
const qrImageSize = Math.min(qrWidth * 0.8, containerHeight * 0.6); const qrImageSize = Math.min(qrWidth * .8, containerHeight * .6);
// 计算高度 // 计算高度
const titleHeight = title ? titleSize + padding : 0; const titleHeight = title ? titleSize + padding : 0;
@ -214,7 +255,6 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
} }
// 添加到DOM
qrcodeDiv.appendChild(canvas); qrcodeDiv.appendChild(canvas);
}, 100); }, 100);
} }

372
semantic.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
semantic.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

191
style.css
View File

@ -3,7 +3,82 @@ body {
padding: 2em 0; padding: 2em 0;
} }
/* 模拟 A4 纸比例 (1:1.414, 即 210mm:297mm) */ /* 布局 */
.ui.two.column.grid > .column {
display: flex;
}
.ui.fluid.card {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.ui.card .content {
min-height: 400px;
display: flex;
padding: 1em !important;
flex-grow: 1;
}
/* 表单样式 */
.form-content {
display: flex;
flex-direction: column;
}
.ui.form {
display: flex;
flex-direction: column;
height: 100%;
}
.ui.form .field {
margin-bottom: 1em;
}
.ui.form textarea {
min-height: 80px;
resize: vertical;
white-space: pre-wrap;
word-wrap: break-word;
word-break: normal;
overflow-wrap: break-word;
line-height: 1.5;
}
#qrContent, #centerText {
font-family: "Helvetica Neue", Arial, sans-serif;
}
/* 按钮容器 */
.button-container {
margin-top: auto !important;
padding: 0 !important;
width: 100%;
}
/* 使用 Semantic UI 标准按钮组 */
.ui.fluid.buttons {
width: 100%;
margin: 0 !important;
}
.ui.fluid.buttons .button {
width: 50%;
}
#printBtn {
border: 1px solid #e0e1e2 !important;
background-color: #f8f9fa !important;
}
#printBtn:hover {
background-color: #e9ecef !important;
}
/* 预览区域 */
.preview-paper { .preview-paper {
background-color: white; background-color: white;
width: 100%; width: 100%;
@ -32,7 +107,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: visible; /* 允许内容溢出 */ overflow: visible;
} }
#qrcode canvas { #qrcode canvas {
@ -41,109 +116,11 @@ body {
object-fit: contain; object-fit: contain;
} }
/* 确保左右卡片内容区域高度一致 */
.ui.card .content {
min-height: 400px;
display: flex;
padding: 1em !important;
}
/* 确保左右卡片高度一致 */
.ui.two.column.grid > .column {
display: flex;
}
.ui.fluid.card {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.ui.card > .content {
flex-grow: 1;
}
/* 右侧卡片内容区适应 A4 比例 */
.preview-card .content {
padding: 1em !important;
display: flex;
align-items: center;
justify-content: center;
}
/* 输入区样式优化 */
.form-content {
display: flex;
flex-direction: column;
padding-bottom: 1em !important;
}
.ui.form {
display: flex;
flex-direction: column;
height: 100%;
}
.ui.form .field {
margin-bottom: 1em;
}
.ui.form textarea {
min-height: 80px;
resize: vertical;
}
/* 自动拉伸中间区域 */
.ui.form .field:nth-child(2) textarea {
flex-grow: 2;
}
/* 优化按钮间距与布局 */
.button-fields {
margin-top: auto !important;
margin-bottom: 0 !important;
}
.button-fields .field {
padding: 0 !important;
margin-bottom: 0.75em !important; /* 增加了按钮间间距 */
}
.button-fields .field:last-child {
margin-bottom: 0 !important;
}
/* 优化按钮容器 */
.button-container {
margin-top: auto !important;
padding: 0 !important;
}
/* 按钮间距调整 */
.ui.two.buttons {
gap: 10px; /* 增加按钮之间的间距 */
display: flex;
}
/* 确保按钮宽度相等 */
.ui.two.buttons .button {
margin: 0 !important;
flex: 1;
}
/* 为打印按钮添加一点视觉区分 */
#printBtn {
box-shadow: none !important;
border: 1px solid #e0e1e2 !important;
background-color: #f8f9fa !important;
}
#printBtn:hover {
background-color: #e9ecef !important;
}
/* 打印样式 */ /* 打印样式 */
#print-container {
display: none;
}
@media print { @media print {
@page { @page {
size: A4 portrait; size: A4 portrait;
@ -162,7 +139,6 @@ body {
display: none !important; display: none !important;
} }
/* 显示打印容器 */
#print-container { #print-container {
display: block !important; display: block !important;
position: fixed; position: fixed;
@ -184,8 +160,3 @@ body {
height: auto !important; height: auto !important;
} }
} }
/* 打印专用容器（正常不显示） */
#print-container {
display: none;
}