sh-app/scanpages/hj/materials_detail.vue

<template>
	<view class="detail-page">
		<!-- 代码标识：把 MaterialCode 拆解展示 -->
		<view class="code-hero">
			<view class="code-hero__tag">扫描结果</view>
			<view class="code-hero__body">
				<text class="code-hero__text">{{ info.MaterialCode || '--' }}</text>
			</view>
		</view>

		<!-- 身份信息 -->
		<view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">材料信息</text>
			</view>
			<view class="card">
                <view class="card__row">
					<text class="card__label">编码</text>
					<text class="card__value card__value--mono">{{ info.Code || '--' }}</text>
				</view>
                <view class="card__row">
					<text class="card__label">炉号</text>
					<text class="card__value card__value--mono">{{ info.HeatNo || '--' }}</text>
				</view>
                <view class="card__row">
					<text class="card__label">批号</text>
					<text class="card__value card__value--mono">{{ info.BatchNo || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">名称</text>
					<text class="card__value">{{ info.MaterialName || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">规格</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ info.MaterialSpec || '--' }}</text>
					</view>
				</view>
                <view class="card__row">
					<text class="card__label">单位</text>
					<view class="card__value-wrap">
						<view class="badge badge--unit">{{ info.MaterialUnit || '--' }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 描述 -->
		<view class="section" v-if="info.MaterialDef">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">描述</text>
			</view>
			<view class="card">
				<text class="desc-text">{{ info.MaterialDef }}</text>
			</view>
		</view>

		<!-- 打印按钮栏 -->
		<view class="print-bar">
			<view class="print-btn" @click="showPrint = true">
				<u-icon name="printer" :size="32" color="#fff" />
				<text class="print-btn__text">预览打印</text>
			</view>
		</view>

		<!-- 打印弹窗 -->
		<nbd-print-prop
			v-model="showPrint"
			:labelWidth="50"
			:labelHeight="30"
			:margin="2"
			:barcodeText="info.MaterialCode || ''"
			:barcodeTopText="[info.MaterialName, info.MaterialSpec].filter(Boolean).join(' ') || ''"
			:barcodeBottomText="[info.Code, info.HeatNo, info.BatchNo].filter(Boolean).join(' ') || ''"
		/>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqMaterialInfoByMaterialCode } from '@/api/hj.js'

const info = ref({})
const showPrint = ref(false)

	onLoad((opt) => {
		if (opt.id) {
			try {
				reqMaterialInfoByMaterialCode(encodeURIComponent(opt.id)).then(res=>{
					if(res.code == 1){
						info.value = res.data
					}
				})
			} catch (e) {
				console.error('解析材料数据失败:', e)
			}
		}
	})
</script>

<style lang="scss" scoped>
	// 继承全局变量（定义在 uni.scss）
	$primary: $app-primary;
	$primary-light: $app-primary-light;
	$primary-dark: $app-primary-dark;
	$text-secondary: $app-text-secondary;
	$radius: $app-radius;
	// 页面专属
	$bg: #f5f7fa;
	$text: #1a2332;
	$border: #e2e8f0;
	$card-bg: #ffffff;

	.detail-page {
		background: $bg;
		padding-bottom: 160rpx;
	}

	// ===== 代码标识区 =====
	.code-hero {
		margin: 24rpx;
		background: $card-bg;
		border-radius: $radius;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
        padding-bottom: 24rpx;
		&__tag {
			display: inline-flex;
			align-items: center;
			margin: 28rpx 0 0 28rpx;
			padding: 4rpx 16rpx;
			font-size: 22rpx;
			color: $primary;
			background: $primary-light;
			border-radius: 6rpx;
			font-weight: 500;
		}

		&__body {
			padding: 20rpx 28rpx 0;
		}

		&__text {
			display: block;
			font-size: 34rpx;
			font-weight: 700;
			color: $text;
			line-height: 1.4;
			word-break: break-all;
			font-family: monospace;
			letter-spacing: 0.5rpx;
		}

	}

	// ===== 区块标题（页面覆盖）=====
	.section {
		// 无动画
		animation: none;

		&__header {
			margin-bottom: 16rpx;
			padding: 0 4rpx;
		}

		&__bar {
			height: 28rpx;
			background: $primary;
			animation: none;
		}
	}

	// ===== 卡片（页面覆盖，继承 page.scss 公共 .card 样式）=====
	.card {
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);

		&__row {
			padding: 24rpx 28rpx;
		}

		&__label {
			width: 120rpx;
			padding-left: 0;

			&::before {
				display: none;
			}
		}

		&__value {
			&--mono {
				font-family: monospace;
				color: $primary-dark;
			}
		}

		&__value-wrap {
			gap: 12rpx;
		}
	}

	// ===== 单位徽章 =====
	.badge--unit {
		display: inline-flex;
		align-items: center;
		padding: 4rpx 16rpx;
		font-size: 22rpx;
		font-weight: 600;
		color: $primary;
		background: $primary-light;
		border-radius: 6rpx;
		letter-spacing: 2rpx;
	}

	// ===== 描述文本 =====
	.desc-text {
		display: block;
		padding: 28rpx;
		font-size: 28rpx;
		color: $text;
		line-height: 1.6;
	}

	// ===== 打印按钮栏 =====
	.print-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 20rpx 24rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba($bg, 0) 0%, $bg 20%);
	}

	.print-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 24rpx;
		background: linear-gradient(135deg, $primary, #5a9aff);
		border-radius: 14rpx;
		box-shadow: 0 6rpx 24rpx rgba($primary, 0.3);

		&:active {
			opacity: 0.9;
			transform: scale(0.98);
		}

		&__text {
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;
			letter-spacing: 2rpx;
		}
	}

	// ===== 批次追溯网格 =====
	.trace-grid {
		display: flex;
		gap: 16rpx;

		.trace-cell {
			flex: 1;
			background: $card-bg;
			border-radius: $radius;
			padding: 28rpx 20rpx 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			border-top: 4rpx solid $primary;

			&__label {
				font-size: 22rpx;
				color: $text-secondary;
				font-weight: 500;
			}

			&__value {
				font-size: 32rpx;
				font-weight: 700;
				color: $text;
				font-family: monospace;
				text-align: center;
				word-break: break-all;
			}

			&__sub {
				font-size: 20rpx;
				color: #b0bccf;
				letter-spacing: 1rpx;
			}
		}
	}
</style>