Bläddra i källkod

整合批次信息和溯源结论卡片

yawuga 1 månad sedan
förälder
incheckning
4e5c8110b8
2 ändrade filer med 307 tillägg och 226 borttagningar
  1. 139 106
      pages/trace/detail.vue
  2. 168 120
      佳友厚苑_溯源页第二阶段详细开发设计方案.md

+ 139 - 106
pages/trace/detail.vue

@@ -75,17 +75,51 @@
 		</view>
 		</view>
 
 
 		<scroll-view class="content" scroll-y>
 		<scroll-view class="content" scroll-y>
-			<!-- 溯源结论卡:先给结论,再给证据 -->
+			<!-- 溯源信息卡:融合溯源结论 + 批次核心信息 -->
 			<view v-if="traceDetail.batch?.exists && traceDetail.traceConclusionCard" class="card cardLevel1 cardConclusion">
 			<view v-if="traceDetail.batch?.exists && traceDetail.traceConclusionCard" class="card cardLevel1 cardConclusion">
 				<view class="sectionHeader">
 				<view class="sectionHeader">
 					<view class="sectionHeaderLeft">
 					<view class="sectionHeaderLeft">
 						<text class="sectionEn">Conclusion</text>
 						<text class="sectionEn">Conclusion</text>
-						<text class="sectionTitle">溯源结论</text>
+						<text class="sectionTitle">溯源信息</text>
 					</view>
 					</view>
 				</view>
 				</view>
-				<view class="conclusionBody">
-					<text class="conclusionLead">{{ traceDetail.traceConclusionCard.conclusion }}</text>
-					<text class="conclusionDesc">{{ traceDetail.traceConclusionCard.desc }}</text>
+
+				<!-- 溯源信息卡片主体:三层竖向结构 -->
+				<view class="conclusionIdentity">
+					<!-- 第一层:批次号主信息区 -->
+					<view class="conclusionBatchWrap">
+						<text class="conclusionBatchLabel">批次编号</text>
+						<text class="conclusionBatchNo">{{ traceDetail.batch.no }}</text>
+					</view>
+
+					<!-- 第二层:时间摘要区 -->
+					<view v-if="traceDetail.batch?.harvestTime || traceDetail.batch?.packTime" class="conclusionSummary">
+						<template v-if="traceDetail.batch?.harvestTime && traceDetail.batch?.packTime">
+							<text class="summaryLabel">生产/采收日期:</text>
+							<text class="summaryText">{{ traceDetail.batch.harvestTime }}</text>
+							<text class="summaryDivider">|</text>
+							<text class="summaryLabel">包装日期:</text>
+							<text class="summaryText">{{ traceDetail.batch.packTime }}</text>
+						</template>
+						<template v-else-if="traceDetail.batch?.harvestTime">
+							<text class="summaryLabel">生产/采收日期:</text>
+							<text class="summaryText">{{ traceDetail.batch.harvestTime }}</text>
+						</template>
+						<template v-else-if="traceDetail.batch?.packTime">
+							<text class="summaryLabel">包装日期:</text>
+							<text class="summaryText">{{ traceDetail.batch.packTime }}</text>
+						</template>
+					</view>
+
+					<!-- 第三层:结论标签区 -->
+					<view class="conclusionTags">
+						<view class="conclusionTag">
+							<text>全程可追溯</text>
+						</view>
+						<view class="conclusionTag">
+							<text>已通过安全检测</text>
+						</view>
+					</view>
 				</view>
 				</view>
 			</view>
 			</view>
 
 
@@ -424,31 +458,6 @@
 				</view>
 				</view>
 			</view>
 			</view>
 
 
-			<!-- 批次信息(可选:batch 可能不存在) -->
-			<view v-if="traceDetail.batch?.exists" class="card cardLevel1 cardBatch">
-				<view class="sectionHeader">
-					<view class="sectionHeaderLeft">
-						<text class="sectionEn">Batch</text>
-						<text class="sectionTitle">批次信息</text>
-					</view>
-				</view>
-
-				<!-- 批次信息主体:左右两列布局,左列标签固定宽度,右列内容左对齐 -->
-				<view class="batchBody">
-					<view v-if="traceDetail.batch?.no" class="batchRow">
-						<text class="batchRowLabel">批次号</text>
-						<text class="batchRowValue">{{ traceDetail.batch.no }}</text>
-					</view>
-					<view v-if="traceDetail.batch?.harvestTime" class="batchRow">
-						<text class="batchRowLabel">生产/采收时间</text>
-						<text class="batchRowValue">{{ traceDetail.batch.harvestTime }}</text>
-					</view>
-					<view v-if="traceDetail.batch?.packTime" class="batchRow">
-						<text class="batchRowLabel">包装时间</text>
-						<text class="batchRowValue">{{ traceDetail.batch.packTime }}</text>
-					</view>
-				</view>
-			</view>
 
 
 			<!-- 批次不存在/已下线的说明 -->
 			<!-- 批次不存在/已下线的说明 -->
 			<view v-else-if="traceDetail.batch?.statusBadge" class="card soft cardLevel1 cardBatchState">
 			<view v-else-if="traceDetail.batch?.statusBadge" class="card soft cardLevel1 cardBatchState">
@@ -705,6 +714,7 @@ const MOCK_TRACE_DETAILS = {
 			exists: false,
 			exists: false,
 			statusBadge: { text: '', type: '' },
 			statusBadge: { text: '', type: '' },
 			no: '',
 			no: '',
+			plantStartTime: '2026-03-01',
 			harvestTime: '',
 			harvestTime: '',
 			packTime: ''
 			packTime: ''
 		},
 		},
