优化打印订单

admin-update/src/views/order/components/sel-order.vue

@@ -378,37 +378,51 @@
 		<div class="print-html">
 			<table border="1" width="780" style="border:solid 1px black;border-collapse:collapse">
 				<tr>
-					<td>配送时间：</td>
-					<td colspan="2">{{ deliver.data.reachDate }}</td>
-					<td>订单号：</td>
-					<td colspan="2">{{ deliver.data.orderSn }}</td>
+					<td style="padding: 10px;width: 100px;">配送时间：</td>
+					<td style="padding-left: 10px;" colspan="2">{{ deliver.data.reachDate }}</td>
+					<td style="padding-left: 10px;width: 100px;">订单号：</td>
+					<td style="padding-left: 10px;" colspan="2">{{ deliver.data.orderSn }}</td>
 				</tr>
 				<tr>
-					<td>收花人姓名：</td>
-					<td>{{ deliver.data.receiveUserName }}</td>
-					<td>收花人电话：</td>
-					<td>{{ deliver.data.receiveMobile }}</td>
-					<td colspan="2" rowspan="4">
-						<img class="cover" src="" alt="" />
+					<td style="padding-left: 10px;width: 100px;">收花人姓名：</td>
+					<td style="padding-left: 10px;width: 130px;">
+						{{ deliver.data.receiveUserName }}
+					</td>
+					<td style="padding-left: 10px;width: 100px;">收花人电话：</td>
+					<td style="padding-left: 10px;width: 130px;">
+						{{ deliver.data.receiveMobile }}
+					</td>
+					<td style="padding-left: 10px;" colspan="2" rowspan="4">
+						<div style="text-align: center;padding-top: 1px">
+							<p>情人节 33朵</p>
+							<img
+								style="width: 100px;height: 100px;margin-bottom: 20px"
+								class="cover"
+								:src="deliver.data.img"
+								alt=""
+							/>
+						</div>
 					</td>
 				</tr>
 				<tr>
-					<td>收花人地址：</td>
-					<td colspan="3">{{ deliver.data.receiveFullAddress }}</td>
+					<td style="padding-left: 10px;width: 100px;">收花人地址：</td>
+					<td style="padding-left: 10px" colspan="3">
+						{{ deliver.data.receiveFullAddress }}
+					</td>
 				</tr>
 				<tr>
-					<td>祝福语：</td>
-					<td colspan="3">{{ deliver.data.cardInfo }}</td>
+					<td style="padding-left: 10px;width: 100px;">祝福语：</td>
+					<td style="padding-left: 10px" colspan="3">{{ deliver.data.cardInfo }}</td>
 				</tr>
 				<tr>
-					<td>订花人姓名：</td>
-					<td>{{ deliver.data.bookName }}</td>
-					<td>订花人电话：</td>
-					<td>{{ deliver.data.bookMobile }}</td>
+					<td style="padding-left: 10px;width: 100px;">订花人姓名：</td>
+					<td style="padding-left: 10px;width: 130px;">{{ deliver.data.bookName }}</td>
+					<td style="padding-left: 10px;width: 100px;">订花人电话：</td>
+					<td style="padding-left: 10px;width: 130px;">{{ deliver.data.bookMobile }}</td>
 				</tr>
 				<tr>
-					<td>备注说明：</td>
-					<td colspan="5">{{ deliver.data.remark }}</td>
+					<td style="padding: 10px;width: 100px;">备注说明：</td>
+					<td style="padding-left: 10px" colspan="5">{{ deliver.data.remark }}</td>
 				</tr>
 			</table>
 		</div>
@@ -671,15 +685,21 @@ export default {
 				let LODOP = getLodop();
 				LODOP.PRINT_INIT('配送单');
 				LODOP.SET_PRINT_STYLE('FontSize', 12);
-				LODOP.ADD_PRINT_TEXT(350, 10, 350, 200, `店铺地址：${this.shopInfo.address}`);
-				LODOP.ADD_PRINT_TEXT(350, 400, 350, 600, `电话：13255022022`);
-				LODOP.ADD_PRINT_TEXT(350, 580, 350, 600, `制单时间：2019-10-31 21:12`);
+				LODOP.ADD_PRINT_TEXT(470, 10, 350, 200, `店铺地址：${this.shopInfo.address}`);
+				LODOP.ADD_PRINT_TEXT(470, 400, 350, 600, `电话：${this.deliver.data.telephone}`);
+				LODOP.ADD_PRINT_TEXT(
+					470,
+					590,
+					470,
+					600,
+					`制单时间：${this.deliver.data.printTime}`
+				);
 				LODOP.SET_PRINT_STYLE('FontSize', 20);
 				LODOP.SET_PRINT_STYLE('Bold', 1);
-				LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `${this.shopInfo.merchantName}`);
+				LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `${this.shopInfo.merchantName}配送单`);
 				LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
 				LODOP.SET_PRINT_STYLE('FontSize', 12);
-				LODOP.ADD_PRINT_TEXT(160, 460, 100, 20, `No ${this.deliver.data.sendNum}`);
+				LODOP.ADD_PRINT_TEXT(160, 500, 100, 20, `No ${this.deliver.data.sendNum}`);
 				LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
 
 				LODOP.ADD_PRINT_HTM(
@@ -778,25 +798,7 @@ export default {
 
 .print-html {
 	position: absolute;
-	left: 5000px;
-	top: 0;
-
-	td {
-		height: 40px;
-		width: 130px;
-		padding: 0 10px;
-		box-sizing: border-box;
-	}
-
-	.h2 {
-		height: 80px;
-	}
-
-	.cover {
-		display: block;
-		height: 90%;
-		width: 100%;
-		background-color: #eee;
-	}
+	left: 0;
+	top: -5000px;
 }
 </style>