jiayouhouyuan/pages/trace/detail.vue

<template>
		<view class="page">
		<view class="pageDecor">
			<view class="pageGlow glowA" />
			<view class="pageGlow glowB" />
			<view class="pageGlow glowC" />
			<view class="pageGrain" />
		</view>

			<!-- 顶部留白：兼容 iOS 刘海 -->
			<view class="safeTop" />

			<!-- 轻品牌页头：极克制、无导航栏，让独立扫码页有品牌收口 -->
			<view class="brandPageHeader">
				<view class="brandPageHeaderInner">
					<text class="brandPageHeaderName">佳友厚苑</text>
					<view class="brandPageHeaderDot" />
					<text class="brandPageHeaderLabel">官方溯源 品质可验</text>
				</view>
			</view>

			<view class="hero">
			<!-- 完整首屏大卡：品牌信任区 + 商品信息面板 -->
			<view class="heroCard">
				<!-- Hero 视觉区：商品图 + 品牌氛围 -->
				<view class="heroBg">
					<!-- 优先商品图，没有则用农场图 -->
					<image
						class="heroImage"
						:src="traceDetail.product?.image || traceDetail.farm?.image"
						mode="aspectFill"
					/>
					<!-- 底部大字号水印，营造品牌氛围 -->
					<view class="heroBrandAnchor">
						<text class="heroBrandAnchorText">JIAYOU</text>
					</view>
					<!-- 光感层：多层次渐变 + 景深 + 底部暗化 -->
					<view class="heroMask" />
				</view>

				<!-- 商品信息面板：嵌入 Hero 底部，与 Hero 自然过渡 -->
				<view v-if="traceDetail.product?.name" class="heroInfoPanel">
					<view class="infoPanelInner">
						<view class="sectionHeader">
							<view class="sectionHeaderLeft">
								<text class="sectionEn">Product</text>
								<text class="sectionTitle">商品信息</text>
							</view>
							<view v-if="traceDetail.batch?.statusBadge" class="trustBadge" :class="traceDetail.batch.statusBadge.type">
								<!-- 认证徽章 SVG：双圆环 + 对勾，图标主视觉，文字辅助 -->
								<svg class="trustBadgeIcon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
									<circle cx="10" cy="10" r="9" stroke="rgba(27,71,42,0.38)" stroke-width="0.9" />
									<circle cx="10" cy="10" r="5.5" stroke="rgba(27,71,42,0.22)" stroke-width="0.7" />
									<path d="M6.6 10.4L9.1 12.9L13.8 8" stroke="rgba(27,71,42,0.8)" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" />
								</svg>
								<text class="trustBadgeText">{{ traceDetail.batch.statusBadge.text }}</text>
							</view>
						</view>

						<view class="infoPanelBody">
							<text class="infoPanelName">{{ traceDetail.product.name }}</text>

							<view v-if="traceDetail.product.spec" class="infoPanelSpec">
								<view class="specDot" />
								<text class="specText">{{ traceDetail.product.spec }}</text>
							</view>

							<view v-if="traceDetail.product?.intro" class="infoPanelIntro">
								<text>{{ traceDetail.product.intro }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view class="content" scroll-y>
			<!-- 农场信息（合并为单卡：图片+名称+地区+介绍连续表达） -->
			<view v-if="traceDetail.farm?.name" class="card cardLevel2 cardFarm">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Farm</text>
						<text class="sectionTitle">农场信息</text>
					</view>
				</view>

				<!-- 农场主体：左图右文结构，融入主体内容 -->
				<view class="farmBody">
					<view class="farmImageWrap">
						<image class="farmImage" :src="traceDetail.farm.image" mode="aspectFill" />
					</view>
					<view class="farmMeta">
						<text class="farmName">{{ traceDetail.farm.name }}</text>
						<view v-if="traceDetail.farm.location" class="farmLocation">
							<svg class="locationIcon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M10 2C7.24 2 5 4.24 5 7c0 4 5 11 5 11s5-7 5-11c0-2.76-2.24-5-5-5zm0 6.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="rgba(39,113,76,0.6)"/>
							</svg>
							<text class="locationText">{{ traceDetail.farm.location }}</text>
						</view>
					</view>
				</view>
				<view v-if="traceDetail.farm?.intro" class="farmIntro">
					<text>{{ traceDetail.farm.intro }}</text>
				</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 class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Batch</text>
						<text class="sectionTitle">当前批次状态</text>
					</view>
					<view class="statusBadge" :class="traceDetail.batch.statusBadge.type">
						{{ traceDetail.batch.statusBadge.text }}
					</view>
				</view>
				<view class="emptyText">{{ traceDetail.batch?.emptyMessage || '该批次暂不可查询' }}</view>
				<view class="btnRow">
					<button class="primaryBtn" @click="goBackToPurchase">返回购买渠道</button>
				</view>
			</view>

			<!-- 检测报告：横向卡片列表 -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel2 cardCredential">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Report</text>
						<text class="sectionTitle">检测报告</text>
					</view>
				</view>

				<!-- 横向滑动卡片列表 -->
				<scroll-view
					v-if="reportItems.length"
					class="reportCardList"
					scroll-x
					:show-scrollbar="false"
					enhanced
				>
					<view class="reportCardTrack">
						<view
							v-for="(item, itemIdx) in reportItems"
							:key="`report-card-${itemIdx}`"
							class="reportCard"
							@click="previewDoc('report', getReportGlobalIndex(itemIdx, 0))"
						>
							<!-- 报告缩略图（带页数角标） -->
							<view class="reportCardThumb">
								<image
									v-if="item.images && item.images.length"
									class="reportCardThumbImg"
									:src="item.images[0]"
									mode="aspectFit"
								/>
								<view v-else class="reportCardThumbEmpty">
									<text class="reportCardThumbEmptyText">暂无图片</text>
								</view>
								<view v-if="item.images && item.images.length > 1" class="reportCardPages">
									共{{ item.images.length }}页
								</view>
							</view>

							<!-- 报告信息 -->
							<view class="reportCardMeta">
								<view v-if="item.detectDate" class="reportCardRow">
									<text class="reportCardLabel">检测日期</text>
									<text class="reportCardValue">{{ item.detectDate }}</text>
								</view>
								<view v-if="item.no" class="reportCardRow">
									<text class="reportCardLabel">报告编号</text>
									<text class="reportCardValue reportCardValueNo">{{ item.no }}</text>
								</view>
							</view>

							<!-- 点击提示 -->
							<text class="reportCardHint">点击查看大图</text>
						</view>
					</view>
				</scroll-view>

				<!-- 待补充状态 -->
				<view v-else class="docPlaceholder">
					<text class="docPlaceholderTitle">检测报告待补充</text>
					<text class="docPlaceholderText">
						{{ traceDetail.report?.emptyMessage || '检测报告待补充，请耐心等待。' }}
					</text>
				</view>
			</view>

			<!-- 合格证：信息摘要 + 缩略图一体化布局 -->
			<view v-if="traceDetail.batch?.exists" class="card cardLevel1 cardCredential">
				<view class="sectionHeader">
					<view class="sectionHeaderLeft">
						<text class="sectionEn">Certificate</text>
						<text class="sectionTitle">合格证</text>
					</view>
				</view>

				<!-- 信息与缩略图一体化区域 -->
				<view class="certSummary">
					<!-- 左侧：信息摘要 -->
					<view class="certSummaryInfo">
						<view v-if="traceDetail.certificate?.issueDate" class="certSummaryRow">
							<text class="certSummaryLabel">开具日期</text>
							<text class="certSummaryValue">{{ traceDetail.certificate.issueDate }}</text>
						</view>
						<view v-if="traceDetail.certificate?.no" class="certSummaryRow">
							<text class="certSummaryLabel">合格证编号</text>
							<text class="certSummaryValue">{{ traceDetail.certificate.no }}</text>
						</view>
					</view>

					<!-- 右侧：缩略图 -->
					<view
						v-if="traceDetail.certificate?.status === 'uploaded' && certificateImages.length"
						class="certThumbContainer"
						@click="previewDoc('certificate', 0)"
					>
						<view class="certThumbWrap">
							<image class="certThumbImage" :src="certificateImages[0]" mode="aspectFit" />
						</view>
						<text class="certPreviewHint">点击查看</text>
					</view>

					<!-- 待补充状态：仅显示提示 -->
					<view v-else class="certPendingHint">
						<text class="certPendingText">
							{{ traceDetail.certificate?.emptyMessage || '合格证待补充，请耐心等待。' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 底部柔和收口渐变 -->
			<view class="footerFade" />
			<!-- 轻量页脚 -->
			<view class="traceFooter">
				<view class="traceFooterHint">如需帮助，联系客服</view>
				<view class="traceFooterPhone" @click="contactCustomer">
					<image class="traceFooterPhoneIcon" src="/static/icons/phone.svg" mode="aspectFit" />
					<text class="traceFooterPhoneNum">13379508760</text>
				</view>
				<view class="traceFooterBrand">佳友厚苑 · 安心之选</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getTraceDetail } from '@/api/base/index.js'
// 页面状态选择（H5 演示用）：通过路由参数传入 state 即可切换 mock 场景
// 例如：/pages/trace/detail?state=reportPending
// 加载状态
const loading = ref(false)
// 数据存储
const traceInfo = ref(null)
const routeOptions = ref({})
const mockStateKey = ref('normal')

const MOCK_TRACE_DETAILS = {
	normal: {
		product: {
			name: '',
			spec: '',			
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: '',
			intro: ''
		},
			batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			harvestTime: '',
			packTime: ''
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			// 每份报告独立 detectDate / no / images
			items: [
				{
					detectDate: '',
					no: '',
					images: ['']
				},
				{
					detectDate: '',
					no: '',
					images: ['']
				},
				{
					detectDate: '',
					no: '',
					images: ['']
				}
			]
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			issueDate: '',
			no: '',
			fileUrl: '',
			images: ['']
		}
	},
	reportPending: {
		product: {
			name: '',
			spec: '',			
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			harvestTime: '',
			packTime: ''
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			emptyMessage: '',
			items: []
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			issueDate: '',
			no: '',
			fileUrl: '',
			images: []
		}
	},
	certificatePending: {
		product: {
			name: '',
			spec: '',	
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			no: '',
			harvestTime: '',
			packTime: ''
		},
		report: {
			status: '',
			statusBadge: { text: '', type: '' },
			items: [
				{
					detectDate: '',
					no: '',
					images: []
				}
			]
		},
		certificate: {
			status: '',
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		}
	},
	batchNotFound: {
		product: {
			name:'',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		},
		report: null,
		certificate: null
	},
	batchOfflined: {
		product: {
			name: '',
			spec: '',
			image: '',
			intro: ''
		},
		farm: {
			name: '',
			location: '',
			image: null,
			intro: ''
		},
		batch: {
			exists: false,
			statusBadge: { text: '', type: '' },
			emptyMessage: ''
		},
		report: null,
		certificate: null
	}
}


function resolveStateKey(opts) {
	const raw = (opts?.state || opts?.batchState || opts?.scene || '').toString().trim()
	if (!raw) return 'normal'
	const allowed = ['normal', 'reportPending', 'certificatePending', 'batchNotFound', 'batchOfflined']
	return allowed.includes(raw) ? raw : 'normal'
}

onLoad((opts) => {
	// 拿到浏览器路径参数
	const fullPath = window.location.pathname
	const batchId = fullPath.split('/').filter(Boolean).pop()
	
	// 优先使用路由参数中的 id，其次使用 URL 路径中的 id
	const finalId = batchId || 1
	loadData(finalId)
	
	routeOptions.value = opts || {}
	mockStateKey.value = resolveStateKey(opts || {})
})

const loadData = async (batchId) => {
  loading.value = true
  
  try {
    // 调用接口
    const res = await getTraceDetail(batchId)
    traceInfo.value = res.data.data
    console.log('接口返回数据：', res)
  } catch (error) {
    console.error('加载失败', error)
    // 错误提示已在拦截器中自动处理
  } finally {
    // 无论成功失败都关闭 loading
    loading.value = false
  }
}

const traceDetail = computed(() => {
	// 如果没有真实数据，返回 mock 数据
	if (!traceInfo.value) {
		return MOCK_TRACE_DETAILS[mockStateKey.value] || MOCK_TRACE_DETAILS.normal
	}

	const data = traceInfo.value
	
	// 解析 certFiles 和 reportFiles（JSON 字符串转数组）
	let certFiles = []
	let reportFiles = []
	
	try {
		if (data.certificate?.certFiles) {
			certFiles = JSON.parse(data.certificate.certFiles)
		}
	} catch (e) {
		console.error('解析 certFiles 失败', e)
	}
	
	// 构建返回数据结构
	return {
		product: {
			name: data.productName || '',
			spec: data.productSpec || '',
			image: data.productImage || '',
			intro: data.productDesc || ''
		},
		farm: {
			name: data.farmName || '',
			location: data.farmRegion || '',
			image: data.farmImage || '',
			intro: data.farmIntro || ''
		},
		batch: {
			exists: data.status === '1', // status 为 '1' 表示批次正常
			statusBadge: data.status === '1' 
				? { text: '检验合格', type: 'ok' }
				: { text: '批次不存在', type: 'muted' },
			no: data.batchNo || '',
			harvestTime: data.produceDate || '',
			packTime: data.packageDate || '',
			emptyMessage: data.status !== '1' ? '未找到对应溯源批次信息。请确认二维码是否为佳友厚苑正品批次。' : ''
		},
		report: {
			status: data.reports && data.reports.length > 0 ? 'uploaded' : 'pending',
			statusBadge: data.reports && data.reports.length > 0 
				? { text: '已上传', type: 'ok' }
				: { text: '待补充', type: 'wait' },
			emptyMessage: '检测报告待补充，上传完成后可查看大图。',
			items: (data.reports || []).map(report => {
				let images = []
				try {
					if (report.reportFiles) {
						const files = JSON.parse(report.reportFiles)
						images = files.map(f => f.url)
					}
				} catch (e) {
					console.error('解析 reportFiles 失败', e)
				}
				
				return {
					detectDate: report.reportDate || '',
					no: report.reportNo || '',
					images: images
				}
			})
		},
		certificate: {
			status: data.certificate && certFiles.length > 0 ? 'uploaded' : 'pending',
			statusBadge: data.certificate && certFiles.length > 0
				? { text: '已上传', type: 'ok' }
				: { text: '待补充', type: 'wait' },
			issueDate: data.certificate?.certIssueDate || '',
			no: data.certificate?.certNo || '',
			fileUrl: certFiles.length > 0 ? certFiles[0].url : '',
			images: certFiles.map(f => f.url),
			emptyMessage: '合格证待补充，上传完成后可查看大图。'
		}
	}
})
const reportImages = computed(() => {
	const items = traceDetail.value?.report?.items
	if (Array.isArray(items)) {
		return items.flatMap(item => Array.isArray(item.images) ? item.images : [])
	}
	return []
})

const reportItems = computed(() => {
	return traceDetail.value?.report?.items || []
})

// 计算某份报告内某张图在全局 reportImages 扁平数组中的索引
function getReportGlobalIndex(itemIndex, imgIndex) {
	const items = reportItems.value
	let offset = 0
	for (let i = 0; i < itemIndex; i++) {
		const imgArr = items[i]?.images
		offset += Array.isArray(imgArr) ? imgArr.length : 0
	}
	return offset + imgIndex
}

const certificateImages = computed(() => {
	const c = traceDetail.value?.certificate
	if (!c) return []
	if (Array.isArray(c.images) && c.images.length) return c.images
	return c.fileUrl ? [c.fileUrl] : []
})


function contactCustomer() {
	uni.makePhoneCall({
		phoneNumber: '13379508760'
	})
}

function goBackToPurchase() {
	uni.showModal({
		title: '返回购买渠道',
		content: 'mock 模式：后续可跳转到直播间/小店页面。',
		showCancel: true,
		confirmText: '确认返回'
	})
}


function previewDoc(kind, index) {
	const urls = kind === 'report' ? reportImages.value : certificateImages.value
	if (!urls.length) {
		uni.showToast({ title: '该文件暂未上传', icon: 'none' })
		return
	}
	uni.previewImage({
		urls,
		current: urls[index] || urls[0]
	})
}
</script>

<style scoped>
.page {
	position: relative;
	min-height: 100vh;
	--bg-cream-1: #f8f2e8;
	--bg-cream-2: #f3ebdd;
	--bg-cream-3: #ece1ce;
	--forest-900: #143a2b;
	--forest-800: #1f513b;
	--forest-700: #2d6849;
	--sage-500: #708f7d;
	--gold-320: #ccb086;
	--gold-260: #dcc4a0;
	--text-900: #233126;
	--text-700: #3c4d41;
	--text-500: #6b776d;
	background: linear-gradient(172deg,
		#FAF6EF 0%,
		#F4EEE3 38%,
		#EDF0EC 68%,
		#E8EFE9 100%
	);
	overflow: hidden;
}

/* 背景氛围层：三层光感（前景/中景/背景）+ grain */
.pageDecor {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.pageGlow {
	position: absolute;
	border-radius: 50%;
	filter: blur(14rpx);
}

/* 背景层：左上森林绿微光 */
.glowA {
	width: 780rpx;
	height: 780rpx;
	top: -280rpx;
	left: -300rpx;
	background: radial-gradient(circle, rgba(26, 84, 58, 0.18) 0%, rgba(20, 72, 50, 0) 70%);
	opacity: 0.85;
}

/* 中景层：右下金色暖光 */
.glowB {
	width: 720rpx;
	height: 720rpx;
	right: -280rpx;
	top: 480rpx;
	background: radial-gradient(circle, rgba(200, 170, 120, 0.2) 0%, rgba(200, 170, 120, 0) 72%);
	opacity: 0.9;
}

/* 前景层：顶部柔和高光，塑造空间感 */
.glowC {
	width: 600rpx;
	height: 360rpx;
	top: -60rpx;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 252, 246, 0.38), transparent 70%);
	filter: blur(20rpx);
	opacity: 0.7;
}

