293 lines
10 KiB
Vue
293 lines
10 KiB
Vue
<script setup>
|
|
const purchasedProducts = [
|
|
{
|
|
name: 'Vuexy Admin Template',
|
|
description: 'HTML Admin Template',
|
|
qty: 1,
|
|
cost: 32,
|
|
},
|
|
{
|
|
name: 'Frest Admin Template',
|
|
description: 'Angular Admin Template',
|
|
qty: 1,
|
|
cost: 22,
|
|
},
|
|
{
|
|
name: 'Apex Admin Template',
|
|
description: 'HTML Admin Template',
|
|
qty: 2,
|
|
cost: 17,
|
|
},
|
|
{
|
|
name: 'Robust Admin Template',
|
|
description: 'React Admin Template',
|
|
qty: 1,
|
|
cost: 66,
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<section>
|
|
<VRow>
|
|
<VCol cols="12" md="9">
|
|
<VCard>
|
|
<!-- SECTION Header -->
|
|
<VCardText class="d-flex flex-wrap justify-space-between flex-column flex-sm-row print-row">
|
|
<!-- 👉 Left Content -->
|
|
<div class="ma-sm-4">
|
|
<div class="d-flex align-center mb-6">
|
|
<!-- 👉 Logo -->
|
|
<router-link to="/" class="mb-2 mt-2"
|
|
style="width: 100%;position: relative;display: block;">
|
|
<span class="text-center">
|
|
<VImg src="/assets/logo/logo.png" width="50" height="50" class="logo-img" />
|
|
</span>
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- 👉 Address -->
|
|
</div>
|
|
|
|
<!-- 👉 Right Content -->
|
|
<div class="mt-5 ma-sm-4">
|
|
<!-- 👉 Invoice ID -->
|
|
<h6 class="font-weight-medium text-h4">
|
|
Invoice #5036
|
|
</h6>
|
|
|
|
<!-- 👉 Issue Date -->
|
|
<p class="my-3">
|
|
<span>Date: </span>
|
|
<span class="font-weight-medium"> 2024-03-19</span>
|
|
</p>
|
|
|
|
<!-- 👉 Due Date -->
|
|
</div>
|
|
</VCardText>
|
|
<!-- !SECTION -->
|
|
|
|
<VDivider />
|
|
|
|
<!-- 👉 Payment Details -->
|
|
<VCardText class="d-flex justify-space-between flex-wrap flex-column flex-sm-row print-row">
|
|
<div class="mt-4 ma-sm-4">
|
|
<h6 class="text-h6 font-weight-medium mb-6">
|
|
Shipping Information :
|
|
</h6>
|
|
<table>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
Name:
|
|
</td>
|
|
<td class="pb-1">
|
|
<span class="font-weight-medium">
|
|
Mr. John
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
Address:
|
|
</td>
|
|
<td class="pb-1">
|
|
Model Town,American Bank, NA United States 12345
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</VCardText>
|
|
<!-- <VCardText class="d-flex justify-space-between flex-wrap flex-column flex-sm-row print-row">
|
|
<div class="mt-4 ma-sm-4">
|
|
<h6 class="text-h6 font-weight-medium mb-6">
|
|
Shipping Information :
|
|
</h6>
|
|
<table>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
Address:
|
|
</td>
|
|
<td class="pb-1">
|
|
<span class="font-weight-medium">
|
|
Model Town
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
APT/Suite:
|
|
</td>
|
|
<td class="pb-1">
|
|
American Bank
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
City:
|
|
</td>
|
|
<td class="pb-1">
|
|
United States
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
State:
|
|
</td>
|
|
<td class="pb-1">
|
|
ETD95476213874685
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6 pb-1">
|
|
ZipCode:
|
|
</td>
|
|
<td class="pb-1">
|
|
BR91905
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</VCardText> -->
|
|
|
|
<!-- 👉 Table -->
|
|
<VDivider />
|
|
|
|
<VTable class="invoice-preview-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">
|
|
ITEM
|
|
</th>
|
|
<th scope="col" class="text-center">
|
|
COST
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="item in purchasedProducts" :key="item.name">
|
|
<td class="text-no-wrap">
|
|
{{ item.name }}
|
|
</td>
|
|
<td class="text-center">
|
|
${{ item.cost }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
|
|
<VDivider class="mb-2" />
|
|
|
|
<!-- Total -->
|
|
<VCardText class="d-flex justify-space-between flex-column flex-sm-row print-row">
|
|
<div class="my-2 mx-sm-4 text-base">
|
|
|
|
</div>
|
|
|
|
<div class="my-2 mx-sm-4">
|
|
<table>
|
|
<tr>
|
|
<td class="text-end">
|
|
<div class="me-5">
|
|
<p class="mb-2">
|
|
Subtotal:
|
|
</p>
|
|
<p class="mb-2">
|
|
Discount:
|
|
</p>
|
|
<p class="mb-2">
|
|
Tax:
|
|
</p>
|
|
<p class="mb-2">
|
|
Total:
|
|
</p>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="font-weight-medium text-high-emphasis">
|
|
<p class="mb-2">
|
|
$154.25
|
|
</p>
|
|
<p class="mb-2">
|
|
$00.00
|
|
</p>
|
|
<p class="mb-2">
|
|
$50.00
|
|
</p>
|
|
<p class="mb-2">
|
|
$204.25
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</VCardText>
|
|
|
|
<VDivider />
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<!-- 👉 Add Payment Sidebar -->
|
|
<!-- <InvoiceAddPaymentDrawer v-model:isDrawerOpen="isAddPaymentSidebarVisible" /> -->
|
|
|
|
<!-- 👉 Send Invoice Sidebar -->
|
|
<!-- <InvoiceSendInvoiceDrawer v-model:isDrawerOpen="isSendPaymentSidebarVisible" /> -->
|
|
</section>
|
|
</template>
|
|
<style lang="scss">
|
|
.invoice-preview-table {
|
|
--v-table-row-height: 44px !important;
|
|
}
|
|
|
|
.logo-img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media print {
|
|
.v-application {
|
|
background: none !important;
|
|
}
|
|
|
|
@page {
|
|
margin: 0;
|
|
size: auto;
|
|
}
|
|
|
|
.layout-page-content,
|
|
.v-row,
|
|
.v-col-md-9 {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.product-buy-now {
|
|
display: none;
|
|
}
|
|
|
|
.v-navigation-drawer,
|
|
.layout-vertical-nav,
|
|
.app-customizer-toggler,
|
|
.layout-footer,
|
|
.layout-navbar,
|
|
.layout-navbar-and-nav-container {
|
|
display: none;
|
|
}
|
|
|
|
.v-card {
|
|
box-shadow: none !important;
|
|
|
|
.print-row {
|
|
flex-direction: row !important;
|
|
}
|
|
}
|
|
|
|
.layout-content-wrapper {
|
|
padding-inline-start: 0 !important;
|
|
}
|
|
}
|
|
</style>
|