From d87856a6f031eb463fdf7902571b33cd7b506bce Mon Sep 17 00:00:00 2001
From: yangmf_0726 <13243152557@163.com>
Date: Thu, 25 Sep 2025 15:39:42 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=9D=A2=E5=8D=95=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=95=86=E5=93=81=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/trade/order/index.vue | 52 +++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index b557fb10..5fc63ac9 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -137,6 +137,25 @@
   <!-- 各种操作的弹窗 -->
   <OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
   <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
+
+  <el-dialog v-model="showLabelDialog" title="" width="800px">
+    <!-- 如果是图片 -->
+    <div class="label-container">
+      <!-- 面单图片 -->
+      <img :src="rowLogisticsLabel" alt="" class="label-img" />
+
+      <!-- 在图片空白处添加的文字 -->
+      <div class="custom-text">
+        <div v-if="currentOrderRow?.items?.length">
+          <div v-for="(item, index) in currentOrderRow.items" :key="item.id || index" class="product-item">
+            {{ item.spuName }} × {{ item.count }}
+          </div>
+        </div>
+        <div v-else>暂无商品信息</div>
+      </div>
+    </div>
+  </el-dialog>
+
 </template>
 
 <script lang="ts" setup>
@@ -241,6 +260,9 @@ const openDetail = (id: number) => {
   push({ name: 'TradeOrderDetail', params: { id } })
 }
 
+const showLabelDialog = ref(false) // 控制对话框显示
+const rowLogisticsLabel = ref('')  // 保存点击的面单地址
+const currentOrderRow = ref<TradeOrderApi.OrderVO | null>(null) // 保存当前选中的订单数据
 /** 操作分发 */
 const deliveryFormRef = ref()
 const updateRemarkForm = ref()
@@ -255,7 +277,10 @@ const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
     case 'print':
       // 打印功能：在新窗口打开物流面单链接
       if (row.logisticsLabel) {
-        window.open(row.logisticsLabel, '_blank')
+        // window.open(row.logisticsLabel, '_blank')
+        rowLogisticsLabel.value = row.logisticsLabel
+        currentOrderRow.value = row // 保存当前订单数据
+        showLabelDialog.value = true // 打开对话框
       } else {
         ElMessage.warning('该订单暂无物流面单信息')
       }
@@ -286,3 +311,28 @@ onMounted(async () => {
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
+<style scoped>
+.label-container {
+  position: relative;
+  display: inline-block;
+}
+
+.label-img {
+  max-width: 100%;
+  display: block;
+}
+
+/* 自定义文字叠加 */
+.custom-text {
+  position: absolute;
+  bottom: 160px;
+  /* 距离底部空白的位置 */
+  left: 25px;
+  /* 距离左边的距离 */
+  color: black;
+  font-size: 26px;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+</style>