mom-pro2-after.git

<!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">
<meta name="format-detection" content="telephone=no">
<title>产品溯源</title>
<style>
  :root {
    --primary: #2e7d32;
    --primary-light: #43a047;
    --primary-bg: #e8f5e9;
    --text: #1f2933;
    --text-sub: #6b7280;
    --border: #e5e7eb;
    --bg: #f5f7f4;
    --card-shadow: 0 1px 4px rgba(0,0,0,.06);
    --green: #2e7d32;
    --red: #d32f2f;
    --blue: #1565c0;
    --gray: #6b7280;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 480px; margin: 0 auto; padding: 0 12px 32px; }
 
  /* 顶部品牌区 */
  .brand {
    max-width: 480px; margin: 0 auto;
    padding: 20px 16px 14px;
    text-align: center;
  }
  .brand .logo {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 20px; font-weight: 700; color: var(--primary);
  }
  .brand .logo .mark {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    position: relative;
  }
  .brand .logo .mark::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .brand .sub { margin-top: 4px; font-size: 12px; color: var(--text-sub); }
 
  /* 查询栏 */
  .query-bar { display: flex; gap: 8px; margin-bottom: 14px; }
  .query-bar input {
    flex: 1; height: 42px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; background: #fff; outline: none;
  }
  .query-bar input:focus { border-color: var(--primary); }
  .query-bar button {
    height: 42px; padding: 0 18px;
    border: none; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 14px;
    cursor: pointer;
  }
  .query-bar button:active { background: var(--primary-light); }
 
  /* 状态 */
  .state { padding-top: 8px; }
  .loading { text-align: center; padding: 48px 0; color: var(--text-sub); }
  .spinner {
    width: 32px; height: 32px; margin: 0 auto 12px;
    border: 3px solid var(--primary-bg); border-top-color: var(--primary);
    border-radius: 50%; animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
 
  .empty-tip {
    padding: 12px 16px; border-radius: 10px; background: #fff;
    box-shadow: var(--card-shadow); font-size: 14px; color: var(--text-sub);
    text-align: center;
  }
  .empty-tip.error { color: var(--red); background: #fdecec; }
  .empty-tip.primary { color: var(--primary); background: var(--primary-bg); }
 
  /* 卡片 */
  .card {
    background: #fff; border-radius: 12px; box-shadow: var(--card-shadow);
    margin-bottom: 12px; overflow: hidden;
  }
  .card .card-hd {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 600;
  }
  .card .card-hd .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
  .card .card-hd .count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-sub); }
  .card .card-bd { padding: 12px 16px; }
 
  /* 信息行 */
  .kv { display: flex; padding: 6px 0; font-size: 14px; }
  .kv .k { flex: 0 0 88px; color: var(--text-sub); }
  .kv .v { flex: 1; word-break: break-all; }
  .kv .v.dim { color: var(--text-sub); }
 
  /* 徽章 */
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; line-height: 18px;
  }
  .badge.green { color: var(--green); background: #e8f5e9; }
  .badge.red { color: var(--red); background: #fdecec; }
  .badge.blue { color: var(--blue); background: #e3f2fd; }
  .badge.gray { color: var(--gray); background: #f1f2f4; }
 
  .badge-big { display: inline-block; padding: 4px 12px; border-radius: 16px; font-size: 14px; }
  .badge-big.green { color: #fff; background: var(--green); }
  .badge-big.red { color: #fff; background: var(--red); }
  .badge-big.gray { color: #fff; background: var(--gray); }
 
  /* 列表 */
  .mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .mini-table th, .mini-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
  .mini-table th { color: var(--text-sub); font-weight: 400; background: #fafbf9; white-space: nowrap; }
  .mini-table tr:last-child td { border-bottom: none; }
  .mini-table td { word-break: break-all; }
 
  .pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 16px; font-size: 13px;
    background: #f3f4f6;
  }
  .pill .dot { width: 6px; height: 6px; border-radius: 50%; }
 
  .scroll-list { max-height: 300px; overflow-y: auto; }
  .scroll-list::-webkit-scrollbar { width: 4px; }
  .scroll-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
 
  /* 正品验证卡（顶部，扫码优先展示） */
  .verify-card {
    border: 1px solid var(--primary-light);
    background: linear-gradient(180deg, #eef8ee, #fff);
  }
  .verify-card .card-bd { padding: 14px 16px; }
  .verify-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; color: var(--primary);
    margin-bottom: 4px;
  }
  .verify-title::before { content: ""; width: 5px; height: 16px; border-radius: 2px; background: var(--primary); }
  .verify-sub { font-size: 12px; color: var(--text-sub); margin-bottom: 10px; }
  .verify-badge { margin-bottom: 10px; }
  .verify-stats { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 4px; }
 
  /* 可折叠卡片 */
  .card.collapsible .card-hd { cursor: pointer; position: relative; padding-right: 30px; }
  .card.collapsible .card-hd::after {
    content: "▾"; position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); color: var(--text-sub); font-size: 12px;
    transition: transform .2s;
  }
  .card.collapsible:not(.open) .card-hd::after { transform: translateY(-50%) rotate(-90deg); }
  .card.collapsible .card-hd .count { margin-right: 16px; }
  .card.collapsible .card-bd { display: none; }
  .card.collapsible.open .card-bd { display: block; }
 
  footer {
    max-width: 480px; margin: 0 auto;
    padding: 20px 16px 28px; text-align: center;
    font-size: 12px; color: #9ca3af;
  }
</style>
</head>
<body>
 
<div class="brand">
  <div class="logo"><span class="mark"></span>种子产品溯源</div>
  <div class="sub">来源可查 · 去向可追 · 责任可究</div>
</div>
 
<div class="wrap">
  <!-- 手动查询栏：无 code 参数时提示输入；有参数时自动查询 -->
  <div class="query-bar">
    <input id="codeInput" type="text" placeholder="请输入追溯码（袋码 / 托盘码 / 批次码）" autocomplete="off">
    <button id="searchBtn" type="button">查询</button>
  </div>
 
  <section id="state" class="state"></section>
</div>
 
<footer>本系统数据仅用于产品溯源，请通过正规渠道购买。</footer>
 
<script>
(function () {
  'use strict';
 
  var STATE = document.getElementById('state');
  var CODE_INPUT = document.getElementById('codeInput');
  var SEARCH_BTN = document.getElementById('searchBtn');
 
  var BATCH_STATUS = { 10: ['草稿', 'gray'], 20: ['生产中', 'blue'], 30: ['已完成', 'green'], 40: ['已作废', 'red'] };
  var BAG_STATUS = { 10: ['已生成', 'gray'], 20: ['已导出印刷', 'blue'], 30: ['已作废', 'red'] };
  var QUALITY_RESULT = { 0: ['处理中', 'gray'], 1: ['合格', 'green'], 2: ['不合格', 'red'] };
  var WORKER_TYPE = { 10: '组长', 20: '操作工', 30: '包装工', 40: '质检员', 50: '其他' };
 
  // ========== 工具函数 ==========
  function esc(v) {
    if (v === null || v === undefined) return '';
    return String(v).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }
 
  function text(v) {
    return (v === null || v === undefined || v === '') ? '-' : esc(v);
  }
 
  function fmtDate(s) {
    if (!s) return '-';
    return esc(String(s).replace('T', ' ').replace(/\.\d+$/, '').slice(0, 16));
  }
 
  function fmtNum(v) {
    return (v === null || v === undefined) ? '-' : esc(v);
  }
 
  function statusBadge(map, key) {
    var item = map[key];
    if (!item) return '<span class="badge gray">' + (key === null || key === undefined ? '' : esc(key)) + '</span>';
    return '<span class="badge ' + item[1] + '">' + esc(item[0]) + '</span>';
  }
 
  function card(title, countHtml, bodyHtml, opts) {
    opts = opts || {};
    var collapsible = !!opts.collapsible;
    var open = collapsible && !!opts.open;
    var hd = '<div class="card-hd"' +
      (collapsible ? ' onclick="this.parentNode.classList.toggle(\'open\')"' : '') +
      '><span class="bar"></span>' + esc(title) +
      (countHtml ? '<span class="count">' + countHtml + '</span>' : '') +
      '</div>';
    return '<div class="card' + (collapsible ? ' collapsible' : '') + (open ? ' open' : '') + '">' +
      hd + '<div class="card-bd">' + bodyHtml + '</div>' + '</div>';
  }
 
  function kv(k, v, dim) {
    return '<div class="kv"><span class="k">' + esc(k) + '</span><span class="v' + (dim ? ' dim' : '') + '">' + v + '</span></div>';
  }
 
  function isEmptyList(list) {
    return !list || list.length === 0;
  }
 
  // ========== 查询 ==========
  function query(code) {
    var value = (code || '').trim();
    if (!value) {
      renderState('<div class="empty-tip primary">请输入追溯码后再查询</div>');
      return;
    }
    renderState('<div class="loading"><div class="spinner"></div>正在查询追溯信息...</div>');
    fetch('/public/mes/trace/query?code=' + encodeURIComponent(value))
      .then(function (resp) { return resp.json(); })
      .then(function (res) {
        if (res.code === 0) {
          renderResult(res.data);
        } else {
          var msg = res.msg || '查询失败，请稍后重试';
          renderState('<div class="empty-tip error">' + esc(msg) + '</div>');
        }
      })
      .catch(function () {
        renderState('<div class="empty-tip error">网络异常，请检查网络后重试</div>');
      });
  }
 
  function renderState(html) {
    STATE.innerHTML = html;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
 
  // ========== 结果渲染（信息区块模块化，后续新数据源在此追加区块） ==========
  function renderResult(d) {
    if (!d) {
      renderState('<div class="empty-tip error">未查询到该追溯码，请核对二维码或联系官方</div>');
      return;
    }
    var html = '';
    html += buildVerifyCard(d);
    html += buildItemCard(d);
    html += buildBatchCard(d);
    html += buildQualityCard(d);
    html += buildWorkerCard(d);
    html += buildInboundCard(d);
    html += buildPalletCard(d);
    html += buildBagCard(d);
    html += buildOptionalCard(d);
    STATE.innerHTML = html || '<div class="empty-tip">暂无追溯数据</div>';
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
 
  // 区块0：正品验证（顶部，扫码优先展示验证结论与查询统计）
  function stripUrl(v) {
    if (!v) return v;
    if (/^https?:\/\//i.test(v)) {
      var m = v.match(/[?&]code=([^&]*)/);
      return m ? decodeURIComponent(m[1]) : '';
    }
    return v;
  }
 
  function buildVerifyCard(d) {
    var typeLabel = { BAG: '袋码', PALLET: '托盘码', BATCH: '批次码' }[d.sourceType] || '追溯码';
    var code = stripUrl(d.requestCode) || d.batchCode || d.tempCode || '-';
    var bagNo = '-';
    if (d.sourceType === 'BAG' && d.bags) {
      for (var i = 0; i < d.bags.length; i++) {
        if (d.bags[i].code === code) {
          bagNo = d.bags[i].bagNo;
          break;
        }
      }
    }
    var statsHtml = '<div class="verify-stats">';
    if (d.antiFake && d.antiFake.scanCount > 0) {
      statsHtml += kv('累计查询', esc(d.antiFake.scanCount) + ' 次') +
        kv('首次查询', fmtDate(d.antiFake.firstScanTime)) +
        kv('最近查询', fmtDate(d.antiFake.lastScanTime));
    } else {
      statsHtml += kv('累计查询', '暂无查询记录');
    }
    statsHtml += '</div>';
    return '<div class="card verify-card">' +
      '<div class="card-bd">' +
      '<div class="verify-title">正品验证</div>' +
      '<div class="verify-badge"><span class="badge-big green">✅ 正品验证通过</span></div>' +
      '<div class="verify-sub">该追溯码为正规渠道产品，溯源信息真实有效</div>' +
      kv('追溯类型', typeLabel) +
      kv(typeLabel, text(code)) +
      (d.sourceType === 'BAG' ? kv('袋号', bagNo) : '') +
      kv('批次号', text(d.batchCode)) +
      kv('品种', text(d.itemName)) +
      statsHtml +
      '</div></div>';
  }
 
  // 区块1：品种信息
  function buildItemCard(d) {
    if (!d.itemCode && !d.itemName && !d.itemSpecification) return '';
    return card('品种信息', null,
      kv('品种名称', text(d.itemName)) +
      kv('规格', text(d.itemSpecification)) +
      kv('品种编码', text(d.itemCode)),
      { collapsible: true, open: true }
    );
  }
 
  // 区块2：生产批次
  function buildBatchCard(d) {
    if (!d.batchCode && !d.tempCode) return '';
    var status = statusBadge(BATCH_STATUS, d.batchStatus);
    return card('生产批次', status,
      kv('批次号', text(d.batchCode)) +
      kv('状态', status) +
      kv('生产日期', fmtDate(d.produceDate)) +
      kv('产线', text(d.lineName ? (d.lineName + (d.lineCode ? ' / ' + d.lineCode : '')) : d.lineCode)) +
      kv('责任人', text(d.ownerUserName)) +
      kv('计划数量', fmtNum(d.planQuantity) === '-' ? '-' : fmtNum(d.planQuantity)) +
      kv('已生成袋码', fmtNum(d.bagQuantity)) +
      kv('已生成托盘', fmtNum(d.palletQuantity)) +
      kv('入库时间', fmtDate(d.inboundTime)) +
      (d.remark ? kv('备注', text(d.remark)) : ''),
      { collapsible: true, open: true }
    );
  }
 
  // 区块3：种子质检
  function buildQualityCard(d) {
    var q = d.quality;
    if (!q) return '';
    var result = QUALITY_RESULT[q.result];
    var badge = result
      ? '<span class="badge-big ' + result[1] + '">' + esc(result[0]) + '</span>'
      : '<span class="badge-big gray">未知</span>';
 
    var rows = '';
    if (q.indicators && q.indicators.length) {
      rows = '<table class="mini-table"><thead><tr><th>指标</th><th>检测值</th><th>标准范围</th><th>结果</th></tr></thead><tbody>';
      q.indicators.forEach(function (i) {
        var range = (i.minValue !== null && i.minValue !== undefined && i.maxValue !== null && i.maxValue !== undefined)
          ? esc(i.minValue) + ' ~ ' + esc(i.maxValue) : '-';
        var pass = (i.pass === true)
          ? '<span class="badge green">合格</span>'
          : (i.pass === false ? '<span class="badge red">不合格</span>' : '<span class="badge gray">--</span>');
        rows += '<tr><td>' + text(i.indicatorName) + '</td><td>' + text(i.value) + '</td><td>' + range + '</td><td>' + pass + '</td></tr>';
      });
      rows += '</tbody></table>';
    }
 
    return card('种子质检', badge,
      kv('检验结论', badge) +
      kv('检验员', text(q.inspectorName)) +
      kv('检验时间', fmtDate(q.inspectedAt)) +
      (q.reason ? kv('不合格原因', text(q.reason)) : '') +
      (rows ? '<div style="margin-top:8px">' + rows + '</div>' : ''),
      { collapsible: true, open: false }
    );
  }
 
  // 区块4：生产人员
  function buildWorkerCard(d) {
    if (isEmptyList(d.workers)) return '';
    var html = '<div class="pill-list">';
    d.workers.forEach(function (w) {
      var name = w.userName || '-';
      var type = w.workerTypeName || (WORKER_TYPE[w.workerType] || '');
      var color = { 10: 'var(--blue)', 20: 'var(--green)', 30: 'var(--primary-light)', 40: 'var(--red)', 50: 'var(--gray)' }[w.workerType] || 'var(--gray)';
      html += '<span class="pill"><span class="dot" style="background:' + color + '"></span>' +
        esc(type) + '：' + esc(name) + '</span>';
    });
    html += '</div>';
    return card('生产人员', null, html, { collapsible: true, open: false });
  }
 
  // 区块5：扫码入库事件
  function buildInboundCard(d) {
    var e = d.inbound;
    if (!e) return '';
    return card('扫码入库', null,
      kv('事件号', text(e.eventId)) +
      kv('入库数量', fmtNum(e.quantity)) +
      kv('设备编码', text(e.deviceCode)) +
      kv('产线', text(e.lineCode)) +
      kv('入库时间', fmtDate(e.eventTime)),
      { collapsible: true, open: false }
    );
  }
 
  // 区块6：托盘
  function buildPalletCard(d) {
    if (isEmptyList(d.pallets)) return '';
    var countHtml = '共 ' + esc(d.palletCount || d.pallets.length) + ' 个';
    var rows = '<table class="mini-table"><thead><tr><th>托盘码</th><th>序号</th><th>已装/可装</th></tr></thead><tbody>';
    d.pallets.forEach(function (p) {
      rows += '<tr><td>' + text(p.code) + '</td><td>' + fmtNum(p.palletNo) + '</td><td>' +
        fmtNum(p.bagCount) + ' / ' + fmtNum(p.capacity) + '</td></tr>';
    });
    rows += '</tbody></table>';
    return card('托盘信息', countHtml, rows, { collapsible: true, open: false });
  }
 
  // 区块7：袋码（一袋一码）
  function buildBagCard(d) {
    if (d.bagTotal === null || d.bagTotal === undefined || d.bagTotal === 0) return '';
    var countHtml = '共 ' + esc(d.bagTotal) + ' 个' + (d.bags && d.bags.length < d.bagTotal ? '（展示前 ' + esc(d.bags.length) + ' 个）' : '');
    var rows = '<table class="mini-table"><thead><tr><th>袋码</th><th>袋号</th><th>托盘</th><th>状态</th></tr></thead><tbody>';
    (d.bags || []).forEach(function (b) {
      rows += '<tr><td>' + text(b.code) + '</td><td>' + fmtNum(b.bagNo) + '</td><td>' + text(b.palletCode) + '</td><td>' +
        statusBadge(BAG_STATUS, b.status) + '</td></tr>';
    });
    rows += '</tbody></table>';
    return card('袋码信息', countHtml,
      '<div class="scroll-list">' + rows + '</div>',
      { collapsible: true, open: false }
    );
  }
 
  // 区块8：可选扩展（采购来源 / 销售去向 / 加工流转），有数据才展示
  function buildOptionalCard(d) {
    var html = '';
    if (!isEmptyList(d.purchaseSources)) {
      var rows = '<table class="mini-table"><thead><tr><th>采购入库单</th><th>供应商</th><th>数量</th><th>日期</th></tr></thead><tbody>';
      d.purchaseSources.forEach(function (s) {
        rows += '<tr><td>' + text(s.receiptCode) + '</td><td>' + text(s.vendorName) + '</td><td>' + fmtNum(s.receivedQuantity) + '</td><td>' + fmtDate(s.receiptDate) + '</td></tr>';
      });
      rows += '</tbody></table>';
      html += card('采购来源', null, rows, { collapsible: true, open: false });
    }
    if (!isEmptyList(d.salesTargets)) {
      var rows2 = '<table class="mini-table"><thead><tr><th>销售出库单</th><th>客户</th><th>数量</th><th>日期</th></tr></thead><tbody>';
      d.salesTargets.forEach(function (s) {
        rows2 += '<tr><td>' + text(s.outCode || s.salesOrderCode || '') + '</td><td>' + text(s.customerName) + '</td><td>' + fmtNum(s.quantity) + '</td><td>' + fmtDate(s.outTime) + '</td></tr>';
      });
      rows2 += '</tbody></table>';
      html += card('销售去向', null, rows2, { collapsible: true, open: false });
    }
    if (!isEmptyList(d.processTraces)) {
      var rows3 = '<table class="mini-table"><thead><tr><th>节点</th><th>说明</th><th>时间</th></tr></thead><tbody>';
      d.processTraces.forEach(function (t) {
        rows3 += '<tr><td>' + text(t.nodeName) + '</td><td>' + text(t.description) + '</td><td>' + fmtDate(t.processTime) + '</td></tr>';
      });
      rows3 += '</tbody></table>';
      html += card('加工流转', null, rows3, { collapsible: true, open: false });
    }
    return html;
  }
 
  // ========== 初始化 ==========
  SEARCH_BTN.addEventListener('click', function () { query(CODE_INPUT.value); });
  CODE_INPUT.addEventListener('keydown', function (e) { if (e.key === 'Enter') query(CODE_INPUT.value); });
 
  var initialCode = new URLSearchParams(location.search).get('code') || '';
  CODE_INPUT.value = initialCode;
  if (initialCode) {
    query(initialCode);
  } else {
    renderState('<div class="empty-tip">扫码或输入追溯码，即可查询产品全程溯源信息</div>');
    CODE_INPUT.focus();
  }
})();
</script>
</body>
</html>