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.
1464 lines
42 KiB
1464 lines
42 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>合格证信息</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
/* 防止iOS触摸拖动 */
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* 防止iOS设备上的弹性滚动 */
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* 防止弹窗背景滚动 */
|
|
.modal {
|
|
/* 防止iOS触摸事件穿透 */
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 防止按钮等元素的默认触摸行为 */
|
|
button, input, canvas {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
position: relative;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.back-btn {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.more-btn, .scan-btn {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.certificate {
|
|
margin: 12px;
|
|
padding: 12px;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.promise-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: #e6f7ee;
|
|
color: #28a745;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.promise-badge span {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.promise-text {
|
|
margin-bottom: 10px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.promise-item {
|
|
margin-top: 4px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.info-item {
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 500;
|
|
min-width: 80px;
|
|
color: #666;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
color: #333;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.verify-btn {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.verify-btn:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
.hint {
|
|
margin: 16px;
|
|
padding: 12px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.support {
|
|
text-align: center;
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
color: #999;
|
|
border-top: 1px solid #f0f0f0;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
width: 90%;
|
|
max-width: 400px;
|
|
max-height: 80vh;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 16px 16px;
|
|
}
|
|
|
|
.modal-body form {
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
background-color: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
}
|
|
|
|
form {
|
|
padding: 16px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: #28a745;
|
|
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background-color: white;
|
|
border-top: 1px solid #e9ecef;
|
|
position: sticky;
|
|
bottom: 0;
|
|
}
|
|
|
|
.cancel-btn, .clear-btn, .submit-btn {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.clear-btn {
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
border: none;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #28a745;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.cancel-btn:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.clear-btn:hover {
|
|
background-color: #e0a800;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
/* 签名区域样式 */
|
|
.signature-container {
|
|
position: relative;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
#signatureCanvas {
|
|
border: 2px solid #ced4da;
|
|
border-radius: 8px;
|
|
background-color: white;
|
|
cursor: crosshair;
|
|
width: 100%;
|
|
height: 200px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.signature-actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.signature-actions button {
|
|
padding: 8px 16px;
|
|
background-color: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.signature-actions button:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.signature-actions .sign-hint {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
/* 签名显示样式 */
|
|
.signature-display {
|
|
margin-left: 30px;
|
|
}
|
|
.signature-display img {
|
|
max-width: 180px;
|
|
max-height: 90px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
background-color: white;
|
|
}
|
|
|
|
/* 签名弹窗样式 */
|
|
.signature-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
z-index: 2000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.signature-modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
.signature-modal-content {
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.signature-modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.signature-modal-header h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.signature-modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#signatureModalCanvas {
|
|
border: 2px solid #ced4da;
|
|
border-radius: 8px;
|
|
background-color: white;
|
|
cursor: crosshair;
|
|
width: 100%;
|
|
height: 300px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.signature-modal-actions {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.signature-modal-actions button {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.signature-modal-actions .cancel-btn {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.signature-modal-actions .clear-btn {
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
}
|
|
|
|
.signature-modal-actions .confirm-btn {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.signature-modal-actions .cancel-btn:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.signature-modal-actions .clear-btn:hover {
|
|
background-color: #e0a800;
|
|
}
|
|
|
|
.signature-modal-actions .confirm-btn:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.certificate {
|
|
margin: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.header {
|
|
padding: 12px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div></div>
|
|
<h1>合格证信息</h1>
|
|
<div class="header-actions">
|
|
<button class="more-btn">•••</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="certificate">
|
|
<div class="promise-badge">
|
|
<span>✓</span> 承诺达标合格证
|
|
</div>
|
|
|
|
<div class="promise-text">
|
|
我承诺销售的食用农产品：
|
|
<div class="promise-item">✓ 不使用禁用农药兽药、停用兽药和非法添加物</div>
|
|
<div class="promise-item">✓ 常规农药兽药残留不超标</div>
|
|
<div class="promise-item">✓ 对承诺的真实性负责</div>
|
|
</div>
|
|
|
|
<div id="certificateInfo">
|
|
<form id="certificateForm">
|
|
<div class="form-group">
|
|
<label for="subjectName">主体名称：<span style="color: red;">*</span></label>
|
|
<input type="text" id="subjectName" name="subjectName" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="productName">产品名称：<span style="color: red;">*</span></label>
|
|
<input type="text" id="productName" name="productName" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="weight">产品重量：<span style="color: red;">*</span></label>
|
|
<input type="text" id="weight" name="weight" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="basis">承诺依据：<span style="color: red;">*</span></label>
|
|
<input type="text" id="basis" name="basis" value="质量安全控制符合要求" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="origin">产地：<span style="color: red;">*</span></label>
|
|
<input type="text" id="origin" name="origin" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact">联系方式：<span style="color: red;">*</span></label>
|
|
<input type="tel" id="contact" name="contact" required pattern="^1[3-9]\d{9}$" title="请输入11位手机号码">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="date">开具日期：<span style="color: red;">*</span></label>
|
|
<input type="date" id="date" name="date" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>手写签名：</label>
|
|
<div class="signature-container">
|
|
<canvas id="signatureCanvas" width="350" height="200" onclick="openSignatureModal()"></canvas>
|
|
<div class="signature-actions">
|
|
<span class="sign-hint">点击签名区域开始签名</span>
|
|
<button type="button" onclick="clearSignature()">清除</button>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="signature" name="signature">
|
|
</div>
|
|
|
|
<!-- 签名弹窗 -->
|
|
<div class="signature-modal" id="signatureModal">
|
|
<div class="signature-modal-content">
|
|
<div class="signature-modal-header">
|
|
<h3>手写签名</h3>
|
|
<button type="button" class="signature-modal-close" onclick="closeSignatureModal()">×</button>
|
|
</div>
|
|
<canvas id="signatureModalCanvas" width="400" height="300"></canvas>
|
|
<div class="signature-modal-actions">
|
|
<button type="button" class="cancel-btn" onclick="closeSignatureModal()">取消</button>
|
|
<button type="button" class="clear-btn" onclick="clearModalSignature()">清除</button>
|
|
<button type="button" class="confirm-btn" onclick="confirmSignature()">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions" style="margin-top: 20px;">
|
|
<button type="submit" form="certificateForm" class="submit-btn">提交信息</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="support">
|
|
技术支持：四川又鸟蛋贸易有限公司
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
// 签名画布相关变量
|
|
let canvas, ctx, isDrawing = false;
|
|
// 弹窗签名画布相关变量
|
|
let modalCanvas, modalCtx, modalIsDrawing = false;
|
|
|
|
// 获取或创建会话标识
|
|
function getSessionId() {
|
|
// 首先从URL参数中获取会话ID
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
let sessionId = urlParams.get('sessionId');
|
|
|
|
// 如果URL中有会话ID，直接使用，不存储到localStorage
|
|
// 这样可以确保每个二维码的sessionId独立，避免冲突
|
|
if (sessionId) {
|
|
return sessionId;
|
|
}
|
|
|
|
// URL中没有会话ID时，才从本地存储中获取或创建
|
|
sessionId = localStorage.getItem('certificateSessionId');
|
|
if (!sessionId) {
|
|
// 生成唯一会话标识
|
|
sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
localStorage.setItem('certificateSessionId', sessionId);
|
|
}
|
|
return sessionId;
|
|
}
|
|
|
|
// 填充表单数据
|
|
function populateForm(certificate) {
|
|
if (!certificate) return;
|
|
|
|
// 填充基本信息
|
|
document.getElementById('subjectName').value = certificate.subjectName || '';
|
|
document.getElementById('productName').value = certificate.productName || '';
|
|
document.getElementById('weight').value = certificate.weight || '';
|
|
document.getElementById('basis').value = certificate.basis || '';
|
|
document.getElementById('origin').value = certificate.origin || '';
|
|
document.getElementById('contact').value = certificate.contact || '';
|
|
document.getElementById('date').value = formatDate(certificate.date) || '';
|
|
|
|
// 签名部分保持空白，等待补填
|
|
clearSignature();
|
|
}
|
|
|
|
// 从服务器加载最新的合格证信息
|
|
function loadCertificate() {
|
|
const sessionId = getSessionId();
|
|
// 直接从服务器获取最新的合格证信息，包含会话标识
|
|
fetch(`/getLatestCertificate?sessionId=${encodeURIComponent(sessionId)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.certificate) {
|
|
// 检查是否包含签名
|
|
if (data.certificate.signature) {
|
|
// 有签名，显示只读模式
|
|
displayCertificate(data.certificate);
|
|
// 标记为已完成
|
|
sessionStorage.setItem('certificateSubmitted_' + sessionId, 'true');
|
|
} else {
|
|
// 无签名，保持可编辑状态并填充已有数据
|
|
populateForm(data.certificate);
|
|
// 标记为部分完成
|
|
sessionStorage.setItem('certificatePartiallyCompleted_' + sessionId, 'true');
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取合格证信息失败:', error);
|
|
// 即使获取失败，也不影响页面显示
|
|
});
|
|
}
|
|
|
|
// 格式化日期，确保只显示到日
|
|
function formatDate(dateValue) {
|
|
if (!dateValue) return '';
|
|
// 如果是完整的日期时间字符串，只取日期部分
|
|
if (typeof dateValue === 'string' && dateValue.includes('T')) {
|
|
return dateValue.split('T')[0];
|
|
}
|
|
return dateValue;
|
|
}
|
|
|
|
// 完全隐藏电话号码，全部显示为*号
|
|
function hidePhoneNumber(phone) {
|
|
if (!phone) return phone;
|
|
return '*'.repeat(phone.length);
|
|
}
|
|
|
|
// 隐藏主体名称中间部分，只显示第一个字和最后一个字
|
|
function hideSubjectName(name) {
|
|
if (!name || name.length <= 2) return name;
|
|
return name.charAt(0) + '*'.repeat(name.length - 2) + name.charAt(name.length - 1);
|
|
}
|
|
|
|
// 显示合格证信息
|
|
function displayCertificate(certificate) {
|
|
const container = document.getElementById('certificateInfo');
|
|
let html = '';
|
|
|
|
html += `
|
|
<div class="info-item">
|
|
<span class="label">主体名称：</span>
|
|
<span class="value">${certificate.subjectName || ''}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">产品名称：</span>
|
|
<span class="value">${certificate.productName || ''}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">产品重量：</span>
|
|
<span class="value">${certificate.weight || ''}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">承诺依据：</span>
|
|
<span class="value">${certificate.basis || ''}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">产地：</span>
|
|
<span class="value">${certificate.origin || ''}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">联系方式：</span>
|
|
<span class="value">${hidePhoneNumber(certificate.contact) || ''}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">开具日期：</span>
|
|
<span class="value">${formatDate(certificate.date) || ''}</span>
|
|
</div>
|
|
`;
|
|
|
|
if (certificate.signature) {
|
|
// 显示二维码
|
|
const sessionId = getSessionId();
|
|
const viewUrl = `http://8.137.125.67:3008/view.html?sessionId=${encodeURIComponent(sessionId)}`;
|
|
|
|
html += `
|
|
<div class="info-item" style="display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0;">
|
|
<span class="label" style="margin-bottom: 10px;">签名与二维码：</span>
|
|
<div style="display: flex; align-items: flex-start; width: 100%;">
|
|
<div style="flex: 1; min-width: 0; padding-right: 10px;">
|
|
<div style="font-size: 13px; color: #666; margin-bottom: 6px;">手写签名</div>
|
|
<div class="signature-display" style="display: block; padding: 0;">
|
|
<img src="${certificate.signature}" alt="签名" style="max-width: 100%; max-height: 120px; object-fit: contain; margin: 0;">
|
|
</div>
|
|
</div>
|
|
<div style="flex-shrink: 0; text-align: center;">
|
|
<div style="color: #28a745; margin-bottom: 8px; font-size: 13px; font-weight: 500;">📋 合格证二维码</div>
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(viewUrl)}"
|
|
alt="二维码"
|
|
style="width: 120px; height: 120px; background-color: white; padding: 6px; border-radius: 6px; border: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
|
|
|
|
// 初始化签名画布
|
|
function initSignatureCanvas() {
|
|
// 初始化主画布
|
|
canvas = document.getElementById('signatureCanvas');
|
|
if (canvas) {
|
|
// 确保画布的实际尺寸与显示尺寸一致
|
|
resizeCanvas(canvas);
|
|
|
|
ctx = canvas.getContext('2d');
|
|
ctx.strokeStyle = '#000';
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
// 清除画布
|
|
clearSignature();
|
|
}
|
|
|
|
// 初始化弹窗画布
|
|
initModalSignatureCanvas();
|
|
|
|
// 监听窗口大小变化，重新调整画布尺寸
|
|
window.addEventListener('resize', function() {
|
|
if (canvas) resizeCanvas(canvas);
|
|
if (modalCanvas) resizeCanvas(modalCanvas);
|
|
});
|
|
}
|
|
|
|
// 初始化弹窗签名画布
|
|
function initModalSignatureCanvas() {
|
|
modalCanvas = document.getElementById('signatureModalCanvas');
|
|
if (!modalCanvas) return;
|
|
|
|
// 确保画布的实际尺寸与显示尺寸一致
|
|
resizeCanvas(modalCanvas);
|
|
|
|
modalCtx = modalCanvas.getContext('2d');
|
|
modalCtx.strokeStyle = '#000';
|
|
modalCtx.lineWidth = 3; // 弹窗中使用更粗的线条
|
|
modalCtx.lineCap = 'round';
|
|
modalCtx.lineJoin = 'round';
|
|
|
|
// 清除画布
|
|
clearModalSignature();
|
|
|
|
// 添加鼠标事件
|
|
modalCanvas.addEventListener('mousedown', startModalDrawing);
|
|
modalCanvas.addEventListener('mousemove', drawModal);
|
|
modalCanvas.addEventListener('mouseup', stopModalDrawing);
|
|
modalCanvas.addEventListener('mouseout', stopModalDrawing);
|
|
|
|
// 添加触摸事件（支持移动设备）
|
|
modalCanvas.addEventListener('touchstart', startModalDrawingTouch);
|
|
modalCanvas.addEventListener('touchmove', drawModalTouch);
|
|
modalCanvas.addEventListener('touchend', stopModalDrawing);
|
|
}
|
|
|
|
// 调整画布尺寸，确保实际尺寸与显示尺寸一致
|
|
function resizeCanvas(canvas) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = rect.width;
|
|
canvas.height = rect.height;
|
|
}
|
|
|
|
// 打开签名弹窗
|
|
function openSignatureModal() {
|
|
const modal = document.getElementById('signatureModal');
|
|
if (modal) {
|
|
modal.classList.add('show');
|
|
// 等待弹窗完全显示后调整画布尺寸
|
|
setTimeout(() => {
|
|
if (modalCanvas) {
|
|
resizeCanvas(modalCanvas);
|
|
clearModalSignature();
|
|
}
|
|
// 添加点击外部区域关闭弹窗的事件
|
|
modal.addEventListener('click', handleModalClick);
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
// 处理弹窗点击事件
|
|
function handleModalClick(e) {
|
|
const modal = document.getElementById('signatureModal');
|
|
const modalContent = document.querySelector('.signature-modal-content');
|
|
// 如果点击的是弹窗外部区域，关闭弹窗
|
|
if (e.target === modal) {
|
|
closeSignatureModal();
|
|
}
|
|
}
|
|
|
|
// 关闭签名弹窗
|
|
function closeSignatureModal() {
|
|
const modal = document.getElementById('signatureModal');
|
|
if (modal) {
|
|
// 移除点击事件监听器
|
|
modal.removeEventListener('click', handleModalClick);
|
|
modal.classList.remove('show');
|
|
}
|
|
}
|
|
|
|
// 开始弹窗签名
|
|
function startModalDrawing(e) {
|
|
modalIsDrawing = true;
|
|
const rect = modalCanvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
modalCtx.beginPath();
|
|
modalCtx.moveTo(x, y);
|
|
}
|
|
|
|
// 弹窗签名
|
|
function drawModal(e) {
|
|
if (!modalIsDrawing) return;
|
|
const rect = modalCanvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
modalCtx.lineTo(x, y);
|
|
modalCtx.stroke();
|
|
}
|
|
|
|
// 停止弹窗签名
|
|
function stopModalDrawing() {
|
|
modalIsDrawing = false;
|
|
}
|
|
|
|
// 触摸事件处理（弹窗）
|
|
function startModalDrawingTouch(e) {
|
|
e.preventDefault();
|
|
const touch = e.touches[0];
|
|
const mouseEvent = new MouseEvent('mousedown', {
|
|
clientX: touch.clientX,
|
|
clientY: touch.clientY
|
|
});
|
|
modalCanvas.dispatchEvent(mouseEvent);
|
|
}
|
|
|
|
function drawModalTouch(e) {
|
|
e.preventDefault();
|
|
const touch = e.touches[0];
|
|
const mouseEvent = new MouseEvent('mousemove', {
|
|
clientX: touch.clientX,
|
|
clientY: touch.clientY
|
|
});
|
|
modalCanvas.dispatchEvent(mouseEvent);
|
|
}
|
|
|
|
// 清除弹窗签名
|
|
function clearModalSignature() {
|
|
if (!modalCanvas || !modalCtx) return;
|
|
modalCtx.clearRect(0, 0, modalCanvas.width, modalCanvas.height);
|
|
// 填充背景色
|
|
modalCtx.fillStyle = '#f8f9fa';
|
|
modalCtx.fillRect(0, 0, modalCanvas.width, modalCanvas.height);
|
|
}
|
|
|
|
// 确认签名
|
|
function confirmSignature() {
|
|
if (!modalCanvas) return;
|
|
|
|
// 检查画布是否有内容
|
|
const imageData = modalCtx.getImageData(0, 0, modalCanvas.width, modalCanvas.height);
|
|
const data = imageData.data;
|
|
let hasContent = false;
|
|
|
|
// 遍历像素数据，检查是否有非背景色的像素
|
|
for (let i = 0; i < data.length; i += 4) {
|
|
const r = data[i];
|
|
const g = data[i + 1];
|
|
const b = data[i + 2];
|
|
const a = data[i + 3];
|
|
|
|
// 检查是否不是透明像素且不是背景色(#f8f9fa)
|
|
if (a > 0 && !(r === 248 && g === 249 && b === 250)) {
|
|
hasContent = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 只有当画布有内容时才保存签名
|
|
if (hasContent) {
|
|
// 将弹窗画布内容复制到主画布
|
|
if (canvas && ctx) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#f8f9fa';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// 调整比例，确保签名在主画布中合适显示
|
|
const scale = Math.min(canvas.width / modalCanvas.width, canvas.height / modalCanvas.height);
|
|
const offsetX = (canvas.width - modalCanvas.width * scale) / 2;
|
|
const offsetY = (canvas.height - modalCanvas.height * scale) / 2;
|
|
|
|
ctx.save();
|
|
ctx.translate(offsetX, offsetY);
|
|
ctx.scale(scale, scale);
|
|
ctx.drawImage(modalCanvas, 0, 0);
|
|
ctx.restore();
|
|
}
|
|
|
|
// 保存签名到隐藏字段
|
|
saveSignature();
|
|
|
|
// 关闭弹窗
|
|
closeSignatureModal();
|
|
} else {
|
|
alert('请先进行签名');
|
|
}
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
isDrawing = true;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
function draw(e) {
|
|
if (!isDrawing) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function stopDrawing() {
|
|
isDrawing = false;
|
|
}
|
|
|
|
// 触摸事件处理
|
|
function startDrawingTouch(e) {
|
|
e.preventDefault();
|
|
const touch = e.touches[0];
|
|
const mouseEvent = new MouseEvent('mousedown', {
|
|
clientX: touch.clientX,
|
|
clientY: touch.clientY
|
|
});
|
|
canvas.dispatchEvent(mouseEvent);
|
|
}
|
|
|
|
function drawTouch(e) {
|
|
e.preventDefault();
|
|
const touch = e.touches[0];
|
|
const mouseEvent = new MouseEvent('mousemove', {
|
|
clientX: touch.clientX,
|
|
clientY: touch.clientY
|
|
});
|
|
canvas.dispatchEvent(mouseEvent);
|
|
}
|
|
|
|
// 清除签名
|
|
function clearSignature() {
|
|
if (!canvas || !ctx) return;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// 填充背景色
|
|
ctx.fillStyle = '#f8f9fa';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
// 重置签名隐藏字段
|
|
document.getElementById('signature').value = '';
|
|
}
|
|
|
|
// 保存签名
|
|
function saveSignature() {
|
|
if (!canvas) return;
|
|
|
|
// 检查画布是否有内容
|
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
const data = imageData.data;
|
|
let hasContent = false;
|
|
|
|
// 遍历像素数据，检查是否有非背景色的像素
|
|
for (let i = 0; i < data.length; i += 4) {
|
|
const r = data[i];
|
|
const g = data[i + 1];
|
|
const b = data[i + 2];
|
|
const a = data[i + 3];
|
|
|
|
// 检查是否不是透明像素且不是背景色(#f8f9fa)
|
|
if (a > 0 && !(r === 248 && g === 249 && b === 250)) {
|
|
hasContent = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 只有当画布有内容时才存储签名数据
|
|
if (hasContent) {
|
|
// 将画布转换为base64编码
|
|
const signatureData = canvas.toDataURL('image/png');
|
|
// 存储到隐藏输入字段
|
|
document.getElementById('signature').value = signatureData;
|
|
} else {
|
|
// 画布为空，清空签名字段
|
|
document.getElementById('signature').value = '';
|
|
}
|
|
}
|
|
|
|
// 清除表单
|
|
function clearForm() {
|
|
// 清除所有输入字段
|
|
document.getElementById('subjectName').value = '';
|
|
document.getElementById('productName').value = '';
|
|
document.getElementById('weight').value = '';
|
|
document.getElementById('basis').value = '';
|
|
document.getElementById('origin').value = '';
|
|
document.getElementById('contact').value = '';
|
|
document.getElementById('date').value = '';
|
|
// 清除签名
|
|
clearSignature();
|
|
}
|
|
|
|
// 检查提交状态
|
|
function checkSubmissionStatus() {
|
|
const sessionId = getSessionId();
|
|
const hasSubmitted = sessionStorage.getItem('certificateSubmitted_' + sessionId);
|
|
|
|
if (hasSubmitted) {
|
|
// 已提交过，显示提示
|
|
if (confirm('您已填写过信息，需要导出当前信息吗？\n\n如果需要填写新信息，请点击取消后选择"重置提交"。')) {
|
|
// 触发导出信息按钮的点击事件
|
|
document.getElementById('exportBtn').click();
|
|
}
|
|
} else {
|
|
// 未提交过，打开填写弹窗
|
|
openModal();
|
|
}
|
|
}
|
|
|
|
// 导出信息函数
|
|
function exportCertificate() {
|
|
const sessionId = getSessionId();
|
|
|
|
// 获取当前合格证信息
|
|
fetch(`/getLatestCertificate?sessionId=${encodeURIComponent(sessionId)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.certificate) {
|
|
// 生成查看页面的URL，包含会话ID
|
|
const viewUrl = `http://8.137.125.67:3008/view.html?sessionId=${encodeURIComponent(sessionId)}`;
|
|
|
|
// 生成二维码并显示在弹窗中
|
|
generateQRCode(viewUrl);
|
|
} else {
|
|
alert('没有找到可导出的信息');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取信息失败:', error);
|
|
alert('获取信息失败，请重试');
|
|
});
|
|
}
|
|
|
|
// 在页面下方显示二维码
|
|
function displayQRCodeOnPage(url) {
|
|
// 检查是否已有二维码容器，如有则先移除
|
|
const existingContainer = document.getElementById('qrCodeDisplay');
|
|
if (existingContainer) {
|
|
existingContainer.remove();
|
|
}
|
|
|
|
// 创建二维码容器
|
|
const qrContainer = document.createElement('div');
|
|
qrContainer.id = 'qrCodeDisplay';
|
|
qrContainer.style.cssText = `
|
|
margin: 8px 0;
|
|
padding: 8px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
`;
|
|
|
|
// 创建二维码标题
|
|
const qrTitle = document.createElement('h3');
|
|
qrTitle.style.cssText = `
|
|
color: #28a745;
|
|
margin-bottom: 6px;
|
|
font-size: 13px;
|
|
`;
|
|
qrTitle.innerHTML = '📋 合格证二维码';
|
|
|
|
// 创建二维码图片
|
|
const qrImage = document.createElement('img');
|
|
qrImage.id = 'qrCodeImage';
|
|
qrImage.style.cssText = `
|
|
max-width: 120px;
|
|
max-height: 120px;
|
|
margin-bottom: 6px;
|
|
background-color: white;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
border: 1px solid #e0e0e0;
|
|
`;
|
|
|
|
|
|
// 使用Google Charts API生成二维码
|
|
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(url)}`;
|
|
qrImage.src = qrCodeUrl;
|
|
|
|
// 组装容器
|
|
qrContainer.appendChild(qrTitle);
|
|
qrContainer.appendChild(qrImage);
|
|
|
|
// 找到合适的位置插入二维码容器
|
|
// 在certificate元素内插入
|
|
const certificateElement = document.querySelector('.certificate');
|
|
if (certificateElement) {
|
|
certificateElement.appendChild(qrContainer);
|
|
} else {
|
|
// 如果没有certificate元素，就在container末尾插入
|
|
const container = document.querySelector('.container');
|
|
if (container) {
|
|
container.appendChild(qrContainer);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 重置提交状态
|
|
function resetSubmissionStatus() {
|
|
const sessionId = getSessionId();
|
|
|
|
if (confirm('确定要重置提交状态吗？\n\n重置后您将可以重新填写新的合格证信息，同时之前导出的二维码仍然可以查看对应的数据。')) {
|
|
// 清除会话存储的提交标记
|
|
sessionStorage.removeItem('certificateSubmitted_' + sessionId);
|
|
|
|
// 刷新页面，显示空状态
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
// 生成二维码并显示
|
|
function generateQRCode(url) {
|
|
// 创建二维码容器
|
|
const qrContainer = document.createElement('div');
|
|
qrContainer.id = 'qrCodeContainer';
|
|
qrContainer.style.cssText = `
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
padding: 20px;
|
|
`;
|
|
|
|
// 创建二维码标题
|
|
const qrTitle = document.createElement('h3');
|
|
qrTitle.style.cssText = `
|
|
color: #28a745;
|
|
margin-bottom: 15px;
|
|
font-size: 20px;
|
|
`;
|
|
qrTitle.innerHTML = '📋 导出信息二维码';
|
|
|
|
// 创建二维码图片
|
|
const qrImage = document.createElement('img');
|
|
qrImage.id = 'qrCodeImage';
|
|
qrImage.style.cssText = `
|
|
max-width: 300px;
|
|
max-height: 300px;
|
|
margin-bottom: 20px;
|
|
background-color: white;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
`;
|
|
|
|
// 创建提示文字
|
|
const qrText = document.createElement('div');
|
|
qrText.style.cssText = `
|
|
color: white;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
max-width: 90%;
|
|
background-color: rgba(40, 167, 69, 0.1);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
`;
|
|
qrText.innerHTML = '<p style="font-weight: 500; margin-bottom: 10px;">作用：查看完整的合格证信息</p><p>扫描二维码查看完整信息<br>长按保存二维码</p>';
|
|
|
|
// 创建关闭按钮
|
|
const closeBtn = document.createElement('button');
|
|
closeBtn.textContent = '关闭';
|
|
closeBtn.style.cssText = `
|
|
padding: 10px 20px;
|
|
background-color: #28a745;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
`;
|
|
closeBtn.onclick = function() {
|
|
document.body.removeChild(qrContainer);
|
|
};
|
|
|
|
// 构建二维码数据URL
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 300;
|
|
canvas.height = 300;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// 清空画布
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// 生成二维码（简单实现，实际项目中可使用qrcode库）
|
|
// 这里使用一个占位符，后续将使用实际的二维码生成逻辑
|
|
ctx.fillStyle = '#000000';
|
|
ctx.font = '20px Arial';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('二维码生成中...', canvas.width/2, canvas.height/2);
|
|
|
|
// 使用Google Charts API生成二维码
|
|
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(url)}`;
|
|
qrImage.src = qrCodeUrl;
|
|
|
|
// 组装容器
|
|
qrContainer.appendChild(qrTitle);
|
|
qrContainer.appendChild(qrImage);
|
|
qrContainer.appendChild(qrText);
|
|
qrContainer.appendChild(closeBtn);
|
|
|
|
// 添加到页面
|
|
document.body.appendChild(qrContainer);
|
|
}
|
|
|
|
// 表单提交处理
|
|
document.getElementById('certificateForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 保存签名
|
|
saveSignature();
|
|
|
|
// 验证必填字段
|
|
const subjectName = document.getElementById('subjectName').value.trim();
|
|
const productName = document.getElementById('productName').value.trim();
|
|
const weight = document.getElementById('weight').value.trim();
|
|
const basis = document.getElementById('basis').value.trim();
|
|
const origin = document.getElementById('origin').value.trim();
|
|
const contact = document.getElementById('contact').value.trim();
|
|
const date = document.getElementById('date').value;
|
|
const signature = document.getElementById('signature').value;
|
|
|
|
// 检查所有必填字段
|
|
if (!subjectName) {
|
|
alert('请填写主体名称');
|
|
return;
|
|
}
|
|
if (!productName) {
|
|
alert('请填写产品名称');
|
|
return;
|
|
}
|
|
if (!weight) {
|
|
alert('请填写产品重量');
|
|
return;
|
|
}
|
|
if (!basis) {
|
|
alert('请填写承诺依据');
|
|
return;
|
|
}
|
|
if (!origin) {
|
|
alert('请填写产地');
|
|
return;
|
|
}
|
|
if (!contact) {
|
|
alert('请填写联系方式');
|
|
return;
|
|
}
|
|
if (!date) {
|
|
alert('请选择开具日期');
|
|
return;
|
|
}
|
|
// 签名改为选填项
|
|
// if (!signature) {
|
|
// alert('请进行手写签名');
|
|
// return;
|
|
// }
|
|
|
|
// 收集表单数据
|
|
const formData = new FormData(this);
|
|
const certificate = {};
|
|
|
|
for (const [key, value] of formData.entries()) {
|
|
certificate[key] = value;
|
|
}
|
|
|
|
// 构建URLSearchParams对象，确保数据以正确的格式发送
|
|
const urlEncodedData = new URLSearchParams();
|
|
for (const [key, value] of formData.entries()) {
|
|
urlEncodedData.append(key, value);
|
|
}
|
|
|
|
// 添加会话标识
|
|
const sessionId = getSessionId();
|
|
urlEncodedData.append('sessionId', sessionId);
|
|
|
|
// 从URL参数中获取邀请者信息
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const inviter = urlParams.get('inviter');
|
|
const inviterPhone = urlParams.get('inviterPhone');
|
|
const inviterProjectName = urlParams.get('inviterProjectName');
|
|
|
|
// 添加邀请者信息
|
|
if (inviter) {
|
|
urlEncodedData.append('inviter', inviter);
|
|
}
|
|
if (inviterPhone) {
|
|
urlEncodedData.append('inviterPhone', inviterPhone);
|
|
}
|
|
if (inviterProjectName) {
|
|
urlEncodedData.append('inviterProjectName', inviterProjectName);
|
|
}
|
|
|
|
// 发送数据到服务器
|
|
fetch('/submit', {
|
|
method: 'POST',
|
|
body: urlEncodedData,
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const sessionId = getSessionId();
|
|
|
|
// 检查是否包含签名
|
|
if (data.certificate.signature) {
|
|
// 有签名，标记为已完成并切换到只读模式
|
|
sessionStorage.setItem('certificateSubmitted_' + sessionId, 'true');
|
|
displayCertificate(data.certificate);
|
|
alert('提交成功！合格证信息已保存到数据库。');
|
|
|
|
// 提交成功后自动生成二维码
|
|
setTimeout(() => {
|
|
exportCertificate();
|
|
}, 1000);
|
|
} else {
|
|
// 无签名，标记为部分完成，保持可编辑状态
|
|
sessionStorage.setItem('certificatePartiallyCompleted_' + sessionId, 'true');
|
|
alert('基本信息提交成功！请继续完成手写签名。');
|
|
}
|
|
} else {
|
|
alert('保存失败: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('保存失败:', error);
|
|
alert('保存失败，请重试');
|
|
});
|
|
});
|
|
|
|
// 设置日期输入框的默认值和最大值
|
|
function setupDateInput() {
|
|
const dateInput = document.getElementById('date');
|
|
if (dateInput) {
|
|
// 获取当前日期，格式为YYYY-MM-DD
|
|
const today = new Date().toISOString().split('T')[0];
|
|
// 设置默认值为今天
|
|
dateInput.value = today;
|
|
// 设置最大值为今天，只能选择今天或之前的日期
|
|
dateInput.max = today;
|
|
}
|
|
}
|
|
|
|
// 页面加载时加载保存的信息
|
|
window.onload = function() {
|
|
loadCertificate();
|
|
setupDateInput();
|
|
initSignatureCanvas();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|