fix
This commit is contained in:
laodaming
parent
1625975814
commit
d0e0d17b5d
|
|
@ -1,7 +1,8 @@
|
|||
package constants
|
||||
|
||||
// 主体页面
|
||||
const MAIN_INVOICE_HTML = `<!DOCTYPE html>
|
||||
const MAIN_INVOICE_HTML = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
|
@ -9,230 +10,235 @@ const MAIN_INVOICE_HTML = `<!DOCTYPE html>
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invoice</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header_warp {
|
||||
background-color: #F8F8FA;
|
||||
padding: 20px 5% 20px 6%;
|
||||
}
|
||||
|
||||
.header_td {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.header_td.logo {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.header_logo {
|
||||
max-height: 15px;
|
||||
max-width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.header_td.title {
|
||||
color: #212121;
|
||||
font-weight: 600;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.information_warp {
|
||||
padding: 30px 5% 30px 6%;
|
||||
}
|
||||
|
||||
.information_td {
|
||||
width: 50%;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.information_td.bill {
|
||||
color: #212121;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.information_td.right {
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.information_td.info {
|
||||
color: #666666;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.bill_warp {
|
||||
padding: 0 5% 0 6%;
|
||||
}
|
||||
|
||||
.bill_td {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bill_td:first-child {
|
||||
width: 47.59%;
|
||||
}
|
||||
|
||||
.bill_td.title {
|
||||
border-top: 2px solid #333;
|
||||
padding: 13px 0 7px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.bill_td.info {
|
||||
color: #666;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 8px 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bill_warp tr:last-child .bill_td.info {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.total_warp {
|
||||
padding: 14px 5% 24px 0;
|
||||
}
|
||||
|
||||
.total_td {
|
||||
color: #212121;
|
||||
padding: 8px 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.total_td.info {
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.total_td.border-dashed {
|
||||
border-bottom: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.total_td.border-solid {
|
||||
border-bottom: 2px solid #333;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.total_td.total {
|
||||
padding-top: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notes_warp {
|
||||
padding: 0 5% 0 6%;
|
||||
}
|
||||
|
||||
.notes_td {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-weight: 300;
|
||||
width: 50%;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.notes_td.title {
|
||||
color: #212121;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.notes_td.notes {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="margin: 0;">
|
||||
<!-- header -->
|
||||
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
|
||||
style="background-color: #F8F8FA;padding: 0 5%;">
|
||||
<tr height="30px"></tr>
|
||||
<tr>
|
||||
<td align="left" rowspan="9" style="vertical-align: top; width: 50%;">
|
||||
<img style="max-height: 40px;max-width: 100%;"
|
||||
src="{{h5Url}}/storage/email/logo.png" alt="logo">
|
||||
</td>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 42px; display: block;">Invoice</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="30px"></tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Invoice Number:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">{{order_sn}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="30px"></tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Date:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">{{order_expire_time}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="30px"></tr>
|
||||
</table>
|
||||
<!-- information -->
|
||||
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
|
||||
style="background-color: #fff;padding: 0 5%;">
|
||||
<tr height="30px"></tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Bill To:</span>
|
||||
</td>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Bill From:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">{{name}}</span>
|
||||
</td>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">Lemon
|
||||
Squeezy LLC</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">{{street}} {{suite}}</span>
|
||||
</td>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">Lemon
|
||||
Squeezy LLC</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">{{city}} {{state}} {{zip_code}}</span>
|
||||
</td>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">Lemon
|
||||
Squeezy LLC</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;"> </span>
|
||||
</td>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block; line-height: 42px;">Lemon
|
||||
Squeezy LLC</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="30px"></tr>
|
||||
</table>
|
||||
<!-- bill -->
|
||||
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
|
||||
style="background-color: #F8F8FA;padding: 0 5%;">
|
||||
<tr>
|
||||
<td align="left" style="width: 50%;">
|
||||
<span
|
||||
style="color: #212121;font-weight: bold;font-size: 22px; display: block; line-height: 70px;">Product
|
||||
Name</span>
|
||||
</td>
|
||||
<td align="left" style="width: 16.66%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 22px; display: block; line-height: 70px;">Unit
|
||||
Price</span>
|
||||
</td>
|
||||
<td align="center" style="width: 16.66%;">
|
||||
<span
|
||||
style="color: #212121;font-weight: bold;font-size: 22px; display: block; line-height: 70px;">Quantity</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%;">
|
||||
<span
|
||||
style="color: #212121;font-weight: bold;font-size: 22px; display: block; line-height: 70px;">Total</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"
|
||||
style="background-color: #fff;padding: 0 5%;">
|
||||
<tr height="30px"></tr>
|
||||
{{orderHTML}}
|
||||
<tr>
|
||||
<td align="left" colspan="2">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">Subtotal</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">${{total_amount}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="2">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">Tax</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">$0.00</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="2">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">Invoice Total</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">${{total_amount}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="2" {{first_style1}}>
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">First Payment</span>
|
||||
</td>
|
||||
<td align="right" {{first_style2}}>
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">-${{first_payment}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
{{second_payment_html}}
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="2">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Amount Due</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%;">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">${{amount_due}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="88px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="4">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Payment Method:</span>
|
||||
</td>
|
||||
</tr>
|
||||
{{pay_html}}
|
||||
<tr height="30px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="4">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 24px; display: block;">Notes:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="4">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">Add a note...</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr height="80px"></tr> -->
|
||||
</table>
|
||||
<body>
|
||||
<!-- header -->
|
||||
<table class="header_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td class="header_td logo" align="left">
|
||||
<img class="header_logo" src="https://fusenapi.kayue.cn:8010/storage/email/logo.png" alt="logo">
|
||||
</td>
|
||||
<td class="header_td title" align="right">Invoice</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- information -->
|
||||
<table class="information_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td class="information_td bill" align="left">Bill To:</td>
|
||||
<td class="information_td right" align="right">Invoice No. {{invoice_number}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="information_td info" align="left">{{buyer_name}}</td>
|
||||
<td class="information_td right" align="right">Date: {{buy_date}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="information_td info" align="left">{{street}}</td>
|
||||
<td class="information_td" align="right"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="information_td info" align="left">{{city}}</td>
|
||||
<td class="information_td" align="right"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="information_td info" align="left">{{country}}</td>
|
||||
<td class="information_td" align="right"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- bill -->
|
||||
<table class="bill_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
|
||||
<!--循环部分-->
|
||||
{{product_loop_html}}
|
||||
<!--循环部分-->
|
||||
</table>
|
||||
<!-- total -->
|
||||
<table class="total_warp" border="0" align="right" cellpadding="0" cellspacing="0" width="50%">
|
||||
<tr>
|
||||
<td class="total_td" align="right">Subtotal</td>
|
||||
<td class="total_td info" align="right">${{subtotal_price}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="total_td" align="right">Shipping Fee</td>
|
||||
<td class="total_td info" align="right">Free</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="total_td border-dashed" align="right">Tax</td>
|
||||
<td class="total_td info border-dashed" align="right">${{tax}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="total_td" align="right">Total</td>
|
||||
<td class="total_td info" align="right">${{total_price}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="total_td border-solid" align="right">Deposit Requested</td>
|
||||
<td class="total_td info border-solid" align="right">${{deposit_price}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="total_td total" align="right">Deposit Due</td>
|
||||
<td class="total_td total" align="right">${{deposit_price}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- notes -->
|
||||
<table class="notes_warp" border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td class="notes_td title" align="left">Payment Method:</td>
|
||||
<td class="notes_td title" align="left">Notes:</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="notes_td" align="left">{{payment_method}}</td>
|
||||
<td class="notes_td notes" align="left" rowspan="2">{{notes}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="notes_td" align="left">Account No. {{account_number}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>`
|
||||
</html>
|
||||
|
||||
// 发票支付html模板
|
||||
const PAYMENT_HTML = `<tr height="15px"></tr>
|
||||
<tr>
|
||||
<td align="left" colspan="4">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">${{pay_amount}} payment from {{brand}}
|
||||
····{{card_no}}</span>
|
||||
</td>
|
||||
</tr>`
|
||||
`
|
||||
|
||||
// 二次支付html
|
||||
const SECOND_PAYMENY_HTML = `<tr>
|
||||
<td align="left" colspan="2" style="padding-bottom: 20px; border-bottom: 1px solid #212121;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">Second Payment</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%; padding-bottom: 20px; border-bottom: 1px solid #212121;">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">-${{remain_amount}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>`
|
||||
|
||||
// order html
|
||||
const ORDER_HTML = `<tr>
|
||||
<td align="left" style="width: 50%;{{style1}}" {{rowspan}}">
|
||||
<span style="color: #212121;font-weight: bold;font-size: 22px; display: block;">{{product_title}}</span>
|
||||
</td>
|
||||
<td align="left" style="width: 16.66%;{{style2}}">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">${{amount}}</span>
|
||||
</td>
|
||||
<td align="center" style="width: 16.66%;' . $style2 . '">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">{{buy_num}}pcs</span>
|
||||
</td>
|
||||
<td align="right" style="width: 16.66%;' . $style2 . '">
|
||||
<span style="color: #666666;font-weight: 400;font-size: 22px; display: block;">${{sum_amount}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr height="15px"></tr>`
|
||||
// 产品循环部分{{product_loop_html}}
|
||||
const PRODUCT_LOOP_HTML_CONTENT = ` <tr>
|
||||
<td class="bill_td title" align="left">{{product_name}}</td>
|
||||
<td class="bill_td title" align="right">${{product_item_price}}</td>
|
||||
<td class="bill_td title" align="right">{{purchase_quantity}}</td>
|
||||
<td class="bill_td title" align="right">${{product_total_price}}</td>
|
||||
</tr>`
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user