From ccf243f31a06d2b94f00a11a0e340696d04b0c10 Mon Sep 17 00:00:00 2001 From: "pikachu1995@126.com" Date: Fri, 30 Oct 2026 07:22:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(order):=20=E4=BC=98=E5=8C=96=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B8=83=E5=B1=80=E5=B9=B6?= =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=A0=87=E5=87=86A4=E5=87=BA=E5=BA=93?= =?UTF-8?q?=E5=8F=91=E8=B4=A7=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manager/src/utils/print.js | 206 ++++++- manager/src/views/order/order/orderDetail.vue | 533 +++++++++++++++--- 2 files changed, 637 insertions(+), 102 deletions(-) diff --git a/manager/src/utils/print.js b/manager/src/utils/print.js index 49a0f0f12..73ac669a4 100644 --- a/manager/src/utils/print.js +++ b/manager/src/utils/print.js @@ -1,7 +1,7 @@ /** - * 打印指定 DOM 区域（替代 vue-print-nb） + * 打印指定 DOM 区域（支持标准 A4 纵向与完整打印样式隔离） */ -export function printElement(elementId, title = "打印") { +export function printElement(elementId, title = "打印发货单") { const el = document.getElementById(elementId); if (!el) { return; @@ -13,22 +13,196 @@ export function printElement(elementId, title = "打印") { doc.open(); doc.write( `${title}${el.innerHTML}` ); doc.close(); iframe.contentWindow.focus(); - iframe.contentWindow.print(); - setTimeout(() => document.body.removeChild(iframe), 1000); + setTimeout(() => { + iframe.contentWindow.print(); + setTimeout(() => { + if (document.body.contains(iframe)) { + document.body.removeChild(iframe); + } + }, 1500); + }, 100); } diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue index 828e9323f..fb20813d9 100644 --- a/manager/src/views/order/order/orderDetail.vue +++ b/manager/src/views/order/order/orderDetail.vue @@ -498,43 +498,179 @@ - - + + -
-
-

备注：{{ orderInfo.order.remark }}

-

收件人：{{ orderInfo.order.consigneeName }}

-

- 手机号：{{ printHiddenFlag ? orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") : orderInfo.order.consigneeMobile }} -

-

收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}

-

商品清单：

-
-
-
-

{{ item.goodsName }}

-
- - {{ keychild }} : {{ itemchild }} - + +
+ +
+
+ +
+
+

{{ orderInfo.order.storeName || "官方商城" }} · 发货出库清单

+
SHIPPING LIST & PACKING SLIP · 仓库出库拣货核验联
+
+
+ + + + +
{{ orderInfo.order.sn }}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
订单编号{{ orderInfo.order.sn }}下单时间{{ orderInfo.order.createTime }}
配送方式{{ orderInfo.order.logisticsName || "普通快递" }}物流单号{{ orderInfo.order.logisticsNo || "待发货回传" }}
收件人{{ orderInfo.order.consigneeName }}（{{ formattedPrintMobile }}）收货地址{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
买家备注 + {{ orderInfo.order.remark || "（无客户特殊留言）" }} +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
序号商品信息 / 规格单价订购数实发数核验金额小计
{{ index + 1 }} +
{{ item.goodsName }}
+
+ + {{ key }}: {{ val }} + +
+ 		¥ {{ Number(item.unitPrice || 0).toFixed(2) }}{{ item.num }}{{ item.num }} + + + ¥ {{ Number(item.flowPrice || 0).toFixed(2) }} +
+ + +
+
+ 共计 {{ orderInfo.orderItems ? orderInfo.orderItems.length : 0 }} 种商品 / {{ totalGoodsNum }} 件 +
+
+
+ 商品金额: + ¥ {{ unitPrice(orderPriceDetail.goodsPrice || orderInfo.order.goodsPrice || 0) }} +
+
+ 运费: + + ¥ {{ unitPrice(orderInfo.order.freightPrice || 0) }} +
+
+ 优惠: + - ¥ {{ unitPrice(orderPriceDetail.discountPrice) }} +
+
+ 订单应付总额: + ¥ {{ unitPrice(orderPriceDetail.flowPrice || orderInfo.order.flowPrice || 0) }}
- × {{ item.num }} +
+ + +
+
拣货员:
+
复核员:
+
打包员:
+
签收人:
+
+ + +
+ * 感谢您的惠顾！请在签收时仔细核对商品及外包装完好无损，如遇少件、错发或破损，请于签收后联系客服处理。
+ @@ -741,6 +877,30 @@ const orderPriceDetail = computed(() => { return p; }); +const formattedPrintMobile = computed(() => { + const m = orderInfo.value?.order?.consigneeMobile; + if (!m) return "-"; + if (printHiddenFlag.value) { + return m.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2"); + } + return m; +}); + +const barcodeSvgBars = computed(() => { + const bars = []; + let currentX = 0; + // 黑白交替条纹序列（确保打印机 100% 渲染真实矢量黑色条码） + const widths = [2, 1, 3, 1, 2, 1, 1, 3, 2, 2, 1, 3, 1, 2, 1, 1, 2, 3, 1, 2, 3, 1, 1, 2, 2, 1, 3, 1, 2, 1, 3, 2, 1, 2, 1, 1, 3, 2, 1, 2, 3, 1, 2, 1, 3, 1]; + for (let i = 0; i < widths.length; i++) { + const w = widths[i]; + if (i % 2 === 0) { + bars.push({ x: currentX, width: w }); + } + currentX += w; + } + return { bars, totalWidth: currentX }; +}); + const isECouponOrder = computed(() => { const t = orderInfo.value?.order?.orderType; return t === "E_COUPON" || route.query.orderType === "E_COUPON"; @@ -1562,68 +1722,269 @@ onMounted(() => { .mt_16 { margin-top: 16px; } .mb_10 { margin-bottom: 10px; } } - -// 打印样式 -.print-header-row { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding-right: 20px; -} - -.print-content-scroll { - max-height: 500px; - overflow-y: auto; - overflow-x: hidden; - - .lineH30 { - line-height: 30px; - } - .f14 { - font-size: 14px; - color: #333; - } - .printgoodtitle { - font-size: 14px; - line-height: 1.5; - margin-top: 15px; - font-weight: 600; - } - .printgoodinfo { - padding: 10px 0; - - .printgooditem { - border-bottom: 1px solid #e8eaec; - display: flex; - align-items: flex-start; - line-height: 24px; - margin-bottom: 10px; - padding-bottom: 10px; - - .printgoodname { - flex: 1; - - .printgoodguid { - font-size: 12px; - color: #999; - .printgoodguiditem { - margin-right: 10px; - } - } - } - - .printgoodnumber { - font-weight: 600; - margin-left: 15px; - } - } - } -}