材料详情打印条形码

assets/js/js_sdk/adapter/BleAdapter.d.ts

@@ -0,0 +1,82 @@
+import { IBleAdapter, JobStartOptions, LPA_AdapterInitOptions, LPA_AuthorizeOptions, LPA_BleDeviceConnectOptions, LPA_BleDiscoveryOptions, LPA_ConnectionStateChangeResult, LPA_Device, LPA_DeviceRequestOptions, LPA_GattCharacteristic, LPA_GattService, LPA_GetCharacteristicsOptions, LPA_GetServicesOptions, LPA_NotifyCharacteristicOptions, LPA_ReadCharacteristicOptions, LPA_ReadResult, LPA_RequestOptions, LPA_Response, LPA_SetMtuOptions, LPA_SetMtuResult, LPA_WriteCharacteristicOptions } from "lpapi-ble";
+import { IUniInitOptions } from "./UniContext";
+type CharacteristicValueChangeListener = (result: UniNamespace.OnBLECharacteristicValueChangeSuccess) => void;
+type BluetoothAdapterStateChangeListener = (result: UniNamespace.OnBluetoothAdapterStateChangeResult) => void;
+export interface IBleAdapter2 {
+    onBLECharacteristicValueChange?: (callback: CharacteristicValueChangeListener) => void;
+    onBluetoothAdapterStateChange?: (callback: BluetoothAdapterStateChangeListener) => void;
+}
+export interface IUniAdapterInitOptions extends IUniInitOptions {
+    bleAdapter?: IBleAdapter2;
+}
+export interface Uni_JobStartOptions extends JobStartOptions {
+    canvasId: string;
+}
+export interface Uni_Base64SaveResult {
+    target: string;
+    width: number;
+    height: number;
+    size: number;
+}
+export interface IConnectionInfo {
+    deviceId: string;
+    connected: boolean;
+    connectStateChange?: (res: LPA_ConnectionStateChangeResult) => void;
+}
+export declare class BleAdapter implements IBleAdapter {
+    private static _instance?;
+    private mConnectionMap;
+    private mContext;
+    private mDeviceInfo?;
+    private mSystemInfo?;
+    private mIsAdapterOpened?;
+    private mShowWriteLog?;
+    private mCharacteristicValueChangeMap?;
+    private mCharacteristicMap;
+    /**
+     * 打印机链接状态变化回调函数。
+     */
+    private mConnectionStateChangeAction?;
+    private mDeviceGetTimer?;
+    /**
+     * 蓝牙适配器状态变化通知回调函数。
+     */
+    private mAdapterStateChange?;
+    private mAdapterStateChangeAction?;
+    static getInstance(): BleAdapter;
+    constructor(options?: IUniAdapterInitOptions);
+    get isH5(): boolean | undefined;
+    get Context(): IUniAdapterInitOptions;
+    get platform(): string;
+    protected isAndroid(): boolean;
+    protected isHarmonyOS(): boolean;
+    getDeviceInfo(): UniApp.GetDeviceInfoResult | undefined;
+    protected androidAPILevel(): number;
+    protected requestPermissions(): Promise<unknown>;
+    /**
+     * 蓝牙授权认证。
+     */
+    authorize(options?: LPA_AuthorizeOptions): Promise<LPA_Response<any>>;
+    createAdapterStateChangeAction(): void;
+    openAdapter(options?: LPA_AdapterInitOptions<any>): Promise<LPA_Response<any>>;
+    private resetAllEventListener;
+    closeAdapter(options?: LPA_RequestOptions<any>): Promise<LPA_Response<any>>;
+    resetAdapter(options?: LPA_RequestOptions<any>): Promise<LPA_Response<any>>;
+    startDiscovery(options?: LPA_BleDiscoveryOptions): Promise<LPA_Response<any>>;
+    stopDiscovery(options?: LPA_RequestOptions<any>): Promise<LPA_Response<any>>;
+    getFoundDevices(options?: LPA_RequestOptions<LPA_Device[]>): Promise<LPA_Response<LPA_Device[]>>;
+    createConnectionStateChangeAction(): void;
+    connect(options: LPA_BleDeviceConnectOptions): Promise<LPA_Response<any>>;
+    private resetCharacteristicValueChange;
+    disconnect(options: LPA_DeviceRequestOptions): Promise<LPA_Response<any>>;
+    getConnectedDevices(options?: LPA_RequestOptions<LPA_Device[]>): Promise<LPA_Response<LPA_Device[]>>;
+    setBleMtu(options: LPA_SetMtuOptions): Promise<LPA_SetMtuResult>;
+    getGATTServices(options: LPA_GetServicesOptions): Promise<LPA_GattService[]>;
+    getGATTCharacteristics(options: LPA_GetCharacteristicsOptions): Promise<LPA_GattCharacteristic[]>;
+    onBLECharacteristicValueChange(characterId: string, callback: CharacteristicValueChangeListener): void;
+    offBLECharacteristicValueChange(cid: string): void;
+    read(options: LPA_ReadCharacteristicOptions): Promise<LPA_ReadResult>;
+    notify(options: LPA_NotifyCharacteristicOptions): Promise<LPA_Response<any>>;
+    write(options: LPA_WriteCharacteristicOptions): Promise<LPA_Response<any>>;
+}
+export {};

assets/js/js_sdk/adapter/UniContext.d.ts

@@ -0,0 +1,48 @@
+import { CreateCanvasOptions, DrawContext, DzImage, ImageLoadOptions, JobStartOptions, JobStartResult, PageEndResult } from "lpapi-ble";
+export interface IUniInitOptions {
+    isWeiXin?: boolean;
+    isAlipay?: boolean;
+    isDingTalk?: boolean;
+    isH5?: boolean;
+    isAppPlus?: boolean;
+}
+export interface IUniCanvasInitOptions extends IUniInitOptions {
+    canvasId?: string;
+    canvas?: HTMLCanvasElement;
+    drawTimeout?: number;
+    componentInstance?: any;
+}
+export interface IUniCanvasContext extends CreateCanvasOptions, IUniCanvasInitOptions {
+    canvasId?: string;
+    canvas?: HTMLCanvasElement;
+    drawTimeout?: number;
+    componentInstance?: any;
+}
+export interface IUniCanvas {
+    width: number;
+    height: number;
+    getContext(contextId: "2d"): UniNamespace.CanvasContext;
+}
+export interface Uni_Base64SaveResult {
+    target: string;
+    width: number;
+    height: number;
+    size: number;
+}
+export declare class UniContext extends DrawContext {
+    static createInstance(options: IUniCanvasContext, prevContext?: DrawContext): UniContext | undefined;
+    static isDingTalk(): boolean;
+    private mOptions;
+    private mCanvas?;
+    constructor(context: IUniCanvasContext);
+    init(options: IUniCanvasContext): void;
+    protected createCanvas(): HTMLCanvasElement;
+    /**
+     * 通过 canvas 来创建 Image 对象。
+     */
+    private createImage;
+    loadImage(options: string | ImageLoadOptions): Promise<HTMLImageElement | DzImage | null>;
+    startJob(options: JobStartOptions): JobStartResult | undefined;
+    protected onCanvasClear(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D): void;
+    commitJob(): Promise<PageEndResult | undefined>;
+}

assets/js/js_sdk/index.d.ts

@@ -0,0 +1,33 @@
+import { DrawContext, DrawItemExtOptions, DrawPageItems, LabelAttachOptions, LabelContext, LabelCreateOptions, LPA_InitOptions, LPA_JsonPrintOption, LPA_Response, LPAPI } from "lpapi-ble";
+import { IUniAdapterInitOptions } from "./adapter/BleAdapter";
+import { IUniCanvasInitOptions } from "./adapter/UniContext";
+export interface InitOptions extends IUniCanvasInitOptions, IUniAdapterInitOptions, LPA_InitOptions {
+}
+export interface InitUniOptions extends InitOptions {
+    callback: (api: LPAPI, res: LPA_Response<any>) => void;
+}
+export declare class LPAPIFactory {
+    private static api?;
+    /**
+     * 获取LPAPI接口实例。
+     */
+    static getInstance(options?: InitOptions): LPAPI;
+    static initApi(options?: InitUniOptions): Promise<LPAPI>;
+    static resetApi(options?: InitOptions): Promise<LPAPI>;
+    static createInstance(options?: InitOptions): LPAPI;
+}
+export interface IUniLabelAttachOptions extends LabelAttachOptions {
+    canvasId?: string;
+}
+export declare class UniPreview extends LabelContext {
+    constructor(options: LabelCreateOptions);
+    protected createDrawContext(options: IUniLabelAttachOptions): DrawContext;
+    attachTo(options: IUniLabelAttachOptions): Promise<boolean>;
+}
+export type DefineConfigFunc<T> = () => T;
+export type DefineConfigOptions<T> = T | DefineConfigFunc<T>;
+export declare function definePrintConfig(options: LPA_JsonPrintOption): LPA_JsonPrintOption;
+export declare function definePrintConfig(callback: () => LPA_JsonPrintOption): () => LPA_JsonPrintOption;
+export declare function definePageConfig(page: DrawPageItems): DrawPageItems;
+export declare function defineDrawConfig(options: DrawItemExtOptions): DrawItemExtOptions;
+export * from "lpapi-ble";