/* 纹理叠加层 */
.pageGrain {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background:
		radial-gradient(900rpx 380rpx at 48% -4%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
		radial-gradient(640rpx 400rpx at 104% 48%, rgba(68, 112, 86, 0.09), rgba(68, 112, 86, 0)),
		radial-gradient(700rpx 320rpx at -4% 76%, rgba(210, 180, 130, 0.12), rgba(210, 180, 130, 0)),
		linear-gradient(180deg, rgba(248, 244, 236, 0.16) 0%, rgba(228, 242, 232, 0.08) 100%);
}

.safeTop {
	height: calc(env(safe-area-inset-top));
	position: relative;
	z-index: 1;
}

/* 轻品牌页头：透明底，不叠在 Hero 上产生「白雾」；层级低于首屏卡 */
.brandPageHeader {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 72rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid rgba(39, 75, 57, 0.05);
	background: transparent;
}

.brandPageHeaderInner {
	display: flex;
	align-items: center;
	gap: 10rpx;
	width: 100%;
}

.brandPageHeaderName {
	font-size: 22rpx;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.1em;
	color: rgba(27, 41, 33, 0.65);
}

.brandPageHeaderDot {
	flex-shrink: 0;
	width: 4rpx;
	height: 4rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.4);
}

.brandPageHeaderLabel {
	font-size: 20rpx;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.06em;
	color: rgba(112, 143, 125, 0.7);
}

