|
|
@@ -1,6 +1,6 @@
|
|
|
<?php
|
|
|
/**
|
|
|
- * A4 鲜花配送单 HTML 模板（链科云打印）
|
|
|
+ * A4 鲜花配送单 HTML 模板（链科云打印，HTML 直打）
|
|
|
*
|
|
|
* @var array $data
|
|
|
*/
|
|
|
@@ -15,8 +15,8 @@ $escape = function ($value) {
|
|
|
<title><?= $escape($data['title'] ?? '鲜花配送单') ?></title>
|
|
|
<style>
|
|
|
@page {
|
|
|
- size: A4;
|
|
|
- margin: 12mm;
|
|
|
+ size: A4 portrait;
|
|
|
+ margin: 10mm;
|
|
|
}
|
|
|
* {
|
|
|
margin: 0;
|
|
|
@@ -25,17 +25,26 @@ $escape = function ($value) {
|
|
|
font-family: "SimSun", "宋体", serif;
|
|
|
}
|
|
|
body {
|
|
|
- padding: 30px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
+ /* 外层 table 居中：兼容 Windows 打印 HTML 时 margin:auto 失效 */
|
|
|
+ .page-center {
|
|
|
+ width: 100%;
|
|
|
+ border: 0;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
.delivery-wrap {
|
|
|
- width: 1000px;
|
|
|
+ width: 190mm;
|
|
|
+ max-width: 100%;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
.header-top {
|
|
|
text-align: center;
|
|
|
- padding: 15px 0;
|
|
|
+ padding: 4mm 0;
|
|
|
position: relative;
|
|
|
}
|
|
|
.title {
|
|
|
@@ -45,30 +54,30 @@ $escape = function ($value) {
|
|
|
.order-no {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- top: 15px;
|
|
|
+ top: 4mm;
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
- table {
|
|
|
+ table.sheet {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
- td {
|
|
|
- padding: 16px 20px;
|
|
|
+ table.sheet td {
|
|
|
+ padding: 4mm 5mm;
|
|
|
vertical-align: top;
|
|
|
font-size: 24px;
|
|
|
border: 1px solid #000;
|
|
|
background: transparent;
|
|
|
}
|
|
|
- td:first-child {
|
|
|
- width: 160px;
|
|
|
+ table.sheet td:first-child {
|
|
|
+ width: 36mm;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
tr.time-row td,
|
|
|
tr.card-row td,
|
|
|
tr.name-row td,
|
|
|
tr.addr-row td {
|
|
|
- padding-top: 32px;
|
|
|
- padding-bottom: 32px;
|
|
|
+ padding-top: 8mm;
|
|
|
+ padding-bottom: 8mm;
|
|
|
}
|
|
|
tr.addr-row td:last-child {
|
|
|
text-align: left;
|
|
|
@@ -79,7 +88,7 @@ $escape = function ($value) {
|
|
|
}
|
|
|
.addr-distance {
|
|
|
display: block;
|
|
|
- margin-top: 24px;
|
|
|
+ margin-top: 6mm;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
.goods-label {
|
|
|
@@ -88,28 +97,28 @@ $escape = function ($value) {
|
|
|
}
|
|
|
.circle-num {
|
|
|
position: absolute;
|
|
|
- right: 60px;
|
|
|
- top: 140px;
|
|
|
- width: 220px;
|
|
|
- height: 220px;
|
|
|
+ right: 12mm;
|
|
|
+ top: 32mm;
|
|
|
+ width: 52mm;
|
|
|
+ height: 52mm;
|
|
|
border: 3px solid #000;
|
|
|
border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 120px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 52mm;
|
|
|
+ font-size: 28mm;
|
|
|
font-weight: bold;
|
|
|
z-index: 10;
|
|
|
background: #fff;
|
|
|
}
|
|
|
.goods-row {
|
|
|
- display: flex;
|
|
|
- gap: 20px;
|
|
|
- align-items: flex-start;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.goods-img {
|
|
|
- width: 220px;
|
|
|
- height: 260px;
|
|
|
+ float: left;
|
|
|
+ width: 52mm;
|
|
|
+ height: 62mm;
|
|
|
+ margin-right: 5mm;
|
|
|
background: #eee;
|
|
|
}
|
|
|
.goods-img img {
|
|
|
@@ -118,12 +127,13 @@ $escape = function ($value) {
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
.goods-text {
|
|
|
- padding-top: 10px;
|
|
|
+ padding-top: 2mm;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.goods-name {
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin-bottom: 3mm;
|
|
|
}
|
|
|
.goods-count {
|
|
|
font-weight: bold;
|
|
|
@@ -132,75 +142,90 @@ $escape = function ($value) {
|
|
|
font-size: 48px;
|
|
|
}
|
|
|
.bottom-tip {
|
|
|
- padding: 20px 0 0;
|
|
|
+ padding: 5mm 0 0;
|
|
|
text-align: center;
|
|
|
font-size: 23px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+ @media print {
|
|
|
+ body {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .delivery-wrap {
|
|
|
+ width: 190mm;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div class="delivery-wrap">
|
|
|
- <?php if (!empty($data['sendNum'])): ?>
|
|
|
- <div class="circle-num"><?= $escape($data['sendNum']) ?></div>
|
|
|
- <?php endif; ?>
|
|
|
+<table class="page-center" cellpadding="0" cellspacing="0" border="0">
|
|
|
+ <tr>
|
|
|
+ <td align="center" valign="top">
|
|
|
+ <div class="delivery-wrap">
|
|
|
+ <?php if (!empty($data['sendNum'])): ?>
|
|
|
+ <div class="circle-num"><?= $escape($data['sendNum']) ?></div>
|
|
|
+ <?php endif; ?>
|
|
|
|
|
|
- <div class="header-top">
|
|
|
- <div class="title"><?= $escape($data['title'] ?? '鲜花配送单') ?></div>
|
|
|
- <div class="order-no">[<?= $escape($data['sendNum'] ?? '') ?>]</div>
|
|
|
- </div>
|
|
|
+ <div class="header-top">
|
|
|
+ <div class="title"><?= $escape($data['title'] ?? '鲜花配送单') ?></div>
|
|
|
+ <div class="order-no"><?= $escape($data['batchNo'] ?? '') ?></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <table>
|
|
|
- <tr class="name-row">
|
|
|
- <td>顾客姓名</td>
|
|
|
- <td><?= $escape($data['receiveUserName'] ?? '') ?></td>
|
|
|
- <td>顾客电话</td>
|
|
|
- <td><strong><?= $escape($data['receiveMobile'] ?? '') ?></strong></td>
|
|
|
- </tr>
|
|
|
- <tr class="addr-row">
|
|
|
- <td>顾客地址</td>
|
|
|
- <td colspan="3">
|
|
|
- <span class="addr-block"><strong><?= $escape($data['fullAddress'] ?? '') ?></strong></span>
|
|
|
- <?php if (!empty($data['distanceText'])): ?>
|
|
|
- <span class="addr-distance">配送距离: <?= $escape($data['distanceText']) ?></span>
|
|
|
- <?php endif; ?>
|
|
|
- <span class="addr-distance">配送距离:直线304米</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr class="time-row">
|
|
|
- <td>配送时间</td>
|
|
|
- <td colspan="3">
|
|
|
- <strong><?= $escape($data['reachDateLabel'] ?? '') ?></strong>
|
|
|
- <strong><?= $escape($data['reachDateTime'] ?? '') ?></strong>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="goods-label">商品描述<br>参考照片</td>
|
|
|
- <td colspan="3">
|
|
|
- <div class="goods-row">
|
|
|
- <div class="goods-img">
|
|
|
- <?php if (!empty($data['productImage'])): ?>
|
|
|
- <img src="<?= $escape($data['productImage']) ?>" alt="<?= $escape($data['productName'] ?? '商品图') ?>">
|
|
|
+ <table class="sheet">
|
|
|
+ <tr class="name-row">
|
|
|
+ <td>顾客姓名</td>
|
|
|
+ <td><?= $escape($data['receiveUserName'] ?? '') ?></td>
|
|
|
+ <td>顾客电话</td>
|
|
|
+ <td><strong><?= $escape($data['receiveMobile'] ?? '') ?></strong></td>
|
|
|
+ </tr>
|
|
|
+ <tr class="addr-row">
|
|
|
+ <td>顾客地址</td>
|
|
|
+ <td colspan="3">
|
|
|
+ <span class="addr-block"><strong><?= $escape($data['fullAddress'] ?? '') ?></strong></span>
|
|
|
+ <?php if (!empty($data['distanceText'])): ?>
|
|
|
+ <span class="addr-distance">配送距离: <?= $escape($data['distanceText']) ?></span>
|
|
|
<?php endif; ?>
|
|
|
- </div>
|
|
|
- <div class="goods-text">
|
|
|
- <div class="goods-name"><?= $escape($data['productName'] ?? '') ?></div>
|
|
|
- <div class="goods-count">共 <span class="num"><?= $escape($data['productCount'] ?? '1') ?></span> 个</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr class="card-row">
|
|
|
- <td>贺卡内容</td>
|
|
|
- <td colspan="3"><?= nl2br($escape($data['cardInfo'] ?? '')) ?></td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class="time-row">
|
|
|
+ <td>配送时间</td>
|
|
|
+ <td colspan="3">
|
|
|
+ <strong><?= $escape($data['reachDateLabel'] ?? '') ?></strong>
|
|
|
+ <strong><?= $escape($data['reachDateTime'] ?? '') ?></strong>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="goods-label">商品描述<br>参考照片</td>
|
|
|
+ <td colspan="3">
|
|
|
+ <div class="goods-row">
|
|
|
+ <div class="goods-img">
|
|
|
+ <?php if (!empty($data['productImage'])): ?>
|
|
|
+ <img src="<?= $escape($data['productImage']) ?>" alt="<?= $escape($data['productName'] ?? '商品图') ?>">
|
|
|
+ <?php endif; ?>
|
|
|
+ </div>
|
|
|
+ <div class="goods-text">
|
|
|
+ <div class="goods-name"><?= $escape($data['productName'] ?? '') ?></div>
|
|
|
+ <div class="goods-count">共 <span class="num"><?= $escape($data['productCount'] ?? '1') ?></span> 个</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr class="card-row">
|
|
|
+ <td>贺卡内容</td>
|
|
|
+ <td colspan="3"><?= nl2br($escape($data['cardInfo'] ?? '')) ?></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
|
|
|
- <?php if (!empty($data['servicePhone'])): ?>
|
|
|
- <div class="bottom-tip">
|
|
|
- 如在制作，配送环节出现问题或疑问，欢迎随时致电: <?= $escape($data['servicePhone']) ?>
|
|
|
- </div>
|
|
|
- <?php endif; ?>
|
|
|
- </div>
|
|
|
+ <?php if (!empty($data['servicePhone'])): ?>
|
|
|
+ <div class="bottom-tip">
|
|
|
+ 如在制作，配送环节出现问题或疑问，欢迎随时致电: <?= $escape($data['servicePhone']) ?>
|
|
|
+ </div>
|
|
|
+ <?php endif; ?>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+</table>
|
|
|
</body>
|
|
|
</html>
|
ouyang