components/barcodePrint.vue

@@ -0,0 +1,673 @@
+<template>
+	<view>
+		<view class="uni-list">
+			<!-- 隐藏画布，用于标签绘制 -->
+			<canvas :id="canvasId" :canvas-id="canvasId" type="2d"
+				:style="{ width: labelWidth + 'px', height: labelHeight + 'px' }"
+				style="position: fixed; left: -999999rpx; top: -999999rpx" />
+			<!-- 打印机列表 -->
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">打印机：</view>
+				<view class="uni-list-cell-db">
+					<picker :value="deviceIndex" :range="deviceList" @change="onDeviceChanged" range-key="name">
+						<view class="uni-input">{{ deviceList[deviceIndex].name }}</view>
+					</picker>
+				</view>
+			</view>
+			<!-- 出纸方向 -->
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">出纸方向：</view>
+				<view class="uni-list-cell-db">
+					<picker :value="rotationIndex" :range="rotationList" @change="onRotationChanged" range-key="name">
+						<view class="uni-input">{{ rotationList[rotationIndex].name }}</view>
+					</picker>
+				</view>
+			</view>
+			<!-- 标签纸类型 -->
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">纸张类型：</view>
+				<view class="uni-list-cell-db">
+					<picker :value="gapIndex" :range="gapList" @change="onGapTypeChanged" range-key="name">
+						<view class="uni-input">{{ gapList[gapIndex].name }}</view>
+					</picker>
+				</view>
+			</view>
+			<!-- 打印浓度 -->
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">打印浓度：</view>
+				<view class="uni-list-cell-db">
+					<picker :value="darknessIndex" :range="darknessList" @change="onDarknessChanged" range-key="name">
+						<view class="uni-input">{{ darknessList[darknessIndex].name }}</view>
+					</picker>
+				</view>
+			</view>
+			<!-- 打印速度 -->
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">打印速度：</view>
+				<view class="uni-list-cell-db">
+					<picker :value="speedIndex" :range="speedList" @change="onPrintSpeedChanged" range-key="name">
+						<view class="uni-input">{{ speedList[speedIndex].name }}</view>
+					</picker>
+				</view>
+			</view>
+			<!-- 图片处理灰度阈值 -->
+			<view class="uni-list-cell">
+				<view class="uni-list-cell-left">灰度阈值：</view>
+				<view class="uni-list-cell-db">
+					<input class="uni-input" type="number" v-model="threshold" />
+				</view>
+			</view>
+			<!-- 打印方式，两种不同的写法 -->
+			<view class="uni-list-cell uni-list-cell-pd">
+				<view class="uni-list-cell-db">JSON配置模式</view>
+				<switch :checked="jsonMode" @change="onPrintModeChanged" style="transform: scale(0.75)" />
+			</view>
+		</view>
+		<view class="button-sp-area">
+			<button class="mini-btn" type="warn" size="mini" plain="true" @click="handleStopDiscovery">停止搜索</button>
+			<button class="mini-btn" type="primary" size="mini" plain="true" @click="handleStartDiscovery">
+				搜索打印机
+			</button>
+		</view>
+		<view class="button-sp-area">
+			<button class="mini-btn" type="warn" size="mini" plain="true" @click="handleClosePrinter">
+				关闭打印机
+			</button>
+			<button class="mini-btn" type="primary" size="mini" plain="true" @click="handleOpenPrinter">
+				打开打印机
+			</button>
+			<button class="mini-btn" type="primary" size="mini" @click="handlePrintLabel">打印</button>
+		</view>
+		<view style="text-align: center; padding: 10px">
+			<view style="margin: 10px; border: solid lightgray 1px">
+				<image v-for="item in previewList" :src="item.value" :key="item.key" class="image" mode="widthFix"
+					style="margin: 10rpx; border: dashed lightgray 1px" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		DrawType,
+		LPAPIFactory,
+		LPAPI
+	} from "../../uni_modules/dothan-lpapi-ble/js_sdk";
+
+	export default {
+		data() {
+			return {
+				canvasId: "lpapi-ble-uni1",
+				labelWidth: 960,
+				labelHeight: 960,
+				deviceList: [{
+					name: "未检测到打印机",
+				}, ],
+				rotationIndex: 0,
+				rotationList: [{
+						name: "横向打印",
+						value: 0
+					},
+					{
+						name: "右转90度",
+						value: 90
+					},
+					{
+						name: "转转180度",
+						value: 180
+					},
+					{
+						name: "左转90度",
+						value: 270
+					},
+				],
+				deviceIndex: 0,
+				gapList: [{
+						name: "随打印机设置",
+						value: 255
+					},
+					{
+						name: "小票纸",
+						value: 0
+					},
+					{
+						name: "不干胶",
+						value: 2
+					},
+					{
+						name: "卡纸",
+						value: 3
+					},
+				],
+				gapIndex: 0,
+				darknessList: [{
+						name: "随打印机设置",
+						value: 255
+					},
+					{
+						name: "6 (正常)",
+						value: 6
+					},
+					{
+						name: "7",
+						value: 7
+					},
+					{
+						name: "8",
+						value: 8
+					},
+					{
+						name: "9",
+						value: 9
+					},
+					{
+						name: "10 (较浓)",
+						value: 10
+					},
+					{
+						name: "11",
+						value: 11
+					},
+					{
+						name: "12",
+						value: 12
+					},
+					{
+						name: "13",
+						value: 13
+					},
+					{
+						name: "14",
+						value: 14
+					},
+					{
+						name: "15 (最浓)",
+						value: 15
+					},
+				],
+				darknessIndex: 0,
+				speedList: [{
+						name: "随打印机设置",
+						value: 255
+					},
+					{
+						name: "最慢",
+						value: 1
+					},
+					{
+						name: "较慢",
+						value: 2
+					},
+					{
+						name: "正常",
+						value: 3
+					},
+					{
+						name: "较快",
+						value: 4
+					},
+					{
+						name: "最快",
+						value: 5
+					},
+				],
+				speedIndex: 0,
+				isAppPlus: false,
+				isWeiXin: false,
+				isAlipay: false,
+				/**
+				 * 图片预览列表
+				 * @type {{value: string; key: string;}[]}
+				 ***/
+				previewList: [],
+				threshold: 128,
+				jsonMode: false,
+				/**
+				 * @type {LPAPI}
+				 */
+				lpapi: undefined,
+			};
+		},
+		onLoad(options) {
+			console.log("========== onLoad  ==========");
+			//option为object类型，会序列化上个页面传递的参数
+			console.log(`---- type = ${options.type}`, options);
+
+			// #ifdef APP-PLUS
+			this.isAppPlus = true;
+			// #endif
+			// #ifdef MP-ALIPAY
+			this.isAlipay = true;
+			// #endif
+			// #ifdef MP-WEIXIN
+			this.isWeiXin = true;
+			// #endif
+			//
+			this.lpapi = LPAPIFactory.getInstance({
+				// 日志信息显示级别，值为 0 - 4，0表示不显示调试信息，4表示显示所有调试信息
+				showLog: 4,
+				// bleAdapter: bleAdapter,
+				// writeExtendWaits: 3,
+				// dataSendMode: 1,
+			});
+			// 搜索蓝牙设备
+			this.lpapi.startDiscovery({
+				timeout: 0,
+				deviceFound: (devices) => {
+					this.onDeviceFound(devices);
+				},
+			});
+			// 微信小程序、支付宝小程序创建绘制上下文的时候，可以不用传递 canvasId，此时会通过离屏Canvas来创建绘制上下文环境。
+			if (this.isWeiXin) {
+				this.context = this.lpapi.createDrawContext();
+			} else {
+				// 备注：支付宝小程序新版本有问题，需要去掉 canvas 中的 type="2d"才可以。
+				this.context = this.lpapi.createDrawContext({
+					// 用于进行标签绘制的画布ID
+					canvasId: this.canvasId,
+				});
+			}
+			//
+			if (this.context) {
+				this.lpapi.setDrawContext(this.context);
+				// 预览标签内容
+				this.handlePreviewLabel();
+			}
+		},
+		onCanvasReady() {
+			console.log("========== onCanvasReady  ==========");
+			console.log(`---- isAlipay: ${this.isAlipay}`);
+			if (this.isAlipay) {
+				// 支付宝小程序中在屏 Canvas的使用的时候，1：配置 type="2d"，2：设置 onReady 事件，在onReady中通过 selectorQuery来获取canvas实例。
+				// this.queryCanvas((canvas) => {
+				//     this.context = this.lpapi.createDrawContext({
+				//         canvas: canvas,
+				//     });
+				//     if (this.context) {
+				//         this.lpapi.setDrawContext(this.context);
+				//     }
+				//     this.handlePreviewLabel();
+				// });
+			}
+		},
+		onShow() {
+			console.log("========== onShow  ==========");
+			// 建议在 onShow的时候，修改下标签的绘制上下文，避免因在context没有更新导致的 canvas不显示的问题。
+			if (this.context) {
+				this.lpapi.setDrawContext(this.context);
+			}
+		},
+		onUnload() {
+			console.log("========== onUnload  ==========");
+			this.handleClosePrinter();
+		},
+		methods: {
+			queryCanvas(callback) {
+				// 微信小程序、支付宝小程序等 最新版本初始化方式
+				// 注意：canvas 中必须配置 type="2d" 才能生效。
+				try {
+					uni.createSelectorQuery()
+						.select(`#${this.canvasId}`)
+						.node()
+						.exec((res) => {
+							console.log(`------- exec.result: --------`);
+							console.log(res);
+							const canvas = res[0]?.node;
+							// this.printCanvas = canvas;
+							callback(canvas);
+						});
+				} catch (e) {
+					console.warn(`---- 不支持通过该方式获取 Canvas 对象！`);
+					console.warn(e);
+					callback(undefined);
+				}
+			},
+			onDeviceChanged(e) {
+				console.log(`---------- onDeviceChanged：${e.detail.value} ----------`);
+				this.deviceIndex = e ? e.detail.value : 0;
+			},
+			onRotationChanged(e) {
+				console.log(`---------- onRotationChanged: ${e.detail.value} ----------`);
+				this.rotationIndex = e ? e.detail.value : 0;
+			},
+			onGapTypeChanged(e) {
+				console.log(`---------- onGapTypeChanged：${e.detail.value} ----------`);
+				this.gapIndex = e ? e.detail.value : 0;
+			},
+			onDarknessChanged(e) {
+				console.log(`---------- onDarknessChanged：${e.detail.value} ----------`);
+				this.darknessIndex = e ? e.detail.value : 0;
+			},
+			onPrintSpeedChanged(e) {
+				console.log(`---------- onPrintSpeedChanged：${e.detail.value} ----------`);
+				this.speedIndex = e ? e.detail.value : 0;
+			},
+			onPrintModeChanged(e) {
+				console.log(`---------- onPrintModeChanged: ${e.detail.value} ----------`);
+				this.jsonMode = e.detail.value;
+				this.handlePreviewLabel();
+			},
+			handleStartDiscovery() {
+				uni.showLoading({
+					title: "正在搜索打印机...",
+				});
+				this.lpapi.startDiscovery({
+					timeout: 5000,
+					deviceFound: (devices) => {
+						this.onDeviceFound(devices);
+					},
+					adapterStateChange: (result) => {
+						if (!result.discovering) {
+							uni.hideLoading();
+						}
+					},
+				});
+			},
+			handleStopDiscovery() {
+				this.lpapi.stopDiscovery();
+			},
+			handleOpenPrinter() {
+				const currDevice = this.getDevice();
+				const isAlipay = this.isAlipay;
+				if (currDevice && currDevice.deviceId) {
+					//
+					uni.showLoading({
+						title: "正在链接打印机...",
+					});
+					return this.lpapi
+						.openPrinter({
+							name: currDevice.name,
+							deviceId: currDevice.deviceId,
+							// 如果打印机链接失败的话，可以尝试连续进行多次链接。
+							tryTimes: isAlipay ? 1 : 5,
+							success: (resp) => {
+								console.log(`---- 【打印机链接成功】`);
+								console.log(resp.resultInfo);
+								uni.hideLoading();
+								//
+								uni.showToast({
+									title: "打印机链接成功！",
+									icon: "success",
+								});
+							},
+							fail: (resp) => {
+								console.warn(`---- 【打印机链接失败】：`);
+								console.warn(JSON.stringify(resp));
+								//
+								uni.hideLoading();
+								//
+								uni.showToast({
+									title: "打印机链接失败！",
+									icon: "fail",
+								});
+							},
+						})
+						.then((res) => {
+							return res.statusCode === 0;
+						});
+				} else {
+					console.warn("---- 未检测到打印机！");
+					uni.showToast({
+						title: "未检测到打印机",
+						icon: "fail",
+					});
+					if (typeof callback === "function") {
+						callback(false);
+					}
+					return false;
+				}
+			},
+			handleClosePrinter() {
+				console.log(`---- 关闭打印机！`);
+				this.lpapi.closePrinter();
+			},
+			onDeviceFound(devices) {
+				console.log(`---- 检测到打印机：`);
+				console.log(devices);
+				if (devices && devices.length > 0) {
+					this.deviceList.splice(0);
+					for (let item of devices) {
+						this.deviceList.push(item);
+						//
+						// const advertisData = item.advertisData ? new Uint8Array(item.advertisData) : undefined;
+						// const advDataStr = advertisData ? LPAUtils.arrayBufferToHex16(advertisData) : "-";
+						// console.log(`---- advertisData [${item.name}] : [${advDataStr}]`);
+					}
+				}
+			},
+			getDevice() {
+				return this.deviceList[this.deviceIndex];
+			},
+			getOrientation() {
+				return this.rotationList[this.rotationIndex].value;
+			},
+			getGapType() {
+				return this.gapList[this.gapIndex].value;
+			},
+			getPrintDarkness() {
+				return this.darknessList[this.darknessIndex].value;
+			},
+			getPrintSpeed() {
+				return this.speedList[this.speedIndex].value;
+			},
+			getThreshold() {
+				return Number(this.threshold);
+			},
+			updateCanvas(jobInfo) {
+				// 如果通过 createSelectorQuery 获取到了 Canvas 实例，则不需要延迟处理；
+				// 在微信小程序、支付宝小程序中是支持该功能的；
+				return new Promise((resolve) => {
+					// 更新canvas大小；
+					if (jobInfo.canvas) {
+						this.labelWidth = jobInfo.canvas.width;
+						this.labelHeight = jobInfo.canvas.height;
+						// 等 Canvas 大小更新后在执行后续绘制操作；
+						setTimeout(() => {
+							resolve(true);
+						}, 100);
+					} else {
+						resolve(true);
+					}
+				});
+			},
+			handlePreviewLabel() {
+				// 1. 先清空当前的图片列表
+				this.previewList.splice(0);
+				// 2. 创建并绘制标签内容
+				this.printLabel(true).then((res) => {
+					console.warn(`----- previewLabel.result: ${res.statusCode}`, res.errMsg);
+					// 3. 标签绘制完毕后，预览标签内容
+					if (res.statusCode === 0) {
+						console.warn(`---- 所有页面全部生成完毕！`);
+						res.previewData.forEach((value) => {
+							this.previewList.push({
+								value: value,
+								// 为了保证 v-for循环的唯一性，随便生成一个随机ID
+								key: `${new Date().getTime()}-${Math.random() * 1000}`,
+							});
+						});
+					} else {
+						console.warn(`---- 标签预览失败！`, res);
+					}
+				});
+			},
+			async handlePrintLabel() {
+				// 1. 连接打印机
+				const openResult = await this.handleOpenPrinter();
+				if (!openResult) {
+					uni.showToast({
+						title: "打印机连接失败！",
+						icon: "success",
+					});
+					return;
+				}
+				// 2. 创建标签后直接打印
+				this.printLabel(false).then((res) => {
+					if (res.statusCode === 0) {
+						uni.showToast({
+							title: "打印成功！",
+							icon: "success",
+						});
+					} else {
+						console.warn(`---- 打印失败！`);
+						if (res.errMsg) {
+							uni.showToast({
+								title: res.errMsg,
+								icon: "error",
+							});
+						}
+					}
+				});
+			},
+			printLabel(isPreview) {
+				if (this.jsonMode) {
+					return this.printLabelWithJsonMode(isPreview);
+				} else {
+					return this.printLabelWithDrawMode(isPreview);
+				}
+			},
+			/**
+			 * 通过 draw 的方式绘制标签内容。
+			 */
+			async printLabelWithDrawMode(isPreview) {
+				console.log(`---- qrcodePrintWithDrawMode:`);
+				const api = this.lpapi;
+				//
+				const labelWidth = 40;
+				const labelHeight = 30;
+				const margin = 2;
+				//
+				const jobInfo = api.startJob({
+					context: this.context,
+					width: labelWidth,
+					height: labelHeight,
+					orientation: this.getOrientation(),
+					isPreview: isPreview,
+				});
+				//
+				await this.updateCanvas(jobInfo);
+				// 绘制外边框
+				api.drawRectangle({
+					width: labelWidth,
+					height: labelHeight,
+				});
+				api.draw1DBarcode({
+					text: "12345678",
+					x: margin,
+					y: margin,
+					width: labelWidth - margin * 2,
+					height: labelHeight - margin * 2,
+					textHeight: 5,
+					barcodeType: 22,
+				});
+				//
+				return api.commitJob({
+					gapType: this.getGapType(),
+					printDarkness: this.getPrintDarkness(),
+					printSpeed: this.getPrintSpeed(),
+				});
+			},
+			/**
+			 * 通过 JSON 方式绘制标签内容。
+			 */
+			printLabelWithJsonMode(isPreview) {
+				console.log(`---- qrcodePrintWithJsonMode:`);
+				const device = this.getDevice();
+				const labelWidth = 40;
+				const labelHeight = 30;
+				const margin = 2;
+				//
+				return this.lpapi.print({
+					// 配置标签信息
+					jobInfo: {
+						jobWidth: labelWidth,
+						jobHeight: labelHeight,
+						orientation: this.getOrientation(),
+						isPreview: isPreview, // 当前任务是否是预览任务
+					},
+					// 配置打印机信息
+					printerInfo: {
+						name: device?.name,
+						deviceId: device?.deviceId,
+					},
+					jobPage: [{
+							type: DrawType.rect,
+							width: labelWidth,
+							height: labelHeight,
+						},
+						{
+							type: DrawType.barcode,
+							text: "12345678",
+							x: margin,
+							y: margin,
+							width: labelWidth - margin * 2,
+							height: labelHeight - margin * 2,
+							textHeight: 5,
+							barcodeType: 22,
+						},
+					],
+					onJobCreated: (jobInfo) => {
+						// 通过双向绑定方式更新画布大小
+						return this.updateCanvas(jobInfo);
+					},
+					onPageComplete(res) {
+						// 标签页面渲染完毕时的回调函数，预览模式下可展示标签打印效果。
+					},
+					onPagePrintComplete(res) {
+						// 标签页面打印完毕时的回调函数。
+					},
+				});
+			},
+		},
+	};
+</script>
+
+<style>
+	button {
+		margin-top: 15upx;
+		margin-bottom: 15upx;
+		height: 40px;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.logo {
+		height: 200rpx;
+		width: 200rpx;
+		margin: 200rpx auto 50rpx auto;
+	}
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+	}
+
+	button {
+		margin-top: 30rpx;
+		margin-bottom: 30rpx;
+	}
+
+	.button-sp-area {
+		margin: 0 auto;
+		width: 90%;
+		display: flex;
+	}
+
+	.mini-btn {
+		flex: 1;
+		margin-right: 10rpx;
+		height: 40px;
+		line-height: 40px;
+		font-size: 18px;
+	}
+</style>

