302 lines
6.4 KiB
Vue
302 lines
6.4 KiB
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>
|