11

src/views/mall/trade/order/index.vue

@@ -151,9 +151,16 @@
             {{ item.spuName }} × {{ item.count }}
           </div>
         </div>
-        <div v-else>暂无商品信息</div>
       </div>
     </div>
+
+    <!-- 添加操作按钮 -->
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showLabelDialog = false">关闭</el-button>
+        <el-button type="primary" @click="openInNewWindow">在新页面打开</el-button>
+      </div>
+    </template>
   </el-dialog>
 
 </template>
@@ -275,12 +282,11 @@ const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
       deliveryFormRef.value?.open(row.id) // 直接传递id而不是整个row对象
       break
     case 'print':
-      // 打印功能：在新窗口打开物流面单链接
+      // 打印功能：直接在新窗口打开物流面单
       if (row.logisticsLabel) {
-        // window.open(row.logisticsLabel, '_blank')
         rowLogisticsLabel.value = row.logisticsLabel
         currentOrderRow.value = row // 保存当前订单数据
-        showLabelDialog.value = true // 打开对话框
+        openInNewWindow() // 直接打开新窗口，不显示对话框
       } else {
         ElMessage.warning('该订单暂无物流面单信息')
       }
@@ -310,12 +316,126 @@ onMounted(async () => {
   pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
+
+
+/** 在新窗口打开带文字的图片 */
+const openInNewWindow = () => {
+  if (!rowLogisticsLabel.value || !currentOrderRow.value) {
+    ElMessage.warning('图片信息不完整')
+    return
+  }
+
+  // 构建新页面的HTML内容
+  const imageUrl = rowLogisticsLabel.value
+  const orderItems = currentOrderRow.value.items || []
+
+  // 生成商品信息文本
+  const productText = orderItems.map(item => `${item.spuName} × ${item.count}`).join('<br>')
+
+  const htmlContent = `
+    <!DOCTYPE html>
+    <html lang="zh-CN">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>物流面单 - 订单${currentOrderRow.value.no}</title>
+      <style>
+        body {
+          margin: 0;
+          padding: 20px;
+          font-family: Arial, sans-serif;
+          background-color: #f5f5f5;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 100vh;
+        }
+        .container {
+          position: relative;
+          display: inline-block;
+          background: white;
+          padding: 20px;
+          border-radius: 8px;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .label-img {
+          max-width: 100%;
+          display: block;
+          border-radius: 4px;
+        }
+        .custom-text {
+          position: absolute;
+          bottom: 235px;
+          left: 50px;
+          color: black;
+          font-size: 22px;
+          font-weight: bold;
+          padding: 2px 6px;
+          border-radius: 4px;
+          line-height: 1.4;
+        }
+        .print-btn {
+          margin-top: 20px;
+          text-align: center;
+        }
+        .print-btn button {
+          background-color: #409eff;
+          color: white;
+          border: none;
+          padding: 10px 20px;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 14px;
+        }
+        .print-btn button:hover {
+          background-color: #337ecc;
+        }
+        @media print {
+          body {
+            background-color: white;
+            padding: 0;
+          }
+          .container {
+            box-shadow: none;
+            padding: 0;
+          }
+          .print-btn {
+            display: none;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <div class="container">
+        <img src="${imageUrl}" alt="物流面单" class="label-img" />
+        <div class="custom-text">
+          ${productText}
+        </div>
+        <div class="print-btn">
+          <button onclick="window.print()">打印</button>
+        </div>
+      </div>
+    </body>
+    </html>
+  `
+
+  // 在新窗口中打开
+  const newWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes,resizable=yes')
+  if (newWindow) {
+    newWindow.document.write(htmlContent)
+    newWindow.document.close()
+    // 关闭当前弹窗
+    showLabelDialog.value = false
+  } else {
+    ElMessage.error('无法打开新窗口，请检查浏览器弹窗设置')
+  }
+}
 </script>
 <style scoped>
-/* .label-container {
+.label-container {
   position: relative;
   display: inline-block;
-} */
+}
 
 .label-img {
   max-width: 100%;
@@ -325,7 +445,7 @@ onMounted(async () => {
 /* 自定义文字叠加 */
 .custom-text {
   position: absolute;
-  bottom: 135px;
+  bottom: 155px;
   /* 距离底部空白的位置 */
   left: 30px;
   /* 距离左边的距离 */
@@ -335,4 +455,8 @@ onMounted(async () => {
   padding: 2px 6px;
   border-radius: 4px;
 }
+
+.dialog-footer {
+  text-align: right;
+}
 </style>