BBIT-Kai
203 lines
7.4 KiB
Plaintext
203 lines
7.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>${page.batchName} - 溯源信息</title>
|
|
<link rel="stylesheet" href="/static/traceability.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<#if page.coverImage?has_content>
|
|
<section class="cover-panel">
|
|
<div class="cover-card">
|
|
<img src="${page.coverImage}" alt="${page.batchName}" />
|
|
</div>
|
|
</section>
|
|
</#if>
|
|
|
|
<section class="hero">
|
|
<div class="hero__content">
|
|
<h1>${page.batchName}</h1>
|
|
<p>${page.summary}</p>
|
|
<div class="hero__stats">
|
|
<div class="stat-card">
|
|
<span>批次编码</span>
|
|
<strong>${page.code}</strong>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span>产品名称</span>
|
|
<strong>${page.productName}</strong>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span>累计访问</span>
|
|
<strong>${page.scanCount}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero__aside">
|
|
<div class="summary-card">
|
|
<span>发布时间</span>
|
|
<strong>${page.publishedAt}</strong>
|
|
</div>
|
|
<#if page.tagsText != "暂无标签">
|
|
<div class="summary-card">
|
|
<span>标签</span>
|
|
<strong>${page.tagsText}</strong>
|
|
</div>
|
|
</#if>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel tabs-panel">
|
|
<div class="tabs-nav" role="tablist" aria-label="溯源页面内容切换">
|
|
<button class="tab-btn active" data-tab-target="timeline-panel" type="button">溯源链</button>
|
|
<button class="tab-btn" data-tab-target="public-panel" type="button">公开资料</button>
|
|
<button class="tab-btn" data-tab-target="feedback-panel" type="button">反馈投诉</button>
|
|
</div>
|
|
|
|
<div id="timeline-panel" class="tab-panel active">
|
|
<#if page.businessSections?size gt 0>
|
|
<div class="timeline">
|
|
<#list page.businessSections as section>
|
|
<article class="timeline-item">
|
|
<div class="timeline-item__rail">
|
|
<span class="dot"></span>
|
|
<span class="line"></span>
|
|
</div>
|
|
<div class="timeline-item__body">
|
|
<div class="timeline-item__head">
|
|
<div>
|
|
<h3>${section.name}</h3>
|
|
<p>${section.description}</p>
|
|
</div>
|
|
</div>
|
|
<div class="kv-grid">
|
|
<#list section.entries as entry>
|
|
<div class="kv-card">
|
|
<span>${entry.label}</span>
|
|
<#if entry.type == "image" && entry.value?has_content && entry.value != "未填写">
|
|
<img class="kv-image" src="${entry.value}" alt="${entry.label}" />
|
|
<#else>
|
|
<strong<#if entry.bold || entry.color?has_content> style="<#if entry.bold>font-weight:700;</#if><#if entry.color?has_content>color:${entry.color};</#if>"</#if>>${entry.value}</strong>
|
|
</#if>
|
|
</div>
|
|
</#list>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</#list>
|
|
</div>
|
|
<#else>
|
|
<div class="empty-state">当前批次还没有可展示的业务流程节点。</div>
|
|
</#if>
|
|
</div>
|
|
|
|
<div id="public-panel" class="tab-panel">
|
|
<#if page.publicSections?size gt 0>
|
|
<div class="public-grid">
|
|
<#list page.publicSections as section>
|
|
<article class="info-card">
|
|
<div class="info-card__head">
|
|
<h3>${section.name}</h3>
|
|
</div>
|
|
<p class="info-card__desc">${section.description}</p>
|
|
<div class="kv-grid">
|
|
<#list section.entries as entry>
|
|
<div class="kv-card">
|
|
<span>${entry.label}</span>
|
|
<#if entry.type == "image" && entry.value?has_content && entry.value != "未填写">
|
|
<img class="kv-image" src="${entry.value}" alt="${entry.label}" />
|
|
<#else>
|
|
<strong<#if entry.bold || entry.color?has_content> style="<#if entry.bold>font-weight:700;</#if><#if entry.color?has_content>color:${entry.color};</#if>"</#if>>${entry.value}</strong>
|
|
</#if>
|
|
</div>
|
|
</#list>
|
|
</div>
|
|
</article>
|
|
</#list>
|
|
</div>
|
|
<#else>
|
|
<div class="empty-state">当前批次还没有可展示的公开资料。</div>
|
|
</#if>
|
|
</div>
|
|
|
|
<div id="feedback-panel" class="tab-panel">
|
|
<div class="panel__head">
|
|
<div>
|
|
<h2>反馈投诉</h2>
|
|
<p>如发现信息异常、商品质量问题，或有建议，可直接提交。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<#if feedbackMessage?has_content>
|
|
<div class="notice">${feedbackMessage}</div>
|
|
</#if>
|
|
|
|
<form class="feedback-form" method="post" action="/feedback">
|
|
<input type="hidden" name="batchCode" value="${page.code}" />
|
|
<div class="form-grid">
|
|
<label class="form-item">
|
|
<span>反馈类型</span>
|
|
<select name="type">
|
|
<option value="complaint">投诉</option>
|
|
<option value="suggestion">建议</option>
|
|
<option value="consult">咨询</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="form-item">
|
|
<span>满意度</span>
|
|
<select name="rating">
|
|
<option value="5">5 分</option>
|
|
<option value="4">4 分</option>
|
|
<option value="3">3 分</option>
|
|
<option value="2">2 分</option>
|
|
<option value="1">1 分</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="form-item">
|
|
<span>联系方式</span>
|
|
<input name="contact" placeholder="手机号 / 邮箱 / 微信" />
|
|
</label>
|
|
</div>
|
|
|
|
<label class="form-item form-item--full">
|
|
<span>反馈内容</span>
|
|
<textarea name="content" placeholder="请填写你要反馈的问题或建议" required></textarea>
|
|
</label>
|
|
|
|
<button type="submit" class="submit-btn">提交反馈</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="page-footer">
|
|
技术支持：四川主干信息技术有限公司 BBITCN Co.,Ltd
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
const tabPanels = document.querySelectorAll('.tab-panel');
|
|
|
|
tabButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const targetId = button.dataset.tabTarget;
|
|
tabButtons.forEach((item) => item.classList.remove('active'));
|
|
tabPanels.forEach((panel) => panel.classList.remove('active'));
|
|
button.classList.add('active');
|
|
document.getElementById(targetId)?.classList.add('active');
|
|
});
|
|
});
|
|
|
|
if (window.location.search.includes('result=')) {
|
|
const nextUrl = window.location.pathname + window.location.hash;
|
|
window.history.replaceState({}, '', nextUrl);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|