.hero,
.content {
	position: relative;
	z-index: 1;
}

.hero {
	padding: 0 24rpx;
}

/* 完整首屏大卡：与品牌页头分离，避免负 margin 上提后被页头遮盖 */
.heroCard {
	border-radius: 42rpx;
	overflow: hidden;
	margin-top: 20rpx;
	position: relative;
	z-index: 4;
	box-shadow:
		0 48rpx 120rpx rgba(10, 36, 24, 0.2),
		0 16rpx 48rpx rgba(10, 36, 24, 0.1),
		0 2rpx 0 rgba(255, 255, 255, 0.6) inset;
	backdrop-filter: blur(4px);
}

/* Hero 视觉区：多层次光感空间，顶部高光 + 景深 + 底部暗化 */
.heroBg {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(20, 74, 52, 0.72), rgba(205, 177, 129, 0.3) 70%, rgba(243, 232, 214, 0.36));
}

/* 前景层光晕：右下淡金色微光（提升质感） */
.heroBg::before {
	content: '';
	position: absolute;
	right: -100rpx;
	bottom: -72rpx;
	width: 520rpx;
	height: 280rpx;
	border-radius: 50%;
	background: radial-gradient(ellipse at 42% 38%, rgba(252, 244, 228, 0.18), transparent 68%);
	pointer-events: none;
	z-index: 2;
}

