唯一码图形对接以及退出登录

pages/uniqueCode/myUniqueCode/QrCodeModal.vue

@@ -0,0 +1,97 @@
+<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>