123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <template lang="pug">
- li.cart-item
- h3.item-name {{ item.display_name }}
- input.item-quantity(type="text" :value="item.qty")
- span.item-x x
- span.item-price {{ getPrice() }}
- span.item-equals =
- span.item-subtotal {{ getSubtotal() }}
- </template>
- <script>
- export default {
- props: {
- item: {
- type: Object,
- required: true,
- default: () => {
- return {}
- }
- }
- },
- methods: {
- getPrice() {
- return accounting.formatMoney(this.item.list_price, '₲', 0, '.', ',')
- },
- getSubtotal() {
- return accounting.formatMoney(this.item.list_price * this.item.qty, '₲', 0, '.', ',')
- }
- },
- mounted() {
- this.$set(this.item, 'qty', 1)
- }
- }
- </script>
- <style lang="sass">
- .cart-item
- width: 100%
- height: 84px
- list-style: none outside none
- border-bottom: 1px solid #d3d3d3
- box-sizing: border-box
- &:hover
- background: #f5f5f5
- transition-duration: 1s
- cursor: pointer
- .item-name
- width: 100%
- height: 20px
- margin: 5px
- float: left
- font:
- size: 8pt
- .item-quantity
- width: 50px
- height: 30px
- margin-top: 6px
- text-align: right
- float: left
- .item-x
- width: 20px
- height: 20px
- margin-top: 12px
- text-align: center
- float: left
- .item-price
- width: 80px
- height: 20px
- margin-top: 12px
- text-align: right
- float: left
- .item-equals
- width: 20px
- height: 20px
- margin-top: 12px
- text-align: center
- float: left
- .item-subtotal
- width: 100px
- height: 20px
- margin-top: 12px
- padding-right: 15px
- text-align: right
- float: right
- font-weight: bold
- </style>
|