<template>
|
<view class="container">
|
<!-- 操作栏：打印/返回 -->
|
<view class="header no-print">
|
<view @click="handlePrint" class="print-btn">
|
<image src="/static/icon_print.png" class="print-icon" alt="打印" />
|
<text class="print-text">打印标签</text>
|
</view>
|
<view @click="navigateBack" class="back-btn">返回</view>
|
</view>
|
|
<!-- 检验标识卡主体（带绿色边框 + 完整表格） -->
|
<view v-if="tagData" class="tag-card">
|
<!-- 卡头：标题 + 日期 -->
|
<view class="card-header">
|
<text class="card-title">检验标识卡</text>
|
<text class="card-date">{{ tagData.date }}</text>
|
</view>
|
|
<!-- 内容表格（带边框） -->
|
<view class="card-table">
|
<view class="table-row">
|
<view class="table-cell label">物料</view>
|
<view class="table-cell value">{{ tagData.material }}</view>
|
<view class="table-cell label">批次</view>
|
<view class="table-cell value">{{ tagData.batch }}</view>
|
</view>
|
<view class="table-row">
|
<view class="table-cell label">型号</view>
|
<view class="table-cell value">{{ tagData.model }}</view>
|
<view class="table-cell label">数量</view>
|
<view class="table-cell value">{{ tagData.quantity }}</view>
|
</view>
|
<view class="table-row">
|
<view class="table-cell label">日期</view>
|
<view class="table-cell value">{{ tagData.inspectDate }}</view>
|
<view class="table-cell label">检验</view>
|
<view class="table-cell value">{{ tagData.inspector }}</view>
|
</view>
|
</view>
|
|
<!-- 底部二维码区域（精准对齐） -->
|
<view class="qr-area">
|
<uv-qrcode
|
:value="qrContent"
|
:size="80"
|
style="width: 80rpx; height: 80rpx;"
|
></uv-qrcode>
|
</view>
|
</view>
|
|
<!-- 空状态 -->
|
<view v-else class="empty-state">
|
<text>未获取到检验标识卡数据</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';
|
import io from '@hyoga/uni-socket.io';
|
import { PrinterCommands } from '@/common/util/printer-commands.js';
|
|
export default {
|
components: { uvQrcode },
|
data() {
|
return {
|
tagData: {
|
material: '120034535',
|
batch: '25098814',
|
model: 'G3-2B259',
|
quantity: 216,
|
inspectDate: '20250408',
|
inspector: '王義/合格',
|
date: '2025.08.22'
|
},
|
printerConfig: null,
|
qrContent: ''
|
};
|
},
|
onLoad() {
|
// 生成二维码内容（拼接关键信息）
|
this.qrContent = `M:${this.tagData.material};B:${this.tagData.batch};M:${this.tagData.model}`;
|
this.printerConfig = uni.getStorageSync('printerConfig') || null;
|
},
|
methods: {
|
navigateBack() {
|
uni.navigateBack();
|
},
|
async handlePrint() {
|
// 打印逻辑与之前一致（省略重复代码，保持原逻辑）
|
if (!this.tagData) {
|
uni.showToast({ title: '标签数据为空', icon: 'none' });
|
return;
|
}
|
// ... 原打印逻辑代码 ...
|
},
|
sendPrintCommand(command) {
|
// ... 原打印指令代码 ...
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 容器基础样式 */
|
.container {
|
background-color: #fff;
|
padding: 20rpx;
|
min-height: 100vh;
|
}
|
|
/* 操作栏 */
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10rpx 0;
|
border-bottom: 1px solid #eee;
|
}
|
.print-btn {
|
display: flex;
|
align-items: center;
|
}
|
.print-icon {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 8rpx;
|
}
|
.print-text {
|
font-size: 28rpx;
|
color: #007AFF;
|
}
|
.back-btn {
|
font-size: 28rpx;
|
color: #007AFF;
|
}
|
|
/* 检验标识卡主体（核心样式） */
|
.tag-card {
|
width: 600rpx;
|
margin: 30rpx auto;
|
border: 4rpx solid #28a745; /* 绿色边框 */
|
border-radius: 12rpx;
|
padding: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
|
}
|
|
/* 卡头样式 */
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10rpx;
|
padding-bottom: 10rpx;
|
border-bottom: 2px solid #333; /* 标题分割线 */
|
}
|
.card-title {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
.card-date {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
/* 表格核心样式（带边框） */
|
.card-table {
|
width: 100%;
|
border-collapse: collapse; /* 合并边框 */
|
margin-bottom: 20rpx;
|
}
|
.table-row {
|
display: flex;
|
border: 1px solid #999; /* 表格行边框 */
|
}
|
.table-cell {
|
flex: 1;
|
padding: 12rpx 8rpx;
|
font-size: 26rpx;
|
color: #333;
|
border-right: 1px solid #999; /* 单元格右侧边框 */
|
}
|
.table-cell:last-child {
|
border-right: none; /* 最后一列无边框 */
|
}
|
.label {
|
width: 30%;
|
text-align: right;
|
color: #666;
|
background-color: #f8f8f8; /* 标签列灰色背景 */
|
}
|
.value {
|
width: 70%;
|
text-align: left;
|
}
|
|
/* 二维码区域（右下角对齐） */
|
.qr-area {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: -10rpx; /* 微调与表格间距 */
|
}
|
|
/* 空状态 */
|
.empty-state {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 300rpx;
|
color: #999;
|
font-size: 28rpx;
|
}
|
|
/* 打印适配（隐藏操作栏，优化边框） */
|
@media print {
|
.no-print {
|
display: none;
|
}
|
.tag-card {
|
border: 4rpx solid #28a745; /* 打印时保留绿色边框 */
|
box-shadow: none;
|
width: 100%;
|
}
|
}
|
</style>
|