@@ -761,7 +771,7 @@ const MOCK_TRACE_DETAILS = {
 				time: '2026-03-20',
 				time: '2026-03-20',
 				stage: 'inspection',
 				stage: 'inspection',
 				title: '田间巡检',
 				title: '田间巡检',
-				desc: '种植期间已开展长势检查与环境巡检'
+				desc: '种植期间已持续开展长势检查与环境巡检'
 			},
 			},
 			{
 			{
 				time: '2026-03-30',
 				time: '2026-03-30',
@@ -778,8 +788,8 @@ const MOCK_TRACE_DETAILS = {
 			{
 			{
 				time: '2026-04-01',
 				time: '2026-04-01',
 				stage: 'pack',
 				stage: 'pack',
-				title: '包装出库',
-				desc: '已完成包装整理,进入销售流通环节'
+				title: '包装日期:出库',
+				desc: '已完成包装日期:整理,进入销售流通环节'
 			}
 			}
 		],
 		],
 		camera: {
 		camera: {
@@ -828,6 +838,7 @@ reportPending: {
 			exists: false,
 			exists: false,
 			statusBadge: { text: '', type: '' },
 			statusBadge: { text: '', type: '' },
 			no: '',
 			no: '',
+			plantStartTime: '',
 			harvestTime: '',
 			harvestTime: '',
 			packTime: ''
 			packTime: ''
 		},
 		},
@@ -870,6 +881,7 @@ reportPending: {
 			exists: false,
 			exists: false,
 			statusBadge: { text: '', type: '' },
 			statusBadge: { text: '', type: '' },
 			no: '',
 			no: '',
+			plantStartTime: '',
 			harvestTime: '',
 			harvestTime: '',
 			packTime: ''
 			packTime: ''
 		},
 		},
@@ -913,6 +925,7 @@ reportPending: {
 		batch: {
 		batch: {
 			exists: false,
 			exists: false,
 			statusBadge: { text: '', type: '' },
 			statusBadge: { text: '', type: '' },
+			plantStartTime: '',
 			emptyMessage: ''
 			emptyMessage: ''
 		},
 		},
 		report: null,
 		report: null,
@@ -941,6 +954,7 @@ reportPending: {
 		batch: {
 		batch: {
 			exists: false,
 			exists: false,
 			statusBadge: { text: '', type: '' },
 			statusBadge: { text: '', type: '' },
+			plantStartTime: '',
 			emptyMessage: ''
 			emptyMessage: ''
 		},
 		},
 		report: null,
 		report: null,
@@ -1670,6 +1684,11 @@ const traceDetail = computed(() => {
 	let certFiles = []
 	let certFiles = []
 	let reportFiles = []
 	let reportFiles = []
 	
 	
+	// 查找 farmTimeline 中 stage === 'planting' 的节点,用于兜底种植时间
+	const plantingNode = Array.isArray(data.farmTimeline)
+		? data.farmTimeline.find(item => item.stage === 'planting')
+		: null
+	
 	try {
 	try {
 		if (data.certificate?.certFiles) {
 		if (data.certificate?.certFiles) {
 			certFiles = JSON.parse(data.certificate.certFiles)
 			certFiles = JSON.parse(data.certificate.certFiles)
@@ -1698,6 +1717,8 @@ const traceDetail = computed(() => {
 				? { text: '检验合格', type: 'ok' }
 				? { text: '检验合格', type: 'ok' }
 				: { text: '批次不存在', type: 'muted' },
 				: { text: '批次不存在', type: 'muted' },
 			no: data.batchNo || '',
 			no: data.batchNo || '',
+			// 临时前端演示:始终显示固定种植时间
+			plantStartTime: '2026-03-01',
 			harvestTime: data.produceDate || '',
 			harvestTime: data.produceDate || '',
 			packTime: data.packageDate || '',
 			packTime: data.packageDate || '',
 			emptyMessage: data.status !== '2' ? '未找到对应溯源批次信息。请确认二维码是否为佳友厚苑正品批次。' : ''
 			emptyMessage: data.status !== '2' ? '未找到对应溯源批次信息。请确认二维码是否为佳友厚苑正品批次。' : ''
@@ -1780,7 +1801,7 @@ const traceDetail = computed(() => {
 					{ time: '2026-03-20', stage: 'inspection', title: '田间巡检', desc: '种植期间已持续开展长势检查与环境巡检' },
 					{ time: '2026-03-20', stage: 'inspection', title: '田间巡检', desc: '种植期间已持续开展长势检查与环境巡检' },
 					{ time: data.produceDate || '', stage: 'harvest', title: '成熟采收', desc: '本批次产品进入成熟采收阶段' },
 					{ time: data.produceDate || '', stage: 'harvest', title: '成熟采收', desc: '本批次产品进入成熟采收阶段' },
 					{ time: (data.reports?.[0]?.reportDate) || '', stage: 'test', title: '安全检测', desc: '已完成安全检测,相关结果可查' },
 					{ time: (data.reports?.[0]?.reportDate) || '', stage: 'test', title: '安全检测', desc: '已完成安全检测,相关结果可查' },
-					{ time: data.packageDate || '', stage: 'pack', title: '包装出库', desc: '已完成包装整理,进入销售流通环节' }
+					{ time: data.packageDate || '', stage: 'pack', title: '包装日期:出库', desc: '已完成包装日期:整理,进入销售流通环节' }
 				]
 				]
 			} else {
 			} else {
 				// 真实态:使用真实数据 + 补充系统节点
 				// 真实态:使用真实数据 + 补充系统节点
@@ -1813,13 +1834,13 @@ const traceDetail = computed(() => {
 					}
 					}
 				}
 				}
 
 
-				// 包装出库
+				// 包装日期:出库
 				if (data.packageDate && !stageSet.has('pack')) {
 				if (data.packageDate && !stageSet.has('pack')) {
 					timeline.push({
 					timeline.push({
 						time: data.packageDate,
 						time: data.packageDate,
 						stage: 'pack',
 						stage: 'pack',
-						title: '包装出库',
-						desc: '已完成包装整理,进入销售流通环节'
+						title: '包装日期:出库',
+						desc: '已完成包装日期:整理,进入销售流通环节'
 					})
 					})
 				}
 				}
 			}
 			}
@@ -2568,10 +2589,6 @@ function previewDoc(kind, index) {
 	background: rgba(250, 248, 242, 0.82);
 	background: rgba(250, 248, 242, 0.82);
 }
 }
 
 
-.cardBatch {
-	background: rgba(251, 248, 242, 0.8);
-}
-
 .cardCredential {
 .cardCredential {
 	background: rgba(252, 248, 240, 0.84);
 	background: rgba(252, 248, 240, 0.84);
 }
 }
@@ -2580,31 +2597,94 @@ function previewDoc(kind, index) {
 	background: rgba(252, 248, 244, 0.74);
 	background: rgba(252, 248, 244, 0.74);
 }
 }
 
 
-/* 检测结论卡:结论型卡片,比普通资料卡更有结论感 */
+/* 检测结论卡:融合溯源信息,与农场卡视觉统一 */
 .cardConclusion {
 .cardConclusion {
-	background: rgba(252, 250, 244, 0.82);
+	background: rgba(250, 248, 242, 0.82);
+	padding-top: 20rpx;
+}
+
+/* 溯源信息卡主体:三层竖向结构 */
+.conclusionIdentity {
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
 }
 }
 
 
-.conclusionBody {
-	padding-top: 6rpx;
+/* 第一层:批次号主信息区 */
+.conclusionBatchWrap {
+	display: flex;
+	flex-direction: column;
+	gap: 4rpx;
 }
 }
 
 
-.conclusionLead {
+.conclusionBatchLabel {
 	display: block;
 	display: block;
-	font-size: 30rpx;
-	font-weight: 600;
-	line-height: 1.5;
-	letter-spacing: 0.01em;
-	color: rgba(24, 38, 30, 0.96);
-	margin-bottom: 14rpx;
+	font-size: 20rpx;
+	font-weight: 500;
+	line-height: 1.4;
+	color: rgba(84, 106, 93, 0.6);
+	letter-spacing: 0.02em;
 }
 }
 
 
-.conclusionDesc {
+.conclusionBatchNo {
 	display: block;
 	display: block;
+	font-size: 26rpx;
+	font-weight: 500;
+	line-height: 1.4;
+	color: rgba(27, 41, 33, 0.78);
+	letter-spacing: 0.02em;
+}
+
+/* 第二层:时间摘要区,一行式表达 */
+.conclusionSummary {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 6rpx 0;
+}
+
+.summaryLabel {
+	font-size: 20rpx;
+	font-weight: 500;
+	color: rgba(84, 106, 93, 0.6);
+	letter-spacing: 0.01em;
+	margin-right: 6rpx;
+}
+
+.summaryText {
+	font-size: 21rpx;
+	font-weight: 400;
+	color: rgba(27, 41, 33, 0.78);
+	letter-spacing: 0.01em;
+}
+
+.summaryDivider {
 	font-size: 20rpx;
 	font-size: 20rpx;
 	font-weight: 400;
 	font-weight: 400;
-	line-height: 1.9;
-	color: rgba(84, 106, 93, 0.5);
+	color: rgba(84, 106, 93, 0.4);
+	margin: 0 16rpx;
+}
+
+/* 第三层:结论标签区,独立横向排列 */
+.conclusionTags {
+	display: flex;
+	flex-direction: row;
+	gap: 12rpx;
+}
+
+.conclusionTag {
+	display: inline-flex;
+	align-items: center;
+	padding: 6rpx 16rpx;
+	border-radius: 999rpx;
+	background: rgba(39, 113, 76, 0.08);
+}
+
+.conclusionTag text {
+	font-size: 19rpx;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+	color: rgba(39, 113, 76, 0.8);
 }
 }
 
 
 /* 农事时间轴:关键种植过程 */
 /* 农事时间轴:关键种植过程 */
@@ -2689,7 +2769,7 @@ function previewDoc(kind, index) {
 	color: rgba(27, 41, 33, 0.9);
 	color: rgba(27, 41, 33, 0.9);
 }
 }
 
 
-/* 当前节点(包装出库):主高亮 */
+/* 当前节点(包装日期:出库):主高亮 */
 .timelineItem.is-current .timelineDot {
 .timelineItem.is-current .timelineDot {
 	background: #2f7d55;
 	background: #2f7d55;
 	box-shadow: 0 0 0 6rpx rgba(47, 125, 85, 0.12);
 	box-shadow: 0 0 0 6rpx rgba(47, 125, 85, 0.12);
@@ -3107,9 +3187,9 @@ function previewDoc(kind, index) {
 	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.25s both;
 	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.25s both;
 }
 }
 
 
-/* 批次卡 */
-.cardBatch {
-	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.35s both;
+/* 批次状态(不存在/已下线) */
+.cardBatchState {
+	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.2s both;
 }
 }
 
 
 /* 凭证卡 */
 /* 凭证卡 */
@@ -3243,11 +3323,6 @@ function previewDoc(kind, index) {
 	margin-top: auto;
 	margin-top: auto;
 }
 }
 
 
-/* 底部辅助卡 */
-.cardBatchState {
-	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.55s both;
-}
-
 /* 卡片触摸反馈:阴影增强(模拟按压感) */
 /* 卡片触摸反馈:阴影增强(模拟按压感) */
 .card:active {
 .card:active {
 	transition: box-shadow 0.15s ease, transform 0.15s ease;
 	transition: box-shadow 0.15s ease, transform 0.15s ease;
@@ -3667,48 +3742,6 @@ function previewDoc(kind, index) {
 	color: rgba(64, 75, 67, 0.8);
 	color: rgba(64, 75, 67, 0.8);
 }
 }
 
 
-/* 批次信息主体:连续信息排版,标签-值对应,与商品信息卡风格统一 */
-.batchBody {
-	display: flex;
-	flex-direction: column;
-}
-
-/* 批次信息主体:左右两列布局,左列固定,右列自适应,内容左对齐 */
-.batchBody {
-	display: flex;
-	flex-direction: column;
-}
-
-.batchRow {
-	display: flex;
-	align-items: baseline;
-	padding: 16rpx 0;
-}
-
-.batchRow + .batchRow {
-	border-top: 1rpx solid rgba(39, 75, 57, 0.05);
-}
-
-.batchRowLabel {
-	flex-shrink: 0;
-	width: 162rpx;
-	font-size: 21rpx;
-	font-weight: 460;
-	color: rgba(84, 106, 93, 0.68);
-	letter-spacing: 0.02em;
-	line-height: 1.5;
-}
-
-.batchRowValue {
-	flex: 1;
-	min-width: 0;
-	font-size: 23rpx;
-	font-weight: 400;
-	line-height: 1.4;
-	letter-spacing: 0.01em;
-	color: rgba(0, 0, 0, 0.85);
-}
-
 .cardCredential .certSummary {
 .cardCredential .certSummary {
 	margin-top: 4rpx;
 	margin-top: 4rpx;
 }
 }

+ 168 - 120
佳友厚苑_溯源页第二阶段详细开发设计方案.md

@@ -43,7 +43,7 @@
 ### 1.5 第二阶段范围边界
 ### 1.5 第二阶段范围边界
 
 
 - 首屏信任感优化(基于现有页头与 Hero 商品图,不额外新增 Hero 内重文案)
 - 首屏信任感优化(基于现有页头与 Hero 商品图,不额外新增 Hero 内重文案)
-- 溯源结论卡(以本批次综合溯源结论为主,不仅限于检测结果
+- 溯源信息卡(由"溯源结论卡"与"批次信息卡"融合而成,作为首个核心信任卡片
 - 关键农事时间轴
 - 关键农事时间轴
 - 实时监控画面展示
 - 实时监控画面展示
 - 种植环境记录展示
 - 种植环境记录展示
@@ -242,101 +242,129 @@
 
 
 这是一次经过验证后的设计收敛,而非方案遗漏。
 这是一次经过验证后的设计收敛,而非方案遗漏。
 
 
-### 4.2 模块二:溯源结论卡(优先级最高)
+### 4.2 模块二:溯源信息卡(优先级最高)
 
 
 #### 4.2.1 模块目标
 #### 4.2.1 模块目标
-用最短路径回答用户最关心的问题:
+用最短路径同时回答用户两个最关心的问题:
 
 
-> 这批产品值不值得信任?
+> 这批产品值不值得信任?是不是我手上这一批?
 
 
-该模块不是只回答“是否检测通过”,而是对本批次产品的溯源信息做一个前置性的综合结论表达。
+该模块不是只回答"是否检测通过",而是对本批次产品的溯源信息做一个前置性的综合结论表达,同时让用户快速核对批次编号与关键时间信息
 
 
 #### 4.2.2 重要性说明
 #### 4.2.2 重要性说明
-当前页面虽然已有检测报告、合格证、批次信息等资料,但缺少一个面向消费者的“总括性结论”。  
-这会导致:
+当前页面虽然已有检测报告、合格证、批次信息等资料,但之前"溯源结论"和"批次信息"是分开的,存在两个问题:
 
 
-- 用户需要自己从不同模块中拼凑判断
-- 页面虽然资料完整,但“第一眼可信”感不够强
-- 检测报告、合格证、后续农事时间轴、环境状态之间缺少一个统一的解释入口
+- 用户需要先理解结论,再继续往后寻找"这是不是我手上这一批"的对应信息
+- 页面前半部分信息被拆成多个卡片,信任建立路径不够集中
 
 
-因此,第二阶段建议将原“检测结论卡”升级为“溯源结论卡”,让该模块承担
+因此,第二阶段当前版本已确认
 
 
-- 对本批次商品做总括性解释
-- 先告诉用户“来源清晰、检测完成、过程可查”
-- 再引导用户继续查看后方材料与过程数据
+> 将原"溯源结论卡"与"批次信息卡"融合为一张"溯源信息卡",作为首个核心信任卡片。
+
+这张卡片同时承担两类职责:
+- 给出本批次产品的可信判断
+- 让用户快速核对批次编号与关键时间信息
 
 
 #### 4.2.3 模块建议位置
 #### 4.2.3 模块建议位置
 建议放在:
 建议放在:
 - Hero 后
 - Hero 后
-- 商品信息后
-- 农场信息前
+- 商品信息前
 
 
-推荐顺序:Hero → 溯源结论 → 商品信息 / 农场信息
+推荐顺序:Hero → 溯源信息 → 商品信息 / 农场信息
 
 
 #### 4.2.4 模块内容建议
 #### 4.2.4 模块内容建议
 标题建议:
 标题建议:
-- 溯源结论
-- 本批次溯源结论
+- 溯源信息(推荐)
 
 
 推荐默认使用:
 推荐默认使用:
-- `溯源结论`
+- `溯源信息`
 
 
-主结论建议:
-- 本批次产品已完成安全检测,来源清晰、过程可查
-- 本批次产品溯源信息完整,可安心选购
-- 本批次产品已完成检测与记录归档,相关信息可查
+卡片内部采用三层结构:
 
 
-补充说明建议:
-- 本页面已同步展示农场信息、批次信息、检测材料及相关过程记录
-- 农残、重金属等关键指标均在安全范围内,相关信息可在下方查看
-- 相关检测结果、合格证及批次信息均已归档,可继续查看
+##### 第一层:批次身份信息(主视觉)
+展示内容:
+- 批次编号
+- 批次号
 
 
-#### 4.2.5 视觉建议
-- 仍然采用“结论型卡片”
-- 不做成报告摘要卡
-- 不做成参数表格
-- 不做成警示提示条
-- 通过“标题 + 主结论 + 补充说明”三层结构表达
+当前推荐表现:
+- 弱标签:`批次编号`
+- 主信息:`THY-20260330-001`
+
+说明:
+- 批次号是该卡片中的最强识别信息
+- 用于让用户与包装标签上的批次号进行核对
+- 不建议在批次号前重复增加"批次号:"字段式前缀
+
+##### 第二层:关键时间信息(摘要信息)
+展示内容:
+- 生产/采收日期
+- 包装日期
+
+当前推荐表达:
+- `生产/采收日期:2026-04-09 | 包装日期:2026-04-10`
+
+说明:
+- 使用严谨字段表达,便于用户与商品外包装信息进行核对
+- 采用一行摘要形式,而不是表格式字段区
+
+##### 第三层:轻状态标签(结论层)
+展示内容:
+- `全程可追溯`
+- `已通过安全检测`
+
+说明:
+- 使用两个轻标签表达结果状态
+- 不再使用长句式结论和说明文案
+- 不建议继续使用"来源可查 / 检测合格"这类偏电商宣传式文案
 
 
-信息层级建议:
-1. 中文标题(轻)
-2. 主结论(最强)
-3. 补充说明(最轻)
+#### 4.2.5 视觉建议
+- 保留当前 sectionHeader 风格(英文小标题 + 中文主标题)
+- 采用"主信息 → 摘要信息 → 状态标签"的三层结构
+- 批次号为卡片最强视觉,但不做成页面主标题级别
+- 时间信息采用一行摘要,不做表格、不做字段列表卡
+- 状态标签使用轻胶囊标签形式,作为结论层
+- 整体风格需与当前页面其他卡片保持同一体系,避免像单独做了一种新卡片
+- 不再保留原独立"批次信息卡"样式
 
 
 #### 4.2.6 数据字段建议
 #### 4.2.6 数据字段建议
-建议将字段命名从“检测结论”扩展为更适合整页总结的结构:
+当前前端融合卡所需字段主要来自已有批次信息与结论信息,无需为此额外新建复杂字段。
+
+建议字段如下:
 
 
 | 字段名 | 类型 | 说明 |
 | 字段名 | 类型 | 说明 |
 |---|---|---|
 |---|---|---|
-| `traceConclusion` | string | 溯源主结论 |
-| `traceSummary` | string | 溯源补充说明 |
-| `testPassed` | boolean | 是否完成检测并通过,可选 |
-| `testOrganization` | string | 检测机构或检测来源说明,可选 |
-| `testSourceType` | string | 检测来源类型:如 `self_device` / `third_party` |
+| `traceConclusion` | string | 溯源主结论,可选;当前融合卡前端版本中已不作为主展示长句 |
+| `traceSummary` | string | 溯源补充说明,可选 |
+| `batchNo` | string | 批次号 |
+| `produceDate` | datetime/date | 生产/采收日期 |
+| `packageDate` | datetime/date | 包装日期 |
+| `testPassed` | boolean | 是否通过检测,可用于状态标签兜底 |
+| `testSourceType` | string | 检测来源类型,如 `self_device` / `third_party` |
 
 
-前端推荐结构:
+前端当前融合卡推荐结构:
 
 
 ```js
 ```js
-traceConclusionCard: {
-  title: '溯源结论',
-  conclusion: '本批次产品已完成安全检测,来源清晰、过程可查',
-  desc: '本页面已同步展示农场信息、批次信息、检测材料及相关过程记录。',
-  testPassed: true,
-  testSourceType: 'self_device'
+traceInfoCard: {
+  title: '溯源信息',
+  batchLabel: '批次编号',
+  batchNo: 'THY-20260330-001',
+  summaryLine: '生产/采收日期:2026-04-09 | 包装日期:2026-04-10',
+  tags: ['全程可追溯', '已通过安全检测']
 }
 }
 ```
 ```
 
 
 #### 4.2.7 数据来源建议
 #### 4.2.7 数据来源建议
-当前阶段检测大概率以“自采设备检测”为主,因此
+当前融合卡的数据来源建议如下
 
 
-- 不应在该模块中默认强调“第三方检测”
-- 不应把“第三方机构出具”作为固定文案
-- 应根据真实情况决定是否展示检测来源说明
+- `batchNo`:来自批次表
+- `produceDate`:来自批次表
+- `packageDate`:来自批次表
+- `testPassed / testSourceType`:来自检测相关扩展字段
 
 
-建议规则
-- 若为自采设备检测,则以“已完成安全检测 / 关键指标在安全范围内”表达为主
-- 若后期接入第三方检测,可再动态补充“第三方检测结果”文案
-- 文案必须与真实检测来源一致,不能为提升信任感而写死第三方背书
+说明
+- 当前已确认前端主展示以"批次号 + 日期 + 状态标签"为核心
+- 原 `traceConclusion` / `traceSummary` 字段仍可保留,供后续版本扩展使用
+- 但当前版本不再以长句结论作为卡片主展示方式
 
 
 ### 4.3 模块三:商品信息(保留,轻增强)
 ### 4.3 模块三:商品信息(保留,轻增强)
 
 
@@ -350,7 +378,7 @@ traceConclusionCard: {
 #### 4.3.2 第二阶段建议
 #### 4.3.2 第二阶段建议
 - 保留当前结构
 - 保留当前结构
 - 不做大改
 - 不做大改
-- 只增强与“检测结论卡”的配合关系
+- 只增强与“溯源信息卡”的配合关系
 
 
 #### 4.3.3 优化方向
 #### 4.3.3 优化方向
 - 保持商品信息承担“正式介绍商品”的职责
 - 保持商品信息承担“正式介绍商品”的职责
@@ -884,21 +912,28 @@ environment: {
 - 阈值区间参考常见自然光照强度范围,属于面向消费者展示的“合理分档”,不强调农业专业术语,也不用于农业精细化控制
 - 阈值区间参考常见自然光照强度范围,属于面向消费者展示的“合理分档”,不强调农业专业术语,也不用于农业精细化控制
 - 后端应负责输出“平均光照数值 + 光照等级文案 + 状态文案”三层结果
 - 后端应负责输出“平均光照数值 + 光照等级文案 + 状态文案”三层结果
 - 前端最终展示 `lightLevel` 与 `lightStatus`,不负责做 lux → 文案 的阈值判断
 - 前端最终展示 `lightLevel` 与 `lightStatus`,不负责做 lux → 文案 的阈值判断
-### 4.8 模块八:批次信息(后置
+### 4.8 模块八:批次信息(已并入溯源信息卡
 
 
-#### 4.8.1 建议
-保留当前结构,不做大改
+#### 4.8.1 当前结论
+原独立"批次信息卡"已不再保留,相关核心信息已并入前部"溯源信息卡"
 
 
-#### 4.8.2 位置调整
-放在
-- 时间轴
-- 实时画面
-- 种植环境记录
+#### 4.8.2 合并原因
+这样调整的原因包括
+- 用户在页面前半部分就能完成"这是不是我手上这一批"的核对
+- 减少卡片数量,避免页面前半部分被拆碎
+- 让"信任建立"和"批次核验"合并为一个完整路径
 
 
-之后
+#### 4.8.3 当前保留内容
+已并入溯源信息卡的字段包括:
+- 批次编号
+- 批次号
+- 生产/采收日期
+- 包装日期
 
 
-#### 4.8.3 原因
-批次信息属于查证层,不是信任起点。
+当前不再在融合卡中展示:
+- 种植时间(已在种植过程记录中体现)
+- 产地(已在农场信息中体现)
+- 规格(已在商品信息中体现)
 
 
 ### 4.9 模块九:检测报告(证明层)
 ### 4.9 模块九:检测报告(证明层)
 
 
@@ -911,7 +946,7 @@ environment: {
 #### 4.9.3 原则
 #### 4.9.3 原则
 - 保留“点击查看大图”
 - 保留“点击查看大图”
 - 不再强调报告本身
 - 不再强调报告本身
-- 通过前面的检测结论卡,先让用户理解“结果”
+- 通过前面的溯源信息卡,先让用户理解“结果”
 - 再通过这里让用户验证“材料”
 - 再通过这里让用户验证“材料”
 
 
 ### 4.10 模块十:合格证(证明层)
 ### 4.10 模块十:合格证(证明层)
@@ -949,16 +984,15 @@ environment: {
 
 
 1. 品牌页头
 1. 品牌页头
 2. Hero 首屏延续现状(不新增额外信任标签或重文案)
 2. Hero 首屏延续现状(不新增额外信任标签或重文案)
-3. 溯源结论卡
+3. 溯源信息卡(由溯源结论与批次信息融合)
 4. 商品信息
 4. 商品信息
 5. 农场信息
 5. 农场信息
 6. 关键农事时间轴
 6. 关键农事时间轴
 7. 种植现场实时画面
 7. 种植现场实时画面
 8. 种植环境记录
 8. 种植环境记录
-9. 批次信息
-10. 检测报告
-11. 合格证
-12. 收口说明 + footer
+9. 检测报告
+10. 合格证
+11. 收口说明 + footer
 
 
 ---
 ---
 
 
@@ -975,7 +1009,7 @@ environment: {
 {
 {
   "product": {},
   "product": {},
   "farm": {},
   "farm": {},
-  "batch": {},
+  "batch": {}, // 批次号、生产/采收日期、包装日期等
   "report": {},
   "report": {},
   "certificate": {},
   "certificate": {},
   "timeline": [],
   "timeline": [],
@@ -989,7 +1023,7 @@ environment: {
 
 
 ### 6.2 字段增补建议
 ### 6.2 字段增补建议
 
 
-#### 新增字段:溯源结论
+#### 新增字段:溯源信息 / 溯源结论扩展
 | 字段名 | 类型 | 说明 |
 | 字段名 | 类型 | 说明 |
 |---|---|---|
 |---|---|---|
 | `traceConclusion` | string | 溯源主结论 |
 | `traceConclusion` | string | 溯源主结论 |
@@ -1024,9 +1058,13 @@ environment: {
 
 
 第二阶段页面涉及多个新增模块,后端字段可能存在分阶段补齐的情况,因此前端必须设计缺省数据兜底策略。
 第二阶段页面涉及多个新增模块,后端字段可能存在分阶段补齐的情况,因此前端必须设计缺省数据兜底策略。
 
 
-#### 溯源结论卡
-- 若 `traceConclusion` 为空,则该模块整体不展示
-- 不建议在前端写死“第三方检测”“已通过检测”等强结论文案
+#### 溯源信息卡
+- 若 `batchNo` 为空,则该模块整体不展示
+- 不建议在前端写死“第三方检测”等具体来源类文案;
+-“已通过安全检测”可作为状态标签展示,但需以后端真实字段为准
+- 若仅 `produceDate` / `packageDate` 缺失,可仅展示批次号与状态标签
+- 不建议因为 `traceConclusion` 为空就隐藏整张卡
+- 当前前端主展示以“批次号 + 日期 + 状态标签”为核心,`traceConclusion` / `traceSummary` 为可选扩展字段
 
 
 #### 农事时间轴
 #### 农事时间轴
 - 若无农事记录,但有采收 / 检测 / 包装等系统节点,则仍可展示简化版时间轴
 - 若无农事记录,但有采收 / 检测 / 包装等系统节点,则仍可展示简化版时间轴
@@ -1126,7 +1164,7 @@ environment: {
 
 
 ### 8.1 开发优先级建议
 ### 8.1 开发优先级建议
 #### P1
 #### P1
-- 溯源结论
+- 溯源信息
 - 时间轴模块
 - 时间轴模块
 
 
 #### P2
 #### P2
@@ -1164,7 +1202,7 @@ environment: {
 ### 8.4 联调建议
 ### 8.4 联调建议
 
 
 #### 联调顺序建议
 #### 联调顺序建议
-1. 溯源结论
+1. 溯源信息
 2. 时间轴聚合逻辑
 2. 时间轴聚合逻辑
 3. 实时监控画面
 3. 实时监控画面
 4. 种植环境记录
 4. 种植环境记录
@@ -1309,8 +1347,8 @@ environment: {
 ### 9.5 不要打破第一阶段视觉风格
 ### 9.5 不要打破第一阶段视觉风格
 第二阶段是在第一阶段上增强,而不是重做。
 第二阶段是在第一阶段上增强,而不是重做。
 
 
-### 9.6 不要让"当前实时环境"冒充"历史种植环境"
-环境模块若作为溯源背书,主表达必须优先使用历史记录或种植周期聚合结果,避免让用户误以为"当前天气"就是"当时环境"
+### 9.6 不要让“当前实时环境”冒充“历史种植环境”
+环境模块若作为溯源背书,主表达必须优先使用历史记录或种植周期聚合结果,避免让用户误以为“当前天气”就是“当时环境”
 
 
 ---
 ---
 
 
@@ -1324,7 +1362,7 @@ environment: {
 - 所有新增模块都能自然融入现有风格
 - 所有新增模块都能自然融入现有风格
 
 
 ### 10.2 内容层
 ### 10.2 内容层
-- 能看到溯源结论
+- 能看到融合后的溯源信息卡(含批次核验信息)
 - 能看到关键种植过程
 - 能看到关键种植过程
 - 能看到实时现场
 - 能看到实时现场
 - 能理解环境状态
 - 能理解环境状态
@@ -1381,7 +1419,7 @@ environment: {
 建议按以下顺序逐步开发,而不是一次性同时改完整个页面:
 建议按以下顺序逐步开发,而不是一次性同时改完整个页面:
 
 
 ### 第一批(优先落地,最快形成第二阶段效果)
 ### 第一批(优先落地,最快形成第二阶段效果)
-1. 溯源结论
+1. 溯源信息
 2. 关键农事时间轴
 2. 关键农事时间轴
 3. 首屏与后续模块衔接细节校准
 3. 首屏与后续模块衔接细节校准
 
 
@@ -1390,10 +1428,9 @@ environment: {
 5. 种植环境记录
 5. 种植环境记录
 
 
 ### 第三批(整体验收与细节增强)
 ### 第三批(整体验收与细节增强)
-6. 批次信息顺序调整
-7. 检测报告与合格证顺序校准
-8. 页脚安心收口增强
-9. 缺省状态与兜底逻辑处理
+6. 检测报告与合格证顺序校准
+7. 页脚安心收口增强
+8. 缺省状态与兜底逻辑处理
 
 
 ---
 ---
 
 
@@ -1423,33 +1460,42 @@ environment: {
 - 是否避免了重复表达“官方溯源”
 - 是否避免了重复表达“官方溯源”
 - 是否没有因为新增元素而破坏高级感
 - 是否没有因为新增元素而破坏高级感
 
 
-### 模块 B:溯源结论
+### 模块 B:溯源信息
 
 
 #### 目标
 #### 目标
-优先回答用户“这批产品值不值得信任”
+作为页面前半部分的首个核心信任卡片,同时完成"信任建立"与"批次核验"
 
 
 #### 需完成内容
 #### 需完成内容
-- 新增溯源结论卡
-- 放置在 Hero 后的高优先级位置
-- 呈现主结论 + 补充说明
-- 结论不局限于“检测通过”,而是对整页溯源信息做总括表达
+- 将原"溯源结论卡"与"批次信息卡"融合为一个模块
+- 标题调整为:溯源信息
+- 展示批次编号与批次号
+- 展示生产/采收日期与包装日期摘要
+- 展示轻状态标签(如:全程可追溯、已通过安全检测)
+- 删除原独立"批次信息卡"
 
 
-#### 推荐前端数据字段
+#### 推荐前端数据结构
 ```js
 ```js
-traceConclusionCard: {
-  title: '溯源结论',
-  conclusion: '本批次产品已完成安全检测,来源清晰、过程可查',
-  desc: '本页面已同步展示农场信息、批次信息、检测材料及相关过程记录。',
-  testPassed: true,
-  testSourceType: 'self_device'
+traceInfoCard: {
+  title: '溯源信息',
+  batchLabel: '批次编号',
+  batchNo: 'THY-20260330-001',
+  summaryLine: '生产/采收日期:2026-04-09 | 包装日期:2026-04-10',
+  tags: ['全程可追溯', '已通过安全检测']
 }
 }
 ```
 ```
 
 
+#### 当前前端实现口径
+- 批次号作为该卡片中的主视觉信息
+- 时间信息使用一行摘要表达:生产/采收日期:xxxx | 包装日期:xxxx
+- 状态信息使用两个轻标签,不再使用长句式结论和说明
+- 不再单独保留"批次信息卡"
+
 #### 开发检查点
 #### 开发检查点
-- 模块应为“结论型卡片”,不能做成参数表格
-- 该模块为空时应整体隐藏
-- 不允许前端写死“第三方检测”作为长期方案
-- 结论应能承接后续时间轴、检测报告、合格证等模块,而不是只解释检测结果
+- 是否已将原"批次信息卡"完全并入
+- 批次号是否为卡片中的最强识别信息
+- 时间信息是否使用一行摘要表达,而不是表单式字段列表
+- 标签文案是否为状态表达,而非营销口号
+- 是否避免在该卡中重复展示产地、规格、种植时间等其他模块已有信息
 
 
 ---
 ---
 
 
@@ -1643,19 +1689,20 @@ environment: {
 
 
 ---
 ---
 
 
-### 模块 G:批次信息顺序与角色调整
+### 模块 G:批次信息角色调整(已合并)
 
 
 #### 目标
 #### 目标
-保留批次信息,但将其放到“查证层”位置
+确认"批次信息"在第二阶段中不再作为独立卡片存在,而是以前部融合信息的方式呈现
 
 
-#### 需完成内容
-- 不必大改样式
-- 调整模块在页面中的顺序
-- 确保在时间轴 / 监控 / 环境之后出现
+#### 当前结论
+- 批次信息不再单独成卡
+- 批次核验信息前移并融入"溯源信息卡"
+- 页面后半部分不再重复展示同一组批次字段
 
 
 #### 开发检查点
 #### 开发检查点
-- 批次信息仍然清晰
-- 但不应继续作为前半页核心内容
+- 页面中是否已删除独立批次信息卡
+- 批次号 / 生产采收日期 / 包装日期是否已在前部融合卡中正确展示
+- 是否避免重复展示造成信息冗余
 
 
 ---
 ---
 
 
@@ -1667,7 +1714,7 @@ environment: {
 #### 需完成内容
 #### 需完成内容
 - 保持当前报告横滑卡片与合格证单证模式
 - 保持当前报告横滑卡片与合格证单证模式
 - 校准两者在页面中的出现顺序
 - 校准两者在页面中的出现顺序
-- 确保前面已有检测结论卡后,材料层逻辑自然成立
+- 确保前面已有溯源信息卡后,材料层逻辑自然成立
 
 
 #### 开发检查点
 #### 开发检查点
 - 不要再次放大报告与合格证的视觉权重
 - 不要再次放大报告与合格证的视觉权重
@@ -1710,7 +1757,7 @@ environment: {
 #### 方案 B:边开发边提炼子组件
 #### 方案 B:边开发边提炼子组件
 推荐可拆分子组件如下:
 推荐可拆分子组件如下:
 - `TraceHeroTrust.vue`
 - `TraceHeroTrust.vue`
-- `TraceConclusionCard.vue`
+- `TraceInfoCard.vue`
 - `TraceTimeline.vue`
 - `TraceTimeline.vue`
 - `TraceCameraCard.vue`
 - `TraceCameraCard.vue`
 - `TraceEnvironmentCard.vue`
 - `TraceEnvironmentCard.vue`
@@ -1728,6 +1775,7 @@ environment: {
 - 首屏是否保持克制,而没有重复堆叠“官方溯源”信息
 - 首屏是否保持克制,而没有重复堆叠“官方溯源”信息
 - Hero 商品图是否仍然是首屏主视觉
 - Hero 商品图是否仍然是首屏主视觉
 - 是否仍保持当前高级感
 - 是否仍保持当前高级感
+- 溯源信息卡是否已承担"信任建立 + 批次核验"的双重职责
 
 
 ### 模块层级验收
 ### 模块层级验收
 - 是否先给结论,再给过程,再给证明
 - 是否先给结论,再给过程,再给证明
@@ -1778,7 +1826,7 @@ environment: {
 第二阶段前端开发不是为了“把功能都放上去”,而是为了验证:
 第二阶段前端开发不是为了“把功能都放上去”,而是为了验证:
 
 
 - 页面是否真的比第一阶段更可信
 - 页面是否真的比第一阶段更可信
-- 第二阶段内容是否能被“溯源结论”自然串起来
+- 第二阶段内容是否能被“溯源信息卡”自然串起来
 - 后续后端接口应该围绕哪些字段补齐
 - 后续后端接口应该围绕哪些字段补齐
 
 
 前端先行的价值不在于“首屏不断加元素”,而在于:
 前端先行的价值不在于“首屏不断加元素”,而在于: