crmeb/app/pages/supply_chain/traceability/index.vue

<template>
	<view class="traceability-page">
		<view class="content">
			<!-- 扫码按钮 -->
			<view class="scan-section">
				<view class="scan-btn" @click="scanCode">
					<text class="iconfont icon-saoma"></text>
					<text class="btn-text">扫描溯源码</text>
				</view>
				<text class="hint">扫描食材上的追溯码，查看详细信息</text>
			</view>
			
			<!-- 溯源信息展示 -->
			<view class="info-section" v-if="traceInfo">
				<view class="info-card">
					<view class="info-item">
						<text class="label">产品名称：</text>
						<text class="value">{{ traceInfo.productName }}</text>
					</view>
					<view class="info-item">
						<text class="label">原料来源：</text>
						<text class="value">{{ traceInfo.source }}</text>
					</view>
					<view class="info-item">
						<text class="label">检测报告：</text>
						<view class="report-btn" @click="viewReport">查看报告</view>
					</view>
					<view class="info-item">
						<text class="label">物流轨迹：</text>
						<view class="track-btn" @click="viewTrack">查看轨迹</view>
					</view>
					<view class="info-item">
						<text class="label">生产时间：</text>
						<text class="value">{{ traceInfo.productionTime }}</text>
					</view>
					<view class="info-item">
						<text class="label">保质期：</text>
						<text class="value">{{ traceInfo.shelfLife }}</text>
					</view>
				</view>
			</view>
			
			<!-- 公共区域物资查询 -->
			<view class="public-section">
				<view class="section-title">公共区域物资查询</view>
				<view class="search-box">
					<input type="text" v-model="searchKeyword" placeholder="输入物资名称" />
					<view class="search-btn" @click="searchPublicSupply">搜索</view>
				</view>
				<view class="public-list">
					<view class="public-item" v-for="(item, index) in publicSupplies" :key="index">
						<text class="item-name">{{ item.name }}</text>
						<text class="item-code">{{ item.code }}</text>
						<view class="item-btn" @click="viewPublicTrace(item.id)">查看溯源</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			traceInfo: null,
			searchKeyword: '',
			publicSupplies: [
				{ id: 1, name: '维修耗材', code: 'WH-20260307-001' },
				{ id: 2, name: '清洁用品', code: 'WH-20260307-002' },
				{ id: 3, name: '办公用品', code: 'WH-20260307-003' }
			]
		};
	},
	methods: {
		scanCode() {
			// 模拟扫码功能
			uni.showToast({
				title: '模拟扫码成功',
				icon: 'success'
			});
			// 模拟获取溯源信息
			this.traceInfo = {
				productName: '有机蔬菜',
				source: '绿色农场',
				productionTime: '2026-03-01',
				shelfLife: '7天'
			};
		},
		viewReport() {
			uni.showToast({
				title: '查看检测报告',
				icon: 'none'
			});
		},
		viewTrack() {
			uni.showToast({
				title: '查看物流轨迹',
				icon: 'none'
			});
		},
		searchPublicSupply() {
			uni.showToast({
				title: '搜索功能开发中',
				icon: 'none'
			});
		},
		viewPublicTrace(id) {
			uni.showToast({
				title: '查看公共物资溯源',
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss">
.traceability-page {
	.content {
		padding: 30rpx;
		
		.scan-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;
			
			.scan-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 200rpx;
				background-color: #409EFF;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				
				.iconfont {
					font-size: 80rpx;
					color: #fff;
					margin-bottom: 10rpx;
				}
				
				.btn-text {
					color: #fff;
					font-size: 24rpx;
				}
			}
			
			.hint {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.info-section {
			margin-bottom: 40rpx;
			
			.info-card {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				
				.info-item {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					
					.label {
						width: 160rpx;
						font-size: 26rpx;
						color: #666;
					}
					
					.value {
						flex: 1;
						font-size: 26rpx;
						color: #333;
					}
					
					.report-btn,
					.track-btn {
						padding: 10rpx 20rpx;
						background-color: #409EFF;
						color: #fff;
						border-radius: 20rpx;
						font-size: 22rpx;
					}
				}
			}
		}
		
		.public-section {
			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				color: #333;
			}
			
			.search-box {
				display: flex;
				margin-bottom: 20rpx;
				
				input {
					flex: 1;
					height: 60rpx;
					border: 1rpx solid #ddd;
					border-radius: 30rpx;
					padding: 0 30rpx;
					font-size: 24rpx;
				}
				
				.search-btn {
					width: 120rpx;
					height: 60rpx;
					background-color: #409EFF;
					color: #fff;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 20rpx;
					font-size: 24rpx;
				}
			}
			
			.public-list {
				.public-item {
					display: flex;
					align-items: center;
					background-color: #fff;
					border-radius: 10rpx;
					padding: 20rpx;
					margin-bottom: 15rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					
					.item-name {
						flex: 1;
						font-size: 26rpx;
						color: #333;
					}
					
					.item-code {
						font-size: 22rpx;
						color: #999;
						margin-right: 20rpx;
					}
					
					.item-btn {
						padding: 8rpx 16rpx;
						background-color: #409EFF;
						color: #fff;
						border-radius: 16rpx;
						font-size: 20rpx;
					}
				}
			}
		}
	}
}
</style>