|
@@ -2,16 +2,30 @@
|
|
|
.summary
|
|
|
.ticket-summary
|
|
|
.ticket-summary-header
|
|
|
- h3 Compañía
|
|
|
- .ticket-items-wrapper
|
|
|
- .ticket-summary-footer
|
|
|
- div
|
|
|
- .ticket-summary-footer-left
|
|
|
- h3 Cliente
|
|
|
- .ticket-summary-footer-right
|
|
|
- h3 Ocasional
|
|
|
+ h3 {{ company.name }}
|
|
|
|
|
|
+ table
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ td Producto
|
|
|
+ td Precio
|
|
|
+ td Cant
|
|
|
+ td Subtotal
|
|
|
|
|
|
+ .ticket-items-wrapper
|
|
|
+ table
|
|
|
+ tbody
|
|
|
+ tr(v-for="item in cart" :key="item")
|
|
|
+ td {{ item.name }}
|
|
|
+ td {{ item.list_price }}
|
|
|
+ td {{ item.qty }}
|
|
|
+ td {{ item.qty * item.list_price }}
|
|
|
+ .ticket-summary-footer
|
|
|
+ table
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ td Cliente
|
|
|
+ td {{ getCustomer().name }}
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -19,6 +33,8 @@
|
|
|
|
|
|
export default {
|
|
|
computed: mapGetters({
|
|
|
+ company: 'getCompany',
|
|
|
+ cart: 'getCartItems',
|
|
|
total: 'getTotal',
|
|
|
customer: 'getSelectedCustomer',
|
|
|
hasSelectedCustomer: 'hasSelectedCustomer'
|
|
@@ -39,6 +55,7 @@
|
|
|
.summary
|
|
|
width: 100%
|
|
|
height: 100%
|
|
|
+ font-size: 8pt
|
|
|
display: flex
|
|
|
|
|
|
.ticket-summary
|
|
@@ -46,6 +63,7 @@
|
|
|
height: 450px
|
|
|
border: 1px solid #d3d3d3
|
|
|
margin: auto
|
|
|
+ box-shadow: -2px 2px 5px #d3d3d3, 2px 2px 5px #d3d3d3
|
|
|
position: relative
|
|
|
|
|
|
.ticket-summary-header, .ticket-summary-footer
|
|
@@ -58,17 +76,91 @@
|
|
|
|
|
|
h3
|
|
|
text-align: center
|
|
|
- border-bottom: 1px solid #d3d3d3;
|
|
|
+ font-size: 14pt
|
|
|
margin: 0 15px;
|
|
|
- padding: 30px 0 20px 0;
|
|
|
+ padding: 30px 0 15px 0;
|
|
|
color: #666
|
|
|
|
|
|
+ table
|
|
|
+ width: 308px
|
|
|
+ height: 30px
|
|
|
+ margin: 0 20px
|
|
|
+ font-size: 7.5pt
|
|
|
+ font-weight: bold
|
|
|
+
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ line-height: 30px
|
|
|
+ border-top: 1px solid #d3d3d3
|
|
|
+ border-bottom: 1px solid #d3d3d3
|
|
|
+
|
|
|
+ td
|
|
|
+ &:nth-child(1)
|
|
|
+ width: 180px
|
|
|
+ text-align: left
|
|
|
+
|
|
|
+ &:nth-child(2)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(3)
|
|
|
+ width: 30px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(4)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+
|
|
|
+ .ticket-items-wrapper
|
|
|
+ width: 310px
|
|
|
+ height: 280px
|
|
|
+ margin: 95px 20px 75px 20px
|
|
|
+ padding-top: 5px
|
|
|
+ overflow-y: auto
|
|
|
+
|
|
|
+ table
|
|
|
+ width: 100%
|
|
|
+ font-size: 7.5pt
|
|
|
+
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ height: 28px
|
|
|
+ line-height: 30px
|
|
|
+
|
|
|
+ td
|
|
|
+ &:nth-child(1)
|
|
|
+ width: 180px
|
|
|
+
|
|
|
+ &:nth-child(2)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(3)
|
|
|
+ width: 30px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(4)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
.ticket-summary-footer
|
|
|
- height: 45px
|
|
|
+ width: 348px
|
|
|
+ height: 75px
|
|
|
bottom: 0
|
|
|
+ padding: 15px 25px
|
|
|
+ background: #fff
|
|
|
+
|
|
|
+ table
|
|
|
+ width: 100%
|
|
|
+
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ td
|
|
|
+ &:nth-child(1)
|
|
|
+ font-weight: bold
|
|
|
+
|
|
|
+ &:nth-child(2)
|
|
|
+ text-align: right
|
|
|
|
|
|
- .ticket-items-wrapper
|
|
|
- width: 320px
|
|
|
- height: 340px
|
|
|
- margin: 65px 15px 45px 15px
|
|
|
</style>
|