97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<template>
|
||
|
||
|
||
<view class="top">
|
||
|
||
<img style="width: 80rpx; height: 80rpx;" src="../../../static//logo/logo.jpg" />
|
||
|
||
<svg id="barcodeSvg" ref="barcodeRef"></svg>
|
||
|
||
</view>
|
||
<view class="content mt-16">
|
||
<p>物料：
|
||
<span>{{ material?.materialName }}</span>
|
||
<span v-if="material?.quantity">x {{ material?.quantity }}</span>
|
||
</p>
|
||
<p>描述：
|
||
<span v-if="material?.description">{{ material?.description || '-' }}</span>
|
||
<span v-else>
|
||
<span v-if="material?.materialShortName">{{ material?.materialShortName }} / </span>
|
||
<span v-if="material?.model">{{ material?.model }} / </span>
|
||
<span v-if="material?.specification">{{ material?.specification }} / </span>
|
||
<span v-if="material?.typeName">{{ material?.typeName }} </span>
|
||
</span>
|
||
</p>
|
||
<view class="top">
|
||
<p>备注：
|
||
<!-- 简称/型号/规格/物料类型 -->
|
||
<span>{{ material?.qrCodeMark || '' }}</span>
|
||
|
||
</p>
|
||
<img :src="qrCode" class="qrcode" />
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, computed } from 'vue';
|
||
import JsBarcode from 'jsbarcode'
|
||
|
||
const props = defineProps({
|
||
detail: {
|
||
type: Object,
|
||
default: null,
|
||
}
|
||
})
|
||
// 条形码容器
|
||
console.log(props.detail, 'props.detail');
|
||
|
||
// 二维码
|
||
const qrCode = computed(() => props.detail?.[0]?.qrCode);
|
||
// 物料数据
|
||
const material = computed(() => props.detail?.[0]);
|
||
// 条形码
|
||
const barcodeValue = computed(() => props.detail?.[0]?.code);
|
||
const generateBarcode = () => {
|
||
const svg = document.getElementById('barcodeSvg')
|
||
// SVG渲染：直接调用JsBarcode，无需清空（会自动替换内容）
|
||
JsBarcode(svg, barcodeValue.value, {
|
||
format: 'CODE128', // 常用的CODE128格式（支持任意字符）
|
||
width: 3,
|
||
height: 80,
|
||
displayValue: false,
|
||
margin: 10 // 条形码四周留白
|
||
})
|
||
}
|
||
onMounted(generateBarcode)
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.qrcode {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.content {
|
||
p {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
|
||
}
|
||
|
||
span {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style> |