feat：面单添加商品信息

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>