.heroImage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}

.heroBrandAnchor {
	position: absolute;
	right: -48rpx;
	bottom: -14rpx;
	z-index: 2;
	pointer-events: none;
}

.heroBrandAnchorText {
	font-size: 164rpx;
	font-weight: 760;
	letter-spacing: 0.1em;
	line-height: 1;
	color: rgba(248, 241, 227, 0.045);
	transform: rotate(-8deg);
}

/* Hero 遮罩层：提亮后仍保留轻微底部过渡，避免压住真实商品图 */
.heroMask {
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		radial-gradient(ellipse 180% 60% at 50% 0%, rgba(255, 252, 248, 0.26), transparent 68%),
		radial-gradient(480rpx 240rpx at 90% 8%, rgba(252, 248, 240, 0.2), transparent 62%),
		radial-gradient(700rpx 360rpx at 8% 65%, rgba(6, 24, 16, 0.12), transparent 58%),
		radial-gradient(560rpx 300rpx at 88% 80%, rgba(205, 177, 129, 0.06), transparent 62%),
		linear-gradient(180deg,
			rgba(8, 28, 18, 0) 0%,
			rgba(8, 28, 18, 0) 62%,
			rgba(10, 36, 24, 0.05) 80%,
			rgba(8, 26, 18, 0.1) 92%,
			rgba(248, 244, 238, 0.12) 100%
		);
}