main.js

@@ -1,3 +1,25 @@
+// atob polyfill for WeChat mini programs (required by bwip-js for font/base64 decoding)
+(function() {
+	var _chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+	var _atob = function(input) {
+		var str = String(input).replace(/[=]+$/, '')
+		var output = ''
+		var bc = 0, bs, buffer = 0, i = 0
+		for (; str.charAt(i | 0); i++) {
+			bs = _chars.indexOf(str.charAt(i))
+			buffer = (buffer << 6) | bs
+			bc += 6
+			if (bc >= 8) {
+				bc -= 8
+				output += String.fromCharCode((buffer >>> bc) & 255)
+			}
+		}
+		return output
+	}
+	try { globalThis.atob = globalThis.atob || _atob } catch(e) {}
+	try { global.atob = global.atob || _atob } catch(e) {}
+})()
+
 import App from './App'
 
 // #ifndef VUE3

package-lock.json

@@ -1,5 +1,5 @@
 {
-	"name": "SHJ_APP - 副本",
+	"name": "SHJ_APP",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {

package.json

@@ -11,8 +11,5 @@
 		"uview-pro": "^0.6.2",
 		"vite": "^8.0.16",
 		"vue": "^3.5.38"
-	},
-	"devDependencies": {
-		"sharp": "^0.35.1"
 	}
 }

