实现导出信息功能：添加二维码生成，创建view.html页面用于扫描查看完整信息

1 month ago · 2cef83855c
2 changed files with 444 additions and 1 deletions
--- a/certificate.html
+++ b/certificate.html
@ -429,7 +429,8 @@
        </div>
      </div>
      
-      <button class="verify-btn" onclick="openModal()">经销商查验</button>
+      <button class="verify-btn" id="verifyBtn" onclick="checkSubmissionStatus()">经销商查验</button>
+      <button class="verify-btn" id="exportBtn" onclick="exportCertificate()" style="margin-top: 10px;">导出信息</button>
    </div>
    
    <div class="hint">
@ -727,6 +728,136 @@
      clearSignature();
    }
    
+    // 检查提交状态
+    function checkSubmissionStatus() {
+      const sessionId = getSessionId();
+      const hasSubmitted = localStorage.getItem('certificateSubmitted_' + sessionId);
+      
+      if (hasSubmitted) {
+        // 已提交过，显示提示
+        if (confirm('您已填写过信息，需要导出当前信息吗？')) {
+          // 触发导出信息按钮的点击事件
+          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 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 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%;
+      `;
+      qrText.innerHTML = '扫描二维码查看完整信息<br>长按保存二维码';
+      
+      // 创建关闭按钮
+      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(qrImage);
+      qrContainer.appendChild(qrText);
+      qrContainer.appendChild(closeBtn);
+      
+      // 添加到页面
+      document.body.appendChild(qrContainer);
+    }
+    
    // 表单提交处理
    document.getElementById('certificateForm').addEventListener('submit', function(e) {
      e.preventDefault();
@ -763,6 +894,10 @@
      .then(response => response.json())
      .then(data => {
        if (data.success) {
+          // 标记为已提交
+          const sessionId = getSessionId();
+          localStorage.setItem('certificateSubmitted_' + sessionId, 'true');
+          
          // 显示结果
          displayCertificate(data.certificate);
          
--- a/view.html
+++ b/view.html
@ -0,0 +1,308 @@
+<!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;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: hidden;
+      position: relative;
+      touch-action: manipulation;
+    }
+
+    html, body {
+      height: 100%;
+      overflow: hidden;
+      overscroll-behavior: none;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .signature-display img {
+      max-width: 200px;
+      max-height: 100px;
+    }
+
+    .footer {
+      text-align: center;
+      padding: 16px;
+      font-size: 14px;
+      color: #999;
+      border-top: 1px solid #f0f0f0;
+      margin-top: 20px;
+    }
+
+    @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" onclick="window.history.back()">&lt;</button>
+      <h1>合格证信息查看</h1>
+      <div style="width: 24px;"></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>
+    </div>
+    
+    <div class="footer">
+      技术支持：四川又鸟蛋贸易有限公司
+    </div>
+  </div>
+  
+  <script>
+    // 从URL参数中获取sessionId
+    function getSessionIdFromUrl() {
+      const urlParams = new URLSearchParams(window.location.search);
+      return urlParams.get('sessionId');
+    }
+    
+    // 加载合格证信息
+    function loadCertificate() {
+      const sessionId = getSessionIdFromUrl();
+      
+      if (!sessionId) {
+        displayError('无效的访问链接');
+        return;
+      }
+      
+      // 从服务器获取对应会话的合格证信息
+      fetch(`/getLatestCertificate?sessionId=${encodeURIComponent(sessionId)}`)
+        .then(response => response.json())
+        .then(data => {
+          if (data.success && data.certificate) {
+            displayCertificate(data.certificate);
+          } else {
+            displayError('未找到对应信息');
+          }
+        })
+        .catch(error => {
+          console.error('获取合格证信息失败:', error);
+          displayError('加载失败，请重试');
+        });
+    }
+    
+    // 显示合格证信息
+    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">${formatDate(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="签名">
+            </div>
+          </div>
+        `;
+      }
+      
+      container.innerHTML = html;
+    }
+    
+    // 显示错误信息
+    function displayError(message) {
+      const container = document.getElementById('certificateInfo');
+      container.innerHTML = `
+        <div class="empty-state">
+          <p>${message}</p>
+        </div>
+      `;
+    }
+    
+    // 格式化日期
+    function formatDate(dateValue) {
+      if (!dateValue) return '';
+      if (typeof dateValue === 'string' && dateValue.includes('T')) {
+        return dateValue.split('T')[0];
+      }
+      return dateValue;
+    }
+    
+    // 页面加载时加载信息
+    window.onload = function() {
+      loadCertificate();
+    };
+  </script>
+</body>
+</html>