Ver Fonte

[ADD] ticket in summary display

Gogs há 7 anos atrás
pai
commit
8b6e971b42
1 ficheiros alterados com 107 adições e 15 exclusões
  1. 107 15
      src/components/SummaryDisplay.vue

+ 107 - 15
src/components/SummaryDisplay.vue

@@ -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>