pages.json

@@ -2,6 +2,7 @@
 	"easycom": {
 		"autoscan": true,
 		"custom": {
+			"^nbd-print-prop$": "@/scanpages/components/nbd-print-prop.vue",
 			"^u-(.*)": "uview-pro/components/u-$1/u-$1.vue",
 			"^nbd-(.*)": "@/components/nbd-$1.vue"
 		}

pnpm-lock.yaml

@@ -41,10 +41,6 @@ importers:
       vue:
         specifier: ^3.5.38
         version: 3.5.38
-    devDependencies:
-      sharp:
-        specifier: ^0.35.1
-        version: 0.35.1
 
 packages:
 
@@ -102,174 +98,9 @@ packages:
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
-  '@emnapi/runtime@1.11.1':
-    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
-
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
-  '@img/colour@1.1.0':
-    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
-    engines: {node: '>=18'}
-
-  '@img/sharp-darwin-arm64@0.35.1':
-    resolution: {integrity: sha512-T15JRWOubQ3f5+GxnWeIvo47u5qV0M9HBgJhT+f2gE1e9e6OhR6K73Re52Hm80qWcu1DNb3GweKmpr/MnuP2Ow==}
-    engines: {node: '>=20.9.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@img/sharp-darwin-x64@0.35.1':
-    resolution: {integrity: sha512-t1CPD0cr7XCHjwUj6tQ5MC0pCi866I+gUW6zbUX4aFPnKd1DFBtk0M+gWcjX8VeEzgfCNiSiNTVFZ6b7kvdbnQ==}
-    engines: {node: '>=20.9.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@img/sharp-freebsd-wasm32@0.35.1':
-    resolution: {integrity: sha512-MBSQXqNPThW9EcZ905H6N4sEdX5EwZEYzGx5EBq9ncDCGJALMiY1xPFJxNdzuB1iBjLOpIfxajM6YxdvwmQSLA==}
-    engines: {node: '>=20.9.0'}
-    os: [freebsd]
-
-  '@img/sharp-libvips-darwin-arm64@1.3.0':
-    resolution: {integrity: sha512-EKbmBKtyTH+GPFDRw2TgK2oV6hyxxlJVIar4hoTYSNmIwipgMFdxPQqR392GmfdsPGWga0mCFN1cCKjRb9cljw==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@img/sharp-libvips-darwin-x64@1.3.0':
-    resolution: {integrity: sha512-Pl2OmOvrJ42adUllESxBsG54PfXLo1OYg9i3c5/5Ln/qJ0gZuTM9YMhQJPIbXqwidLRc/c2zuHt4RsrymmNv7A==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@img/sharp-libvips-linux-arm64@1.3.0':
-    resolution: {integrity: sha512-C0SqjoFKnszqa44EQ7xoaT48nnO0lOyXEULfXMWi8krrjOPGYkeK30Okzla6ATbBYsyZ0ySinK0FVkpv3DwzfQ==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-arm@1.3.0':
-    resolution: {integrity: sha512-A8UpHoUDW4DwnXoV6+q3C1s7QLRAHtPDEjWuNZjwHMyoCNZnm0GeNN8ls9f/bsEYTRQRW96C/n34XJQHJ2fT7A==}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-ppc64@1.3.0':
-    resolution: {integrity: sha512-WOpkVxAjFd369iaIzEgNRreFD+gWdUMIGD5zplhNKNeqS6mm5dac3q2AFyCBmzYoAdouzZvRBgxy4z8QHZb4/A==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-riscv64@1.3.0':
-    resolution: {integrity: sha512-DRWw0mOHusrCCuw2rqP87oLg6PGlkomVDFqw2hIwsSfwWpu4k3XLcBPaKKl6ct/GtL/cwNkgwjV/tc0Mqht3VA==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-s390x@1.3.0':
-    resolution: {integrity: sha512-9APy+nFWhHS+kzLgWZfLcyrUd7YqnAQVa4BPOo4xkoHpdoktOAPG4cEr9+Jpl0TtqfVmcMJimNL5qNTyyOHZNA==}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-x64@1.3.0':
-    resolution: {integrity: sha512-y9RNUYDe2A1UAdhLyfeOodGRszQdaEoe4nfOpp/sNVPl2CWIcUyFaDoCh4vPLPxu19803j2naLqZup2WxDXCLA==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linuxmusl-arm64@1.3.0':
-    resolution: {integrity: sha512-cC1wkC0Mlucd0KSiGrLkJnB/ZqPvZCntc/Lk7ZnYO5ZSbF2euNek4Xvxafojq+wN1q/W0eprdpUIjUr/EV2PBg==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-libvips-linuxmusl-x64@1.3.0':
-    resolution: {integrity: sha512-LiYMhUZicB1QG//+RvmYZpXJO8fYRENfp+MZUCnG9aw+AKvGAy9gPaCnuwsPcBFs8EV66M0NNxj9VHcNklE8zw==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-linux-arm64@0.35.1':
-    resolution: {integrity: sha512-ErCRyGU7LeoaFBZ0xW8hhLlXzhAg80sc4vxePB86qvtEvW1jEhhmbiNBP4oEzZfPMnu6HwHXfzD2W2kBU+RnCw==}
-    engines: {node: '>=20.9.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-arm@0.35.1':
-    resolution: {integrity: sha512-jygmR02PpCYypt7xB7nst1vqjZp/BpRA/Kf9nK7qRponJ/KrLPaZWEG4G15z1d2FZ6XqI+T0350ha3RSnKx24A==}
-    engines: {node: '>=20.9.0'}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-ppc64@0.35.1':
-    resolution: {integrity: sha512-LUWZ2+r2UoLCd8j0RLCwQ4gL6w47+Y7igxtVnPIDXOOEjV86LpBkAHq5VpJeg+GHbw0KN/JWlPJOdZjyZnFqFQ==}
-    engines: {node: '>=20.9.0'}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-riscv64@0.35.1':
-    resolution: {integrity: sha512-i7x6J3mwF4JgT0sM4V4WlAWdJ0bucPtA9rzO1bTji1n5qgBq/W5nn87RvOQPleuuxahNoLdTngByD8/vDDLArw==}
-    engines: {node: '>=20.9.0'}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-s390x@0.35.1':
-    resolution: {integrity: sha512-0zSaTUjTF0kIWTSYxD4EG/nvCU4jez53+3RdURtoY3HvbXtIQ98W90JnrGz/oLRFuEnfIy9+7xeq883euc0ZWw==}
-    engines: {node: '>=20.9.0'}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-x64@0.35.1':
-    resolution: {integrity: sha512-NbJD4mWdeyrNQKluO/tR/wBDOelcowSVGNBWxI0e3ZtlXc6F/UOVKDj1MLD4zl3oHTuvKW3s+MA9N54YTldAYw==}
-    engines: {node: '>=20.9.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linuxmusl-arm64@0.35.1':
-    resolution: {integrity: sha512-VoW2sQCWI+0YIKQEmWJ8vzaQjTg9wIyfkFpvEfAS2h43X6iHu7GTk1hhOgB4IpSzCHe8UwQZIcx7b81VTaOrJA==}
-    engines: {node: '>=20.9.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-linuxmusl-x64@0.35.1':
-    resolution: {integrity: sha512-LjBoSd/c5JU0/K5MwzDMlgsSRP2bPn98JQGFFQAOLQ0bU/1z4ekxUdSKY9BmlwSh/cA+OrvpgsWqfZyYfVHBRw==}
-    engines: {node: '>=20.9.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-wasm32@0.35.1':
-    resolution: {integrity: sha512-PCQUoQdZyE8tp3HpbevuihfUmgSP4qWI0FGEPWoeXqaS+cUrFfemabHQiebUmUmlUhCuNnQMxGrQ+CPqK4hnxg==}
-    engines: {node: '>=20.9.0'}
-
-  '@img/sharp-webcontainers-wasm32@0.35.1':
-    resolution: {integrity: sha512-xU2ml2bU2OPxYVvW2A6ae4M1g5QKyhKG06P4FAt+YEaFQQO0919Qx+XxIZEUuWTMoDViLpMws2/dQwoe/VcA6A==}
-    engines: {node: '>=20.9.0'}
-    cpu: [wasm32]
-
-  '@img/sharp-win32-arm64@0.35.1':
-    resolution: {integrity: sha512-IkmHwuFhYpd3bTsN5SAahjwhiAcyXPooBt8vEUgxY3T0IP70sSJ0nU1xiPzZY8AH/OB1XpV3j8aZSVSOSfTbdA==}
-    engines: {node: '>=20.9.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@img/sharp-win32-ia32@0.35.1':
-    resolution: {integrity: sha512-wQahqCi9MD8Yxzg4gVM4fNrZxh+r6vD55PyIg+WJPaM5ZRUyF35iQpwJCuma3r6viU9/8Pxlc+XHV+woVa6nCQ==}
-    engines: {node: ^20.9.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@img/sharp-win32-x64@0.35.1':
-    resolution: {integrity: sha512-WzBtkYtZHATLPe8XRharxZXxQ9cdLrQWHiwxt+BJ5rBsisQrKeeV86ErxPSVhcG6xCEuNhs0SqLpWr7XDa2k6w==}
-    engines: {node: '>=20.9.0'}
-    cpu: [x64]
-    os: [win32]
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
@@ -1130,11 +961,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  semver@7.8.4:
-    resolution: {integrity: sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   send@0.19.2:
     resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
     engines: {node: '>= 0.8.0'}
@@ -1146,10 +972,6 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
-  sharp@0.35.1:
-    resolution: {integrity: sha512-lW979AMi+ESidzMv/Lnv+F9bknzLyxLqFI05Sm433vOeRcltgxQmXpnfOOFIAlKtwXU/ksupm2srQoFCkR214g==}
-    engines: {node: '>=20.9.0'}
-
   side-channel-list@1.0.1:
     resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
     engines: {node: '>= 0.4'}
@@ -1403,122 +1225,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.11.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@img/colour@1.1.0': {}
-
-  '@img/sharp-darwin-arm64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.3.0
-    optional: true
-
-  '@img/sharp-darwin-x64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.3.0
-    optional: true
-
-  '@img/sharp-freebsd-wasm32@0.35.1':
-    dependencies:
-      '@img/sharp-wasm32': 0.35.1
-    optional: true
-
-  '@img/sharp-libvips-darwin-arm64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-darwin-x64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linux-arm64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linux-arm@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linux-ppc64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linux-riscv64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linux-s390x@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linux-x64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linuxmusl-arm64@1.3.0':
-    optional: true
-
-  '@img/sharp-libvips-linuxmusl-x64@1.3.0':
-    optional: true
-
-  '@img/sharp-linux-arm64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.3.0
-    optional: true
-
-  '@img/sharp-linux-arm@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.3.0
-    optional: true
-
-  '@img/sharp-linux-ppc64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.3.0
-    optional: true
-
-  '@img/sharp-linux-riscv64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.3.0
-    optional: true
-
-  '@img/sharp-linux-s390x@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.3.0
-    optional: true
-
-  '@img/sharp-linux-x64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.3.0
-    optional: true
-
-  '@img/sharp-linuxmusl-arm64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.3.0
-    optional: true
-
-  '@img/sharp-linuxmusl-x64@0.35.1':
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.3.0
-    optional: true
-
-  '@img/sharp-wasm32@0.35.1':
-    dependencies:
-      '@emnapi/runtime': 1.11.1
-    optional: true
-
-  '@img/sharp-webcontainers-wasm32@0.35.1':
-    dependencies:
-      '@img/sharp-wasm32': 0.35.1
-    optional: true
-
-  '@img/sharp-win32-arm64@0.35.1':
-    optional: true
-
-  '@img/sharp-win32-ia32@0.35.1':
-    optional: true
-
-  '@img/sharp-win32-x64@0.35.1':
-    optional: true
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@messageformat/core@3.4.0':
@@ -2324,8 +2035,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  semver@7.8.4: {}
-
   send@0.19.2:
     dependencies:
       debug: 2.6.9
@@ -2355,38 +2064,6 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
-  sharp@0.35.1:
-    dependencies:
-      '@img/colour': 1.1.0
-      detect-libc: 2.1.2
-      semver: 7.8.4
-    optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.35.1
-      '@img/sharp-darwin-x64': 0.35.1
-      '@img/sharp-freebsd-wasm32': 0.35.1
-      '@img/sharp-libvips-darwin-arm64': 1.3.0
-      '@img/sharp-libvips-darwin-x64': 1.3.0
-      '@img/sharp-libvips-linux-arm': 1.3.0
-      '@img/sharp-libvips-linux-arm64': 1.3.0
-      '@img/sharp-libvips-linux-ppc64': 1.3.0
-      '@img/sharp-libvips-linux-riscv64': 1.3.0
-      '@img/sharp-libvips-linux-s390x': 1.3.0
-      '@img/sharp-libvips-linux-x64': 1.3.0
-      '@img/sharp-libvips-linuxmusl-arm64': 1.3.0
-      '@img/sharp-libvips-linuxmusl-x64': 1.3.0
-      '@img/sharp-linux-arm': 0.35.1
-      '@img/sharp-linux-arm64': 0.35.1
-      '@img/sharp-linux-ppc64': 0.35.1
-      '@img/sharp-linux-riscv64': 0.35.1
-      '@img/sharp-linux-s390x': 0.35.1
-      '@img/sharp-linux-x64': 0.35.1
-      '@img/sharp-linuxmusl-arm64': 0.35.1
-      '@img/sharp-linuxmusl-x64': 0.35.1
-      '@img/sharp-webcontainers-wasm32': 0.35.1
-      '@img/sharp-win32-arm64': 0.35.1
-      '@img/sharp-win32-ia32': 0.35.1
-      '@img/sharp-win32-x64': 0.35.1
-
   side-channel-list@1.0.1:
     dependencies:
       es-errors: 1.3.0

scanpages/components/nbd-print-prop.vue

@@ -0,0 +1,698 @@
+<template>
+	<view>
+		<u-popup v-model="localVisible" mode="bottom" :height="height" :closeable="true" @close="handleClose">
+			<view class="print-popup">
+				<!-- 标题栏 -->
+				<view class="print-popup__header">
+					<text class="print-popup__title">标签打印</text>
+				</view>
+
+				<!-- 隐藏画布，用于标签绘制 -->
+				<canvas
+					:id="canvasId"
+					:canvas-id="canvasId"
+					type="2d"
+					:style="canvasStyles"
+				/>
+
+				<scroll-view scroll-y="true" class="print-popup__body">
+					<!-- 预览区域 -->
+					<view class="preview-section" v-if="previewList.length > 0">
+						<text class="preview-section__title">打印预览</text>
+						<view class="preview-section__list">
+							<image
+								v-for="item in previewList"
+								:src="item.value"
+								:key="item.key"
+								class="preview-img"
+								mode="widthFix"
+							/>
+						</view>
+					</view>
+
+					<!-- 打印机选择 -->
+					<view class="setting-row">
+						<text class="setting-row__label">打印机</text>
+						<view class="setting-row__right">
+							<picker :value="deviceIndex" :range="deviceList" @change="onDeviceChanged" range-key="name">
+								<view class="setting-row__picker">
+									<text
+										class="setting-row__value"
+										:class="{ 'setting-row__value--empty': !deviceList[deviceIndex]?.deviceId }"
+									>
+										{{ deviceList[deviceIndex]?.name || '未检测到打印机' }}
+									</text>
+									<u-icon name="arrow-down" :size="24" color="#999" />
+								</view>
+							</picker>
+						</view>
+					</view>
+
+					<!-- 出纸方向 -->
+					<view class="setting-row">
+						<text class="setting-row__label">出纸方向</text>
+						<view class="setting-row__right">
+							<picker :value="rotationIndex" :range="rotationList" @change="onRotationChanged" range-key="name">
+								<view class="setting-row__picker">
+									<text class="setting-row__value">{{ rotationList[rotationIndex]?.name || '' }}</text>
+									<u-icon name="arrow-down" :size="24" color="#999" />
+								</view>
+							</picker>
+						</view>
+					</view>
+
+					<!-- 纸张类型 -->
+					<view class="setting-row">
+						<text class="setting-row__label">纸张类型</text>
+						<view class="setting-row__right">
+							<picker :value="gapIndex" :range="gapList" @change="onGapTypeChanged" range-key="name">
+								<view class="setting-row__picker">
+									<text class="setting-row__value">{{ gapList[gapIndex]?.name || '' }}</text>
+									<u-icon name="arrow-down" :size="24" color="#999" />
+								</view>
+							</picker>
+						</view>
+					</view>
+
+					<!-- 打印浓度 -->
+					<view class="setting-row">
+						<text class="setting-row__label">打印浓度</text>
+						<view class="setting-row__right">
+							<picker :value="darknessIndex" :range="darknessList" @change="onDarknessChanged" range-key="name">
+								<view class="setting-row__picker">
+									<text class="setting-row__value">{{ darknessList[darknessIndex]?.name || '' }}</text>
+									<u-icon name="arrow-down" :size="24" color="#999" />
+								</view>
+							</picker>
+						</view>
+					</view>
+
+					<!-- 打印速度 -->
+					<view class="setting-row">
+						<text class="setting-row__label">打印速度</text>
+						<view class="setting-row__right">
+							<picker :value="speedIndex" :range="speedList" @change="onPrintSpeedChanged" range-key="name">
+								<view class="setting-row__picker">
+									<text class="setting-row__value">{{ speedList[speedIndex]?.name || '' }}</text>
+									<u-icon name="arrow-down" :size="24" color="#999" />
+								</view>
+							</picker>
+						</view>
+					</view>
+
+					<!-- 灰度阈值 -->
+					<view class="setting-row">
+						<text class="setting-row__label">灰度阈值</text>
+						<view class="setting-row__right">
+							<input class="setting-row__input" type="number" v-model="threshold" />
+						</view>
+					</view>
+
+					<!-- JSON配置模式 -->
+					<view class="setting-row">
+						<text class="setting-row__label">JSON配置</text>
+						<view class="setting-row__right">
+							<switch :checked="jsonMode" @change="onPrintModeChanged" style="transform: scale(0.75)" />
+						</view>
+					</view>
+				</scroll-view>
+
+				<!-- 底部操作按钮 -->
+				<view class="print-popup__footer">
+					<view class="footer-grid">
+						<view class="footer-btn" @click="handleStartDiscovery">
+							<u-icon name="search" :size="30" color="#2979ff" />
+							<text>搜索打印机</text>
+						</view>
+						<view class="footer-btn" @click="handleStopDiscovery">
+							<u-icon name="close-circle" :size="30" color="#f56c6c" />
+							<text>停止搜索</text>
+						</view>
+						<view class="footer-btn" @click="handleOpenPrinter">
+							<u-icon name="link" :size="30" color="#2979ff" />
+							<text>连接打印机</text>
+						</view>
+						<view class="footer-btn" @click="handleClosePrinter">
+							<u-icon name="minus-circle" :size="30" color="#f56c6c" />
+							<text>断开连接</text>
+						</view>
+						<view class="footer-btn footer-btn--print" @click="handlePrintLabel">
+							<u-icon v-if="!printing" name="printer" :size="30" color="#fff" />
+							<u-icon v-else name="reload" :size="30" color="#fff" class="spinning" />
+							<text>{{ printing ? '打印中...' : '打印' }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script setup>
+	import { ref, watch, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+	import {
+		DrawType,
+		LPAPIFactory
+	} from '@/assets/js/js_sdk'
+	import '@/utils/bwipjs-polyfill.js'
+	import bwipjs from '@/scanpages/assets/bwip-js/bwip-js.mjs'
+
+	// ===== Props =====
+	const props = defineProps({
+		modelValue: { type: Boolean, default: false },
+		height: { type: String, default: '85%' },
+		labelWidth: { type: Number, default: 50 },
+		labelHeight: { type: Number, default: 30 },
+		margin: { type: Number, default: 2 },
+		barcodeText: { type: String, default: '12345678' },
+		barcodeTopText: { type: String, default: '' },
+		barcodeBottomText: { type: String, default: '' }
+	})
+
+	const emit = defineEmits(['update:modelValue', 'close', 'printed', 'error'])
+
+	const instance = getCurrentInstance()
+
+	// ===== 响应式数据 =====
+	const canvasId = 'lpapi-ble-popup'
+	const labelW = ref(960)
+	const labelH = ref(960)
+	const canvasStyles = ref({})
+	const localVisible = ref(false)
+	const deviceList = ref([{ name: '未检测到打印机' }])
+	const deviceIndex = ref(0)
+	const rotationIndex = ref(1)
+	const rotationList = [
+		{ name: '横向打印', value: 0 },
+		{ name: '右转90度', value: 90 },
+		{ name: '转转180度', value: 180 },
+		{ name: '左转90度', value: 270 }
+	]
+	const gapList = [
+		{ name: '随打印机设置', value: 255 },
+		{ name: '小票纸', value: 0 },
+		{ name: '不干胶', value: 2 },
+		{ name: '卡纸', value: 3 }
+	]
+	const gapIndex = ref(0)
+	const darknessList = [
+		{ name: '随打印机设置', value: 255 },
+		{ name: '6 (正常)', value: 6 },
+		{ name: '7', value: 7 },
+		{ name: '8', value: 8 },
+		{ name: '9', value: 9 },
+		{ name: '10 (较浓)', value: 10 },
+		{ name: '11', value: 11 },
+		{ name: '12', value: 12 },
+		{ name: '13', value: 13 },
+		{ name: '14', value: 14 },
+		{ name: '15 (最浓)', value: 15 }
+	]
+	const darknessIndex = ref(0)
+	const speedList = [
+		{ name: '随打印机设置', value: 255 },
+		{ name: '最慢', value: 1 },
+		{ name: '较慢', value: 2 },
+		{ name: '正常', value: 3 },
+		{ name: '较快', value: 4 },
+		{ name: '最快', value: 5 }
+	]
+	const speedIndex = ref(0)
+	const threshold = ref(128)
+	const jsonMode = ref(false)
+	const printing = ref(false)
+	const isWeiXin = ref(false)
+	const isAlipay = ref(false)
+	const lpapi = ref(undefined)
+	const context = ref(undefined)
+	const previewList = ref([])
+
+	// ===== 取值辅助 =====
+	const getDevice = () => {
+		return deviceList.value[deviceIndex.value]
+	}
+	const getOrientation = () => {
+		return rotationList[rotationIndex.value]?.value || 0
+	}
+	const getGapType = () => {
+		return gapList[gapIndex.value]?.value || 255
+	}
+	const getPrintDarkness = () => {
+		return darknessList[darknessIndex.value]?.value || 255
+	}
+	const getPrintSpeed = () => {
+		return speedList[speedIndex.value]?.value || 255
+	}
+	const getThreshold = () => {
+		return Number(threshold.value)
+	}
+
+	// ===== Canvas 样式 =====
+	const updateCanvasStyle = () => {
+		var pos = { position: 'absolute' }
+		if (isWeiXin.value) {
+			pos.left = '-999999rpx'
+			pos.top = '-999999rpx'
+			pos.opacity = '0'
+			pos.pointerEvents = 'none'
+			pos.zIndex = '-1'
+		} else {
+			pos.left = '-999999rpx'
+			pos.top = '-999999rpx'
+		}
+		canvasStyles.value = Object.assign(
+			{ width: labelW.value + 'px', height: labelH.value + 'px' },
+			pos
+		)
+	}
+
+	// ===== Canvas 更新 =====
+	const updateCanvas = (jobInfo) => {
+		return new Promise((resolve) => {
+			if (jobInfo && jobInfo.canvas) {
+				labelW.value = jobInfo.canvas.width
+				labelH.value = jobInfo.canvas.height
+				updateCanvasStyle()
+			}
+			setTimeout(() => resolve(true), 100)
+		})
+	}
+
+	// ===== PDF417 条码生成（使用 bwip-js）=====
+	const _renderBwipjs = (canvas, opts) => {
+		try {
+			bwipjs.toCanvas(canvas, opts)
+		} catch (e) {
+			if (typeof canvas.getContext === 'function') {
+				var proto = Object.getPrototypeOf(canvas)
+				var ctorName = proto && proto.constructor && proto.constructor.name
+				if (ctorName && !(/HTMLCanvasElement|OffscreenCanvas/).test(ctorName)) {
+					try {
+						Object.defineProperty(proto.constructor, 'name', { configurable: true, value: 'HTMLCanvasElement' })
+						bwipjs.toCanvas(canvas, opts)
+						Object.defineProperty(proto.constructor, 'name', { configurable: true, value: ctorName })
+						return
+					} catch (e2) {}
+				}
+			}
+			throw e
+		}
+	}
+
+	const generateBarcodeImage = (text, widthMM, heightMM) => {
+		return new Promise((resolve, reject) => {
+			var dpi = 203
+			var pxPerMM = dpi / 25.4
+			var tw = Math.round(widthMM * pxPerMM)
+			var th = Math.round(heightMM * pxPerMM)
+
+			var baseScale = Math.max(3, Math.floor(tw / 60))
+			var bwipOpts = {
+				bcid: 'pdf417',
+				text: text,
+				scale: baseScale,
+				includetext: false,
+				padding: 0
+			}
+
+			nextTick(() => {
+				var query = uni.createSelectorQuery().in(instance)
+				query.select('#' + canvasId).node().exec((res) => {
+					try {
+						if (!res || !res[0] || !res[0].node) {
+							return reject(new Error('canvas 未找到'))
+						}
+						var canvas = res[0].node
+						_renderBwipjs(canvas, bwipOpts)
+						console.log('bwip-js PDF417:', { w: canvas.width, h: canvas.height, tw: tw, th: th })
+
+						uni.canvasToTempFilePath({
+							canvas: canvas,
+							x: 0, y: 0,
+							width: canvas.width,
+							height: canvas.height,
+							success: (t) => {
+								if (isWeiXin.value) {
+									var img = canvas.createImage()
+									img.src = t.tempFilePath
+									img.onload = () => { resolve(img) }
+									img.onerror = (e) => { reject(e) }
+								} else {
+									resolve(t.tempFilePath)
+								}
+							},
+							fail: (e) => { reject(e) }
+						})
+					} catch (e) { reject(e) }
+				})
+			})
+		})
+	}
+
+	// ===== 标签绘制（总入口） =====
+	const printLabel = (isPreview) => {
+		if (jsonMode.value) {
+			return printLabelWithJsonMode(isPreview)
+		} else {
+			return printLabelWithDrawMode(isPreview)
+		}
+	}
+
+	const printLabelWithDrawMode = async (isPreview) => {
+		var api = lpapi.value
+		var lW = props.labelWidth
+		var lH = props.labelHeight
+		var m = props.margin
+		var uW = lW - m * 2
+
+		var jobInfo = api.startJob({
+			context: context.value,
+			width: lW,
+			height: lH,
+			orientation: getOrientation(),
+			isPreview: isPreview
+		})
+		await updateCanvas(jobInfo)
+
+		if (props.barcodeTopText) {
+			api.drawText({
+				text: props.barcodeTopText,
+				x: m,
+				y: m,
+				width: uW,
+				height: 5,
+				fontHeight: 4,
+				horizontalAlignment: 1
+			})
+		}
+
+		var barcodeY = m + (props.barcodeTopText ? 7 : 0)
+		var barcodeH = lH - m * 2 - (props.barcodeTopText ? 7 : 0) - (props.barcodeBottomText ? 7 : 0)
+		try {
+			var img = await generateBarcodeImage(props.barcodeText, uW, barcodeH)
+			api.drawImage({ img: img, x: m, y: barcodeY, width: uW, height: barcodeH })
+		} catch (e) {
+			console.error('PDF417 绘制失败:', e)
+		}
+
+		if (props.barcodeBottomText) {
+			var by = lH - m - 5
+			api.drawText({
+				text: props.barcodeBottomText,
+				x: m,
+				y: by,
+				width: uW,
+				height: 5,
+				fontHeight: 3.5,
+				horizontalAlignment: 1
+			})
+		}
+
+		return api.commitJob({
+			gapType: getGapType(),
+			printDarkness: getPrintDarkness(),
+			printSpeed: getPrintSpeed()
+		})
+	}
+
+	const printLabelWithJsonMode = (isPreview) => {
+		var device = getDevice()
+		var lW = props.labelWidth
+		var lH = props.labelHeight
+		var m = props.margin
+		var uW = lW - m * 2
+
+		var jobPage = []
+
+		if (props.barcodeTopText) {
+			jobPage.push({
+				type: DrawType.text,
+				text: props.barcodeTopText,
+				x: m,
+				y: m,
+				width: uW,
+				height: 5,
+				fontHeight: 4,
+				horizontalAlignment: 1
+			})
+		}
+
+		var barcodeY = m + (props.barcodeTopText ? 7 : 0)
+		var barcodeH = lH - m * 2 - (props.barcodeTopText ? 7 : 0) - (props.barcodeBottomText ? 7 : 0)
+		return generateBarcodeImage(props.barcodeText, uW, barcodeH).then((img) => {
+			jobPage.push({
+				type: DrawType.image,
+				img: img,
+				x: m,
+				y: barcodeY,
+				width: uW,
+				height: barcodeH
+			})
+
+			if (props.barcodeBottomText) {
+				jobPage.push({
+					type: DrawType.text,
+					text: props.barcodeBottomText,
+					x: m,
+					y: lH - m - 5,
+					width: uW,
+					height: 5,
+					fontHeight: 3.5,
+					horizontalAlignment: 1
+				})
+			}
+
+			return lpapi.value.print({
+				jobInfo: {
+					jobWidth: lW,
+					jobHeight: lH,
+					orientation: getOrientation(),
+					isPreview: isPreview
+				},
+				printerInfo: {
+					name: device ? device.name : undefined,
+					deviceId: device ? device.deviceId : undefined
+				},
+				jobPage: jobPage,
+				onJobCreated: (jobInfo) => {
+					return updateCanvas(jobInfo)
+				},
+				onPageComplete: (res) => {
+					// 标签页面渲染完毕时的回调
+				},
+				onPagePrintComplete: (res) => {
+					// 标签页面打印完毕时的回调
+				}
+			})
+		})
+	}
+
+	// ===== 初始化 =====
+	const initPrinter = () => {
+		// #ifdef MP-WEIXIN
+		isWeiXin.value = true
+		// #endif
+		// #ifdef MP-ALIPAY
+		isAlipay.value = true
+		// #endif
+
+		updateCanvasStyle()
+
+		lpapi.value = LPAPIFactory.getInstance({ showLog: 4 })
+
+		lpapi.value.startDiscovery({
+			timeout: 0,
+			deviceFound: (devices) => {
+				if (devices && devices.length > 0) {
+					deviceList.value.splice(0)
+					deviceList.value.push(...devices)
+				}
+			}
+		})
+
+		if (isWeiXin.value) {
+			context.value = lpapi.value.createDrawContext()
+		} else {
+			context.value = lpapi.value.createDrawContext({ canvasId: canvasId })
+		}
+		if (context.value) {
+			lpapi.value.setDrawContext(context.value)
+			handlePreviewLabel()
+		}
+	}
+
+	// ===== 选择器变更 =====
+	const onDeviceChanged = (e) => {
+		deviceIndex.value = e ? e.detail.value : 0
+	}
+	const onRotationChanged = (e) => {
+		rotationIndex.value = e ? e.detail.value : 0
+	}
+	const onGapTypeChanged = (e) => {
+		gapIndex.value = e ? e.detail.value : 0
+	}
+	const onDarknessChanged = (e) => {
+		darknessIndex.value = e ? e.detail.value : 0
+	}
+	const onPrintSpeedChanged = (e) => {
+		speedIndex.value = e ? e.detail.value : 0
+	}
+	const onPrintModeChanged = (e) => {
+		jsonMode.value = e.detail.value
+		handlePreviewLabel()
+	}
+
+	// ===== 打印机操作 =====
+	const handleStartDiscovery = () => {
+		uni.showLoading({ title: '正在搜索打印机...' })
+		lpapi.value.startDiscovery({
+			timeout: 5000,
+			deviceFound: (devices) => {
+				if (devices && devices.length > 0) {
+					deviceList.value.splice(0)
+					deviceList.value.push(...devices)
+				}
+			},
+			adapterStateChange: (result) => {
+				if (!result.discovering) {
+					uni.hideLoading()
+				}
+			}
+		})
+	}
+	const handleStopDiscovery = () => {
+		lpapi.value.stopDiscovery()
+		uni.hideLoading()
+	}
+	const handleOpenPrinter = () => {
+		const currDevice = getDevice()
+		if (!currDevice || !currDevice.deviceId) {
+			uni.showToast({ title: '未检测到打印机', icon: 'none' })
+			return
+		}
+		uni.showLoading({ title: '正在连接打印机...' })
+		lpapi.value.openPrinter({
+			name: currDevice.name,
+			deviceId: currDevice.deviceId,
+			tryTimes: isAlipay.value ? 1 : 5,
+			success: (resp) => {
+				console.log('---- 【打印机连接成功】')
+				uni.hideLoading()
+				uni.showToast({ title: '打印机连接成功！', icon: 'success' })
+			},
+			fail: (resp) => {
+				console.warn('---- 【打印机连接失败】：', JSON.stringify(resp))
+				uni.hideLoading()
+				uni.showToast({ title: '打印机连接失败！', icon: 'error' })
+			}
+		})
+	}
+	const handleClosePrinter = () => {
+		console.log('---- 关闭打印机！')
+		lpapi.value.closePrinter()
+	}
+
+	// ===== 预览 =====
+	const handlePreviewLabel = () => {
+		previewList.value.splice(0)
+		printLabel(true).then((res) => {
+			if (res.statusCode === 0) {
+				res.previewData.forEach((v) => {
+					previewList.value.push({
+						value: v,
+						key: Date.now() + '-' + Math.random() * 1000
+					})
+				})
+			} else {
+				console.warn('预览失败:', res)
+			}
+		})
+	}
+
+	// ===== 打印 =====
+	const handlePrintLabel = async () => {
+		printing.value = true
+		try {
+			var d = getDevice()
+			if (!d || !d.deviceId) {
+				printing.value = false
+				return uni.showToast({ title: '未检测到打印机', icon: 'none' })
+			}
+		await new Promise((resolve, reject) => {
+			lpapi.value.openPrinter({
+				name: d.name,
+				deviceId: d.deviceId,
+				tryTimes: 5,
+				success: resolve,
+				fail: reject
+			})
+		})
+		var res = await printLabel(false)
+		if (res.statusCode === 0) {
+			uni.showToast({ title: '打印成功！', icon: 'success' })
+			emit('printed', { statusCode: 0 })
+		} else {
+			uni.showToast({ title: res.errMsg || '打印失败！', icon: 'error' })
+			emit('error', res)
+		}
+	} catch (e) {
+		console.error('打印异常:', e)
+		uni.showToast({ title: '打印机连接失败！', icon: 'error' })
+		emit('error', e)
+	} finally {
+		printing.value = false
+	}
+	}
+
+	// ===== 关闭弹窗 =====
+	const handleClose = () => {
+		handleClosePrinter()
+		emit('close')
+	}
+
+	// ===== 监听器 =====
+	watch(() => props.modelValue, (val) => {
+		localVisible.value = val
+		if (val) nextTick(() => initPrinter())
+	})
+	watch(localVisible, (val) => {
+		emit('update:modelValue', val)
+	})
+
+	onBeforeUnmount(() => {
+		if (lpapi.value) {
+			lpapi.value.closePrinter()
+			lpapi.value.stopDiscovery()
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+.print-popup { display: flex; flex-direction: column; height: 100%; background: #f5f6f8;
+	&__header { flex-shrink: 0; padding: 28rpx 32rpx 20rpx; text-align: center; border-bottom: 1rpx solid #e8ecf1; }
+	&__title { font-size: 32rpx; font-weight: 700; color: #1a1a2e; }
+	&__body { flex: 1; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 20rpx 24rpx; }
+	&__footer { flex-shrink: 0; padding: 12rpx 24rpx; padding-bottom: calc(12rpx + env(safe-area-inset-bottom)); background: #fff; border-top: 1rpx solid #e8ecf1; }
+}
+.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
+.footer-btn { display: flex; align-items: center; justify-content: center; gap: 8rpx; height: 76rpx; font-size: 26rpx; font-weight: 500; border-radius: 12rpx; background: #f5f6f8; color: #1a1a2e; transition: transform .15s, box-shadow .15s;
+	&:active { transform: scale(.95); opacity: .85; }
+	&--print { background: linear-gradient(135deg, #2979ff, #5a9aff); color: #fff; box-shadow: 0 4rpx 16rpx rgba(41,121,255,.35);     grid-column: 1 / -1;}
+}
+.spinning { animation: spin .8s linear infinite; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.setting-row { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 22rpx 24rpx; margin-bottom: 12rpx; background: #fff; border-radius: 12rpx;
+	&__label { font-size: 26rpx; color: #6b7c93; flex-shrink: 0; width: 160rpx; }
+	&__right { flex: 1; display: flex; justify-content: flex-end; }
+	&__picker { display: flex; align-items: center; gap: 8rpx; }
+	&__value { font-size: 26rpx; color: #1a1a2e; font-weight: 500;
+		&--empty { color: #b0bec5; }
+	}
+	&__input { flex: 1; font-size: 26rpx; color: #1a1a2e; text-align: right; padding: 4rpx 0; }
+}
+.preview-section { margin-bottom: 24rpx; padding: 20rpx; background: #fff; border-radius: 12rpx; overflow: hidden;
+	&__title { display: block; font-size: 26rpx; font-weight: 600; color: #1a1a2e; margin-bottom: 16rpx; }
+	&__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16rpx; }
+}
+.preview-img { width: 100%; border: 1rpx dashed #ccc; border-radius: 4rpx; }
+</style>

scanpages/hj/materials_detail.vue

@@ -61,7 +61,7 @@
 		<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>
+				<text class="print-btn__text">预览打印</text>
 			</view>
 		</view>
 

utils/bwipjs-polyfill.js

@@ -0,0 +1,24 @@
+// 微信小程序 atob polyfill（bwip-js 字体解码依赖）
+// 此文件作为副作用导入，必须在 bwip-js 之前加载
+
+var _chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+function _atob(input) {
+	var str = String(input).replace(/[=]+$/, '')
+	var output = ''
+	var bc = 0, bs, buffer = 0, i = 0
+	for (; str.charAt(i | 0); i++) {
+		bs = _chars.indexOf(str.charAt(i))
+		buffer = (buffer << 6) | bs
+		bc += 6
+		if (bc >= 8) {
+			bc -= 8
+			output += String.fromCharCode((buffer >>> bc) & 255)
+		}
+	}
+	return output
+}
+
+// 同时设置 globalThis 和 global（兼容不同微信基础库版本）
+try { globalThis.atob = globalThis.atob || _atob } catch (e) {}
+try { global.atob = global.atob || _atob } catch (e) {}