Browse Source

移除模态框,改为直接在外部填写表单,放大签名区域

master
Default User 1 month ago
parent
commit
d9d0ed443e
  1. 92
      certificate.html

92
certificate.html

@ -424,33 +424,6 @@
</div>
<div id="certificateInfo">
<div class="empty-state">
<p>请点击下方按钮填写合格证信息</p>
</div>
</div>
<button class="verify-btn" id="verifyBtn" onclick="checkSubmissionStatus()">提交信息</button>
<button class="verify-btn" id="exportBtn" onclick="exportCertificate()" style="margin-top: 10px;">导出信息</button>
<button class="verify-btn" id="resetBtn" onclick="resetSubmissionStatus()" style="display: none; margin-top: 10px; background-color: #6c757d;">重置提交</button>
</div>
<div class="hint">
提示:如果您用于经销该产品,请您及时点击查验收货,保存食用农产品合格证电子档案,若您购买用于食用,无需点击查验收货。
</div>
<div class="support">
技术支持:四川又鸟蛋贸易有限公司
</div>
</div>
<!-- 填写信息弹窗 -->
<div id="modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>填写合格证信息</h2>
<button class="close-btn" onclick="closeModal()">&times;</button>
</div>
<div class="modal-body">
<form id="certificateForm">
<div class="form-group">
<label for="subjectName">主体名称:<span style="color: red;">*</span></label>
@ -483,23 +456,31 @@
<div class="form-group">
<label>手写签名:<span style="color: red;">*</span></label>
<div class="signature-container">
<canvas id="signatureCanvas" width="300" height="150"></canvas>
<canvas id="signatureCanvas" width="350" height="200"></canvas>
<div class="signature-actions">
<button type="button" onclick="clearSignature()">清除</button>
</div>
</div>
<input type="hidden" id="signature" name="signature">
</div>
<div class="form-actions" style="margin-top: 20px;">
<button type="submit" form="certificateForm" class="submit-btn">提交信息</button>
</div>
</form>
</div>
<div class="form-actions">
<button type="button" class="cancel-btn" onclick="closeModal()">取消</button>
<button type="button" class="clear-btn" onclick="clearForm()">清除</button>
<button type="submit" form="certificateForm" class="submit-btn">提交</button>
</div>
<div class="hint">
提示:如果您用于经销该产品,请您及时点击查验收货,保存食用农产品合格证电子档案,若您购买用于食用,无需点击查验收货。
</div>
<div class="support">
技术支持:四川又鸟蛋贸易有限公司
</div>
</div>
<script>
// 签名画布相关变量
let canvas, ctx, isDrawing = false;
@ -608,39 +589,7 @@
container.innerHTML = html;
}
// 禁用外部滚轮
function disableExternalScroll() {
// 保存原始的overflow值
document.body.style.overflow = 'hidden';
}
// 恢复外部滚轮
function enableExternalScroll() {
// 恢复原始的overflow值
document.body.style.overflow = '';
}
function openModal() {
document.getElementById('modal').classList.add('show');
// 禁用外部滚轮
disableExternalScroll();
// 初始化签名画布
initSignatureCanvas();
}
function closeModal() {
document.getElementById('modal').classList.remove('show');
// 恢复外部滚轮
enableExternalScroll();
}
// 点击弹窗外部关闭
window.onclick = function(event) {
const modal = document.getElementById('modal');
if (event.target == modal) {
closeModal();
}
};
// 初始化签名画布
function initSignatureCanvas() {
@ -1014,8 +963,7 @@
// 显示结果
displayCertificate(data.certificate);
// 关闭弹窗
closeModal();
// 显示成功提示
alert('提交成功!合格证信息已保存到数据库。');
@ -1046,17 +994,7 @@
window.onload = function() {
loadCertificate();
setupDateInput();
// 自动检查提交状态,如果未提交则弹出填写窗口
setTimeout(function() {
const sessionId = getSessionId();
const hasSubmitted = sessionStorage.getItem('certificateSubmitted_' + sessionId);
if (!hasSubmitted) {
// 未提交过,自动打开填写弹窗
openModal();
}
}, 500); // 延迟执行,确保页面完全加载
initSignatureCanvas();
};
</script>
</body>

Loading…
Cancel
Save