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.
713 lines
18 KiB
713 lines
18 KiB
1 month ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 480px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background-color: white;
|
||
|
|
min-height: 100vh;
|
||
|
|
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: 16px;
|
||
|
|
padding: 16px;
|
||
|
|
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: 16px;
|
||
|
|
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: 20px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.promise-item {
|
||
|
|
margin-top: 8px;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item {
|
||
|
|
padding: 10px 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: 1px solid #ced4da;
|
||
|
|
border-radius: 4px;
|
||
|
|
background-color: #f8f9fa;
|
||
|
|
cursor: crosshair;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature-actions {
|
||
|
|
margin-top: 8px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature-actions button {
|
||
|
|
padding: 6px 12px;
|
||
|
|
background-color: #6c757d;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature-actions button:hover {
|
||
|
|
background-color: #5a6268;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 签名显示样式 */
|
||
|
|
.signature-display img {
|
||
|
|
max-width: 200px;
|
||
|
|
max-height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 响应式设计 */
|
||
|
|
@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">
|
||
|
|
<button class="back-btn"><</button>
|
||
|
|
<h1>合格证信息</h1>
|
||
|
|
<div class="header-actions">
|
||
|
|
<button class="more-btn">•••</button>
|
||
|
|
<button class="scan-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">
|
||
|
|
<div class="empty-state">
|
||
|
|
<p>请点击下方按钮填写合格证信息</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="verify-btn" onclick="openModal()">经销商查验</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="hint">
|
||
|
|
提示：如果您用于经销该产品，请您及时点击查验收货，保存食用农产品合格证电子档案，若您购买用于食用，无需点击查验收货。
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="support">
|
||
|
|
技术支持：厦门海荭兴仪器股份有限公司 0592-5768388
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 填写信息弹窗 -->
|
||
|
|
<div id="modal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2>填写合格证信息</h2>
|
||
|
|
<button class="close-btn" onclick="closeModal()">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form id="certificateForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="subjectName">主体名称：</label>
|
||
|
|
<input type="text" id="subjectName" name="subjectName">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="productName">产品名称：</label>
|
||
|
|
<input type="text" id="productName" name="productName" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="weight">产品重量：</label>
|
||
|
|
<input type="text" id="weight" name="weight" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="basis">承诺依据：</label>
|
||
|
|
<input type="text" id="basis" name="basis">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="origin">产地：</label>
|
||
|
|
<input type="text" id="origin" name="origin">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="contact">联系方式：</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">开具日期：</label>
|
||
|
|
<input type="date" id="date" name="date">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>手写签名：</label>
|
||
|
|
<div class="signature-container">
|
||
|
|
<canvas id="signatureCanvas" width="300" height="150"></canvas>
|
||
|
|
<div class="signature-actions">
|
||
|
|
<button type="button" onclick="clearSignature()">清除</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" id="signature" name="signature">
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 签名画布相关变量
|
||
|
|
let canvas, ctx, isDrawing = false;
|
||
|
|
|
||
|
|
// 从服务器加载最新的合格证信息
|
||
|
|
function loadCertificate() {
|
||
|
|
// 这里可以添加从服务器获取最新合格证信息的代码
|
||
|
|
// 暂时保留本地存储的支持，以便在服务器不可用时仍能显示数据
|
||
|
|
const saved = localStorage.getItem('certificate');
|
||
|
|
if (saved) {
|
||
|
|
const certificate = JSON.parse(saved);
|
||
|
|
displayCertificate(certificate);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示合格证信息
|
||
|
|
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">${certificate.contact || ''}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">开具日期：</span>
|
||
|
|
<span class="value">${certificate.date || ''}</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
if (certificate.signature) {
|
||
|
|
html += `
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">签名：</span>
|
||
|
|
<div class="signature-display">
|
||
|
|
<img src="${certificate.signature}" alt="签名" style="max-width: 200px; max-height: 100px;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
container.innerHTML = html;
|
||
|
|
}
|
||
|
|
|
||
|
|
function openModal() {
|
||
|
|
document.getElementById('modal').classList.add('show');
|
||
|
|
// 初始化签名画布
|
||
|
|
initSignatureCanvas();
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
document.getElementById('modal').classList.remove('show');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 点击弹窗外部关闭
|
||
|
|
window.onclick = function(event) {
|
||
|
|
const modal = document.getElementById('modal');
|
||
|
|
if (event.target == modal) {
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 初始化签名画布
|
||
|
|
function initSignatureCanvas() {
|
||
|
|
canvas = document.getElementById('signatureCanvas');
|
||
|
|
if (!canvas) return;
|
||
|
|
|
||
|
|
ctx = canvas.getContext('2d');
|
||
|
|
ctx.strokeStyle = '#000';
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.lineCap = 'round';
|
||
|
|
ctx.lineJoin = 'round';
|
||
|
|
|
||
|
|
// 清除画布
|
||
|
|
clearSignature();
|
||
|
|
|
||
|
|
// 添加鼠标事件
|
||
|
|
canvas.addEventListener('mousedown', startDrawing);
|
||
|
|
canvas.addEventListener('mousemove', draw);
|
||
|
|
canvas.addEventListener('mouseup', stopDrawing);
|
||
|
|
canvas.addEventListener('mouseout', stopDrawing);
|
||
|
|
|
||
|
|
// 添加触摸事件（支持移动设备）
|
||
|
|
canvas.addEventListener('touchstart', startDrawingTouch);
|
||
|
|
canvas.addEventListener('touchmove', drawTouch);
|
||
|
|
canvas.addEventListener('touchend', stopDrawing);
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
// 将画布转换为base64编码
|
||
|
|
const signatureData = canvas.toDataURL('image/png');
|
||
|
|
// 存储到隐藏输入字段
|
||
|
|
document.getElementById('signature').value = signatureData;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 清除表单
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 表单提交处理
|
||
|
|
document.getElementById('certificateForm').addEventListener('submit', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
// 保存签名
|
||
|
|
saveSignature();
|
||
|
|
|
||
|
|
// 收集表单数据
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 发送数据到服务器
|
||
|
|
fetch('/submit', {
|
||
|
|
method: 'POST',
|
||
|
|
body: urlEncodedData,
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
// 显示结果
|
||
|
|
displayCertificate(data.certificate);
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
closeModal();
|
||
|
|
|
||
|
|
// 显示成功提示
|
||
|
|
alert('提交成功！合格证信息已保存到数据库。');
|
||
|
|
} else {
|
||
|
|
alert('保存失败: ' + data.error);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('保存失败:', error);
|
||
|
|
alert('保存失败，请重试');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 页面加载时加载保存的信息
|
||
|
|
window.onload = function() {
|
||
|
|
loadCertificate();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|