In vận đơn HRV 2021

in-van-don-hrv.html

<style type="text/css">@page {
        margin: 12pt;
    }

    html {
        min-height: 100vh;
    }

    body {
        font-family: Roboto, Arial;
        font-size: 11pt;
        line-height: 13pt;
        margin: 0;
        min-height: 100vh;
    }

    .box-print {
        border: 1pt solid #000000;
        min-height: calc(100vh - 2pt);
    }

    p {
        margin: 0 0 12pt;
    }

    table {
        border: none;
        border-collapse: collapse;
    }

    table tr {
        border-collapse: collapse;
    }

    table tr td {
        padding: 7pt;
        border: 1pt solid #000000;
        border-collapse: collapse;
    }

    h1 {
        margin: 5pt 0 12pt;
        font-weight: bold;
        font-size: 17pt;
        line-height: 20pt;
    }

    h2 {
        font-size: 11pt;
        margin: 0 0 5pt;
        line-height: 13pt;
        font-weight: bold;
    }

    h3,
    h4 {
        margin: 0 0 2pt;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 9pt;
        line-height: 10pt;
    }

    h4 {
        text-transform: initial;
        margin: 0 0 7pt;
    }

    .colInfo {
        vertical-align: top;
        width: 64%;
        border-left: none;
    }

    .colInfo span {
        display: block;
        font-size: 9pt;
        line-height: 14pt;
    }

    .colInfo p {
        margin: 0 0 6pt;
        font-size: 9pt;
        line-height: 10pt;
    }

    .colBarcode {
        text-align: center;
        vertical-align: top;
        width: 36%;
        border-right: none;
    }

    .colBarcode p {
        margin: 4pt 0 3pt;
        font-size: 11pt;
        line-height: 13pt;
    }

    .colBarcode span {
        font-size: 11pt;
        line-height: 13pt;
    }

    .infoOrder {
        font-size: 9pt;
        line-height: 10pt;
    }

    .infoOrder td {
        width: 32%;
        vertical-align: top;
    }

    .infoOrder td:first-child {
        border-left: none;
    }

    .infoOrder td:last-child {
        width: 36%;
        border-right: none;
    }

    .infoOrder p:first-child {
        margin-bottom: 3pt;
    }

    .infoOrder p:last-child {
        margin-bottom: 7pt;
    }

    .listItem {
        margin: 0 0 9pt;
        border-collapse: collapse;
        border: 1pt solid #000000;
        vertical-align: top;
        width: 100%;
    }

    .listItem thead tr th {
        vertical-align: top;
        text-align: left;
        padding: 7pt;
        border: 1pt solid #000000;
        font-size: 9pt;
        line-height: 10pt;
        font-weight: bold;
    }

    .listItem thead tr th:nth-child(2) {
        width: 100pt;
        text-align: center;
    }

    .listItem thead tr th:nth-child(3) {
        width: 50pt;
        text-align: center;
    }

    .listItem tbody tr td {
        vertical-align: top;
        font-size: 8pt;
        line-height: 9pt;
        padding: 10pt 7pt;
    }

    .listItem tbody tr td:nth-child(2),
    .listItem tbody tr td:nth-child(3) {
        text-align: center;
    }

    .checkOut,
    .checkOut tr td {
        border: none;
        padding: 0 7pt;
        font-size: 9pt;
        line-height: 10pt;
    }

    .checkOut tr td:nth-child(2) {
        width: 100pt;
        text-align: center;
    }

    .checkOut tr td:nth-child(3) {
        width: 50pt;
        text-align: center;
    }
</style>
<div class="box-print">
<table cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr style="vertical-align: top;">
			<td class="colInfo" colspan="2" style="border-top: none;">
			<h2>Người gửi:</h2>

			<h3>{{shop_name}}</h3>
			<span>{{shop.domain}}</span> <span>{{shop.phone}}</span>

			<p>{{ shop.address }}{% if shop.ward %}, {{ shop.ward }}{% endif %}{% if shop.district %}, {{ shop.district }}{% endif %}{% if shop.province %}, {{ shop.province }}{% endif %}{% if shop.country %}, {{ shop.country }}{% endif %}</p>
			</td>
			<td class="colBarcode" style="border-top: none;">
			<p><b>{{tracking_company}}</b></p>
			{% if tracking_number and tracking_number != "" %}<span style="display: inline-block; text-align: center;"><img class="print_barcode" style="height: 39pt;vertical-align: top; margin-bottom: 5pt;" val="{{tracking_number}}" /> 
                <span style="display: block;">Mã vận đơn: {{tracking_number | escape}}</span> </span> {% endif %}
                {% if sort_code %}
                <p>Mã phân vùng: {{sort_code}}</p>
                {% endif%}
            </td>
		</tr>
        <script>
            $(".print_barcode").each(function(){
                var barcode = $(this).attr("val");
                $(this).JsBarcode(barcode ,{ 
                                                width:  1,
                                                height: 40,
                                                quite: 10,
                                                format: "CODE128",
                                                displayValue: true,
                                                font:"monospace",
                                                textAlign:"center",
                                                fontSize: 12,
                                                backgroundColor:"",
                                                lineColor:"#000"
                                        }
                                )
                });
        </script>
		<tr style="vertical-align: top;">{% if shipment.sorting_code and shipment.sorting_code != "" and shipment.provider == "VNPost" %}
			<td class="colInfo" colspan="2">{% elsif shipment.route_code and shipment.route_code != "" and shipment.provider contains "Sapo Express" %}</td>
			<td class="colInfo" colspan="2">{% else %}</td>
			<td class="colInfo" colspan="3" style="border-right: none">{% endif %}
			<h2>Người nhận:</h2>

			<h4>{{shipping_address.name | escape}}</h4>
			<span>{{shipping_address.phone | escape}}</span>
			<p>{{ shipping_address.address1 }}{% if shipping_address.ward %} , {{ shipping_address.ward }}{% endif %}{% if shipping_address.district %} , {{ shipping_address.district }}{% endif %}{% if shipping_address.province %}  , {{ shipping_address.province }} ,{% endif %}{% if shipping_address.country %} {{ shipping_address.country }}{% endif %}</p>
			</td>
			
		</tr>
		<tr class="infoOrder">
			<td>
			<p><b>Mã đơn hàng</b></p>

			<p>{{order_name}}</p>
			</td>
			<td>
			<p><b>Ngày đặt hàng</b></p>

			<p>{{ order_date | date: "%d/%m/%Y" }}</p>
			</td>
			<td>
			<p><b>Ghi chú</b></p>

			<p>{{shipping_note | escape}}</p>
			</td>
		</tr>
		<tr>
			<td colspan="3" style="border: none;">
			<h1>Số tiền thu hộ: {{COD_amount | money}}</h1>

			<table class="listItem">
				<thead>
					<tr style="white-space: nowrap;">
						<th>Tên sản phẩm</th>
						<th>Mã sản phẩm</th>
						<th>SL</th>
					</tr>
				</thead>
				<tbody>{% for line in line_items %}
					<tr>
						<td>{{line.title | escape}}{% if line.variant_title != "Default Title" %}-{{line.variant_title | escape}}{% endif %}</td>
						<td>{% if line.sku and line.sku != "" %}{{line.sku | escape}}{% endif %}</td>
						<td>{{line.quantity}}</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>

			<table cellpadding="0" cellspacing="0" class="checkOut" width="100%">
				<tbody>
					<tr>
						<td> </td>
						<td><b></b></td>
						<td><b></b></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>
</div>