/* 商品信息面板：玻璃浮层效果，负margin上浮 + backdrop-filter */
.heroInfoPanel {
	background: rgba(252, 248, 242, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	position: relative;
}

/* 与 Hero 底部自然过渡 */
.heroInfoPanel::before {
	content: '';
	position: absolute;
	top: -56rpx;
	left: 0;
	right: 0;
	height: 56rpx;
	background: linear-gradient(180deg,
		rgba(252, 248, 242, 0) 0%,
		rgba(252, 248, 242, 0.88) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.infoPanelInner {
	position: relative;
	z-index: 2;
	padding: 32rpx 30rpx 30rpx;
}

/* 与下方农场/批次等卡片共用 .sectionHeader / .sectionHeaderLeft 样式 */

.infoPanelBody {
	padding-top: 0;
}

.infoPanelName {
	display: block;
	font-size: 30rpx;
	font-weight: 680;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.92);
}

.infoPanelSpec {
	display: inline-flex;
	align-items: center;
	gap: 10rpx;
	margin-top: 14rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	background: rgba(39, 113, 76, 0.06);
	border: 1rpx solid rgba(39, 113, 76, 0.08);
}

.specDot {
	width: 6rpx;
	height: 6rpx;
	border-radius: 50%;
	background: rgba(39, 113, 76, 0.5);
}

.specText {
	font-size: 20rpx;
	font-weight: 500;
	color: rgba(54, 66, 57, 0.85);
}

.infoPanelIntro {
	margin-top: 16rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid rgba(39, 75, 57, 0.06);
	font-size: 23rpx;
	line-height: 1.8;
	color: rgba(54, 66, 57, 0.75);
}

.content {
	padding: 20rpx 0 40rpx;
}

/* 基础卡片：半透明玻璃质感 */
.card {
	margin: 0 24rpx 22rpx;
	padding: 30rpx 28rpx;
	border-radius: 36rpx;
	background: rgba(252, 250, 244, 0.76);
	box-shadow:
		0 16rpx 40rpx rgba(38, 41, 32, 0.07),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.card.soft {
	background: rgba(252, 248, 244, 0.6);
}

/* Hero 之后第一张卡：适度上浮 */
.cardHeroFirst {
	margin-top: -28rpx;
	position: relative;
	z-index: 3;
}

/* 层级 0：与 Hero 同级，主卡（商品面板） */
.cardLevel0 {
	box-shadow:
		0 48rpx 120rpx rgba(10, 36, 24, 0.16),
		0 16rpx 48rpx rgba(10, 36, 24, 0.08),
		0 1rpx 0 rgba(255, 255, 255, 0.6) inset;
}

/* 层级 1：次要信息卡，阴影中等 */
.cardLevel1 {
	box-shadow:
		0 20rpx 50rpx rgba(30, 34, 24, 0.09),
		0 8rpx 24rpx rgba(30, 34, 24, 0.05),
		0 1rpx 0 rgba(255, 255, 255, 0.55) inset;
}

/* 层级 2：次次要信息卡，阴影更轻 */
.cardLevel2 {
	box-shadow:
		0 14rpx 36rpx rgba(36, 38, 28, 0.065),
		0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
}

/* 层级 3：底部辅助信息卡，最轻 */
.cardLevel3 {
	box-shadow:
		0 8rpx 22rpx rgba(42, 44, 30, 0.04),
		0 1rpx 0 rgba(255, 255, 255, 0.44) inset;
}

.cardFarm {
	background: rgba(250, 248, 242, 0.82);
}

.cardBatch {
	background: rgba(251, 248, 242, 0.8);
}

.cardCredential {
	background: rgba(252, 248, 240, 0.84);
}

.cardBatchState {
	background: rgba(252, 248, 244, 0.74);
}

/* ================================================
   微动效：让页面"活起来"
   ================================================ */

/* Hero 进入：上浮 + 淡入 */
@keyframes heroEnter {
	0% {
		opacity: 0;
		transform: translateY(28rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.heroCard {
	animation: heroEnter 0.6s cubic-bezier(0.22, 0.78, 0.35, 1) both;
}

/* 卡片依次入场：延迟递增，制造节奏感 */
@keyframes cardEnter {
	0% {
		opacity: 0;
		transform: translateY(20rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 商品面板：稍晚于 Hero */
.heroInfoPanel {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.15s both;
}

/* 农场卡 */
.cardFarm {
	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;
}

/* 凭证卡 */
.cardCredential {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.45s both;
}

/* ============================
   检测报告横向卡片列表
   ============================ */
.reportCardList {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.reportCardList::-webkit-scrollbar {
	display: none;
}

.reportCardTrack {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16rpx;
	padding: 6rpx 4rpx 10rpx;
	/* 关键：让子项不受 flex 压缩，自然撑开形成横向溢出 */
	width: max-content;
}

/* 单张报告卡片 */
.reportCard {
	flex-shrink: 0;
	width: 220rpx;
	background: #FAFBF9;
	border: 1rpx solid rgba(39, 75, 57, 0.09);
	border-radius: 14rpx;
	padding: 12rpx 12rpx 10rpx;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-shadow: 0 2rpx 8rpx rgba(39, 75, 57, 0.04);
}

/* 缩略图（带页数角标覆盖层） */
.reportCardThumb {
	position: relative;
	width: 100%;
	height: 196rpx;
	background: rgba(39, 75, 57, 0.03);
	border-radius: 10rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}

.reportCardThumbImg {
	width: 100%;
	height: 100%;
}

.reportCardThumbEmpty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reportCardThumbEmptyText {
	font-size: 18rpx;
	color: rgba(39, 75, 57, 0.3);
}

/* 页数角标：绝对定位在缩略图右下角 */
.reportCardPages {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	font-size: 15rpx;
	color: rgba(39, 75, 57, 0.65);
	background: rgba(250, 251, 249, 0.88);
	border: 1rpx solid rgba(39, 75, 57, 0.1);
	border-radius: 6rpx;
	padding: 2rpx 8rpx;
	line-height: 1.4;
}

/* 报告元信息 */
.reportCardMeta {
	flex: 1;
	margin-bottom: 6rpx;
}

.reportCardRow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4rpx;
	margin-bottom: 4rpx;
}

.reportCardLabel {
	font-size: 16rpx;
	color: rgba(84, 106, 93, 0.6);
	flex-shrink: 0;
}

.reportCardValue {
	font-size: 16rpx;
	color: rgba(68, 82, 72, 0.85);
	font-weight: 460;
	text-align: right;
	word-break: break-all;
}

.reportCardValueNo {
	font-size: 14rpx;
	color: rgba(68, 82, 72, 0.72);
}

/* 点击提示 */
.reportCardHint {
	font-size: 14rpx;
	color: rgba(39, 75, 57, 0.3);
	text-align: center;
	margin-top: auto;
}

/* 底部辅助卡 */
.cardBatchState {
	animation: cardEnter 0.5s cubic-bezier(0.22, 0.78, 0.35, 1) 0.55s both;
}

/* 卡片触摸反馈：阴影增强（模拟按压感） */
.card:active {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* 触摸时轻微缩小，增加真实感 */
.card:active:not(.heroInfoPanel) {
	transform: scale(0.99);
}

.sectionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18rpx;
	margin-bottom: 20rpx;
}

.sectionHeaderLeft {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	position: relative;
	padding-bottom: 8rpx;
}

.sectionHeaderLeft::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 78rpx;
	height: 2rpx;
	border-radius: 999rpx;
	background: linear-gradient(90deg, rgba(46, 82, 63, 0.3), rgba(203, 176, 128, 0.26), rgba(46, 82, 63, 0));
	pointer-events: none;
}

.sectionEn {
	font-size: 15rpx;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(84, 106, 93, 0.76);
}

.sectionTitle {
	font-size: 27rpx;
	font-weight: 680;
	color: rgba(60, 72, 64, 0.82);
}

.statusBadge {
	font-size: 18rpx;
	font-weight: 620;
	padding: 9rpx 15rpx;
	border-radius: 999rpx;
	white-space: nowrap;
	border: 1rpx solid transparent;
	box-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.34) inset;
}

.statusBadge.ok {
	color: #1d5d40;
	background: rgba(39, 113, 76, 0.12);
	border-color: rgba(39, 113, 76, 0.2);
}

.statusBadge.wait {
	color: #715726;
	background: rgba(203, 171, 112, 0.2);
	border-color: rgba(203, 171, 112, 0.26);
}

.statusBadge.warning {
	color: #8a5e22;
	background: rgba(214, 174, 95, 0.22);
	border-color: rgba(214, 174, 95, 0.28);
}

.statusBadge.muted {
	color: #677069;
	background: rgba(126, 137, 128, 0.14);
	border-color: rgba(126, 137, 128, 0.2);
}

/* =============================================
   商品信息面板专用信任认证徽章：强化图标主视觉、文字辅助
   ============================================= */
/* 整体：认证章风格，低饱和细边框，无交互感 */
.trustBadge {
	display: inline-flex;
	align-items: center;
	gap: 7rpx;
	padding: 9rpx 18rpx 9rpx 15rpx;
	border-radius: 999rpx;
	border: 1rpx solid rgba(39, 113, 76, 0.22);
	background: rgba(39, 113, 76, 0.06);
	box-shadow:
		0 2rpx 6rpx rgba(39, 113, 76, 0.06),
		0 1rpx 0 rgba(255, 255, 255, 0.55) inset;
	white-space: nowrap;
	cursor: default;
	pointer-events: none;
	user-select: none;
}

/* 双圆环认证图标：20×20 viewBox，图标为第一视觉焦点 */
.trustBadgeIcon {
	width: 30rpx;
	height: 30rpx;
	flex-shrink: 0;
	vertical-align: middle;
	display: inline-block;
}

/* 文案：品牌深绿，字重略降，视觉权重低于图标 */
.trustBadgeText {
	font-size: 18rpx;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: rgba(27, 71, 42, 0.68);
}

.kv {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.kvRow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16rpx;
}

.kvKey {
	font-size: 22rpx;
	font-weight: 480;
	color: rgba(54, 68, 58, 0.62);
}

.kvVal {
	font-size: 24rpx;
	font-weight: 660;
	text-align: right;
	color: rgba(27, 41, 33, 0.92);
}

/* 农场主体：左图右文，右栏与图片垂直居中，名称/地址成组 */
.farmBody {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-bottom: 18rpx;
}

.farmImageWrap {
	flex-shrink: 0;
	width: 180rpx;
	height: 136rpx;
	border-radius: 22rpx;
	overflow: hidden;
	position: relative;
	box-shadow:
		0 12rpx 28rpx rgba(24, 41, 30, 0.14),
		0 2rpx 0 rgba(255, 255, 255, 0.3) inset;
}

.farmImage {
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(160deg, rgba(234, 245, 240, 0.9), rgba(220, 238, 228, 0.85));
}

.farmMeta {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 10rpx;
}

.farmName {
	font-size: 28rpx;
	font-weight: 680;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.94);
}

/* 农场地址：普通文本样式，弱于标题；多行时图标与首行对齐 */
.farmLocation {
	display: flex;
	align-items: flex-start;
	gap: 8rpx;
}

/* 定位小图标：略弱、与首行文字视觉对齐 */
.locationIcon {
	width: 18rpx;
	height: 18rpx;
	flex-shrink: 0;
	margin-top: 6rpx;
	opacity: 0.42;
}
.locationText {
	flex: 1;
	min-width: 0;
	font-size: 21rpx;
	font-weight: 400;
	color: rgba(84, 106, 93, 0.82);
	line-height: 1.55;
	letter-spacing: 0.02em;
}

/* 农场介绍：融入主体，使用分隔线区分，与商品简介风格统一 */
.farmIntro {
	padding-top: 18rpx;
	border-top: 1rpx solid rgba(39, 75, 57, 0.06);
	font-size: 23rpx;
	line-height: 1.86;
	color: rgba(54, 68, 58, 0.76);
}

.emptyText {
	margin-top: 10rpx;
	font-size: 24rpx;
	line-height: 1.62;
	color: rgba(16, 24, 19, 0.72);
}

.btnRow {
	margin-top: 22rpx;
}

/* 合格证紧凑缩略图 */
/* ============================
   合格证：信息摘要 + 缩略图一体化布局
   ============================ */
.certSummary {
	display: flex;
	align-items: flex-start;
	gap: 24rpx;
}

.certSummaryInfo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14rpx;
	min-width: 0;
}

.certSummaryRow {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.certSummaryLabel {
	font-size: 20rpx;
	font-weight: 500;
	color: rgba(39, 75, 57, 0.55);
	letter-spacing: 0.02em;
}

.certSummaryValue {
	font-size: 25rpx;
	font-weight: 580;
	color: rgba(27, 41, 33, 0.9);
	line-height: 1.4;
}

.certThumbContainer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
}

.certThumbContainer .certThumbWrap {
	/* 与左侧两行摘要区总高约齐平：缩略图 + gap + 提示行 */
	width: 88rpx;
	height: 120rpx;
	border-radius: 8rpx;
	overflow: hidden;
	background: #fff;
	border: 1rpx solid rgba(200, 180, 140, 0.22);
	box-shadow: 0 2rpx 8rpx rgba(30, 36, 26, 0.06);
}

.certThumbContainer .certThumbImage {
	width: 100%;
	height: 100%;
	display: block;
}

.certPreviewHint {
	font-size: 16rpx;
	line-height: 1.15;
	color: rgba(39, 75, 57, 0.4);
	letter-spacing: 0.01em;
}

.certPendingHint {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 12rpx 0;
}

.certPendingText {
	font-size: 21rpx;
	color: rgba(39, 75, 57, 0.5);
	line-height: 1.5;
}

/* 旧样式保留但隐藏（兼容其他模块） */
.certPreviewCompact {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 24rpx;
}

.docPlaceholder {
	margin-top: 16rpx;
	padding: 20rpx;
	border-radius: 26rpx;
	background: linear-gradient(160deg, rgba(244, 237, 224, 0.82), rgba(237, 244, 235, 0.72));
	border: 1rpx solid rgba(201, 171, 120, 0.22);
}

.docPlaceholderTitle {
	display: block;
	margin-bottom: 12rpx;
	font-size: 22rpx;
	font-weight: 650;
	color: rgba(35, 93, 64, 0.92);
}

.docPlaceholderText {
	display: block;
	font-size: 22rpx;
	line-height: 1.75;
	color: rgba(59, 71, 62, 0.82);
}

.docBlock {
	margin-top: 14rpx;
	padding: 18rpx;
	border-radius: 22rpx;
	background: rgba(255, 255, 255, 0.46);
}

.docBlock:first-of-type {
	margin-top: 4rpx;
}

.docTitle {
	display: block;
	margin-bottom: 10rpx;
	font-size: 22rpx;
	font-weight: 620;
	color: rgba(45, 87, 64, 0.84);
}

.docText {
	font-size: 22rpx;
	line-height: 1.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: 25rpx;
	font-weight: 580;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(27, 41, 33, 0.9);
}

.cardCredential .certSummary {
	margin-top: 4rpx;
}

/* 底部柔和收口渐变 */
.footerFade {
	position: relative;
	height: 1rpx;
	margin: 0 80rpx;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(39, 75, 57, 0.15) 30%,
		rgba(39, 75, 57, 0.2) 50%,
		rgba(39, 75, 57, 0.15) 70%,
		transparent 100%
	);
}

.footerFade::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 80rpx;
	background: radial-gradient(ellipse at 50% 100%, rgba(39, 75, 57, 0.06), transparent 70%);
}

/* 轻量页脚 */
.traceFooter {
	padding: 36rpx 32rpx 52rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14rpx;
}

.traceFooterHint {
	font-size: 20rpx;
	font-weight: 400;
	color: rgba(88, 100, 92, 0.45);
	letter-spacing: 0.03em;
}

.traceFooterPhone {
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 8rpx 16rpx;
	border-radius: 6rpx;
	transition: opacity 0.2s ease;
}

.traceFooterPhone:active {
	opacity: 0.55;
}

.traceFooterPhoneIcon {
	width: 22rpx;
	height: 22rpx;
	opacity: 0.55;
}

.traceFooterPhoneNum {
	font-size: 22rpx;
	font-weight: 400;
	color: rgba(39, 75, 57, 0.6);
	letter-spacing: 0.04em;
}

.traceFooterBrand {
	font-size: 17rpx;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: rgba(88, 100, 92, 0.3);
	margin-top: 8rpx;
}
</style>